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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>迪速帮</title>
    <script src="js/greensock-js/src/minified/TweenMax.min.js"> </script>
    <script src="js/SplitText.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/header.css" media="screen and (min-width: 1001px)">
    <link rel="stylesheet" href="css/footer.css" media="screen and (min-width: 1001px)">
    <link rel="stylesheet" href="css/index.css" media="screen and (min-width: 1001px)">
    <link rel="stylesheet" href="css/moblieheader.css" media="screen and (max-width: 1000px)">
    <link rel="stylesheet" href="css/moblieindex.css" media="screen and (max-width: 1000px)">
    <link rel="stylesheet" href="css/mobilefooter.css" media="screen and (max-width: 1000px)">
    <link rel="stylesheet" href="css/reset.css">
</head>

<body>
    <header>
        <div class="head">
            <span class="mobilemenu">
                <div class="navh5">=</div>
                <div class="navh5 closeNav">+</div>
            </span>
            <div class="logo">
                <img src="/img/logo.png" alt="">
            </div>
            <ul>
                <li class="active">
                    <a href="index.html">
                        <div class="show">
                            <span>首页</span>
                            <span>HOME</span>
                        </div>
                        <div class="hide">首页</div>
                    </a>
                </li>
                <li>
                    <a href="about.html">
                        <div class="show">
                            <span>关于我们</span>
                            <span>ABOUT</span>
                        </div>
                        <div class="hide">关于我们</div>
                    </a>
                </li>
                <li>
                    <a href="download.html">
                        <div class="show">
                            <span>APP下载</span>
                            <span>DOWNLOAD</span>
                        </div>
                        <div class="hide">APP下载</div>
                    </a>

                </li>
                <li>
                    <a href="join.html">
                        <div class="show">
                            <span>加入我们</span>
                            <span>JOIN</span>
                        </div>
                        <div class="hide">加入我们</div>
                    </a>
                </li>
            </ul>
        </div>
    </header>
    <section class="box">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide p1">
                    <img src="img/home/Y1.png" alt="" class="p1-bg-1 p1-bg">
                </div>
                <div class="swiper-slide p1">
                    <img src="img/home/Y2.png" alt="" class="p1-bg-1 p1-bg">
                </div>
                <div class="swiper-slide p1">
                    <img src="img/home/P1_2@3x.png" alt="" class="p1-bg-1 p1-bg">
                    <img src="img/home/P1_3@3x.png" alt="" class="p1-bg-2 p1-bg">
                    <img src="img/home/P1_1@3x.png" alt="" class="p1-box-1">
                    <div class="p1-desc">
                        <p class="desc">迪速帮</p>
                        <p class="desc">校园生活一站式服务平台</p>
                        <p><span class="desc">共享市场</span> <span class="desc">品牌授权</span> <span class="desc">资源共享</span>
                            <span class="desc">技术支持</span> <span class="desc">经验培训</span>
                            <span class="desc">共创未来</span>
                        </p>
                    </div>
                </div>
                <div class="swiper-slide p2">
                    <img src="img/home/P2_1@3x.png" alt="" class="p2-bg">
                    <ul class="p2-box">
                        <li class="p2-item">
                            <img src="img/home/P2_7@3x.png" alt="">
                            <p>平均19分钟急速送达</p>
                        </li>
                        <li class="p2-item">
                            <img src="img/home/P2_4@3x.png" alt="">
                            <p>超时最高30元赔付</p>
                        </li>
                        <li class="p2-item">
                            <img src="img/home/P2_6@3x.png" alt="">
                            <p>足不出户送到寝室</p>
                        </li>
                        <li class="p2-item">
                            <img src="img/home/P2_3@3x.png" alt="">
                            <p>优惠活动享不停</p>
                        </li>
                        <li class="p2-item">
                            <img src="img/home/P2_5@3x.png" alt="">
                            <p>一键下单方便快捷</p>
                        </li>
                        <li class="p2-item">
                            <img src="img/home/P2_2@3x.png" alt="">
                            <p>校园外卖安全健康</p>
                        </li>

                    </ul>
                </div>
                <div class="swiper-slide p3">
                    <div class="p3-title">
                        <img src="img/home/P3_1@3x.png" alt="">
                        <p class="desc">全校的美食都在这里</p>
                        <ul>
                            <li class="p3-item">
                                <img src="img/home/P3_2@3x.png" alt="">
                                <span>送餐上楼</span>
                            </li>
                            <li class="p3-item">
                                <img src="img/home/P3_2@3x.png" alt="">
                                <span>安全健康</span>
                            </li>
                            <li class="p3-item">
                                <img src="img/home/P3_2@3x.png" alt="">
                                <span>急速送达</span>
                            </li>
                            <li class="p3-item">
                                <img src="img/home/P3_2@3x.png" alt="">
                                <span>优惠多多</span>
                            </li>
                        </ul>
                    </div>
                    <img src="img/home/P3_3@3x.png" alt="" class="p3-bg-1">
                    <img src="img/home/P3_4@3x.png" alt="" class="p3-bg-2">
                </div>
                <div class="swiper-slide p4">
                    <img src="img/home/P4_1@3x.png" alt="" class="p4-bg-1">
                    <img src="img/home/P4_2@3x.png" alt="" class="p4-bg-2">
                    <img src="img/home/P4_3@3x.png" alt="" class="p4-bg-3">
                    <div class="p4-desc">
                        <p>校园兼职</p>
                        <p>减肥锻炼还能挣钱</p>
                        <pre>
加入迪速帮，接单自由，多劳多得
收入高  结算快 秒到账
校内兼职轻松月入2000+
有钱的生活自己创造！！
                        </pre>
                    </div>
                </div>
                <div class="swiper-slide p5">
                    <img src="img/home/P5_1@3x.png" alt="" class="p5-bg-1">
                    <img src="img/home/P5_2@3x.png" alt="" class="p5-bg-2">
                    <img src="img/home/P5_3@3x.png" alt="" class="p5-bg-3">
                    <img src="img/home/P5_4@3x.png" alt="" class="p5-bg-4">
                    <div class="p5-desc">
                        元/气/满/满/做/学/霸
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <div class="foot">
            <ul class="pc">
                <li>
                    <img src="img/home/time.png" alt="">
                    <span>
                        08:00 ~ 22:00
                    </span>
                </li>
                <li>
                    <img src="img//home/phone.png" alt="">
                    <span>
                        17764985524
                    </span>
                </li>
                <li>
                    <img src="img/home/email.png" alt="">
                    <span>
                        185557102@qq.com
                    </span>
                </li>
                <li>
                    <img src="img/home/add.png" alt="">
                    <span>
                        四川省成都市武侯区环球中心 W1-1423
                    </span>
                </li>
            </ul>
            <div class="addinfo">
                <span>
                    Copyright © 2013-2021 Disubang 迪速帮 版权所有
                </span>
                <span>
                    备案号:<a href="http://beian.miit.gov.cn/" target="_blank" style="color: #999;">蜀ICP备17025427号-1</a>
                </span>
                <span>
                    <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51019002004162" style="display:inline-block;text-decoration:none;"><img src="" style="float:left;"/><p style="float:left;margin: 0px 0px 0px 5px; color:#939393;">川公网安备 51019002004162号</p></a>
                </span>
            </div>
        </div>
    </footer>
</body>
<script src="js/index.js"></script>
<script>

    var mySwiper = new Swiper('.swiper-container', {
        // autoplay: true,//可选选项，自动滑动
        direction: 'vertical', //竖向滑动
        mousewheel: true, //鼠标滚轮控制
        // initialSlide: 2,
        on: {
            slideChangeTransitionStart: function () {
                switch (this.activeIndex) {
                    case 0:
                        t1()
                        break;
                    case 1:
                        t2()
                        break;
                    case 2:
                        t3()
                        break;
                    case 3:
                        t4()
                        break;
                }
            },
        },
    })
    var tl = new TimelineLite()
    var p1 = $(".p1-box-1"),
        p2 = $(".p2-bg"),
        p3 = $(".p3-bg-2"),
        p4desc = $('.p4-desc'),
        p4bg1 = $('.p4-bg-1'),
        p4bg2 = $('.p4-bg-2')
    CSSPlugin.defaultTransformPerspective = 400
    var tagline = new SplitText(".desc")
    t1()
    function t1() {
        tl.from(p1, 0.5, {
            scale: .5,
            autoAlpha: 0
        })
            .staggerFrom(tagline.chars, 0.1, {
                opacity: 0,
                rotation: 90,
                scale: 0,
                x: 20,
                y: 60,
                ease: Back.easeOut
            }, 0.01);

        tl.from(p2, 0.5, {
            scale: .5,
            autoAlpha: 0
        }, "+=0.01");
    }

    // 第二页动画
    function t2() {
        TweenMax.staggerFrom(".p2-item", .5, {
            opacity: 0,
            cycle: {
                x: function (index, target) {
                    var distance
                    if (index % 2 == 0) {
                        distance = -100
                    } else {
                        distance = 100
                    }

                    return distance
                },

            }
        }, 0.1);
    }

    // 第三页
    function t3() {
        var myTweenp3 = TweenMax.from(p3, 1, {
            y: 20,
            opacity: 0,
        })
        TweenMax.staggerFrom(".p3-item", .5, {
            opacity: 0,
            cycle: {
                x: function (index, target) {
                    return -100
                },

            }
        }, 0.1);
    }

    // 第四页
    function t4() {
        var myTweenp4desc = TweenMax.from(p4desc, .5, {
            x: -100,
            opacity: 0,
        })
        var myTweenp4bg1 = TweenMax.from(p4bg1, .5, {
            x: 100,
            opacity: 0,
        })
        var myTweenp4bg2 = TweenMax.from(p4bg2, .5, {
            x: 100,
            opacity: 0,
        })
    }
</script>

</html>