From 942aa3bbbcb0b8ecb629ff8203f78fcde01b444e Mon Sep 17 00:00:00 2001
From: landjj321 <landjj321@126.com>
Date: Thu, 25 Mar 2021 08:32:17 +0800
Subject: [PATCH] update:世界电影2
---
src/views/film/film_china.vue | 284 +++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 246 insertions(+), 38 deletions(-)
diff --git a/src/views/film/film_china.vue b/src/views/film/film_china.vue
index fa8aceb..0f56a5f 100644
--- a/src/views/film/film_china.vue
+++ b/src/views/film/film_china.vue
@@ -225,8 +225,7 @@
<div class="programa wrapper">
<div class="programa-nav">
-
- <div class="programa-nav-title">经典影视</div>
+ <div class="programa-nav-title">科幻</div>
<div class="programa-nav-item">
<span>猜你喜欢</span>
<span>推荐排行</span>
@@ -238,49 +237,152 @@
</div>
- <div class="programa-content">
- <div class="programa-film">
- <img src="../../assets/film/film.png" alt="">
- <p class="film-name">阿甘正传</p>
- <p class="film-des">豆瓣高分电影</p>
+ <div class="programa-content4">
+ <div class="programa-film-group">
+ <div class="programa-film">
+ <img src="../../assets/film/film31.png" alt="">
+ <p class="film-name">阿甘正传</p>
+ <p class="film-des">豆瓣高分电影</p>
+ </div>
+ <div class="programa-film">
+ <img src="../../assets/film/film33.png" alt="">
+ <p class="film-name">阿甘正传</p>
+ <p class="film-des">豆瓣高分电影</p>
+ </div>
+ <div class="programa-film">
+ <img src="../../assets/film/film33.png" alt="">
+ <p class="film-name">阿甘正传</p>
+ <p class="film-des">豆瓣高分电影</p>
+ </div>
+ <div class="programa-film">
+ <img src="../../assets/film/film34.png" alt="">
+ <p class="film-name">阿甘正传</p>
+ <p class="film-des">豆瓣高分电影</p>
+ </div>
+ <div class="programa-film">
+ <img src="../../assets/film/film36.png" alt="">
+ <p class="film-name">阿甘正传</p>
+ <p class="film-des">豆瓣高分电影</p>
+ </div>
+ <div class="programa-film">
+ <img src="../../assets/film/film36.png" alt="">
+ <p class="film-name">阿甘正传</p>
+ <p class="film-des">豆瓣高分电影</p>
+ </div>
+ <div class="programa-film">
+ <img src="../../assets/film/film37.png" alt="">
+ <p class="film-name">阿甘正传</p>
+ <p class="film-des">豆瓣高分电影</p>
+ </div>
+ <div class="programa-film">
+ <img src="../../assets/film/film38.png" alt="">
+ <p class="film-name">阿甘正传</p>
+ <p class="film-des">豆瓣高分电影</p>
+ </div>
</div>
+ <div class="programa-film-rank">
+ <div class="programa-rank-header">
+ <div class="tab1">热播放</div>
+ <div class="tab2">飙升榜</div>
+ <div class="tab3">更多></div>
+ </div>
+ <div class="programa-film-rank-list">
+ <div class="rank-list-item">
+ <img class="sort" src="../../assets/film/first.png" alt="">
+ <div class="info">
+ <p>欢乐喜剧人</p>
+ <p>01-18期</p>
+ </div>
+ <img class="stars" src="../../assets/film/star.png" alt="">
+ </div>
+ <div class="rank-list-item">
+ <img class="sort" src="../../assets/film/second.png" alt="">
+ <div class="info">
+ <p>欢乐喜剧人</p>
+ <p>01-18期</p>
+ </div>
+ <img class="stars" src="../../assets/film/star.png" alt="">
+ </div>
+ <div class="rank-list-item">
+ <img class="sort" src="../../assets/film/third.png" alt="">
+ <div class="info">
+ <p>欢乐喜剧人</p>
+ <p>01-18期</p>
+ </div>
+ <img class="stars" src="../../assets/film/star.png" alt="">
+ </div>
+ <div class="rank-list-item">
+ <img class="sort" src="../../assets/film/fourth.png" alt="">
+ <div class="info">
+ <p>欢乐喜剧人</p>
+ <p>01-18期</p>
+ </div>
+ <img class="stars" src="../../assets/film/star.png" alt="">
+ </div>
+ <div class="rank-list-item">
+ <img class="sort" src="../../assets/film/fifth.png" alt="">
+ <div class="info">
+ <p>欢乐喜剧人</p>
+ <p>01-18期</p>
+ </div>
+ <img class="stars" src="../../assets/film/star.png" alt="">
+ </div>
+ <div class="rank-list-item">
+ <img class="sort" src="../../assets/film/fifth.png" alt="">
+ <div class="info">
+ <p>欢乐喜剧人</p>
+ <p>01-18期</p>
+ </div>
+ <img class="stars" src="../../assets/film/star.png" alt="">
+ </div>
+ <div class="rank-list-item">
+ <img class="sort" src="../../assets/film/fifth.png" alt="">
+ <div class="info">
+ <p>欢乐喜剧人</p>
+ <p>01-18期</p>
+ </div>
+ <img class="stars" src="../../assets/film/star.png" alt="">
+ </div>
+ <div class="rank-list-item">
+ <img class="sort" src="../../assets/film/fifth.png" alt="">
+ <div class="info">
+ <p>欢乐喜剧人</p>
+ <p>01-18期</p>
+ </div>
+ <img class="stars" src="../../assets/film/star.png" alt="">
+ </div>
+ <div class="rank-list-item">
+ <img class="sort" src="../../assets/film/fifth.png" alt="">
+ <div class="info">
+ <p>欢乐喜剧人</p>
+ <p>01-18期</p>
+ </div>
+ <img class="stars" src="../../assets/film/star.png" alt="">
+ </div>
+ <div class="rank-list-item">
+ <img class="sort" src="../../assets/film/fifth.png" alt="">
+ <div class="info">
+ <p>欢乐喜剧人</p>
+ <p>01-18期</p>
+ </div>
+ <img class="stars" src="../../assets/film/star.png" alt="">
+ </div>
+ </div>
- <div class="programa-film">
- <img src="../../assets/film/film.png" alt="">
- <p class="film-name">阿甘正传</p>
- <p class="film-des">豆瓣高分电影</p>
</div>
-
- <div class="programa-film">
- <img src="../../assets/film/film.png" alt="">
- <p class="film-name">阿甘正传</p>
- <p class="film-des">豆瓣高分电影</p>
- </div>
-
- <div class="programa-film">
- <img src="../../assets/film/film.png" alt="">
- <p class="film-name">阿甘正传</p>
- <p class="film-des">豆瓣高分电影</p>
- </div>
-
- <div class="programa-film">
- <img src="../../assets/film/film.png" alt="">
- <p class="film-name">阿甘正传</p>
- <p class="film-des">豆瓣高分电影</p>
- </div>
-
- <div class="programa-film">
- <img src="../../assets/film/film.png" alt="">
- <p class="film-name">阿甘正传</p>
- <p class="film-des">豆瓣高分电影</p>
- </div>
-
-
</div>
+
+
+
+
</div>
-
</div>
+
+ <div class="footer">
+ 版权 @ 解放军文化艺术中心
+ </div>
+
</div>
</template>
@@ -570,12 +672,118 @@
}
}
}
+ .programa-content4{
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ width: 1200px;
+ margin-top: 20px;
+ .programa-film-group {
+ width: 900px;
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ .programa-film {
+ width: 220px;
+ font-size: 12px;
+
+ img {
+ width: 190px;
+ }
+
+ .film-name {
+ color: #fff;
+ margin: 5px 8px;
+ }
+
+ .film-des {
+ margin: 5px 8px;
+ color: rgba(255, 255, 255, 0.5);
+ }
+ }
+ }
+ .programa-film-rank{
+ width: 300px;
+ position: relative;
+ top: -50px;
+ .programa-rank-header{
+ display: flex;
+ flex-direction: row;
+ color: #fff;
+ align-items: center;
+ .tab1{
+ width: 80px;
+ height: 22px;
+ background: rgba(255,255,255,0.3);
+ line-height: 22px;
+ text-align: center;
+ border-radius: 10px;
+ color: #58E62C;
+ font-weight: 600;
+
+ }
+ .tab2{
+ width: 80px;
+ height: 22px;
+ line-height: 22px;
+ border-radius: 10px;
+ text-align: center;
+ font-size: 14px;
+ }
+ .tab3{
+ margin-left: 40px;
+ font-size: 12px;
+ color: rgba(255,255,255,0.3);
+ }
+
+ }
+ .programa-film-rank-list{
+ .rank-list-item{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin-top: 10px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid rgba(255,255,255,0.3);
+ .sort{
+ margin-left: 10px;
+ width: 30px;
+ }
+ .info{
+ margin-left: 40px;
+ p{
+ color: rgba(2552,255,255,0.3);
+ font-size: 12px;
+ margin-top: 2px;
+ margin-bottom: 2px;
+ }
+ }
+ .stars{
+ width: 50px;
+ margin-left: 30px;
+
+ }
+
+ }
+ }
+ }
+ }
}
}
+
+ .footer{
+ height: 74px;
+ background: #313131;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #808080;
+ }
+
}
</style>
--
Gitblit v1.8.0