You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
3.8 KiB
134 lines
3.8 KiB
<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> |