From 62c56fc8fee82b73f8fffd91f828ccea21d29e60 Mon Sep 17 00:00:00 2001
From: landjj321 <landjj321@126.com>
Date: Thu, 25 Mar 2021 09:04:07 +0800
Subject: [PATCH] update:中国电影
---
src/views/film/film_china.vue | 119 ++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 68 insertions(+), 51 deletions(-)
diff --git a/src/views/film/film_china.vue b/src/views/film/film_china.vue
index 0f56a5f..e8559d4 100644
--- a/src/views/film/film_china.vue
+++ b/src/views/film/film_china.vue
@@ -24,7 +24,7 @@
<span class="banner-nav-router"> > </span>
<span class="banner-nav-router">文艺世界</span>
<span class="banner-nav-router"> > </span>
- <span class="banner-nav-router">影视</span>
+ <span class="banner-nav-router">中国影视</span>
</div>
<img src="../../assets/film/film_logo.png" class="film_logo">
@@ -40,12 +40,13 @@
<div class="banner-category">
- <div class="banner-category-dot">美国</div>
- <div class="banner-category-dot">俄罗斯</div>
- <div class="banner-category-dot">欧洲</div>
- <div class="banner-category-dot">日本</div>
- <div class="banner-category-dot">韩国</div>
- <div class="banner-category-dot">其他</div>
+ <div class="banner-category-dot">喜剧</div>
+ <div class="banner-category-dot">爱情</div>
+ <div class="banner-category-dot">动作</div>
+ <div class="banner-category-dot">战争</div>
+ <div class="banner-category-dot">悬疑</div>
+ <div class="banner-category-dot">青春</div>
+ <div class="banner-category-dot">动画</div>
</div>
</div>
@@ -54,7 +55,7 @@
<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>
@@ -68,37 +69,37 @@
<div class="programa-content">
<div class="programa-film">
- <img src="../../assets/film/film.png" alt="">
+ <img src="../../assets/film/film_cn_1.png" alt="">
<p class="film-name">阿甘正传</p>
<p class="film-des">豆瓣高分电影</p>
</div>
<div class="programa-film">
- <img src="../../assets/film/film2.png" alt="">
+ <img src="../../assets/film/film_cn_2.png" alt="">
<p class="film-name">灰列犬号</p>
<p class="film-des">豆瓣高分电影</p>
</div>
<div class="programa-film">
- <img src="../../assets/film/film3.png" alt="">
+ <img src="../../assets/film/film_cn_3.png" alt="">
<p class="film-name">黑鹰堕落</p>
<p class="film-des">豆瓣高分电影</p>
</div>
<div class="programa-film">
- <img src="../../assets/film/film.png" alt="">
+ <img src="../../assets/film/film_cn_4.png" alt="">
<p class="film-name">阿甘正传</p>
<p class="film-des">豆瓣高分电影</p>
</div>
<div class="programa-film">
- <img src="../../assets/film/film.png" alt="">
+ <img src="../../assets/film/film_cn_5.png" alt="">
<p class="film-name">阿甘正传</p>
<p class="film-des">豆瓣高分电影</p>
</div>
<div class="programa-film">
- <img src="../../assets/film/film.png" alt="">
+ <img src="../../assets/film/film_cn_6.png" alt="">
<p class="film-name">阿甘正传</p>
<p class="film-des">豆瓣高分电影</p>
</div>
@@ -108,10 +109,9 @@
</div>
<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>
@@ -122,41 +122,40 @@
</div>
</div>
-
<div class="programa-content2">
<div class="programa-film2">
- <img src="../../assets/film/film.png" alt="">
+ <img src="../../assets/film/film_cn_21.png" alt="">
<p class="film-name">阿甘正传</p>
<p class="film-des">豆瓣高分电影</p>
</div>
<div class="programa-film-group">
<div class="programa-film">
- <img src="../../assets/film/film.png" alt="">
+ <img src="../../assets/film/film_cn_22.png" alt="">
<p class="film-name">阿甘正传</p>
<p class="film-des">豆瓣高分电影</p>
</div>
<div class="programa-film">
- <img src="../../assets/film/film.png" alt="">
+ <img src="../../assets/film/film_cn_23.png" alt="">
<p class="film-name">阿甘正传</p>
<p class="film-des">豆瓣高分电影</p>
</div>
<div class="programa-film">
- <img src="../../assets/film/film.png" alt="">
+ <img src="../../assets/film/film_cn_24.png" alt="">
<p class="film-name">阿甘正传</p>
<p class="film-des">豆瓣高分电影</p>
</div>
<div class="programa-film">
- <img src="../../assets/film/film.png" alt="">
+ <img src="../../assets/film/film_cn_25.png" alt="">
<p class="film-name">阿甘正传</p>
<p class="film-des">豆瓣高分电影</p>
</div>
<div class="programa-film">
- <img src="../../assets/film/film.png" alt="">
+ <img src="../../assets/film/film_cn_26.png" alt="">
<p class="film-name">阿甘正传</p>
<p class="film-des">豆瓣高分电影</p>
</div>
<div class="programa-film">
- <img src="../../assets/film/film.png" alt="">
+ <img src="../../assets/film/film_cn_27.png" alt="">
<p class="film-name">阿甘正传</p>
<p class="film-des">豆瓣高分电影</p>
</div>
@@ -216,16 +215,12 @@
</div>
</div>
-
-
-
-
</div>
<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,6 +233,9 @@
</div>
<div class="programa-content4">
+
+
+
<div class="programa-film-group">
<div class="programa-film">
<img src="../../assets/film/film31.png" alt="">
@@ -259,25 +257,17 @@
<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 class="programa-film-main">
+ <img src="../../assets/film/film_cn_3_main.png" alt="">
+ <div class="des">
+ <h1>送你一朵小红花</h1>
+ <p>标签： 家庭 喜剧 普通话</p>
+ <p>主演： 易洋千玺/刘浩存/朱媛媛</p>
+ <p>两个抗癌家庭，两组生活轨迹。影片讲述了一个温情的现</p>
+ <p>实故事，思考和直面每一个普通人都会面临的终极问题……</p>
</div>
</div>
<div class="programa-film-rank">
@@ -492,7 +482,7 @@
.banner-category{
position: absolute;
- bottom: 20px;
+ bottom: 30px;
left: 0;
right: 0;
width: 800px;
@@ -642,6 +632,7 @@
}
.programa-film-rank-list{
+
.rank-list-item{
display: flex;
flex-direction: row;
@@ -679,13 +670,39 @@
width: 1200px;
margin-top: 20px;
+ .programa-film-main{
+ margin-right: 20px;
+ width: 480px;
+ display: flex;
+ flex-direction: column;
+ img{
+ width: 480px;
+ }
+ .des{
+ background: rgba(0,0,0,0.3);
+ padding: 20px;
+ h1{
+ color: #fff;
+ font-size: 20px;
+ margin: 0;
+ margin-bottom: 20px;
+ }
+ p{
+ font-size: 14px;
+ color: #ccc;
+ margin: 10px 0;
+ }
+ }
+
+
+ }
.programa-film-group {
- width: 900px;
+ width: 400px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
.programa-film {
- width: 220px;
+ width: 200px;
font-size: 12px;
img {
--
Gitblit v1.8.0