底部片区图层开关

src/components/AreaLayerSwitch/index.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="area_layer_switch_container">
+    <div class="area_layer_switch_content">
+      <!-- 全国 -->
+      <div class="national">
+        <div class="national_text">全国</div>
+      </div>
+
+      <!-- 片区 -->
+      <div class="region">
+        <div class="region_shi" :class="{ region_shi_active: activeIndex === '上海市' }" @click="btnClick('上海市')"><div>上海市</div></div>
+        <div class="region_pianqu">
+          <div class="region_pianqu_btn" :class="{ region_pianqu_btn_active: activeIndex === index }" v-for="(item, index) in bottons" :key="item.name" @click="btnClick(index, item)">
+            <div>{{ item.name }}</div>
+          </div>
+        </div>
+        <div class="region_tuceng"></div>
+
+        <div class="region_bg"></div>
+      </div>
+
+      <!-- 全球 -->
+      <div class="global">
+        <div class="global_text">全球</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, watch, computed, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
+const emit = defineEmits(['btnClick'])
+const activeIndex = ref(0)
+
+const bottons = ref([
+  { id: 1, name: '浦东新区', active: true },
+  { id: 2, name: '长宁区', active: false },
+  { id: 3, name: '静安区', active: false },
+  { id: 4, name: '普陀区', active: false },
+  { id: 5, name: '杨浦区', active: false },
+  { id: 6, name: '虹口区', active: false },
+  { id: 7, name: '嘉定区', active: false },
+  { id: 8, name: '青浦区', active: false },
+  { id: 9, name: '宝山区', active: false },
+  { id: 10, name: '闵行区', active: false },
+  { id: 11, name: '徐汇区', active: false },
+  { id: 12, name: '黄浦区', active: false },
+  { id: 13, name: '松江区', active: false },
+  { id: 14, name: '奉献区', active: false },
+  { id: 15, name: '金山区', active: false },
+  { id: 16, name: '崇明区', active: false }
+])
+
+function btnClick(index, item) {
+  console.log(index, 'index')
+  activeIndex.value = index
+  emit('btnClick', item)
+}
+</script>
+<style lang="scss" scoped>
+.area_layer_switch_container {
+  width: 1472px;
+  height: 140px;
+  // background-color: skyblue;
+  position: absolute;
+  bottom: 0px;
+  left: 1184px;
+
+  // gap: 80px;
+}
+
+.area_layer_switch_content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+}
+
+.national {
+  position: relative;
+  background: url(../../assets/img/全国.png) no-repeat;
+  width: 140px;
+  height: 63px;
+  cursor: pointer;
+  // margin-left: 24px;
+
+  .national_text {
+    position: absolute;
+    top: 18px;
+    left: 24px;
+    font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+    font-weight: normal;
+    font-size: 20px;
+    color: #ffffff;
+    font-style: normal;
+    text-transform: none;
+  }
+}
+
+.region {
+  width: 985px;
+  height: 97px;
+  margin-bottom: 30px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  // background-color: pink;
+  .region_shi {
+    width: 130px;
+    height: 90px;
+    background: url(../../assets/img/shi.png) no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+    > div {
+      font-family: Alibaba PuHuiTi 3;
+      font-weight: normal;
+      font-size: 20px;
+      text-align: center;
+      font-style: normal;
+      text-transform: none;
+      line-height: 80px;
+      background: linear-gradient(to bottom, #ffffff 0%, #88eaff 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .region_shi_active {
+    width: 130px;
+    height: 80px;
+    background: url(../../assets/img/shi_active.png) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .region_pianqu {
+    width: 717px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 3px;
+    overflow: visible; // 防止内容被裁剪
+    .region_pianqu_btn {
+      width: 87px;
+      height: 42px;
+      background: url(../../assets/img/qu.png) no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 2; // 设置较低层级，避免覆盖按钮
+      cursor: pointer;
+
+      > div {
+        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+        font-weight: normal;
+        font-size: 14px;
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+        background: linear-gradient(to bottom, #ffffff 0%, #88eaff 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+
+    .region_pianqu_btn_active {
+      background: url(../../assets/img/qu_active.png) no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .region_tuceng {
+    width: 98px;
+    height: 100%;
+    background: url(../../assets/img/图层.png) no-repeat;
+    background-size: 100% 100%;
+    cursor: pointer;
+  }
+
+  .region_bg {
+    position: absolute;
+    bottom: -26px;
+    left: -40px;
+    width: 1048px;
+    height: 69px;
+    background: url(../../assets/img/qu_bg.png) no-repeat;
+    background-size: 100% 100%;
+    z-index: 1; // 设置较低层级，避免覆盖按钮
+  }
+}
+
+.global {
+  position: relative;
+  background: url(../../assets/img/全球.png) no-repeat;
+  width: 140px;
+  height: 63px;
+  display: flex;
+  cursor: pointer;
+  .global_text {
+    position: absolute;
+    top: 18px;
+    right: 24px;
+    font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+    font-weight: normal;
+    font-size: 20px;
+    color: #ffffff;
+    font-style: normal;
+    text-transform: none;
+  }
+}
+</style>

src/views/index.vue

@@ -28,9 +28,14 @@
     <div class="home_content_right">
       <RightPage :activeIndex="activeIndex"></RightPage>
     </div>
+
+
+    <!-- 底部片区图层按钮 -->
+    <AreaLayerSwitch></AreaLayerSwitch>
   </div>
 </template>
 <script setup>
+import  AreaLayerSwitch  from '../components/AreaLayerSwitch/index'
 import LeftPage from './left/index.vue'
 import RightPage from './right/index.vue'
 import { storeToRefs } from 'pinia'

src/views/left/dialog/ProgressInDisposalDialog.vue

@@ -87,7 +87,7 @@ function handleRowClick() {}
   // background: url('../../../assets/img/疫情风险数据弹窗(1).png');
   background-size: 100% 100%;
   position: absolute;
-  top: 30px;
+  top: 10px;
   right: -616px;
   color: azure;
   box-sizing: border-box;