diff --git a/package-lock.json b/package-lock.json
index 3367e17..e496ae6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "vue": "^2.6.14",
         "vue-iframe": "^0.0.0",
         "vue-router": "^3.5.1",
+        "vue2-element-dict": "^1.0.2",
         "vuex": "^3.6.2"
       },
       "devDependencies": {
@@ -16322,6 +16323,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vue2-element-dict": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/vue2-element-dict/-/vue2-element-dict-1.0.2.tgz",
+      "integrity": "sha512-/IJwzUc/e9sUdlg+s6PaXM+vZ54sStElUne4Ar70Mvw/V2ysRlFfbX4jihnvDlVz+12HGfu5QmoXHOuRGtkAUw=="
+    },
     "node_modules/vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
@@ -29824,6 +29830,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue2-element-dict": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/vue2-element-dict/-/vue2-element-dict-1.0.2.tgz",
+      "integrity": "sha512-/IJwzUc/e9sUdlg+s6PaXM+vZ54sStElUne4Ar70Mvw/V2ysRlFfbX4jihnvDlVz+12HGfu5QmoXHOuRGtkAUw=="
+    },
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
diff --git a/package.json b/package.json
index 14dfd3c..b3a1c5f 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "vue": "^2.6.14",
     "vue-iframe": "^0.0.0",
     "vue-router": "^3.5.1",
+    "vue2-element-dict": "^1.0.2",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
diff --git a/src/assets/css/home-style.css b/src/assets/css/home-style.css
index d00dae6..034751c 100644
--- a/src/assets/css/home-style.css
+++ b/src/assets/css/home-style.css
@@ -1073,6 +1073,14 @@ body.light-mode .video-bg:before {
     transform:scale(1.08);
     cursor: pointer;
 }
+.card_style{
+    height:390px;
+    font-size: 18px;
+    background-color: #ffffff;
+    border-color: rgba(209, 225, 189, 0.89);
+    text-align: center;
+    border-radius:10px;
+}
 
 
 
diff --git a/src/components/setting/category/CategoryManage.vue b/src/components/setting/category/CategoryManage.vue
index e7e9833..ab46994 100644
--- a/src/components/setting/category/CategoryManage.vue
+++ b/src/components/setting/category/CategoryManage.vue
@@ -7,7 +7,7 @@
     <div class="base-style" style="margin-top:20px;font-family: SimHei;font-size:18px;font-weight:600;margin-left:20px">
       <el-row>
         <el-col :span="24">
-          <el-button type="primary" plain size="medium" round>创建目录</el-button>
+          <el-button @click="openAddCategoryFun()" type="primary" plain size="medium" round >创建目录</el-button>
         </el-col>
         <el-col :span="24" style="margin-top:20px">
           <el-input
@@ -24,24 +24,33 @@
                 header-row-class-name="table_header_class"
                 border>
         <el-table-column
+
             align="center"
             type="index"
             :index="hIndex"
             prop="date"
             label="序号"
-            width="80">
+            width="50">
         </el-table-column>
         <el-table-column
+
             align="center"
             prop="name"
             label="分类名称"
             width="180">
         </el-table-column>
+        <el-table-column
+
+            align="center"
+            prop="id"
+            label="分类编号"
+            width="50">
+        </el-table-column>
         <el-table-column
             align="center"
             prop="createtime"
             label="创建时间"
-            width="200">
+            width="140">
         </el-table-column>
         <el-table-column
             align="center"
@@ -49,13 +58,39 @@
             label="包含网址数"
             width="100">
         </el-table-column>
+        <el-table-column align="center" key="status" prop="status" label="启用状态" width="90" >
+          <template slot-scope="scope">
+            <el-switch
+                v-model="scope.row.status"
+                :active-value="0"
+                :inactive-value="1"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                disabled
+            >
+            </el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" key="needLogin" prop="needLogin" label="公开状态" width="90">
+          <template slot-scope="scope">
+            <el-switch
+                v-model="scope.row.needLogin"
+                :active-value="1"
+                :inactive-value="0"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                disabled
+            >
+            </el-switch>
+          </template>
+        </el-table-column>
         <el-table-column
             align="center"
             prop="weigh"
             label="权重"
             width="80">
         </el-table-column>
-        <el-table-column prop="date" label="操作" width="150">
+        <el-table-column prop="date" label="操作" width="160">
           <template slot-scope="scope">
             <div class="ButtonBlock">
               <img class="MyButton" @click="handleEdit(scope.row)"
@@ -66,8 +101,41 @@
           </template>
         </el-table-column>
       </el-table>
-
-
+      <el-dialog title="新增分类" :visible.sync="openAddCategory" width="30%"
+                 append-to-body
+                 :close-on-click-modal="false"
+                 :before-close="closeDialog"
+      >
+        <el-form ref="form" :rules="rules" class="login_container" :model="form"
+                 style="margin-top:-10px" status-icon  label-width="100px" >
+          <el-form-item label="分类名" prop="name">
+            <el-input v-model="form.name"  placeholder='分类名称'  clearable></el-input>
+          </el-form-item>
+          <el-form-item label="分类权重" prop="weigh" >
+            <el-input v-model="form.weigh"  placeholder='分类权重' clearable ></el-input>
+          </el-form-item>
+          <el-form-item label="用户id" prop="userId" style="display: none">
+            <el-input v-model="form.userId" placeholder='用户id' clearable ></el-input>
+          </el-form-item>
+          <el-form-item label="是否启用" prop="status">
+            <el-radio-group v-model="form.status" >
+              <el-radio :label="0">有效</el-radio>
+              <el-radio :label="1">无效</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="是否公开" prop="needLogin">
+            <el-radio-group v-model="form.needLogin" >
+              <el-radio :label="1">公开</el-radio>
+              <el-radio :label="0">私有</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item>
+            <div style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: space-between">
+              <el-button @click="addCategory('form')" type="primary" style=";margin-top:10px">确认</el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+      </el-dialog>
     </div>
 
 
@@ -80,12 +148,31 @@ export default {
   name: "CategoryManage",
   data() {
     return {
+      // 表头名字：
+      titlename:null,
+      // 新增目录页面：
+      openAddCategory:false,
+      // 对话框显示：
+      dialogVisible:false,
+      // 允许对话框修改：
+      isEdit:true,
       searchCate:'',
       userId:null,
       List:[],
       form:{
         name:'',
         weigh:'',
+        needLogin:'',
+        status:'',
+        userId:'',
+      },
+      // 校验规则
+      rules: {
+        name: [{ required: 'true', message: '请输入分类名', trigger: 'blur' }],
+        weigh: [{ required: 'true', message: '请输入权重', trigger: 'blur' }],
+        needLogin: [{ required: 'true', message: '请完善信息', trigger: 'blur' }],
+        status: [{ required: 'true', message: '请输入是否启用', trigger: 'blur' }],
+        userId: [{ required: 'true', message: '登录信息有误', trigger: 'blur' }],
       }
     }
   },
@@ -98,6 +185,129 @@ export default {
   },
   computed: {},
   methods: {
+    // 删除网址：
+    handleDelete(index) {
+      var that=this;
+      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        axios({
+          method: 'post',
+          // 请求的地址
+          url: '/api/UrlAndCate/deleteCateByCateId',
+          // URL 中的查询参数
+          params: {
+            Id: index.id,
+            userId:this.userId,
+          }
+        }).then(function (res) {
+          if (res.data.code === 500) {
+            Vue.prototype.$notify.error({
+              title: '错误',
+              message: res.data.msg,
+              offset: 50
+            });
+          } else {
+            Vue.prototype.$notify({
+              title: '成功',
+              message: ('i', {style: 'color: teal'}, "删除成功"),
+              type: 'success',
+              offset: 50
+            });
+            that.GetData();
+          }
+
+        });
+      }).catch(() => {
+        // 点击取消:不删除了
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
+    },
+    // 关闭弹出对话框之前：
+    closeDialog() {
+      var that = this;
+      // 先重置
+      this.GetData();
+      //表单重置
+      that.form = {
+        name:'',
+        weigh:'',
+        needLogin:'',
+        status:'',
+      }
+      // 后关闭
+      this.dialogVisible = false;
+      this.openAddCategory=false;
+    },
+    // 新增按钮:
+    openAddCategoryFun(){
+      var _this = this;
+      // console.log(_this.List);
+      _this.titlename="新增分类";
+      this.openAddCategory=true;
+    },
+    // 编辑按钮：
+    handleEdit(index) {
+      var _this = this;
+      this.openAddCategoryFun();
+      _this.titlename="编辑分类";
+      // 深拷贝
+      this.form = index;
+    },
+    // 提交新增：
+    addCategory(rulelist){
+      var _this = this;
+      _this.$refs[rulelist].validate((valid)=>{
+        if(valid){
+          axios({
+            method: 'post',
+            // 请求的地址
+            url: '/api/UrlAndCate/insertCateByUser',
+            // URL 中的查询参数
+            params: {
+              name: this.form.name,
+              weigh: this.form.weigh,
+              status: this.form.status,
+              need_login: this.form.need_login,
+              userId: this.form.userId,
+            }
+          }).then(function (res) {
+            if (res.data.code === 500) {
+              Vue.prototype.$notify.error({
+                title: '错误',
+                message: res.data.msg,
+                offset: 50
+              });
+
+            } else {
+              _this.closeDialog();
+              Vue.prototype.$notify({
+                title: '成功',
+                message: ('i', {style: 'color: teal'}, "更新成功！"),
+                type: 'success',
+                offset: 50
+              });
+            }
+          }).catch((error)=>{
+            Vue.prototype.$notify.error({
+              title: '错误',
+              message: error,
+              offset: 50
+            });
+          })
+        }else{
+          return;
+        }
+      })
+
+      //调用方法提交
+
+    },
     // 时间转换：
     getFormatDate() {
       var that = this;
@@ -150,6 +360,8 @@ export default {
         }
       })
       // /selectAllArticleByadmin
+      that.form.userId = that.userId;
+
     },
 
   }
@@ -188,7 +400,24 @@ export default {
 ::v-deep .el-table--border{
   border: var(--table-border) solid 3px;
 }
+.login_container {
+  width: 400px;
+  border: 1px solid #eaeaea;
+  margin: 100px auto;
+  padding: 35px 35px 15px 35px;
+  box-sizing: border-box;
+  border-radius: 15px;
+  background-color: #fff;
+  box-shadow: 0 0 25px #cac6c6;
+  .login_title{
+      color: #505458;
+      text-align: center;
+      margin-bottom: 40px;}
+}
 
-
-
+::v-deep .el-dialog__body{
+  background-image: url("../../../assets/img/SkyPic.jpg");
+  margin-top:15px;
+  height:500px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/setting/website/websiteManage.vue b/src/components/setting/website/websiteManage.vue
index ad937fd..af44885 100644
--- a/src/components/setting/website/websiteManage.vue
+++ b/src/components/setting/website/websiteManage.vue
@@ -1,9 +1,153 @@
 <template>
-  <div>
-    网站管理
+  <div class="main" style="text-shadow: 0 0 20px var(--font-border);overflow:scroll">
+    <div class="HeadLine" style="margin-top:30px;margin-left:15px;">
+      <div class="HeadSquare" ></div>
+      <div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-platform"></i>网站管理</div>
+    </div>
+    <div class="base-style" style="margin-top:20px;font-family: SimHei;font-size:18px;font-weight:600;margin-left:20px">
+      <el-row>
+        <el-col :span="24">
+          <el-button @click="openAddCategoryFun()" type="primary" plain size="medium" round >创建标签</el-button>
+        </el-col>
+        <el-col :span="24" style="margin-top:20px">
+          <el-input
+              placeholder="请输入内容"
+              v-model="searchCate"
+              clearable
+              style="width:200px">
+          </el-input>
+          <el-button type="success" plain size="medium" round style="margin-left:10px">查询标签</el-button>
+        </el-col>
+      </el-row>
+      <el-table class="MyTable"
+                :data="List"
+                header-row-class-name="table_header_class"
+                border>
+        <el-table-column
+            align="center"
+            type="index"
+            :index="hIndex"
+            prop="date"
+            label="序号"
+            width="50">
+        </el-table-column>
+        <el-table-column
+
+            align="center"
+            prop="name"
+            label="网站名"
+            width="180">
+        </el-table-column>
+        <el-table-column
+
+            align="center"
+            prop="root"
+            label="所属分类"
+            width="100">
+        </el-table-column>
+        <el-table-column
+            align="center"
+            prop="createtime"
+            label="创建时间"
+            width="140">
+        </el-table-column>
+        <el-table-column
+            align="center"
+            prop="desc"
+            label="描述"
+            width="100">
+        </el-table-column>
+        <el-table-column
+            align="center"
+            prop="agentHint"
+            label="代理提示语"
+            width="100">
+        </el-table-column>
+        <el-table-column align="center" key="status" prop="status" label="启用状态" width="90" >
+          <template slot-scope="scope">
+            <el-switch
+                v-model="scope.row.status"
+                :active-value="0"
+                :inactive-value="1"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                disabled
+            >
+            </el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" key="needLogin" prop="needLogin" label="公开状态" width="90">
+          <template slot-scope="scope">
+            <el-switch
+                v-model="scope.row.needLogin"
+                :active-value="1"
+                :inactive-value="0"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                disabled
+            >
+            </el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column
+            align="center"
+            prop="weigh"
+            label="权重"
+            width="80">
+        </el-table-column>
+        <el-table-column prop="date" label="操作" width="160">
+          <template slot-scope="scope">
+            <div class="ButtonBlock">
+              <img class="MyButton" @click="handleEdit(scope.row)"
+                   src="../../../assets/img/EditButton.svg" style="width:60px">
+              <img class="MyButton" @click="handleDelete(scope.row)"
+                   src="../../../assets/img/DeleteButton.svg" style="width:60px">
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-dialog title="新增分类" :visible.sync="openAddCategory" width="30%"
+                 append-to-body
+                 :close-on-click-modal="false"
+                 :before-close="closeDialog"
+      >
+        <el-form ref="form" :rules="rules" class="login_container" :model="form"
+                 style="margin-top:-10px" status-icon  label-width="100px" >
+          <el-form-item label="分类名" prop="name">
+            <el-input v-model="form.name"  placeholder='分类名称'  clearable></el-input>
+          </el-form-item>
+          <el-form-item label="分类权重" prop="weigh" >
+            <el-input v-model="form.weigh"  placeholder='分类权重' clearable ></el-input>
+          </el-form-item>
+          <el-form-item label="用户id" prop="userId" style="display: none">
+            <el-input v-model="form.userId" placeholder='用户id' clearable ></el-input>
+          </el-form-item>
+          <el-form-item label="是否启用" prop="status">
+            <el-radio-group v-model="form.status" >
+              <el-radio :label="0">有效</el-radio>
+              <el-radio :label="1">无效</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="是否公开" prop="needLogin">
+            <el-radio-group v-model="form.needLogin" >
+              <el-radio :label="1">公开</el-radio>
+              <el-radio :label="0">私有</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item>
+            <div style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: space-between">
+              <el-button @click="addCategory('form')" type="primary" style=";margin-top:10px">确认</el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+      </el-dialog>
+    </div>
   </div>
 </template>
 <script>
+import axios from "axios";
+import Vue from "vue";
+
 export default {
   name:"WebsiteManage",
   components:{
@@ -12,22 +156,285 @@ export default {
   },
   data() {
     return {
-
-    }},
+      // 表头名字：
+      titlename:null,
+      // 新增目录页面：
+      openAddCategory:false,
+      // 对话框显示：
+      dialogVisible:false,
+      // 允许对话框修改：
+      isEdit:true,
+      searchCate:'',
+      userId:null,
+      List:[],
+      form:{
+        name:'',
+        weigh:'',
+        needLogin:'',
+        status:'',
+        userId:'',
+      },
+      // 校验规则
+      rules: {
+        name: [{ required: 'true', message: '请输入分类名', trigger: 'blur' }],
+        weigh: [{ required: 'true', message: '请输入权重', trigger: 'blur' }],
+        needLogin: [{ required: 'true', message: '请完善信息', trigger: 'blur' }],
+        status: [{ required: 'true', message: '请输入是否启用', trigger: 'blur' }],
+        userId: [{ required: 'true', message: '登录信息有误', trigger: 'blur' }],
+      }
+    }
+  },
   mounted() {
-
+    // this.getFormatDate();
   },
   created() {
-
-  },
-  computed: {
-
+    this.getUserInfo();
+    // this.GetData();
   },
+  computed: {},
   methods: {
+    // 删除网址：
+    handleDelete(index) {
+      var that=this;
+      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        axios({
+          method: 'post',
+          // 请求的地址
+          url: '/api/UrlAndCate/deleteCateByCateId',
+          // URL 中的查询参数
+          params: {
+            Id: index.id,
+            userId:this.userId,
+          }
+        }).then(function (res) {
+          if (res.data.code === 500) {
+            Vue.prototype.$notify.error({
+              title: '错误',
+              message: res.data.msg,
+              offset: 50
+            });
+          } else {
+            Vue.prototype.$notify({
+              title: '成功',
+              message: ('i', {style: 'color: teal'}, "删除成功"),
+              type: 'success',
+              offset: 50
+            });
+            that.GetData();
+          }
+
+        });
+      }).catch(() => {
+        // 点击取消:不删除了
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
+    },
+    // 关闭弹出对话框之前：
+    closeDialog() {
+      var that = this;
+      // 先重置
+      this.GetData();
+      //表单重置
+      that.form = {
+        name:'',
+        weigh:'',
+        needLogin:'',
+        status:'',
+      }
+      // 后关闭
+      this.dialogVisible = false;
+      this.openAddCategory=false;
+    },
+    // 新增按钮:
+    openAddCategoryFun(){
+      var _this = this;
+      console.log(_this.List);
+      _this.titlename="新增分类";
+      _this.openAddCategory=true;
+    },
+    // 编辑按钮：
+    handleEdit(index) {
+      var _this = this;
+      this.openAddCategoryFun();
+      _this.titlename="编辑分类";
+      // 深拷贝
+      this.form = index;
+    },
+    // 提交新增：
+    addCategory(rulelist){
+      var _this = this;
+      _this.$refs[rulelist].validate((valid)=>{
+        if(valid){
+          axios({
+            method: 'post',
+            // 请求的地址
+            url: '/api/UrlAndCate/insertCateByUser',
+            // URL 中的查询参数
+            params: {
+              name: this.form.name,
+              weigh: this.form.weigh,
+              status: this.form.status,
+              need_login: this.form.need_login,
+              userId: this.form.userId,
+            }
+          }).then(function (res) {
+            if (res.data.code === 500) {
+              Vue.prototype.$notify.error({
+                title: '错误',
+                message: res.data.msg,
+                offset: 50
+              });
+
+            } else {
+              _this.closeDialog();
+              Vue.prototype.$notify({
+                title: '成功',
+                message: ('i', {style: 'color: teal'}, "更新成功！"),
+                type: 'success',
+                offset: 50
+              });
+            }
+          }).catch((error)=>{
+            Vue.prototype.$notify.error({
+              title: '错误',
+              message: error,
+              offset: 50
+            });
+          })
+        }else{
+          return;
+        }
+      })
+
+      //调用方法提交
+
+    },
+    // 时间转换：
+    // getFormatDate() {
+    //   var that = this;
+    //   for(let i = 0 ; i < that.List.length; i++){
+    //     var date = new Date(that.List[i].createtime);// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
+    //     var Y = date.getFullYear() + '年';
+    //     var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
+    //     var D = date.getDate() + '日 ';
+    //     console.log("date: " + Y + M + D);
+    //     that.List[i].createtime = "" + Y + M + D;
+    //   }
+    // },
+    // 获取条数：
+    hIndex(index){
+      var linenum = parseInt( parseInt(index) + parseInt(1))
+      return linenum;
+    },
+    // 获取用户ID
+    getUserInfo() {
+      let _this = this;
+      if(localStorage.getItem("Authorization") && localStorage.getItem("userId")){
+        _this.userId = localStorage.getItem("userId")
+        _this.GetData();
+      } else {
+        Vue.prototype.$notify.error({
+          title: '错误',
+          message: "登录状态失效，请重新登录！",
+          offset: 0
+        });
+      }
+    },
+    GetData(){
+      // 获取数据
+      var that = this;
+      axios({
+        method:'post',
+        url:'/api/UrlAndCate/disposeBookmarkToJson',
+        params:{
+          userId: that.userId
+        }
+      }).then(function(res){
+        var tmp = res.data;
+        var tmp2 = [];
+        for(let i=0;i< tmp.length;i++){
+          var rootName = tmp[i].name;
+          tmp[i].childUC = tmp[i].childUC.map(item=>{
+            return{
+              ...item,
+              root:rootName
+            }
+          });
+          tmp2 = tmp2.concat(tmp[i].childUC);
+        }
+        that.List = tmp2;
+        for(let i = 0 ; i < that.List.length; i++){
+          var date = new Date(that.List[i].createtime);// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
+          var Y = date.getFullYear() + '年';
+          var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
+          var D = date.getDate() + '日 ';
+          that.List[i].createtime = "" + Y + M + D;
+        }
+      })
+      that.form.userId = that.userId;
+    },
+
   }
 
 }
 </script>
 <style scoped>
+.base-style{
+  display: flex;
+  flex-direction: column;
+}
+/**表格样式，直接复制**/
+::v-deep .table_header_class th{
+  background-color: var(--table-bg-color)!important;
+  color:var(--theme-color);
+  text-align: center;
+}
+.MyTable{
+  margin-top:10px;
+  width: 100%;
+  background-color:var(--table-bg-color);
+  color:var(--theme-color);
+  border-radius: 5px;
+}
 
+::v-deep .el-table__body tr:hover > td {
+  background-color: var(--table-bg-color-hover) !important;
+}
+
+::v-deep .el-table tr,
+.el-table th.el-table__cell {
+  background-color: var(--table-bg-color);
+  border: var(--table-border) solid 3px;
+}
+
+::v-deep .el-table--border{
+  border: var(--table-border) solid 3px;
+}
+.login_container {
+  width: 400px;
+  border: 1px solid #eaeaea;
+  margin: 100px auto;
+  padding: 35px 35px 15px 35px;
+  box-sizing: border-box;
+  border-radius: 15px;
+  background-color: #fff;
+  box-shadow: 0 0 25px #cac6c6;
+  .login_title{
+    color: #505458;
+    text-align: center;
+    margin-bottom: 40px;}
+}
+
+::v-deep .el-dialog__body{
+  background-image: url("../../../assets/img/SkyPic.jpg");
+  margin-top:15px;
+  height:500px;
+}
 </style>
\ No newline at end of file