添加用户，消息中心

package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "axios": "^1.6.8",
         "countup.js": "^2.8.0",
-        "dayjs": "^1.11.10",
+        "dayjs": "^1.11.11",
+        "dayjs-ext": "^2.2.0",
         "echarts": "^5.5.0",
         "element-plus": "^2.6.2",
         "mockjs": "^1.1.0",
@@ -1422,9 +1423,18 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/dayjs": {
-      "version": "1.11.10",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
-      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+      "version": "1.11.11",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.11.tgz",
+      "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg=="
+    },
+    "node_modules/dayjs-ext": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/dayjs-ext/-/dayjs-ext-2.2.0.tgz",
+      "integrity": "sha512-n7u711rSmAOPcx1xqj2WUSU/1PbWEst1VC/FeIQsC/ULQLNVlAUwYwRc8D1CdTWqZgliw/SVcox+xNyQl9Q4IA==",
+      "dependencies": {
+        "fast-plural-rules": "^0.0.1",
+        "timezone-support": "^1.8.0"
+      }
     },
     "node_modules/de-indent": {
       "version": "1.0.2",
@@ -1726,6 +1736,14 @@
         "node": ">=8.6.0"
       }
     },
+    "node_modules/fast-plural-rules": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmmirror.com/fast-plural-rules/-/fast-plural-rules-0.0.1.tgz",
+      "integrity": "sha512-0Cxx7LaH7+dNJEBozlisCxqaN5g68VTFT9PyLeFGBHmkPnQ3e46zss+r8pRC94KpzPlitL6m33GVdbMIDiUgqg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/fastq": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
@@ -3428,6 +3446,25 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/timezone-support": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmmirror.com/timezone-support/-/timezone-support-1.8.1.tgz",
+      "integrity": "sha512-+pKzxoUe4PZXaQcswceJlA+69oRyyu1uivnYKdpsC7eGzZiuvTLbU4WYPqTKslEsoSvjN8k/u/6qNfGikBB/wA==",
+      "dependencies": {
+        "commander": "2.19.0"
+      },
+      "bin": {
+        "create-timezone-data": "bin/create-timezone-data"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/timezone-support/node_modules/commander": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmmirror.com/commander/-/commander-2.19.0.tgz",
+      "integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg=="
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "test",
   "version": "0.0.0",
-  "type":"module",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build:old": "run-p type-check build-only",
@@ -13,7 +13,8 @@
   "dependencies": {
     "axios": "^1.6.8",
     "countup.js": "^2.8.0",
-    "dayjs": "^1.11.10",
+    "dayjs": "^1.11.11",
+    "dayjs-ext": "^2.2.0",
     "echarts": "^5.5.0",
     "element-plus": "^2.6.2",
     "mockjs": "^1.1.0",

src/main.ts

@@ -1,20 +1,23 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-
 import App from './App.vue'
 import router from './router'
-
+import zhCn from 'element-plus/es/locale/lang/zh-cn'; // 确保这里的路径是正确的
 import '@/assets/css/main.scss'
 import '@/assets/css/tailwind.css'
 
-import {registerEcharts} from "@/plugins/echarts"
-//不使用mock 请注释掉
+import { registerEcharts } from "@/plugins/echarts"
+import  ElementPlus   from 'element-plus'
+
+// 不使用mock，请注释掉
 import { mockXHR } from "@/mock/index";
+
 mockXHR()
 
 const app = createApp(App)
 registerEcharts(app)
+app.use(ElementPlus, { locale: zhCn })
 app.use(createPinia())
 app.use(router)
 
-app.mount('#app')
+app.mount('#app')

src/router/index.ts

@@ -31,6 +31,12 @@ const routes: Array<RouteRecordRaw> = [
         meta: { requiresAuth: true },
       },
       {
+        path: '/message',
+        name: 'message',
+        component: () => import('@/views/index/message-center.vue'),
+        meta: { requiresAuth: true },
+      },
+      {
         path: '/login',
         name: 'login',
         component: Login,

src/views/index/adduser.vue

@@ -1,7 +1,142 @@
 <template>
-    <ItemWrap class="contetn_left-bottom contetn_lr-item" title="添加用户">
-        
+    <ItemWrap class="adduser-items" title="添加用户">
+        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
+            label-width="auto" class="demo-ruleForm">
+            <el-form-item label="用户名" prop="pass">
+                <el-input v-model="ruleForm.pass" type="text" autocomplete="off" />
+            </el-form-item>
+            <el-form-item label="密码" prop="checkPass">
+                <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
+            </el-form-item>
+            <el-form-item label="菜单权限" prop="age">
+                <el-input v-model.number="ruleForm.age" />
+            </el-form-item>
+            <el-form-item class="button-group">
+                <el-button type="primary" @click="submitForm(ruleFormRef)" class="btn">
+                    提交
+                </el-button>
+                <el-button @click="resetForm(ruleFormRef)" class="btn">重置</el-button>
+            </el-form-item>
+        </el-form>
     </ItemWrap>
+    <!-- <el-button @click="$emit('close')">关闭</el-button> -->
 </template>
-<script setup lang="ts"></script>
-<style scoped></style>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+
+const ruleFormRef = ref<FormInstance>()
+
+const checkAge = (rule: any, value: any, callback: any) => {
+    if (!value) {
+        return callback(new Error('Please input the age'))
+    }
+    setTimeout(() => {
+        if (!Number.isInteger(value)) {
+            callback(new Error('Please input digits'))
+        } else {
+            if (value < 18) {
+                callback(new Error('Age must be greater than 18'))
+            } else {
+                callback()
+            }
+        }
+    }, 1000)
+}
+
+const validatePass = (rule: any, value: any, callback: any) => {
+    if (value === '') {
+        callback(new Error('Please input the password'))
+    } else {
+        if (ruleForm.checkPass !== '') {
+            if (!ruleFormRef.value) return
+            ruleFormRef.value.validateField('checkPass')
+        }
+        callback()
+    }
+}
+const validatePass2 = (rule: any, value: any, callback: any) => {
+    if (value === '') {
+        callback(new Error('Please input the password again'))
+    } else if (value !== ruleForm.pass) {
+        callback(new Error("Two inputs don't match!"))
+    } else {
+        callback()
+    }
+}
+
+const ruleForm = reactive({
+    pass: '',
+    checkPass: '',
+    age: '',
+})
+
+const rules = reactive<FormRules<typeof ruleForm>>({
+    pass: [{ validator: validatePass, trigger: 'blur' }],
+    checkPass: [{ validator: validatePass2, trigger: 'blur' }],
+    age: [{ validator: checkAge, trigger: 'blur' }],
+})
+
+const submitForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    formEl.validate((valid) => {
+        if (valid) {
+            console.log('submit!')
+        } else {
+            console.log('error submit!')
+        }
+    })
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    formEl.resetFields()
+}
+</script>
+<style scoped>
+::v-deep .el-form * {
+    background-color: transparent !important;
+}
+
+.demo-ruleForm {
+    margin: auto;
+    text-align: center;
+    font-size: 20px;
+    margin-top: 120px;
+}
+
+.adduser-items {
+    font-size: 25px;
+    width: 100%;
+    height: 500px;
+}
+
+.button-group {
+    position: absolute;
+    bottom: 0;
+    right: 10px;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.btn {
+    margin-top: 100px;
+}
+
+::v-deep .el-input{
+    font-size: 30px;
+    width: 100%;
+    height: 50px;
+    color: rgb(255, 255, 255);
+    border-color: rgb(0, 0, 0);
+}
+::v-deep .el-form-item__label {
+    font-size: 20px; /* 修改字体大小 */
+    color: #765ff8; /* 修改字体颜色 */
+}
+::v-deep .el-button {
+    font-size: 16px;
+    color: #ffffff;
+}
+</style>

src/views/index/index.vue

@@ -36,13 +36,13 @@ import User from "./user.vue";
 
     </div>
     <div class="contetn_bottom">
-      <el-button type="primary" @click="this.$router.push('/')" class="tech-button">数据中心</el-button>
-      <el-button type="primary" class="tech-button">消息中心</el-button>
+      <el-button type="primary" @click="$router.push('/')" class="tech-button">数据中心</el-button>
+      <el-button type="primary" class="tech-button" @click="$router.push('/message')">消息中心</el-button>
       <el-button type="primary" class="tech-button">档案管理</el-button>
       <el-button type="primary" class="tech-button">设备管理</el-button>
       <el-button type="primary" class="tech-button">实时监控</el-button>
       <el-button type="primary" class="tech-button">报表管理</el-button>
-      <el-button type="primary" class="tech-button" @click="this.$router.push('/user')">用户管理</el-button>
+      <el-button type="primary" class="tech-button" @click="$router.push('/user')">用户管理</el-button>
       <el-button type="primary" class="tech-button">系统设置</el-button>
     </div>
     <div class="contetn_right">

src/views/index/message-center.vue

@@ -0,0 +1,331 @@
+<template>
+    <el-button type="primary" @click="$router.push('/')" class="back-home-btn">返回首页</el-button>
+    <ItemWrap class="contetn_left-bottom contetn_lr-item" title="消息中心">
+        <!-- <el-button type="primary" class="back-home-btn btn-add" @click="showAddUser">添加用户</el-button> -->
+        <div class="demo-datetime-picker">
+            <div class="block">
+                <el-date-picker class="date-picker" v-model="datatime" type="datetimerange" range-separator="至"
+                    start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss"
+                    date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
+            </div>
+
+            <el-input class="input-search" placeholder="请输入内容" v-model="input" />
+            <el-button type="primary" class="btn-search" @click="showAddUser">搜索</el-button>
+
+        </div>
+        <div class="btngroup">
+            <el-button type="primary" class="btntype" @click="showAddUser">报警信息</el-button>
+            <el-button type="primary" class="btntype" @click="showAddUser">库存情况</el-button>
+        </div>
+
+        <div class="user_skills" style="margin-top:20px;">
+            <el-table :data="tableData" class="eltables">
+                <el-table-column prop="warntype" label="报警类型" />
+                <el-table-column prop="detail" label="报警详情" />
+                <el-table-column prop="address" label="设备地址" />
+                <el-table-column prop="date" label="报警时间" />
+                <el-table-column prop="state" label="通知状态" />
+                <!-- <el-table-column label="操作">
+          <el-button type="primary" size="mini" @click="">编辑</el-button>
+          <el-button type="danger" size="mini" @click="">删除</el-button>
+        </el-table-column> -->
+            </el-table>
+            <el-pagination class="pagination" background layout="prev, pager, next" :total="totalItems"
+                :page-size="pageSize" :current-page="currentPage" @current-change="handleCurrentChange" />
+        </div>
+    </ItemWrap>
+</template>
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import CapsuleChart from "@/components/datav/capsule-chart";
+import { ranking } from "@/api";
+import { ElMessage } from "element-plus";
+import Adduser from "./adduser.vue";
+
+const tableData = [
+    {
+        warntype: '断电报警',
+        date: '2016-05-03',
+        detail: '设备断电报警',
+        address: 'No. 189, Grove St, Los Angeles',
+        state: 'No',
+    },
+    {
+        warntype: '断电报警',
+        date: '2016-05-03',
+        detail: '设备断电报警',
+        address: 'No. 189, Grove St, Los Angeles',
+        state: 'No',
+    },
+    {
+        warntype: '断电报警',
+        date: '2016-05-03',
+        detail: '设备断电报警',
+        address: 'No. 189, Grove St, Los Angeles',
+        state: 'No',
+    },
+    {
+        warntype: '断电报警',
+        date: '2016-05-03',
+        detail: '设备断电报警',
+        address: 'No. 189, Grove St, Los Angeles',
+        state: 'No',
+    },
+]
+
+const tableDatas = [
+    {
+        warntype: '断电报警',
+        date: '2016-05-03',
+        detail: '设备断电报警',
+        address: 'No. 189, Grove St, Los Angeles',
+        state: 'No',
+    },
+    {
+        warntype: '断电报警',
+        date: '2016-05-03',
+        detail: '设备断电报警',
+        address: 'No. 189, Grove St, Los Angeles',
+        state: 'No',
+    },
+    {
+        warntype: '断电报警',
+        date: '2016-05-03',
+        detail: '设备断电报警',
+        address: 'No. 189, Grove St, Los Angeles',
+        state: 'No',
+    },
+    {
+        warntype: '断电报警',
+        date: '2016-05-03',
+        detail: '设备断电报警',
+        address: 'No. 189, Grove St, Los Angeles',
+        state: 'No',
+    },
+]
+const datatime = ref('')
+const input = ref('')
+const isAddUserVisible = ref(false);
+const showAddUser = () => {
+    isAddUserVisible.value = true;
+};
+// 分页相关状态
+const pageSize = ref(10); // 每页显示的条目数
+const currentPage = ref(1); // 当前页码
+const totalItems = ref(tableData.length); // 总条目数
+
+// 根据当前页码和每页大小计算显示的数据
+// const displayedTableData = computed(() => {
+//   const start = (currentPage.value - 1) * pageSize.value;
+//   const end = start + pageSize.value;
+//   return tableData.slice(start, end);
+// });
+
+// 当前页码改变时触发的方法
+const handleCurrentChange = (val: number) => {
+    currentPage.value = val;
+};
+</script>
+
+<style scoped>
+.contetn_lr-item {
+    font-size: 30px;
+    margin-top: 80px;
+    height: 800px;
+}
+
+.eltables {
+    width: 100%;
+    font-size: large;
+    text-align: center;
+    margin-top: 50px;
+}
+
+.btn-search,
+.back-home-btn {
+    background-color: transparent;
+    position: absolute;
+    margin-top: 30px;
+    top: 10px;
+    left: 10px;
+}
+
+.btn-search {
+    margin-top: 37px;
+    margin-left: 690px;
+    height: 45px;
+}
+
+::v-deep .input-search {
+    background: none;
+    background-color: transparent !important;
+    border: none;
+    width: 200px;
+    height: 50px;
+    font-size: 30px;
+    margin-top: 10px;
+    top: -60px;
+    left: 450px;
+    padding: auto;
+}
+
+::v-deep .el-input {
+    background: none;
+    background-color: transparent !important;
+    border: none;
+}
+
+.btntype {
+    background-color: transparent;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    font-size: large
+}
+
+.btngroup {
+    margin-left: 44%;
+}
+
+.user_skills {
+    width: 100%;
+    text-align: center;
+    font-size: larger;
+}
+
+.user_skills ::v-deep .el-table--fit {
+    padding: 20px;
+}
+
+.user_skills ::v-deep .el-table,
+.el-table__expanded-cell {
+    background-color: transparent;
+}
+
+.user_skills ::v-deep .el-table tr {
+    background-color: transparent !important;
+}
+
+.user_skills ::v-deep .el-table--enable-row-transition .el-table__body td,
+.el-table .cell {
+    background-color: transparent;
+}
+
+::v-deep .el-table::before {
+    content: "";
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 0px;
+    background-color: transparent;
+}
+
+::v-deep .el-dialog__body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.user_skills ::v-deep .el-table__body tr:hover>td {
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+.user_skills ::v-deep .el-table thead th {
+    background-color: transparent;
+}
+
+.user_skills ::v-deep .el-table__body tr:hover>td {
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+::v-deep .el-table {
+    border: none !important;
+}
+
+::v-deep .el-table::before,
+::v-deep .el-table::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    border-bottom: none !important;
+    height: 1px;
+}
+
+.user_skills ::v-deep .el-table td,
+.user_skills ::v-deep .el-table th {
+    text-align: center;
+    vertical-align: middle;
+    color: #006ff0;
+    border: none;
+    height: 0px;
+    font-size: 20px;
+}
+
+.user_skills ::v-deep .el-table th {
+    color: #00beed;
+}
+
+.user_skills ::v-deep .el-table,
+.user_skills ::v-deep .el-table * {
+    border: none !important;
+    box-shadow: none !important;
+
+}
+
+::v-deep .pagination {
+    display: flex;
+    justify-content: right;
+    align-items: center;
+    background-color: transparent;
+    margin-right: 15px;
+    margin-top: 260px;
+}
+
+::v-deep .el-dialog {
+    position: relative;
+    /* 确保伪元素定位正确 */
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+::v-deep .el-dialog::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+    /* 确保伪元素在内容之下 */
+    background-color: inherit;
+    /* 继承父元素的背景色 */
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+::v-deep .el-table__body-wrapper {
+    overflow-x: hidden;
+    /* 隐藏水平滚动条 */
+    scrollbar-width: none;
+    /* Firefox专用 */
+    -ms-overflow-style: none;
+    /* IE 和 Edge */
+}
+
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+    /* Chrome, Safari 和 Opera */
+    display: none;
+}
+
+::v-deep .date-picker {
+    background-color: transparent;
+    height: 50px;
+    font-size: 30px;
+    left: 20px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: blue;
+    border-radius: 10px;
+}
+</style>

src/views/index/user.vue

@@ -1,8 +1,29 @@
+<template>
+  <el-button type="primary" @click="$router.push('/')" class="back-home-btn">返回首页</el-button>
+  <ItemWrap class="contetn_left-bottom contetn_lr-item" title="用户管理">
+    <el-button type="primary" class="back-home-btn btn-add" @click="showAddUser">添加用户</el-button>
+    <el-dialog v-model="isAddUserVisible">
+      <Adduser @close="isAddUserVisible = false"></Adduser>
+    </el-dialog>
+    <div class="user_skills" style="margin-top:20px;">
+      <el-table :data="tableData" class="eltables">
+        <el-table-column prop="date" label="时间"/>
+        <el-table-column prop="name" label="用户名" width="180" />
+        <el-table-column prop="address" label="地址" />
+        <el-table-column label="操作">
+          <el-button type="primary" size="mini" @click="">编辑</el-button>
+          <el-button type="danger" size="mini" @click="">删除</el-button>
+        </el-table-column>
+      </el-table>
+    </div>
+  </ItemWrap>
+</template>
 <script setup lang="ts">
 import { ref, reactive } from "vue";
 import CapsuleChart from "@/components/datav/capsule-chart";
 import { ranking } from "@/api";
 import { ElMessage } from "element-plus";
+import Adduser from "./adduser.vue";
 const tableData = [
   {
     date: '2016-05-03',
@@ -25,38 +46,29 @@ const tableData = [
     address: 'No. 189, Grove St, Los Angeles',
   },
 ]
+const isAddUserVisible = ref(false);
+const showAddUser = () => {
+  isAddUserVisible.value = true;
+};
+
 </script>
 
-<template>
-      <el-button type="primary" @click="this.$router.push('/')" class="back-home-btn">返回首页</el-button>
-  <ItemWrap class="contetn_left-bottom contetn_lr-item" title="用户管理">
-    <el-button type="primary"  class="back-home-btn btn-add">添加用户</el-button>
-    <div class="user_skills" style="margin-top:20px;">
-    <el-table :data="tableData" class="eltables">
-      <el-table-column prop="date" label="时间" width="180"/>
-      <el-table-column prop="name" label="用户名" width="180" />
-      <el-table-column prop="address" label="地址" />
-      <el-table-column  label="操作" >
-        <el-button type="primary" size="mini" @click="handleEdit">编辑</el-button>
-        <el-button type="danger" size="mini" @click="handleEdit">删除</el-button>
-      </el-table-column>
-    </el-table>
-  </div>
-  </ItemWrap>
-  </template>
+
 
 <style scoped>
-.contetn_lr-item{
+.contetn_lr-item {
   font-size: 30px;
   margin-top: 80px;
   height: 800px;
 }
-.eltables{
+
+.eltables {
   width: 100%;
   font-size: large;
   text-align: center;
   margin-top: 50px;
 }
+
 .back-home-btn {
   background-color: transparent;
   position: absolute;
@@ -64,48 +76,65 @@ const tableData = [
   top: 10px;
   left: 10px;
 }
-.btn-add{
+
+.btn-add {
   margin-top: 50px;
   margin-left: 85%;
 }
-.user_skills{
-   width: 100%;
-   margin-top: 50%;
-   text-align: center;
-   font-size: larger;
+
+.user_skills {
+  width: 100%;
+  margin-top: 50%;
+  text-align: center;
+  font-size: larger;
+}
+
+.user_skills ::v-deep .el-table--fit {
+  padding: 20px;
 }
-.user_skills /deep/ .el-table--fit{
-    padding: 20px;
+
+.user_skills ::v-deep .el-table,
+.el-table__expanded-cell {
+  background-color: transparent;
 }
-.user_skills /deep/  .el-table, .el-table__expanded-cell {
-    background-color: transparent;
+
+.user_skills ::v-deep .el-table tr {
+  background-color: transparent !important;
 }
 
-.user_skills /deep/ .el-table tr {
-    background-color: transparent!important;
+.user_skills ::v-deep .el-table--enable-row-transition .el-table__body td,
+.el-table .cell {
+  background-color: transparent;
 }
-.user_skills /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
-   background-color: transparent;
+
+::v-deep .el-table::before {
+  content: "";
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 0px;
+  background-color: transparent;
 }
-.el-table::before {
-	 left: 0;
-	 bottom: 0;
-	 width: 100%;
-	 height: 0px;
+::v-deep .el-dialog__body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-.user_skills ::v-deep .el-table__body tr:hover > td {
+.user_skills ::v-deep .el-table__body tr:hover>td {
   background-color: rgba(255, 255, 255, 0.2);
 }
+
 .user_skills ::v-deep .el-table thead th {
   background-color: transparent;
 }
 
-.user_skills ::v-deep .el-table__body tr:hover > td {
+.user_skills ::v-deep .el-table__body tr:hover>td {
   background-color: rgba(255, 255, 255, 0.2);
 }
 .user_skills ::v-deep .el-table {
   border: none;
 }
+
 .user_skills ::v-deep .el-table::after {
   content: '';
   position: absolute;
@@ -113,20 +142,41 @@ const tableData = [
   bottom: 0;
   right: 0;
   border-bottom: none !important;
-  /* 如果需要，可以增加下面的属性以确保伪元素的高度为0 */
   height: 0;
 }
-.user_skills ::v-deep .el-table td, .user_skills ::v-deep .el-table th {
+
+.user_skills ::v-deep .el-table td,
+.user_skills ::v-deep .el-table th {
   text-align: center;
+  vertical-align: middle;
   color: aqua;
   border: none;
   height: 0px;
 }
+
 .user_skills ::v-deep .el-table,
 .user_skills ::v-deep .el-table * {
   border: none !important;
   box-shadow: none !important;
-  
+
+}
+
+::v-deep .el-dialog {
+  position: relative; /* 确保伪元素定位正确 */
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+::v-deep .el-dialog::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1; /* 确保伪元素在内容之下 */
+  background-color: inherit; /* 继承父元素的背景色 */
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(10px);
 }
 
 </style>