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/assets/film/film_cn_6.png | 0
src/assets/film/film_cn_25.png | 0
src/assets/film/banner1_cn.png | 0
src/assets/film/film_cn_22.png | 0
src/assets/film/film_cn_3.png | 0
src/assets/film/f里\m_cn_.png | 0
src/router/index.js | 5
src/views/film/film_china.vue | 119 ++++---
src/assets/film/film_cn_1.png | 0
src/assets/film/film_cn_26.png | 0
src/assets/film/film_cn_5.png | 0
src/assets/film/film_cn_24.png | 0
src/views/film/film_world.vue | 789 +++++++++++++++++++++++++++++++++++++++++++++++++
src/assets/film/film_cn_21.png | 0
src/assets/film/film_cn_23.png | 0
src/assets/film/film_cn_27.png | 0
src/assets/film/film_cn_4.png | 0
src/assets/film/film_cn_2.png | 0
src/assets/film/film_cn_3_main.png | 0
19 files changed, 862 insertions(+), 51 deletions(-)
diff --git a/src/assets/film/banner1_cn.png b/src/assets/film/banner1_cn.png
new file mode 100644
index 0000000..9ffe15d
--- /dev/null
+++ b/src/assets/film/banner1_cn.png
Binary files differ
diff --git a/src/assets/film/film_cn_1.png b/src/assets/film/film_cn_1.png
new file mode 100644
index 0000000..68c48d9
--- /dev/null
+++ b/src/assets/film/film_cn_1.png
Binary files differ
diff --git a/src/assets/film/film_cn_2.png b/src/assets/film/film_cn_2.png
new file mode 100644
index 0000000..5ec4261
--- /dev/null
+++ b/src/assets/film/film_cn_2.png
Binary files differ
diff --git a/src/assets/film/film_cn_21.png b/src/assets/film/film_cn_21.png
new file mode 100644
index 0000000..dc42162
--- /dev/null
+++ b/src/assets/film/film_cn_21.png
Binary files differ
diff --git a/src/assets/film/film_cn_22.png b/src/assets/film/film_cn_22.png
new file mode 100644
index 0000000..04ef07f
--- /dev/null
+++ b/src/assets/film/film_cn_22.png
Binary files differ
diff --git a/src/assets/film/film_cn_23.png b/src/assets/film/film_cn_23.png
new file mode 100644
index 0000000..b16fbc2
--- /dev/null
+++ b/src/assets/film/film_cn_23.png
Binary files differ
diff --git a/src/assets/film/film_cn_24.png b/src/assets/film/film_cn_24.png
new file mode 100644
index 0000000..431a655
--- /dev/null
+++ b/src/assets/film/film_cn_24.png
Binary files differ
diff --git a/src/assets/film/film_cn_25.png b/src/assets/film/film_cn_25.png
new file mode 100644
index 0000000..692652c
--- /dev/null
+++ b/src/assets/film/film_cn_25.png
Binary files differ
diff --git a/src/assets/film/film_cn_26.png b/src/assets/film/film_cn_26.png
new file mode 100644
index 0000000..6ec60ee
--- /dev/null
+++ b/src/assets/film/film_cn_26.png
Binary files differ
diff --git a/src/assets/film/film_cn_27.png b/src/assets/film/film_cn_27.png
new file mode 100644
index 0000000..39855a5
--- /dev/null
+++ b/src/assets/film/film_cn_27.png
Binary files differ
diff --git a/src/assets/film/film_cn_3.png b/src/assets/film/film_cn_3.png
new file mode 100644
index 0000000..3521450
--- /dev/null
+++ b/src/assets/film/film_cn_3.png
Binary files differ
diff --git a/src/assets/film/film_cn_3_main.png b/src/assets/film/film_cn_3_main.png
new file mode 100644
index 0000000..93ddd9f
--- /dev/null
+++ b/src/assets/film/film_cn_3_main.png
Binary files differ
diff --git a/src/assets/film/film_cn_4.png b/src/assets/film/film_cn_4.png
new file mode 100644
index 0000000..d34ac7c
--- /dev/null
+++ b/src/assets/film/film_cn_4.png
Binary files differ
diff --git a/src/assets/film/film_cn_5.png b/src/assets/film/film_cn_5.png
new file mode 100644
index 0000000..daf8279
--- /dev/null
+++ b/src/assets/film/film_cn_5.png
Binary files differ
diff --git a/src/assets/film/film_cn_6.png b/src/assets/film/film_cn_6.png
new file mode 100644
index 0000000..e4c5946
--- /dev/null
+++ b/src/assets/film/film_cn_6.png
Binary files differ
diff --git "a/src/assets/film/f\351\207\214\\m_cn_.png" "b/src/assets/film/f\351\207\214\\m_cn_.png"
new file mode 100644
index 0000000..68c48d9
--- /dev/null
+++ "b/src/assets/film/f\351\207\214\\m_cn_.png"
Binary files differ
diff --git a/src/router/index.js b/src/router/index.js
index 855e29b..d733a9d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -36,6 +36,11 @@
component: () => import('@/views/film/film_china'),
meta: { title: '中国影视' }
},
+ {
+ path: '/film_world',
+ component: () => import('@/views/film/film_world'),
+ meta: { title: '世界影视' }
+ },
{
path: '/',
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 {
diff --git a/src/views/film/film_world.vue b/src/views/film/film_world.vue
new file mode 100644
index 0000000..0f56a5f
--- /dev/null
+++ b/src/views/film/film_world.vue
@@ -0,0 +1,789 @@
+<template>
+ <div class="container">
+
+ <div class="header">
+ <div class="wrapper flex">
+ <img src="../../assets/film/logo.png">
+ <div class="nav">
+ <span>首页</span>
+ <input type="text" class="search">
+ <span>登录</span>
+ <span>注册</span>
+ </div>
+ </div>
+ </div>
+
+ <div class="line" />
+
+ <div class="content">
+
+ <div class="banner wrapper">
+ <div class="banner-nav">
+ <span class="banner-nav-title">当前位置:</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>
+ <span class="banner-nav-router">影视</span>
+ </div>
+
+ <img src="../../assets/film/film_logo.png" class="film_logo">
+
+ <div class="banner-pagination" >
+ <p class="banner-pagination-dot">阿甘正传</p>
+ <p class="banner-pagination-dot">阿甘正传</p>
+ <p class="banner-pagination-dot">阿甘正传</p>
+ <p class="banner-pagination-dot">阿甘正传</p>
+ <p class="banner-pagination-dot on">敦刻尔克</p>
+ <p class="banner-pagination-dot">阿甘正传</p>
+ </div>
+
+
+ <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>
+
+ </div>
+
+ <div class="programa wrapper">
+
+ <div class="programa-nav">
+
+ <div class="programa-nav-title">经典影视</div>
+ <div class="programa-nav-item">
+ <span>猜你喜欢</span>
+ <span>推荐排行</span>
+ <span>影视经典</span>
+ <span>最新上映</span>
+ <span>|</span>
+ <span>更多>></span>
+ </div>
+
+ </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>
+
+ <div class="programa-film">
+ <img src="../../assets/film/film2.png" alt="">
+ <p class="film-name">灰列犬号</p>
+ <p class="film-des">豆瓣高分电影</p>
+ </div>
+
+ <div class="programa-film">
+ <img src="../../assets/film/film3.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 class="programa wrapper">
+
+ <div class="programa-nav">
+
+ <div class="programa-nav-title">漫威</div>
+ <div class="programa-nav-item">
+ <span>猜你喜欢</span>
+ <span>推荐排行</span>
+ <span>影视经典</span>
+ <span>最新上映</span>
+ <span>|</span>
+ <span>更多>></span>
+ </div>
+
+ </div>
+
+ <div class="programa-content2">
+ <div class="programa-film2">
+ <img src="../../assets/film/film.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="">
+ <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 class="programa-film">
+ <img src="../../assets/film/film.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>
+
+ </div>
+ </div>
+
+
+
+
+ </div>
+
+ <div class="programa wrapper">
+
+ <div class="programa-nav">
+ <div class="programa-nav-title">科幻</div>
+ <div class="programa-nav-item">
+ <span>猜你喜欢</span>
+ <span>推荐排行</span>
+ <span>影视经典</span>
+ <span>最新上映</span>
+ <span>|</span>
+ <span>更多>></span>
+ </div>
+
+ </div>
+
+ <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>
+ </div>
+
+
+
+
+ </div>
+
+ </div>
+
+ <div class="footer">
+ 版权 @ 解放军文化艺术中心
+ </div>
+
+
+ </div>
+</template>
+<script>
+
+// 页头背景，导航等
+import HomeHeader from '@/views/home/components/HomeHeader'
+import HomeFooter from '@/views/home/components/HomeFooter'
+// 文艺·原创
+import SearchInput from '@/views/home/components/SearchInput'
+export default {
+ name: 'FilmChina',
+ components: {
+ HomeHeader,
+ HomeFooter,
+ SearchInput
+ }
+}
+</script>
+
+<style scoped lang="scss">
+ @import "~@/styles/variables.scss";
+
+ .container {
+ background: #670607;
+ .header{
+ height: 90px;
+ .wrapper{
+ height: 90px;
+ img{
+ width: 336px;
+ height: 55px;
+ }
+
+ .nav{
+ color:#FFE0B8;
+ font-weight: 600;
+ font-size: 19px;
+ .search{
+ border:1px solid #ffe0b8;
+ border-radius: 10px;
+ background: rgba(0,0,0,0);
+ width: 120px;
+ }
+ span{
+ margin: 0 20px;
+ }
+ }
+ }
+ }
+ .line{
+ width:100%;
+ height: 6px;
+ background: linear-gradient(90deg, #CA2226 28.000000000000004%, #FFD791 100%);
+ opacity: 0.4;
+ }
+
+ .content {
+ width: 100%;
+ margin: 0 auto;
+ .banner{
+ height: 570px;
+ background: url("../../assets/film/banner1.png") no-repeat center center;
+ background-size:100% 100%;
+ overflow: hidden;
+ position: relative;
+ .banner-nav{
+ color: rgba(255,255,255,0.45);
+ margin-top: 20px;
+ margin-left: 10px;
+ font-weight: 600;
+ .banner-nav-router{
+ margin-left: 5px;
+ margin-right: 5px;
+ }
+ }
+
+ .film_logo{
+ position: absolute;
+ top: 160px;
+ left: 10px;
+ width: 120px;
+ }
+
+ .banner-pagination{
+ position: absolute;
+ right: 80px;
+ top: 140px;
+ color: #fff;
+ font-size: 12px;
+ display: flex;
+ flex-direction: column;
+ justify-content: right;
+
+ .banner-pagination-dot{
+ text-align: right;
+ box-sizing: content-box;
+ padding-right: 5px;
+ padding-left: 5px;
+ }
+ .on{
+ font-size: 20px;
+ background: rgba(255,255,255,0.1);
+ }
+
+ }
+
+ .banner-category{
+ position: absolute;
+ bottom: 20px;
+ left: 0;
+ right: 0;
+ width: 800px;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ .banner-category-dot{
+ background: rgba(255,255,255,0.12);
+ width: 100px;
+ height: 32px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: #fff;
+ font-size: 14px;
+ font-weight: 600;
+ border-radius: 16px;
+ }
+ }
+ }
+
+ .programa{
+ margin-top: 50px;
+ .programa-nav{
+ width:800px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ color: #fff;
+ padding-bottom: 5px;
+ border-bottom: 2px solid rgba(255,255,255,0.3);
+ .programa-nav-title{
+ font-size: 24px;
+ font-weight: 900;
+ }
+
+ .programa-nav-item{
+ margin-left: 50px;
+
+ span{
+ margin-right: 40px;
+ font-size: 12px;
+ color: rgba(255,255,255,0.5);
+ }
+ }
+
+ }
+ .programa-content{
+ margin-top: 10px;
+ display: flex;
+ justify-content: space-around;
+ flex-direction: row;
+ .programa-film{
+ width: 200px;
+ 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-content2{
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ width: 1200px;
+ .programa-film2{
+ width: 400px;
+ font-size: 12px;
+ img{
+ width: 400px;
+ }
+ .film-name{
+ color:#fff;
+ margin:5px 12px;
+ }
+ .film-des{
+ margin:5px 12px;
+ color: rgba(255,255,255,0.5);
+ }
+ }
+ .programa-film-group {
+ width: 500px;
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ .programa-film {
+ width: 150px;
+ font-size: 12px;
+
+ img {
+ width: 150px;
+ }
+
+ .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;
+
+ }
+
+ }
+ }
+ }
+ }
+ .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