<template>
    <div class="mainBox w100 bge">
        <zgh-header :title="$route.name"></zgh-header>
        <div class="clearfix common-top">
            <a href="javascript:void(0)" class="prod-v bgf" v-for="(item,index) in list" :key="index">
                <div class="prod-img middle_before">
                    <img class="center-block middle" v-lazy="item.webcover"/>
                </div>
                <div class="prod-content fs14 m-fs28">

                    <p class="textL row2 color3">{{item.title}}</p>
                    <p class="color-red">￥<span class="fs20">66</span>
                        <del class="r color9">￥22</del>
                    </p>
                </div>
            </a>
        </div>
        <div class="wp bgf">
            <a class="clearfix prod-h mgB5" href="##" v-for="(item,index) in list" :key="index">
            	<div class="prod-img l">
            		<img style="max-height: 100%;max-width: 100%;" :src="item.webcover" alt="" />
            	</div>
                <div class="prod-content middle_before fs14">
                    <div class="middle">
                        <h6 class=" color0  lh1-3">
                            <p class="row2 color0">{{item.title}}</p>
                        </h6>
                        <p class="m-pdT15 m-pdB15 ">蓝色；29</p>
                        <p class="">
                            <span class="color-red fs14">￥555</span>
                            <del class="color9">￥666</del>
                            <span class="r ">X1</span>
                        </p>
                    </div>
                </div>
            </a>
        </div>

        <div class="mg10"></div>
        <!--商品轮播1-->
        <section class="swiper-prod bgf">
            <zgh-swiper :prodNums="4">
                <div class="middle_before prod-item" v-for="(item,index) in list" :slot="'prod'+index" :key="index">
                    <a href="javascript:void(0)" class="middle" @click="openWebsite('/detail')">
                        <div class="mgB5">
                            <img class="prod-img center-block" v-lazy="item.webcover"/>
                        </div>
                        <div class="color3 fs14 row2 textC">
                            {{item.title}}
                        </div>
                    </a>
                </div>
            </zgh-swiper>
        </section>
        <div class="mg10"></div>
        <!--商品轮播2-->
        <section class="swiper-prod2 bgf">
            <zgh-swiper :prodNums="4"
                           :swiperOpt="{freeMode:false,slidesPerView:1,pagination: '.swiper-prod2 .swiper-pagination',autoplay: 1500,speed: 1000,}">
                <div class="  w100" v-for="(item,index) in list" :slot="'prod'+index" :key="index">
                    <a href="javascript:void(0)" class=" w100" @click="openWebsite('/detail')">
                    	<div class="prod-img l">
                    		<img  style="max-height: 100%;max-width: 100%;" :src="item.webcover" alt="" />
                    	</div>
                        <div class="color3 fs14 prod-cont ">
                            <h4 class="row2 lh1-3">{{item.title}}</h4>
                            <p class="color-red fs20 mgT15 mgB15">￥168</p>
                            <button class="common_btn">立即购买</button>
                        </div>
                    </a>
                </div>
            </zgh-swiper>
        </section>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                list: [
                    {
                        "id": "989",
                        "webcover": "//img.alicdn.com/bao/uploaded/i3/247729863/TB1whJrib_I8KJjy1XaXXbsxpXa_!!0-item_pic.jpg",
                        "title": "南极人宽松中老年加绒磨毛格子棉衬衣"
                    },
                    {
                        "id": "983",
                        "webcover": "//img.alicdn.com/bao/uploaded/i4/1022008754/TB1d8E4i0rJ8KJjSspaXXXuKpXa_!!0-item_pic.jpg",
                        "title": "牛津纺简约休闲纯棉修身纯色韩版衬衣"
                    },
                    {
                        "id": "977",
                        "webcover": "//img.alicdn.com/bao/uploaded/i3/TB1vnDeQXXXXXacXVXXXXXXXXXX_!!0-item_pic.jpg",
                        "title": "假两件保暖衬衫男加绒加厚17冬季中青年长袖爸爸花花公子保暖衬衣"
                    },
                    {
                        "id": "960",
                        "webcover": "//img.alicdn.com/bao/uploaded/i1/911432346/TB1vLkRb7fb_uJkHFCcXXXagFXa_!!0-item_pic.jpg",
                        "title": "杉杉衬衫 2017新款 长袖衬衫男春秋商务经典格纹男装长袖衬衣免烫"
                    }
                ]
            }
        },
        computed: {},
        mounted() {

        },
        methods: {}
    }
</script>

<style lang="less" scoped>
    @import url("../../assets/config.less");

    .swiper-prod {
        .prod-item {
            .m-w(300);
            .m-h(380);
            .m-pdT(30);
            .m-pdL(30);
            .m-pdR(30);
            .m-pdB(30);
        }
        .prod-img {
            @L: 236;
            .m-w(@L);
            .m-h(@L);
        }
    }

    .swiper-prod2 {
        @h: 280;
        .m-pdB(60);
        .prod-img {
            .m-w(278);
            .m-h(@h);
        }
        .prod-cont {
            .m-h(@h);
            padding: 15px 20px;
            overflow: hidden;
            background: #eee;
            line-height: 16px;
        }
        .common_btn {
            border-radius: 0;
            .m-w(180);
            .m-h(60);
            font-size: 14px;
            margin: 0;
        }
    }

</style>
