电影临时切图

Hui Yu

2021-03-25 3f62884fa4b7cdcbd7ac1ced384b030721b61331

 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>