125 lines
3.6 KiB
Vue
125 lines
3.6 KiB
Vue
<template>
|
|
<div class="changeBase">
|
|
<div class="base-item" @click="handleClick(item.id)" v-for="(item) in buttonLevelList" :key="item.id"
|
|
:style="{ zIndex: activeButton === item.id ? 10 : 1 }">
|
|
<img :src="activeButton === item.id ? item.bgImg : item.img" :alt="`${item.name}基地`" :title="item.name">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// 导入基地图片（按统一命名规范）
|
|
import baseYixing from '@/assets/images/base/宜兴.png';
|
|
import baseZhangzhou from '@/assets/images/base/漳州.png';
|
|
import baseZigong from '@/assets/images/base/自贡.png';
|
|
import baseTongcheng from '@/assets/images/base/桐城.png';
|
|
import baseLuoyang from '@/assets/images/base/洛阳.png';
|
|
import baseHefei from '@/assets/images/base/合肥.png';
|
|
import baseSuqian from '@/assets/images/base/宿迁.png';
|
|
import baseQinhuangdao from '@/assets/images/base/秦皇岛.png';
|
|
|
|
// 导入选中态基地图片
|
|
import bgBaseYixing from '@/assets/images/bgBase/宜兴.png';
|
|
import bgBaseZhangzhou from '@/assets/images/bgBase/漳州.png';
|
|
import bgBaseZigong from '@/assets/images/bgBase/自贡.png';
|
|
import bgBaseTongcheng from '@/assets/images/bgBase/桐城.png';
|
|
import bgBaseLuoyang from '@/assets/images/bgBase/洛阳.png';
|
|
import bgBaseHefei from '@/assets/images/bgBase/合肥.png';
|
|
import bgBaseSuqian from '@/assets/images/bgBase/宿迁.png';
|
|
import bgBaseQinhuangdao from '@/assets/images/bgBase/秦皇岛.png';
|
|
|
|
export default {
|
|
name: "BaseSelector",
|
|
props: {
|
|
factory: {
|
|
type: [String, Number],
|
|
default: undefined,
|
|
validator: (val) => [5, 2, 7, 3, 8, 9, 10, 6].includes(val)
|
|
}
|
|
},
|
|
computed: {
|
|
buttonLevelList() {
|
|
let arr = []
|
|
this.$store.getters.levelList.forEach(item => {
|
|
this.buttonList.forEach(item2 => {
|
|
if (item2.id === item.id) {
|
|
arr.push(item2)
|
|
}
|
|
})
|
|
})
|
|
const validIds = [5, 2, 7, 3, 8, 9, 10, 6]
|
|
if (this.factory != null && validIds.includes(Number(this.factory))) {
|
|
this.activeButton = Number(this.factory)
|
|
} else if (arr.length > 0) {
|
|
this.activeButton = arr[0].id
|
|
}
|
|
return arr
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
activeButton: undefined,
|
|
buttonList:[
|
|
{id: 5, name: '合肥', img: baseHefei, bgImg: bgBaseHefei},
|
|
{id: 2, name: '桐城', img: baseTongcheng, bgImg: bgBaseTongcheng},
|
|
{id: 7, name: '宜兴', img: baseYixing, bgImg: bgBaseYixing},
|
|
{id: 3, name: '自贡', img: baseZigong, bgImg: bgBaseZigong},
|
|
{id: 8, name: '漳州', img: baseZhangzhou, bgImg: bgBaseZhangzhou},
|
|
{id: 9, name: '洛阳', img: baseLuoyang, bgImg: bgBaseLuoyang},
|
|
{id: 10, name: '秦皇岛', img: baseQinhuangdao, bgImg: bgBaseQinhuangdao},
|
|
{id: 6, name: '宿迁', img: baseSuqian, bgImg: bgBaseSuqian}
|
|
],
|
|
};
|
|
},
|
|
watch: {
|
|
factory: {
|
|
handler(newVal) {
|
|
if (newVal != null) {
|
|
this.activeButton = Number(newVal);
|
|
}
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick(id) {
|
|
this.activeButton = id;
|
|
this.$emit('baseChange', id);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.changeBase {
|
|
display: flex;
|
|
width: fit-content;
|
|
align-items: center;
|
|
|
|
.base-item {
|
|
width: 234px;
|
|
height: 81px;
|
|
font-family: YouSheBiaoTiHei;
|
|
font-size: 38px;
|
|
line-height: 54px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
margin-right: -35px;
|
|
transition: all 0.2s ease;
|
|
|
|
&:hover,
|
|
&:active {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|