<template>
<module-box moduleType="ykjdl" bgType="2" :styleObj="styleObj" :cityShow="true" title="景区游客接待量 TOP 10">
<div class="module-content">
<div class="module-content-box">
<div v-for="(item,index) in dataList" :key="item + index" class="module-content-list">
<div :class="[(index == 0 || index == 1 || index == 2)?'module-content-list-l-img':'module-content-list-l-text']" class="module-content-list-l">
<img v-if="index == 0" src="../../../assets/index/img-2-1.png" alt="">
<img v-if="index == 1" src="../../../assets/index/img-2-2.png" alt="">
<img v-if="index == 2" src="../../../assets/index/img-2-3.png" alt="">
<span v-if="index != 0 && index != 1 && index != 2">{{index + 1}}</span>
</div>
<div class="module-content-list-r">
<div class="module-content-list-r-t">{{ item.name }}</div>
<div class="module-content-list-r-b">
<div :style="{width:item.value}" :class="[index == 0?'module-content-list-r-b-color-1':(index == 1?'module-content-list-r-b-color-2':(index == 2?'module-content-list-r-b-color-3':''))]" class="module-content-list-r-b-color"></div>
</div>
</div>
</div>
</div>
</div>
</module-box>
</template>
<script>
export default {
components: {
},
props: {
/* pageData: {
type: Array,
default: () => ([])
} */
},
data() {
return {
dataList:[
{
name:'长白山风景区',
value:'100%'
},
{
name:'六鼎山文化旅游区',
value:'90%'
},
{
name:'长影世纪城',
value:'80%'
},
{
name:'长春世界雕塑公园',
value:'70%'
},
{
name:'六鼎山文化旅游区',
value:'70%'
},
{
name:'孔子文化园',
value:'60%'
},
{
name:'关东文化园',
value:'50%'
},
{
name:'集安高句丽文物古迹景区',
value:'40%'
},
{
name:'伪满皇宫博物院',
value:'30%'
},
{
name:'净月潭风景名胜区',
value:'20%'
}
],
styleObj:{
transform:'scale(1.5)',
width:'380px',
height:'420px'
}
}
},
computed: {
},
watch: {
},
mounted() {
},
created() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.module-content{
.module-content-box{
padding: 12px 25px 0 15px;
.module-content-list{
display: flex;
height: 22px;
margin-bottom: 14px;
.module-content-list-l{
width: 18px;
height: 22px;
}
.module-content-list-l-img{
img{
width: 100%;
height: 100%;
}
}
.module-content-list-l-text{
width: 18px;
height: 22px;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
font-family: BDZYJT--GB1-0, BDZYJT--GB1;
font-weight: normal;
color: #F7F7F7;
background: linear-gradient(225deg, rgba(77,155,255,0.1) 0%, rgba(64, 122, 255, 1) 100%);
}
.module-content-list-r{
margin-left: 8px;
.module-content-list-r-t{
font-size: 12px;
font-weight: 500;
color: #F7F7F7;
line-height: 10px;
margin-bottom: 6px;
}
.module-content-list-r-b{
width: 314px;
height: 6px;
background: rgba(9,111,255,0.05);
border-radius: 22px;
.module-content-list-r-b-color{
width: 100%;
height: 100%;
background: linear-gradient(269deg, #0080FF 0%, rgba(0,140,242,0) 100%);
border-radius: 22px;
}
.module-content-list-r-b-color-1{
background: linear-gradient(270deg, #FE3E32 0%, rgba(235,37,37,0) 100%);
}
.module-content-list-r-b-color-2{
background: linear-gradient(270deg, #FFB313 0%, rgba(218,160,38,0) 100%);
}
.module-content-list-r-b-color-3{
background: linear-gradient(270deg, #00F6FE 0%, rgba(30,195,212,0.1) 100%);
}
}
}
}
}
}
</style>
