diff --git a/src/views/proManagement/menu/index.vue b/src/views/proManagement/menu/index.vue
new file mode 100644
index 00000000..439320c9
--- /dev/null
+++ b/src/views/proManagement/menu/index.vue
@@ -0,0 +1,122 @@
+<template>
+  <el-dialog title="快捷菜单设置" :visible.sync="dialogVisible" width="60%">
+    <p>已选菜单：按住鼠标左键可以对菜单进行排序，最多可以设置10个快捷菜单。</p>
+    <el-row>
+      <el-col :span="24">
+        <draggable v-model="selectedItems" @end="onDragEnd" class="drag-area">
+          <el-tag
+            v-for="(item, index) in selectedItems"
+            :key="index"
+            closable
+            @close="removeItem(index)"
+            class="tag-item"
+          >{{ item.name }}</el-tag>
+        </draggable>
+      </el-col>
+    </el-row>
+    <el-row style="margin-top: 20px;">
+      <el-col :span="24">
+        <el-checkbox-group v-model="selectedItemIds">
+          <el-checkbox
+            v-for="menuItem in menuItems"
+            :key="menuItem.id"
+            :label="menuItem.id"
+            :disabled="selectedItems.length >= 10 && !selectedItemIds.includes(menuItem.id)"
+          >{{ menuItem.name }}</el-checkbox>
+        </el-checkbox-group>
+      </el-col>
+    </el-row>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="restoreDefaults" style="margin-right: auto;">恢 复 默认</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="confirmSelection">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { Dialog, Tag, Row, Col, CheckboxGroup, Checkbox } from 'element-ui';
+import draggable from 'vuedraggable';
+
+export default {
+  components: {
+    ElDialog: Dialog,
+    ElTag: Tag,
+    ElRow: Row,
+    ElCol: Col,
+    ElCheckboxGroup: CheckboxGroup,
+    ElCheckbox: Checkbox,
+    draggable
+  },
+  data() {
+    return {
+      dialogVisible: true,
+      selectedItems: [
+        { id: 1, name: '物资首页' },
+        { id: 2, name: '客户列表' }
+      ],
+      defaultSelectedItems: [
+        { id: 1, name: '物资首页' },
+        { id: 2, name: '客户列表' }
+      ],
+      menuItems: [
+        { id: 1, name: '物资首页' },
+        { id: 2, name: '客户列表' },
+        { id: 3, name: '客户工具' },
+        { id: 4, name: '跟进管理' },
+        { id: 5, name: '销售线索' },
+        // 更多菜单项...
+      ],
+      selectedItemIds: [1, 2] // 初始化选中的菜单项ID
+    };
+  },
+  computed: {
+    availableMenuItems() {
+      return this.menuItems.filter(item => !this.selectedItems.some(selected => selected.name === item.name));
+    }
+  },
+  methods: {
+    removeItem(index) {
+      this.selectedItems.splice(index, 1);
+      this.selectedItemIds = this.selectedItems.map(item => item.id);
+    },
+    onDragEnd(event) {
+      // 可以在这里处理拖拽结束后的逻辑
+    },
+    confirmSelection() {
+      // 获取选中的菜单项及其顺序
+      const selectedMenuItems = this.selectedItems.map(item => ({ id: item.id, name: item.name }));
+      console.log('Selected Menu Items:', selectedMenuItems);
+      // 这里可以将 selectedMenuItems 发送到后端或存储到 Vuex 等地方
+      this.dialogVisible = false;
+    },
+    restoreDefaults() {
+      // 恢复默认选中的菜单项ID
+      this.selectedItemIds = this.defaultSelectedItems.map(item => item.id);
+      // 更新已选中的菜单项
+      this.selectedItems = this.defaultSelectedItems.map(item => ({ ...item }));
+    }
+  },
+  watch: {
+    selectedItemIds: {
+      handler(newIds) {
+        this.selectedItems = this.menuItems.filter(item => newIds.includes(item.id));
+      },
+      deep: true
+    }
+  }
+};
+</script>
+
+<style scoped>
+.drag-area {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.tag-item {
+  cursor: move; /* 显示移动光标 */
+}
+</style>
diff --git a/src/views/proManagement/pro/index.vue b/src/views/proManagement/pro/index.vue
new file mode 100644
index 00000000..89c143cd
--- /dev/null
+++ b/src/views/proManagement/pro/index.vue
@@ -0,0 +1,299 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item prop="keyWord">
+        <el-input
+          v-model="queryParams.keyWord"
+          placeholder="请输入关键词"
+          clearable
+          @keyup.enter.native="handleQuery"
+          maxlength="20"
+        />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+        >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+        >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+        >导出
+        </el-button>
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="houseList"
+      ref="multipleTable"
+      row-key="teamId"
+    >
+      <el-table-column label="序号" align="center" width="80" type="index">
+        <template slot-scope="scope">
+          <span>{{
+              (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
+            }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="项目名称"
+        align="center"
+        prop="houseName"
+        sortable
+      />
+      <el-table-column
+        label="项目地址"
+        align="center"
+        prop="physicalName"
+        sortable
+      />
+      <el-table-column
+        label="计划开工日期"
+        align="center"
+        prop="geoLocation"
+        sortable
+      />
+      <el-table-column label="计划竣工日期" align="center" prop="deptName" sortable>
+      </el-table-column>
+      <el-table-column label="业主单位" align="center" prop="remark" sortable>
+      </el-table-column>
+      <el-table-column label="项目状态" align="center" prop="remark" sortable>
+      </el-table-column>
+      <el-table-column label="标段工程数量" align="center" prop="remark" sortable>
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleViewDetails(scope.row)"
+            v-hasPermi="['machinery:type:edit']"
+          >
+
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="180">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleView(scope.row)"
+            v-hasPermi="['machinery:type:edit']"
+          >
+            详情
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 标段工程 -->
+    <el-dialog
+      :title="title"
+      :visible.sync="showHouse"
+      width="70%"
+      append-to-body
+    >
+      <el-table border max-height="1000px" :data="viewCodeList">
+        <el-table-column label="序号" align="center" type="index" />
+        <el-table-column align="center" label="标段名称" prop="maTypeName" />
+        <el-table-column align="center" label="工程类别" prop="typeName" />
+        <el-table-column align="center" label="电压等级" prop="maCode" />
+        <el-table-column align="center" label="计划开工时间" prop="createBy" />
+        <el-table-column align="center" label="计划竣工时间" prop="createTime" />
+        <el-table-column align="center" label="工程状态" prop="outFacCode" />
+        <el-table-column align="center" label="分公司" prop="outFacCode" />
+        <el-table-column label="操作" align="center" width="300">
+          <template slot-scope="{ row }">
+            <el-button
+              size="mini"
+              type="primary"
+              icon="el-icon-zoom-in"
+              @click="handleView(row)"
+            >
+              详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getListHouse,
+  getHouseDetail,
+  editHouse,
+  addHouse,
+  delHouse,
+} from "@/api/ma/whHouse";
+import { downloadFile } from "@/utils/download";
+import { deptTreeSelect } from "@/api/system/user";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+export default {
+  name: "ProManagement",
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      loadingTwo: false,
+      // 显示搜索条件
+      showSearch: true,
+      showHouse: false,
+      // 总条数
+      total: 0,
+      totalTwo: 0,
+      // 表格数据
+      houseList: [],
+      viewCodeList: [],
+      maxLength: 100, //已选列表上限，防止数据过多请求报错
+      // 弹出层标题
+      title: "",
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        keyWord: undefined,
+      },
+      // 表单参数
+      form: {},
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询岗位列表 */
+    getList() {
+      this.loading = true;
+      getListHouse(this.queryParams).then((response) => {
+        this.houseList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+
+    handleViewDetails (row) {
+      // this.viewCodeList = row;
+      this.showHouse = true;
+      this.title = "标段工程";
+      // this.loadingTwo = false;
+      /*getMaCodeInfo({ taskId: row.taskId, typeId: row.typeId }).then(
+        (response) => {
+          this.viewCodeList = response.rows;
+          this.titleBind = "查看";
+          this.loadingTwo = false;
+        }
+      );*/
+    },
+
+    handleView(row) {
+      this.showHouse = true;
+      this.title = "修改";
+      // this.reset();
+      // const houseId = row.houseId;
+      // getHouseDetail(houseId).then((response) => {
+      //   this.viewCodeList = response.data;
+      //
+      //   this.showHouse = true;
+      //   this.title = "修改";
+      // });
+    },
+    // 表单重置
+    reset() {
+      this.form = {};
+      this.resetForm("form");
+    },
+
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams.keyWord = null;
+      this.handleQuery();
+    },
+
+    // 取消按钮
+    cancel() {
+      this.showHouse = false;
+      this.reset();
+    },
+
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(
+        'system/role/export',
+        {
+          ...this.queryParams,
+        },
+        `role_${new Date().getTime()}.xlsx`,
+      )
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.uploadImg {
+  padding-top: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.deviceCode {
+  margin-top: 10px;
+  padding-bottom: 20px;
+  font-size: 18px;
+}
+::v-deep.el-table .fixed-width .el-button--mini {
+  width: 60px !important;
+  margin-bottom: 10px;
+}
+//隐藏图片上传框的css
+::v-deep.disabled {
+  .el-upload--picture-card {
+    display: none;
+  }
+}
+</style>
diff --git a/src/views/proManagement/section/index.vue b/src/views/proManagement/section/index.vue
new file mode 100644
index 00000000..0cbb6aef
--- /dev/null
+++ b/src/views/proManagement/section/index.vue
@@ -0,0 +1,558 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item prop="keyWord">
+        <el-input
+          v-model="queryParams.keyWord"
+          placeholder="请输入关键词"
+          clearable
+          @keyup.enter.native="handleQuery"
+          maxlength="20"
+        />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+        >搜索
+        </el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+        >重置
+        </el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+        >导出
+        </el-button>
+      </el-col>
+
+      <el-col :span="1.5">
+        <el-button @click="drawer = true" icon="el-icon-s-open" type="primary" style="margin-left: 16px;" size="mini">
+          高级筛选
+        </el-button>
+      </el-col>
+
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-drawer
+      title="高级筛选"
+      :visible.sync="drawer"
+      :with-header="false">
+
+      <div>
+        <div class="filter-container">
+          <div class="filter-header">
+            <div class="header-left">
+              <i class="el-icon-search"></i>
+              <span>高级筛选</span>
+            </div>
+            <el-button
+              type="text"
+              class="close-button"
+              @click="drawer = false"
+            >
+              <i class="el-icon-close"></i>
+              <span>收起</span>
+            </el-button>
+          </div>
+          <div v-for="(section, sectionIndex) in filterSections" :key="sectionIndex" class="filter-section">
+            <div class="filter-label">{{ section.title }}：</div>
+            <div class="button-container">
+              <el-button
+                v-for="(option, index) in section.options"
+                :key="option.value"
+                :class="{ 'is-active': isSelected(section.title, option.value) }"
+                round
+                size="small"
+                @click="handleSelect(section.title, option.value)"
+              >
+                {{ option.label }}
+              </el-button>
+            </div>
+          </div>
+          <div class="filter-footer">
+            <el-button type="primary" @click="handleQuerys">查询</el-button>
+            <el-button @click="handleReset">重置</el-button>
+          </div>
+        </div>
+      </div>
+
+    </el-drawer>
+
+    <el-table
+      v-loading="loading"
+      :data="houseList"
+      ref="multipleTable"
+      row-key="teamId"
+    >
+      <el-table-column label="序号" align="center" width="80" type="index">
+        <template slot-scope="scope">
+            <span>{{
+                (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
+              }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="分公司"
+        align="center"
+        prop="houseName"
+        sortable
+      />
+      <el-table-column
+        label="项目名称"
+        align="center"
+        prop="physicalName"
+        sortable
+      />
+      <el-table-column
+        label="标段名称"
+        align="center"
+        prop="geoLocation"
+        sortable
+      />
+      <el-table-column label="工程类别" align="center" prop="deptName" sortable>
+      </el-table-column>
+      <el-table-column label="电压等级" align="center" prop="remark" sortable>
+      </el-table-column>
+      <el-table-column label="施工地点" align="center" prop="remark" sortable>
+      </el-table-column>
+      <el-table-column label="计划开工日期" align="center" prop="remark" sortable>
+      </el-table-column>
+      <el-table-column label="计划竣工日期" align="center" prop="remark" sortable>
+      </el-table-column>
+      <el-table-column label="项目状态" align="center" prop="remark" sortable>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="180">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleView(scope.row)"
+            v-hasPermi="['machinery:type:edit']"
+          >
+            详情
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 标段工程 -->
+    <el-dialog
+      :title="title"
+      :visible.sync="showHouse"
+      width="70%"
+      append-to-body
+    >
+      <el-table border max-height="1000px" :data="viewCodeList">
+        <el-table-column label="序号" align="center" type="index"/>
+        <el-table-column align="center" label="标段名称" prop="maTypeName"/>
+        <el-table-column align="center" label="工程类别" prop="typeName"/>
+        <el-table-column align="center" label="电压等级" prop="maCode"/>
+        <el-table-column align="center" label="计划开工时间" prop="createBy"/>
+        <el-table-column align="center" label="计划竣工时间" prop="createTime"/>
+        <el-table-column align="center" label="工程状态" prop="outFacCode"/>
+        <el-table-column align="center" label="分公司" prop="outFacCode"/>
+        <el-table-column label="操作" align="center" width="300">
+          <template slot-scope="{ row }">
+            <el-button
+              size="mini"
+              type="primary"
+              icon="el-icon-zoom-in"
+              @click="handleView(row)"
+            >
+              详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getListHouse,
+  getHouseDetail,
+  editHouse,
+  addHouse,
+  delHouse,
+} from "@/api/ma/whHouse";
+import {downloadFile} from "@/utils/download";
+import {deptTreeSelect} from "@/api/system/user";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  name: "ProManagement",
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      loadingTwo: false,
+      // 显示搜索条件
+      showSearch: true,
+      showHouse: false,
+      // 总条数
+      total: 0,
+      totalTwo: 0,
+      // 表格数据
+      houseList: [],
+      viewCodeList: [],
+      maxLength: 100, //已选列表上限，防止数据过多请求报错
+      // 弹出层标题
+      title: "",
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        keyWord: undefined,
+      },
+      // 表单参数
+      form: {},
+      drawer: false,
+
+      filterSections: [
+        {
+          title: '分公司',
+          options: [
+            {value: 'all', label: '全部'},
+            {value: 'branch1', label: '送一分公司'},
+            {value: 'branch2', label: '送二分公司'},
+            {value: 'branch3', label: '变电一公司'},
+            {value: 'branch4', label: '变电二公司'}
+          ]
+        },
+        {
+          title: '工程类型',
+          options: [
+            {value: 'all', label: '全部'},
+            {value: 'substation', label: '变电工程'},
+            {value: 'line', label: '线路工程'},
+            {value: 'adjustment', label: '调试工程'},
+            {value: 'other', label: '其他工程'}
+          ]
+        },
+        {
+          title: '电压等级',
+          options: [
+            {value: 'all', label: '全部'},
+            {value: '800kv', label: '正负800kV'},
+            {value: '500kv', label: '500kV'},
+            {value: '330kv', label: '330kV'},
+            {value: '220kv', label: '220kV'},
+            {value: '110kv', label: '110kV'},
+            {value: '35kv', label: '35kV'},
+            {value: '10kv', label: '10kV'}
+          ]
+        }
+      ],
+      selectedValues: {}
+
+    };
+  },
+  created() {
+    this.getList();
+
+    // 初始化选中状态，默认选中每个部分的所有选项
+    this.filterSections.forEach(section => {
+      this.$set(this.selectedValues, section.title, section.options.map(option => option.value))
+    })
+
+  },
+  methods: {
+    /** 查询岗位列表 */
+    getList() {
+      this.loading = true;
+      getListHouse(this.queryParams).then((response) => {
+        this.houseList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+
+    handleViewDetails(row) {
+      // this.viewCodeList = row;
+      this.showHouse = true;
+      this.title = "标段工程";
+      // this.loadingTwo = false;
+      /*getMaCodeInfo({ taskId: row.taskId, typeId: row.typeId }).then(
+        (response) => {
+          this.viewCodeList = response.rows;
+          this.titleBind = "查看";
+          this.loadingTwo = false;
+        }
+      );*/
+    },
+
+    handleView(row) {
+      this.showHouse = true;
+      this.title = "修改";
+      // this.reset();
+      // const houseId = row.houseId;
+      // getHouseDetail(houseId).then((response) => {
+      //   this.viewCodeList = response.data;
+      //
+      //   this.showHouse = true;
+      //   this.title = "修改";
+      // });
+    },
+    // 表单重置
+    reset() {
+      this.form = {};
+      this.resetForm("form");
+    },
+
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams.keyWord = null;
+      this.handleQuery();
+    },
+
+    // 取消按钮
+    cancel() {
+      this.showHouse = false;
+      this.reset();
+    },
+
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(
+        'system/role/export',
+        {
+          ...this.queryParams,
+        },
+        `role_${new Date().getTime()}.xlsx`,
+      )
+    },
+
+    isSelected(sectionTitle, value) {
+      return this.selectedValues[sectionTitle].includes(value)
+    },
+
+    handleSelect(sectionTitle, value) {
+      const currentSelection = [...this.selectedValues[sectionTitle]]
+      const allOptions = this.filterSections.find(section => section.title === sectionTitle).options
+      const allValues = allOptions.map(option => option.value)
+
+      if (value === 'all') {
+        // 如果选择了 "全部"，则选中所有选项
+        this.$set(this.selectedValues, sectionTitle, allValues)
+      } else {
+        if (currentSelection.includes(value)) {
+          // 如果该选项已经被选中，则取消选中
+          const newSelection = currentSelection.filter(v => v !== value && v !== 'all')
+          // 如果没有选项被选中，则默认选中 "全部"
+          this.$set(this.selectedValues, sectionTitle, newSelection.length === 0 ? allValues : newSelection)
+        } else {
+          // 添加新选中的选项
+          const newSelection = [...currentSelection.filter(v => v !== 'all'), value]
+          // 如果选中了除 "全部" 外的所有选项，则也选中 "全部"
+          this.$set(this.selectedValues, sectionTitle,
+            newSelection.length === allOptions.length - 1 ? allValues : newSelection)
+        }
+      }
+    },
+
+    handleQuerys() {
+      // 实现查询逻辑
+      console.log('查询', this.selectedValues)
+    },
+    handleReset() {
+      // 重置所有选项为空数组，即取消所有选中状态
+      this.filterSections.forEach(section => {
+        this.$set(this.selectedValues, section.title, [])
+      })
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.uploadImg {
+  padding-top: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.deviceCode {
+  margin-top: 10px;
+  padding-bottom: 20px;
+  font-size: 18px;
+}
+
+::v-deep.el-table .fixed-width .el-button--mini {
+  width: 60px !important;
+  margin-bottom: 10px;
+}
+
+//隐藏图片上传框的css
+::v-deep.disabled {
+  .el-upload--picture-card {
+    display: none;
+  }
+}
+
+
+.filter-container {
+  padding: 20px;
+  height: 100%;
+
+  .filter-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px 15px;
+    border-bottom: 1px solid #e4e7ed;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+
+      i {
+        color: #409eff;
+        font-size: 18px;
+        margin-right: 8px;
+      }
+
+      span {
+        font-size: 16px;
+        font-weight: 600;
+        color: #303133;
+      }
+    }
+
+    .close-button {
+      padding: 0;
+      font-size: 14px;
+      color: #909399;
+
+      i {
+        margin-right: 4px;
+      }
+
+      &:hover {
+        color: #409eff;
+      }
+    }
+  }
+
+  .filter-section {
+    padding: 15px 10px;
+
+    .filter-label {
+      display: flex;
+      align-items: center;
+      height: 32px;
+      margin-bottom: 12px;
+      padding: 0 10px;
+      font-size: 14px;
+      font-weight: 600;
+      color: #409eff;
+      background: #f5f7fa;
+      border-radius: 4px;
+    }
+
+    .button-container {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 10px;
+
+      .el-button {
+        width: 100%;
+        margin: 0;
+        background: #fff;
+        border: 1px solid #dcdfe6;
+        color: #606266;
+
+        &:hover {
+          color: #409eff;
+          border-color: #409eff;
+        }
+
+        // 选中状态
+        &.is-active {
+          color: #409eff;
+          border-color: #409eff;
+          background-color: #ecf5ff;
+
+          &:hover {
+            color: #409eff;
+            border-color: #409eff;
+            background-color: #ecf5ff;
+          }
+        }
+      }
+    }
+  }
+
+  .filter-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 15px 20px;
+    text-align: center;
+    background: #fff;
+    border-top: 1px solid #e4e7ed;
+
+    .el-button {
+      min-width: 100px;
+      margin: 0 10px;
+    }
+  }
+}
+
+// 调整抽屉内容区域的padding
+::v-deep .el-drawer__body {
+  padding: 0;
+  height: 100%;
+  overflow-y: auto;
+}
+
+/* 覆盖 Element UI 的默认样式 */
+.el-button--default,
+.el-button--primary {
+  // 移除这些样式
+}
+</style>
+