<template>
|
<div class="art-global">
|
<div class="info-title-view">
|
<div class="bg-title">
|
<span class="title font-bold">文艺·世界</span>
|
</div>
|
<div class="hint-title font-bold">WORLD</div>
|
</div>
|
<div class="list-info">
|
<!-- <div class="info-view" v-for="item in imgArr" :key="item" :style="{'background-image': 'url(' + item + ')'}">
|
<div class="info-title"></div>
|
</div> -->
|
<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>
|
</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>
|
</div>
|
</div>
|
<div class="info-view" :style="{'background-image': `url(${require(`@/assets/home/world/world_bg_img4.png`)})`}">
|
<div class="info-title">
|
<p class="font-bold">文学 LITERATURE</p>
|
</div>
|
</div>
|
|
<router-link to="/music_world" class="info-view" :style="{'background-image': `url(${require(`@/assets/home/world/world_bg_img5.png`)})`}">
|
<div class="info-title">
|
<p class="font-bold">音乐 MUSIC</p>
|
</div>
|
</router-link>
|
|
|
<div class="info-view" :style="{'background-image': `url(${require(`@/assets/home/world/world_bg_img6.png`)})`}">
|
<div class="info-title">
|
<p class="font-bold">动漫 ANIME</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
name: 'ArtGlobal'
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "~@/styles/variables.scss";
|
.art-global {
|
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 {
|
max-width: 100%;
|
display: grid;
|
grid-template-columns: 384px 384px 384px;
|
grid-template-rows: 384px 384px;
|
grid-column-gap: 24px;
|
grid-row-gap: 20px;
|
margin-top: 24px;
|
.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: 82px;
|
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(35,24,21, 50));
|
// 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));
|
p {
|
width: 100%;
|
text-align: center;
|
font-size: 25px;
|
color: white;
|
margin-top: 35px;
|
letter-spacing: 3px;
|
}
|
}
|
}
|
}
|
</style>
|
