Compare View
Commits (2)
Showing
16 changed files
Show diff stats
src/components/UniSliper/UniSliper.vue
| File was created | 1 | <template> | |
| 2 | <div class="c-progress"> | ||
| 3 | <div class="c-progress-outer" :style="setProgressBgStyle" ref="progress"> | ||
| 4 | <div class="c-progress-inner" :style="setProgressStyle"></div> | ||
| 5 | <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div> | ||
| 6 | </div> | ||
| 7 | <span v-if="showPerText">{{stand_width}}mm</span> | ||
| 8 | </div> | ||
| 9 | </template> | ||
| 10 | |||
| 11 | <script> | ||
| 12 | // 使用了element的颜色 | ||
| 13 | const colorTable = { | ||
| 14 | success: '#13ce66', | ||
| 15 | fail: '#ff4949', | ||
| 16 | warning: '#e6a23c', | ||
| 17 | default: '#409EFF' | ||
| 18 | } | ||
| 19 | export default { | ||
| 20 | name: 'CProgress', | ||
| 21 | props: { | ||
| 22 | percent: { | ||
| 23 | type: Number, | ||
| 24 | default: 60 | ||
| 25 | }, | ||
| 26 | showSlider: { | ||
| 27 | type: Boolean, | ||
| 28 | default: true | ||
| 29 | }, | ||
| 30 | showPerText: { | ||
| 31 | type: Boolean, | ||
| 32 | default: true | ||
| 33 | }, | ||
| 34 | // 进度条的宽度 | ||
| 35 | width: { | ||
| 36 | type: Number, | ||
| 37 | default: 300 | ||
| 38 | }, | ||
| 39 | bgColor: { | ||
| 40 | type: String, | ||
| 41 | default: '#ebeef5' | ||
| 42 | }, | ||
| 43 | progressColor: { | ||
| 44 | type: String, | ||
| 45 | default: '#409EFF' | ||
| 46 | }, | ||
| 47 | // 滑块的宽度 | ||
| 48 | sliderWidth: { | ||
| 49 | type: Number, | ||
| 50 | default: 20 | ||
| 51 | }, | ||
| 52 | // 颜色的类型 | ||
| 53 | type: { | ||
| 54 | type: String, | ||
| 55 | default: colorTable.default | ||
| 56 | }, | ||
| 57 | //规格长度 | ||
| 58 | standard:{ | ||
| 59 | type: Number, | ||
| 60 | default: 1.4 | ||
| 61 | }, | ||
| 62 | //初始长度 | ||
| 63 | stand_width:{ | ||
| 64 | type: Number, | ||
| 65 | default: 0 | ||
| 66 | } | ||
| 67 | }, | ||
| 68 | data () { | ||
| 69 | return { | ||
| 70 | sliderLeft: 0, // 滑块相对父元素发x坐标 | ||
| 71 | progressWidth: 0, // 进度条当前的的宽度 | ||
| 72 | tempPercent: 0, | ||
| 73 | } | ||
| 74 | }, | ||
| 75 | computed: { | ||
| 76 | // 设置进度条的背景样式 | ||
| 77 | setProgressBgStyle () { | ||
| 78 | return { | ||
| 79 | // 加上滑块的宽度 | ||
| 80 | width: `${this.width + this.sliderWidth}px` | ||
| 81 | } | ||
| 82 | }, | ||
| 83 | // 设置进度条的样式 | ||
| 84 | setProgressStyle () { | ||
| 85 | const color = colorTable[this.type] || this.progressColor | ||
| 86 | return { | ||
| 87 | width: `${this.progressWidth}px`, | ||
| 88 | background: color | ||
| 89 | } | ||
| 90 | }, | ||
| 91 | // 设置滑块的样式 | ||
| 92 | setSliderStyle () { | ||
| 93 | const color = colorTable[this.type] || this.progressColor | ||
| 94 | return { | ||
| 95 | border: `1px solid ${color}`, | ||
| 96 | width: `${this.sliderWidth}px`, | ||
| 97 | height: `${this.sliderWidth}px`, | ||
| 98 | left: `${this.sliderLeft}px` | ||
| 99 | } | ||
| 100 | } | ||
| 101 | }, | ||
| 102 | mounted () { | ||
| 103 | this.sliderLeft = this.width / 100 * this.percent | ||
| 104 | this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度 | ||
| 105 | this.tempPercent = this.percent | ||
| 106 | this.addListener() | ||
| 107 | }, | ||
| 108 | methods: { | ||
| 109 | addListener () { | ||
| 110 | const slider = this.$refs.slider | ||
| 111 | const progress = this.$refs.progress | ||
| 112 | let isClickSlider = false | ||
| 113 | let distance = 0 // 滑块与点击坐标的绝对距离 | ||
| 114 | progress.onclick = (e) => { | ||
| 115 | // 阻止事件冒泡 | ||
| 116 | if (e.target == slider) { | ||
| 117 | return | ||
| 118 | } | ||
| 119 | let curX = progress.offsetLeft | ||
| 120 | this.sliderLeft = e.pageX - curX | ||
| 121 | if (this.sliderLeft <= 0) { | ||
| 122 | this.sliderLeft = 0 | ||
| 123 | } | ||
| 124 | if (this.sliderLeft >= this.width) { | ||
| 125 | this.sliderLeft = this.width | ||
| 126 | } | ||
| 127 | this._countCurPercent() | ||
| 128 | } | ||
| 129 | // slider.onmousedown = (e) => { | ||
| 130 | // isClickSlider = true | ||
| 131 | // let curX = slider.offsetLeft | ||
| 132 | // distance = e.pageX - curX // 得出绝对距离 | ||
| 133 | // } | ||
| 134 | progress.onmousemove = (e) => { | ||
| 135 | if (isClickSlider) { | ||
| 136 | // 判断是否已经超出进度条的长度 | ||
| 137 | if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) { | ||
| 138 | this.sliderLeft = e.pageX - distance | ||
| 139 | this._countCurPercent() | ||
| 140 | } | ||
| 141 | } | ||
| 142 | } | ||
| 143 | progress.onmouseup = () => { | ||
| 144 | isClickSlider = false | ||
| 145 | } | ||
| 146 | }, | ||
| 147 | // 算出百分比 | ||
| 148 | _countCurPercent () { | ||
| 149 | this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100)) | ||
| 150 | this.progressWidth = this.sliderLeft + 20 | ||
| 151 | // 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整 | ||
| 152 | if (this.tempPercent <= 0) { | ||
| 153 | this.progressWidth = 0 | ||
| 154 | this.sliderLeft = 0 | ||
| 155 | } | ||
| 156 | if (this.tempPercent >= 100) { | ||
| 157 | this.progressWidth = this.width + 20 | ||
| 158 | this.sliderLeft = this.width | ||
| 159 | } | ||
| 160 | this.stand_width = this.tempPercent*this.standard | ||
| 161 | this.stand_width = parseInt(this.stand_width/1) //取整 | ||
| 162 | this.$emit('percentChange', this.tempPercent) | ||
| 163 | } | ||
| 164 | } | ||
| 165 | } | ||
| 166 | </script> | ||
| 167 | |||
| 168 | <style scoped lang="scss"> | ||
| 169 | .c-progress { | ||
| 170 | $width: 300px; | ||
| 171 | $radius: 5px; | ||
| 172 | display: flex; | ||
| 173 | align-items: center; | ||
| 174 | |||
| 175 | span { | ||
| 176 | margin-left: 5px; | ||
| 177 | font-size: 14px; | ||
| 178 | color: #666; | ||
| 179 | } | ||
| 180 | |||
| 181 | .c-progress-outer { | ||
| 182 | width: $width; | ||
| 183 | height: 10px; | ||
| 184 | background: #ebeef5; | ||
| 185 | position: relative; | ||
| 186 | display: flex; | ||
| 187 | align-items: center; | ||
| 188 | |||
| 189 | .c-progress-inner { | ||
| 190 | width: 100px; | ||
| 191 | height: 10px; | ||
| 192 | background: #409EFF; | ||
| 193 | } | ||
| 194 | |||
| 195 | .c-progress-slider { | ||
| 196 | width: 20px; | ||
| 197 | height: 20px; | ||
| 198 | border-radius: 50%; | ||
| 199 | background: #fff; | ||
| 200 | border: 1px solid #409EFF; | ||
| 201 | position: absolute; | ||
| 202 | z-index: 10; | ||
| 203 | left: 10px; | ||
| 204 | } | ||
| 205 | } | ||
| 206 | } | ||
| 207 | </style> |
src/pages.json
| 1 | { | 1 | { |
| 2 | "pages": [ | 2 | "pages": [ |
| 3 | { | 3 | { |
| 4 | "path" : "pages/myOrder/myOrder", | 4 | "path" : "pages/myOrder/myOrder", |
| 5 | "style" : { | 5 | "style" : { |
| 6 | "navigationBarTitleText": "我的订单"} | 6 | "navigationBarTitleText": "我的订单"} |
| 7 | }, | 7 | }, |
| 8 | { | 8 | { |
| 9 | "path": "pages/cart/cart", | 9 | "path": "pages/cart/cart", |
| 10 | "style": { | 10 | "style": { |
| 11 | "navigationBarTitleText": "购物车" | 11 | "navigationBarTitleText": "购物车" |
| 12 | } | 12 | } |
| 13 | }, | 13 | }, |
| 14 | { | 14 | { |
| 15 | "path": "pages/index/index", | 15 | "path": "pages/index/index", |
| 16 | "style": { | 16 | "style": { |
| 17 | "navigationBarTitleText": "商城一览" | 17 | "navigationBarTitleText": "商城一览" |
| 18 | } | 18 | } |
| 19 | }, | 19 | }, |
| 20 | { | 20 | { |
| 21 | "path": "pages/frameDetail/frameDetail", | 21 | "path": "pages/frameDetail/frameDetail", |
| 22 | "style": { | 22 | "style": { |
| 23 | "navigationBarTitleText": "产品详情" | 23 | "navigationBarTitleText": "产品详情" |
| 24 | } | 24 | } |
| 25 | }, | 25 | }, |
| 26 | { | 26 | { |
| 27 | "path": "pages/lensDetails/lensDetails", | 27 | "path": "pages/lensDetails/lensDetails", |
| 28 | "style": { | 28 | "style": { |
| 29 | "navigationBarTitleText": "产品详情" | 29 | "navigationBarTitleText": "产品详情" |
| 30 | } | 30 | } |
| 31 | }, | 31 | }, |
| 32 | { | 32 | { |
| 33 | "path" : "pages/purchaseLenses/purchaseLenses", | 33 | "path" : "pages/purchaseLenses/purchaseLenses", |
| 34 | "style" : { | 34 | "style" : { |
| 35 | "navigationBarTitleText": "产品选购" | 35 | "navigationBarTitleText": "产品选购" |
| 36 | } | 36 | } |
| 37 | }, | 37 | }, |
| 38 | { | 38 | { |
| 39 | "path" : "pages/refundProgress/refundProgress", | 39 | "path" : "pages/refundProgress/refundProgress", |
| 40 | "style": { | 40 | "style": { |
| 41 | "navigationBarTitleText": "申请退款" | 41 | "navigationBarTitleText": "申请退款" |
| 42 | } | 42 | } |
| 43 | }, | 43 | }, |
| 44 | { | 44 | { |
| 45 | "path": "pages/addAddress/addAddress", | 45 | "path": "pages/addAddress/addAddress", |
| 46 | "style": { | 46 | "style": { |
| 47 | "navigationBarTitleText": "新增地址" | 47 | "navigationBarTitleText": "新增地址" |
| 48 | } | 48 | } |
| 49 | }, | 49 | }, |
| 50 | { | 50 | { |
| 51 | "path" : "pages/confirmOrder/confirmOrder", | 51 | "path" : "pages/confirmOrder/confirmOrder", |
| 52 | "style" : { | 52 | "style" : { |
| 53 | "navigationBarTitleText": "确认订单"} | 53 | "navigationBarTitleText": "确认订单"} |
| 54 | }, | 54 | }, |
| 55 | { | 55 | { |
| 56 | "path": "pages/user/user", | 56 | "path": "pages/user/user", |
| 57 | "style": { | 57 | "style": { |
| 58 | "navigationBarTitleText": "我的" | 58 | "navigationBarTitleText": "我的" |
| 59 | } | 59 | } |
| 60 | }, | 60 | }, |
| 61 | { | 61 | { |
| 62 | "path": "pages/refundment/refundWays" | 62 | "path": "pages/refundment/refundWays" |
| 63 | }, | 63 | }, |
| 64 | { | 64 | { |
| 65 | "path": "pages/refundment/refundment" | 65 | "path": "pages/refundment/refundment" |
| 66 | }, | 66 | }, |
| 67 | { | 67 | { |
| 68 | "path": "pages/predelivery/predelivery" | 68 | "path": "pages/predelivery/predelivery" |
| 69 | }, | 69 | }, |
| 70 | { | 70 | { |
| 71 | "path": "pages/customerService/customerService" | 71 | "path": "pages/customerService/customerService" |
| 72 | }, | 72 | }, |
| 73 | { | 73 | { |
| 74 | "path": "pages/myOrderPaying/myOrderPaying" | 74 | "path": "pages/myOrderPaying/myOrderPaying" |
| 75 | }, | 75 | }, |
| 76 | { | ||
| 77 | "path" : "pages/detailStandard/detailStandard_sun", | ||
| 78 | "style": { | ||
| 79 | "navigationBarTitleText": "太阳镜选购页" | ||
| 80 | } | ||
| 81 | }, | ||
| 82 | { | ||
| 83 | "path" : "pages/detailStandard/detailStandard_k", | ||
| 84 | "style": { | ||
| 85 | "navigationBarTitleText": "镜框选购页" | ||
| 86 | } | ||
| 87 | } | ||
| 76 | { | 88 | |
| 77 | "path" : "pages/detailStandard/detailStandard_sun", | 89 | ], |
| 78 | "style": { | 90 | "globalStyle": { |
| 79 | "navigationBarTitleText": "太阳镜选购页" | 91 | "navigationBarTextStyle": "black", |
| 80 | } | 92 | "navigationBarTitleText": "uni-app", |
| 81 | }, | 93 | "navigationBarBackgroundColor": "#F8F8F8", |
| 82 | { | 94 | "backgroundColor": "#F8F8F8" |
| 83 | "path" : "pages/detailStandard/detailStandard_k", | 95 | }, |
| 84 | "style": { | 96 | "tabBar": { |
| 85 | "navigationBarTitleText": "镜框选购页" | 97 | "color": "#C0C4CC", |
| 86 | } | 98 | "selectedColor": "#fa436a", |
| 87 | } | 99 | "borderStyle": "black", |
| 88 | 100 | "backgroundColor": "#ffffff", | |
| 89 | ], | 101 | "list": [{ |
| 90 | "globalStyle": { | 102 | "pagePath": "pages/index/index", |
| 91 | "navigationBarTextStyle": "black", | 103 | "iconPath": "static/tab-home.png", |
| 92 | "navigationBarTitleText": "uni-app", | 104 | "selectedIconPath": "static/tab-home-current.png", |
| 93 | "navigationBarBackgroundColor": "#F8F8F8", | 105 | "text": "首页" |
| 94 | "backgroundColor": "#F8F8F8" | 106 | }, |
| 95 | }, | 107 | { |
| 96 | "tabBar": { | 108 | "pagePath": "pages/cart/cart", |
| 97 | "color": "#C0C4CC", | 109 | "iconPath": "static/tab-cart.png", |
| 98 | "selectedColor": "#fa436a", | 110 | "selectedIconPath": "static/tab-cart-current.png", |
| 99 | "borderStyle": "black", | 111 | "text": "购物车" |
| 100 | "backgroundColor": "#ffffff", | 112 | }, |
| 101 | "list": [{ | 113 | { |
| 102 | "pagePath": "pages/index/index", | 114 | "pagePath": "pages/user/user", |
| 103 | "iconPath": "static/tab-home.png", | 115 | "iconPath": "static/tab-my.png", |
| 104 | "selectedIconPath": "static/tab-home-current.png", | 116 | "selectedIconPath": "static/tab-my-current.png", |
| 105 | "text": "首页" | 117 | "text": "我的" |
| 106 | }, | 118 | } |
| 107 | { | 119 | ] |
| 108 | "pagePath": "pages/cart/cart", | 120 | } |
| 109 | "iconPath": "static/tab-cart.png", | 121 | } |
| 110 | "selectedIconPath": "static/tab-cart-current.png", | 122 |
src/pages/detailStandard/detailStandard_k.vue
| File was created | 1 | <template> | |
| 2 | <view class="container"> | ||
| 3 | <view class="detail"> | ||
| 4 | <view class="detail1"><image v-bind:src="detail.image"></image></view> | ||
| 5 | <view class="detail2"> | ||
| 6 | <view class="detail2_name">{{detail.name}}</view> | ||
| 7 | <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> | ||
| 8 | <view class="detail2_price"><span>￥{{detail.price}}</span></view> | ||
| 9 | </view> | ||
| 10 | </view> | ||
| 11 | <view class="choose"> | ||
| 12 | <view class="colour"> | ||
| 13 | <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala2.png"></image></view> | ||
| 14 | <view class="colour_exp">*黑色 BHL192345</view> | ||
| 15 | <view class="colour2"> | ||
| 16 | <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view> | ||
| 17 | </view> | ||
| 18 | <hr/> | ||
| 19 | </view> | ||
| 20 | <view class="size"> | ||
| 21 | <view class="size1"> | ||
| 22 | <view class="size1_1">框架尺寸</view> | ||
| 23 | <view><span>+￥20</span><image src="/static/img/detail/xiala2.png"></image></view> | ||
| 24 | </view> | ||
| 25 | <view class="size2"> | ||
| 26 | <view>通用</view> | ||
| 27 | <view>定制</view> | ||
| 28 | </view> | ||
| 29 | <view class="D3_list"> | ||
| 30 | <view v-for="(item) in parameter" :key="item.key"> | ||
| 31 | <view><image class="D3_image" v-bind:src = "item.img"></image></view> | ||
| 32 | <view class="D3_list_jDu"> | ||
| 33 | <!-- uni-sliper插件 --> | ||
| 34 | <c-progress class="c-progress" | ||
| 35 | :percent="item.percent" | ||
| 36 | :show-slider="false" :width="190" | ||
| 37 | :standard="item.standard_l" | ||
| 38 | :stand_width="item.slength" | ||
| 39 | progressColor="#FF6B4A" | ||
| 40 | /> | ||
| 41 | <view>{{item.standard}}</view> | ||
| 42 | </view> | ||
| 43 | </view> | ||
| 44 | <hr/> | ||
| 45 | </view> | ||
| 46 | </view> | ||
| 47 | <view class="part"> | ||
| 48 | <view class="size1"> | ||
| 49 | <view class="size1_1">配件</view> | ||
| 50 | <view><span>+￥0.00</span><image src="/static/img/detail/xiala2.png"></image></view> | ||
| 51 | </view> | ||
| 52 | <view class="colour_exp">*0290</view> | ||
| 53 | <view class="part_som"> | ||
| 54 | <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view> | ||
| 55 | </view> | ||
| 56 | </view> | ||
| 57 | </view> | ||
| 58 | <view class="buy"> | ||
| 59 | <view class="buy1">选了镜框，想选镜片？</view> | ||
| 60 | <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> | ||
| 61 | <view class="buy3"> | ||
| 62 | <view class="buy3_1">暂时不选</view> | ||
| 63 | <view class="buy3_2">立即去选</view> | ||
| 64 | </view> | ||
| 65 | </view> | ||
| 66 | <view class="zhanwei"></view> | ||
| 67 | <view class="button"><view>立即结算</view></view> | ||
| 68 | </view> | ||
| 69 | </template> | ||
| 70 | <script> | ||
| 71 | import CProgress from '../../components/UniSliper/UniSliper' | ||
| 72 | |||
| 73 | export default { | ||
| 74 | components: { | ||
| 75 | CProgress | ||
| 76 | }, | ||
| 77 | data(){ | ||
| 78 | return{ | ||
| 79 | detail:{ | ||
| 80 | image:'/static/img/detail/d1.png', | ||
| 81 | name:'商品名称商品名称商品名称商品名称商品名称', | ||
| 82 | price: 180, | ||
| 83 | number: 1, | ||
| 84 | }, | ||
| 85 | //框架颜色 | ||
| 86 | colour:[ | ||
| 87 | {key:0 ,img: '/static/img/detail/Kuang/s1.png'}, | ||
| 88 | {key:1 ,img: '/static/img/detail/Kuang/s2.png'}, | ||
| 89 | {key:2 ,img: '/static/img/detail/Kuang/s3.png'}, | ||
| 90 | {key:3 ,img: '/static/img/detail/Kuang/s4.png'}, | ||
| 91 | {key:4 ,img: '/static/img/detail/Kuang/s5.png'}, | ||
| 92 | {key:5 ,img: '/static/img/detail/Kuang/s6.png'}, | ||
| 93 | {key:6 ,img: '/static/img/detail/Kuang/s7.png'} | ||
| 94 | ], | ||
| 95 | //规格 | ||
| 96 | parameter:[ | ||
| 97 | {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100}, | ||
| 98 | {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50}, | ||
| 99 | {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50}, | ||
| 100 | {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30}, | ||
| 101 | {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60}, | ||
| 102 | ], | ||
| 103 | //配饰 | ||
| 104 | part:[ | ||
| 105 | {key: 0,img:'/static/img/detail/Kuang/g1.png'}, | ||
| 106 | {key: 1,img:'/static/img/detail/Kuang/g1.png'}, | ||
| 107 | {key: 2,img:'/static/img/detail/Kuang/g2.png'}, | ||
| 108 | {key: 3,img:'/static/img/detail/Kuang/g1.png'}, | ||
| 109 | {key: 4,img:'/static/img/detail/Kuang/g1.png'}, | ||
| 110 | {key: 5,img:'/static/img/detail/Kuang/g3.png'}, | ||
| 111 | {key: 6,img:'/static/img/detail/Kuang/g3.png'}, | ||
| 112 | {key: 7,img:'/static/img/detail/Kuang/g2.png'}, | ||
| 113 | ], | ||
| 114 | } | ||
| 115 | } | ||
| 116 | } | ||
| 117 | </script> | ||
| 118 | |||
| 119 | <style lang="scss"> | ||
| 120 | .container{ | ||
| 121 | min-height: 100vh; | ||
| 122 | background: #F2F2F2; | ||
| 123 | padding-top: 10px; | ||
| 124 | box-sizing: border-box; | ||
| 125 | } | ||
| 126 | hr{ | ||
| 127 | border: none; | ||
| 128 | height: 1px; | ||
| 129 | background: #F2F2F2; | ||
| 130 | margin-top: 18px; | ||
| 131 | } | ||
| 132 | .detail{ | ||
| 133 | height: 272rpx; | ||
| 134 | background: #FFFFFF; | ||
| 135 | border-radius: 8px; | ||
| 136 | padding: 16px; | ||
| 137 | box-sizing: border-box; | ||
| 138 | display: flex; | ||
| 139 | justify-content: space-between; | ||
| 140 | align-items: center; | ||
| 141 | } | ||
| 142 | .detail1{ | ||
| 143 | height: 188rpx; | ||
| 144 | width: 188rpx; | ||
| 145 | image{ | ||
| 146 | width: 100%; | ||
| 147 | height: 100%; | ||
| 148 | border-radius: 8px; | ||
| 149 | } | ||
| 150 | } | ||
| 151 | .detail2{ | ||
| 152 | width: 68%; | ||
| 153 | view{ | ||
| 154 | margin-bottom: 8px; | ||
| 155 | font-family: PingFangSC-Regular; | ||
| 156 | } | ||
| 157 | .detail2_name{ | ||
| 158 | font-size: 14px; | ||
| 159 | color: #333333; | ||
| 160 | letter-spacing: -0.26px; | ||
| 161 | line-height: 18px; | ||
| 162 | } | ||
| 163 | .detail2_tui{ | ||
| 164 | font-size: 10px; | ||
| 165 | color: #999999; | ||
| 166 | letter-spacing: -0.19px; | ||
| 167 | span{ | ||
| 168 | margin-right: 10px; | ||
| 169 | } | ||
| 170 | } | ||
| 171 | .detail2_price{ | ||
| 172 | font-size: 14px; | ||
| 173 | color: #FF6B4A; | ||
| 174 | letter-spacing: -0.26px; | ||
| 175 | } | ||
| 176 | } | ||
| 177 | .choose{ | ||
| 178 | background: #FFFFFF; | ||
| 179 | padding: 16px; | ||
| 180 | box-sizing: border-box; | ||
| 181 | margin-top: 10px; | ||
| 182 | border-radius: 8px; | ||
| 183 | .colour1{ | ||
| 184 | span{ | ||
| 185 | font-family: PingFangSC-Medium; | ||
| 186 | font-size: 16px; | ||
| 187 | color: #333333; | ||
| 188 | letter-spacing: -0.3px; | ||
| 189 | text-align: justify; | ||
| 190 | line-height: 24px; | ||
| 191 | font-weight: bold; | ||
| 192 | } | ||
| 193 | image{ | ||
| 194 | float: right; | ||
| 195 | width: 40rpx; | ||
| 196 | height: 36rpx; | ||
| 197 | } | ||
| 198 | } | ||
| 199 | .colour_exp{ | ||
| 200 | font-family: PingFangSC-Regular; | ||
| 201 | font-size: 12px; | ||
| 202 | color: #666666; | ||
| 203 | letter-spacing: 0; | ||
| 204 | margin-top: 10px; | ||
| 205 | margin-bottom: 10px; | ||
| 206 | } | ||
| 207 | .colour2{ | ||
| 208 | display: grid; | ||
| 209 | grid-template-columns: repeat(5, 17%); | ||
| 210 | justify-content: space-between ; | ||
| 211 | grid-row-gap: 10px; | ||
| 212 | margin-bottom: 14px; | ||
| 213 | view{ | ||
| 214 | border: 1px solid #F2F2F2; | ||
| 215 | image{ | ||
| 216 | width: 100%; | ||
| 217 | height: 100%; | ||
| 218 | } | ||
| 219 | } | ||
| 220 | view:hover{ | ||
| 221 | border: 1px solid #FF6B4A; | ||
| 222 | } | ||
| 223 | } | ||
| 224 | } | ||
| 225 | .size,.part{ | ||
| 226 | margin-top:14px; | ||
| 227 | .size1{ | ||
| 228 | display: flex; | ||
| 229 | justify-content: space-between; | ||
| 230 | margin-bottom: 10px; | ||
| 231 | .size1_1{ | ||
| 232 | font-weight: bold; | ||
| 233 | font-family: PingFangSC-Medium; | ||
| 234 | font-size: 16px; | ||
| 235 | color: #333333; | ||
| 236 | letter-spacing: -0.3px; | ||
| 237 | line-height: 24px; | ||
| 238 | } | ||
| 239 | view{ | ||
| 240 | span{ | ||
| 241 | font-family: PingFangSC-Regular; | ||
| 242 | font-size: 14px; | ||
| 243 | color: #FF6B4A; | ||
| 244 | letter-spacing: -0.26px; | ||
| 245 | margin-right: 12px; | ||
| 246 | } | ||
| 247 | image{ | ||
| 248 | width: 40rpx; | ||
| 249 | height: 36rpx; | ||
| 250 | } | ||
| 251 | } | ||
| 252 | } | ||
| 253 | .size2{ | ||
| 254 | view{ | ||
| 255 | display: inline-flex; | ||
| 256 | align-items: center; | ||
| 257 | justify-content: center; //字体居中 | ||
| 258 | margin-right: 12px; | ||
| 259 | margin-bottom: 20px; | ||
| 260 | width: 136rpx; | ||
| 261 | height: 60rpx; | ||
| 262 | background: #F2F2F2; | ||
| 263 | border-radius: 2px; | ||
| 264 | font-family: PingFangSC-Regular; | ||
| 265 | font-size: 12px; | ||
| 266 | color: #666666; | ||
| 267 | } | ||
| 268 | view:hover{ | ||
| 269 | color: #FF6B4A; | ||
| 270 | background: rgba(255,107,74,0.15); | ||
| 271 | } | ||
| 272 | } | ||
| 273 | .D3_list{ | ||
| 274 | margin-bottom: 4px; | ||
| 275 | } | ||
| 276 | .D3_list>view{ | ||
| 277 | display: flex; | ||
| 278 | align-content: center; | ||
| 279 | margin-bottom: 10px; | ||
| 280 | view{ | ||
| 281 | margin-right: 10px; | ||
| 282 | } | ||
| 283 | } | ||
| 284 | .D3_list image{ | ||
| 285 | width: 50px; | ||
| 286 | height: 25px; | ||
| 287 | margin-right: 6px; | ||
| 288 | } | ||
| 289 | .D3_list span{ | ||
| 290 | margin-left: 6px; | ||
| 291 | margin-right: 5px; | ||
| 292 | font-family: 'PingFangSC-Regular'; | ||
| 293 | } | ||
| 294 | .D3_list_jDu{ | ||
| 295 | view{ | ||
| 296 | font-family: PingFangSC-Regular; | ||
| 297 | font-size: 10px; | ||
| 298 | color: #999999; | ||
| 299 | letter-spacing: -0.19px; | ||
| 300 | } | ||
| 301 | } | ||
| 302 | } | ||
| 303 | .part{ | ||
| 304 | .part_som{ | ||
| 305 | display: grid; | ||
| 306 | justify-content: space-between; | ||
| 307 | grid-template-columns: repeat(4, 22%); | ||
| 308 | grid-row-gap: 12px; | ||
| 309 | margin-bottom: 14px; | ||
| 310 | view{ | ||
| 311 | border: 1px solid #F2F2F2; | ||
| 312 | height: 72rpx; | ||
| 313 | image{ | ||
| 314 | width: 100%; | ||
| 315 | height: 100%; | ||
| 316 | } | ||
| 317 | } | ||
| 318 | view:hover{ | ||
| 319 | border: 1px solid #FF6B4A; | ||
| 320 | } | ||
| 321 | } | ||
| 322 | } | ||
| 323 | .buy{ | ||
| 324 | height: 280rpx; | ||
| 325 | background: #FFFFFF ; | ||
| 326 | margin-top: 10px; | ||
| 327 | border-radius: 8px; | ||
| 328 | padding-top: 20px; | ||
| 329 | box-sizing: border-box; | ||
| 330 | margin-bottom: 20px; | ||
| 331 | } | ||
| 332 | .buy1{ | ||
| 333 | font-family: PingFangSC-Medium; | ||
| 334 | font-size: 16px; | ||
| 335 | font-weight: bold; | ||
| 336 | color: #333333; | ||
| 337 | text-align: center; | ||
| 338 | } | ||
| 339 | .buy2{ | ||
| 340 | font-family: PingFangSC-Regular; | ||
| 341 | font-size: 12px; | ||
| 342 | color: #999999; | ||
| 343 | text-align: center; | ||
| 344 | margin: 10px; | ||
| 345 | } | ||
| 346 | .buy3{ | ||
| 347 | font-family: PingFangSC-Regular; | ||
| 348 | font-size: 16px; | ||
| 349 | display: flex; | ||
| 350 | justify-content: center; | ||
| 351 | margin-top: 14px; | ||
| 352 | view{ | ||
| 353 | border-radius: 20px; | ||
| 354 | width: 240rpx; | ||
| 355 | height: 80rpx; | ||
| 356 | display: flex; | ||
| 357 | justify-content: center; | ||
| 358 | align-items: center; | ||
| 359 | } | ||
| 360 | .buy3_1{ | ||
| 361 | margin-right: 20px; | ||
| 362 | background: rgba(255,107,74,0.15); | ||
| 363 | color: #FF6B4A ; | ||
| 364 | } | ||
| 365 | .buy3_2{ | ||
| 366 | background: #FF6B4A; | ||
| 367 | color: #FFFFFF ; | ||
| 368 | } | ||
| 369 | } | ||
| 370 | .zhanwei{ | ||
| 371 | background: #F2F2F2; | ||
| 372 | height: 120rpx; | ||
| 373 | } | ||
| 374 | .button{ | ||
| 375 | position: fixed; | ||
| 376 | bottom: 0; | ||
| 377 | width:100%; | ||
| 378 | height: 112rpx; | ||
| 379 | background: #FF6B4A 100%; | ||
| 380 | view{ | ||
| 381 | color: #FFFFFF; | ||
| 382 | height: 100%; | ||
| 383 | display: flex; | ||
| 384 | justify-content: center; | ||
| 385 | align-items: center; | ||
| 386 | font-family: PingFangSC-Regular; | ||
| 387 | font-size: 16px; | ||
| 388 | } | ||
| 389 | } | ||
| 390 | </style> |
src/pages/detailStandard/detailStandard_sun.vue
| File was created | 1 | <template> | |
| 2 | <view class="container"> | ||
| 3 | <view class="detail"> | ||
| 4 | <view class="detail1"><image v-bind:src="detail.image"></image></view> | ||
| 5 | <view class="detail2"> | ||
| 6 | <view class="detail2_name">{{detail.name}}</view> | ||
| 7 | <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> | ||
| 8 | <view class="detail2_price"><span>￥{{detail.price}}</span></view> | ||
| 9 | </view> | ||
| 10 | </view> | ||
| 11 | <view class="choose"> | ||
| 12 | <view class="colour"> | ||
| 13 | <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala2.png"></image></view> | ||
| 14 | <view class="colour_exp">*黑色 BHL192345</view> | ||
| 15 | <view class="colour2"> | ||
| 16 | <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view> | ||
| 17 | </view> | ||
| 18 | <hr/> | ||
| 19 | </view> | ||
| 20 | <view class="colour"> | ||
| 21 | <view class="colour1"><span>镜片颜色</span><image src="/static/img/detail/xiala2.png"></image></view> | ||
| 22 | <view class="colour_exp">*BL192345 粉紫色【限时打折】</view> | ||
| 23 | <view class="jp_colour2"> | ||
| 24 | <view class="jp_colour" v-for="(colours) in jp" :key="colours.key"><image v-bind:src="colours.img"></image></view> | ||
| 25 | </view> | ||
| 26 | <hr/> | ||
| 27 | </view> | ||
| 28 | <view class="split"> | ||
| 29 | <view class="split1"> | ||
| 30 | <span>折射率</span> | ||
| 31 | <span class="split1_span">注：折射率越高，镜片越薄，看起来更美观。</span> | ||
| 32 | <image src="/static/img/detail/xiala2.png"></image> | ||
| 33 | </view> | ||
| 34 | <view class="split2"> | ||
| 35 | <view class="split2_number">0-300度</view> | ||
| 36 | <view class="split2_choose"><view class="split2_tui">1.56（推荐）</view><view>1.60</view></view> | ||
| 37 | </view> | ||
| 38 | <view class="split2"> | ||
| 39 | <view class="split2_number">300-1000度</view> | ||
| 40 | <view class="split2_choose"><view class="split2_tui">1.71（推荐）</view> | ||
| 41 | <view>1.67</view><view>1.74</view><view>1.80</view><view>1.71</view></view> | ||
| 42 | </view> | ||
| 43 | <hr/> | ||
| 44 | </view> | ||
| 45 | <view class="size"> | ||
| 46 | <view class="size1"> | ||
| 47 | <view class="size1_1">框架尺寸</view> | ||
| 48 | <view><span>+￥20</span><image src="/static/img/detail/xiala2.png"></image></view> | ||
| 49 | </view> | ||
| 50 | <view class="size2"> | ||
| 51 | <view>通用</view> | ||
| 52 | <view>定制</view> | ||
| 53 | </view> | ||
| 54 | <!-- uni-sliper插件 --> | ||
| 55 | <view class="D3_list"> | ||
| 56 | <view v-for="(item) in parameter" :key="item.key"> | ||
| 57 | <view><image class="D3_image" v-bind:src = "item.img"></image></view> | ||
| 58 | <view class="D3_list_jDu"> | ||
| 59 | <c-progress class="c-progress" | ||
| 60 | :percent="item.percent" | ||
| 61 | :show-slider="false" :width="190" | ||
| 62 | :standard="item.standard_l" | ||
| 63 | :stand_width="item.slength" | ||
| 64 | progressColor="#FF6B4A" | ||
| 65 | /> | ||
| 66 | <view>{{item.standard}}</view> | ||
| 67 | </view> | ||
| 68 | </view> | ||
| 69 | <hr/> | ||
| 70 | </view> | ||
| 71 | </view> | ||
| 72 | <view class="part"> | ||
| 73 | <view class="size1"> | ||
| 74 | <view class="size1_1">配件</view> | ||
| 75 | <view><span>+￥0.00</span><image src="/static/img/detail/xiala2.png"></image></view> | ||
| 76 | </view> | ||
| 77 | <view class="colour_exp">*0290</view> | ||
| 78 | <view class="part_som"> | ||
| 79 | <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view> | ||
| 80 | </view> | ||
| 81 | </view> | ||
| 82 | </view> | ||
| 83 | <view class="buy"> | ||
| 84 | <view class="buy1">选了镜框，想选镜片？</view> | ||
| 85 | <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> | ||
| 86 | <view class="buy3"> | ||
| 87 | <view class="buy3_1">暂时不选</view> | ||
| 88 | <view class="buy3_2">立即去选</view> | ||
| 89 | </view> | ||
| 90 | </view> | ||
| 91 | <view class="zhanwei"></view> | ||
| 92 | <view class="button"><view>立即结算</view></view> | ||
| 93 | </view> | ||
| 94 | </template> | ||
| 95 | <script> | ||
| 96 | import CProgress from '../../components/UniSliper/UniSliper' | ||
| 97 | |||
| 98 | export default { | ||
| 99 | components: { | ||
| 100 | CProgress | ||
| 101 | }, | ||
| 102 | data(){ | ||
| 103 | return{ | ||
| 104 | detail:{ | ||
| 105 | image:'/static/img/detail/sun_glass.png', | ||
| 106 | name:'商品名称商品名称商品名称商品名称商品名称', | ||
| 107 | price: 180, | ||
| 108 | number: 1, | ||
| 109 | }, | ||
| 110 | //框架颜色 | ||
| 111 | colour:[ | ||
| 112 | {key:0 ,img: '/static/img/detail/Kuang/s1.png'}, | ||
| 113 | {key:1 ,img: '/static/img/detail/Kuang/s2.png'}, | ||
| 114 | {key:2 ,img: '/static/img/detail/Kuang/s3.png'}, | ||
| 115 | {key:3 ,img: '/static/img/detail/Kuang/s4.png'}, | ||
| 116 | {key:4 ,img: '/static/img/detail/Kuang/s5.png'}, | ||
| 117 | {key:5 ,img: '/static/img/detail/Kuang/s6.png'}, | ||
| 118 | {key:6 ,img: '/static/img/detail/Kuang/s7.png'} | ||
| 119 | ], | ||
| 120 | //镜片颜色 | ||
| 121 | jp:[ | ||
| 122 | {key:0 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | ||
| 123 | {key:1 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | ||
| 124 | {key:2 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | ||
| 125 | {key:3 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | ||
| 126 | {key:4 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | ||
| 127 | {key:5 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | ||
| 128 | {key:6 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | ||
| 129 | {key:7 ,img: '/static/img/detail/Kuang/sun_jp.png'}, | ||
| 130 | {key:8 ,img: '/static/img/detail/Kuang/sun_jp.png'} | ||
| 131 | ], | ||
| 132 | //规格参数 | ||
| 133 | parameter:[ | ||
| 134 | {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100}, | ||
| 135 | {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50}, | ||
| 136 | {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50}, | ||
| 137 | {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30}, | ||
| 138 | {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60}, | ||
| 139 | ], | ||
| 140 | //配饰 | ||
| 141 | part:[ | ||
| 142 | {key: 0,img:'/static/img/detail/Kuang/g1.png'}, | ||
| 143 | {key: 1,img:'/static/img/detail/Kuang/g1.png'}, | ||
| 144 | {key: 2,img:'/static/img/detail/Kuang/g2.png'}, | ||
| 145 | {key: 3,img:'/static/img/detail/Kuang/g1.png'}, | ||
| 146 | {key: 4,img:'/static/img/detail/Kuang/g1.png'}, | ||
| 147 | {key: 5,img:'/static/img/detail/Kuang/g3.png'}, | ||
| 148 | {key: 6,img:'/static/img/detail/Kuang/g3.png'}, | ||
| 149 | {key: 7,img:'/static/img/detail/Kuang/g2.png'}, | ||
| 150 | |||
| 151 | ], | ||
| 152 | } | ||
| 153 | } | ||
| 154 | } | ||
| 155 | </script> | ||
| 156 | |||
| 157 | <style lang="scss"> | ||
| 158 | .container{ | ||
| 159 | min-height: 100vh; | ||
| 160 | background: #F2F2F2; | ||
| 161 | padding-top: 10px; | ||
| 162 | box-sizing: border-box; | ||
| 163 | } | ||
| 164 | hr{ | ||
| 165 | border: none; | ||
| 166 | height: 1px; | ||
| 167 | background: #F2F2F2; | ||
| 168 | margin-top: 18px; | ||
| 169 | } | ||
| 170 | .detail{ | ||
| 171 | height: 272rpx; | ||
| 172 | background: #FFFFFF; | ||
| 173 | border-radius: 8px; | ||
| 174 | padding: 16px; | ||
| 175 | box-sizing: border-box; | ||
| 176 | display: flex; | ||
| 177 | justify-content: space-between; | ||
| 178 | align-items: center; | ||
| 179 | } | ||
| 180 | .detail1{ | ||
| 181 | height: 188rpx; | ||
| 182 | width: 188rpx; | ||
| 183 | image{ | ||
| 184 | width: 100%; | ||
| 185 | height: 100%; | ||
| 186 | border-radius: 8px; | ||
| 187 | } | ||
| 188 | } | ||
| 189 | .detail2{ | ||
| 190 | width: 68%; | ||
| 191 | view{ | ||
| 192 | margin-bottom: 8px; | ||
| 193 | font-family: PingFangSC-Regular; | ||
| 194 | } | ||
| 195 | .detail2_name{ | ||
| 196 | font-size: 14px; | ||
| 197 | color: #333333; | ||
| 198 | letter-spacing: -0.26px; | ||
| 199 | line-height: 18px; | ||
| 200 | } | ||
| 201 | .detail2_tui{ | ||
| 202 | font-size: 10px; | ||
| 203 | color: #999999; | ||
| 204 | letter-spacing: -0.19px; | ||
| 205 | span{ | ||
| 206 | margin-right: 10px; | ||
| 207 | } | ||
| 208 | } | ||
| 209 | .detail2_price{ | ||
| 210 | font-size: 14px; | ||
| 211 | color: #FF6B4A; | ||
| 212 | letter-spacing: -0.26px; | ||
| 213 | } | ||
| 214 | } | ||
| 215 | .choose{ | ||
| 216 | background: #FFFFFF; | ||
| 217 | padding: 16px; | ||
| 218 | box-sizing: border-box; | ||
| 219 | margin-top: 10px; | ||
| 220 | border-radius: 8px; | ||
| 221 | .colour1{ | ||
| 222 | span{ | ||
| 223 | font-family: PingFangSC-Medium; | ||
| 224 | font-size: 16px; | ||
| 225 | color: #333333; | ||
| 226 | letter-spacing: -0.3px; | ||
| 227 | text-align: justify; | ||
| 228 | line-height: 24px; | ||
| 229 | font-weight: bold; | ||
| 230 | } | ||
| 231 | image{ | ||
| 232 | float: right; | ||
| 233 | width: 40rpx; | ||
| 234 | height: 36rpx; | ||
| 235 | } | ||
| 236 | } | ||
| 237 | .colour_exp{ | ||
| 238 | font-family: PingFangSC-Regular; | ||
| 239 | font-size: 12px; | ||
| 240 | color: #666666; | ||
| 241 | letter-spacing: 0; | ||
| 242 | margin-top: 10px; | ||
| 243 | margin-bottom: 10px; | ||
| 244 | } | ||
| 245 | .colour2{ | ||
| 246 | display: grid; | ||
| 247 | grid-template-columns: repeat(5, 17%); | ||
| 248 | justify-content: space-between ; | ||
| 249 | grid-row-gap: 10px; | ||
| 250 | margin-bottom: 14px; | ||
| 251 | view{ | ||
| 252 | border: 1px solid #F2F2F2; | ||
| 253 | image{ | ||
| 254 | width: 100%; | ||
| 255 | height: 100%; | ||
| 256 | } | ||
| 257 | } | ||
| 258 | view:hover{ | ||
| 259 | border: 1px solid #FF6B4A; | ||
| 260 | } | ||
| 261 | } | ||
| 262 | } | ||
| 263 | .jp_colour2{ | ||
| 264 | display: grid; | ||
| 265 | grid-template-columns: repeat(6, 12%); | ||
| 266 | grid-row-gap: 10px; | ||
| 267 | grid-column-gap: 6px; | ||
| 268 | margin-bottom: 14px; | ||
| 269 | view{ | ||
| 270 | border: 1px solid #F2F2F2; | ||
| 271 | height: 80rpx; | ||
| 272 | image{ | ||
| 273 | width: 100%; | ||
| 274 | height: 100%; | ||
| 275 | } | ||
| 276 | } | ||
| 277 | view:hover{ | ||
| 278 | border: 1px solid #FF6B4A; | ||
| 279 | } | ||
| 280 | } | ||
| 281 | .split1{ | ||
| 282 | span{ | ||
| 283 | font-family: PingFangSC-Medium; | ||
| 284 | font-size: 16px; | ||
| 285 | color: #333333; | ||
| 286 | letter-spacing: -0.3px; | ||
| 287 | text-align: justify; | ||
| 288 | line-height: 24px; | ||
| 289 | font-weight: bold; | ||
| 290 | margin-right:8px; | ||
| 291 | } | ||
| 292 | .split1_span{ | ||
| 293 | font-family: PingFangSC-Regular; | ||
| 294 | font-size: 10px; | ||
| 295 | color: #999999; | ||
| 296 | letter-spacing: -0.3px; | ||
| 297 | font-weight:normal; | ||
| 298 | } | ||
| 299 | image{ | ||
| 300 | float: right; | ||
| 301 | width: 40rpx; | ||
| 302 | height: 36rpx; | ||
| 303 | } | ||
| 304 | } | ||
| 305 | .split2{ | ||
| 306 | margin-bottom: 12px; | ||
| 307 | .split2_number{ | ||
| 308 | font-family: PingFangSC-Regular; | ||
| 309 | font-size: 10px; | ||
| 310 | color: #999999; | ||
| 311 | letter-spacing: -0.19px; | ||
| 312 | margin-bottom: 6px; | ||
| 313 | } | ||
| 314 | .split2_choose{ | ||
| 315 | display: flex; | ||
| 316 | view{ | ||
| 317 | display: flex; | ||
| 318 | justify-content: center; | ||
| 319 | align-items: center; | ||
| 320 | font-family: PingFangSC-Regular; | ||
| 321 | font-size: 12px; | ||
| 322 | color: #666666; | ||
| 323 | background: #F2F2F2; | ||
| 324 | width: 100rpx; | ||
| 325 | height: 60rpx; | ||
| 326 | border-radius: 2px; | ||
| 327 | margin-right: 10px; | ||
| 328 | } | ||
| 329 | view:hover{ | ||
| 330 | color: #FF6B4A; | ||
| 331 | background: rgba(255,107,74,0.15); | ||
| 332 | } | ||
| 333 | .split2_tui{ | ||
| 334 | width: 186rpx; | ||
| 335 | height: 60rpx; | ||
| 336 | } | ||
| 337 | } | ||
| 338 | |||
| 339 | } | ||
| 340 | .size,.part{ | ||
| 341 | margin-top:14px; | ||
| 342 | .size1{ | ||
| 343 | display: flex; | ||
| 344 | justify-content: space-between; | ||
| 345 | margin-bottom: 10px; | ||
| 346 | .size1_1{ | ||
| 347 | font-weight: bold; | ||
| 348 | font-family: PingFangSC-Medium; | ||
| 349 | font-size: 16px; | ||
| 350 | color: #333333; | ||
| 351 | letter-spacing: -0.3px; | ||
| 352 | line-height: 24px; | ||
| 353 | } | ||
| 354 | view{ | ||
| 355 | span{ | ||
| 356 | font-family: PingFangSC-Regular; | ||
| 357 | font-size: 14px; | ||
| 358 | color: #FF6B4A; | ||
| 359 | letter-spacing: -0.26px; | ||
| 360 | margin-right: 12px; | ||
| 361 | } | ||
| 362 | image{ | ||
| 363 | width: 40rpx; | ||
| 364 | height: 36rpx; | ||
| 365 | } | ||
| 366 | } | ||
| 367 | } | ||
| 368 | .size2{ | ||
| 369 | view{ | ||
| 370 | display: inline-flex; | ||
| 371 | align-items: center; | ||
| 372 | justify-content: center; //字体居中 | ||
| 373 | margin-right: 12px; | ||
| 374 | margin-bottom: 20px; | ||
| 375 | width: 136rpx; | ||
| 376 | height: 60rpx; | ||
| 377 | background: #F2F2F2; | ||
| 378 | border-radius: 2px; | ||
| 379 | font-family: PingFangSC-Regular; | ||
| 380 | font-size: 12px; | ||
| 381 | color: #666666; | ||
| 382 | } | ||
| 383 | view:hover{ | ||
| 384 | color: #FF6B4A; | ||
| 385 | background: rgba(255,107,74,0.15); | ||
| 386 | } | ||
| 387 | } | ||
| 388 | .D3_list{ | ||
| 389 | margin-bottom: 4px; | ||
| 390 | } | ||
| 391 | .D3_list>view{ | ||
| 392 | display: flex; | ||
| 393 | align-content: center; | ||
| 394 | margin-bottom: 10px; | ||
| 395 | view{ | ||
| 396 | margin-right: 10px; | ||
| 397 | } | ||
| 398 | } | ||
| 399 | .D3_list image{ | ||
| 400 | width: 50px; | ||
| 401 | height: 25px; | ||
| 402 | margin-right: 6px; | ||
| 403 | } | ||
| 404 | .D3_list span{ | ||
| 405 | margin-left: 6px; | ||
| 406 | margin-right: 5px; | ||
| 407 | font-family: 'PingFangSC-Regular'; | ||
| 408 | } | ||
| 409 | .D3_list_jDu{ | ||
| 410 | view{ | ||
| 411 | font-family: PingFangSC-Regular; | ||
| 412 | font-size: 10px; | ||
| 413 | color: #999999; | ||
| 414 | letter-spacing: -0.19px; | ||
| 415 | } | ||
| 416 | } | ||
| 417 | } | ||
| 418 | .part{ | ||
| 419 | .part_som{ | ||
| 420 | display: grid; | ||
| 421 | justify-content: space-between; | ||
| 422 | grid-template-columns: repeat(4, 22%); | ||
| 423 | grid-row-gap: 12px; | ||
| 424 | margin-bottom: 14px; | ||
| 425 | view{ | ||
| 426 | border: 1px solid #F2F2F2; | ||
| 427 | height: 72rpx; | ||
| 428 | image{ | ||
| 429 | width: 100%; | ||
| 430 | height: 100%; | ||
| 431 | } | ||
| 432 | } | ||
| 433 | view:hover{ | ||
| 434 | border: 1px solid #FF6B4A; | ||
| 435 | } | ||
| 436 | } | ||
| 437 | } | ||
| 438 | .buy{ | ||
| 439 | height: 280rpx; | ||
| 440 | background: #FFFFFF ; | ||
| 441 | margin-top: 10px; | ||
| 442 | border-radius: 8px; | ||
| 443 | padding-top: 20px; | ||
| 444 | box-sizing: border-box; | ||
| 445 | margin-bottom: 20px; | ||
| 446 | } | ||
| 447 | .buy1{ | ||
| 448 | font-family: PingFangSC-Medium; | ||
| 449 | font-size: 16px; | ||
| 450 | font-weight: bold; | ||
| 451 | color: #333333; | ||
| 452 | text-align: center; | ||
| 453 | } | ||
| 454 | .buy2{ | ||
| 455 | font-family: PingFangSC-Regular; | ||
| 456 | font-size: 12px; | ||
| 457 | color: #999999; | ||
| 458 | text-align: center; | ||
| 459 | margin: 10px; | ||
| 460 | } | ||
| 461 | .buy3{ | ||
| 462 | font-family: PingFangSC-Regular; | ||
| 463 | font-size: 16px; | ||
| 464 | display: flex; | ||
| 465 | justify-content: center; | ||
| 466 | margin-top: 14px; | ||
| 467 | view{ | ||
| 468 | border-radius: 20px; | ||
| 469 | width: 240rpx; | ||
| 470 | height: 80rpx; | ||
| 471 | display: flex; | ||
| 472 | justify-content: center; | ||
| 473 | align-items: center; | ||
| 474 | } | ||
| 475 | .buy3_1{ | ||
| 476 | margin-right: 20px; | ||
| 477 | background: rgba(255,107,74,0.15); | ||
| 478 | color: #FF6B4A ; | ||
| 479 | } | ||
| 480 | .buy3_2{ | ||
| 481 | background: #FF6B4A; | ||
| 482 | color: #FFFFFF ; | ||
| 483 | } | ||
| 484 | } | ||
| 485 | .zhanwei{ | ||
| 486 | background: #F2F2F2; | ||
| 487 | height: 120rpx; | ||
| 488 | } | ||
| 489 | .button{ | ||
| 490 | position: fixed; | ||
| 491 | bottom: 0; | ||
| 492 | width:100%; | ||
| 493 | height: 112rpx; | ||
| 494 | background: #FF6B4A 100%; | ||
| 495 | view{ | ||
| 496 | color: #FFFFFF; | ||
| 497 | height: 100%; | ||
| 498 | display: flex; | ||
| 499 | justify-content: center; | ||
| 500 | align-items: center; | ||
| 501 | font-family: PingFangSC-Regular; | ||
| 502 | font-size: 16px; | ||
| 503 | } | ||
| 504 | } | ||
| 505 | |||
| 506 | </style> |
src/static/img/detail/Kuang/g1.png
9.28 KB
src/static/img/detail/Kuang/g2.png
8.61 KB
src/static/img/detail/Kuang/g3.png
7.95 KB
src/static/img/detail/Kuang/s1.png
7.61 KB
src/static/img/detail/Kuang/s2.png
7.83 KB
src/static/img/detail/Kuang/s3.png
7.28 KB
src/static/img/detail/Kuang/s4.png
7.69 KB
src/static/img/detail/Kuang/s5.png
7.39 KB
src/static/img/detail/Kuang/s6.png
7.27 KB
src/static/img/detail/Kuang/s7.png
7.6 KB
src/static/img/detail/Kuang/sun_jp.png
2.5 KB
src/static/img/detail/sun_glass.png
25.2 KB