SD-20230427NBFT\Administrator
9 months ago
parent
8c2eba2bce
commit
678c0745ea
@ -0,0 +1,12 @@ |
|||||||
|
unpackage/* |
||||||
|
!unpackage/res/ |
||||||
|
node_modules/* |
||||||
|
.idea/* |
||||||
|
deploy.sh |
||||||
|
.hbuilderx/ |
||||||
|
.vscode/ |
||||||
|
**/.DS_Store |
||||||
|
.env |
||||||
|
yarn.lock |
||||||
|
package-lock.json |
||||||
|
*.keystore |
||||||
@ -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> |
||||||
@ -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> |
||||||
@ -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> |
||||||
@ -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; |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 692 B |
|
After Width: | Height: | Size: 22 KiB |
Loading…
Reference in new issue