diff --git a/src/assets/bottom/btn-bg-active.png b/src/assets/bottom/btn-bg-active.png
new file mode 100644
index 0000000..b55ac8f
Binary files /dev/null and b/src/assets/bottom/btn-bg-active.png differ
diff --git a/src/assets/bottom/btn-bg.png b/src/assets/bottom/btn-bg.png
new file mode 100644
index 0000000..7c9e75d
Binary files /dev/null and b/src/assets/bottom/btn-bg.png differ
diff --git a/src/views/BottomPanel/index.vue b/src/views/BottomPanel/index.vue
index ad47edf..c88900e 100644
--- a/src/views/BottomPanel/index.vue
+++ b/src/views/BottomPanel/index.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="bottom-panel">
-    <slot name="default"></slot>
+    <div class="tool-item active">水库</div>
+    <div class="tool-item">水闸</div>
+    <div class="tool-item">堤防</div>
   </div>
 </template>
 
@@ -10,4 +12,43 @@ defineOptions({
 });
 </script>
 
-<style scoped></style>
+<style scoped lang="less">
+.bottom-panel {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  height: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  .tool-item {
+    width: 152px;
+    height: 48px;
+    border-radius: 4px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    background: url("@/assets/bottom/btn-bg.png") no-repeat;
+    backdrop-filter: blur(10px);
+
+    font-family: Source Han Sans;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 23.4px;
+    text-align: right;
+    letter-spacing: 0px;
+
+    color: #ffffff;
+    cursor: pointer;
+    &:hover,
+    &.active {
+      background: url("@/assets/bottom/btn-bg-active.png") no-repeat;
+    }
+  }
+}
+</style>
diff --git a/src/views/Main/index.vue b/src/views/Main/index.vue
index bcca8c8..96c389e 100644
--- a/src/views/Main/index.vue
+++ b/src/views/Main/index.vue
@@ -1,17 +1,22 @@
 <template>
   <LeftPanel>
-    <Drawer style="width: 458px">
+    <Drawer style="width: 458px" v-if="showLeftDrawer">
       <ProjectCountCard />
       <MonitoringCard />
       <InspectionCard />
     </Drawer>
+    <RegionSelect />
   </LeftPanel>
   <RightPanel>
-    <Drawer style="width: 460px">
+    <div>
+      <div class="top"></div>
+      <div class="bottom"></div>
+    </div>
+    <Drawer style="width: 460px" v-if="showRightDrawer">
       <SafetyOverviewCard />
     </Drawer>
   </RightPanel>
-  <BottomPanel></BottomPanel>
+  <BottomPanel v-if="showBottomPanel"></BottomPanel>
   <Map></Map>
 </template>
 
@@ -26,9 +31,38 @@ import InspectionCard from "./InspectionCard/index.vue";
 import SafetyOverviewCard from "./SafetyOverviewCard/index.vue";
 
 import Map from "./Map/index.vue";
+import RegionSelect from "../RegionSelect/index.vue";
+import { onBeforeUnmount, onMounted, ref } from "vue";
 defineOptions({
   name: "main",
 });
+const showLeftDrawer = ref(true);
+const showRightDrawer = ref(true);
+const showBottomPanel = ref(true);
+
+onMounted(() => {
+  window.$bus.$on("open-left-panel", () => {
+    showLeftDrawer.value = true;
+  });
+  window.$bus.$on("close-left-panel", () => {
+    showLeftDrawer.value = false;
+  });
+  window.$bus.$on("open-right-panel", () => {
+    showRightDrawer.value = true;
+  });
+  window.$bus.$on("close-right-panel", () => {
+    showRightDrawer.value = false;
+  });
+  window.$bus.$on("open-bottom-panel", () => {
+    showBottomPanel.value = true;
+  });
+  window.$bus.$on("close-bottom-panel", () => {
+    showBottomPanel.value = false;
+  });
+});
+onBeforeUnmount(() => {
+  window.$bus.$all_off();
+});
 </script>
 
 <style scoped></style>
diff --git a/src/views/RegionSelect/index.vue b/src/views/RegionSelect/index.vue
new file mode 100644
index 0000000..5ae329a
--- /dev/null
+++ b/src/views/RegionSelect/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="region-select">
+    <span class="title">行政区划</span>
+    <el-select size="small" class="sy-region-select">
+      <el-option label="广东省" value="1"></el-option>
+    </el-select>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "RegionSelect",
+});
+</script>
+
+<style scoped lang="less">
+.region-select {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 32px;
+  border-radius: 4px;
+  overflow: hidden;
+  .title {
+    background: #36b29e;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 5px 10px;
+    font-family: Source Han Sans;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 22px;
+    text-align: right;
+    letter-spacing: 0px;
+
+    /* 文字&图标/Font Wh1 */
+    color: rgba(255, 255, 255, 0.9);
+  }
+
+  :deep(.sy-region-select) {
+    width: 194px;
+    background: rgba(255, 255, 255, 0.8);
+    color: rgba(0, 0, 0, 0.9);
+    .sy-input--small .sy-input__wrapper {
+      .sy-select__caret {
+        color: rgba(0, 0, 0, 0.9);
+      }
+    }
+    ::-webkit-input-placeholder {
+      color: rgba(0, 0, 0, 0.9);
+    }
+  }
+}
+</style>