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