电影临时切图

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

@@ -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>

 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>