Merge branch 'v3' of ssh://94.191.59.107:10222/houwenfeng/cloudfile-ui into v3

src/assets/fonts/font.css

@@ -15,4 +15,10 @@
     src: url('Inter-SemiBold-10.otf');
     font-weight: normal;
     font-style: normal;
+  }
+  @font-face {
+    font-family: "Inter-Medium";
+    src: url('Inter-Medium-8.otf');
+    font-weight: normal;
+    font-style: normal;
   }

src/views/biz/recent/index.vue

@@ -1,241 +1,275 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="Plus"
-          @click="handleAdd"
-          v-hasPermi="['biz:recent:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="Edit"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['biz:recent:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['biz:recent:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="Download"
-          @click="handleExport"
-          v-hasPermi="['biz:recent:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="recentList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="自增ID" align="center" prop="recentId" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template #default="scope">
-          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['biz:recent:edit']">修改</el-button>
-          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['biz:recent:remove']">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    
-    <pagination
-      v-show="total>0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 添加或修改最近文件对话框 -->
-    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="recentRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="是否文件夹" prop="isFolder">
-          <el-select v-model="form.isFolder" placeholder="请选择是否文件夹">
-            <el-option
-              v-for="dict in sys_yes_no"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="文件夹/文档ID" prop="relaId">
-          <el-input v-model="form.relaId" placeholder="请输入文件夹/文档ID" />
-        </el-form-item>
-        <el-form-item label="所有人" prop="owner">
-          <el-input v-model="form.owner" placeholder="请输入所有人" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入备注" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
+  <div>
+    <el-collapse v-model="activeNames" @change="handleChange">
+      <div v-if="isList">
+        <el-collapse-item name="folder">
+          <template #title>
+            <span class="collapseItem_title">文件夹</span>
+          </template>
+          <!-- 表格 -->
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            height="250"
+            :scrollbar-always-on="true"
+          >
+            <el-table-column fixed prop="date" label="名称" width="500">
+              <template #default="scope">
+                <div>
+                  <img
+                    class="table_icon"
+                    src="../../../assets/images/fileBox.png"
+                    alt=""
+                    style=""
+                  />
+                  {{ scope.row.date }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="时间" width="200" />
+            <el-table-column prop="state" label="类型" width="180" />
+            <el-table-column prop="city" label="大小" width="160" />
+          </el-table>
+        </el-collapse-item>
+        <el-collapse-item name="file">
+          <template #title>
+            <span class="collapseItem_title">文件</span>
+          </template>
+          <!-- 表格 -->
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            height="250"
+            :scrollbar-always-on="true"
+          >
+            <el-table-column fixed prop="date" label="名称" width="500">
+              <template #default="scope">
+                <div>
+                  <img
+                    class="table_icon"
+                    src="../../../assets/images/fileBox.png"
+                    alt=""
+                    style=""
+                  />
+                  {{ scope.row.date }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="时间" width="200" />
+            <el-table-column prop="state" label="类型" width="180" />
+            <el-table-column prop="city" label="大小" width="160" />
+          </el-table>
+        </el-collapse-item>
+      </div>
+      <div v-else>
+        <el-collapse-item name="folder">
+          <template #title>
+            <span class="collapseItem_title">文件夹</span>
+          </template>
+          <!-- 平铺 -->
+          <el-scrollbar height="360px">
+            <div class="tile_box">
+              <div class="file_box" v-for="item in 20" :key="item">
+                <img
+                  class="big_file_img"
+                  src="../../../assets/images/fileBox.png"
+                  alt=""
+                />
+                <span>Inceptos</span>
+              </div>
+            </div>
+          </el-scrollbar>
+        </el-collapse-item>
+        <el-collapse-item name="file">
+          <template #title>
+            <span class="collapseItem_title">文件</span>
+          </template>
+          <!-- 平铺 -->
+          <el-scrollbar height="360px">
+            <div class="tile_box">
+              <div class="file_box" v-for="item in 20" :key="item">
+                <img
+                  class="big_file_img"
+                  src="../../../assets/images/fileType//file／DOC.png"
+                  alt=""
+                />
+                <span>Inceptos</span>
+              </div>
+            </div>
+          </el-scrollbar>
+        </el-collapse-item>
+      </div>
+    </el-collapse>
   </div>
 </template>
 
-<script setup name="Recent">
-import { listRecent, getRecent, delRecent, addRecent, updateRecent } from "@/api/biz/recent";
-
-const { proxy } = getCurrentInstance();
-const { sys_yes_no } = proxy.useDict('sys_yes_no');
-
-const recentList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-  },
-  rules: {
-  }
+<script setup>
+import { onMounted, ref } from "vue";
+import { listRecent } from "../../../api/biz/recent";
+const activeNames = ref(["folder", "file"]);
+const isList = ref(false); //控制显示方式
+onMounted(() => {
+  getList();
 });
+const getList = async () => {
+  const res = await listRecent();
+  console.log("res = ", res);
+};
+const handleChange = (val) => {
+  // console.log(val);
+};
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-08",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-06",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-07",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+];
+</script>
 
-const { queryParams, form, rules } = toRefs(data);
-
-/** 查询最近文件列表 */
-function getList() {
-  loading.value = true;
-  listRecent(queryParams.value).then(response => {
-    recentList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
+<style lang="scss" scoped>
+.table_icon {
+  height: 27px;
+  width: 27px;
+  vertical-align: middle;
 }
-
-// 取消按钮
-function cancel() {
-  open.value = false;
-  reset();
+::v-deep .el-collapse-item__content {
+  padding-bottom: 0;
 }
-
-// 表单重置
-function reset() {
-  form.value = {
-    recentId: null,
-    isFolder: null,
-    relaId: null,
-    owner: null,
-    createBy: null,
-    createTime: null,
-    updateBy: null,
-    updateTime: null,
-    remark: null
-  };
-  proxy.resetForm("recentRef");
+::v-deep .el-collapse-item__header {
+  background-color: #ebeff6 !important;
+  width: 100% !important;
+  height: 24px !important;
 }
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
+::v-deep .el-collapse-item__arrow {
+  position: relative;
+  color: #2e6bc8;
+  right: 97%;
 }
-
-/** 重置按钮操作 */
-function resetQuery() {
-  proxy.resetForm("queryRef");
-  handleQuery();
+::v-deep .el-table td.el-table__cell {
+  border: none;
+  font-size: 14px !important;
+  font-weight: 400 !important;
+  color: #000 !important;
 }
-
-// 多选框选中数据
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.recentId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
+::v-deep .el-table__row {
+  height: 35px !important;
 }
-
-/** 新增按钮操作 */
-function handleAdd() {
-  reset();
-  open.value = true;
-  title.value = "添加最近文件";
+::v-deep .el-table .el-table__header-wrapper th {
+  border-bottom: none;
+  border-right: 1px solid #c1cce3;
+  background-color: #fff !important;
+  color: #505870;
+  font-size: 14px;
 }
-
-/** 修改按钮操作 */
-function handleUpdate(row) {
-  reset();
-  const _recentId = row.recentId || ids.value
-  getRecent(_recentId).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改最近文件";
-  });
+.collapseItem_title {
+  position: relative;
+  left: 40px;
+  color: #2e6bc8;
+  font-family: Inter-Medium;
+  font-size: 12px;
 }
-
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["recentRef"].validate(valid => {
-    if (valid) {
-      if (form.value.recentId != null) {
-        updateRecent(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addRecent(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
+// 表格右边3个靠右对齐
+::v-deep .el-table__header thead tr th {
+  font-family: Inter-Medium;
+  font-size: 14px;
+  color: #505870;
+  text-align: right;
+  &:nth-child(1) {
+    text-align: left;
+  }
 }
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const _recentIds = row.recentId || ids.value;
-  proxy.$modal.confirm('是否确认删除最近文件编号为"' + _recentIds + '"的数据项？').then(function() {
-    return delRecent(_recentIds);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
+::v-deep .el-table__body tbody [class*="column_2"] {
+  text-align: right;
 }
-
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download('biz/recent/export', {
-    ...queryParams.value
-  }, `recent_${new Date().getTime()}.xlsx`)
+::v-deep .el-table__body tbody [class*="column_3"] {
+  text-align: right;
 }
-
-getList();
-</script>
+::v-deep .el-table__body tbody [class*="column_4"] {
+  text-align: right;
+}
+::v-deep .el-table__body tbody [class*="column_6"] {
+  text-align: right;
+}
+::v-deep .el-table__body tbody [class*="column_7"] {
+  text-align: right;
+}
+::v-deep .el-table__body tbody [class*="column_8"] {
+  text-align: right;
+}
+//平铺
+.tile_box {
+  width: 100%;
+  height: 300px;
+  display: flex;
+  flex-wrap: wrap;
+  .file_box {
+    width: 116px;
+    min-height: 138px;
+    // border: 1px solid #000;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .big_file_img {
+      width: 100px;
+      height: 100px;
+    }
+    span {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+    }
+  }
+}
+</style>

src/views/login.vue

@@ -226,15 +226,16 @@ getCookie();
   display: flex;
   // justify-content: center;
   // align-items: center;
-  width: 100%;
+  width: 100vw;
   height: 100%;
 }
 .img_box {
   height: 100%;
-  width: 640px;
-  background-image: url("../assets/images/Rectangle 229.png");
+  width: 50%;
+  background-image: url("../assets/images/login_big.png");
+  // background-image: url("../assets/images/Rectangle 229.png");
   background-repeat: no-repeat;
-  background-size: contain;
+  background-size:100% 100%;
 }
 .login_box {
   .center_box {

src/views/myfile/MyFile.vue

@@ -4,11 +4,144 @@
             <div class="settingBox">
                 <!-- 设置盒子顶部搜索 -->
                 <div class="topSearch">
-                    <el-input v-model="searchFire" class="searchFire" size="large" placeholder="搜索文件">
-                    </el-input>
-                    <el-icon style="font-size: 24px;">
-                        <Plus />
-                    </el-icon>
+                    <div style="position: relative;">
+                        <el-input v-model="searchFire" class="searchFire" size="large" placeholder="搜索文件" />
+                        <el-icon style="color: gray;display: inline-block;position: absolute;top: 8px;right: 5px;">
+                            <Search />
+                        </el-icon>
+                    </div>
+                    <div>
+                        <el-icon style="font-size: 24px;">
+                            <Plus />
+                        </el-icon>
+                    </div>
+                </div>
+                <!-- 方块点击盒子 -->
+                <div style="display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;">
+                    <div class="setBox" @click="changeFile">
+                        <!-- <p  @click="">...</p> -->
+                        <el-dropdown trigger="click" class="selectChe">
+                            <span class="el-dropdown-link">
+                                ...
+                            </span>
+                            <template #dropdown>
+                                <el-dropdown-menu>
+                                    <el-dropdown-item>重命名</el-dropdown-item>
+                                    <el-dropdown-item>删除</el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                        <img src="../../assets/images/fileStyle.png" style="width: 72px;height: 72px;">
+                        <p>xxx文件</p>
+                    </div>
+                </div>
+            </div>
+            <!-- 右侧大盒子 -->
+            <div class="mesBox">
+                <!-- 功能盒子  -->
+                <div class="useBox">
+                    <!-- table切换 -->
+                    <div style="width: 100%;height: 24px;background-color: #7084B4;line-height: 20px;">
+                        <template v-for="(item, index) in menuList">
+                            <span @click="tableChange(item, index)"
+                                :class="['tables', { tableLis: selectedIndex === index }]">
+                                {{ item.name }}
+                                <img v-if="selectedIndex === index ? true : false"
+                                    style="position: absolute;top: 4px;right: 4px;" src="../../assets/images/close.png"
+                                    @click="shotdown(item)">
+                            </span>
+                        </template>
+                    </div>
+                    <!-- 众多功能 -->
+                    <div class="manyUse">
+                        <div
+                            style="display: flex;width: 82px;height: 32px;justify-content: flex-start;align-items: center;">
+                            <div style="margin-left: 5px;">
+                                <el-icon
+                                    style="background-color: #7084B4;width: 24px;height: 24px;border-radius: 50%;color: white;">
+                                    <Plus />
+                                </el-icon>
+                            </div>
+                            <div style="margin-left: 5px;">
+                                <span style="font-size: 14px;">新建</span>
+                            </div>
+                        </div>
+                        <template v-for="(item, index) in useMenu">
+                            <div
+                                style="display: flex;width: 82px;height: 32px;justify-content: flex-start;align-items: center;line-height: 18px;">
+                                <div style="margin-left: 5px;">
+                                    <img :src="item.img" style="width: 24px;height: 24px;" alt="">
+                                </div>
+                                <div style="margin-left: 5px;">
+                                    <span style="font-size: 14px;">{{ item.name }}</span>
+                                </div>
+                            </div>
+                        </template>
+                        <div
+                            style="display: flex;width: 92px;height: 32px;justify-content: flex-start;align-items: center;line-height: 18px;">
+                            <div style="margin-left: 5px;">
+                                <img src="../../assets/images/upload.png" style="width: 24px;height: 24px;" alt="">
+                            </div>
+                            <div style="margin-left: 5px;">
+                                <el-dropdown trigger="click">
+                                    <span style="color: black;">上传
+                                        <el-icon>
+                                            <arrow-down />
+                                        </el-icon>
+                                    </span>
+                                    <template #dropdown>
+                                        <el-dropdown-menu>
+                                            <template v-for="(item, index) in arrorMenu">
+                                                <el-dropdown-item>
+                                                    <img :src="item.img" alt="">
+                                                    <span>{{ item.name }}</span>
+                                                </el-dropdown-item>
+                                            </template>
+                                        </el-dropdown-menu>
+                                    </template>
+                                </el-dropdown>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 面包屑功能栏 -->
+                    <div class="breadBox">
+                        <!-- 左侧 -->
+                        <div style="display: flex;justify-content: space-around;align-items: center;">
+                            <!-- 前进后退 -->
+                            <div style="display: flex;justify-content: space-around;align-items: center;">
+                                <img style="display:block;width: 11px;height: 11px;" :src="blueLeft" alt="">
+                                <img style="display:block;width: 16px;height: 16px;" :src="grayRight" alt="">
+                            </div>
+                            <!-- 面包屑 -->
+                            <div>
+                                <el-breadcrumb separator="/">
+                                    <el-breadcrumb-item style="font-size: 12px;">homepage</el-breadcrumb-item>
+                                    <el-breadcrumb-item style="font-size: 12px;">promotion management</el-breadcrumb-item>
+                                    <el-breadcrumb-item style="font-size: 12px;">promotion detail</el-breadcrumb-item>
+                                </el-breadcrumb>
+                            </div>
+                        </div>
+                        <!-- 右侧 -->
+                        <div>
+                            <img :src="sort" alt="">
+                            <img :src="squre" alt="">
+                        </div>
+                    </div>
+                </div>
+                <!-- 展示文件夹盒子 -->
+                <div>
+                    <!-- 文件夹 -->
+                    <div>
+                        <el-collapse v-model="folder" accordion >
+                            <el-collapse-item title="文件夹" name="1" class="custom-collapse-item">
+                               
+                            </el-collapse-item>
+                        </el-collapse>
+                    </div>
+                    <!-- 文件 -->
+                    <div>
+
+                    </div>
                 </div>
             </div>
         </div>
@@ -19,19 +152,110 @@
 import { ref } from 'vue'
 import myfile from '../../api/myfile/myfile'
 import { Search } from '@element-plus/icons-vue'
+import copy from '../../assets/images/copy.png'
+import clipboard from '../../assets/images/clipboard.png'
+import share from '../../assets/images/share.png'
+import trash from '../../assets/images/trash.png'
+import file from '../../assets/images/file.png'
+import folder from '../../assets/images/folder.png'
+import image from '../../assets/images/image.png'
+import filmSlate from '../../assets/images/filmSlate.png'
+import musicNotes from '../../assets/images/musicNotes.png'
+import blueLeft from '../../assets/images/blueLeft.png'
+import grayRight from "../../assets/images/grayRight.png"
+import sort from '../../assets/images/sort.png'
+import squre from '../../assets/images/squre.png'
+// import 'element-plus/packages/theme-chalk/src/index.scss'
 export default {
     setup() {
-        let tableList = ref([])
+        let folderList = ref([])
+        let fireList = ref([])
         let searchFire = ref('')
-        const getAll = () => {
+        let selectedIndex = ref(0)
+        let folder = ref("")
+        let menuList = ref([
+            {
+                name: "标签1",
+                choose: "1"
+            },
+            {
+                name: "标签2",
+                choose: "2"
+            },
+        ])
+        let useMenu = ref([
+            {
+                img: copy,
+                name: "复制"
+            },
+            {
+                img: clipboard,
+                name: "粘贴"
+            },
+            {
+                img: share,
+                name: "分享给"
+            },
+            {
+                img: trash,
+                name: "删除"
+            },
+        ])
+        let arrorMenu = ref([
+            {
+                img: file,
+                name: "文件"
+            },
+            {
+                img: folder,
+                name: '文件夹'
+            },
+            {
+                img: image,
+                name: "图片"
+            },
+            {
+                img: filmSlate,
+                name: "视频"
+            },
+            {
+                img: musicNotes,
+                name: "音频"
+            }
+        ])
+        function getAll() {
             myfile.get().then(res => {
                 console.log(res, 'eee');
             })
         }
+        function changeFile(row) {
+
+        }
+        // tableMenu切换
+        function tableChange(row, num) {
+            this.selectedIndex = num
+        }
+        // x图标事件
+        function shotdown(row) {
+            this.menuList = this.menuList.filter(item => item.name !== row.name)
+        }
         return {
-            tableList,//定义的数据
+            folderList,//文件夹的数据
+            fireList,//文件夹的数据
             getAll,//拿到数据的方法
             searchFire,//搜索文件的model
+            changeFile,//切换右侧视图的file
+            menuList,//右侧切换
+            tableChange,//改变class点击事件
+            selectedIndex,//当前选中下标
+            shotdown,//筛选出当前数据
+            useMenu,
+            arrorMenu,
+            blueLeft,//返回
+            grayRight,//前进
+            squre,//视图切换
+            sort,//排序
+            folder,
         }
     },
     created() {
@@ -41,22 +265,128 @@ export default {
 </script>
 
 <style scoped>
+p {
+    margin: 0;
+    padding: 0;
+}
+
+.bigBox {
+    display: flex;
+    justify-content: flex-start;
+}
+
 .settingBox {
     width: 312px;
-    height: 836px;
-    border: 1px solid black;
+    height: 636px;
+    border: 2px solid black;
     border-radius: 4px;
     margin: 10px 10px;
 }
-.topSearch{
+
+.topSearch {
     width: 100%;
     height: 48px;
     background-color: #EBEFF6;
-    text-align: center;
-    line-height: 48px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
 }
+
 .searchFire {
     width: 248px;
     height: 32px;
 }
+
+.setBox {
+    width: 88px;
+    height: 112px;
+    text-align: center;
+    margin-left: 12px;
+    margin-top: 5px;
+    position: relative;
+}
+
+.setBox:hover {
+    background-color: #EEF9FF;
+}
+
+.setBox:hover .selectChe {
+    background-color: #EEF9FF;
+    display: block;
+}
+
+.selectChe {
+    display: none;
+    width: 20px;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 4px 4px 4px 4px;
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    line-height: 10px;
+}
+
+.mesBox {
+    width: 70vw;
+    height: 636px;
+    margin: 10px 5px;
+    border-radius: 4px;
+}
+
+.useBox {
+    width: 100%;
+    height: 96px;
+}
+
+.tables {
+    display: inline-block;
+    width: 112px;
+    height: 22px;
+    border-radius: 4px;
+    line-height: 21px;
+    text-align: center;
+    font-size: 12px;
+    margin-left: 5px;
+    position: relative;
+}
+
+.tableLis {
+    display: inline-block;
+    width: 112px;
+    height: 22px;
+    border-radius: 4px;
+    background-color: #EBEFF6;
+    line-height: 21px;
+    text-align: center;
+    font-size: 12px;
+    margin-left: 5px;
+    position: relative;
+}
+
+.manyUse {
+    width: 100%;
+    height: 48px;
+    /* background-color: gray; */
+    line-height: 48px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.el-dropdown-link {
+    color: white;
+}
+
+.breadBox {
+    width: 100%;
+    height: 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #D9E0F0;
+}
+::deep .custom-collapse-item{
+    height: 24px !important;
+}
 </style>

vite.config.js

@@ -25,7 +25,7 @@ export default defineConfig(({ mode, command }) => {
     },
     // vite 相关配置
     server: {
-      port: 80,
+      port: 81,
       host: true,
       open: true,
       proxy: {