146 lines
4.6 KiB
Vue
146 lines
4.6 KiB
Vue
<template>
|
||
<div class="changeBase">
|
||
<div class="base-item" @click="handleClick(index)" v-for="(item, index) in buttonList" :key="item"
|
||
:style="{ zIndex: activeButton === index ? 10 : 1 }">
|
||
<img :src="activeButton === index ? imgMap.bgBase[item] : imgMap.base[item]" :alt="`${item}基地`" :title="item">
|
||
</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: 5, // 新映射中“宜兴”对应序号7
|
||
validator: (val) => [5, 2, 7, 3, 8, 9, 10].includes(val) // 校验序号范围（匹配新的baseNameToIndexMap）
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
activeButton: 5, // 初始化默认选中索引2（对应buttonList中的“宜兴”）
|
||
buttonList: ['合肥', '桐城', '宜兴', '自贡', '漳州', '洛阳', '秦皇岛', '宿迁'], // 匹配截图顺序
|
||
imgMap: {
|
||
base: {
|
||
合肥: baseHefei,
|
||
桐城: baseTongcheng,
|
||
宜兴: baseYixing,
|
||
自贡: baseZigong,
|
||
漳州: baseZhangzhou,
|
||
洛阳: baseLuoyang,
|
||
秦皇岛: baseQinhuangdao,
|
||
宿迁: baseSuqian
|
||
},
|
||
bgBase: {
|
||
合肥: bgBaseHefei,
|
||
桐城: bgBaseTongcheng,
|
||
宜兴: bgBaseYixing,
|
||
自贡: bgBaseZigong,
|
||
漳州: bgBaseZhangzhou,
|
||
洛阳: bgBaseLuoyang,
|
||
秦皇岛: bgBaseQinhuangdao,
|
||
宿迁: bgBaseSuqian
|
||
}
|
||
},
|
||
baseNameToIndexMap: { // 新的名称→序号映射
|
||
宜兴: 7,
|
||
漳州: 8,
|
||
自贡: 3,
|
||
桐城: 2,
|
||
洛阳: 9,
|
||
合肥: 5,
|
||
秦皇岛: 10, // 补充
|
||
宿迁: 6 // 补充
|
||
}
|
||
};
|
||
},
|
||
watch: {
|
||
// 监听父组件传递的factory变化，同步本地选中索引
|
||
factory: {
|
||
handler(newVal) {
|
||
// 根据新的baseNameToIndexMap，找到对应的基地名称
|
||
const targetName = Object.keys(this.baseNameToIndexMap).find(name => this.baseNameToIndexMap[name] === newVal);
|
||
// 根据名称找到buttonList中的索引
|
||
const targetIndex = this.buttonList.indexOf(targetName);
|
||
// 合法索引则更新，否则默认选中宜兴
|
||
this.activeButton = targetIndex > -1 ? targetIndex : 2;
|
||
console.log('当前选中基地：', this.buttonList[this.activeButton], '序号：', newVal);
|
||
},
|
||
immediate: true // 初始化立即执行
|
||
},
|
||
// 监听本地选中索引变化，向父组件发送事件
|
||
activeButton(newVal) {
|
||
const selectedName = this.buttonList[newVal];
|
||
const selectedIndex = this.baseNameToIndexMap[selectedName] || 5; // 默认返回宜兴的序号7
|
||
this.$emit('baseChange', selectedIndex);
|
||
}
|
||
},
|
||
methods: {
|
||
handleClick(index) {
|
||
this.activeButton = index;
|
||
},
|
||
getIndexByName(name) {
|
||
return this.baseNameToIndexMap[name] || 5;
|
||
}
|
||
},
|
||
mounted() {
|
||
// 初始化时触发事件，传递默认选中的宜兴序号（7）
|
||
this.$emit('baseChange', 5);
|
||
}
|
||
};
|
||
</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>
|