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.
162 lines
3.5 KiB
162 lines
3.5 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'" style="width: 100%;margin-left: 0;">
|
|
<view class="idcard_1">
|
|
<image :src="selectedImg" />
|
|
</view>
|
|
|
|
<view class="idcard_2">
|
|
<view class="idcard_2_1">
|
|
<u-tabs :list="list1" lineWidth="30" lineColor="#5A8FFF" :activeStyle="{
|
|
color: '#5A8FFF',
|
|
fontWeight: 'bold',
|
|
transform: 'scale(1.05)'
|
|
}" :inactiveStyle="{
|
|
color: '#999999',
|
|
transform: 'scale(1)'
|
|
}"></u-tabs>
|
|
</view>
|
|
|
|
<view class="idcard_2_2">
|
|
<scroll-view class="idcard_2_2_1"
|
|
enable-flex="true"
|
|
scroll-x="true"
|
|
scroll-with-animation="true">
|
|
<view style="overflow: hidden;" class="idcard_2_2_1_one" v-for="(item,key) in tem_list" :key="key" @tap="selectThis(key)">
|
|
<view class="idcard_2_2_1_one_1">
|
|
<image :src="item.url"/>
|
|
</view>
|
|
<view class="idcard_2_2_1_one_2" :style="key != selectedIndex ? 'display:none' : ''">
|
|
<view class="idcard_2_2_1_one_2_1">
|
|
<image src="/static/img/common/idcard_1.png"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import custom_navbar from "../photo/components/photo_header.vue";
|
|
export default {
|
|
components: {
|
|
custom_navbar
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
navbar_title: '二寸证件照',
|
|
theme: "white1",
|
|
margin_top: 10,
|
|
selectedImg:'',
|
|
selectedIndex:0,
|
|
list1: [{
|
|
id: 1,
|
|
name: '女装'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '男装'
|
|
},
|
|
],
|
|
tem_list: [{
|
|
id: 1,
|
|
url: '/static/img/index/banner.png'
|
|
},
|
|
{
|
|
id: 2,
|
|
url: 'https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/234494/2/24198/178409/66a8aad1F59feafc5/41e6871120f47687.jpg'
|
|
},
|
|
{
|
|
id: 3,
|
|
url: '/static/img/index/banner.png'
|
|
},
|
|
{
|
|
id: 4,
|
|
url: 'https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/234494/2/24198/178409/66a8aad1F59feafc5/41e6871120f47687.jpg'
|
|
},
|
|
{
|
|
id: 5,
|
|
url: '/static/img/index/banner.png'
|
|
},
|
|
{
|
|
id: 6,
|
|
url: 'https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/234494/2/24198/178409/66a8aad1F59feafc5/41e6871120f47687.jpg'
|
|
},
|
|
{
|
|
id: 7,
|
|
url: '/static/img/index/banner.png'
|
|
},
|
|
{
|
|
id: 8,
|
|
url: 'https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/234494/2/24198/178409/66a8aad1F59feafc5/41e6871120f47687.jpg'
|
|
},
|
|
{
|
|
id: 9,
|
|
url: '/static/img/index/banner.png'
|
|
},
|
|
{
|
|
id: 10,
|
|
url: 'https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/234494/2/24198/178409/66a8aad1F59feafc5/41e6871120f47687.jpg'
|
|
},
|
|
{
|
|
id: 11,
|
|
url: '/static/img/index/banner.png'
|
|
},
|
|
{
|
|
id: 12,
|
|
url: 'https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/234494/2/24198/178409/66a8aad1F59feafc5/41e6871120f47687.jpg'
|
|
},
|
|
]
|
|
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
getNavHeight(e) {
|
|
this.margin_top += e;
|
|
},
|
|
selectThis(index){
|
|
this.selectedImg = this.tem_list[index].url;
|
|
this.selectedIndex = index;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './this.scss';
|
|
|
|
.photo_back {
|
|
background-color: #F5F6FB;
|
|
}
|
|
</style> |