修改

src/views/home/components/changeBase.vue

@@ -26,52 +26,52 @@ 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';
+import bgBaseQinhuangdao from '@/assets/images/bgBase/秦皇岛.png';// 补充：江苏
 
 export default {
   name: "BaseSelector",
   props: {
     factory: {
-      type: Number,
-      default: 1, // 默认选中宜兴（序号1）
-      validator: (val) => val >= 1 && val <= 8 // 校验序号范围
+      type: [String, Number],
+      default: 5, // 新映射中“宜兴”对应序号7
+      validator: (val) => [5, 2, 7, 3, 8, 9, 10].includes(val) // 校验序号范围（匹配新的baseNameToIndexMap）
     }
   },
   data() {
     return {
-      activeButton: 0, // 初始化默认选中索引0（宜兴）
-      buttonList: ['宜兴', '漳州', '自贡', '桐城', '洛阳', '合肥', '宿迁', '秦皇岛'],
+      activeButton: 5, // 初始化默认选中索引2（对应buttonList中的“宜兴”）
+      buttonList: ['合肥', '桐城', '宜兴', '自贡', '漳州', '洛阳', '秦皇岛', '宿迁'], // 匹配截图顺序
       imgMap: {
         base: {
-          宜兴: baseYixing,
-          漳州: baseZhangzhou,
-          自贡: baseZigong,
-          桐城: baseTongcheng,
-          洛阳: baseLuoyang,
           合肥: baseHefei,
-          宿迁: baseSuqian,
-          秦皇岛: baseQinhuangdao
+          桐城: baseTongcheng,
+          宜兴: baseYixing,
+          自贡: baseZigong,
+          漳州: baseZhangzhou,
+          洛阳: baseLuoyang,
+          秦皇岛: baseQinhuangdao,
+          宿迁: baseSuqian
         },
         bgBase: {
-          宜兴: bgBaseYixing,
-          漳州: bgBaseZhangzhou,
-          自贡: bgBaseZigong,
-          桐城: bgBaseTongcheng,
-          洛阳: bgBaseLuoyang,
           合肥: bgBaseHefei,
-          宿迁: bgBaseSuqian,
-          秦皇岛: bgBaseQinhuangdao
+          桐城: bgBaseTongcheng,
+          宜兴: bgBaseYixing,
+          自贡: bgBaseZigong,
+          漳州: bgBaseZhangzhou,
+          洛阳: bgBaseLuoyang,
+          秦皇岛: bgBaseQinhuangdao,
+          宿迁: bgBaseSuqian
         }
       },
-      baseNameToIndex: {
-        宜兴: 1,
-        漳州: 2,
+      baseNameToIndexMap: { // 新的名称→序号映射
+        宜兴: 7,
+        漳州: 8,
         自贡: 3,
-        桐城: 4,
-        洛阳: 5,
-        合肥: 6,
-        宿迁: 7,
-        秦皇岛: 8
+        桐城: 2,
+        洛阳: 9,
+        合肥: 5,
+        秦皇岛: 10, // 补充
+        宿迁: 6  // 补充
       }
     };
   },
@@ -79,20 +79,20 @@ export default {
     // 监听父组件传递的factory变化，同步本地选中索引
     factory: {
       handler(newVal) {
-        // 强制转换为数字，避免非数字值导致错误
-        const val = Number(newVal);
-        if (val >= 1 && val <= 8) {
-          this.activeButton = val - 1; // 序号1→索引0（宜兴）
-        } else {
-          this.activeButton = 0; // 非法值默认选中宜兴
-        }
+        // 根据新的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 selectedIndex = newVal + 1; // 索引0→序号1
+      const selectedName = this.buttonList[newVal];
+      const selectedIndex = this.baseNameToIndexMap[selectedName] || 5; // 默认返回宜兴的序号7
       this.$emit('baseChange', selectedIndex);
     }
   },
@@ -101,12 +101,12 @@ export default {
       this.activeButton = index;
     },
     getIndexByName(name) {
-      return this.baseNameToIndex[name] || 1;
+      return this.baseNameToIndexMap[name] || 5;
     }
   },
   mounted() {
-    // 修复：初始化时触发事件，传递默认选中的宜兴序号（1）
-    this.$emit('baseChange', 1);
+    // 初始化时触发事件，传递默认选中的宜兴序号（7）
+    this.$emit('baseChange', 5);
   }
 };
 </script>
@@ -126,7 +126,7 @@ export default {
     text-align: center;
     cursor: pointer;
     white-space: nowrap;
-    margin-right: -35px;
+    margin-right: -35px; // 重叠效果，可根据需求调整
     transition: all 0.2s ease;
 
     &:hover,