电影临时切图

Hui Yu

2021-03-25 3f62884fa4b7cdcbd7ac1ced384b030721b61331

电影临时切图

 src/assets/film/film10.png

 src/assets/film/film11.png

 src/assets/film/film12.png

 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>


 src/views/home/components/ArtChina.vue

@@ -7,42 +7,49 @@
      <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`)})`}">
            <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>
      </div>
      <div class="info-view" @click="go_music" :style="{'background-image': `url(${require(`@/assets/home/china/china_bg_img2.png`)})`}">
            </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>
      </div>
            </router-link>

      
     
      <div class="info-view" :style="{'background-image': `url(${require(`@/assets/home/china/china_bg_img3.png`)})`}">
            <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-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-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-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-view"

                :style="{'background-image': `url(${require(`@/assets/home/china/china_bg_img7.png`)})`}">

        <div class="info-title">
          <span class="font-bold">中国雕塑</span>
        </div>
@@ -52,28 +59,25 @@
</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;
@@ -83,6 +87,7 @@
      background-image: url("../../../assets/home/home_title_bg_img.png");
      background-size: cover;
      text-align: center;


      .title {
        display: flex;
        margin-left: 36px;
@@ -91,6 +96,7 @@
        letter-spacing: 3px;
      }
    }


    .hint-title {
      color: #BABBBB;
      font-size: 52px;
@@ -98,10 +104,12 @@
      letter-spacing: 3px;
    }
  }


  .list-info {
    width: 100%;
    margin-top: 24px;
    display: grid;


    .info-view {
      display: inline-flex;
      flex-direction: column;
@@ -109,10 +117,12 @@
      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));
@@ -129,10 +139,12 @@
      }
    }
  } 


  .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;

 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>