master

分支 (1)

管理

管理

master

easy_app
/
首页.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>易果首页</title>
    <script src="./js/rem.js"></script>
    <script src="./js/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1432742_4i2947fkczn.css">
    <link rel="stylesheet" href="./css/首页.css">
    <link rel="stylesheet" href="./css/bottom.css">
    <script src="./js/api.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/swiper.min.js"></script>
    <link rel="stylesheet" href="./css/swiper.min.css">
    <script>
        $(function () {
            $('.search').click(function () {
                location.href = "./html/分类.html"
            })
        })
    </script>
    <style>
        .newspan {
            position: absolute;
        }

        .newspan1 {
            position: absolute;
            top: 1rem;
        }

        footer a:nth-of-type(4) {
            position: relative;
        }

        footer a:nth-of-type(4) #num {
            width: .26rem;
            height: .26rem;
            background-color: #fc3d3d;
            color: #fff;
            position: absolute;
            border-radius: 50%;
            top: -.06rem;
            right: .48rem;
            text-align: center;
            line-height: .26rem;
        }

        .swiper-container {
            width: 100%;
            height: 40%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-slide img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <header>
        <div class="contain">
            <div class="address">
                <span class='add'>上海</span>
                <span class="iconfont icon-jiantou9"></span>
            </div>
            <div class="search">
                <div class="input iconfont icon-search"><span>你</span>输入商品名称</div>
            </div>
            <div class="iconfont icon-erweima">
            </div>
        </div>
    </header>
    <main>
        <!-- <div class="swiper">
            <ul class="show">
            </ul>
            <ul class="btn">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div> -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>

        <div class="content1">
            <figure>
                <figcaption><a href="./html/首页分页/active01.html"><img src="./image/shouye02-eat01.png" alt=""></a>
                </figcaption>
                <span>买二付一</span>
            </figure>
            <figure>
                <figcaption><a href="./html/首页分页/active02.html"><img src="./image/shouye02-eat02.png" alt=""></img></a>
                </figcaption>
                <span>新品惠萃</span>
            </figure>
            <figure>
                <figcaption><a href="./html/首页分页/active03.html"><img src="./image/shouye02-eat03.png" alt=""></img></a>
                </figcaption>
                <span>会员尊享</span>
            </figure>
            <figure>
                <figcaption><a href="./html/首页分页/active04.html"><img src="./image/shouye02-eat04.png" alt=""></img></a>
                </figcaption>
                <span>银行活动</span>
            </figure>
        </div>
        <div class="border"></div>
        <div class="content2" style="overflow: hidden">
            <ul>
                <li><img src="./image/shouye02-kuaibao.png" alt=""></li>
                <li class="kuaibao">
                    <span class="newspan">营业资质公示，详情请点击查询</span>
                </li>
                <li><a href="">详情</a><span class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"></span></li>
            </ul>
        </div>
        <div class="content3">
            <img src="./image/shouye02-bigpic.png" alt="">
        </div>
        <div class="panic_buy">
            <h2>限时抢购</h2>
            <ul class="time">
                <li><span id="T">22:00</span>专场</li>
                <li>
                    <span id="hours">33</span>&nbsp;:
                    <span id="minutes">33</span>&nbsp;:
                    <span id="seconds">33</span>
                </li>
                <li>进行中</li>
            </ul>
        </div>
        <div class="fruit">
            <ul>
                <li><a href="./html/详情.html"><img src="" alt=""></img><span>橘子</span></a></li>
                <li><a href="./html/详情.html"><img src="" alt=""></img><span>橘子峰浓度和覅米高空地方各级</span></a></li>
                <li><a href="./html/详情.html"><img src="" alt=""></img><span>橘子</span></a></li>
                <li><a href="./html/详情.html"><img src="" alt=""></img><span>橘子</span></a></li>
                <li><a href="./html/详情.html"><img src="" alt=""></img><span>橘子</span></a></li>
            </ul>
        </div>
    </main>
    <footer>
        <a href="">
            <img src="./image/shouye02.png" alt="">
            <span>首页</span>
        </a>
        <a href="./html/分类.html">
            <img src="./image/fenlei01.png" alt="">
            <span>分类</span>
        </a>
        <a href="./html/吃饭吧.html">
            <img src="./image/chifanba01.png" alt="">
            <span>吃饭吧</span>
        </a>
        <a href="./html/购物车.html">
            <img src="./image/gouwuche01.png" alt="">
            <span>购物车</span>
            <div id="num">3</div>
        </a>
        <a href="./html/我的易果.html">
            <img src="./image/wodeyiguo01.png" alt="">
            <span>我的易果</span>
        </a>
    </footer>
    <script src="./js/jquery-1.11.3.min.js"></script>
    <script>
        $("body").fadeOut(0);
        $("body").fadeIn(200);
    </script>
    <script>
        let Thours = document.querySelector("#hours");
        let Tminutes = document.querySelector("#minutes");
        let Tseconds = document.querySelector("#seconds");
        let x = "2019-10-10 22:30:00"
        let time = setInterval(() => {
            let daojishi = reverseTime(x);
            Thours.innerHTML = daojishi[1];
            Tminutes.innerHTML = daojishi[2];
            Tseconds.innerHTML = daojishi[3];
        }, 1000)
    </script>
    <script>
        //轮播图
        $.post(showImg_Api, {}, function (data) {
            console.log(data);
            let html = data.map(v => `
            <div class="swiper-slide"><img src="${v.goodsImage}" alt=""></div>
        `).join('')
            $('.swiper-wrapper').append(html)
            var swiper = new Swiper('.swiper-container', {
                spaceBetween: 30, //图片轮播时候的空隙
                centeredSlides: true,
                loop: true,
                autoplay: {
                    delay: 2500, //秒数
                    disableOnInteraction: false,
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            });

            $("swiper-slide").hover(function () {
                autoplay: {
                    disableOnInteraction: true
                }
                console.log("das")
            }, function () {
                autoplay: {
                    disableOnInteraction: false
                }
            });
        })
        //显示抢购
        $.post(goods_buylimit_Api, {}, function (data) {
            console.log(data);
        })
        //每日上新
        $.post(good_newGoods_Api, {}, data => {
            console.log(data);
        })
    </script>
    <script>

    </script>

</body>

</html>