ft

dist/index.js

@@ -0,0 +1,264 @@
+/*封装一些公用的事件或者公用的方法*/
+
+/*定义的一个命名空间*/
+window.my = {};
+/* 获取url参数 */
+my.getURLCode = function (){
+        var search = location.search.length > 0 ? location.search.substring(1) : '',
+              args = {},
+              items = search.length ? search.split('&') : [],
+              item = null,
+              name = null,
+              value = null,
+              i = 0,
+              len = items.length,
+              data = '';
+        for (i = 0; i < len; i++) {
+          item = items[i].split('=');
+          name = decodeURIComponent(item[0]);
+          value = decodeURIComponent(item[1]);
+          if (item.length) {args[name] = value }
+        }
+        return args;
+    },
+/*封装一个事件 过渡结束事件*/
+my.transitionEnd = function(dom,callback){
+    //1.给谁加事件
+    //2.事件触发后处理什么业务
+    if(!dom || typeof dom != 'object'){
+        //没dom的时候或者不是一个对象的时候 程序停止
+        return false;
+    }
+    dom.addEventListener('transitionEnd', function(){
+        callback && callback();
+    });
+    dom.addEventListener('webkitTransitionEnd', function(){
+        callback && callback();
+    });
+}
+
+//封装一个tap事件
+my.tap = function(dom,callback){
+    if(!dom || typeof dom != 'object'){
+        //没dom的时候或者不是一个对象的时候 程序停止
+        return false;
+    }
+
+    var isMove = false; //是否滑动过
+    var time = 0;   //刚刚触摸屏幕的事件  touchstart的触发事件
+
+    dom.addEventListener('touchstart',function(){
+        //记录触发这个事件的时间
+        time = Date.now();  //时间戳 毫秒
+    });
+    dom.addEventListener('touchmove',function(){
+        isMove = true;
+    });
+    window.addEventListener('touchend',function(e){
+        //1.没有滑动过
+        //2.响应事件在150ms以内   要求比click要响应快
+        if(!isMove && (Date.now()-time)<150 ){
+            callback && callback(e);
+        }
+
+        //重置参数
+        isMove = false;
+        time = 0;
+    });
+
+}
+/* to swiper */
+function startSwiper(imageCount) {
+    var banner = document.querySelector('.swiper-wrapper');   //轮播图大盒子
+    var imageBox = banner.querySelector('.swiper-wrapper .swiper-item');   //图片盒子
+    var pointBox = banner.querySelector('.swiper-wrapper .swiper-point');   //点盒子
+    var imageCount = imageCount; //页面中用来轮播的图片有5张不同的
+    var width = banner.offsetWidth;  //图片的宽度
+    var points = pointBox.querySelectorAll('li'); //所有的点
+
+    //加过渡
+    var addTransition = function(){
+        imageBox.style.transition = "all 0.3s";
+        imageBox.style.webkitTransition = "all 0.3s";/*做兼容*/
+    };
+    //清除过渡
+    var removeTransition = function(){
+        imageBox.style.transition = "none";
+        imageBox.style.webkitTransition = "none";
+    }
+    //定位
+    var setTranslateX = function(translateX){
+        var translateX = translateX + 375;
+        imageBox.style.transform = "translateX("+translateX+"px)";
+        imageBox.style.webkitTransform = "translateX("+translateX+"px)";
+    }
+
+    //自动轮播  定时器  无缝衔接  动画结束瞬间定位
+    var index = 1;
+    var timer = setInterval(function(){
+        index++ ;   //自动轮播到下一张
+        //改变定位  动画的形式去改变  transition transform translate
+        addTransition();    //加过渡动画
+        // console.log(index, -index * width);
+        setTranslateX(-index * width);  //定位
+    }, 3000);
+
+    //等过渡结束之后来做无缝衔接
+    my.transitionEnd(imageBox, function(){
+        //处理事件结束后的业务逻辑
+        if(index > imageCount ){
+            index = 1;
+        }else if(index <= 0){
+            index = imageCount;
+        }
+        removeTransition(); //清除过渡
+        setTranslateX(-index * width);  //定位
+        setPoint(); //设置底部显示当前图片对应的圆角
+    });
+
+    //改变当前样式  当前图片的索引
+    var setPoint = function(){
+        //清除上一次的now
+        for(var i = 0 ; i < points.length ; i++){
+            points[i].className = " ";
+        }
+        //给图片对应的点加上样式
+        points[index-1].className = "now";
+    }
+
+    /*
+     手指滑动的时候让轮播图滑动   touch事件  记录坐标轴的改变 改变轮播图的定位（位移css3）
+     当滑动的距离不超过一定的距离的时候  需要吸附回去  过渡的形式去做
+     当滑动超过了一定的距离  需要 跳到 下一张或者上一张  （滑动的方向） 一定的距离（屏幕的三分之一）
+     */
+    //touch事件
+    var startX = 0; //记录起始  刚刚触摸的点的位置 x的坐标
+    var moveX = 0;  //滑动的时候x的位置
+    var distanceX = 0;  //滑动的距离
+    var isMove = false; //是否滑动过
+
+    imageBox.addEventListener('touchstart', function(e){
+        clearInterval(timer);   //清除定时器
+        startX = e.touches[0].clientX;  //记录起始X
+    });
+
+    imageBox.addEventListener('touchmove',function(e){
+        moveX = e.touches[0].clientX;   //滑动时候的X
+        distanceX = moveX - startX; //计算移动的距离
+        //计算当前定位  -index*width+distanceX
+        removeTransition(); //清除过渡
+        setTranslateX(-index * width + distanceX);  //实时的定位
+        isMove = true;  //证明滑动过
+    });
+
+    //在模拟器上模拟的滑动会有问题 丢失的情况  最后在模拟器的时候用window
+    imageBox.addEventListener('touchend', function(e){
+        // 滑动超过 1/3 即为滑动有效，否则即为无效，则吸附回去
+        if(isMove && Math.abs(distanceX) > width/3){
+            //5.当滑动超过了一定的距离  需要 跳到 下一张或者上一张  （滑动的方向）*/
+            if(distanceX > 0){  //上一张
+                index --;
+            }
+            else{   //下一张
+                index ++;
+            }
+        }
+        addTransition();    //加过渡动画
+        setTranslateX(-index * width);    //定位
+
+        if(index > imageCount ){
+            index = 1;
+        }else if(index <= 0){
+            index = imageCount;
+        }
+        setPoint();
+
+        //重置参数
+        startX = 0;
+        moveX = 0;
+        distanceX = 0;
+        isMove = false;
+        //加定时器
+        clearInterval(timer);   //严谨 再清除一次定时器
+        timer= setInterval(function(){
+            index++ ;  //自动轮播到下一张
+            addTransition();    //加过渡动画
+            setTranslateX(-index * width);    //定位
+        },3000);
+    });
+}
+
+/*copy to clipboard*/
+function toCopy() {
+    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
+    //区分iPhone设备
+        window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
+        var Url2=document.getElementById("biaoios");//要复制文字的节点
+        var range = document.createRange();
+        // 选中需要复制的节点
+        range.selectNode(Url2);
+        // 执行选中元素
+        window.getSelection().addRange(range);
+        // 执行 copy 操作
+        var successful = document.execCommand('copy');
+
+        // 移除选中的元素
+        window.getSelection().removeAllRanges();
+    }else{
+        var Url2=document.getElementById("biao1");//要复制文字的节点
+        Url2.select(); // 选择对象
+        document.execCommand("Copy"); // 执行浏览器复制命令
+    }
+}
+
+window.onload = function () {
+    var args = my.getURLCode();
+    var goods_id = args['goods_id'] || 0,
+         is_coupon = args['is_coupon'] || 0,
+         user_id = args['user_id'] || 0;
+    var btn = document.querySelector('.btn-wrapper .btn');
+    axios.post('/api/v2/goods/tdetail', {
+        goods_id: goods_id,
+        is_coupon: is_coupon,
+        user_id: user_id
+      })
+      .then(function (response) {
+        var res = response.data, data = null, html = '', imgList = [], swiperStr = '', pointStr = '', len = 0;
+        var swiper = document.querySelector('.swiper-wrapper .swiper-item'),
+              point = document.querySelector('.swiper-wrapper .swiper-point'),
+              detailsWrapper = document.querySelector('.details-wrapper')
+
+              ;
+        console.log(swiper);
+        if (res.errno == 0) {
+            data = res.rst.data;
+            imgList = res.rst.data.small_img;
+            len = imgList.length;
+            if (len > 0) {
+                for (var i = 0; i < len; i++) {
+                    swiperStr += '<li><a href="javascript: ;"><img src="'+ imgList[i] +'"></a></li>';
+                    if (i === 0) {
+                        pointStr += '<li  class="now"></li>';
+                    }else{
+                        pointStr += '<li></li>';
+                    }
+                }
+                 swiperStr += '<li><a href="javascript: ;"><img src="'+ imgList[0] +'"></a></li>';
+            }
+            html = '<h5 class="price"><span>券后 ¥</span><em>'+ data.discount_price +'</em><span class="icon icon-price">券&nbsp;&nbsp; '+ data.coupon_price
+ +'元</span></h5><div class="info"><p class="before-price">价格 <span>'+ data.price +'</span></p><p class="quantity"> 月销 '+ data.volume +'</p></div><p class="elli desc">'+ data.title +'</p>'
+            detailsWrapper.innerHTML = html;
+            swiper.innerHTML = swiperStr;
+            point.innerHTML = pointStr;
+            startSwiper(len);
+        }
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+
+      btn.addEventListener('click', function () {
+        console.log('test');
+            toCopy();
+      }, false)
+}

eg/base.js

@@ -0,0 +1,50 @@
+/*封装一些公用的事件或者公用的方法*/
+
+/*定义的一个命名空间*/
+window.my = {};
+/*封装一个事件 过渡结束事件*/
+my.transitionEnd = function(dom,callback){
+    //1.给谁加事件
+    //2.事件触发后处理什么业务
+    if(!dom || typeof dom != 'object'){
+        //没dom的时候或者不是一个对象的时候 程序停止
+        return false;
+    }
+    dom.addEventListener('transitionEnd', function(){
+        callback && callback();
+    });
+    dom.addEventListener('webkitTransitionEnd', function(){
+        callback && callback();
+    });
+}
+
+//封装一个tap事件
+my.tap = function(dom,callback){
+    if(!dom || typeof dom != 'object'){
+        //没dom的时候或者不是一个对象的时候 程序停止
+        return false;
+    }
+
+    var isMove = false; //是否滑动过
+    var time = 0;   //刚刚触摸屏幕的事件  touchstart的触发事件
+
+    dom.addEventListener('touchstart',function(){
+        //记录触发这个事件的时间
+        time = Date.now();  //时间戳 毫秒
+    });
+    dom.addEventListener('touchmove',function(){
+        isMove = true;
+    });
+    window.addEventListener('touchend',function(e){
+        //1.没有滑动过
+        //2.响应事件在150ms以内   要求比click要响应快
+        if(!isMove && (Date.now()-time)<150 ){
+            callback && callback(e);
+        }
+
+        //重置参数
+        isMove = false;
+        time = 0;
+    });
+
+}

eg/slideshow.css

@@ -0,0 +1,77 @@
+*,
+::before,
+::after{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;/*兼容移动端主流浏览器*/
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;/*清除移动端点击高亮效果*/
+}
+body{
+    font-family:Microsoft YaHei,sans-serif;/*移动端默认的字体*/
+    font-size: 14px;
+    color: #333;
+}
+ol,ul{
+    list-style: none;
+}
+/*清除浮动*/
+.clearfix::before,
+.clearfix::after{
+    content: "";
+    display: block;
+    height: 0;
+    line-height: 0;
+    visibility: hidden;
+    clear: both;
+}
+
+.layout{
+    width: 100%;
+    max-width: 750px;
+    min-width: 320px;
+    margin: 0 auto;
+    position: relative;
+}
+.banner{
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+}
+.banner ul:first-child{
+    width: 1000%;
+    -webkit-transform: translateX(-10%);
+    transform: translateX(-10%);
+}
+.banner ul:first-child li{
+    width: 10%;
+    float: left;
+}
+.banner ul:first-child li a{
+    display: block;
+    width: 100%;
+}
+.banner ul:first-child li a img{
+    width: 100%;
+    display: block;
+}
+.banner ul:last-child{
+    position: absolute;
+    bottom: 6px;
+    width: 100%;
+    text-align: center;
+}
+.banner ul:last-child li{
+    width: 6px;
+    height: 6px;
+    border: 1px solid #fff;
+    border-radius: 50%;
+    display: inline-block;
+    margin-left: 10px;
+}
+.banner ul:last-child li:first-child{
+    margin-left: 0;
+}
+.banner ul:last-child li.now{
+    background: #fff;
+}

eg/slideshow.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <title></title>
+    <link rel="stylesheet" href="slideshow.css">
+</head>
+<body>
+<!-- <div class="layout"> -->
+    <div class="banner">
+        <ul class="clearfix">
+            <li><a href="#"><img src="http://img.henhaojie.com/Homeact/20180409/1523252985675069.jpg"></a></li>
+            <li><a href="#"><img src="http://img.henhaojie.com/Homeact/20180518/1526629597825769.jpg"></a></li>
+            <li><a href="#"><img src="http://img.henhaojie.com/Homeact/20180502/1525253753560504.png"></a></li>
+            <li><a href="#"><img src="http://img.henhaojie.com/Homeact/20171123/1511420419308673.png"></a></li>
+            <li><a href="#"><img src="http://img.henhaojie.com/Homeact/20180521/1526897525753766.png"></a></li>
+            <li><a href="#"><img src="http://img.henhaojie.com/Homeact/20180509/1525849287291571.jpg"></a></li>
+            <li><a href="#"><img src="http://img.henhaojie.com/Homeact/20180515/1526368416232243.png"></a></li>
+        </ul>
+        <ul>
+            <li class="now"></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+        </ul>
+    </div>
+<!-- </div> -->
+
+<script src="base.js"></script>
+<script src="slideshow.js"></script>
+</body>
+</html>

eg/slideshow.js

@@ -0,0 +1,135 @@
+/**
+ * Created by libo on 2017/11/9.
+ */
+window.onload = function(){
+    /*
+     * 1.×Ô¶¯ÂÖ²¥  ¶¨Ê±Æ÷  ÎÞ·ìÏÎ½Ó  ¶¯»­½áÊø˲¼ä¶¨Î»
+     * 2.µãÐèÒªËæ×ÅÂÖ²¥µÄ¹ö¶¯¸Ä±ä¶ÔÓ¦µÄµã  ¸Ä±äµ±Ç°Ñùʽ  µ±Ç°Í¼Æ¬µÄË÷Òý
+     * 3.ÊÖÖ¸»¬¶¯µÄʱºòÈÃÂÖ²¥Í¼»¬¶¯   touchʼþ  ¼Ç¼×ø±êÖáµÄ¸Ä±ä ¸Ä±äÂÖ²¥Í¼µÄ¶¨Î»£¨Î»ÒÆcss3£©
+     * 4.µ±»¬¶¯µÄ¾àÀë²»³¬¹ýÒ»¶¨µÄ¾àÀëµÄʱºò  ÐèÒªÎü¸½»ØÈ¥  ¹ý¶ÉµÄÐÎʽȥ×ö
+     * 5.µ±»¬¶¯³¬¹ýÁËÒ»¶¨µÄ¾àÀë  ÐèÒª Ìøµ½ ÏÂÒ»ÕÅ»òÕßÉÏÒ»ÕÅ  £¨»¬¶¯µÄ·½Ïò£© Ò»¶¨µÄ¾àÀ루ÆÁÄ»µÄÈý·ÖÖ®Ò»£©
+     * */
+
+    var imageCount = 7; //Ò³ÃæÖÐÓÃÀ´ÂÖ²¥µÄͼƬÓÐ5ÕŲ»Í¬µÄ
+    //ÂÖ²¥Í¼´óºÐ×Ó
+    var banner = document.querySelector('.banner');
+    //ͼƬµÄ¿í¶È
+    var width = banner.offsetWidth;
+    //ͼƬºÐ×Ó
+    var imageBox = banner.querySelector('ul:first-child');
+    //µãºÐ×Ó
+    var pointBox = banner.querySelector('ul:last-child');
+    //ËùÓеĵã
+    var points = pointBox.querySelectorAll('li');
+
+    //¹«Ó÷½·¨
+    //¼Ó¹ý¶É
+    var addTransition = function(){
+        imageBox.style.transition = "all 0.3s";
+        imageBox.style.webkitTransition = "all 0.3s";/*×ö¼æÈÝ*/
+    };
+    //Çå³ý¹ý¶É
+    var removeTransition = function(){
+        imageBox.style.transition = "none";
+        imageBox.style.webkitTransition = "none";
+    }
+    //¶¨Î»
+    var setTranslateX = function(translateX){
+        var translateX = translateX + 375
+        imageBox.style.transform = "translateX("+translateX+"px)";
+        imageBox.style.webkitTransform = "translateX("+translateX+"px)";
+    }
+
+    //¹¦ÄÜʵÏÖ
+    //×Ô¶¯ÂÖ²¥  ¶¨Ê±Æ÷  ÎÞ·ìÏÎ½Ó  ¶¯»­½áÊø˲¼ä¶¨Î»
+    var index = 1;
+    var timer = setInterval(function(){
+        index++ ;   //×Ô¶¯ÂÖ²¥µ½ÏÂÒ»ÕÅ
+        addTransition();    //¼Ó¹ý¶É¶¯»­
+        setTranslateX(-index * width);  //¶¨Î»
+    },3000);
+
+    //µÈ¹ý¶É½áÊøÖ®ºóÀ´×öÎÞ·ìÏνÓ
+    my.transitionEnd(imageBox, function(){
+        //´¦Àíʼþ½áÊøºóµÄÒµÎñÂß¼­
+        if(index > imageCount ){
+            index = 1;
+        }else if(index <= 0){
+            index = imageCount;
+        }
+        removeTransition(); //Çå³ý¹ý¶É
+        setTranslateX(-index * width);  //¶¨Î»
+        setPoint(); //ÉèÖõײ¿ÏÔʾµ±Ç°Í¼Æ¬¶ÔÓ¦µÄÔ²½Ç
+    });
+
+    //¸Ä±äµ±Ç°Ñùʽ  µ±Ç°Í¼Æ¬µÄË÷Òý
+    var setPoint = function(){
+        //Çå³ýÉÏÒ»´ÎµÄnow
+        for(var i = 0 ; i < points.length ; i++){
+            points[i].className = " ";
+        }
+        //¸øͼƬ¶ÔÓ¦µÄµã¼ÓÉÏÑùʽ
+        points[index-1].className = "now";
+    }
+
+    /*
+     ÊÖÖ¸»¬¶¯µÄʱºòÈÃÂÖ²¥Í¼»¬¶¯   touchʼþ  ¼Ç¼×ø±êÖáµÄ¸Ä±ä ¸Ä±äÂÖ²¥Í¼µÄ¶¨Î»£¨Î»ÒÆcss3£©
+     µ±»¬¶¯µÄ¾àÀë²»³¬¹ýÒ»¶¨µÄ¾àÀëµÄʱºò  ÐèÒªÎü¸½»ØÈ¥  ¹ý¶ÉµÄÐÎʽȥ×ö
+     µ±»¬¶¯³¬¹ýÁËÒ»¶¨µÄ¾àÀë  ÐèÒª Ìøµ½ ÏÂÒ»ÕÅ»òÕßÉÏÒ»ÕÅ  £¨»¬¶¯µÄ·½Ïò£© Ò»¶¨µÄ¾àÀ루ÆÁÄ»µÄÈý·ÖÖ®Ò»£©
+     */
+    //touchʼþ
+    var startX = 0; //¼Ç¼Æðʼ  ¸Õ¸Õ´¥ÃþµÄµãµÄλÖà xµÄ×ø±ê
+    var moveX = 0;  //»¬¶¯µÄʱºòxµÄλÖÃ
+    var distanceX = 0;  //»¬¶¯µÄ¾àÀë
+    var isMove = false; //ÊÇ·ñ»¬¶¯¹ý
+
+    imageBox.addEventListener('touchstart', function(e){
+        clearInterval(timer);   //Çå³ý¶¨Ê±Æ÷
+        startX = e.touches[0].clientX;  //¼Ç¼ÆðʼX
+    });
+
+    imageBox.addEventListener('touchmove',function(e){
+        moveX = e.touches[0].clientX;   //»¬¶¯Ê±ºòµÄX
+        distanceX = moveX - startX; //¼ÆËãÒƶ¯µÄ¾àÀë
+        //¼ÆË㵱ǰ¶¨Î»  -index*width+distanceX
+        removeTransition(); //Çå³ý¹ý¶É
+        setTranslateX(-index * width + distanceX);  //ʵʱµÄ¶¨Î»
+        isMove = true;  //Ö¤Ã÷»¬¶¯¹ý
+    });
+
+    //ÔÚÄ£ÄâÆ÷ÉÏÄ£ÄâµÄ»¬¶¯»áÓÐÎÊÌâ ¶ªÊ§µÄÇé¿ö  ×îºóÔÚÄ£ÄâÆ÷µÄʱºòÓÃwindow
+    imageBox.addEventListener('touchend', function(e){
+        // »¬¶¯³¬¹ý 1/3 ¼´Îª»¬¶¯ÓÐЧ£¬·ñÔò¼´ÎªÎÞЧ£¬ÔòÎü¸½»ØÈ¥
+        if(isMove && Math.abs(distanceX) > width/3){
+            //5.µ±»¬¶¯³¬¹ýÁËÒ»¶¨µÄ¾àÀë  ÐèÒª Ìøµ½ ÏÂÒ»ÕÅ»òÕßÉÏÒ»ÕÅ  £¨»¬¶¯µÄ·½Ïò£©*/
+            if(distanceX > 0){  //ÉÏÒ»ÕÅ
+                index --;
+            }
+            else{   //ÏÂÒ»ÕÅ
+                index ++;
+            }
+        }
+        addTransition();    //¼Ó¹ý¶É¶¯»­
+        setTranslateX(-index * width);    //¶¨Î»
+
+        if(index > imageCount ){
+            index = 1;
+        }else if(index <= 0){
+            index = imageCount;
+        }
+        setPoint();
+
+        //ÖØÖòÎÊý
+        startX = 0;
+        moveX = 0;
+        distanceX = 0;
+        isMove = false;
+        //¼Ó¶¨Ê±Æ÷
+        clearInterval(timer);   //ÑϽ÷ ÔÙÇå³ýÒ»´Î¶¨Ê±Æ÷
+        timer= setInterval(function(){
+            index++ ;  //×Ô¶¯ÂÖ²¥µ½ÏÂÒ»ÕÅ
+            addTransition();    //¼Ó¹ý¶É¶¯»­
+            setTranslateX(-index * width);    //¶¨Î»
+        },3000);
+    });
+};

index.css

@@ -0,0 +1,223 @@
+html,
+body,
+div,
+h3, h4, h5, h6, p,
+span, em, i,
+::before,
+::after{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+}
+ol, ul{
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+body{
+    font-size: 14px;
+    color: #333;
+}
+em, i{
+    font-style: normal;
+}
+.clearfix::before,
+.clearfix::after{
+    content: "";
+    display: block;
+    height: 0;
+    line-height: 0;
+    visibility: hidden;
+    clear: both;
+}
+.elli{
+    display: box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+
+.download-wrapper {
+    display: flex;
+    display: -webkit-flex;
+    width: 100%;
+    height: 0.92rem;
+    align-items: center;
+    justify-content: center;
+    padding: 0.1rem 0.2rem;
+    background: #F4F4F4;
+}
+.download-wrapper .img-box{
+    flex: 0 0 0.72rem;
+    margin-right: 12px;
+}
+.download-wrapper .img-box img{
+    width: 100%;
+    height: 100%;
+}
+.download-wrapper .content{
+    flex: 1;
+}
+.download-wrapper .content .title{
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 20px;
+}
+.download-wrapper .content .text{
+    font-size: 10px;
+    color: #666;
+    line-height: 14px;
+}
+.download-wrapper button{
+    flex: 0 0 1.48rem;
+    height: 0.56rem;
+    margin: auto;
+    background: linear-gradient(-90deg, #FF6900, #FFA500);
+    border-radius: 28px;
+    border: 0 none;
+    font-size: 14px;
+    color: #FFFFFF;
+}
+/*. download-wrapper .img-box,
+.download-wrapper .content,
+.download-wrapper button{
+} */
+.swiper-wrapper{
+    width: 7.5rem;
+    height: 7.5rem;
+    /*background-color: #f5f5f5;*/
+    /*width: 100%;*/
+    overflow: hidden;
+    position: relative;
+}
+.swiper-wrapper .swiper-item{
+    width: 1000%;
+    /*-webkit-transform: translateX(-10%);*/
+    /*transform: translateX(-10%);*/
+}
+.swiper-wrapper .swiper-item li{
+    width: 10%;
+    float: left;
+}
+.swiper-wrapper .swiper-item li a{
+    display: block;
+    width: 100%;
+}
+.swiper-wrapper .swiper-item li a img{
+    display: block;
+    width: 100%;
+}
+.swiper-wrapper .swiper-point{
+    position: absolute;
+    bottom: 6px;
+    width: 100%;
+    text-align: center;
+}
+.swiper-wrapper .swiper-point li{
+    width: 3px;
+    height: 3px;
+    border-radius: 50%;
+    display: inline-block;
+    margin-left: 10px;
+    background: #CFCFCF;
+}
+.swiper-wrapper .swiper-point li:first-child{
+    margin-left: 0;
+}
+.swiper-wrapper .swiper-point li.now{
+    width: 8px;
+    background: #fff;
+    border-radius: 0;
+}
+
+.details-wrapper{
+    display: flex;
+    display: -webkit-flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 0 0.2rem;
+}
+.details-wrapper .price{
+    margin-top: 16px;
+    font-size: 0px;
+    font-weight: normal;
+}
+.details-wrapper .price span{
+    color: #FF1E00;
+    font-size: 12px;
+    font-weight: normal;
+}
+.details-wrapper .price em{
+    line-height: 30px;
+    font-size: 22px;
+    color: #FF1E00;
+}
+span.icon.icon-price{
+    display: inline-block;
+    vertical-align: top;
+    width: 1.28rem;
+    height: 0.28rem;
+    margin-top: 9px;
+    margin-left: 10px;
+    background: url('img/icon-price.png') no-repeat center center;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    font-size: 10px;
+    color: #fff;
+    padding: 0px 5px;
+}
+
+.details-wrapper .info{
+    display: flex;
+    display: -webkit-flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 18px;
+    margin: 9px 0 5px;
+    color: #878787;
+    font-size: 13px;
+}
+.details-wrapper .desc{
+    font-size: 15px;
+    line-height: 20px;
+}
+.btn-wrapper{
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 50px;
+}
+.btn-wrapper .btn{
+    width: 100%;
+    height: 100%;
+    border: 0 none;
+    font-size: 16px;
+    color: #fff;
+    background: linear-gradient(90deg, #FF9000, #FF5000);
+}
+.btn-wrapper .btn em{
+    font-weight: 500;
+}
+
+/*.step-wrapper{
+    margin: 30px auto;
+    font-size: 14px;
+    line-height: 20px;
+    padding-left: 0.2rem;
+}
+.inviting-pic{
+    width: 5.6rem;
+    height: 7.76rem;
+    box-shadow: 0 4px 13px rgba(0, 0, 0, 0.15);
+    margin: 0 auto;
+    border-radius: 10px;
+}*/
+
+
+

index.html

@@ -0,0 +1,75 @@
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+        <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
+        <meta name="format-detection" content="telephone=no,address=no,email=no" />
+        <meta name="mobileOptimized" content="width" />
+        <meta name="handheldFriendly" content="true" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="description" content="" />
+        <meta name="keywords" content=""/>
+        <script>
+            ;(function() {
+              var docEl = document.documentElement,
+              resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+              clientWidth = docEl.clientWidth;
+              s();
+              window.addEventListener(resizeEvt, s, false);
+
+              function s() {
+                docEl.style.fontSize = 50.0 * (clientWidth / 375) + 'px';
+              }
+            })();
+        </script>
+        <script>
+              var _ua = navigator.userAgent;
+              if (!!_ua.match(/.*OS\s([\d_]+)/) || !!_ua.match(/(Android)\s+([\d.]+)/)) {
+                document.write('<style>body{min-width:320px;min-height:320px;}</style>');
+              }
+        </script>
+        <link rel="stylesheet" type="text/css" href="index.css">
+        <style type="text/css" media="screen">
+        </style>
+    </head>
+    <body>
+        <div class="download-wrapper">
+            <div class="img-box"><img src="img/icon.png" alt=""></div>
+            <div class="content">
+              <h6 class="title">省钱达人</h6>
+              <p class="text">购物省钱，分享赚钱，更多奖励等你来</p>
+            </div>
+            <button type="button">下载APP</button>
+        </div>
+        <div class="swiper-wrapper">
+              <ul class="clearfix swiper-item">
+                  <li><a href="javascript: ;"><img src="http://img.henhaojie.com/Homeact/20180409/1523252985675069.jpg"></a></li>
+                  <li><a href="#"><img src="http://img.henhaojie.com/Homeact/20180518/1526629597825769.jpg"></a></li>
+                  <li><a href="#"><img src="http://img.henhaojie.com/Homeact/20180502/1525253753560504.png"></a></li>
+                  <li><a href="#"><img src="http://img.henhaojie.com/Homeact/20171123/1511420419308673.png"></a></li>
+                  <li><a href="#"><img src="http://img.henhaojie.com/Homeact/20180521/1526897525753766.png"></a></li>
+                  <li><a href="#"><img src="http://img.henhaojie.com/Homeact/20180509/1525849287291571.jpg"></a></li>
+                  <li><a href="#"><img src="http://img.henhaojie.com/Homeact/20180515/1526368416232243.png"></a></li>
+                  <li><a href="#"><img src="http://img.henhaojie.com/Homeact/20180409/1523252985675069.jpg"></a></li>
+              </ul>
+              <ul class="swiper-point">
+                  <li class="now"></li>
+                  <li></li>
+                  <li></li>
+                  <li></li>
+                  <li></li>
+                  <li></li>
+                  <li></li>
+              </ul>
+        </div>
+        <div class="details-wrapper">
+        </div>
+        <input readOnly="true" style="outline: none;border: 0px; color: rgba(0,0,0,0.0);position: absolute;left:-200px; background-color: transparent" id="biao1" value="要复制的内容"/>
+        <div id="biaoios" style=";position: absolute;left:-200px; color: rgba(0,0,0,0);background-color: transparent">要复制的内容</div>
+        <div class="btn-wrapper"><button class="btn">点击复制淘口令，打开淘宝去购买</button></div>
+        <script src="dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
+        <script src="dist/swiper.min.js" type="text/javascript" charset="utf-8"></script>
+        <script src="dist/index.js" type="text/javascript" charset="utf-8"></script>
+    </body>
+</html>

index.js

@@ -0,0 +1,16 @@
+window.onload = function () {
+    var mySwiper = new Swiper ('.swiper-container', {
+        direction: 'vertical',
+        loop: true,
+
+        // // 如果需要分页器
+        // pagination: '.swiper-pagination',
+
+        // // 如果需要前进后退按钮
+        // nextButton: '.swiper-button-next',
+        // prevButton: '.swiper-button-prev',
+
+        // // 如果需要滚动条
+        // scrollbar: '.swiper-scrollbar',
+      })
+}

inviting.html

@@ -0,0 +1,52 @@
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+        <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
+        <meta name="format-detection" content="telephone=no,address=no,email=no" />
+        <meta name="mobileOptimized" content="width" />
+        <meta name="handheldFriendly" content="true" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="description" content="" />
+        <meta name="keywords" content=""/>
+        <script>
+            ;(function() {
+              var docEl = document.documentElement,
+              resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+              clientWidth = docEl.clientWidth;
+              s();
+              window.addEventListener(resizeEvt, s, false);
+
+              function s() {
+                docEl.style.fontSize = 50.0 * (clientWidth / 375) + 'px';
+              }
+            })();
+        </script>
+        <script>
+              var _ua = navigator.userAgent;
+              if (!!_ua.match(/.*OS\s([\d_]+)/) || !!_ua.match(/(Android)\s+([\d.]+)/)) {
+                document.write('<style>body{min-width:320px;min-height:320px;}</style>');
+              }
+        </script>
+        <link rel="stylesheet" type="text/css" href="dist/index.css">
+        <style type="text/css" media="screen">
+        </style>
+    </head>
+    <body>
+        <div class="download-wrapper">
+            <div class="img-box"><img src="img/icon.png" alt=""></div>
+            <div class="content">
+              <h6 class="title">省钱达人</h6>
+              <p class="text">购物省钱，分享赚钱，更多奖励等你来</p>
+            </div>
+            <button type="button">下载APP</button>
+        </div>
+        <p class="step-wrapper">1.下载APP——2选择微信登录——3成为省钱达人</p>
+        <div class="inviting-pic"><img src="" alt=""></div>
+        <div class="btn-wrapper"><button class="btn">点击复制邀请码：<em>JSKD737</em></button></div>
+        <script src="dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
+        <script type="text/javascript" charset="utf-8">
+        </script>
+    </body>
+</html>