|
|
@@ -6,6 +6,7 @@
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Document</title>
|
|
|
<script src="./rem.js"></script>
|
|
|
+ <link rel="stylesheet" href="./css/iconfont.css">
|
|
|
<style>
|
|
|
body {
|
|
|
margin: 0;
|
|
|
@@ -25,6 +26,12 @@
|
|
|
}
|
|
|
|
|
|
/* 头部 */
|
|
|
+ .top-head{
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100vw;
|
|
|
+ }
|
|
|
.top-head header {
|
|
|
background-color: #e54847;
|
|
|
height: 0.7rem;
|
|
|
@@ -80,6 +87,7 @@
|
|
|
justify-content: space-between;
|
|
|
padding: 0 .2rem;
|
|
|
align-items: center;
|
|
|
+ background-color: #fff;
|
|
|
}
|
|
|
|
|
|
.top-head .nav-center {
|
|
|
@@ -158,6 +166,42 @@
|
|
|
border-bottom: 5px solid transparent;
|
|
|
transform: translate(3px, 3px);
|
|
|
}
|
|
|
+ /* 底部导航 */
|
|
|
+ .bottom-nav{
|
|
|
+ height: 1rem;
|
|
|
+ width: 100vw;
|
|
|
+ border-top: .01rem solid #d8d8d8;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .bottom-nav ul{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .bottom-nav ul li{
|
|
|
+ flex-grow: 1;
|
|
|
+ height: 1rem;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #696969;
|
|
|
+ }
|
|
|
+ .bottom-nav ul .active{
|
|
|
+ color: #f03d37;
|
|
|
+ }
|
|
|
+ .bottom-nav ul li span{
|
|
|
+ font-size: .2rem;
|
|
|
+ }
|
|
|
+ .bottom-nav li i{
|
|
|
+ font-size: .5rem;
|
|
|
+ }
|
|
|
+ /* 中间内容区域 */
|
|
|
+ .center-content{
|
|
|
+ padding-top: 1.6rem;
|
|
|
+ padding-bottom: 1rem;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
@@ -195,8 +239,53 @@
|
|
|
</div>
|
|
|
</nav>
|
|
|
</div>
|
|
|
- <div class="center-content"></div>
|
|
|
- <div class="bottom-nav"></div>
|
|
|
+ <div class="center-content">
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ <p>这是一段文字</p>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-nav">
|
|
|
+ <ul>
|
|
|
+ <li class="active">
|
|
|
+ <i class="iconfont icon-dianying"></i>
|
|
|
+ <span>电影/影院</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-shipin-"></i>
|
|
|
+ <span>视频</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-yanchu"></i>
|
|
|
+ <span>演出</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-yonghu"></i>
|
|
|
+ <span>我的</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<script>
|
|
|
let listBtn = document.querySelector("#list-btn");
|
|
|
@@ -244,7 +333,20 @@
|
|
|
navList[0].classList.add("active");
|
|
|
}
|
|
|
}
|
|
|
- </script>
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 底部导航点击事件
|
|
|
+ */
|
|
|
+ let bottomNavLi = document.querySelector(".bottom-nav").querySelectorAll("li");
|
|
|
+ for(let i=0;i<bottomNavLi.length;i++){
|
|
|
+ bottomNavLi[i].ontouchstart = function(){
|
|
|
+ for(let j=0;j<bottomNavLi.length;j++){
|
|
|
+ bottomNavLi[j].classList.remove("active");
|
|
|
+ }
|
|
|
+ this.classList.add("active");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
</body>
|
|
|
|
|
|
</html>
|
