From 7d9acd27a2927c1ed2d38127e956ff0b3cc463f5 Mon Sep 17 00:00:00 2001
From: yr <1308291615@qq.com>
Date: Mon, 11 May 2020 23:39:57 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=89=E8=B4=AD=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UniSliper/UniSliper.vue          | 207 ++++++++++
 src/pages.json                                  |  14 +-
 src/pages/detailStandard/detailStandard_k.vue   | 390 ++++++++++++++++++
 src/pages/detailStandard/detailStandard_sun.vue | 506 ++++++++++++++++++++++++
 4 files changed, 1116 insertions(+), 1 deletion(-)
 create mode 100644 src/components/UniSliper/UniSliper.vue
 create mode 100644 src/pages/detailStandard/detailStandard_k.vue
 create mode 100644 src/pages/detailStandard/detailStandard_sun.vue

diff --git a/src/components/UniSliper/UniSliper.vue b/src/components/UniSliper/UniSliper.vue
new file mode 100644
index 0000000..3e5955c
--- /dev/null
+++ b/src/components/UniSliper/UniSliper.vue
@@ -0,0 +1,207 @@
+<template>
+  <div class="c-progress">
+    <div class="c-progress-outer" :style="setProgressBgStyle" ref="progress">
+      <div class="c-progress-inner" :style="setProgressStyle"></div>
+      <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div>
+    </div>
+    <span v-if="showPerText">{{stand_width}}mm</span>
+  </div>
+</template>
+
+<script>
+    // 使用了element的颜色
+    const colorTable = {
+        success: '#13ce66',
+        fail: '#ff4949',
+        warning: '#e6a23c',
+        default: '#409EFF'
+    }
+    export default {
+        name: 'CProgress',
+        props: {
+            percent: {
+                type: Number,
+                default: 60
+            },
+            showSlider: {
+                type: Boolean,
+                default: true
+            },
+            showPerText: {
+                type: Boolean,
+                default: true
+            },
+            // 进度条的宽度
+            width: {
+                type: Number,
+                default: 300
+            },
+            bgColor: {
+                type: String,
+                default: '#ebeef5'
+            },
+            progressColor: {
+                type: String,
+                default: '#409EFF'
+            },
+            // 滑块的宽度
+            sliderWidth: {
+                type: Number,
+                default: 20
+            },
+            // 颜色的类型
+            type: {
+                type: String,
+                default: colorTable.default
+            },
+            //规格长度
+            standard:{
+                type: Number,
+                default: 1.4
+            },
+            //初始长度
+            stand_width:{
+                type: Number,
+                default: 0
+            }   
+        },
+        data () {
+            return {
+                sliderLeft: 0, // 滑块相对父元素发x坐标
+                progressWidth: 0, // 进度条当前的的宽度
+                tempPercent: 0,
+            }
+        },
+        computed: {
+            // 设置进度条的背景样式
+            setProgressBgStyle () {
+                return {
+                    // 加上滑块的宽度
+                    width: `${this.width + this.sliderWidth}px`
+                }
+            },
+            // 设置进度条的样式
+            setProgressStyle () {
+                const color = colorTable[this.type] || this.progressColor
+                return {
+                    width: `${this.progressWidth}px`,
+                    background: color
+                }
+            },
+            // 设置滑块的样式
+            setSliderStyle () {
+                const color = colorTable[this.type] || this.progressColor
+                return {
+                    border: `1px solid ${color}`,
+                    width: `${this.sliderWidth}px`,
+                    height: `${this.sliderWidth}px`,
+                    left: `${this.sliderLeft}px`
+                }
+            }
+        },
+        mounted () {
+            this.sliderLeft = this.width / 100 * this.percent
+            this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度
+            this.tempPercent = this.percent
+            this.addListener()
+        },
+        methods: {
+            addListener () {
+                const slider = this.$refs.slider
+                const progress = this.$refs.progress
+                let isClickSlider = false
+                let distance = 0 // 滑块与点击坐标的绝对距离
+                progress.onclick = (e) => {
+                    // 阻止事件冒泡
+                    if (e.target == slider) {
+                        return
+                    }
+                    let curX = progress.offsetLeft
+                    this.sliderLeft = e.pageX - curX
+                    if (this.sliderLeft <= 0) {
+                        this.sliderLeft = 0
+                    }
+                    if (this.sliderLeft >= this.width) {
+                        this.sliderLeft = this.width
+                    }
+                    this._countCurPercent()
+                }
+                // slider.onmousedown = (e) => {
+                //     isClickSlider = true
+                //     let curX = slider.offsetLeft
+                //     distance = e.pageX - curX // 得出绝对距离
+                // }
+                progress.onmousemove = (e) => {
+                    if (isClickSlider) {
+                        // 判断是否已经超出进度条的长度
+                        if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) {
+                            this.sliderLeft = e.pageX - distance
+                            this._countCurPercent()
+                        }
+                    }
+                }
+                progress.onmouseup = () => {
+                    isClickSlider = false
+                }
+            },
+            // 算出百分比
+            _countCurPercent () {
+                this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100))
+                this.progressWidth = this.sliderLeft + 20
+                // 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整
+                if (this.tempPercent <= 0) {
+                    this.progressWidth = 0
+                    this.sliderLeft = 0
+                }
+                if (this.tempPercent >= 100) {
+                    this.progressWidth = this.width + 20
+                    this.sliderLeft = this.width
+                }
+                this.stand_width = this.tempPercent*this.standard
+                this.stand_width = parseInt(this.stand_width/1) //取整
+                this.$emit('percentChange', this.tempPercent)
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+  .c-progress {
+    $width: 300px;
+    $radius: 5px;
+    display: flex;
+    align-items: center;
+    
+    span {
+      margin-left: 5px;
+      font-size: 14px;
+      color: #666;
+    }
+    
+    .c-progress-outer {
+      width: $width;
+      height: 10px;
+      background: #ebeef5;
+      position: relative;
+      display: flex;
+      align-items: center;
+      
+      .c-progress-inner {
+        width: 100px;
+        height: 10px;
+        background: #409EFF;
+      }
+      
+      .c-progress-slider {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: #fff;
+        border: 1px solid #409EFF;
+        position: absolute;
+        z-index: 10;
+        left: 10px;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages.json b/src/pages.json
index 99bcb48..db9b855 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -72,7 +72,19 @@
 		},
 		{
 			"path": "pages/myOrderPaying/myOrderPaying"
-		}
+		},
+		{
+            "path" : "pages/detailStandard/detailStandard_sun",
+			"style": {
+				"navigationBarTitleText": "太阳镜选购页"
+			}
+		},
+		{
+            "path" : "pages/detailStandard/detailStandard_k",
+			"style": {
+				"navigationBarTitleText": "镜框选购页"
+			}
+        }
         
     ],
 	"globalStyle": {
diff --git a/src/pages/detailStandard/detailStandard_k.vue b/src/pages/detailStandard/detailStandard_k.vue
new file mode 100644
index 0000000..d599817
--- /dev/null
+++ b/src/pages/detailStandard/detailStandard_k.vue
@@ -0,0 +1,390 @@
+<template>
+    <view class="container">
+        <view class="detail">
+            <view class="detail1"><image v-bind:src="detail.image"></image></view>
+            <view class="detail2">
+                <view class="detail2_name">{{detail.name}}</view>
+                <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view>
+                <view class="detail2_price"><span>￥{{detail.price}}</span></view>
+            </view>
+        </view>
+        <view class="choose">
+            <view class="colour">
+                <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala2.png"></image></view>
+                <view class="colour_exp">*黑色 BHL192345</view>
+                <view class="colour2">
+                    <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view>
+                </view>
+                <hr/>
+            </view>
+            <view class="size">
+                <view class="size1">
+                    <view class="size1_1">框架尺寸</view>
+                    <view><span>+￥20</span><image src="/static/img/detail/xiala2.png"></image></view>
+                </view>
+                <view class="size2"> 
+                    <view>通用</view>
+                    <view>定制</view>
+                </view>
+                <view class="D3_list">
+                    <view v-for="(item) in parameter" :key="item.key">
+                        <view><image class="D3_image"  v-bind:src = "item.img"></image></view>
+                        <view class="D3_list_jDu">
+                            <!-- uni-sliper插件 -->
+                            <c-progress class="c-progress" 
+                            :percent="item.percent" 
+                            :show-slider="false" :width="190" 
+                            :standard="item.standard_l" 
+                            :stand_width="item.slength" 
+                            progressColor="#FF6B4A"
+                            />
+                            <view>{{item.standard}}</view>
+                        </view> 
+                    </view>
+                    <hr/>
+                </view>
+            </view>
+            <view class="part">
+                <view class="size1">
+                    <view class="size1_1">配件</view>
+                    <view><span>+￥0.00</span><image src="/static/img/detail/xiala2.png"></image></view>
+                </view>
+                <view class="colour_exp">*0290</view>
+                <view class="part_som">
+                    <view v-for="(part) in part" :key="part.key"><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">立即去选</view>
+            </view>
+        </view>
+        <view class="zhanwei"></view>
+        <view class="button"><view>立即结算</view></view>
+    </view>
+</template>
+<script>
+import CProgress from '../../components/UniSliper/UniSliper'
+
+export default {
+    components: {
+        CProgress
+    },
+    data(){
+        return{
+            detail:{
+                image:'/static/img/detail/d1.png',
+                name:'商品名称商品名称商品名称商品名称商品名称',
+                price: 180,
+                number: 1,
+            },
+            //框架颜色
+            colour:[
+                {key:0 ,img: '/static/img/detail/Kuang/s1.png'},
+                {key:1 ,img: '/static/img/detail/Kuang/s2.png'},
+                {key:2 ,img: '/static/img/detail/Kuang/s3.png'},
+                {key:3 ,img: '/static/img/detail/Kuang/s4.png'},
+                {key:4 ,img: '/static/img/detail/Kuang/s5.png'},
+                {key:5 ,img: '/static/img/detail/Kuang/s6.png'},
+                {key:6 ,img: '/static/img/detail/Kuang/s7.png'}
+            ],
+            //规格
+            parameter:[
+                {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100},
+                {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50},
+                {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50},
+                {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30},
+                {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60},
+            ],
+            //配饰
+            part:[
+                {key: 0,img:'/static/img/detail/Kuang/g1.png'},
+                {key: 1,img:'/static/img/detail/Kuang/g1.png'},
+                {key: 2,img:'/static/img/detail/Kuang/g2.png'},
+                {key: 3,img:'/static/img/detail/Kuang/g1.png'},
+                {key: 4,img:'/static/img/detail/Kuang/g1.png'},
+                {key: 5,img:'/static/img/detail/Kuang/g3.png'},
+                {key: 6,img:'/static/img/detail/Kuang/g3.png'},
+                {key: 7,img:'/static/img/detail/Kuang/g2.png'},
+            ],
+        }
+    }
+}
+</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;
+}
+.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: 188rpx;
+    width: 188rpx;
+    image{
+        width: 100%;
+        height: 100%;
+        border-radius: 8px;
+    }
+}
+.detail2{
+    width: 68%;
+    view{
+        margin-bottom: 8px;
+        font-family: PingFangSC-Regular;
+    }
+    .detail2_name{
+        font-size: 14px;
+        color: #333333;
+        letter-spacing: -0.26px;
+        line-height: 18px;
+    }
+    .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;
+    }
+}
+.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;
+        }
+    }
+    .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;
+        view{
+            border: 1px solid #F2F2F2;
+            image{
+                width: 100%;
+                height: 100%;
+            }
+        }
+        view:hover{
+            border: 1px solid #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;
+        }
+    }
+}
+.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%;
+            }
+        }
+        view:hover{
+            border: 1px solid #FF6B4A;
+        }
+    }
+}
+.buy{
+    height: 280rpx;
+    background: #FFFFFF ;
+    margin-top: 10px;
+    border-radius: 8px;
+    padding-top: 20px;
+    box-sizing: border-box;
+    margin-bottom: 20px;
+}
+.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: 120rpx;
+}
+.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>
\ No newline at end of file
diff --git a/src/pages/detailStandard/detailStandard_sun.vue b/src/pages/detailStandard/detailStandard_sun.vue
new file mode 100644
index 0000000..ecf54c8
--- /dev/null
+++ b/src/pages/detailStandard/detailStandard_sun.vue
@@ -0,0 +1,506 @@
+<template>
+    <view class="container">
+        <view class="detail">
+            <view class="detail1"><image v-bind:src="detail.image"></image></view>
+            <view class="detail2">
+                <view class="detail2_name">{{detail.name}}</view>
+                <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view>
+                <view class="detail2_price"><span>￥{{detail.price}}</span></view>
+            </view>
+        </view>
+        <view class="choose">
+            <view class="colour">
+                <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala2.png"></image></view>
+                <view class="colour_exp">*黑色 BHL192345</view>
+                <view class="colour2">
+                    <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view>
+                </view>
+                <hr/>
+            </view>
+            <view class="colour">
+                <view class="colour1"><span>镜片颜色</span><image src="/static/img/detail/xiala2.png"></image></view>
+                <view class="colour_exp">*BL192345 粉紫色【限时打折】</view>
+                <view class="jp_colour2">
+                    <view class="jp_colour" v-for="(colours) in jp" :key="colours.key"><image v-bind:src="colours.img"></image></view>
+                </view>
+                <hr/>
+            </view>
+            <view class="split">
+                <view class="split1">
+                    <span>折射率</span>
+                    <span class="split1_span">注：折射率越高，镜片越薄，看起来更美观。</span>
+                    <image src="/static/img/detail/xiala2.png"></image>
+                </view>
+                <view class="split2">
+                    <view class="split2_number">0-300度</view>
+                    <view class="split2_choose"><view class="split2_tui">1.56（推荐）</view><view>1.60</view></view>
+                </view>
+                <view class="split2">
+                    <view class="split2_number">300-1000度</view>
+                    <view class="split2_choose"><view class="split2_tui">1.71（推荐）</view>
+                    <view>1.67</view><view>1.74</view><view>1.80</view><view>1.71</view></view>
+                </view>
+                <hr/>
+            </view>
+            <view class="size">
+                <view class="size1">
+                    <view class="size1_1">框架尺寸</view>
+                    <view><span>+￥20</span><image src="/static/img/detail/xiala2.png"></image></view>
+                </view>
+                <view class="size2"> 
+                    <view>通用</view>
+                    <view>定制</view>
+                </view>
+                <!-- uni-sliper插件 -->
+                <view class="D3_list">
+                    <view v-for="(item) in parameter" :key="item.key">
+                        <view><image class="D3_image"  v-bind:src = "item.img"></image></view>
+                        <view class="D3_list_jDu">
+                            <c-progress class="c-progress" 
+                            :percent="item.percent" 
+                            :show-slider="false" :width="190" 
+                            :standard="item.standard_l" 
+                            :stand_width="item.slength" 
+                            progressColor="#FF6B4A"
+                            />
+                            <view>{{item.standard}}</view>
+                        </view> 
+                    </view>
+                    <hr/>
+                </view>
+            </view>
+            <view class="part">
+                <view class="size1">
+                    <view class="size1_1">配件</view>
+                    <view><span>+￥0.00</span><image src="/static/img/detail/xiala2.png"></image></view>
+                </view>
+                <view class="colour_exp">*0290</view>
+                <view class="part_som">
+                    <view v-for="(part) in part" :key="part.key"><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">立即去选</view>
+            </view>
+        </view>
+        <view class="zhanwei"></view>
+        <view class="button"><view>立即结算</view></view>
+    </view>
+</template>
+<script>
+import CProgress from '../../components/UniSliper/UniSliper'
+
+export default {
+    components: {
+        CProgress
+    },
+    data(){
+        return{
+            detail:{
+                image:'/static/img/detail/sun_glass.png',
+                name:'商品名称商品名称商品名称商品名称商品名称',
+                price: 180,
+                number: 1,
+            },
+            //框架颜色
+            colour:[
+                {key:0 ,img: '/static/img/detail/Kuang/s1.png'},
+                {key:1 ,img: '/static/img/detail/Kuang/s2.png'},
+                {key:2 ,img: '/static/img/detail/Kuang/s3.png'},
+                {key:3 ,img: '/static/img/detail/Kuang/s4.png'},
+                {key:4 ,img: '/static/img/detail/Kuang/s5.png'},
+                {key:5 ,img: '/static/img/detail/Kuang/s6.png'},
+                {key:6 ,img: '/static/img/detail/Kuang/s7.png'}
+            ],
+            //镜片颜色
+            jp:[
+                {key:0 ,img: '/static/img/detail/Kuang/sun_jp.png'},
+                {key:1 ,img: '/static/img/detail/Kuang/sun_jp.png'},
+                {key:2 ,img: '/static/img/detail/Kuang/sun_jp.png'},
+                {key:3 ,img: '/static/img/detail/Kuang/sun_jp.png'},
+                {key:4 ,img: '/static/img/detail/Kuang/sun_jp.png'},
+                {key:5 ,img: '/static/img/detail/Kuang/sun_jp.png'},
+                {key:6 ,img: '/static/img/detail/Kuang/sun_jp.png'},
+                {key:7 ,img: '/static/img/detail/Kuang/sun_jp.png'},
+                {key:8 ,img: '/static/img/detail/Kuang/sun_jp.png'}
+            ],
+            //规格参数
+            parameter:[
+                {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100},
+                {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50},
+                {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50},
+                {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30},
+                {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60},
+            ],
+            //配饰
+            part:[
+                {key: 0,img:'/static/img/detail/Kuang/g1.png'},
+                {key: 1,img:'/static/img/detail/Kuang/g1.png'},
+                {key: 2,img:'/static/img/detail/Kuang/g2.png'},
+                {key: 3,img:'/static/img/detail/Kuang/g1.png'},
+                {key: 4,img:'/static/img/detail/Kuang/g1.png'},
+                {key: 5,img:'/static/img/detail/Kuang/g3.png'},
+                {key: 6,img:'/static/img/detail/Kuang/g3.png'},
+                {key: 7,img:'/static/img/detail/Kuang/g2.png'},
+                
+            ],
+        }
+    }
+}
+</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;
+}
+.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: 188rpx;
+    width: 188rpx;
+    image{
+        width: 100%;
+        height: 100%;
+        border-radius: 8px;
+    }
+}
+.detail2{
+    width: 68%;
+    view{
+        margin-bottom: 8px;
+        font-family: PingFangSC-Regular;
+    }
+    .detail2_name{
+        font-size: 14px;
+        color: #333333;
+        letter-spacing: -0.26px;
+        line-height: 18px;
+    }
+    .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;
+    }
+}
+.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;
+        }
+    }
+    .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;
+        view{
+            border: 1px solid #F2F2F2;
+            image{
+                width: 100%;
+                height: 100%;
+            }
+        }
+        view:hover{
+            border: 1px solid #FF6B4A;
+        }
+    }
+}
+.jp_colour2{
+    display: grid;
+    grid-template-columns: repeat(6, 12%);
+    grid-row-gap: 10px;
+    grid-column-gap: 6px;
+    margin-bottom: 14px;
+    view{
+        border: 1px solid #F2F2F2;
+        height: 80rpx;
+        image{
+            width: 100%;
+            height: 100%;
+        }
+    }
+    view:hover{
+        border: 1px solid #FF6B4A;
+    }
+}
+.split1{
+    span{
+        font-family: PingFangSC-Medium;
+        font-size: 16px;
+        color: #333333;
+        letter-spacing: -0.3px;
+        text-align: justify;
+        line-height: 24px;
+        font-weight: bold;
+        margin-right:8px;
+    }
+    .split1_span{
+        font-family: PingFangSC-Regular;
+        font-size: 10px;
+        color: #999999;
+        letter-spacing: -0.3px;
+        font-weight:normal;
+    }
+    image{
+        float: right;
+        width: 40rpx;
+        height: 36rpx;
+    }
+}
+.split2{
+    margin-bottom: 12px;
+    .split2_number{
+        font-family: PingFangSC-Regular;
+        font-size: 10px;
+        color: #999999;
+        letter-spacing: -0.19px;
+        margin-bottom: 6px;
+    }
+    .split2_choose{
+        display: flex;
+        view{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-family: PingFangSC-Regular;
+            font-size: 12px;
+            color: #666666;
+            background: #F2F2F2;
+            width: 100rpx;
+            height: 60rpx;
+            border-radius: 2px;
+            margin-right: 10px;
+        }
+        view:hover{
+            color: #FF6B4A;
+            background: rgba(255,107,74,0.15);
+        }
+        .split2_tui{
+            width: 186rpx;
+            height: 60rpx;
+        }
+    }
+
+}
+.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;
+        }
+    }
+}
+.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%;
+            }
+        }
+        view:hover{
+            border: 1px solid #FF6B4A;
+        }
+    }
+}
+.buy{
+    height: 280rpx;
+    background: #FFFFFF ;
+    margin-top: 10px;
+    border-radius: 8px;
+    padding-top: 20px;
+    box-sizing: border-box;
+    margin-bottom: 20px;
+}
+.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: 120rpx;
+}
+.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>
\ No newline at end of file
-- 
2.0.0