xiuli.gao
/
youhuiquan


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分享商品</title>
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="../common/reset.css">
    <link rel="stylesheet" href="./css/shareProduct.css?v=1.0">
</head>
<body>
    <div class="swiper-container swiper-container-horizontal">
        <div class="swiper-wrapper" id="swiper-wrapper">
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <div class="main">
        <div class="info">
            <div class="priceInfo">
                <span class="newPrice">¥18.8</span>
                <span class="oldPrice">原价169.9</span>
                <span class="volume">月销 89997</span>
            </div>
            <span class="collect">
                <img class="smallIcon" src="./img/collect.png" alt="">
                收藏
            </span>
        </div>
        <div class="title">
            <img class="source" src="./img/tianmao.png" alt="">
            秋冬季新款韩版拼接毛毛加厚内里棉服外套宽松秋冬季新款韩版拼接毛毛加厚内里棉服外套宽松秋冬季新款韩版拼接毛毛加厚内里棉服外套宽松
        </div>
        <div class="cheap">
            <div class="left">
                <div class="number">返 ¥99.99</div>
                <div class="word">自购和分享都有佣金 </div>
            </div>
            <div class="right">
                <div class="number">券 100元</div>
                <div class="word">数量有限 先到先领</div>
            </div>
        </div>
        <div class="shop">
            <img class="shopPicture" src="http://logo.taobao.com/shop-logo/4a/e4/TB1YJi9lNTpK1RjSZFMSuvG_VXa.jpg" alt="">
            <div class="other">
                <div class="shopName">塔鲁宝贝旗舰店</div>
                <div class="grade">
                    <span>宝贝描述：4.8</span>
                    <span>服务态度：4.8</span>
                    <span>发货速度：4.8</span>
                </div>
            </div>
        </div>
        <div class="button">
            <div class="share">
                <img class="fenxiang" src="./img/fenxiang.png" alt="">
                分享赚钱
            </div>
            <div class="buy">
                <img class="quan" src="./img/quan.png" alt="">
                领券购买
            </div>
        </div>
    </div>
    <script>
        document.documentElement.style.fontSize=100*(document.documentElement.clientWidth/375)+"px";
        window.onresize=function(){
            document.documentElement.style.fontSize=100*(document.documentElement.clientWidth/375)+"px";
        }
    </script>
    <script src="./js/swiper.min.js"></script>
    <script src="../common/jquery-2.1.0.js"></script>
    <script>
        var content=""
        // 将title替换
        // document.title=""
        var data=[0,1,2]
        for(var i in data) {
            content+=`
            <div class="swiper-slide">
                <img class="picture" src="https://img.alicdn.com/i3/654368921/TB2O4EGxmtYBeNjSspaXXaOOFXa_!!654368921.jpg" alt="">
            </div>
            `
        }
        window.onload=function(){
            $("#swiper-wrapper").html(content)
            swiperEvent()

        }
        function swiperEvent () {
            var mySwiper = new Swiper ('.swiper-container', {
                autoplay: 3000,
                loop: true,
                pagination: '.swiper-pagination',
            })
        }

        // 显示加载速度
        document.onreadystatechange = function () {//即在加载的过程中执行下面的代码
            console.log("加载中")
            if(document.readyState=="complete"){//complete加载完成
                console.log("完毕")
                $(".loading").fadeOut();
            }
        }
    </script>
</body>
</html>