|
|
@@ -6,20 +6,27 @@
|
|
|
<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_e22sgrscvlh.css">
|
|
|
+ <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4824002_f2s79t2nzw.css">
|
|
|
<style>
|
|
|
- body{
|
|
|
+ body {
|
|
|
margin: 0;
|
|
|
}
|
|
|
- ul{
|
|
|
+
|
|
|
+ ul {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
- li{
|
|
|
+
|
|
|
+ li {
|
|
|
list-style: none;
|
|
|
}
|
|
|
+ ::-webkit-scrollbar{
|
|
|
+ display: none;
|
|
|
+ height: 0;
|
|
|
+ width: 0;
|
|
|
+ }
|
|
|
|
|
|
- .container header{
|
|
|
+ .container header {
|
|
|
width: 100%;
|
|
|
height: 1rem;
|
|
|
background-color: #e54847;
|
|
|
@@ -28,49 +35,56 @@
|
|
|
align-items: center;
|
|
|
position: relative;
|
|
|
}
|
|
|
- .container header span{
|
|
|
+
|
|
|
+ .container header span {
|
|
|
font-size: .3rem;
|
|
|
color: #fff;
|
|
|
}
|
|
|
- .container header i{
|
|
|
+
|
|
|
+ .container header i {
|
|
|
position: absolute;
|
|
|
right: 20px;
|
|
|
- top:50%;
|
|
|
+ top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
color: #fff;
|
|
|
font-size: .5rem;
|
|
|
}
|
|
|
- .container .menu-list{
|
|
|
+
|
|
|
+ .container .menu-list {
|
|
|
width: 2rem;
|
|
|
background-color: #fff;
|
|
|
- box-shadow: 0 .06rem .18rem 0 rgba(0,0,0,.5);
|
|
|
+ box-shadow: 0 .06rem .18rem 0 rgba(0, 0, 0, .5);
|
|
|
position: absolute;
|
|
|
top: .9rem;
|
|
|
right: .9rem;
|
|
|
}
|
|
|
- .container .menu-list li{
|
|
|
+
|
|
|
+ .container .menu-list li {
|
|
|
font-size: .3rem;
|
|
|
text-align: center;
|
|
|
height: 0.9rem;
|
|
|
line-height: .9rem;
|
|
|
color: #333;
|
|
|
- border:1px solid #f0f0f0;
|
|
|
+ border: 1px solid #f0f0f0;
|
|
|
}
|
|
|
+
|
|
|
/* nav 部分 */
|
|
|
- nav{
|
|
|
+ nav {
|
|
|
height: 1rem;
|
|
|
border-bottom: .02rem solid #aaa;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
- nav .address{
|
|
|
+
|
|
|
+ nav .address {
|
|
|
font-size: .3rem;
|
|
|
color: #666;
|
|
|
padding-left: .3rem;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
- nav .address i{
|
|
|
+
|
|
|
+ nav .address i {
|
|
|
/* border:.3rem solid transparent; */
|
|
|
/* border: .1rem solid #666; */
|
|
|
border-top: .1rem solid #b0b0b0;
|
|
|
@@ -80,13 +94,15 @@
|
|
|
display: block;
|
|
|
width: 0;
|
|
|
height: 0;
|
|
|
- transform: translate(.08rem,.08rem);
|
|
|
+ transform: translate(.08rem, .08rem);
|
|
|
}
|
|
|
- nav .tab-content{
|
|
|
+
|
|
|
+ nav .tab-content {
|
|
|
flex-grow: 1;
|
|
|
position: relative;
|
|
|
}
|
|
|
- nav .tab-content::after{
|
|
|
+
|
|
|
+ nav .tab-content::after {
|
|
|
content: '';
|
|
|
display: block;
|
|
|
height: .06rem;
|
|
|
@@ -97,45 +113,137 @@
|
|
|
border-radius: 2px;
|
|
|
transition: left .2s;
|
|
|
}
|
|
|
- nav .tab-content[data-active="one"]::after{
|
|
|
+
|
|
|
+ nav .tab-content[data-active="one"]::after {
|
|
|
left: 6vw;
|
|
|
}
|
|
|
- nav .tab-content[data-active="two"]::after{
|
|
|
+
|
|
|
+ nav .tab-content[data-active="two"]::after {
|
|
|
left: 20vw;
|
|
|
}
|
|
|
- nav .tab-content[data-active="three"]::after{
|
|
|
+
|
|
|
+ nav .tab-content[data-active="three"]::after {
|
|
|
left: 34vw;
|
|
|
}
|
|
|
- nav .tab-content[data-active="four"]::after{
|
|
|
+
|
|
|
+ nav .tab-content[data-active="four"]::after {
|
|
|
left: 51vw;
|
|
|
}
|
|
|
- nav .tab-content ul{
|
|
|
+
|
|
|
+ nav .tab-content ul {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
height: 1rem;
|
|
|
margin-left: .2rem;
|
|
|
}
|
|
|
- nav .tab-content li{
|
|
|
+
|
|
|
+ nav .tab-content li {
|
|
|
font-size: .3rem;
|
|
|
font-weight: 700;
|
|
|
color: #666;
|
|
|
- margin:0 .2rem;
|
|
|
+ margin: 0 .2rem;
|
|
|
}
|
|
|
- nav .tab-content .active{
|
|
|
+
|
|
|
+ nav .tab-content .active {
|
|
|
color: #333;
|
|
|
font-size: .34rem;
|
|
|
}
|
|
|
- nav .search{
|
|
|
+
|
|
|
+ nav .search {
|
|
|
padding: .2rem .3rem .2rem .2rem;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
- nav .search i{
|
|
|
+
|
|
|
+ nav .search i {
|
|
|
color: #e54847;
|
|
|
font-size: .4rem;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
+ /* footer css */
|
|
|
+ footer {
|
|
|
+ height: 1rem;
|
|
|
+ border-top: .01rem solid #aaa;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100vw;
|
|
|
+ }
|
|
|
+ footer ul{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+ footer ul span{
|
|
|
+ font-size: .2rem;
|
|
|
+ }
|
|
|
+ footer ul li{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 1rem;
|
|
|
+ color: #696969;
|
|
|
+
|
|
|
+ }
|
|
|
+ footer ul .iconfont{
|
|
|
+ font-size: .4rem;
|
|
|
+ }
|
|
|
+ footer ul .active{
|
|
|
+ color: #f03d37;
|
|
|
+ }
|
|
|
+ /* like-movie css */
|
|
|
+ .content .like-movie{
|
|
|
+ padding:12px 15px;
|
|
|
+ }
|
|
|
+ .content .like-movie .title-text{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+ .content .like-movie .scroll-content{
|
|
|
+ width: 100%;
|
|
|
+ overflow: scroll;
|
|
|
+ }
|
|
|
+ .content .like-movie-list ul{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .content .like-movie-list li{
|
|
|
+ width: 85px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .content .like-movie-list img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .content .like-movie .img-content{
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ height: 115px;
|
|
|
+ }
|
|
|
+ .content .like-movie .opcity-bg{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ height: 35px;
|
|
|
+ width: 100%;
|
|
|
+ background-image: linear-gradient(rgba(77,77,77,0),#000);
|
|
|
+ }
|
|
|
+ .content .like-movie .rate-text{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 2px;
|
|
|
+ left: 4px;
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #faaf00;
|
|
|
+ }
|
|
|
+ .content .like-movie .movie-title{
|
|
|
+ font-size: 13px;
|
|
|
+ color: #222;
|
|
|
+ font-weight: bold;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
@@ -162,7 +270,7 @@
|
|
|
<ul>
|
|
|
<li data-val="one" class="active">热映</li>
|
|
|
<li data-val="two" class="">影院</li>
|
|
|
- <li data-val="three" >待映</li>
|
|
|
+ <li data-val="three">待映</li>
|
|
|
<li data-val="four">经典电影</li>
|
|
|
</ul>
|
|
|
|
|
|
@@ -172,29 +280,113 @@
|
|
|
</div>
|
|
|
</nav>
|
|
|
<div class="content">
|
|
|
- <div class="like-movie"></div>
|
|
|
+ <div class="like-movie">
|
|
|
+ <div class="title-text">最受好评电影</div>
|
|
|
+ <div class="scroll-content">
|
|
|
+ <div class="like-movie-list">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <div class="img-content">
|
|
|
+ <img src="./img/nz.jpg" alt="">
|
|
|
+ <div class="opcity-bg"></div>
|
|
|
+ <div class="rate-text">观众评分 9.7</div>
|
|
|
+ </div>
|
|
|
+ <div class="movie-title">哪吒之魔童闹海</div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="img-content">
|
|
|
+ <img src="./img/nz.jpg" alt="">
|
|
|
+ <div class="opcity-bg"></div>
|
|
|
+ <div class="rate-text">观众评分 9.7</div>
|
|
|
+ </div>
|
|
|
+ <div class="movie-title">哪吒之魔童闹海</div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="img-content">
|
|
|
+ <img src="./img/nz.jpg" alt="">
|
|
|
+ <div class="opcity-bg"></div>
|
|
|
+ <div class="rate-text">观众评分 9.7</div>
|
|
|
+ </div>
|
|
|
+ <div class="movie-title">哪吒之魔童闹海</div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="img-content">
|
|
|
+ <img src="./img/nz.jpg" alt="">
|
|
|
+ <div class="opcity-bg"></div>
|
|
|
+ <div class="rate-text">观众评分 9.7</div>
|
|
|
+ </div>
|
|
|
+ <div class="movie-title">哪吒之魔童闹海</div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="img-content">
|
|
|
+ <img src="./img/nz.jpg" alt="">
|
|
|
+ <div class="opcity-bg"></div>
|
|
|
+ <div class="rate-text">观众评分 9.7</div>
|
|
|
+ </div>
|
|
|
+ <div class="movie-title">哪吒之魔童闹海</div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="img-content">
|
|
|
+ <img src="./img/nz.jpg" alt="">
|
|
|
+ <div class="opcity-bg"></div>
|
|
|
+ <div class="rate-text">观众评分 9.7</div>
|
|
|
+ </div>
|
|
|
+ <div class="movie-title">哪吒之魔童闹海</div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="img-content">
|
|
|
+ <img src="./img/nz.jpg" alt="">
|
|
|
+ <div class="opcity-bg"></div>
|
|
|
+ <div class="rate-text">观众评分 9.7</div>
|
|
|
+ </div>
|
|
|
+ <div class="movie-title">哪吒之魔童闹海</div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="movie-list"></div>
|
|
|
</div>
|
|
|
- <footer></footer>
|
|
|
+ <footer>
|
|
|
+ <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-wode"></i>
|
|
|
+ <span>我的</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </footer>
|
|
|
</div>
|
|
|
<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 footerTab = document.querySelectorAll('footer li');
|
|
|
+
|
|
|
+ menuBtn.ontouchstart = function () {
|
|
|
let thisStata = menuList.style.display;
|
|
|
- if(thisStata == 'none'){
|
|
|
+ if (thisStata == 'none') {
|
|
|
menuList.style.display = 'block';
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
menuList.style.display = 'none';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 为顶部tab绑定点击事件
|
|
|
topTab.forEach((element) => {
|
|
|
- element.ontouchstart = function(){
|
|
|
+ element.ontouchstart = function () {
|
|
|
let thisVal = this.dataset.val;
|
|
|
location.hash = thisVal;
|
|
|
changeTopTab(thisVal)
|
|
|
@@ -212,18 +404,18 @@
|
|
|
|
|
|
|
|
|
// 监听地址栏hash值的变化
|
|
|
- window.onhashchange = function(){
|
|
|
+ window.onhashchange = function () {
|
|
|
let hash = location.hash.slice(1);
|
|
|
changeTopTab(hash);
|
|
|
}
|
|
|
|
|
|
// 切换topTab选中状态
|
|
|
- function changeTopTab(val){
|
|
|
+ function changeTopTab(val) {
|
|
|
// 1.为topTab添加选中状态
|
|
|
topTab.forEach((element) => {
|
|
|
- if(element.dataset.val == val){
|
|
|
+ if (element.dataset.val == val) {
|
|
|
element.classList.add("active");
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
element.classList.remove("active");
|
|
|
}
|
|
|
});
|
|
|
@@ -231,6 +423,17 @@
|
|
|
topTabContent.setAttribute('data-active', val);
|
|
|
|
|
|
}
|
|
|
+
|
|
|
+ // 为footer绑定点击事件
|
|
|
+ footerTab.forEach((element) => {
|
|
|
+ element.addEventListener("touchstart", function () {
|
|
|
+ // 1. 清除所有footer的active类名
|
|
|
+ footerTab.forEach((item) => {
|
|
|
+ item.classList.remove("active");
|
|
|
+ })
|
|
|
+ this.classList.add("active");
|
|
|
+ })
|
|
|
+ })
|
|
|
</script>
|
|
|
</body>
|
|
|
|
