<template> <view> <view class="container" v-if="type===2"> <view class="detail"> <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> <view class="detail2"> <view class="detail2_name">{{details.data.p_name}}</view> <view class="detail2_tui"><text>支持7天无条件退货</text><text>顺丰发货</text></view> <view class="detail2_price"> <text>¥{{details.data.p_sale_price*count}}</text> <view class="counter"> <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> <text>{{count}}</text> <view class="btn" @click="counter(true)">+</view> </view> </view> </view> </view> <view class="choose"> <view class="colour"> <view class="colour1" @click="xialachange(0)"> <text>框架颜色</text> <image v-bind:src="isNone[0].img"></image> </view> <view class="colour_exp">*{{navData.colour}}</view> <view> <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}"> <view v-for="(items,index) in details.data.skuList" :key="index" @click="viewChoose(index)" class="colour2_view" v-bind:class="{'colour2_viewed': chooseNum == index}" > <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image> </view> </view> </view> <hr/> </view> <view class="colour"> <view class="colour1" @click="xialachange(1)"> <text>镜片颜色</text> <image v-bind:src="isNone[1].img"></image> </view> <view class="colour_exp">*BL192345 粉紫色【限时打折】</view> <view v-bind:class="{'colour2_none' : isNone[1].state}"> <view class="jp_colour2"> <view v-for="(items,index) in jp_colour" :key="index" class="jp_colour2_view" > <image v-bind:src="items.img"></image> </view> </view> </view> <hr/> </view> <view class="colour"> <view class="colour1" @click="xialachange(2)"> <text>{{details.data.attrList[0].meta_name}}</text> <text class="colour_exp colour1_span2">注:折射率越高,镜片越薄</text> <image v-bind:src="isNone[2].img"></image> </view> <view> <view class="colour_exp">*{{navData.split}}</view> <view class="split" v-bind:class="{'colour2_none' : isNone[2].state}"> <view v-for="(items,index) in details.data.attrList[0].attr" :key="index" > <view class="split_colour2" @click="splitChoose(index,items.name)" v-bind:class="{'split_colour2 split_colour2_actived' : isSplit == index}" >{{items.name}}</view> </view> </view> </view> <hr/> </view> <view class="size"> <view class="size1" @click="xialachange(3)"> <view class="size1_1">框架尺寸</view> <view><image v-bind:src="isNone[3].img"></image></view> </view> <view class="colour"> <view class="colour_exp">*{{navData.colour}}</view> </view> <view class="D3_list" v-bind:class="{'colour2_none' : isNone[3].state}"> <view> <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> <view class="D3_list_jDu"> <view class="D3_list1"> <c-progress class="c-progress" :inner_widthProp="300"/> <text>{{details.data.frame_width}}mm</text> </view> <view>{{parameter[0].standard}}</view> </view> </view> <view> <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> <view class="D3_list_jDu"> <view class="D3_list1"> <c-progress class="c-progress" :inner_widthProp="190"/> <view>{{details.data.glass_width}}mm</view> </view> <view>{{parameter[1].standard}}</view> </view> </view> <view> <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> <view class="D3_list_jDu"> <view class="D3_list1"> <c-progress class="c-progress" :inner_widthProp="210"/> <view>{{details.data.glass_height}}mm</view> </view> <view>{{parameter[2].standard}}</view> </view> </view> <view> <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> <view class="D3_list_jDu"> <view class="D3_list1"> <c-progress class="c-progress" :inner_widthProp="160"/> <view>{{details.data.nose_width}}mm</view> </view> <view>{{parameter[3].standard}}</view> </view> </view> <view> <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> <view class="D3_list_jDu"> <view class="D3_list1"> <c-progress class="c-progress" :inner_widthProp="260"/> <view>{{details.data.leg_long}}mm</view> </view> <view>{{parameter[4].standard}}</view> </view> </view> </view> <hr/> </view> <view class="part"> <view class="size1" @click="xialachange(4)"> <view class="size1_1">配件</view> <view><span>+¥0.00</span><image v-bind:src="isNone[4].img"></image></view> </view> <view class="colour_exp">*0290</view> <view class="part_som" v-bind:class="{'colour2_none' : isNone[4].state}"> <view v-for="(part) in part" :key="part.key" v-bind:class="{'size_viewed': part.is_actived}" > <image v-bind:src="part.img"></image> </view> </view> </view> </view> <view class="buy"> <view class="buy1">选了镜框,想选镜片?</view> <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view> <view class="buy3"> <view class="buy3_1">暂时不选</view> <view class="buy3_2" @click="popArgs">立即去选</view> </view> </view> <template > <view class="goods-form"> <text class="p1">填写验光数据</text> <text class="p2">没有验光数据?请到线下眼镜店验光哦~</text> <view class="picker" > <view class="picker-choice"> <view class="choice-left"> <text class="p11">{{pickerInfoList[0].nameC}}</text> <text class="p12">{{pickerInfoList[0].nameE}}</text> </view> <text class="p13">左 (OD)</text> <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> <image src="../../static/detail-tabicon.png" ></image> </picker> <text class="p13">右 (OS)</text> <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> <image src="../../static/detail-tabicon.png" ></image> </picker> </view> </view> <view class="picker" > <view class="picker-choice"> <view class="choice-left"> <text class="p11">{{pickerInfoList[1].nameC}}</text> <text class="p12">{{pickerInfoList[1].nameE}}</text> </view> <text class="p13">左 (OD)</text> <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> <image src="../../static/detail-tabicon.png" ></image> </picker> <text class="p13">右 (OS)</text> <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> <image src="../../static/detail-tabicon.png" ></image> </picker> </view> </view> <view class="picker" > <view class="picker-choice"> <view class="choice-left"> <text class="p11">{{pickerInfoList[2].nameC}}</text> <text class="p12">{{pickerInfoList[2].nameE}}</text> </view> <text class="p13">左 (OD)</text> <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> <image src="../../static/detail-tabicon.png" ></image> </picker> <text class="p13">右 (OS)</text> <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> <image src="../../static/detail-tabicon.png" ></image> </picker> </view> </view> <view class="picker" > <view class="picker-choice"> <view class="choice-left"> <text class="p11">{{pickerInfoList[3].nameC}}</text> <text class="p12">{{pickerInfoList[3].nameE}}</text> </view> <text class="p13">左 (OD)</text> <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> <image src="../../static/detail-tabicon.png" ></image> </picker> <text class="p13">右 (OS)</text> <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> <image src="../../static/detail-tabicon.png" ></image> </picker> </view> </view> <view class="picker" > <view class="picker-choice"> <view class="choice-left"> <text class="p11">{{pickerInfoList[4].nameC}}</text> </view> <text class="p13-date">年 (Y)</text> <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1"> <image src="../../static/detail-tabicon.png" ></image> </picker> <text class="p13-date">月 (M)</text> <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2"> <image src="../../static/detail-tabicon.png" ></image> </picker> <text class="p13-date">日 (D)</text> <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3"> <image src="../../static/detail-tabicon.png" ></image> </picker> </view> </view> <view class="confirm"> <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image> <text>确认以上输入信息来源于我的验光数据!</text> </view> </view> </template> <view class="zhanwei"></view> <view class="button" @click="popSure(details.data.p_name,details.data.p_sale_price)" ><view>立即结算</view></view> </view> <view class="container" v-if="type===4"> <view class="detail"> <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> <view class="detail2"> <view class="detail2_name">{{details.data.p_name}}</view> <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> <view class="detail2_price"> <span>¥{{details.data.p_sale_price*count}}</span> <view class="counter"> <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> <text>{{count}}</text> <view class="btn" @click="counter(true)">+</view> </view> </view> </view> </view> <view class="choose"> <view class="colour"> <view class="colour1" @click="xialachange(0)"> <text>框架颜色</text> <image v-bind:src="isNone[0].img"></image> </view> <view class="colour_exp">*{{navData.colour}}</view> <view> <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}"> <view v-for="(items,index) in details.data.skuList" :key="index" @click="viewChoose(index)" class="colour2_view" v-bind:class="{'colour2_viewed': chooseNum == index}" > <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image> </view> </view> </view> <hr/> </view> <view class="size"> <view class="size1" @click="xialachange(1)"> <view class="size1_1">框架尺寸</view> <view><image v-bind:src="isNone[1].img"></image></view> </view> <view class="colour"> <view class="colour_exp">*{{navData.colour}}</view> </view> <view class="D3_list" v-bind:class="{'colour2_none' : isNone[1].state}"> <view> <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> <view class="D3_list_jDu"> <view class="D3_list1"> <c-progress class="c-progress" :inner_widthProp="300"/> <text>{{details.data.frame_width}}mm</text> </view> <view>{{parameter[0].standard}}</view> </view> </view> <view> <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> <view class="D3_list_jDu"> <view class="D3_list1"> <c-progress class="c-progress" :inner_widthProp="190"/> <view>{{details.data.glass_width}}mm</view> </view> <view>{{parameter[1].standard}}</view> </view> </view> <view> <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> <view class="D3_list_jDu"> <view class="D3_list1"> <c-progress class="c-progress" :inner_widthProp="210"/> <view>{{details.data.glass_height}}mm</view> </view> <view>{{parameter[2].standard}}</view> </view> </view> <view> <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> <view class="D3_list_jDu"> <view class="D3_list1"> <c-progress class="c-progress" :inner_widthProp="160"/> <view>{{details.data.nose_width}}mm</view> </view> <view>{{parameter[3].standard}}</view> </view> </view> <view> <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> <view class="D3_list_jDu"> <view class="D3_list1"> <c-progress class="c-progress" :inner_widthProp="260"/> <view>{{details.data.leg_long}}mm</view> </view> <view>{{parameter[4].standard}}</view> </view> </view> <hr/> </view> </view> <view class="part"> <view class="size1" @click="xialachange(2)"> <view class="size1_1" >配件</view> <view> <span>+¥0.00</span> <image v-bind:src="isNone[2].img"></image> </view> </view> <view class="colour_exp">*0290</view> <view class="part_som" v-bind:class="{'colour2_none' : isNone[2].state}"> <view v-for="(part) in part" :key="part.key" v-bind:class="{'size_viewed': part.is_actived}" > <image v-bind:src="part.img"></image> </view> </view> </view> </view> <view class="buy"> <view class="buy1">选了镜框,想选镜片?</view> <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view> <view class="buy3"> <view class="buy3_1">暂时不选</view> <view class="buy3_2" @click="popArgs">立即去选</view> </view> </view> <view class="zhanwei"></view> <view class="button"><view @click="popSure(details.data.p_name,details.data.p_sale_price)" >立即结算</view></view> </view> </view> </template> <script> import CProgress from '../../components/UniSliper/UniSliper' import store from '@/store' export default { components: { CProgress }, data(){ return{ type: 2, count: 1, chooseNum : '', isSplit: '' , isNone:[ {state: false ,img: '/static/img/detail/xiala.png'}, {state: false ,img: '/static/img/detail/xiala.png'}, {state: false ,img: '/static/img/detail/xiala.png'}, {state: false ,img: '/static/img/detail/xiala.png'}, {state: false ,img: '/static/img/detail/xiala.png'}, ], //传参 navData:{ pid: "26", p_root_index: "4", name:'', price:'', type:'', split: '1.56非球面防蓝光', colour: '1.56非球面防蓝光_亚黑色', }, //尺寸 parameter:[ {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, ], //镜片颜色 jp_colour:[ {img:'/static/img/detail/Kuang/sun_jp.png'}, {img:'/static/img/detail/Kuang/sun_jp.png'}, {img:'/static/img/detail/Kuang/sun_jp.png'}, {img:'/static/img/detail/Kuang/sun_jp.png'}, {img:'/static/img/detail/Kuang/sun_jp.png'}, {img:'/static/img/detail/Kuang/sun_jp.png'} ], //配饰 part:[ {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, ], opIsOpen:true, tablist: { // read: true, // seeLong: false, confirm: false }, tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], // 度数相关数据 pickerInfoList:[ {nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0}, {nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1}, {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2}, {nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3}, {nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0} ], } }, computed: { details(){ return this.$store.state.detailStandard_k.list }, }, onLoad:function(){ store.dispatch('detailStandard_k/fetch', { uid: "1", pid: "26", p_root_index: "4" }); }, methods: { counter(isadd){ if(isadd){ this.count++ }else{ this.count <= 1? this.disabled = true:this.count-- } }, xialachange(index){ this.isNone[index].state = !this.isNone[index].state; if(this.isNone[index].state){ this.isNone[index].img = '/static/img/detail/right.png' }else{ this.isNone[index].img = '/static/img/detail/xiala.png' } }, colourChange(index,e){ this.navData.colour = e ; //颜色选择 }, viewChoose(index){ this.chooseNum = index }, //折射率选择 splitChoose(index,e){ this.isSplit = index this.navData.split = e }, //跳转镜片选购页 popArgs(){ uni.navigateTo({ url: '../detailsChoiceArgs/detailsChoiceArgs', success: res => {}, fail: () => {}, complete: () => {} }); }, //跳转确认订单页及传参 popSure(name,price){ this.navData.name = name; this.navData.price = price; this.navData.type = this.type; var navData = JSON.stringify(this.navData); uni.navigateTo({ url: '../confirmOrder/confirmOrder?index='+navData, }); console.log(this.navData) }, //验光表 changeConfirm() { this.tablist.confirm = !this.tablist.confirm }, bindPickerChange01: function(e) { this.pickerInfoList[0].nameIndex1 = e.target.value }, bindPickerChange02: function(e) { this.pickerInfoList[0].nameIndex2 = e.target.value }, bindPickerChange11: function(e) { this.pickerInfoList[1].nameIndex1 = e.target.value }, bindPickerChange12: function(e) { this.pickerInfoList[1].nameIndex2 = e.target.value }, bindPickerChange21: function(e) { this.pickerInfoList[2].nameIndex1 = e.target.value }, bindPickerChange22: function(e) { this.pickerInfoList[2].nameIndex2 = e.target.value }, bindPickerChange31: function(e) { this.pickerInfoList[3].nameIndex1 = e.target.value }, bindPickerChange32: function(e) { this.pickerInfoList[3].nameIndex2 = e.target.value }, bindPickerChange41: function(e) { this.pickerInfoList[4].nameIndex1 = e.target.value }, bindPickerChange42: function(e) { this.pickerInfoList[4].nameIndex2 = e.target.value }, bindPickerChange43: function(e) { this.pickerInfoList[4].nameIndex3 = e.target.value }, } } </script> <style lang="scss"> .container{ min-height: 100vh; background: #F2F2F2; padding-top: 10px; box-sizing: border-box; } hr{ border: none; height: 1px; background: #F2F2F2; margin-top: 18px; margin-bottom: 10px; } .detail{ height: 272rpx; background: #FFFFFF; border-radius: 8px; padding: 16px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; } .detail1{ height: 178rpx; width: 188rpx; image{ width: 100%; height: 100%; border-radius: 8px; } } .detail2{ width: 68%; view{ margin-bottom: 6px; font-family: PingFangSC-Regular; } .detail2_name{ font-size: 14px; color: #333333; letter-spacing: -0.26px; line-height: 18px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .detail2_tui{ font-size: 10px; color: #999999; letter-spacing: -0.19px; span{ margin-right: 10px; } } .detail2_price{ font-size: 14px; color: #FF6B4A; letter-spacing: -0.26px; } } .counter{ display: flex; flex-direction: row; justify-content: space-between; font-size: 28rpx; color: #333333; width: 122rpx; float: right; .btn{ display: flex; justify-content: center; line-height: 32rpx; height: 32rpx; width: 32rpx; background-color: #F2F2F2; color: #CFCFCF; } } .choose{ background: #FFFFFF; padding: 16px; box-sizing: border-box; margin-top: 10px; border-radius: 8px; .colour1{ span{ font-family: PingFangSC-Medium; font-size: 16px; color: #333333; letter-spacing: -0.3px; text-align: justify; line-height: 24px; font-weight: bold; } image{ float: right; width: 40rpx; height: 36rpx; } .colour1_span2{ font-family: PingFangSC-Regular; font-size: 12px; color: #666666; margin-left: 10px; font-weight: normal } } .colour_exp{ font-family: PingFangSC-Regular; font-size: 12px; color: #666666; letter-spacing: 0; margin-top: 10px; margin-bottom: 10px; } .colour2{ display: grid; grid-template-columns: repeat(5, 17%); justify-content: space-between ; grid-row-gap: 10px; margin-bottom: 14px; .colour2_view{ border: 1px solid #F2F2F2; image{ width: 100rpx; height: 60rpx; } } .colour2_viewed{ border: 1px solid #FF6B4A; image{ width: 100rpx; height: 60rpx; } } } .colour2_none{ display: none; } } .jp_colour2{ display: grid; grid-template-columns: repeat(5, 13%); justify-content: start ; grid-column-gap: 10px; grid-row-gap: 10px; margin-bottom: 14px; .jp_colour2_view{ border: 1px solid #F2F2F2; image{ width: 80rpx; height: 80rpx; } } } .split{ display: grid; grid-template-columns: repeat(2, 45%); grid-column-gap: 10px; grid-row-gap: 10px; margin-top: 10px ; .split_colour2{ display: flex; justify-content: center; align-items: center; width: 300rpx; height: 60rpx; background: #F2F2F2; border-radius: 2px; font-family: PingFangSC-Regular; font-size: 12px; color: #666666; letter-spacing: 0; text-align: center; } .split_colour2_actived{ background: rgba(255,107,74,0.15); color: #FF6B4A; } } .size,.part{ margin-top:14px; .size1{ display: flex; justify-content: space-between; margin-bottom: 10px; .size1_1{ font-weight: bold; font-family: PingFangSC-Medium; font-size: 16px; color: #333333; letter-spacing: -0.3px; line-height: 24px; } view{ span{ font-family: PingFangSC-Regular; font-size: 14px; color: #FF6B4A; letter-spacing: -0.26px; margin-right: 12px; } image{ width: 40rpx; height: 36rpx; } } } .size2{ view{ display: inline-flex; align-items: center; justify-content: center; //字体居中 margin-right: 12px; margin-bottom: 20px; width: 136rpx; height: 60rpx; background: #F2F2F2; border-radius: 2px; font-family: PingFangSC-Regular; font-size: 12px; color: #666666; } view:hover{ color: #FF6B4A; background: rgba(255,107,74,0.15); } } .D3_list{ margin-bottom: 4px; } .D3_list>view{ display: flex; align-content: center; margin-bottom: 10px; view{ margin-right: 10px; } } .D3_list image{ width: 50px; height: 25px; margin-right: 6px; } .D3_list span{ margin-left: 6px; margin-right: 5px; font-family: 'PingFangSC-Regular'; } .D3_list_jDu{ view{ font-family: PingFangSC-Regular; font-size: 10px; color: #999999; letter-spacing: -0.19px; } .D3_list1{ display: flex; } } } .part{ .part_som{ display: grid; justify-content: space-between; grid-template-columns: repeat(4, 22%); grid-row-gap: 12px; margin-bottom: 14px; view{ border: 1px solid #F2F2F2; height: 72rpx; image{ width: 100%; height: 100%; } } .size_viewed{ border: 1px solid #FF6B4A; height: 72rpx; image{ width: 100%; height: 100%; } } } .colour2_none{ display: none; } } .buy{ height: 300rpx; background: #FFFFFF ; margin-top: 10px; border-radius: 8px; padding-top: 20px; box-sizing: border-box; margin-bottom: 10px; } .buy1{ font-family: PingFangSC-Medium; font-size: 16px; font-weight: bold; color: #333333; text-align: center; } .buy2{ font-family: PingFangSC-Regular; font-size: 12px; color: #999999; text-align: center; margin: 10px; } .buy3{ font-family: PingFangSC-Regular; font-size: 16px; display: flex; justify-content: center; margin-top: 14px; view{ border-radius: 20px; width: 240rpx; height: 80rpx; display: flex; justify-content: center; align-items: center; } .buy3_1{ margin-right: 20px; background: rgba(255,107,74,0.15); color: #FF6B4A ; } .buy3_2{ background: #FF6B4A; color: #FFFFFF ; } } .zhanwei{ background: #F2F2F2; height: 200rpx; } .goods-form { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; width: 100%; padding-top:20px; padding-bottom:20px; box-sizing: border-box; .p1 { font-size: 16px; color: #333333; letter-spacing: -0.3px; text-align: justify; line-height: 24px; margin: 4px 0; } .p2 { font-size: 12px; color: #999999; letter-spacing: -0.23px; margin-bottom: 18rpx; } image{ width: 28rpx; height: 26rpx; } .confirm { display: flex; align-items: center; font-size: 12px; color: #666666; letter-spacing: -0.23px; width: 684rpx; image{ margin-right:25rpx; } } .picker{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; image{ width: 10px; height: 10px; margin-right: 5px; } .picker-choice{ display: flex; width: 684rpx; align-items: center; margin-bottom: 40rpx; .choice-left{ width: 210rpx; .p11 { font-size: 14px; color: #333333; letter-spacing: -0.26px; text-align: justify; line-height: 24px; // margin-right: 10px; } .p12 { font-size: 10px; color: #3F3F3F; letter-spacing: -0.19px; text-align: justify; line-height: 24px; } } .p13 { font-size: 10px; color: #999999; letter-spacing: -0.19px; margin-right: 10px; } .p13-date { font-size: 10px; color: #999999; letter-spacing: -0.19px; margin-right: 5px; } .p14 { font-size: 14px; color: #666666; letter-spacing: -0.26px; text-align: center; width: 124rpx; border-bottom: 1px solid #CFCFCF; } } } } .button{ position: fixed; bottom: 0; width:100%; height: 112rpx; background: #FF6B4A 100%; view{ color: #FFFFFF; height: 100%; display: flex; justify-content: center; align-items: center; font-family: PingFangSC-Regular; font-size: 16px; } } </style>