From 3f62884fa4b7cdcbd7ac1ced384b030721b61331 Mon Sep 17 00:00:00 2001
From: Hui Yu <huiyu@HuideMacBook-Pro-2.local>
Date: Thu, 25 Mar 2021 09:31:00 +0800
Subject: [PATCH] 电影临时切图
---
src/views/home/components/ArtGlobal.vue | 5
src/views/film/film_world.vue | 12 +-
src/views/home/components/ArtChina.vue | 292 +++++++++++++++++++++++++-----------------------
src/assets/film/film11.png | 0
src/assets/film/film12.png | 0
src/assets/film/film10.png | 0
6 files changed, 160 insertions(+), 149 deletions(-)
diff --git a/src/assets/film/film10.png b/src/assets/film/film10.png
new file mode 100644
index 0000000..d8f8781
--- /dev/null
+++ b/src/assets/film/film10.png
Binary files differ
diff --git a/src/assets/film/film11.png b/src/assets/film/film11.png
new file mode 100644
index 0000000..afa5d4f
--- /dev/null
+++ b/src/assets/film/film11.png
Binary files differ
diff --git a/src/assets/film/film12.png b/src/assets/film/film12.png
new file mode 100644
index 0000000..1dee4e8
--- /dev/null
+++ b/src/assets/film/film12.png
Binary files differ
diff --git a/src/views/film/film_world.vue b/src/views/film/film_world.vue
index 0f56a5f..8ff445b 100644
--- a/src/views/film/film_world.vue
+++ b/src/views/film/film_world.vue
@@ -86,20 +86,20 @@
</div>
<div class="programa-film">
- <img src="../../assets/film/film.png" alt="">
- <p class="film-name">阿甘正传</p>
+ <img src="../../assets/film/film12.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>
+ <img src="../../assets/film/film11.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>
+ <img src="../../assets/film/film10.png" alt="">
+ <p class="film-name">壮志凌云</p>
<p class="film-des">豆瓣高分电影</p>
</div>
diff --git a/src/views/home/components/ArtChina.vue b/src/views/home/components/ArtChina.vue
index 3c5e86b..9b21a2d 100644
--- a/src/views/home/components/ArtChina.vue
+++ b/src/views/home/components/ArtChina.vue
@@ -1,141 +1,153 @@
-<template>
- <div class="art-china">
- <div class="info-title-view">
- <div class="bg-title">
- <span class="title font-bold">文艺·中国</span>
- </div>
- <div class="hint-title font-bold">CHINA</div>
- </div>
- <div class="list-info list-info-grid-top">
- <div class="info-view" :style="{'background-image': `url(${require(`@/assets/home/china/china_bg_img1.png`)})`}">
- <div class="info-title">
- <span class="font-bold">中国影视</span>
- </div>
- </div>
- <div class="info-view" @click="go_music" :style="{'background-image': `url(${require(`@/assets/home/china/china_bg_img2.png`)})`}">
-
- <div class="info-title">
- <span class="font-bold">中国音乐</span>
- </div>
- </div>
-
-
- <div class="info-view" :style="{'background-image': `url(${require(`@/assets/home/china/china_bg_img3.png`)})`}">
- <div class="info-title">
- <span class="font-bold">中国舞蹈</span>
- </div>
- </div>
- </div>
- <div class="list-info list-info-grid-bottom">
- <div class="info-view" :style="{'background-image': `url(${require(`@/assets/home/china/china_bg_img4.png`)})`}">
- <div class="info-title">
- <span class="font-bold">中国戏剧</span>
- </div>
- </div>
- <div class="info-view" :style="{'background-image': `url(${require(`@/assets/home/china/china_bg_img5.png`)})`}">
- <div class="info-title">
- <span class="font-bold">中国绘画</span>
- </div>
- </div>
- <div class="info-view" :style="{'background-image': `url(${require(`@/assets/home/china/china_bg_img6.png`)})`}">
- <div class="info-title">
- <span class="font-bold">中国文学</span>
- </div>
- </div>
- <div class="info-view" :style="{'background-image': `url(${require(`@/assets/home/china/china_bg_img7.png`)})`}">
- <div class="info-title">
- <span class="font-bold">中国雕塑</span>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-
-export default {
- name: 'ArtChina',
- methods:{
- go_music(){
- this.$router.push('/music_cn');
- }
- }
-}
-</script>
-
-<style lang="scss" scoped>
- @import "~@/styles/variables.scss";
- .art-china {
- width: $appWidth;
- }
- .info-title-view {
- width: 100%;
- height: 62px;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- .bg-title {
- width: 344px;
- height: 62px;
- line-height: 62px;
- overflow: hidden;
- position: relative;
- background-image: url("../../../assets/home/home_title_bg_img.png");
- background-size: cover;
- text-align: center;
- .title {
- display: flex;
- margin-left: 36px;
- font-size: 43px;
- color: #fff;
- letter-spacing: 3px;
- }
- }
- .hint-title {
- color: #BABBBB;
- font-size: 52px;
- line-height: 62px;
- letter-spacing: 3px;
- }
- }
- .list-info {
- width: 100%;
- margin-top: 24px;
- display: grid;
- .info-view {
- display: inline-flex;
- flex-direction: column;
- justify-content: flex-end;
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- .info-title {
- width: 100%;
- height: 50px;
- background-image: linear-gradient(to right, #9D3032, #EBEBEB);
- // background-image: linear-gradient(top, rgb(255,255,255), rgb(35,24,21));
- // background: -moz-linear-gradient(top, rgb(255,255,255),rgb(35,24,21));
- // background: -ms-linear-gradient(top, rgb(255,255,255),rgb(35,24,21));
- // background: -o-linear-gradient(top, rgb(255,255,255),rgb(35,24,21));
- // background: -webkit-linear-gradient(top, rgb(255,255,255),rgb(35,24,21));
- span {
- width: 100%;
- font-size: 25px;
- color: white;
- margin-left: 20px;
- line-height: 50px;
- letter-spacing: 3px;
- }
- }
- }
- }
- .list-info-grid-top {
- grid-template-columns: 302px 268px 627px;
- grid-template-rows: 455px;
- }
- .list-info-grid-bottom {
- grid-template-columns: 437px 303px 260px 195px;
- grid-template-rows: 341px;
- margin-top: 0;
- }
+<template>
+ <div class="art-china">
+ <div class="info-title-view">
+ <div class="bg-title">
+ <span class="title font-bold">文艺·中国</span>
+ </div>
+ <div class="hint-title font-bold">CHINA</div>
+ </div>
+ <div class="list-info list-info-grid-top">
+ <router-link to="/film_cn" class="info-view"
+ :style="{'background-image': `url(${require(`@/assets/home/china/china_bg_img1.png`)})`}">
+ <div class="info-title">
+ <span class="font-bold">中国影视</span>
+ </div>
+ </router-link>
+ <router-link to="/music_cn" class="info-view"
+ :style="{'background-image': `url(${require(`@/assets/home/china/china_bg_img2.png`)})`}">
+
+ <div class="info-title">
+ <span class="font-bold">中国音乐</span>
+ </div>
+ </router-link>
+
+
+ <div class="info-view"
+ :style="{'background-image': `url(${require(`@/assets/home/china/china_bg_img3.png`)})`}">
+ <div class="info-title">
+ <span class="font-bold">中国舞蹈</span>
+ </div>
+ </div>
+ </div>
+ <div class="list-info list-info-grid-bottom">
+ <div class="info-view"
+ :style="{'background-image': `url(${require(`@/assets/home/china/china_bg_img4.png`)})`}">
+ <div class="info-title">
+ <span class="font-bold">中国戏剧</span>
+ </div>
+ </div>
+ <div class="info-view"
+ :style="{'background-image': `url(${require(`@/assets/home/china/china_bg_img5.png`)})`}">
+ <div class="info-title">
+ <span class="font-bold">中国绘画</span>
+ </div>
+ </div>
+ <div class="info-view"
+ :style="{'background-image': `url(${require(`@/assets/home/china/china_bg_img6.png`)})`}">
+ <div class="info-title">
+ <span class="font-bold">中国文学</span>
+ </div>
+ </div>
+ <div class="info-view"
+ :style="{'background-image': `url(${require(`@/assets/home/china/china_bg_img7.png`)})`}">
+ <div class="info-title">
+ <span class="font-bold">中国雕塑</span>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+ export default {
+ name: 'ArtChina',
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "~@/styles/variables.scss";
+
+ .art-china {
+ width: $appWidth;
+ }
+
+ .info-title-view {
+ width: 100%;
+ height: 62px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ .bg-title {
+ width: 344px;
+ height: 62px;
+ line-height: 62px;
+ overflow: hidden;
+ position: relative;
+ background-image: url("../../../assets/home/home_title_bg_img.png");
+ background-size: cover;
+ text-align: center;
+
+ .title {
+ display: flex;
+ margin-left: 36px;
+ font-size: 43px;
+ color: #fff;
+ letter-spacing: 3px;
+ }
+ }
+
+ .hint-title {
+ color: #BABBBB;
+ font-size: 52px;
+ line-height: 62px;
+ letter-spacing: 3px;
+ }
+ }
+
+ .list-info {
+ width: 100%;
+ margin-top: 24px;
+ display: grid;
+
+ .info-view {
+ display: inline-flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+
+ .info-title {
+ width: 100%;
+ height: 50px;
+ background-image: linear-gradient(to right, #9D3032, #EBEBEB);
+
+ // background-image: linear-gradient(top, rgb(255,255,255), rgb(35,24,21));
+ // background: -moz-linear-gradient(top, rgb(255,255,255),rgb(35,24,21));
+ // background: -ms-linear-gradient(top, rgb(255,255,255),rgb(35,24,21));
+ // background: -o-linear-gradient(top, rgb(255,255,255),rgb(35,24,21));
+ // background: -webkit-linear-gradient(top, rgb(255,255,255),rgb(35,24,21));
+ span {
+ width: 100%;
+ font-size: 25px;
+ color: white;
+ margin-left: 20px;
+ line-height: 50px;
+ letter-spacing: 3px;
+ }
+ }
+ }
+ }
+
+ .list-info-grid-top {
+ grid-template-columns: 302px 268px 627px;
+ grid-template-rows: 455px;
+ }
+
+ .list-info-grid-bottom {
+ grid-template-columns: 437px 303px 260px 195px;
+ grid-template-rows: 341px;
+ margin-top: 0;
+ }
</style>
diff --git a/src/views/home/components/ArtGlobal.vue b/src/views/home/components/ArtGlobal.vue
index 5d65266..ec8a8e0 100644
--- a/src/views/home/components/ArtGlobal.vue
+++ b/src/views/home/components/ArtGlobal.vue
@@ -10,17 +10,16 @@
<!-- <div class="info-view" v-for="item in imgArr" :key="item" :style="{'background-image': 'url(' + item + ')'}">
<div class="info-title"></div>
</div> -->
- <div class="info-view" :style="{'background-image': `url(${require(`@/assets/home/world/world_bg_img1.png`)})`}">
+ <router-link to="/film_world" class="info-view" :style="{'background-image': `url(${require(`@/assets/home/world/world_bg_img1.png`)})`}">
<div class="info-title">
<p class="font-bold">影视 FILM</p>
</div>
- </div>
+ </router-link>
<div class="info-view" :style="{'background-image': `url(${require(`@/assets/home/world/world_bg_img2.png`)})`}">
<div class="info-title">
<p class="font-bold">戏剧 STAGE</p>
</div>
</div>
-
<div class="info-view" :style="{'background-image': `url(${require(`@/assets/home/world/world_bg_img3.png`)})`}">
<div class="info-title">
<p class="font-bold">美术 ARTS</p>
--
Gitblit v1.8.0