master

分支 (1)

管理

管理

master

wxPhone
/
commodity_detail.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>详情</title>
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/brand.css">
    <link rel="stylesheet" href="./css/commodity_details.css">
    <link rel="stylesheet" href="./css/combo_type.css">

</head>


<div class="img_box">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img class="backgroung_img" data-src="./images/pro_b.png"
                     data-srcm="./images/pro_b.png" alt="">
            </div>
            <div class="swiper-slide">
                <img class="backgroung_img" data-src="./images/pro_b.png"
                     data-srcm="./images/pro_b.png" alt="">
            </div>
            <div class="swiper-slide">
                <img class="backgroung_img" data-src="./images/pro_b.png"
                     data-srcm="./images/pro_b.png" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
</div>
<div class="details_box">
    <p class="title_1">泰国电话卡就是牛，信号就是好</p>
    <p class="title_1"><span class="new-price">代理价：￥29.9~39.9</span><span class="old-price">原价：￥39.9~49.9</span></p>
    <p class="title_2">月销量11111件</p>
</div>
<div class="div_background"></div>
<div class="information_box">
    <div class="details_information">
        <div class="information_left">
            <p class="place">目的地：亚洲 泰国</p>
            <p>自取城市：江苏 南京</p>
        </div>
        <div class="information_left">
            <p class="place">目的地：亚洲 泰国</p>
            <p>自取城市：江苏 南京</p>
        </div>
    </div>
</div>
<div class="div_background"></div>
<div class="choose_type">
    选择 取件方式 套餐类型<span>></span>
</div>
<div class="div_background"></div>
<div class="intruduction">
    <div class="intruduction_left active">
        图文介绍
    </div>
    <div class="intruduction_left">
        <span>全部评价</span>
    </div>
</div>
<div class="xuanXiang">
    <div class="intruduction_box">
        <img src="./images/pro_detail.png">
    </div>
    <!--具体的文字说明-->
    <div class="intruduction_text">
        <p class="text_title">费用包含</p>
        <p class="ziQu">自取：单价x张数。</p>
        <p class="youJi">邮寄：单价x张数+中通包邮（顺丰按实际邮费收取）。</p>
    </div>
    <div class="intruduction_text">
        <p class="text_title">产品说明</p>
        <p class="ziQu">（1）8天2G 4G+无限3G流量：每天250MB高速流量。</p>
        <p class="youJi">（2）5天无限4G流量:4G高速流量.有效期:激活后5天</p>
        <p class="youJi">（3）6天无限4G流量;4G高速流量.有效期:激活后5天</p>
    </div>
    <div class="intruduction_text">
        <p class="text_title">预定需知</p>
        <p class="ziQu">购买前请务必联系客服确认手机型号适配类型</p>
        <p class="youJi">适用国家以外不能插卡测试</p>
    </div>
    <div class="intruduction_text text_4">
        <p class="text_title">退改规则</p>
        <p class="ziQu">1.取消/更改订单请及时与客服联系</p>
        <p class="youJi">2.由于商品性质不支持7天无理由退换，如因买家原因需退货，则则未拆卡</p>
    </div>
</div>
<div class="xuanXiang" style="display: none">
    <div class="comment_box">
        <ul>
            <li>累计评价</li>
            <li class="pingJia_title">全部评价
                <div class="dian dian_avtive" id="dian_1" style="display: block"></div>
            </li>
            <li class="pingJia_title">有图评价
                <div class="dian" id="dian_2"></div>
            </li>
        </ul>
    </div>
    <div class="pingJia_1" id="pingJia_1" style="display: block">
        <div class="comment_details">
            <div class="comment_name">1昵********称</div>
            <div class="comment_time">评价时间:2017-06-03</div>
            <p class="comment_content">
                好用，一年前去美国在别家也买过没有这个快好用，一年前去美国在别
                家也买过没有这个快好用，一年前去美国在别家也买过没有这个快
            </p>

            <div class="reply">
                <p class="comment_reply">
                    回复：亲感谢您使用我们的产品， 回复：亲感谢您使用我们的产品
                    回复：亲感谢您使用我们的产品， 回复：亲感谢您使用我们的产品
                </p>
            </div>
            <div class="type">
                套餐类型： 6天无限4G流量 ：4G无限高速流量
            </div>
        </div>
        <div class="comment_details comment_details_2">
            <div class="comment_name">昵********称</div>
            <div class="comment_time">评价时间:2017-06-03</div>
            <p class="comment_content">
                好用，一年前去美国在别家也买过没有这个快好用，一年前去美国在别
                家也买过没有这个快好用，一年前去美国在别家也买过没有这个快
            </p>
            <div class="comment_img">
                <ul>
                    <li><img src="./images/pinglun.png"></li>
                    <li><img src="./images/pinglun.png"></li>
                    <li><img src="./images/pinglun.png"></li>
                </ul>
            </div>
            <div class="reply">
                <p class="comment_reply">
                    回复：亲感谢您使用我们的产品， 回复：亲感谢您使用我们的产品
                    回复：亲感谢您使用我们的产品， 回复：亲感谢您使用我们的产品
                </p>
            </div>
            <div class="type">
                套餐类型： 6天无限4G流量 ：4G无限高速流量
            </div>
        </div>
        <div class="comment_details">
            <div class="comment_name">1昵********称</div>
            <div class="comment_time">评价时间:2017-06-03</div>
            <p class="comment_content">
                好用，一年前去美国在别家也买过没有这个快好用，一年前去美国在别
                家也买过没有这个快好用，一年前去美国在别家也买过没有这个快
            </p>

            <div class="reply">
                <p class="comment_reply">
                    回复：亲感谢您使用我们的产品， 回复：亲感谢您使用我们的产品
                    回复：亲感谢您使用我们的产品， 回复：亲感谢您使用我们的产品
                </p>
            </div>
            <div class="type">
                套餐类型： 6天无限4G流量 ：4G无限高速流量
            </div>
        </div>
        <div class="comment_details comment_details_2">
            <div class="comment_name">昵********称</div>
            <div class="comment_time">评价时间:2017-06-03</div>
            <p class="comment_content">
                好用，一年前去美国在别家也买过没有这个快好用，一年前去美国在别
                家也买过没有这个快好用，一年前去美国在别家也买过没有这个快
            </p>
            <div class="comment_img">
                <ul>
                    <li><img src="./images/pinglun.png"></li>
                    <li><img src="./images/pinglun.png"></li>
                    <li><img src="./images/pinglun.png"></li>
                </ul>
            </div>
            <div class="reply">
                <p class="comment_reply">
                    回复：亲感谢您使用我们的产品， 回复：亲感谢您使用我们的产品
                    回复：亲感谢您使用我们的产品， 回复：亲感谢您使用我们的产品
                </p>
            </div>
            <div class="type">
                套餐类型： 6天无限4G流量 ：4G无限高速流量
            </div>
        </div>
    </div>
    <div class="pingJia_1" id="pingJia_2" style="display: none;">
        <div class="comment_details">
            <div class="comment_name">2昵********称</div>
            <div class="comment_time">评价时间:2017-06-03</div>
            <p class="comment_content">
                好用，一年前去美国在别家也买过没有这个快好用，一年前去美国在别
                家也买过没有这个快好用，一年前去美国在别家也买过没有这个快
            </p>
            <div class="comment_img">
                <ul>
                    <li><img src="./images/pinglun.png"></li>
                    <li><img src="./images/pinglun.png"></li>
                    <li><img src="./images/pinglun.png"></li>
                </ul>
            </div>
            <div class="reply">
                <p class="comment_reply">
                    回复：亲感谢您使用我们的产品， 回复：亲感谢您使用我们的产品
                    回复：亲感谢您使用我们的产品， 回复：亲感谢您使用我们的产品
                </p>
            </div>
            <div class="type">
                套餐类型： 6天无限4G流量 ：4G无限高速流量
            </div>
        </div>
        <div class="comment_details comment_details_2">
            <div class="comment_name">昵********称</div>
            <div class="comment_time">评价时间:2017-06-03</div>
            <p class="comment_content">
                好用，一年前去美国在别家也买过没有这个快好用，一年前去美国在别
                家也买过没有这个快好用，一年前去美国在别家也买过没有这个快
            </p>
            <div class="comment_img">
                <ul>
                    <li><img src="./images/pinglun.png"></li>
                    <li><img src="./images/pinglun.png"></li>
                    <li><img src="./images/pinglun.png"></li>
                </ul>
            </div>
            <div class="reply">
                <p class="comment_reply">
                    回复：亲感谢您使用我们的产品， 回复：亲感谢您使用我们的产品
                    回复：亲感谢您使用我们的产品， 回复：亲感谢您使用我们的产品
                </p>
            </div>
            <div class="type">
                套餐类型： 6天无限4G流量 ：4G无限高速流量
            </div>
        </div>
    </div>
</div>

<!--底部联系客服，加入收藏-->
<div class="bottom_box">
    <div class="bottom_left">
        <div class="bottom_QQ">
            <img src="./images/qqq.png">
            <div>客服</div>
        </div>
        <div class="bottom_QQ" id="shop">
            <img src="./images/dianPu.png">
            <div>店铺</div>
        </div>
    </div>
    <div class="bottom_right">
        <div class="right_save">
            加入收藏
        </div>
        <div class="right_save right_save_2">
            加入店铺
        </div>
    </div>
</div>

<!--弹出框-->
<div class="box" style="display: none">
    <div class="content_box">
        <div class="content_top">
            <div class="img_left">
                <img src="./images/pro_s.png">
            </div>
            <div class="title_right">
                <p>价格：<span>￥29.9~36.9</span></p>
                <p>已选: </p>
            </div>
        </div>
        <div class="content_middle">
            <p>取件方式:</p>
            <button class="type_button">自取</button>
            <button class="type_button">邮寄</button>
        </div>
        <div class="content_middle">
            <p>套餐类型:</p>
            <div class="type">
                <div>
                    8天 2.5GB 4G流量+无限2G流量（含通话）赠送邮寄到家
                </div>

            </div>
            <div class="type">
                <div>
                    8天 2.5GB 4G流量+无限2G流量（含通话）赠送邮寄到家
                </div>
            </div>
            <div class="type">
                <div>
                    8天 2.5GB 4G流量+无限2G流量（含通话）赠送邮寄到家
                </div>
            </div>
        </div>
    </div>
    <div class="btn_close">
        <button class="close">关闭</button>
    </div>
</div>

<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/swiper.jquery.min.js"></script>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        autoplay: 3000,//可选选项，自动滑动
    });
    $(".backgroung_img").each(function () {
        if (window.screen.width < 768) {
            $(this).attr("src", $(this).data("srcm"));
        } else {
            $(this).attr("src", $(this).data("src"));
        }
    });

    //选项卡切换 图文介绍 相关评价
    var liArr = document.getElementsByClassName("intruduction_left");
    var divArr = document.getElementsByClassName("xuanXiang");
    for (var i = 0; i < liArr.length; i++) {
        liArr[i].index = i;
        liArr[i].onclick = function () {
            for (var j = 0; j < liArr.length; j++) {
                liArr[j].style.color = "black";
                liArr[this.index].style.color = "#ff9966";
                divArr[j].style.display = "none";
                divArr[this.index].style.display = "block";
            }
        }
    }


    $('.pingJia_title').click(function () {
        console.log($(this))
        if ($(this).index() == 1) {
            removeAll();
            $(this).children().addClass('dian_avtive');
            $('#pingJia_1').show();
            $('#pingJia_2').hide();
        } else if ($(this).index() == 2) {
            removeAll();
            $(this).children().addClass('dian_avtive');
            $('#pingJia_1').hide();
            $('#pingJia_2').show();
        }
    });
    function removeAll() {
        $('.pingJia_title').children().removeClass('dian_avtive');
    }


    $(".close").click(function () {
        $(".box").slideToggle(300);
    });

    $(".choose_type").click(function () {
        if ($(".box").css("display") == "none") {
            $(".box").slideToggle(300);
        } else {
            $(".box").slideToggle(300);
        }
    });
    $("#shop").click(function () {
        window.location.href = "shop.html";
    });

    $(".type_button").click(function () {
        var $this = $(this);
        $this.addClass("type-action").siblings().removeClass("type-action");
    });

    $(".content_middle .type").click(function () {
        var $this = $(this);
        $this.addClass("type-action").siblings().removeClass("type-action");
    });


</script>
</body>
</html>