master

分支 (1)

管理

管理

master

gulp-demo
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合生元官网</title>
    <meta name="keywords" content="合生元,合生元益生菌,合生元奶粉,合生元官网,www.biostime.com.cn">
    <meta name="description" content="合生元致力于对宝宝所需营养的不懈探索，研发出SN-2 PLUS亲和均衡配方，亲近好吸收。精选法国诺曼底奶源，100%欧洲原罐进口。">
    <script src="assets/js/viewport.js"></script>
    <link rel="stylesheet" type="text/css" href="assets/css/css.css">
    <style>
        #alert{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,.8);
            z-index: 9999;
            overflow: hidden;
            display: none;
        }
        #alert .center{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -350px;
            margin-left: -280px;
            width: 598px;
            height: 522px;
        }
        #alert .center img{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        #alert .center .close{
            position: absolute;
            right: 12px;
            top: 15px;
            width: 50px;
            height: 50px;
            cursor: pointer;
            z-index: 9999;
        }
        #alert .center .btn{
            position: absolute;
            bottom: 70px;
            right: 135px;
            width: 210px;
            height: 50px;
            z-index: 9999;
            cursor: pointer;
        }
    </style>
</head>
<body name="首页">
    <div id="index">
        <div class="bg">
            <img src="assets/img/index/02.jpg" width="750" height="537" alt="合生元">
            <img src="assets/img/index/03.jpg" width="750" height="981" alt="合生元">
            <img src="assets/img/index/04.jpg" width="750" height="1304" alt="合生元">
            <img src="assets/img/index/05.jpg" width="750" height="714" alt="合生元">
            <img src="assets/img/index/06.jpg" width="750" height="685" alt="合生元">
            <img src="assets/img/index/07.jpg" width="750" height="870" alt="合生元">
            <img src="assets/img/index/08.jpg" width="750" height="698" alt="合生元">
        </div>
        <!--轮播图-->
        <div class="carousel">
            <div class="loading"><img src="assets/img/loading.gif"></div>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><a href="index.html"><img src="assets/img/index/carousel-01.png"></a></div>
                    <div class="swiper-slide"><a href="index.html"><img src="assets/img/index/carousel-02.jpg"></a></div>
                    <div class="swiper-slide"><a href="index.html"><img src="assets/img/index/carousel-03.jpg"></a></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!--视频-->
        <div class="vide">
            <div style="width: 100%;height: 400px;position: relative">
                <img id="videoBg" src="assets/img/index/video.jpg" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1;width: 703px;height: 403px;">
                <iframe id="testVideo" frameborder="0" width="100%" height="100%" src="https://v.qq.com/iframe/player.html?vid=l06201oe17x&tiny=0&auto=0" allowfullscreen=""></iframe>
            </div>
            <div class="btnGroup">
                <div class="btn active">星耀法国 全新上市</div>
                <div class="btn">朱丽叶-回到初心</div>
                <div class="btn">刘烨-在这里，做一个牧民</div>
            </div>
        </div>
        <!--场地-->
        <div class="address">
            <img width="650px" src="assets/img/index/address-01.png">
            <div class="aGroup">
                <a href="sn-2.html"></a>
                <a href="naiyuan.html"></a>
                <a href="family-story.html"></a>
            </div>
            <div class="btnGroup">
                <a href="http://www.biostime.fr/" name="法国" class="btn">法国</a>
                <a href="https://www.biostime.hk/" name="香港" class="btn">香港</a>
                <a href="http://www.binc.com.cn/" name="全球科研" class="btn">全球科研</a>
            </div>
        </div>
        <!--产品-->
        <div class="product">
            <img width="700px;" src="assets/img/index/product-01.png">
            <div class="productGroup">
                <a href="pai-star.html" name="链接-派星"></a>
                <a href="beta-star.html" name="链接-贝塔星"></a>
                <a href="alpha-star.html" name="链接-阿尔法星"></a>
                <a href="ysj-yw.html" name="链接-益生菌原味"></a>
            </div>
            <div class="btnGroup">
                <a href="care.html" name="链接-超级呵护" class="btn">超级呵护</a>
                <a href="milk.html" name="链接-妈妈奶粉" class="btn">妈妈奶粉</a>
                <a href="organic.html" name="链接-法版有机" class="btn">法版有机</a>
                <a href="wo-blue.html" name="链接-沃蓝" class="btn">沃蓝</a>
            </div>
        </div>
        <!--妈妈信赖，权威推介-->
        <div class="motherTrust">
            <a href="http://m.weibo.cn/status/4065424574911671?wm=3333_2001&from=106C393010&sourcetype=weixin" name="评论-小香米她娘"></a>
            <a href="http://q.mama.cn/topic/41060705" name="评论-思茏妈"></a>
            <a href="http://www.babytree.com/community/yuer/topic_67205071.html" name="评论-陈家妮妮"></a>
            <a href="http://www.mama.cn/ask/q8597101-p1.html" name="评论-安颜10"></a>
            <a href="http://www.babytree.com/community/yuer/topic_68767421.html" name="评论-言心小榭"></a>
        </div>
        <!--会员服务-->
        <div class="embershipService">
            <div class="btnGroup">
                <a class="btn" href="membership-service.html" name="链接-会员服务">查看合生元会员制度 >></a>
            </div>
        </div>
        <!--页脚-->
        <div class="footer">
            <div id="footerIconGroup"></div>
            <div id="footerText"></div>
        </div>
    </div>
    <div id="alert">
        <div class="center">
            <div class="close" onclick="close_alert()"></div>
            <div class="btn" onclick="close_alert()"></div>
            <img src="assets/img/alert.png">
        </div>
    </div>
    <script src="assets/js/jquery-3.2.1.min.js"></script>
    <script src="assets/js/main.js"></script>
    <script>
        var isAlert = sessionStorage.getItem('isAlert');
        if(!isAlert){
            $('body').css({height:'100%','overflow':'hidden'});
            $('#alert').show();
            sessionStorage.setItem('isAlert',true);
        }else {
            close_alert();
        }
        function close_alert() {
            $('#alert').hide();
            $('body').css({height:'auto','overflow':'auto'});
        }
        $(function () {
            Page.index.init();
        })
    </script>
</body>
</html>