jgl
/
photo_uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1111

Browse Source
main
SD-20230427NBFT\Administrator 9 months ago
parent 8c2eba2bce
commit 678c0745ea
9 changed files with 584 additions and 1 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 12
      .gitignore
  2. 23
      pages.json
  3. 130
      pagesA/photo/components/photo_header.vue
  4. 134
      pagesA/photo/photo_1.vue
  5. 84
      pagesA/photo/photo_2.vue
  6. 202
      pagesA/photo/this.scss
  7. BIN
      static/img/common/search_icon.png
  8. BIN
      static/img/common/tab_1.png
  9. BIN
      static/img/photo/photo_12.png

12
.gitignore vendored
Unescape View File

@ -0,0 +1,12 @@
unpackage/*
!unpackage/res/
node_modules/*
.idea/*
deploy.sh
.hbuilderx/
.vscode/
**/.DS_Store
.env
yarn.lock
package-lock.json
*.keystore

23
pages.json
Unescape View File

@ -73,7 +73,28 @@
}
],
"subPackages": [],
"subPackages": [
{
"root": "pagesA",
"pages": [{
"path": "photo/photo_1",
"style": {
"navigationBarTitleText": "AI写真",
"navigationStyle": "custom"
}
},
{
"path": "photo/photo_2",
"style": {
"navigationBarTitleText": "AI写真",
"navigationStyle": "custom"
}
}
]
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "%app.name%",

130
pagesA/photo/components/photo_header.vue
Unescape View File

@ -0,0 +1,130 @@
<template>
<view :style="{ height: navHeight + 'rpx' }">
<!-- <u-navbar :bgColor="theme == 'light' ? '#000' : 'transparent'"> -->
<u-navbar :bgColor="thisBack">
<view :class="[theme == 'light' ? 'u-nav-slot_dark' : 'u-nav-slot_light']" slot="left">
<u-icon name="arrow-left" size="19" @click="goBack()"
:color="theme == 'light' ? '#fff' : '#3D3D3D'"></u-icon>
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
<u-icon name="home-fill" size="20" @click="goSwitch()"
:color="theme == 'light' ? '#fff' : '#3D3D3D'"></u-icon>
</view>
<view :class="[theme == 'light' ? 'text-white' : 'text-black', 'text-bold']" slot="center">{{ title }}</view>
</u-navbar>
</view>
</template>
<script>
export default {
// theme: light || dark
props: ["bgColor", "title", "theme"],
data() {
return {
navHeight: 80,
thisBack:'',
thisColor:''
}
},
onLoad(options) {
},
watch: {
theme(newValue, oldValue) {
if (newValue !== oldValue) {
switch(this.theme) {
case 'light':
this.thisBack = '#000';
break;
case 'white':
this.thisBack = '#E3E8FE';
break;
default :
this.thisBack = 'transparent';
}
}
},
},
mounted() {
//this.setNavigationBarColor()
switch(this.theme) {
case 'light':
this.thisBack = '#000';
break;
case 'white':
this.thisBack = '#E3E8FE';
break;
default :
this.thisBack = 'transparent';
}
this.getNavHeight()
},
methods: {
setNavigationBarColor() {
let frontColor = this.theme == 'light' ? '#ffffff' : '#3d3d3d';
// uni.setNavigationBarColor({ frontColor, backgroundColor: '#3d3d3d' })
uni.setNavigationBarColor({
frontColor: frontColor,
backgroundColor: '#3d3d3d'
})
},
getNavHeight() {
const info = uni.getSystemInfoSync();
this.$emit('getNavHeight', info.statusBarHeight);
},
goBack() {
uni.navigateBack();
},
goSwitch() {
uni.switchTab({
url:'/pages/index/index'
})
}
}
}
</script>
<style lang="scss" scoped>
.u-nav-slot_light {
background-color: #fff;
@include flex;
align-items: center;
justify-content: space-between;
border: 2rpx solid $u-border-color;
border-radius: 64rpx;
padding: 12rpx 24rpx;
opacity: 0.8;
}
.u-nav-slot_dark {
background: rgba(0, 0, 0, 0.15);
@include flex;
align-items: center;
justify-content: space-between;
border: 2rpx solid rgba(255, 255, 255, 0.254);
border-radius: 64rpx;
padding: 12rpx 24rpx;
opacity: 0.8;
}
</style>

134
pagesA/photo/photo_1.vue
Unescape View File

@ -0,0 +1,134 @@
<template>
<view>
<view class="content photo_back">
<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" />
<view class="photo_main" :style="'margin-top:'+margin_top+'px'">
<view class="search_div">
<view class="search_div_1">
<image src="/static/img/common/search_icon.png" />
</view>
<view class="search_div_2">
<u--input placeholder="请输入搜索内容" border="none" v-model="search_text"></u--input>
</view>
<view class="search_div_3" @tap="goSearch">搜索</view>
</view>
<view class="tabs_div">
<u-tabs @click="changeTab()" :list="list1" lineWidth="25" lineHeight="10"
:lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
color: '#333333',
fontWeight: 'bold',
transform: 'scale(1.2)'
}" :inactiveStyle="{
color: '#333333',
transform: 'scale(1)'
}" itemStyle="padding-left: 15; padding-right:15px; height: 100rpx; width:140rpx">
</u-tabs>
</view>
<scroll-view class="photo_list_div" enable-flex="true" scroll-y="true" @scrolltolower="lower" lower-threshold="2">
<view class="photo_list_div_one" v-for="n in 10">
<view class="photo_list_div_one_img" >
<image
src="https://img30.360buyimg.com/sku/jfs/t1/221254/4/39390/74349/661e039aF46114279/48532008a0001dd0.jpg"
mode="aspectFill" />
</view>
<view class="photo_list_div_one_text">
港风复古-{{n}}
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
import custom_navbar from "./components/photo_header.vue";
export default {
components: {
custom_navbar
},
data() {
return {
navbar_title: 'AI写真',
theme: "white",
search_text: '',
margin_top: 10,
lineBg: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAOCAYAAABDwm71AAAAAXNSR0IArs4c6QAAAm5JREFUSEu1lD1oFEEUx39vZhOCpghikUIwkMKAjYWFEEELQdQTRfwqLGyMgsFcNDEWEbYQNB+Sw7ugdilSBDQ2tikSsFCwsBFiIVikSBEwQoRLuMzT3ds9z8vtXcjHwOzCzs57v/ef/xshGmdeaLsVUgZQYeZ9t3yN13bz/bpf2wVSYQ7DTNdQMa8Ej1RO76JkRPBQ8JS8OAbfpeX5bkLlHumAcTyxihcIAuSBvlsjMi7nc3pY4TPQFJIq2GiKY3TpF49nfQk27NjwffX25RkzSreJckVggS4FhQ5JZbVHhEwpaxlYsMk4PjYYbk6m5dtOkGUG9ZBzTFjHsUCASrAgh0I6BKMMrFyxeJN15A28susMTTyUxa0A+v3auqeRHqP0GcWLTyURLDL9fOivCHfDpljFAFCZ8oS3P38z98aXlVqQvq/N4jjhKddNcYZApYKrK5ZXw9HQ/OfG9YEoo5UeK1VTcbwhuKPwN9m8VeYNLHqO5cAnxtFs4YBxdFilw4BnXdG3teLFHgO6Q/PHFZ/N6QUDU6I0JSpWL3iVAsrsUA8sr3Cja0SmS9dF6S7LameDMmmgrW6FtSCKTVNUiVDdeootoFy+PSqfYpaSYvGHi2PaIoaXhtAT/wXcFqyrfpQCE2ur9PZmZLncrxvA4sVLWe206+SscqSqWberGHwRSN97KnPVGigRLP75akZPNzjSxnHKgrdlFYuKFQzMWMez+wlAiUeZ1P5XhrV1r+GacZy0cNwo+2s2yT+PLXmOD1aZlTWmB4ZlYTP3YF3FkoLc8bVNGjkYNUqLB82R0VeMY9kTfqw6vg/7mwOpzPMHTiZrgwPNrpsAAAAASUVORK5CYII=',
list1: [{
name: '女生'
}, {
name: '男生',
}],
}
},
mounted() {
//this.getScreenSize();
//initListHeight();
},
methods: {
lower(){
console.log('this is lower')
},
getNavHeight(e) {
this.margin_top += e;
},
goSearch() {
console.log(this.search_text);
},
changeTab(e) {
console.log(e)
},
initListHeight(){
},
getScreenSize() {
uni.getSystemInfo({
success: (res) => {
const screenWidth = res.windowWidth; // 屏幕宽度，单位为px
const screenHeight = res.windowHeight; // 屏幕高度，单位为px
console.log('屏幕宽度：', screenWidth);
console.log('屏幕高度：', screenHeight);
},
});
},
}
}
</script>
<style lang="scss" scoped>
@import './this.scss';
// page {
// //background-color: #E3E8FE !important;
// }
.photo_back {
background-color: #E3E8FE;
min-height: 100vh;
width: 100%;
top: 0;
left: 0;
height: 100%;
overflow: hidden;
}
</style>

84
pagesA/photo/photo_2.vue
Unescape View File

@ -0,0 +1,84 @@
<template>
<view>
<view class="content photo_back">
<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" />
<view class="photo_main" :style="'margin-top:'+margin_top+'px'">
<view class="photo_tem_1">
<view class="photo_tem_1_head">
<view class="photo_tem_1_head_1">
<image mode="aspectFill"
src="https://img30.360buyimg.com/sku/jfs/t1/221254/4/39390/74349/661e039aF46114279/48532008a0001dd0.jpg" />
</view>
<view class="photo_tem_1_head_2">
<view class="photo_tem_1_head_2_1">复古港风</view>
<view class="photo_tem_1_head_2_2">走进中国香港90年代的繁华</view>
</view>
<view class="photo_tem_1_head_3">
<view class="y_btn">
免费
</view>
</view>
</view>
<view class="photo_tem_1_2">
<u-swiper :list="photo_list"
indicator indicatorMode="line"
circular
radius="24rpx"
height="880rpx"
></u-swiper>
</view>
</view>
<view class="photo_tem_2">
使用模板生成
</view>
</view>
</view>
</view>
</template>
<script>
import custom_navbar from "./components/photo_header.vue";
export default {
components: {
custom_navbar
},
data() {
return {
navbar_title: 'AI写真',
theme: "white",
margin_top: 10,
photo_list: [
'https://img30.360buyimg.com/sku/jfs/t1/221254/4/39390/74349/661e039aF46114279/48532008a0001dd0.jpg',
'https://img30.360buyimg.com/sku/jfs/t1/221254/4/39390/74349/661e039aF46114279/48532008a0001dd0.jpg',
'https://img30.360buyimg.com/sku/jfs/t1/221254/4/39390/74349/661e039aF46114279/48532008a0001dd0.jpg',
],
}
},
mounted() {
},
methods: {
getNavHeight(e) {
this.margin_top += e;
}
}
}
</script>
<style lang="scss" scoped>
@import './this.scss';
</style>

202
pagesA/photo/this.scss
Unescape View File

@ -0,0 +1,202 @@
.photo_main{
//background-color: #E3E8FE;
width: 702rpx;
margin-left: 24rpx;
top: 0;
left: 0;
color: #000;
overflow: hidden;
}
.photo_back {
background-color: #E3E8FE;
min-height: 100vh;
width: 100%;
top: 0;
left: 0;
height: 100%;
overflow: hidden;
}
image{
width: 100%;
height: 100%;
}
.search_div{
width: 100%;
height: 80rpx;
background: #FFFFFF;
border-radius: 40rpx 40rpx 40rpx 40rpx;
display: flex;
justify-content: space-between;
align-items: center;
.search_div_1{
width: 45rpx;
height: 45rpx;
margin-left: 24rpx;
}
.search_div_2{
width: 400rpx;
}
.search_div_3{
width: 158rpx;
height: 64rpx;
color: #fff;
font-size: 26rpx;
font-weight: bold;
background: linear-gradient(to right, #5093FF, #9478FF);
border-radius: 32rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 24rpx;
}
}
.tabs_div{
width:350rpx;
margin: 10rpx auto;
}
.photo_list_div{
width: 100%;
margin-top: 20rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
height: calc(100vh - 425rpx);
// overflow-x: hidden;
// overflow-y: scroll;
.photo_list_div_one{
width: 340rpx;
height: 440rpx;
margin-bottom: 20rpx;
// margin-top: 24rpx;
.photo_list_div_one_img{
width: 100%;
height: 100%;
image{
width: 100%;
height: 100%;
border-radius: 24rpx;
}
}
.photo_list_div_one_text{
margin-top: -66rpx;
margin-left: 2%;
width: 96%;
display: flex;
justify-content: center;
color: #fff;
font-size: 28rpx;
font-weight: 400;
height: 40rpx;
overflow: hidden;
}
}
}
// ---------------------------- photo_tem_1
.photo_tem_1{
margin-top: 20rpx;
width:100%;
height: 1120rpx;
background: url('/static/img/photo/photo_12.png') no-repeat;
background-size: 100% 100%;
overflow: hidden;
.photo_tem_1_head{
width: 654rpx;
display: flex;
margin: 36rpx auto;
justify-content: space-between;
align-items: center;
.photo_tem_1_head_1{
width: 80rpx;
height: 80rpx;
border-radius: 8rpx;
image{
border-radius: 8rpx;
}
}
.photo_tem_1_head_2{
width: 400rpx;
.photo_tem_1_head_2_1{
color: #fff;
font-size: 28rpx;
}
.photo_tem_1_head_2_2{
color: #fff;
font-size: 22rpx;
}
}
.photo_tem_1_head_3{
width: 120rpx;
height: 54rpx;
margin-top: 12rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border-radius: 38rpx;
.y_btn{
width: 112rpx;
height: 44rpx;
color: #3B1705;
background-color: #FBE579;
border-radius: 30rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
font-weight: bold;
}
}
}
.photo_tem_1_2{
width: 654rpx;
height: 880rpx;
margin:76rpx auto;
border-radius: 24rpx;
image{
border-radius: 24rpx;
}
}
}
.photo_tem_2{
margin-top: 100rpx;
width: 702rpx;
height: 88rpx;
background: linear-gradient(to right, #4F93FF, #9976FF);
border-radius: 80rpx;
color: #fff;
font-size: 30rpx;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-bottom: 40rpx;
}

BIN
static/img/common/search_icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
static/img/common/tab_1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 692 B

BIN
static/img/photo/photo_12.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

Write Preview
Loading…
Cancel
Save