index.html 21.6 KB

原文件审查历史永久链接

<!DOCTYPE html>
<html lang="zh">
{include file="public/head"/}
<!--swiper引入-->
<link rel="stylesheet" href="__CDN__/assets/store/js/Swiper-3.4.2/css/swiper.min.css">
<script type="text/javascript" src="__CDN__/assets/store/js/Swiper-3.4.2/js/swiper.min.js"></script>
<style>
    .content{
        width: 100%;
        font-size: 0;
        background: rgba(249,249,249,1);
    }
    .content .bannerBox{
        position: relative;
        width: 100%;
        height: 540px;
        background: #1e9fff;
        margin-bottom: 20px;
    }

    /*轮播图样式*/
    .content .bannerBox .swiper-pagination-bullet{
        background: rgba(255,255,255,1);
        opacity: 1;
    }
    .content .bannerBox .swiper-pagination-bullet-active{
        background: rgba(61,68,77,1);
    }

    /*悬浮导航一级样式*/
    .content .bannerBox .suspensionNavBox{
        position: absolute;
        width: 284px;
        height: 540px;
        top: 0;
        left: 360px;
        z-index: 9;
        background: rgba(255,255,255,1);
        opacity: 0.9;
    }
    .content .bannerBox .suspensionNavBox ul{
        width: 100%;
        height: 100%;
    }
    .content .bannerBox .suspensionNavBox ul li{
        list-style-type: none;
        width: 100%;
        height: 75px;
        padding: 14px 12px;
        cursor: pointer;
        border-top: 1px solid rgba(238,238,238,1);
    }
    .content .bannerBox .suspensionNavBox ul li .typeBox p{
        display: inline-block;
        height: 22px;
        margin-bottom: 5px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 22px;
        color: rgba(61,68,77,1);
    }
    .content .bannerBox .suspensionNavBox ul li .typeBox .selectTypeName{
        color: #009F8E;
    }
    .content .bannerBox .suspensionNavBox ul li .typeBox .arrow{
        float: right;
    }
    .content .bannerBox .suspensionNavBox ul li .typeDetailBox p{
        display: inline-block;
        height: 20px;
        margin-right: 15px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 20px;
    }
    .content .bannerBox .suspensionNavBox ul li .typeDetailBox p a{
        color: rgba(140,145,152,1);
    }
    /*悬浮导航二级样式*/
    .content .bannerBox .secondLevelBox{
        display: none;
        position: absolute;
        width: 133px;
        height: 540px;
        top: 0;
        left: 644px;
        z-index: 9;
        background: rgba(249,249,249,1);
        opacity: 0.9;
    }
    .content .bannerBox .secondLevelBox #secondLevelTitle{
        width: 100%;
        height: 62px;
        line-height: 62px;
        text-align: center;
        border-bottom: 1px solid rgba(238,238,238,1);
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(0,159,142,1)
    }
    .content .bannerBox .secondLevelBox #secondLevelList{
        width: 100%;
        height: 478px;
        overflow: auto;
    }
    .content .bannerBox .secondLevelBox #secondLevelList li{
        list-style-type: none;
        cursor: pointer;
        width: 100%;
        height: 42px;
        line-height: 42px;
        text-align: center;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(6,18,30,1);
    }
    .content .bannerBox .secondLevelBox #secondLevelList li a{
        color: rgba(6,18,30,1);
    }

    /*清仓列表部分样式*/
    .content  .clearanceBox{
        width: 100%;
        height: 351px;
        margin-bottom: 12px;
        background: rgba(255,255,255,1);
    }
    .content  .clearanceBox .clearanceMain{
        position: relative;
        width: 1200px;
        margin: 0 auto;
    }
    .content  .clearanceBox .titleBox{
        width: 1200px;
        height: 62px;
        line-height: 62px;
    }
    .content  .clearanceBox .titleBox span:first-child{
        display: inline-block;
        float: left;
        width: 6px;
        height: 20px;
        margin-top: 21px;
        background: rgba(0,159,142,1);
        border-radius: 2px;
    }
    .content  .clearanceBox .titleBox span:last-child{
        height: 22px;
        line-height: 22px;
        float: left;
        margin-top: 20px;
        padding-left: 12px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(0,159,142,1);
    }
    .content  .clearanceBox .clearanceList{
        width: 100%;
        height: 279px;
        padding: 0 51px;
    }
    .content  .clearanceBox .clearanceList .swiper-container .swiper-wrapper .swiper-slide .commodityTitle{
        width: 168px;
        /*height: 40px;*/
        /*line-height: 20px;*/
        text-align: left;
        margin-top: 10px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(6,18,30,1);
    }
    .content .clearanceBox .clearanceList .swiper-container .swiper-wrapper .swiper-slide .priceBox{
        width: 168px;
        height: 20px;
    }
    .content .clearanceBox .clearanceList .swiper-container .swiper-wrapper .swiper-slide .priceBox .presentPrice{
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 20px;
        color: rgba(255,49,0,1);
        float: left;
    }
    .content .clearanceBox .clearanceList .swiper-container .swiper-wrapper .swiper-slide .priceBox .originalPrice{
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 17px;
        color: rgba(189,196,206,1);
        float: right;
        text-decoration: line-through;
    }
    .content .clearanceBox .clearanceList .swiper-button-next, .content .clearanceBox .clearanceList .swiper-button-prev{
        width: 26px;
        height: 26px;
        background-size: 26px;
        -webkit-background-size: 26px;
    }
    .content .clearanceBox .clearanceList .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
        background-image: url("__CDN__/assets/store/images/right_icon.png");
    }
    .content .clearanceBox .clearanceList .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
        background-image: url("__CDN__/assets/store/images/left_icon.png");
    }

    /*产品热卖部分样式*/
    .content .bestSellersBox{
        width: 100%;
        /*height: 981px;*/
        background: rgba(255,255,255,1);
    }
    .content .bestSellersBox .bestSellersMain{
        width: 1200px;
        margin: 0 auto;
    }
    .content .bestSellersBox .bestSellersMain .titleBox{
        width: 1200px;
        height: 62px;
        line-height: 62px;
    }
    .content .bestSellersBox .bestSellersMain .titleBox span:first-child{
        display: inline-block;
        float: left;
        width: 6px;
        height: 20px;
        margin-top: 21px;
        background: rgba(0,159,142,1);
        border-radius: 2px;
    }
    .content .bestSellersBox .bestSellersMain .titleBox span:nth-child(2){
        height: 22px;
        line-height: 22px;
        float: left;
        margin-top: 20px;
        padding-left: 12px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(0,159,142,1);
    }
    .content .bestSellersBox .bestSellersMain .titleBox .moreBtn{
        float: right;
        height: 62px;
        line-height: 62px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(140,145,152,1);
    }
    .content .bestSellersBox .bestSellersMain .bestSellersList{
        width: 100%;
        padding: 0 19px 0 29px;
    }
    .content .bestSellersBox .bestSellersMain .bestSellersList .commodityBox{
        position: relative;
        display: inline-block;
        width: 182px;
        height: 301px;
        margin-right: 10px;
    }
    .content .bestSellersBox .bestSellersMain .bestSellersList .commodityBox a .insurance_icon{
        position: absolute;
        top: 0;
        right: 0;
    }
    .content .bestSellersBox .bestSellersMain .bestSellersList .commodityBox .imgBox{
        position: relative;
    }
    .content .bestSellersBox .bestSellersMain .bestSellersList .commodityBox .imgBox img{
        width: 182px;
        height: 182px;
    }
    .content .bestSellersBox .bestSellersMain .bestSellersList .commodityBox .imgBox span{
        display: block;
        position: absolute;
        top: 152px;
        width: 100%;
        height: 30px;
        padding: 0 12px;
        background: rgba(0,0,0,0.5);
        border-radius: 0 0 4px 4px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 30px;
        color: rgba(0,159,142,1);
    }
    .content .bestSellersBox .bestSellersMain .bestSellersList .commodityBox .commodityPrice{
        width: 100%;
        height: 33px;
        line-height: 40px;
        margin: 0;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 600;
        color: rgba(255,49,0,1);
    }
    .content .bestSellersBox .bestSellersMain .bestSellersList .commodityBox .commodityName{
        width: 100%;
        /*height: 42px;*/
        /*line-height: 21px;*/
        margin: 0 0 4px 0;
        text-align: left;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(6,18,30,1);
    }
    .content .bestSellersBox .bestSellersMain .bestSellersList .commodityBox .labelBox span{
        display: inline-block;
        width: 70px;
        height: 21px;
        margin-right: 6px;
        background: rgba(244,244,244,1);
        border-radius: 2px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 21px;
        text-align: center;
        color: rgba(0,0,0,1);
        opacity: 0.85;
    }
</style>
<body>
{include file="public/header"/}
<!--主要内容-->
<div class="content">
    {include file="public/nav"}
    <!--轮播图-->
    <div class="bannerBox">
        <div id="banner-container" class="swiper-container">
            <div class="swiper-wrapper">
                {foreach name="$slide" item="s"}
                <div class="swiper-slide"><img src="{$s.thumbnail}" alt="img"></div>
                {/foreach}
            </div>
            <!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
            <div class="swiper-pagination"></div>
        </div>

        <!--悬浮导航一级-->
        <div class="suspensionNavBox">
            <ul>
                {foreach name="$goodstype_one" item="g_o"}
                <li onmouseenter="openSecondLevelMenu(this)" >
                    <div class="typeBox">
                        <p class="typeName">{$g_o.name}</p>
                        <p class="arrow"><img src="__CDN__/assets/store/images/rightArrow.png" alt="img"></p>
                    </div>
                    <div class="typeDetailBox">
                        {foreach name="$g_o.goodstype_two" item="g_t"}
                            <p><a href="">{$g_t.name}</a></p>
                        {/foreach}
                    </div>
                </li>
                {/foreach}
            </ul>
        </div>
        <!--悬浮导航二级-->
        <div class="secondLevelBox" onmouseleave="closeSecondLevelMenu()">
            <p id="secondLevelTitle">
                低压配电
            </p>
            <ul id="secondLevelList">
                <li>机械设备</li>
                <li>机床设备</li>
            </ul>
        </div>

    </div>

    <!--特价清仓部分-->
    <div class="clearanceBox">
        <div class="clearanceMain">
            <div class="titleBox">
                <span></span>
                <span>特价清仓</span>
            </div>
            <div class="clearanceList">
                <div id="clearanceList-container" class="swiper-container">
                    <div class="swiper-wrapper clearance_goods_dom">
                        {foreach name="$clearance_goods" item="c_g"}
                        <div class="swiper-slide">
                            <a href="{:url('index/goods/detail',array('goods_id'=>$c_g.id))}">
                                <img src="{$c_g.thumbnail}" alt="img">
                                <p class="commodityTitle">{$c_g.goodsname}</p>
                                <div class="priceBox">
                                    <p class="presentPrice">¥{$c_g.price}</p>
                                    <p class="originalPrice">￥{$c_g.lineation}</p>
                                </div>
                            </a>
                        </div>
                        {/foreach}
                    </div>
                </div>
                <!-- 如果需要导航按钮 -->
                <div id="clearanceList-button-prev" class="swiper-button-prev"></div>
                <div id="clearanceList-button-next" class="swiper-button-next"></div>
            </div>
        </div>
    </div>

    <!--产品热卖部分-->
    <div class="bestSellersBox">
        <div class="bestSellersMain">
            <div class="titleBox">
                <span></span>
                <span>产品热卖</span>
                <a class="moreBtn" href="{:url('index/goods/goods_list')}">更多 ></a>
            </div>
            <div class="bestSellersList goods_dom">
                {foreach name="$goods" item="g"}
                <div class="commodityBox">
                    <a href="{:url('index/goods/detail',array('goods_id'=>$g.id))}" target="_blank">
                        <div class="imgBox">
                            <img src="{$g.thumbnail}" alt="img">
                            <span>{$g.store_name}</span>
                        </div>
                        <p class="commodityPrice">¥{$g.price}</p>
                        <p class="commodityName">{$g.goodsname}</p>
                        <div class="labelBox">
                            {foreach name="$g.property" item="g_p"}
                            <span>{$g_p}</span>
                            {/foreach}
                        </div>
                        <img class="insurance_icon" src="__CDN__/assets/store/images/insurance_icon.png" alt="img">
                    </a>
                </div>
                {/foreach}
            </div>
        </div>
    </div>
</div>
{include file="public/footer"/}
{include file="public/js"/}
<script>
    $(function () {
        initBanner(); //初始化轮播图
        initLocation();//获取定位信息
    });

    //定位当前位置
    function initLocation(){
        // 百度地图API功能
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(116.331398,39.897445);
        map.centerAndZoom(point,12);
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                //省份名称转换为id
                $.ajax({
                    url:"{:url('index/sundry/get_province_id')}",
                    type:"POST",
                    data:{"province_name":r.address.province},
                    async:false,
                    success:function(res){
                        if(res.code == 1){
                            province_id = res.data.province_id;
                            lng = r.point.lng;
                            lat = r.point.lat;
                            //初始化清仓列表
                            initClearanceList();
                            //初始化产品热卖
                            initGoodsList();
                        }else{
                            toast(res.msg);
                        }
                    },
                    error:function(res){
                        toast('与服务器断开连接');
                    }
                });
            } else {
                toast('failed'+this.getStatus());
            }
        },{enableHighAccuracy: true})
    }

    //加载轮播图
    function initBanner() {
        var mySwiper = new Swiper('#banner-container', {
            autoplay: 5000,//可选选项，自动滑动
            pagination : '.swiper-pagination'
        })
    }

    //加载清仓列表
    function initClearanceList() {
        $.ajax({
            url:"{:url('index/goods/get_all')}",
            type:"POST",
            data:{"province_id":province_id,'is_clearance':1},
            success:function(res){
                console.log(res);
                var clearance_goods_html = "";
                $(res.data).each(function (key, vo) {
                    var str = "<div class=\"swiper-slide\">\n" +
                        "                            <a href=\"{:url('index/goods/detail',array('goods_id'=>'GOODS_ID'))}\" target='_blank'>\n" +
                        "                                <img src=\""+vo.thumbnail+"\" alt=\"img\">\n" +
                        "                                <p class=\"commodityTitle\">"+vo.goodsname+"</p>\n" +
                        "                                <div class=\"priceBox\">\n" +
                        "                                    <p class=\"presentPrice\">¥"+vo.price+"</p>\n" +
                        "                                    <p class=\"originalPrice\">￥"+vo.lineation+"</p>\n" +
                        "                                </div>\n" +
                        "                            </a>\n" +
                        "                        </div>";
                    clearance_goods_html += str.replace("GOODS_ID",vo.id);
                });
                $('.clearance_goods_dom').html(clearance_goods_html);
                //初始化swiper
                var myClearance = new Swiper('#clearanceList-container', {
                    loop: false,
                    slidesPerView: 6,
                    autoplay: 3000,
                    //前进后退按钮
                    nextButton: '#clearanceList-button-next',
                    prevButton: '#clearanceList-button-prev',
                })
            },
            error:function(res){
                toast('与服务器断开连接');
            }
        });
    }

    //初始化商品列表
    function initGoodsList(){
        $.ajax({
            url:"{:url('index/goods/get_all')}",
            type:"POST",
            data:{"province_id":province_id},
            success:function(res){
                console.log(res);
                var goods_html = "";
                $(res.data).each(function (key1, vo) {
                    var property = "";
                    $(vo.property).each(function (key2, p) {
                        property += "<span>"+p+"</span>";
                    });
                    var insurance = "";
                    if(vo.insurance == '1'){
                        insurance = "<img class=\"insurance_icon\" src=\"__CDN__/assets/store/images/insurance_icon.png\" alt=\"img\">"
                    }
                    var str = "<div class=\"commodityBox\">\n" +
                        "                    <a href=\"{:url('index/goods/detail',array('goods_id'=>'GOODS_ID'))}\" target='_blank'>\n" +
                        "                        <div class=\"imgBox\">\n" +
                        "                            <img src=\""+vo.thumbnail+"\" alt=\"img\">\n" +
                        "                            <span>"+vo.store_name+"</span>\n" +
                        "                        </div>\n" +
                        "                        <p class=\"commodityPrice\">¥"+vo.price+"</p>\n" +
                        "                        <p class=\"commodityName\">"+vo.goodsname+"</p>\n" +
                        "                        <div class=\"labelBox\">\n" +
                        "                            "+property+"\n" +
                        "                        </div>\n" +
                        "                        "+insurance+"\n" +
                        "                    </a>\n" +
                        "                </div>";
                    goods_html += str.replace("GOODS_ID",vo.id);
                });
                $('.goods_dom').html(goods_html);
            },
            error:function(res){
                toast('与服务器断开连接');
            }
        });
    }

    //打开二级悬浮导航
    function openSecondLevelMenu(obj) {
        $('.typeName').removeClass('selectTypeName');
        $('.suspensionNavBox ul li').css({'background': 'rgba(255,255,255,1)'});
        $('.suspensionNavBox').find('img').attr('src','__CDN__/assets/store/images/rightArrow.png');

        $(obj).css({'background': 'rgba(249,249,249,1)'});
        $(obj).find('.typeName').addClass('selectTypeName');
        $(obj).find('img').attr('src','__CDN__/assets/store/images/rightArrow_select.png');

        $('#secondLevelTitle').html($(obj).find('.typeName').html());
        var listVal = $(obj).find('.typeDetailBox').children('p');
        var el = '';
        for (var i=0; i<listVal.length; i++){
            el += '<li>' + $(listVal[i]).html() + '</li>';
        }
        $('#secondLevelList').html(el);
        $('.secondLevelBox').show();
    }

    //关闭二级悬浮导航
    function closeSecondLevelMenu(obj) {
        $('.typeName').removeClass('selectTypeName');
        $('.suspensionNavBox ul li').css({'background': 'rgba(255,255,255,1)'});
        $('.suspensionNavBox').find('img').attr('src','__CDN__/assets/store/images/rightArrow.png');
        $('.secondLevelBox').hide();
    }

    // 搜索框
    function search(val) {
        var searchKey = $('#searchVal').val();
        window.location.href = 'search.html?searchKey='+searchKey;
    }
</script>
</body>
</html>