master

分支 (1)

管理

管理

master

miu_vue
/
index_index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>miu</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/css/index/index.css">
</head>

<body>
    <main id="panel" style="height:100%;">
        <nav class="navbar navbar-top box-shadow" style="background-color: rgb(66,64,63);">
            <div class="col-xs-3">
                <span class="glyphicon glyphicon-align-left pull-left"></span>
            </div>
            <div class="col-xs-6" align="center">
                <span class="glyphicon glyphicon-headphones" style="color: rgb(232, 212, 64);font-size: 27px;margin-top: 10px;"></span>
            </div>
            <div class="col-xs-3">
                <span class="glyphicon glyphicon-search pull-right"></span>
            </div>
        </nav>
        <div class="box-shadow" style="background-color: rgb(81,94,110);height: 141px;color: rgb(232,212,64);margin-top: -20px;color: rgba(255,255,255,0.7);">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide one">
                        <p>May</p>
                        <h1>1</h1>
                    </div>
                    <div class="swiper-slide two">
                        <p>May</p>
                        <h1>2</h1>
                    </div>
                    <div class="swiper-slide one">
                        <p>May</p>
                        <h1>3</h1>
                    </div>
                    <div class="swiper-slide two">
                        <p>May</p>
                        <h1>4</h1>
                    </div>
                    <div class="swiper-slide one">
                        <p>May</p>
                        <h1>5</h1>
                    </div>
                    <div class="swiper-slide two">
                        <p>May</p>
                        <h1>6</h1>
                    </div>
                    <div class="swiper-slide one">
                        <p>May</p>
                        <h1>7</h1>
                    </div>
                    <div class="swiper-slide two">
                        <p>May</p>
                        <h1>8</h1>
                    </div>
                </div>
            </div>
        </div>
        <div style="position: relative;">
            <div class="col-xs-12 music-item-bg-div">
                <span class="glyphicon glyphicon-play" id="1"></span>
                <span class="glyphicon glyphicon-heart-empty"></span>
            </div>
            <div class="music-item">
                <div class="col-xs-11  music-item-play">
                    <img src="./static/img/music-item.png" alt="" height="60px" class="pull-left">
                    <p class="frist-p">Pay a rent</p>
                    <p class="second-p">Now</p>
                </div>
                <span class="glyphicon glyphicon-menu-right pull-right"></span>
            </div>
            <div class="col-xs-12 music-item-bg-div">
                <span class="glyphicon glyphicon-play"></span>
                <span class="glyphicon glyphicon-heart-empty"></span>
            </div>
            <div class="music-item">
                <div class="col-xs-11  music-item-play">
                    <img src="./static/img/music-item.png" alt="" height="60px" class="pull-left">
                    <p class="frist-p">Meeting with hotel company</p>
                    <p class="second-p">In 2 hours</p>
                </div>
                <span class="glyphicon glyphicon-menu-right pull-right"></span>
            </div>
            <div class="col-xs-12 music-item-bg-div">
                <span class="glyphicon glyphicon-play"></span>
                <span class="glyphicon glyphicon-heart-empty"></span>
            </div>
            <div class="music-item">
                <div class="col-xs-11  music-item-play">
                    <img src="./static/img/music-item.png" alt="" height="60px" class="pull-left">
                    <p class="frist-p">Buy some food</p>
                    <p class="second-p">In 6 hours</p>
                </div>
                <span class="glyphicon glyphicon-menu-right pull-right"></span>
            </div>
            <div class="col-xs-12 music-item-bg-div">
                <span class="glyphicon glyphicon-play"></span>
                <span class="glyphicon glyphicon-heart-empty"></span>
            </div>
            <div class="music-item">
                <div class="col-xs-11  music-item-play">
                    <img src="./static/img/music-item.png" alt="" height="60px" class="pull-left">
                    <p class="frist-p">Get some Beer</p>
                    <p class="second-p">In 7 hours</p>
                </div>
                <span class="glyphicon glyphicon-menu-right pull-right"></span>
            </div>
            <div class="col-xs-12 music-item-bg-div">
                <span class="glyphicon glyphicon-play"></span>
                <span class="glyphicon glyphicon-heart-empty"></span>
            </div>
            <div class="music-item">
                <div class="col-xs-11  music-item-play">
                    <img src="./static/img/music-item.png" alt="" height="60px" class="pull-left">
                    <p class="frist-p">Time to sleep</p>
                    <p class="second-p">In 9 hours</p>
                </div>
                <span class="glyphicon glyphicon-menu-right pull-right"></span>
            </div>
            <div class="col-xs-12 music-item-bg-div">
                <span class="glyphicon glyphicon-play"></span>
                <span class="glyphicon glyphicon-heart-empty"></span>
            </div>
            <div class="music-item">
                <div class="col-xs-11  music-item-play">
                    <img src="./static/img/music-item.png" alt="" height="60px" class="pull-left">
                    <p class="frist-p">Buy some food</p>
                    <p class="second-p">In 12 hours</p>
                </div>
                <span class="glyphicon glyphicon-menu-right pull-right"></span>
            </div>
            <div class="col-xs-12 music-item-bg-div">
                <span class="glyphicon glyphicon-play"></span>
                <span class="glyphicon glyphicon-heart-empty"></span>
            </div>
            <div class="music-item">
                <div class="col-xs-11  music-item-play">
                    <img src="./static/img/music-item.png" alt="" height="60px" class="pull-left">
                    <p class="frist-p">Get some Beer</p>
                    <p class="second-p">In 15 hours</p>
                </div>
                <span class="glyphicon glyphicon-menu-right pull-right"></span>
            </div>
            <div class="music-item">
            </div>
        </div>
        <div style="height: 5px;width: 78%;position: fixed;bottom: 0;background: linear-gradient(to right, rgb(240, 220, 64), rgb(140, 170, 64));border-radius: 15px;">
        </div>
    </main>

<!--     <main id="panel" style="height:100%;" v-show="detail_show">
    </main> -->

    <nav id="menu">
      <section class="menu-section">
        <ul class="menu-section-list">
            <li><a href="#"><span class="glyphicon glyphicon-user" ></span> </a><hr/></li>
            <li><a href="#"><span class="glyphicon glyphicon-heart" ></span> </a><hr/></li>
            <li><a href="#"><span class="glyphicon glyphicon-comment" ></span> </a><hr/></li>
            <li><a href="#"><span class="glyphicon glyphicon-bookmark" ></span> </a><hr/></li>
            <li><a href="#"><span class="glyphicon glyphicon-off" ></span> </a><hr/></li>
        </ul>
      </section>
    </nav>
</body>
<script src="/static/js/vue.min.js"></script>
<script src="http://cdn.bootcss.com/vue-router/0.7.13/vue-router.min.js"></script>

<script src="/static/js/zepto.min.js"></script>
<script src="/static/js/touch.js"></script>
<script src="/static/js/slideout.min.js"></script>
<script src="http://cdn.bootcss.com/Swiper/3.3.1/js/swiper.min.js"></script>
<script src="/static/js/index/index_main.js"></script>
<script src="/static/js/index/index_music_detail.js"></script>
<script src="/static/js/index/index_user_detail.js"></script>
<script src="/static/js/index/index_router.js"></script>
<script>


</script>

</html>