|
|
@@ -6,7 +6,7 @@
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Document</title>
|
|
|
<script src="./js/rem.js"></script>
|
|
|
- <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4824002_lqndx9h5b3d.css">
|
|
|
+ <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4824002_e22sgrscvlh.css">
|
|
|
<style>
|
|
|
body{
|
|
|
margin: 0;
|
|
|
@@ -56,6 +56,86 @@
|
|
|
color: #333;
|
|
|
border:1px solid #f0f0f0;
|
|
|
}
|
|
|
+ /* nav 部分 */
|
|
|
+ nav{
|
|
|
+ height: 1rem;
|
|
|
+ border-bottom: .02rem solid #aaa;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ nav .address{
|
|
|
+ font-size: .3rem;
|
|
|
+ color: #666;
|
|
|
+ padding-left: .3rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ nav .address i{
|
|
|
+ /* border:.3rem solid transparent; */
|
|
|
+ /* border: .1rem solid #666; */
|
|
|
+ border-top: .1rem solid #b0b0b0;
|
|
|
+ border-bottom: .1rem solid transparent;
|
|
|
+ border-left: .1rem solid transparent;
|
|
|
+ border-right: .1rem solid transparent;
|
|
|
+ display: block;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ transform: translate(.08rem,.08rem);
|
|
|
+ }
|
|
|
+ nav .tab-content{
|
|
|
+ flex-grow: 1;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ nav .tab-content::after{
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ height: .06rem;
|
|
|
+ width: 5.3vw;
|
|
|
+ background-color: #f03d37;
|
|
|
+ position: absolute;
|
|
|
+ bottom: .1rem;
|
|
|
+ border-radius: 2px;
|
|
|
+ transition: left .2s;
|
|
|
+ }
|
|
|
+ nav .tab-content[data-active="one"]::after{
|
|
|
+ left: 6vw;
|
|
|
+ }
|
|
|
+ nav .tab-content[data-active="two"]::after{
|
|
|
+ left: 20vw;
|
|
|
+ }
|
|
|
+ nav .tab-content[data-active="three"]::after{
|
|
|
+ left: 34vw;
|
|
|
+ }
|
|
|
+ nav .tab-content[data-active="four"]::after{
|
|
|
+ left: 51vw;
|
|
|
+ }
|
|
|
+ nav .tab-content ul{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 1rem;
|
|
|
+ margin-left: .2rem;
|
|
|
+ }
|
|
|
+ nav .tab-content li{
|
|
|
+ font-size: .3rem;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #666;
|
|
|
+ margin:0 .2rem;
|
|
|
+ }
|
|
|
+ nav .tab-content .active{
|
|
|
+ color: #333;
|
|
|
+ font-size: .34rem;
|
|
|
+ }
|
|
|
+ nav .search{
|
|
|
+ padding: .2rem .3rem .2rem .2rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ nav .search i{
|
|
|
+ color: #e54847;
|
|
|
+ font-size: .4rem;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
@@ -73,7 +153,24 @@
|
|
|
</ul>
|
|
|
</div>
|
|
|
</header>
|
|
|
- <nav></nav>
|
|
|
+ <nav>
|
|
|
+ <div class="address">
|
|
|
+ <span>北京</span>
|
|
|
+ <i></i>
|
|
|
+ </div>
|
|
|
+ <div class="tab-content" data-active="one">
|
|
|
+ <ul>
|
|
|
+ <li data-val="one" class="active">热映</li>
|
|
|
+ <li data-val="two" class="">影院</li>
|
|
|
+ <li data-val="three" >待映</li>
|
|
|
+ <li data-val="four">经典电影</li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="search">
|
|
|
+ <i class="iconfont icon-search"></i>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
<div class="content">
|
|
|
<div class="like-movie"></div>
|
|
|
<div class="movie-list"></div>
|
|
|
@@ -83,6 +180,9 @@
|
|
|
<script>
|
|
|
let menuBtn = document.querySelector('#menu-btn');
|
|
|
let menuList = document.querySelector('.menu-list');
|
|
|
+ let topTab = document.querySelectorAll('.tab-content ul li');
|
|
|
+ let topTabContent = document.querySelector(".tab-content");
|
|
|
+
|
|
|
menuBtn.ontouchstart = function(){
|
|
|
let thisStata = menuList.style.display;
|
|
|
if(thisStata == 'none'){
|
|
|
@@ -91,6 +191,20 @@
|
|
|
menuList.style.display = 'none';
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ // 为顶部tab绑定点击事件
|
|
|
+ topTab.forEach((element) => {
|
|
|
+ element.ontouchstart = function(){
|
|
|
+ // 1. 清除所有tab的active类名
|
|
|
+ topTab.forEach((item) => {
|
|
|
+ item.classList.remove("active");
|
|
|
+ })
|
|
|
+ // 2. 给当前点击的tab添加active类名
|
|
|
+ this.classList.add("active");
|
|
|
+ // 3. 给当前点击的tab添加data-active属性
|
|
|
+ topTabContent.setAttribute('data-active', this.dataset.val);
|
|
|
+ }
|
|
|
+ });
|
|
|
</script>
|
|
|
</body>
|
|
|
|
