<template>
    <view class="container">
        <view class="D1">
            <!-- 轮播图 -->
            <swiper  class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
                <swiper-item v-for="(item,index) in sliding" :key="index">
                    <view class="swiper-item ">
                        <image :src="item.img" mode="widthFix" class="width100"></image>
                    </view>
                </swiper-item>
            </swiper>
            <view class="D1_price">￥{{price}}</view>
            <view class="D1_name"><span class="D1_name1">{{name}}</span><span class="D1_number">{{number}}购买过</span></view>
            <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
        </view>
        <view class="D2">
            <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
            <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
            <view><span class="D2_span1">折射率：</span><span class="D2_span2">{{introduction.rate}}</span></view>
        </view>
        <view class="D3">
            <view class="D3_header">
                <view>商品保障</view>
                <view>规格参数</view>
                <view>售后保障</view>
            </view>
            <view class="D3_list">
                <view v-for="(item) in parameter" :key="item.key">
                    <image class="D3_image"  v-bind:src = "item.img"></image>
                    <span>{{item.standard}}</span>
                    <span>{{item.slength}}</span>
                </view>
            </view>
        </view>
        <view class="D4">
            <view class="D4_esvalue">
                <view>{{esvalue}}</view>
                <view class="D4_2"></view>
            </view>
            <view class="D4_list">
                <view v-for="(assess) in assess" :key="assess.key">{{assess.Iassess}}</view>
            </view>
        </view>
        <view class="D5">
            <view class="D5_fixed1">
                <image src="/static/img/detail/hr.png"></image>
                <view>商品详细</view>
                <image src="/static/img/detail/hr.png"></image>
            </view>
            <view class="D5_all">
                <image v-bind:src="imgAll"></image>
            </view>
            <view class="D5_photoes">
                <view class="D5_photoes1">
                    <view v-for="(photoes) in photoes" :key="photoes.value">
                        <image  v-bind:src = "photoes.img"></image>
                        <view>{{photoes.value}}</view>
                    </view>
                </view>
                <view class="D5_logo1">帕森防蓝光镜片</view>
                <view class="D5_logo2">健康护眼，我们是认真的！</view>
                <view class="D5_logo3"><image src='/static/img/detail/logo.png'></image></view>
            </view>
        </view>
        <view class="D6">
            <view class="D6_v1">CHARM DETAIL</view>
            <view class="D6_v2">细节展示</view>
            <view ><image v-bind:src="imgDetail"></image></view>
            <view>........................................................................</view>
            <view class="D6_v5"><span class="D6_v5_s1">优质选材 </span><span  class="D6_v5_s2"> / 金属材质 光泽饱满</span></view>
        </view>

        <!-- 底部菜单 -->
        <view class="botton">
            <view class="botton_1"><image  v-bind:src="imgShop.img"></image><view class="botton_image">购物车</view></view>
            <view class="botton_2">
                <view class="botton_input">加入购物车</view>
                <view class="botton_now" @click="goConfirmOder">立即购买</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data(){
        return {
            name:'商品名称',
            price: 120,
            number: 391,
            sliding:[
                {img:'/static/img/detail/d1.png'},
                {img:'/static/img/detail/d1.png'},
                {img:'/static/img/detail/d1.png'},
                {img:'/static/img/detail/d1.png'}
            ],
            parameter:[
                {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:'139mm'},
                {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:'51mm'},
                {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:'45mm'},
                {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:'19mm'},
                {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:'138mm'},
                {key: 5,img:'/static/img/detail/d7.png', standard:'框架重', slength:'19mm'}
            ],
            assess:[
                {key: 0, Iassess: '价格实惠'},
                {key: 1, Iassess: '美观大方'},
                {key: 2, Iassess: '易搭配'}
            ],
            esvalue:'宝贝好评率 100%',
            introduction:{
                material:'钛合金',
                func:'抗疲劳/防辐射',
                rate: 1.6
            },
            imgAll:'/static/img/detail/d8.png' ,
            photoes:[
                {value:'日常办公', img:'/static/img/detail/d9.png'},
                {value:'上网', img:'/static/img/detail/d10.png'},
                {value:'追剧', img:'/static/img/detail/d11.png'},
                {value:'玩游戏', img:'/static/img/detail/d12.png'},
            ],
            imgDetail:'/static/img/detail/d13.png',
            imgShop:{
                img:'/static/tab-cart.png',
                IsShown: false
            }
        }
    },
	methods:{
		goConfirmOder(){
			uni.navigateTo({
				url: '../confirmOrder/confirmOrder',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		}
	}
}
</script>
<style lang='scss'>
    .container{
        background-color:#f8f8f8 ;
    }
    .D1,.D2,.D3,.D4,.D6{
        background: #ffffff;
        margin-bottom: 10px;
        padding:8px 20px 8px 20px;
        box-sizing: border-box;

    }
    .D5{
        background: #ffffff;
        padding:8px 20px 8px 20px;
        box-sizing: border-box;
    }
    .swiper{
        width: 100%;
        height: 560rpx;
        .swiper-item{
            width: 100%;
            image{
                width: 100%;
            }
        }
    }
    .D1{
        .D1_price{
            color: #EB5D3B;
            font-size: 18px;
            margin-top: 5px;
            font-family: 'PingFangSC-Semibold';
        }
        .D1_name{
            font-size: 16px;
            font-family: 'PingFangSC-Semibold';
            margin-top: 5px;
            display: flex;
            justify-content: space-between;
            .D1_name1{
                font-weight: bold;
            }
            .D1_number{
                color: #999999 ;
                font-size: 14px;
                font-family: 'PingFangSC-Regular';
            }
        }
        .D1_spans{
            font-size: 10px;
            color:#999999;
            margin-top: 5px;
            span{
                height: 14px;
                margin-right: 10px;
            }
        }

    }
    .D2{
        font-size: 14px;
        font-family: 'PingFangSC-Regular';
        view{
            height: 24px;
        }
        .D2_span1{
            color: #999999;
        }
        .D2_span2{
            color: #333333;
        }
    }
    .D3{
            font-size: 14px;
            color: #333333;
        .D3_header{
            display: flex;
            justify-content: space-between;
            font-family: 'PingFangSC-Medium';
            font-weight: bold;
            margin-bottom: 14px;
            view{
                margin-right: 10px;
            }
        }
        .D3_list{
            margin-bottom: 4px;
        }
        .D3_list view{
            display: flex;
            align-content: center;
        }
        .D3_list image{
            width: 50px;
            height: 25px;
            margin-right: 6px;
        }
        .D3_list span{
            margin-left: 6px;
            margin-right: 5px;
            font-family: 'PingFangSC-Regular';
        }
    }
    .D4{
        .D4_esvalue{
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            .D4_2{
                width: 90px;
                border: #333333 ridge;
            }
        }
        .D4_esvalue view{
            font-size: 14px;
            color: #333333;
            font-weight: bold;
        }
        .D4_list view{
            display: inline-block;
            font-size: 12px;
            text-align: center;
            margin-right: 12px;
            width: 90px;
            height: 24px;
            line-height: 24px;
            background: #F2F2F2;
            color: #666666 ;
        }
    }
    .D5{
        .D5_fixed1{
            display: flex;
            justify-content: space-between;
            align-content: center;
            margin-bottom: 12px;
            view{
                font-size: 14px;
                color: #333333;
                font-weight: bold;
                font-family: 'PingFangSC-Medium';
                line-height: 24px;
            }
            image{
                width: 240rpx;
                height: 3px;
                margin-top: 10px;
            }
        }
        .D5_all {
            width: 100%;
            height: 380px;
            margin-bottom: 30px;
            font-family: 'PingFangSC-Regular';
            border: #999999 solid 1.5px;
           image{
                width: 100%;
                height: 380px;
        }}
        .D5_photoes1{
            display: grid;
            grid-template-columns: 48% 48%;
            grid-row-gap: 10px;
            grid-column-gap: 4%;
            image{
                width: 100%;
                height: 70px;
            }
            view{
                width: 100%;
                font-size: 14px;
                text-align: center;
                background: #949494;
                font-family: 'PingFangSC-Regular';
                color: #ffffff;
                view{
                    height: 24px;
                    line-height: 24px;
                }
            }
        }
        .D5_logo1,.D5_logo2{
            text-align: center;
        }
        .D5_logo1{
            margin-top: 40px;
            font-size: 24px;
            font-weight: bold;
            font-family: 'PingFangSC-Semibold';
        }
        .D5_logo2{
            font-size: 12px;
        }
        .D5_logo3{
            width: 100%;
            text-align: center;
            image{
                width: 50px;
                height: 24px;
            }
        }
    }
    .D6{
        width: 100%;
        height: 430px;
        background: #F9F6ED;
        margin-bottom: 48rpx;
        view{
            text-align: center;
        }
        .D6_v1{
            font-weight: bold;
        }
        .D6_v2{
            font-size: 14px;
            margin-bottom: 30px;
        }
        .D6_v5{
            .D6_v5_s1{
                font-weight: bold;
            }
            .D6_v5_s2{
                font-size: 14px;
            }
        }
    }
    .botton{
        position: fixed;
        bottom: 0;
        height: 74px;
        width: 100%;
        background: #FFFFFF;
        padding: 20px 20px 8px 20px;
        font-family: 'PingFangSC-Regular';
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-content: center;
        .botton_1{
            width: 20%;
            height: 100%;
            text-align: center;
            color: #989898;
        }
        image{
            width: 60%;
            height: 30px;
        }
        .botton_image{
            font-size: 12px;
            text-align: center;
        }
        .botton_2{
            width: 74%;
            height: 86%;
            display: grid;
            grid-template-columns: 50% 50%;
        }
        .botton_input{
            display: inline-flex;
            align-items: center;
            justify-content: space-around;
            background: #FFF0EC;
            font-size: 16px;
            color: #FF6B4A;
            border-radius: 20px 0 0 20px;
        }
        .botton_now{
            display: inline-flex;
            align-items: center;
            justify-content: space-around;
            background: #FF6B4A;
            font-size: 16px;
            color: #FFFFFF;
            border-radius:0  20px 20px 0;
        }
    }
</style>