新增页面

src/views/home/components/changeBase.vue

@@ -0,0 +1,145 @@
+<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: Number,
+      default: 1, // 默认选中宜兴（序号1）
+      validator: (val) => val >= 1 && val <= 8 // 校验序号范围
+    }
+  },
+  data() {
+    return {
+      activeButton: 0, // 初始化默认选中索引0（宜兴）
+      buttonList: ['宜兴', '漳州', '自贡', '桐城', '洛阳', '合肥', '宿迁', '秦皇岛'],
+      imgMap: {
+        base: {
+          宜兴: baseYixing,
+          漳州: baseZhangzhou,
+          自贡: baseZigong,
+          桐城: baseTongcheng,
+          洛阳: baseLuoyang,
+          合肥: baseHefei,
+          宿迁: baseSuqian,
+          秦皇岛: baseQinhuangdao
+        },
+        bgBase: {
+          宜兴: bgBaseYixing,
+          漳州: bgBaseZhangzhou,
+          自贡: bgBaseZigong,
+          桐城: bgBaseTongcheng,
+          洛阳: bgBaseLuoyang,
+          合肥: bgBaseHefei,
+          宿迁: bgBaseSuqian,
+          秦皇岛: bgBaseQinhuangdao
+        }
+      },
+      baseNameToIndex: {
+        宜兴: 1,
+        漳州: 2,
+        自贡: 3,
+        桐城: 4,
+        洛阳: 5,
+        合肥: 6,
+        宿迁: 7,
+        秦皇岛: 8
+      }
+    };
+  },
+  watch: {
+    // 监听父组件传递的factory变化，同步本地选中索引
+    factory: {
+      handler(newVal) {
+        // 强制转换为数字，避免非数字值导致错误
+        const val = Number(newVal);
+        if (val >= 1 && val <= 8) {
+          this.activeButton = val - 1; // 序号1→索引0（宜兴）
+        } else {
+          this.activeButton = 0; // 非法值默认选中宜兴
+        }
+        console.log('当前选中基地：', this.buttonList[this.activeButton], '序号：', newVal);
+      },
+      immediate: true // 初始化立即执行
+    },
+    // 监听本地选中索引变化，向父组件发送事件
+    activeButton(newVal) {
+      const selectedIndex = newVal + 1; // 索引0→序号1
+      this.$emit('baseChange', selectedIndex);
+    }
+  },
+  methods: {
+    handleClick(index) {
+      this.activeButton = index;
+    },
+    getIndexByName(name) {
+      return this.baseNameToIndex[name] || 1;
+    }
+  },
+  mounted() {
+    // 修复：初始化时触发事件，传递默认选中的宜兴序号（1）
+    this.$emit('baseChange', 1);
+  }
+};
+</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>