刘文博 / gulu-vue

Download as
Browse Code »

Commit 7d9acd27a2927c1ed2d38127e956ff0b3cc463f5

Authored by 尹聃
1 parent 72d769fb77
Exists in master

选购页

Showing 4 changed files with 1116 additions and 1 deletions   Show diff stats
src/components/UniSliper/UniSliper.vue
Diff comments   View file @7d9acd2
... ... @@ -0,0 +1,207 @@
  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>
0 208 \ No newline at end of file
... ...
... ... @@ -72,7 +72,19 @@
72 72 },
73 73 {
74 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 89 ],
78 90 "globalStyle": {
... ...
src/pages/detailStandard/detailStandard_k.vue
Diff comments   View file @7d9acd2
... ... @@ -0,0 +1,390 @@
  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>
0 391 \ No newline at end of file
... ...
src/pages/detailStandard/detailStandard_sun.vue
Diff comments   View file @7d9acd2
... ... @@ -0,0 +1,506 @@
  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>
0 507 \ No newline at end of file
... ...