<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>