diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/airCurtain.png b/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/airCurtain.png
new file mode 100644
index 0000000..a4424ae
Binary files /dev/null and b/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/airCurtain.png differ
diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/fan.png b/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/fan.png
new file mode 100644
index 0000000..1630fe3
Binary files /dev/null and b/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/fan.png differ
diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/highSpeed.png b/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/highSpeed.png
new file mode 100644
index 0000000..108b347
Binary files /dev/null and b/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/highSpeed.png differ
diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/hotAir.png b/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/hotAir.png
new file mode 100644
index 0000000..353e987
Binary files /dev/null and b/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/hotAir.png differ
diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/lowSpeed.png b/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/lowSpeed.png
new file mode 100644
index 0000000..fd0f338
Binary files /dev/null and b/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/lowSpeed.png differ
diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/mediumSpeed.png b/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/mediumSpeed.png
new file mode 100644
index 0000000..a593d0f
Binary files /dev/null and b/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/mediumSpeed.png differ
diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/state-open.png b/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/state-open.png
new file mode 100644
index 0000000..d26ee3e
Binary files /dev/null and b/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/state-open.png differ
diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/state-success.png b/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/state-success.png
new file mode 100644
index 0000000..f6e8d81
Binary files /dev/null and b/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/state-success.png differ
diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/windowIcon.png b/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/windowIcon.png
new file mode 100644
index 0000000..f292bc6
Binary files /dev/null and b/hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/windowIcon.png differ
diff --git a/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/boxModel.vue b/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/boxModel.vue
new file mode 100644
index 0000000..f71790a
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/boxModel.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="box-model">
+    <div class="box-model-title title">
+      {{ dataSource.title }}
+    </div>
+    <div class="box-model-bottom">
+      <div class="box-model-item">
+        <div style="width: 100%; height: 50%">
+          <img width="40" src="../../image/ventilationSystem/state-success.png" />
+        </div>
+        <!--正常 故障 维修 告警  -->
+        <span
+          :style="{
+            color: {
+              '1': '#0dffff',
+              '2': 'rgba(255, 118, 54, 1)',
+              '3': 'rgba(255, 188, 70, 1)',
+              '4': 'rgba(243, 97, 99, 1)',
+            }[1],
+          }">
+          正常
+        </span>
+      </div>
+      <div v-if="dataSource.type === 'fan'" class="box-model-item">
+        <div style="width: 100%; height: 50%">
+          <img width="40" src="../../image/ventilationSystem/highSpeed.png" />
+        </div>
+        <!-- 低速 中速 高速 关闭 -->
+        <span
+          :style="{
+            color: [
+              'rgba(85, 209, 255, 1)',
+              'rgba(0, 144, 255, 1)',
+              'rgba(87, 87, 255, 1)',
+              'rgba(191, 205, 226, 1)',
+            ][2],
+            fontSize: '12px',
+          }">
+          高速启动</span
+        >
+      </div>
+      <div v-if="dataSource.type !== 'fan'" class="box-model-item">
+        <div style="width: 100%; height: 50%">
+          <img width="40" src="../../image/ventilationSystem/state-open.png" />
+        </div>
+        <!-- 开启 关闭 -->
+        <span
+          :style="{
+            color: ['rgba(0, 255, 210, 1)', 'rgba(191, 205, 226, 1)'][0],
+            fontSize: '12px',
+          }">
+          开启</span
+        >
+      </div>
+      <div v-if="dataSource.type === 'airCurtain'" class="box-model-item">
+        <div style="width: 100%; height: 50%">
+          <img width="40" src="../../image/ventilationSystem/hotAir.png" />
+        </div>
+        <!-- 冷风 热风 -->
+        <span
+          :style="{
+            color: ['rgba(85, 209, 255, 1)', 'rgba(252, 247, 112, 1)'][1],
+            fontSize: '12px',
+          }">
+          热风
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  const props = defineProps({
+    dataSource: {
+      type: Object,
+      default: () => ({ title: '', number: 0 }), // 假设默认值还包括number属性
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .box-model {
+    min-width: 162px;
+    height: 110px;
+    background: inherit;
+    background-color: rgba(2, 29, 71, 0.9);
+    box-sizing: border-box;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(13, 255, 255, 1);
+    border-radius: 8px;
+    .title {
+      position: relative;
+      padding-left: 9px;
+      &::before {
+        content: '';
+        position: absolute;
+        left: 10px;
+        top: 90%;
+        transform: translateY(-50%);
+        height: 10px;
+        width: 2.5px;
+        border-radius: 1px;
+        background-color: #0dffff;
+      }
+    }
+    .box-model-title {
+      width: 100%;
+      height: 20px;
+      font-size: 12px;
+      color: #0dffff;
+      padding: 12px 20px;
+    }
+    .box-model-bottom {
+      width: auto;
+      height: 70px;
+      margin-top: 12px;
+      display: flex;
+      color: white;
+      font-size: 12px;
+      display: flex;
+    }
+    .box-model-item {
+      width: 80px;
+      height: 100%;
+      display: flex;
+      align-items: center; /* 垂直居中 */
+      justify-content: center; /* 水平居中 */
+      text-align: center; /* 文字水平居中 */
+      flex-wrap: wrap;
+    }
+  }
+</style>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/dialogStyle.less b/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/dialogStyle.less
new file mode 100644
index 0000000..26c41ae
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/dialogStyle.less
@@ -0,0 +1,168 @@
+.out-dialog {
+  position: fixed;
+  right: 496px;
+  width: 500px;
+  height: 100%;
+  z-index: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  box-sizing: border-box;
+  color: rgb(255, 83, 0);
+  background: black;
+  display: flex;
+  padding: 25px;
+  flex-direction: column;
+  transition: all ease 0.5s;
+  .content {
+    overflow-y: scroll;
+    .div-operation {
+      display: inline-block;
+      width: 3px;
+      height: 13px;
+      opacity: 1;
+      border-radius: 1px;
+      background: rgba(67, 136, 251, 1);
+    }
+    .text-operation {
+      display: inline-block;
+      color: rgba(255, 255, 255, 1);
+      font-size: 16px;
+      font-weight: 700;
+      margin-left: 5px;
+    }
+    .j-box {
+      background-color: #000;
+      opacity: 1;
+      z-index: 99999;
+      overflow-y: scroll;
+      .journal {
+        padding: 1% 3%;
+        width: 100%;
+        height: 150px;
+        background-color: rgba(0, 0, 0);
+        border-radius: 12px;
+        border: 2px solid transparent;
+        border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1;
+        .title-img {
+          padding-top: 6px;
+        }
+      }
+      .imgText {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    
+        .ztzm {
+          display: flex;
+          align-items: center;
+        }
+    
+        .cxbtn {
+          color: rgba(255, 255, 255, 1);
+          border: none;
+          border-radius: 6px;
+          width: 59.79px;
+          height: 32px;
+          opacity: 1;
+          background: linear-gradient(
+            180deg,
+            rgba(255, 187, 0, 1) 0%,
+            rgba(255, 112, 3, 1) 91.21%,
+            rgba(255, 129, 3, 1) 100%
+          );
+          cursor: pointer;
+        }
+      }
+      .btn-box {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr;
+        grid-row-gap: 15px;
+        .btn-item {
+          text-align: center;
+          display: flex;
+          align-content: space-between;
+          .left {
+            width: 70px;
+            height: 35px;
+            line-height: 35px;
+            border-radius: 4px;
+            background: linear-gradient(
+              180deg,
+              rgba(1, 206, 255, 1) 0%,
+              rgba(0, 150, 229, 1) 100%
+            );
+            color: rgba(255, 255, 255, 1);
+            font-size: 14px;
+            font-weight: 400;
+          }
+          .right {
+            width: 140px;
+            height: 35px;
+            line-height: 35px;
+            :first-child {
+              color: white;
+            }
+            span {
+              vertical-align: middle;
+            }
+            img {
+              padding: 0 5px;
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  .button-box {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+    height: 60px;
+    position: absolute;
+    background-color: transparent;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    .execute {
+      margin-right: 10px;
+      width: 74px;
+      height: 40px;
+      opacity: 1;
+      cursor: pointer;
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: 400;
+      border: 0;
+      margin-left: 10px;
+    }.cancel {
+      margin-right: 10px;
+      width: 74px;
+      height: 40px;
+      opacity: 1;
+      cursor: pointer;
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: 400;
+      border: 0;
+      margin-left: 10px;
+    }
+    .execute {
+      background: rgb(67, 136, 251);
+      color: white;
+    }
+    .cancel {
+      background: white;
+      color: black;
+    }
+  }
+}
+
+.fade-enter-active, .fade-leave-active {
+  transform: translateX(0px);
+}
+.fade-enter-from, .fade-leave-to {
+  transform: translateX(496px);
+}
\ No newline at end of file
diff --git a/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/fanControl.vue b/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/fanControl.vue
new file mode 100644
index 0000000..dad0fa7
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/fanControl.vue
@@ -0,0 +1,201 @@
+<template>
+  <a-spin :spinning="isLoading">
+    <!-- 排风扇 -->
+    <div>
+      <div class="circuit-area">
+        <div class="circuit-tab"></div>
+        <span class="circuit-text">排风扇</span>
+        <div class="btn2">
+          <button
+            class="openPlan"
+            :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
+            @click="togglePlan2">
+            {{ isPlanEnabled2 ? '启用开关' : '禁用开关' }}
+          </button>
+          <a-switch
+            v-model:checked="selectAllCheckbox"
+            :disabled="singleSelection"
+            :class="{
+              'blue-background': selectAllCheckbox,
+              'grey-background': !selectAllCheckbox,
+            }"
+            @change="toggleAllSelection" />
+          <button class="allBtn">全选</button>
+          <button class="both" @click="selectAll">
+            {{ singleSelection ? '多选' : '单选' }}
+          </button>
+        </div>
+      </div>
+      <div class="btnArea">
+        <template v-if="!showAllButtons">
+          <button
+            v-for="(button, index) in limitedButtons2"
+            :key="index"
+            :class="{ btn: true, selected: button.selected }"
+            class="zmhlbtn"
+            @click="changeLine(button)">
+            <stop-outlined v-if="button.ctrlStatus" />
+            {{ button.name }}
+          </button>
+          <div style="margin-top: 10px" v-if="limitedButtons2.length > 0">
+            <span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
+          </div>
+        </template>
+        <template v-else>
+          <button
+            v-for="(button, index) in buttons2"
+            :key="index"
+            :class="{ btn: true, selected: button.selected }"
+            class="zmhlbtn"
+            @click="changeLine(button)">
+            <stop-outlined v-if="button.ctrlStatus" />
+            {{ button.name }}
+          </button>
+          <div style="margin-top: 10px" v-if="buttons2.length > 0">
+            <span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
+          </div>
+        </template>
+      </div>
+    </div>
+    <!-- 控制模式部分 -->
+    <div>
+      <div class="control-area">
+        <div class="control-tab"></div>
+        <span class="control-text"> 控制模式 </span>
+      </div>
+      <!-- 控制模式按钮部分 -->
+      <div class="control-mode-btn-area" v-show="thisButton2.code">
+        <button
+          v-for="(button3, index) in controlMode"
+          :key="index"
+          class="btn"
+          :disabled="button3.value != 3"
+          :class="{ selected: thisButton2.mode.value == button3.value }"
+          @click="selectButton3(button3)">
+          {{ button3.label }}
+        </button>
+      </div>
+    </div>
+    <!-- 控制场景 -->
+    <div>
+      <div class="control-area">
+        <div class="control-tab"></div>
+        <span class="control-text"> 控制场景 </span>
+      </div>
+      <!-- 控制模式按钮部分 -->
+      <div class="control-mode-btn-area" v-show="thisButton2.code">
+        <button
+          v-for="(button3, index) in controlMode"
+          :key="index"
+          class="btn"
+          :disabled="button3.value != 3"
+          :class="{ selected: thisButton2.mode.value == button3.value }"
+          @click="selectButton3(button3)">
+          {{ button3.label }}
+        </button>
+      </div>
+    </div>
+    <div class="div-add">
+      <button class="cancel" @click="addModal">刷新</button>
+      <button class="add" @click="addModal">执行</button>
+    </div>
+  </a-spin>
+</template>
+<script setup lang="ts">
+  import { DownOutlined, UpOutlined, StopOutlined } from '@ant-design/icons-vue';
+  import { ref, computed, onMounted } from 'vue';
+
+  const isLoading = ref(false);
+  // 开关启用/禁用状态
+  const isPlanEnabled2 = ref(true);
+  // 按钮区展开与收起状态
+  const showAllButtons = ref(false);
+  // 全选状态
+  const selectAllCheckbox = ref(false);
+  // 控制模式枚举
+  const controlMode = ref([]);
+  // 是否单选，状态
+  let singleSelection = ref(true);
+  // 照明回路所有按钮
+  const buttons2 = ref([]);
+  // 默认最多展示8个按钮
+  const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
+  // 开关启用/禁用切换事件
+  const togglePlan2 = () => {};
+  // 内侧弹窗显隐
+  const executeVisible = ref<boolean>(false);
+
+  const submitChangeList = () => {};
+  // 多选与单选切换事件
+  const selectAll = () => {
+    selectAllCheckbox.value = false;
+    singleSelection.value = !singleSelection.value;
+  };
+  // 储存当前选中的回路
+  const thisButton2 = ref({
+    code: '',
+    name: '',
+    pcode: '',
+    mode: {
+      value: -1,
+    },
+    scene: {
+      value: -1,
+    },
+  });
+  // 控制模式 - 按钮切换
+  const selectButton3 = (button3: any) => {
+    let checked = thisButton2.value.mode;
+    console.log(button3.value, '---', checked.value);
+    // 如果点击了相同的按钮，则未作出修改
+    if (checked.value === button3.value) {
+      return;
+    }
+    checked.value = button3.value;
+  };
+
+  // 全选切换事件（switch）
+  const toggleAllSelection = () => {};
+  onMounted(() => {});
+</script>
+<style lang="less" scoped>
+  @import './dialogStyle.less';
+  @import './tabs1.less';
+  .div-add {
+    height: 64px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    border-top: 1px solid #606879;
+    width: 496px;
+    .add {
+      width: 74px;
+      height: 40px;
+      opacity: 1;
+      border-radius: 4px;
+      background: #2778ff;
+      border: #2778ff;
+      font-size: 14px;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 1);
+      cursor: pointer;
+      margin-right: 20px;
+    }
+    .cancel {
+      width: 74px;
+      height: 40px;
+      opacity: 1;
+      border-radius: 4px;
+      background: #ffffff;
+      border: #ffffff;
+      font-size: 14px;
+      font-weight: 400;
+      color: #666666;
+      cursor: pointer;
+      margin-right: 12px;
+    }
+  }
+</style>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/fanPlant.vue b/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/fanPlant.vue
new file mode 100644
index 0000000..05bb3c6
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/fanPlant.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="div-add">
+    <button class="add" @click="addModal">添加</button>
+  </div>
+  <table class="custom-table table1">
+    <thead>
+      <tr :style="{ background: 'rgba(35,45,69)' }">
+        <th>序号</th>
+        <th>执行时间</th>
+        <th>计划名称</th>
+        <th>状态</th>
+        <th>操作</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(row, index) in dataSource" :key="index">
+        <td>{{ index + 1 }}</td>
+        <td>{{ row.startTime }}</td>
+        <td>{{ row.planName }}</td>
+        <td v-if="row.planStatus == '2'">
+          <button
+            style="
+              font-size: 12px;
+              background: rgba(57, 215, 187, 0.1);
+              color: rgb(57, 215, 187);
+              border: 1px solid rgb(57, 215, 187);
+            ">
+            已执行
+          </button>
+        </td>
+        <td v-if="row.planStatus == '1'">
+          <button
+            style="
+              font-size: 12px;
+              background: rgba(243, 97, 99, 0.1);
+              border: 1px solid rgba(243, 97, 99);
+              color: rgba(243, 97, 99);
+            ">
+            待执行
+          </button>
+        </td>
+        <td>
+          <div class="tabReboot" @click="restartPlan(row.id)">重启</div>
+          <a-popconfirm
+            title="此操作将永久删除该条数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="deletePlan(row.id)">
+            <div class="tabDelete">删除</div>
+          </a-popconfirm>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="out-dialog" v-if="addVisible">
+    <div class="content" v-if="addVisible">
+      <div class="div-operation"></div>
+      <span class="text-operation">计划库</span>
+    </div>
+    <div style="margin-top: 20px">
+      <a-transfer
+        v-model:target-keys="targetKeys"
+        :data-source="transferData"
+        show-search
+        :filter-option="filterOption"
+        :render="(item: any) => item.title"
+        @change="handleChange"
+        :style="{ color: 'rgba(255,255,255,1)' }"
+        @search="handleSearch"
+        :listStyle="{ border: '2px solid rgba(25,74,125,1)', height: 'calc(100vh - 200px)' }" />
+    </div>
+    <div style="width: 100%; height: 60px"></div>
+    <div class="button-box">
+      <button class="cancel" @click="addVisible = false">取消</button>
+      <button class="execute" @click="sendPlan">确定</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  // 请求
+  import { http } from '/nerv-lib/util/http';
+  import { lightingManage } from '/@/api/IlluminationInfo';
+  import { message } from 'ant-design-vue';
+
+  // 初始化 ===========================================================
+
+  onMounted(() => {
+    // 计划表格
+    getTable();
+    // 穿梭框原始数据
+    getLeftPlan();
+  });
+
+  // tab页部分 ========================================================
+
+  // 表格数据
+  const dataSource = ref([]);
+  // 获得表格数据
+  const getTable = () => {
+    http.get(lightingManage.getPlanTable, {}).then((res) => {
+      dataSource.value = res.data;
+    });
+  };
+  // 删除表格中的计划
+  const deletePlan = (id: String) => {
+    http.delete(lightingManage.deletePlan, [id]).then(() => {
+      message.success('操作成功');
+      getTable();
+    });
+  };
+  // 重启表格中的计划
+  const restartPlan = (id: String) => {
+    http.post(lightingManage.restartPlan, { planId: id }).then(() => {
+      message.success('操作成功');
+      getTable();
+    });
+  };
+
+  // tab页弹窗部分 ====================================================
+
+  // 添加弹窗控制变量
+  const addVisible = ref(false);
+  // 打开弹窗
+  const addModal = () => {
+    addVisible.value = true;
+  };
+
+  // 穿梭框部分 =======================================================
+
+  // 穿梭框数据
+  const transferData = ref([]) as any;
+  // 获得穿梭框原始数据
+  const getLeftPlan = () => {
+    http.get(lightingManage.getLeftPlan, {}).then((res) => {
+      let arr = [];
+      res.data.forEach((item: any) => {
+        arr.push({
+          key: item.id,
+          title: item.planName,
+        });
+      });
+      transferData.value = arr;
+    });
+  };
+
+  const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
+    console.log(keys, direction, moveKeys);
+  };
+  const handleSearch = (dir: string, value: string) => {
+    console.log('search:', dir, value);
+  };
+  // 穿梭框选中数据
+  const targetKeys = ref<string[]>([]);
+  // 将穿梭框选中的计划提交
+  const sendPlan = () => {
+    if (targetKeys.value.length < 1) {
+      return message.info('没有选择任何计划');
+    }
+    http.post(lightingManage.submitLeftPlan, targetKeys.value).then(() => {
+      message.success('添加成功');
+      // 如果发送成功，则刷新表格
+      getTable();
+      getLeftPlan();
+    });
+  };
+
+  const filterOption = (inputValue: string, option: any) => {
+    return option.description.indexOf(inputValue) > -1;
+  };
+</script>
+<style lang="less" scoped>
+  @import './dialogStyle.less';
+
+  // 右下角添加按钮
+  .div-add {
+    height: 64px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    margin-right: 20px;
+    .add {
+      width: 74px;
+      height: 40px;
+      opacity: 1;
+      border-radius: 4px;
+      background: rgba(67, 136, 251, 1);
+      border: rgba(67, 136, 251, 1);
+      font-size: 14px;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 1);
+      cursor: pointer;
+    }
+  }
+  // 表格
+  .custom-table {
+    border-collapse: collapse;
+    width: 416px;
+    height: 60px;
+    color: rgba(255, 255, 255, 1);
+  }
+  .custom-table th,
+  .custom-table td {
+    border: 1px solid rgba(163, 192, 243, 1);
+    text-align: left;
+    padding: 8px;
+    text-align: center;
+  }
+  .table1 {
+    margin-top: 20px;
+    width: 100%;
+    border: 1px solid rgba(255, 255, 255);
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.1);
+    // 表格中的操作按钮
+    .tabReboot,
+    .tabDelete {
+      border: none;
+      display: inline-block;
+      background-color: rgba(0, 0, 0, 0);
+      font-size: 14px;
+      font-weight: 400;
+      letter-spacing: 0;
+      line-height: 20px;
+      color: rgba(67, 136, 251, 1);
+      cursor: pointer;
+    }
+    .tabReboot {
+      margin-right: 8px;
+    }
+    .tabReboot::active {
+      color: white !important;
+    }
+    .tabDelete::active {
+      color: white;
+    }
+  }
+  ::v-deep(.ant-transfer) {
+    // 屏蔽自带的hover效果
+    .ant-transfer-list-content-item:hover {
+      background: black;
+    }
+  }
+</style>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/tabs1.less b/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/tabs1.less
new file mode 100644
index 0000000..e0f02c9
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/tabs1.less
@@ -0,0 +1,423 @@
+// 抽屉
+.drawer-fan {
+  .light-area,
+  .circuit-area,
+  .control-area,
+  .control-scene-area,
+  .light-parameters-area {
+    width: 100%;
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+  }
+
+  .light-area-tab,
+  .circuit-tab,
+  .control-tab,
+  .control-scene-tab,
+  .light-parameters-tab {
+    width: 5px;
+    height: 23px;
+    opacity: 1;
+    background: rgba(26, 174, 251, 1);
+    margin-right: 4px;
+  }
+
+  .light-area-text,
+  .circuit-text,
+  .control-text,
+  .control-scene-text,
+  .light-parameters-text {
+    font-size: 14px;
+    color: white;
+    padding-left: 5px;
+    line-height: 23px;
+    width: 110px;
+    height: 23px;
+    background: linear-gradient(270deg, rgba(86, 221, 253, 0) 0%, rgba(25, 176, 255, 1) 100%);
+    user-select: none;
+  }
+
+  .light-area-tab,
+  .light-area-text {
+    display: inline-block;
+    justify-content: center;
+  }
+  .plan {
+    border: none;
+    font-size: 14px;
+    font-weight: 400;
+    border-radius: 5px;
+    vertical-align: top;
+    margin-left: 235px;
+    width: 88px;
+    height: 32px;
+    color: white;
+    cursor: pointer;
+  }
+  .plan.enabled {
+    background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
+  }
+  .plan.disabled {
+    background-color: red;
+  }
+  .plan:disabled {
+    cursor: not-allowed;
+  }
+  .openPlan {
+    cursor: pointer;
+    border: none;
+    font-size: 14px;
+    font-weight: 400;
+    border-radius: 5px;
+    color: white;
+    vertical-align: top;
+    width: 88px;
+    height: 32px;
+  }
+  .openPlan.enabled2 {
+    background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
+  }
+
+  .openPlan.disabled2 {
+    background-color: red;
+  }
+
+  .openPlan:disabled {
+    cursor: not-allowed;
+  }
+
+  .btn2 {
+    display: flex;
+    align-items: center;
+    margin-left: 80px;
+  }
+
+  .openzm {
+    cursor: pointer;
+    color: rgba(34, 183, 255, 1);
+    margin-left: 20px;
+    font-size: 14px;
+  }
+
+  .custom-checkbox {
+    width: 13px;
+    height: 13px;
+  }
+
+  .both {
+    width: 59.79px;
+    height: 32px;
+    opacity: 1;
+    background: linear-gradient(180deg,
+        rgba(255, 187, 0, 1) 0%,
+        rgba(255, 112, 3, 1) 91.21%,
+        rgba(255, 129, 3, 1) 100%);
+    margin-left: 8px;
+    font-size: 12px;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+  .btn2 {
+    button {
+      margin: 0 5px;
+    }
+  }
+
+  .allBtn {
+    border: 0;
+    width: 40px;
+    color: white;
+    background-color: transparent;
+  }
+
+  .blue-background.ant-switch-checked {
+    background-color: linear-gradient(180deg,
+        rgba(1, 206, 255, 1) 0%,
+        rgba(0, 150, 229, 1) 100%) !important;
+  }
+
+  .grey-background.ant-switch {
+    background-color: grey !important;
+  }
+
+  .blue-background.ant-switch-checked .ant-switch-handle {
+    background-color: linear-gradient(180deg,
+        rgba(1, 206, 255, 1) 0%,
+        rgba(0, 150, 229, 1) 100%) !important;
+  }
+
+  .grey-background.ant-switch .ant-switch-handle {
+    background-color: grey !important;
+  }
+
+  p {
+    color: white;
+  }
+
+  .area,
+  .btnArea,
+  .control-mode-btn-area,
+  .control-scene-btn-area {
+    margin-left: -17px;
+
+    button {
+      width: 21%;
+      padding: 0 2%;
+    }
+  }
+
+  .btn {
+    width: 92px;
+    height: 40px;
+    border-radius: 4px;
+    opacity: 1;
+    margin-top: 10px;
+    margin-left: 17px;
+    font-size: 14px;
+    font-weight: 400;
+    opacity: 1;
+    border: 1px solid rgba(207, 212, 219, 1);
+    line-height: 20.27px;
+    color: white;
+    text-align: center;
+    vertical-align: top;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .selected {
+    background: linear-gradient(180deg, rgba(201, 245, 255, 1) 0%, rgba(138, 215, 255, 1) 100%);
+    color: rgba(0, 61, 90, 1);
+    border: 1px solid white;
+  }
+
+  .btn:hover {
+    background-color: rgba(207, 212, 219, 1);
+  }
+
+  .btn:active {
+    background-color: rgba(102, 102, 102, 1);
+    color: white;
+  }
+
+  .circuit-area,
+  .control-scene-area,
+  .light-parameters-area {
+    left: 51px;
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  .circuit-tab,
+  .circuit-text {
+    display: inline-block;
+  }
+
+  .batch {
+    width: 60px;
+    height: 32px;
+    opacity: 1;
+    border: 1px solid rgba(67, 136, 251, 1);
+    color: rgba(67, 136, 251, 1);
+    border-radius: 5px;
+    background-color: white;
+    margin-left: 11px;
+  }
+
+  .control-area {
+    left: 51px;
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  .control-tab,
+  .control-text {
+    display: inline-block;
+  }
+
+  :deep(.cell) {
+    text-align: center;
+  }
+
+  :deep(#pane-first) {
+    height: 100%;
+  }
+
+  .control-scene-tab,
+  .control-scene-text {
+    display: inline-block;
+  }
+
+  .light-parameters-tab,
+  .light-parameters-text {
+    display: inline-block;
+  }
+
+  .light-parameters-textarea>p {
+    height: 100%;
+    display: flex;
+    border: 1px solid rgba(236, 239, 245, 1);
+    justify-content: center;
+    align-items: center;
+  }
+
+  .bottom {
+    width: 100%;
+    height: 64px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+  }
+
+  .execute {
+    margin-right: 20px;
+    width: 74px;
+    height: 40px;
+    opacity: 1;
+    cursor: pointer;
+    border-radius: 4px;
+    background: rgba(67, 136, 251, 1);
+    font-size: 14px;
+    font-weight: 400;
+    color: white;
+    border: 0;
+    margin: 0 10px;
+  }
+
+  .flushed {
+    width: 74px;
+    height: 40px;
+    cursor: pointer;
+    opacity: 1;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(102, 102, 102, 1);
+    background: white;
+    border: 1px solid rgba(193, 197, 204, 1);
+    margin: 0 10px;
+  }
+
+  :deep(.ant-table-pagination) {
+    visibility: hidden;
+  }
+
+  .drawer-content {
+    margin-left: 20px;
+  }
+
+  .arrow-indicator {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    z-index: 1;
+  }
+
+  .drawer-title1 {
+    position: fixed;
+    width: 33px;
+    height: 33px;
+    top: 0;
+    bottom: 0;
+    right: 20px;
+    margin: auto;
+    z-index: 99999;
+  }
+
+  .drawer-title2 {
+    position: fixed;
+    width: 33px;
+    height: 33px;
+    top: 0;
+    bottom: 0;
+    right: 495px;
+    margin: auto;
+    z-index: 99999;
+  }
+
+  .arrowbtn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 28px;
+    height: 28px;
+    background: rgba(0, 0, 0, 1);
+    opacity: 0.5;
+    border: none;
+  }
+
+  :deep(.ant-tabs-tab-btn) {
+    color: white;
+  }
+
+  :deep(.ant-table) {
+    background-color: transparent;
+  }
+
+  :deep(.ant-table-bordered) {
+    background-color: transparent;
+  }
+
+  :deep(.ant-table-thead) {
+    background-color: transparent;
+  }
+
+  :deep(.ant-table-cell) {
+    background-color: transparent;
+    color: #fff;
+  }
+
+  .custom-table {
+    border-collapse: collapse;
+    width: 416px;
+    height: 60px;
+    color: rgba(255, 255, 255, 1);
+  }
+
+  .custom-table th,
+  .custom-table td {
+    border: 1px solid rgba(163, 192, 243, 1);
+    text-align: left;
+    padding: 8px;
+    text-align: center;
+  }
+
+  .table1 {
+    margin-top: 20px;
+    width: 100%;
+    cellspacing: 0;
+    cellpadding: 0;
+    border: 1px solid rgba(255, 255, 255);
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .light-area,
+  .circuit-area,
+  .control-area,
+  .control-scene-area,
+  .light-parameters-area {
+    width: 100%;
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+  }
+
+  .zmhlbtn {
+    position: relative;
+  }
+
+  // 禁用图标
+  .anticon-stop {
+    position: absolute;
+    right: 3px;
+    bottom: 3px;
+  }
+}
\ No newline at end of file
diff --git a/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/index.vue b/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/index.vue
index a21cac4..ebf278f 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/index.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/index.vue
@@ -65,6 +65,196 @@
         </template>
       </div>
     </transition>
+    <!-- 右侧抽屉的触发按钮 -->
+    <div
+      class="drawer-box-in"
+      v-if="!visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
+      @click="toggleDrawer">
+      <double-left-outlined class="drawer-icon" style="color: white" />
+    </div>
+    <!-- 排风扇 -->
+    <transition name="zep">
+      <div v-if="selectIndex === 4">
+        <template v-for="(item, index) in fanData" :key="index">
+          <!-- 朝左边 -->
+          <template v-if="item.lineType === '1'">
+            <div
+              style="position: absolute"
+              :style="{
+                left: 'calc(' + item.styleText.left + ' - 10.6%)',
+                bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
+              }">
+              <boxModel :dataSource="item" />
+            </div>
+            <img
+              style="width: 50px; height: 75px; position: absolute; z-index: 1"
+              :style="{
+                left: 'calc(' + item.styleText.left + ' - 1.5%)',
+                bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
+                transform: 'rotateY(180deg)',
+              }"
+              src="../image/liftState/lift/line.png" />
+          </template>
+          <!-- 朝右边 -->
+          <template v-if="item.lineType === '2'">
+            <div
+              style="position: absolute"
+              :style="{
+                left: 'calc(' + item.styleText.left + ' + 4.3%)',
+                bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
+              }">
+              <boxModel :dataSource="item" />
+            </div>
+            <img
+              style="width: 50px; height: 75px; position: absolute; z-index: 1"
+              :style="{
+                left: 'calc(' + item.styleText.left + ' + 1.5%)',
+                bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
+                transform: 'rotate(90deg,180deg)',
+              }"
+              src="../image/liftState/lift/line.png" />
+          </template>
+          <img
+            style="width: 42px; height: 42px; position: absolute"
+            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
+            src="../image/ventilationSystem/fan.png" />
+        </template>
+      </div>
+    </transition>
+    <!-- 弹窗操控 -->
+    <a-drawer
+      v-if="selectIndex === 4 && visible"
+      :visible="selectIndex === 4"
+      class="drawer-fan"
+      :width="496"
+      :forceRender="preload"
+      placement="right"
+      :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8, color: 'white' }"
+      :closable="false"
+      id="drawer"
+      :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
+      <!-- 左侧抽屉的关闭按钮 -->
+      <div
+        class="drawer-box-out"
+        v-if="visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
+        @click="toggleDrawer">
+        <double-right-outlined class="drawer-icon" style="color: white" />
+      </div>
+      <a-tabs v-model:activeKey="activeKey">
+        <a-tab-pane key="1" tab="控制面板"> <fanControl /> </a-tab-pane>
+        <a-tab-pane key="2" tab="计划列表" force-render>
+          <fanPlant />
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
+      </a-tabs>
+    </a-drawer>
+    <!-- 风幕机 -->
+    <transition name="zep">
+      <div v-if="selectIndex === 5">
+        <template v-for="(item, index) in airCurtainData" :key="index">
+          <div
+            style="position: absolute"
+            :style="{
+              left: 'calc(' + item.styleText.left + ' - 15.1%)',
+              bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
+            }">
+            <boxModel :dataSource="item" />
+          </div>
+          <img
+            style="width: 50px; height: 75px; position: absolute; z-index: 1"
+            :style="{
+              left: 'calc(' + item.styleText.left + ' - 1.5%)',
+              bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
+              transform: 'rotateY(180deg)',
+            }"
+            src="../image/liftState/lift/line.png" />
+
+          <img
+            style="width: 42px; height: 42px; position: absolute"
+            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
+            src="../image/ventilationSystem/airCurtain.png" />
+        </template>
+      </div>
+    </transition>
+    <!-- 弹窗操控 -->
+    <a-drawer
+      v-if="selectIndex === 5 && visible"
+      :visible="selectIndex === 5"
+      class="drawer-fan"
+      :width="496"
+      :forceRender="preload"
+      placement="right"
+      :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8, color: 'white' }"
+      :closable="false"
+      id="drawer"
+      :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }"
+      :mask="false">
+      <!-- 左侧抽屉的关闭按钮 -->
+      <div
+        class="drawer-box-out"
+        v-if="visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
+        @click="toggleDrawer">
+        <double-right-outlined class="drawer-icon" style="color: white" />
+      </div>
+      <a-tabs v-model:activeKey="activeKey">
+        <a-tab-pane key="1" tab="控制面板"> 风幕机 </a-tab-pane>
+        <a-tab-pane key="2" tab="计划列表" force-render> 计划列表 </a-tab-pane>
+        <a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
+      </a-tabs>
+    </a-drawer>
+    <transition name="zep">
+      <div v-if="selectIndex === 6">
+        <template v-for="(item, index) in windowData" :key="index">
+          <div
+            style="position: absolute"
+            :style="{
+              left: 'calc(' + item.styleText.left + ' - 10.6%)',
+              bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
+            }">
+            <boxModel :dataSource="item" />
+          </div>
+          <img
+            style="width: 50px; height: 75px; position: absolute; z-index: 1"
+            :style="{
+              left: 'calc(' + item.styleText.left + ' - 1.5%)',
+              bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
+              transform: 'rotateY(180deg)',
+            }"
+            src="../image/liftState/lift/line.png" />
+
+          <img
+            style="width: 42px; height: 42px; position: absolute"
+            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
+            src="../image/ventilationSystem/windowIcon.png" />
+        </template>
+      </div>
+    </transition>
+    <!-- 弹窗操控 -->
+    <a-drawer
+      v-if="selectIndex === 6 && visible"
+      :visible="selectIndex === 6"
+      class="drawer-fan"
+      :width="496"
+      :forceRender="preload"
+      placement="right"
+      :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8, color: 'white' }"
+      :closable="false"
+      id="drawer"
+      :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }"
+      :mask="false">
+      <!-- 左侧抽屉的关闭按钮 -->
+      <div
+        class="drawer-box-out"
+        v-if="visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
+        @click="toggleDrawer">
+        <double-right-outlined class="drawer-icon" style="color: white" />
+      </div>
+      <a-tabs v-model:activeKey="activeKey">
+        <a-tab-pane key="1" tab="控制面板"> 电动窗 </a-tab-pane>
+        <a-tab-pane key="2" tab="计划列表" force-render> 计划列表 </a-tab-pane>
+        <a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
+      </a-tabs>
+    </a-drawer>
   </div>
 </template>
 <script lang="ts" setup>
@@ -76,13 +266,17 @@
   import CO2 from '../image/ventilationSystem/CO2.png';
   import ventilatingFan from '../image/ventilationSystem/ventilatingFan.png';
   import window from '../image/ventilationSystem/window.png';
-  import fanMachine from '../image/ventilationSystem/fanMachine.png';
+  import airCurtain from '../image/ventilationSystem/fanMachine.png';
   import selectImg from '../image/airConditioningSystem/selectImg.png';
   import sunRed from '../image/airConditioningSystem/sunRed.png';
   import sunYellow from '../image/airConditioningSystem/sunYellow.png';
   import sunBlue from '../image/airConditioningSystem/sunBlue.png';
 
+  import boxModel from './components/boxModel.vue';
   import singleModel from '../components/singleModel.vue';
+  import fanControl from './components/fanControl.vue';
+  import fanPlant from './components/fanPlant.vue';
+  import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
 
   //图例
   const legend = ref([
@@ -91,11 +285,22 @@
     { url: PM25, name: 'PM2.5' },
     { url: CO2, name: 'CO2浓度' },
     { url: ventilatingFan, name: '排风扇' },
-    { url: fanMachine, name: '风幕机' },
+    { url: airCurtain, name: '风幕机' },
     { url: window, name: '电动窗' },
   ]);
   // 选择的图例
   const selectIndex = ref(0);
+  //选择table
+  const activeKey = ref('1');
+  // 展示
+  const visible = ref(true);
+  // 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
+  const preload = ref(true);
+  // 抽屉 - 开关事件
+  const toggleDrawer = () => {
+    console.log('xxxx');
+    visible.value = !visible.value;
+  };
   //选择方法
   const selectLegend = (item: any, index: any) => {
     if (selectIndex.value !== index) {
@@ -178,6 +383,94 @@
       url: CO2,
     },
   ]);
+  //排风扇
+  const fanData = ref([
+    {
+      title: '排风扇',
+      styleText: { left: '43.2%', bottom: '77.8%' },
+      type: 'fan',
+      lineType: '1',
+    },
+    {
+      title: '排风扇',
+      styleText: { left: '50%', bottom: '77.8%' },
+      type: 'fan',
+      lineType: '2',
+    },
+    {
+      title: '排风扇',
+      styleText: { left: '41.2%', bottom: '27.8%' },
+      type: 'fan',
+      lineType: '1',
+    },
+    {
+      title: '排风扇',
+      styleText: { left: '51.2%', bottom: '27.8%' },
+      type: 'fan',
+      lineType: '2',
+    },
+  ]);
+  // 风幕机
+  const airCurtainData = ref([
+    {
+      title: '风幕机',
+      styleText: { left: '38%', bottom: '57.8%' },
+      type: 'airCurtain',
+    },
+    {
+      title: '风幕机',
+      styleText: { left: '58.5%', bottom: '57.3%' },
+      type: 'airCurtain',
+    },
+    {
+      title: '风幕机',
+      styleText: { left: '64.2%', bottom: '22.8%' },
+      type: 'airCurtain',
+    },
+  ]);
+  // 电动窗
+  const windowData = ref([
+    {
+      title: '电动窗1',
+      styleText: { left: '32%', bottom: '28%' },
+      type: 'window',
+    },
+    {
+      title: '电动窗2',
+      styleText: { left: '33.5%', bottom: '42.8%' },
+      type: 'window',
+    },
+    {
+      title: '电动窗3',
+      styleText: { left: '35%', bottom: '57.8%' },
+      type: 'window',
+    },
+    {
+      title: '电动窗4',
+      styleText: { left: '36.5%', bottom: '72.8%' },
+      type: 'window',
+    },
+    {
+      title: '电动窗5',
+      styleText: { left: '66%', bottom: '28%' },
+      type: 'window',
+    },
+    {
+      title: '电动窗6',
+      styleText: { left: '64%', bottom: '42.8%' },
+      type: 'window',
+    },
+    {
+      title: '电动窗7',
+      styleText: { left: '62%', bottom: '57.8%' },
+      type: 'window',
+    },
+    {
+      title: '电动窗8',
+      styleText: { left: '60%', bottom: '72.8%' },
+      type: 'window',
+    },
+  ]);
   onMounted(() => {});
   onUnmounted(() => {});
 </script>
@@ -257,4 +550,44 @@
       opacity: 0; /* 结束时完全透明 */
     }
   }
+  .drawer-fan {
+    width: 496px;
+    // 抽屉关闭按钮
+    .drawer-box-out {
+      width: 30px;
+      height: 40px;
+      border-radius: 2px;
+      position: fixed;
+      right: 466px;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+    }
+    .ant-tabs-tab-btn {
+      color: white;
+    }
+    .ant-tabs-tabpane {
+      color: white;
+    }
+  }
+  .drawer-box-in {
+    width: 30px;
+    height: 40px;
+    border-radius: 2px;
+    position: fixed;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
 </style>