diff --git a/package-lock.json b/package-lock.json
index 10f4fec..8fc3e24 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "core-js": "^3.8.3",
         "echarts": "^5.4.3",
         "element-ui": "^2.15.14",
+        "gsap": "^3.12.4",
         "jquery": "^3.7.1",
         "qs": "^6.11.2",
         "vue": "^2.6.14",
@@ -6309,6 +6310,11 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "dev": true
     },
+    "node_modules/gsap": {
+      "version": "3.12.4",
+      "resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.12.4.tgz",
+      "integrity": "sha512-1ByAq8dD0W4aBZ/JArgaQvc0gyUfkGkP8mgAQa0qZGdpOKlSOhOf+WNXjoLimKaKG3Z4Iu6DKZtnyszqQeyqWQ=="
+    },
     "node_modules/gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -16111,6 +16117,11 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "dev": true
     },
+    "gsap": {
+      "version": "3.12.4",
+      "resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.12.4.tgz",
+      "integrity": "sha512-1ByAq8dD0W4aBZ/JArgaQvc0gyUfkGkP8mgAQa0qZGdpOKlSOhOf+WNXjoLimKaKG3Z4Iu6DKZtnyszqQeyqWQ=="
+    },
     "gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/gzip-size/-/gzip-size-6.0.0.tgz",
diff --git a/package.json b/package.json
index 3a02042..6f8d2b2 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "core-js": "^3.8.3",
     "echarts": "^5.4.3",
     "element-ui": "^2.15.14",
+    "gsap": "^3.12.4",
     "jquery": "^3.7.1",
     "qs": "^6.11.2",
     "vue": "^2.6.14",
diff --git a/src/api/api.js b/src/api/api.js
deleted file mode 100644
index 20cd3f9..0000000
--- a/src/api/api.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import request from "@/utils/request.js";
-import qs from "qs";
-
-const baseUrl = '/api'
-
-
-export function getHotNews() {
-    return request({
-        url: baseUrl+"/hot",
-        method: "get",
-    });
-}
\ No newline at end of file
diff --git a/src/api/login.js b/src/api/login.js
index 623ef42..5b463b0 100644
--- a/src/api/login.js
+++ b/src/api/login.js
@@ -1,29 +1,34 @@
 import request from "@/utils/request.js";
 import qs from "qs";
-
-const baseUrl = '/dev'
+import http from '@/utils/http'
 
 
 export function login(params) {
     return request({
-        url: baseUrl+"/login",
-        method: "post",
+        url: "/login",
+        method: "get",
         data:params
     });
+
+
+
 }
 
 export function register(params) {
     return request({
-        url: baseUrl+"/register",
-        method: "post",
+        url: "/register",
+        method: "get",
         data:params
     });
 }
 
-export function sendActiveCode() {
+export function sendActiveCode(userEmail) {
     return request({
-        url: baseUrl+"/sendActiveCode",
+        url: "/sendActiveCode",
         method: "get",
-
+        params:userEmail
     });
-}
\ No newline at end of file
+}
+//其实，也不一定就是params，也可以是 query 还有 data 的呀！
+//params是添加到url的请求字符串中的，用于get请求。会将参数加到 url后面。所以，传递的都是字符串。无法传递参数中含有json格式的数据
+//而data是添加到请求体（body）中的， 用于post请求。添加到请求体（body）中，json 格式也是可以的。
\ No newline at end of file
diff --git a/src/assets/img/daoru.a909296f.webp b/src/assets/img/daoru.a909296f.webp
new file mode 100644
index 0000000..27d4219
Binary files /dev/null and b/src/assets/img/daoru.a909296f.webp differ
diff --git a/src/components/home/HomeHeader.vue b/src/components/home/HomeHeader.vue
index cd3d740..2780560 100644
--- a/src/components/home/HomeHeader.vue
+++ b/src/components/home/HomeHeader.vue
@@ -90,7 +90,7 @@
 
             <div class="login-btn" style="display: flex;flex-direction: row;justify-content: space-between">
               <el-button @click="resetForm('loginForm')">重置</el-button>
-              <el-button type="primary" @click="submitLoginForm()">登录
+              <el-button type="primary" @click="submitLoginForm('loginForm')">登录
               </el-button
               >
 
@@ -101,28 +101,28 @@
         <el-tab-pane name="2">
           <span slot="label"><i class="el-icon-edit"></i> 注册</span>
           <el-form :model="registerFrom" :rules="registerRules" ref="registerFrom" class="form">
-            <el-form-item prop="username">
+            <el-form-item prop="userLogin">
               <el-input
-                  v-model="registerFrom.username"
+                  v-model="registerFrom.userLogin"
                   prefix-icon="el-icon-user"
                   placeholder="用户名"
                   auto-complete="off"
               ></el-input>
             </el-form-item>
-            <el-form-item prop="email">
+            <el-form-item prop="userEmail">
               <el-input
                   prefix-icon="el-icon-s-promotion"
-                  v-model="registerFrom.email"
+                  v-model="registerFrom.userEmail"
                   placeholder="邮箱"
               >
               </el-input>
             </el-form-item>
-            <el-form-item prop="password">
+            <el-form-item prop="userPassword">
               <!-- type：密码显示* -->
               <el-input
                   prefix-icon="el-icon-unlock"
                   :type="passwordVisible"
-                  v-model="registerFrom.password"
+                  v-model="registerFrom.userPassword"
                   placeholder="密码"
                   auto-complete="new-password"
               >
@@ -143,14 +143,14 @@
             </el-form-item>
 
 
-            <el-form-item prop="captcha"
+            <el-form-item prop="activeCode"
                           style="display: flex;flex-wrap: nowrap;flex-direction: row;align-items: center">
               <div style="display: flex;flex-wrap: nowrap;align-items: center;justify-content: space-evenly">
                 <el-input
                     prefix-icon="el-icon-mobile-phone"
                     type="text"
                     placeholder="验证码"
-                    v-model="registerFrom.captcha"
+                    v-model="registerFrom.activeCode"
                     class="vertify_code"
                     auto-complete="false"
                     style=""
@@ -164,7 +164,7 @@
 
             </el-form-item>
             <div class="login-btn" style="display: flex;flex-direction: row;justify-content: space-between">
-              <el-button type="primary" @click="submitRegisterForm()">注册
+              <el-button type="primary" @click="submitRegisterForm('registerFrom')">注册
               </el-button
               >
               <el-button @click="resetForm('registerFrom')">重置</el-button>
@@ -243,10 +243,8 @@
 </template>
 <script>
 import $ from 'jquery'
-import {login, register, sendActiveCode} from "@/api/login";
 import Vue from "vue";
-
-
+import axios from "axios";
 export default {
   name: "HomeHeader",
   components: {},
@@ -273,10 +271,10 @@ export default {
         remember: null
       },
       registerFrom: {
-        username: null,
-        email: null,
-        captcha: null,
-        password: null,
+        userLogin: null,
+        userEmail: null,
+        activeCode: null,
+        userPassword: null,
         repassword: null,
       },
       repasswordForm: {
@@ -294,19 +292,19 @@ export default {
         code: [{required: true, message: "请输入验证码", trigger: "blur"}],
       },
       registerRules: {
-        username: [
+        userLogin: [
           {required: true, message: "请输入用户名", trigger: "blur"},
         ],
-        email: [{required: true, message: "请输入邮箱", trigger: "blur"}],
-        password: [{required: true, message: "请输入密码", trigger: "blur"}],
+        userEmail: [{required: true, message: "请输入邮箱", trigger: "blur"}],
+        userPassword: [{required: true, message: "请输入密码", trigger: "blur"}],
         repassword: [{required: true, message: "请输入确认密码", trigger: "blur"}],
-        captcha: [{required: true, message: "请输入验证码", trigger: "blur"}],
+        activeCode: [{required: true, message: "请输入验证码", trigger: "blur"}],
       },
       repasswordRelus: {
         email: [{required: true, message: "请输入邮箱", trigger: "blur"}],
         password: [{required: true, message: "请输入密码", trigger: "blur"}],
         repassword: [{required: true, message: "请输入确认密码", trigger: "blur"}],
-        captcha: [{required: true, message: "请输入验证码", trigger: "blur"}],
+        activeCode: [{required: true, message: "请输入验证码", trigger: "blur"}],
       }
     }
   },
@@ -358,47 +356,75 @@ export default {
     },
     // 登录提交
     submitLoginForm() {
-      login(this.loginForm).then(response => {
-        console.log(response);
-        Vue.prototype.$notify({
-          title: '成功',
-          message: ('i', {style: 'color: teal'}, response.data.msg),
-          type: 'success',
-          offset: 50
-        });
-      }).catch((error) => {
-        Vue.prototype.$notify.error({
-          title: '错误',
-          message: error,
-          offset: 50
-        });
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+            axios({
+              method: 'get',
+              url: '/api/login',
+              params: this.registerFrom
+            }).then(function (res) {
+              console.log(res);
+              Vue.prototype.$notify({
+                title: '成功',
+                message: ('i', {style: 'color: teal'}, res.data),
+                type: 'success',
+                offset: 0
+              });
+            }).catch((error)=>{
+              Vue.prototype.$notify.error({
+                title: '错误',
+                message: error,
+                offset: 0
+              });
+            })
+        }else {
+          Vue.prototype.$notify.error({
+            title: '错误',
+            message: "请填写完整信息！",
+            offset: 0
+          });
+        }
       })
     },
     // 注册提交
-    submitRegisterForm() {
-      if (this.registerFrom.password === this.registerFrom.repassword) {
-        register(this.registerFrom).then(response => {
-          console.log(response);
-          Vue.prototype.$notify({
-            title: '成功',
-            message: ('i', {style: 'color: teal'}, response.data.msg),
-            type: 'success',
-            offset: 50
-          });
-        }).catch((error) => {
+    submitRegisterForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.registerFrom.userPassword===this.registerFrom.repassword){
+            axios({
+              method: 'get',
+              url: '/api/register',
+              params: this.registerFrom
+            }).then(function (res) {
+              console.log(res);
+              Vue.prototype.$notify({
+                title: '成功',
+                message: ('i', {style: 'color: teal'}, res.data),
+                type: 'success',
+                offset: 0
+              });
+            }).catch((error)=>{
+              Vue.prototype.$notify.error({
+                title: '错误',
+                message: error,
+                offset: 0
+              });
+            })
+          }else {
+            Vue.prototype.$notify.error({
+              title: '错误',
+              message: "密码不一致",
+              offset: 0
+            });
+          }
+        }else {
           Vue.prototype.$notify.error({
             title: '错误',
-            message: error,
-            offset: 50
+            message: "请填写完整信息！",
+            offset: 0
           });
-        })
-      } else {
-        Vue.prototype.$notify.error({
-          title: '错误',
-          message: "两次密码不相同",
-          offset: 50
-        });
-      }
+        }
+      })
     },
     //重置
     resetForm(formName) {
@@ -406,44 +432,48 @@ export default {
     },
     // 发送邮箱验证码
     sendEmail() {
-      if (this.registerFrom.email !== null) {
-        sendActiveCode().then(response => {
-          console.log(response);
-          Vue.prototype.$notify({
-            title: '成功',
-            message: ('i', {style: 'color: teal'}, response.data.msg),
-            type: 'success',
-            offset: 50
-          });
-        }).catch((error) => {
+      var _this=this;
+          if (this.registerFrom.userEmail !== null) {
+            axios({
+              method: 'get',
+              url: '/api/sendActiveCode',
+              params: this.registerFrom
+            }).then(function (res) {
+              Vue.prototype.$notify({
+                title: '成功',
+                message: ('i', {style: 'color: teal'}, res.data),
+                type: 'success',
+                offset: 0
+              });
+              const TIME_COUNT = 60; //  更改倒计时时间
+              if (!_this.timer) {
+                _this.sendTime = TIME_COUNT;
+                _this.showTime = false;
+                _this.timer = setInterval(() => {
+                  if (_this.sendTime > 0 && _this.sendTime <= TIME_COUNT) {
+                    _this.sendTime--;
+                  } else {
+                    _this.showTime = true;
+                    clearInterval(_this.timer); // 清除定时器
+                    _this.timer = null;
+                  }
+                }, 1000);
+              }
+            }).catch((error)=>{
+              Vue.prototype.$notify.error({
+                title: '错误',
+                message: error,
+                offset: 0
+              });
+            })
+
+        }else {
           Vue.prototype.$notify.error({
             title: '错误',
-            message: error,
-            offset: 50
+            message: '请填写邮箱！',
+            offset: 0
           });
-        }).then(()=>{
-          const TIME_COUNT = 60; //  更改倒计时时间
-          if (!this.timer) {
-            this.sendTime = TIME_COUNT;
-            this.showTime = false;
-            this.timer = setInterval(() => {
-              if (this.sendTime > 0 && this.sendTime <= TIME_COUNT) {
-                this.sendTime--;
-              } else {
-                this.showTime = true;
-                clearInterval(this.timer); // 清除定时器
-                this.timer = null;
-              }
-            }, 1000);
-          }
-        })
-      } else {
-        Vue.prototype.$notify.error({
-          title: '错误',
-          message: "请先填写邮箱！",
-          offset: 50
-        });
-      }
+        }
 
     },
     //点击图片更换验证码
diff --git a/src/components/hotNews/HotNews.vue b/src/components/hotNews/HotNews.vue
index 5cce3ee..e763399 100644
--- a/src/components/hotNews/HotNews.vue
+++ b/src/components/hotNews/HotNews.vue
@@ -6,7 +6,6 @@
   </div>
 </template>
 <script>
-import {getHotNews} from "@/api/api";
 import NewsCard from "@/components/hotNews/NewsCard.vue";
 
 export default {
@@ -23,11 +22,7 @@ export default {
   },
   computed: {},
   methods: {
-    getNews(){
-      getHotNews().then(res=>{
-        console.log(res);
-      })
-    }
+
   }
 }
 </script>
diff --git a/src/components/setting/home/PersonalHomePage.vue b/src/components/setting/home/PersonalHomePage.vue
index c1cfb5b..6d4bea3 100644
--- a/src/components/setting/home/PersonalHomePage.vue
+++ b/src/components/setting/home/PersonalHomePage.vue
@@ -1,11 +1,14 @@
 <template>
-  <div>
-    首页
+  <div class="main">
+    <PersonalInfoCard></PersonalInfoCard>
   </div>
 </template>
 <script>
+import PersonalInfoCard from "@/components/setting/home/PersonalInfoCard.vue";
+
 export default {
   name: "PersonalHomePage",
+  components: {PersonalInfoCard},
   data() {
     return {}
   },
diff --git a/src/components/setting/home/PersonalInfoCard.vue b/src/components/setting/home/PersonalInfoCard.vue
new file mode 100644
index 0000000..686ad0d
--- /dev/null
+++ b/src/components/setting/home/PersonalInfoCard.vue
@@ -0,0 +1,471 @@
+<template>
+  <div class="card" data-state="#about">
+    <div class="card-header">
+      <div class="card-cover" style="background-image: url('https://images.unsplash.com/photo-1549068106-b024baf5062d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=934&amp;q=80')"></div>
+      <img class="card-avatar" src="https://images.unsplash.com/photo-1549068106-b024baf5062d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=934&amp;q=80" alt="avatar">
+      <h1 class="card-fullname">William Rocheald</h1>
+      <h2 class="card-jobtitle">UI Developer</h2>
+    </div>
+    <div class="card-main">
+      <div class="card-section is-active" id="about">
+        <div class="card-content">
+          <div class="card-subtitle">ABOUT</div>
+          <p class="card-desc">Whatever tattooed stumptown art party sriracha gentrify hashtag intelligentsia readymade schlitz brooklyn disrupt.
+          </p>
+        </div>
+        <div class="card-social">
+          <a href="#"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path d="M15.997 3.985h2.191V.169C17.81.117 16.51 0 14.996 0c-3.159 0-5.323 1.987-5.323 5.639V9H6.187v4.266h3.486V24h4.274V13.267h3.345l.531-4.266h-3.877V6.062c.001-1.233.333-2.077 2.051-2.077z"></path></svg></a>
+          <a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path d="M512 97.248c-19.04 8.352-39.328 13.888-60.48 16.576 21.76-12.992 38.368-33.408 46.176-58.016-20.288 12.096-42.688 20.64-66.56 25.408C411.872 60.704 384.416 48 354.464 48c-58.112 0-104.896 47.168-104.896 104.992 0 8.32.704 16.32 2.432 23.936-87.264-4.256-164.48-46.08-216.352-109.792-9.056 15.712-14.368 33.696-14.368 53.056 0 36.352 18.72 68.576 46.624 87.232-16.864-.32-33.408-5.216-47.424-12.928v1.152c0 51.008 36.384 93.376 84.096 103.136-8.544 2.336-17.856 3.456-27.52 3.456-6.72 0-13.504-.384-19.872-1.792 13.6 41.568 52.192 72.128 98.08 73.12-35.712 27.936-81.056 44.768-130.144 44.768-8.608 0-16.864-.384-25.12-1.44C46.496 446.88 101.6 464 161.024 464c193.152 0 298.752-160 298.752-298.688 0-4.64-.16-9.12-.384-13.568 20.832-14.784 38.336-33.248 52.608-54.496z"></path></svg></a>
+          <a href="#"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+            <path d="M301 256c0 24.852-20.148 45-45 45s-45-20.148-45-45 20.148-45 45-45 45 20.148 45 45zm0 0"></path>
+            <path d="M332 120H180c-33.086 0-60 26.914-60 60v152c0 33.086 26.914 60 60 60h152c33.086 0 60-26.914 60-60V180c0-33.086-26.914-60-60-60zm-76 211c-41.355 0-75-33.645-75-75s33.645-75 75-75 75 33.645 75 75-33.645 75-75 75zm86-146c-8.285 0-15-6.715-15-15s6.715-15 15-15 15 6.715 15 15-6.715 15-15 15zm0 0"></path>
+            <path d="M377 0H135C60.562 0 0 60.563 0 135v242c0 74.438 60.563 135 135 135h242c74.438 0 135-60.563 135-135V135C512 60.562 451.437 0 377 0zm45 332c0 49.625-40.375 90-90 90H180c-49.625 0-90-40.375-90-90V180c0-49.625 40.375-90 90-90h152c49.625 0 90 40.375 90 90zm0 0"></path></svg></a>
+          <a href="#"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path d="M23.994 24v-.001H24v-8.802c0-4.306-.927-7.623-5.961-7.623-2.42 0-4.044 1.328-4.707 2.587h-.07V7.976H8.489v16.023h4.97v-7.934c0-2.089.396-4.109 2.983-4.109 2.549 0 2.587 2.384 2.587 4.243V24zM.396 7.977h4.976V24H.396zM2.882 0C1.291 0 0 1.291 0 2.882s1.291 2.909 2.882 2.909 2.882-1.318 2.882-2.909A2.884 2.884 0 002.882 0z"></path></svg></a>
+        </div>
+      </div>
+      <div class="card-section" id="experience">
+        <div class="card-content">
+          <div class="card-subtitle">WORK EXPERIENCE</div>
+          <div class="card-timeline">
+            <div class="card-item" data-year="2014">
+              <div class="card-item-title">Front-end Developer at <span>JotForm</span></div>
+              <div class="card-item-desc">Disrupt stumptown retro everyday carry unicorn.</div>
+            </div>
+            <div class="card-item" data-year="2016">
+              <div class="card-item-title">UI Developer at <span>GitHub</span></div>
+              <div class="card-item-desc">Developed new conversion funnels and disrupt.</div>
+            </div>
+            <div class="card-item" data-year="2018">
+              <div class="card-item-title">Illustrator at <span>Google</span></div>
+              <div class="card-item-desc">Onboarding illustrations for App.</div>
+            </div>
+            <div class="card-item" data-year="2020">
+              <div class="card-item-title">Full-Stack Developer at <span>CodePen</span></div>
+              <div class="card-item-desc">Responsible for the encomposing brand expreience.</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="card-section" id="contact">
+        <div class="card-content">
+          <div class="card-subtitle">CONTACT</div>
+          <div class="card-contact-wrapper">
+            <div class="card-contact">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"></path>
+                <circle cx="12" cy="10" r="3"></circle></svg>
+              Algonquin Rd, Three Oaks Vintage, MI, 49128
+            </div>
+            <div class="card-contact">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"></path></svg>(269) 756-9809</div>
+            <div class="card-contact">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+                <path d="M22 6l-10 7L2 6"></path></svg>
+              william@rocheald.com
+            </div>
+            <button class="contact-me">WORK TOGETHER</button>
+          </div>
+        </div>
+      </div>
+      <div class="card-buttons">
+        <button data-section="#about" class="is-active">ABOUT</button>
+        <button data-section="#experience">EXPERIENCE</button>
+        <button data-section="#contact">CONTACT</button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "PersonalInfoCard",
+  data() {
+    return {}
+  },
+  mounted() {
+    const buttons = document.querySelectorAll(".card-buttons button");
+    const sections = document.querySelectorAll(".card-section");
+    const card = document.querySelector(".card");
+
+    const handleButtonClick = e => {
+      const targetSection = e.target.getAttribute("data-section");
+      const section = document.querySelector(targetSection);
+      targetSection !== "#about" ?
+          card.classList.add("is-active") :
+          card.classList.remove("is-active");
+      card.setAttribute("data-state", targetSection);
+      sections.forEach(s => s.classList.remove("is-active"));
+      buttons.forEach(b => b.classList.remove("is-active"));
+      e.target.classList.add("is-active");
+      section.classList.add("is-active");
+    };
+
+    buttons.forEach(btn => {
+      btn.addEventListener("click", handleButtonClick);
+    });
+  },
+  created() {
+
+  },
+  computed: {},
+  methods: {}
+
+}
+</script>
+<style scoped>
+* {
+  box-sizing: border-box;
+}
+
+
+.card {
+  max-width: 340px;
+  margin: auto;
+  overflow-y: auto;
+  position: relative;
+  z-index: 1;
+  overflow-x: hidden;
+  background-color: var(--theme-bg-color);
+  color: var(--theme-color);
+  display: flex;
+  transition: 0.3s;
+  flex-direction: column;
+  border-radius: 10px;
+  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
+  top: 20px;
+  left: 20px;
+}
+
+.card[data-state="#about"] {
+  height: 450px;
+}
+.card[data-state="#about"] .card-main {
+  padding-top: 0;
+}
+
+.card[data-state="#contact"] {
+  height: 430px;
+}
+
+.card[data-state="#experience"] {
+  height: 550px;
+}
+
+.card.is-active .card-header {
+  height: 80px;
+}
+.card.is-active .card-cover {
+  height: 100px;
+  top: -50px;
+}
+.card.is-active .card-avatar {
+  transform: none;
+  left: 20px;
+  width: 50px;
+  height: 50px;
+  bottom: 10px;
+}
+.card.is-active .card-fullname,
+.card.is-active .card-jobtitle {
+  left: 86px;
+  transform: none;
+}
+.card.is-active .card-fullname {
+  bottom: 18px;
+  font-size: 19px;
+}
+.card.is-active .card-jobtitle {
+  bottom: 16px;
+  letter-spacing: 1px;
+  font-size: 10px;
+}
+
+.card-header {
+  position: relative;
+  display: flex;
+  height: 200px;
+  flex-shrink: 0;
+  width: 100%;
+  transition: 0.3s;
+}
+.card-header * {
+  transition: 0.3s;
+}
+
+.card-cover {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  height: 160px;
+  top: -20%;
+  left: 0;
+  will-change: top;
+  background-size: cover;
+  background-position: center;
+  filter: blur(30px);
+  transform: scale(1.2);
+  transition: 0.5s;
+}
+
+.card-avatar {
+  width: 100px;
+  height: 100px;
+  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
+  border-radius: 50%;
+  -o-object-position: center;
+  object-position: center;
+  -o-object-fit: cover;
+  object-fit: cover;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%) translateY(-64px);
+}
+
+.card-fullname {
+  position: absolute;
+  bottom: 0;
+  font-size: 22px;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+  transform: translateY(-10px) translateX(-50%);
+  left: 50%;
+}
+
+.card-jobtitle {
+  position: absolute;
+  bottom: 0;
+  font-size: 11px;
+  white-space: nowrap;
+  font-weight: 500;
+  opacity: 0.7;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  margin: 0;
+  left: 50%;
+  transform: translateX(-50%) translateY(-7px);
+}
+
+.card-main {
+  position: relative;
+  flex: 1;
+  display: flex;
+  padding-top: 10px;
+  flex-direction: column;
+}
+
+.card-subtitle {
+  font-weight: 700;
+  font-size: 13px;
+  margin-bottom: 8px;
+}
+
+.card-content {
+  padding: 20px;
+}
+
+.card-desc {
+  line-height: 1.6;
+  color: #636b6f;
+  font-size: 14px;
+  margin: 0;
+  font-weight: 400;
+  font-family: "DM Sans", sans-serif;
+}
+
+.card-social {
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  margin-bottom: 30px;
+}
+.card-social svg {
+  fill: #a5b5ce;
+  width: 16px;
+  display: block;
+  transition: 0.3s;
+}
+.card-social a {
+  color: #8797a1;
+  height: 32px;
+  width: 32px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.3s;
+  background-color: rgba(93, 133, 193, 0.05);
+  border-radius: 50%;
+  margin-right: 10px;
+}
+.card-social a:hover svg {
+  fill: #637faa;
+}
+.card-social a:last-child {
+  margin-right: 0;
+}
+
+.card-buttons {
+  display: flex;
+  background-color: var(--theme-bg-color);
+  margin-top: auto;
+  color: var(--theme-color);
+  position: sticky;
+  bottom: 0;
+  left: 0;
+}
+.card-buttons button {
+  flex: 1 1 auto;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background: 0;
+  font-size: 13px;
+  border: 0;
+  padding: 15px 5px;
+  cursor: pointer;
+  color: #5c5c6d;
+  transition: 0.3s;
+  font-family: "Jost", sans-serif;
+  font-weight: 500;
+  outline: 0;
+  border-bottom: 3px solid transparent;
+}
+.card-buttons button.is-active, .card-buttons button:hover {
+  color: #2b2c48;
+  border-bottom: 3px solid #8a84ff;
+  background: linear-gradient(to bottom, rgba(127, 199, 231, 0) 0%, rgba(207, 204, 255, 0.2) 44%, rgba(211, 226, 255, 0.4) 100%);
+}
+
+.card-section {
+  display: none;
+}
+.card-section.is-active {
+  display: block;
+  -webkit-animation: fadeIn 0.6s both;
+  animation: fadeIn 0.6s both;
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translatey(40px);
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translatey(40px);
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.card-timeline {
+  margin-top: 30px;
+  position: relative;
+}
+.card-timeline:after {
+  background: linear-gradient(to top, rgba(134, 214, 243, 0) 0%, #516acc 100%);
+  content: "";
+  left: 42px;
+  width: 2px;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  content: "";
+}
+
+.card-item {
+  position: relative;
+  padding-left: 60px;
+  padding-right: 20px;
+  padding-bottom: 30px;
+  z-index: 1;
+}
+.card-item:last-child {
+  padding-bottom: 5px;
+}
+.card-item:after {
+  content: attr(data-year);
+  width: 10px;
+  position: absolute;
+  top: 0;
+  left: 37px;
+  width: 8px;
+  height: 8px;
+  line-height: 0.6;
+  border: 2px solid #fff;
+  font-size: 11px;
+  text-indent: -35px;
+  border-radius: 50%;
+  color: rgba(134, 134, 134, 0.7);
+  background: linear-gradient(to bottom, #a0aee3 0%, #516acc 100%);
+}
+
+.card-item-title {
+  font-weight: 500;
+  font-size: 14px;
+  margin-bottom: 5px;
+}
+
+.card-item-desc {
+  font-size: 13px;
+  color: #6f6f7b;
+  line-height: 1.5;
+  font-family: "DM Sans", sans-serif;
+}
+
+.card-contact-wrapper {
+  margin-top: 20px;
+}
+
+.card-contact {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  color: #6f6f7b;
+  font-family: "DM Sans", sans-serif;
+  line-height: 1.6;
+  cursor: pointer;
+}
+.card-contact + .card-contact {
+  margin-top: 16px;
+}
+.card-contact svg {
+  flex-shrink: 0;
+  width: 30px;
+  min-height: 34px;
+  margin-right: 12px;
+  transition: 0.3s;
+  padding-right: 12px;
+  border-right: 1px solid #dfe2ec;
+}
+
+.contact-me {
+  border: 0;
+  outline: none;
+  background: linear-gradient(to right, rgba(83, 200, 239, 0.8) 0%, rgba(81, 106, 204, 0.8) 96%);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
+  color: #fff;
+  padding: 12px 16px;
+  width: 100%;
+  border-radius: 5px;
+  margin-top: 25px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: "Jost", sans-serif;
+  transition: 0.3s;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/setting/layout/SettingLeftSide.vue b/src/components/setting/layout/SettingLeftSide.vue
index 13cbc8f..99ea8af 100644
--- a/src/components/setting/layout/SettingLeftSide.vue
+++ b/src/components/setting/layout/SettingLeftSide.vue
@@ -3,7 +3,7 @@
     <div class="side-wrapper">
 <!--      <div class="side-title">Apps</div>-->
       <div class="side-menu">
-        <router-link to="/personal">
+        <router-link to="/admin">
           <svg viewBox="0 0 512 512">
             <g xmlns="http://www.w3.org/2000/svg" fill="currentColor">
               <path d="M0 0h128v128H0zm0 0M192 0h128v128H192zm0 0M384 0h128v128H384zm0 0M0 192h128v128H0zm0 0" data-original="#bfc9d1"></path>
@@ -14,7 +14,7 @@
           首页
           <!--          <span class="notification-number updates">3</span>-->
         </router-link>
-        <router-link to="/admin">
+        <router-link to="/system">
           <svg viewBox="0 0 512 512">
             <g xmlns="http://www.w3.org/2000/svg" fill="currentColor">
               <path d="M0 0h128v128H0zm0 0M192 0h128v128H192zm0 0M384 0h128v128H384zm0 0M0 192h128v128H0zm0 0" data-original="#bfc9d1"></path>
diff --git a/src/components/setting/layout/SettingMainHeader.vue b/src/components/setting/layout/SettingMainHeader.vue
index 96fab61..e53ce37 100644
--- a/src/components/setting/layout/SettingMainHeader.vue
+++ b/src/components/setting/layout/SettingMainHeader.vue
@@ -19,7 +19,7 @@ import $ from 'jquery'
 export default {
   name:"SettingMainHeader",
   props:{
-    tabList:Object
+    tabList:Array
   },
   data() {
     return {
diff --git a/src/components/setting/onsite/BaseSettings.vue b/src/components/setting/onsite/BaseSettings.vue
index f4d7a27..7a2516e 100644
--- a/src/components/setting/onsite/BaseSettings.vue
+++ b/src/components/setting/onsite/BaseSettings.vue
@@ -1,13 +1,97 @@
 <template>
-  <div class="main">
-    <span class="title">发信配置</span>
+  <div class="base-main">
+    <div>
+      <span class="title">发信配置</span>
+      <div>
+        <el-form v-model="from">
+          <el-form-item prop="username">
+            <span class="min-title">邮箱用户名<br></span>
+            <el-input
+                v-model="from.username"
+                prefix-icon="el-icon-user"
+                placeholder="邮箱用户名"
+                auto-complete="off"
+                style="width: 600px"
+            ></el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <span class="min-title">邮箱密码/授权码<br></span>
+            <el-input
+                prefix-icon="el-icon-unlock"
+                :type="passwordVisible"
+                v-model="from.password"
+                placeholder="密码"
+                auto-complete="new-password"
+                style="width: 600px"
+            >
+              <i slot="suffix" :class="icon" @click="showPass"></i>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="email">
+            <span class="min-title">发件邮箱<br></span>
+            <el-input
+                prefix-icon="el-icon-s-promotion"
+                v-model="from.email"
+                placeholder="邮箱"
+                style="width: 600px"
+            >
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="smtp">
+            <span class="min-title">SMTP地址<br></span>
+            <el-input
+                prefix-icon="el-icon-connection"
+                v-model="from.smtp"
+                placeholder="smtp"
+                style="width: 600px"
+            >
+            </el-input>
+
+          </el-form-item>
+          <el-form-item prop="port">
+            <span class="min-title">端口<br></span>
+            <el-input
+                prefix-icon="el-icon-place"
+                v-model="from.port"
+                placeholder="port"
+                style="width: 600px"
+            >
+            </el-input>
+          </el-form-item>
+          <el-button class="el-button">保存修改</el-button>
+        </el-form>
+        <div style="display: flex;flex-direction: row;align-items: flex-start">
+          <span class="min-title">常用邮箱的STMP地址:<br>
+          QQ邮箱：smtp.qq.com<br>
+          网易163：smtp.163.com<br>
+          Gmail：smtp.gmail.com<br>
+        </span>
+          <span style="margin-left: 20px" class="min-title">常用邮箱的端口:<br>
+          SMTP：25<br>
+          SMTP SSL：465<br></span>
+        </div>
+
+      </div>
+    </div>
+
   </div>
 </template>
 <script>
 export default {
   name: "BaseSettings",
+  components: {},
   data() {
-    return {}
+    return {
+      passwordVisible: "password",
+      icon: "el-icon-view",
+      from: {
+        username: null,
+        password: null,
+        email: null,
+        smtp: null,
+        port: null,
+      }
+    }
   },
   mounted() {
 
@@ -16,19 +100,31 @@ export default {
 
   },
   computed: {},
-  methods: {}
+  methods: {
+    // 显示密码
+    showPass() {
+      if (this.passwordVisible === "text") {
+        this.passwordVisible = "password";
+        //更换图标
+        this.icon = "el-icon-view";
+      } else {
+        this.passwordVisible = "text";
+        this.icon = "el-icon-lock";
+      }
+    },
+  }
 
 }
 </script>
 <style scoped>
-.main {
+.base-main {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
-//align-items: center; margin-left: 50px; overflow: scroll;
-  margin-left: 50px;
-  overflow: scroll;
+//align-items: center; margin-left: 50px; overflow: scroll; margin-left: 50px;
+  overflow: scroll !important;
 }
+
 .title {
   font-weight: bolder;
   font-size: 20px;
@@ -36,4 +132,15 @@ export default {
   margin-top: 10px;
 //background-color: var(--theme-bg-color);
 }
+
+.min-title {
+  color: var(--theme-color);
+//background-color: var(--theme-bg-color);
+}
+.el-button{
+  color: var(--theme-color);
+background-color: var(--theme-bg-color);
+  border-color:var(--border-color) ;
+}
+
 </style>
\ No newline at end of file
diff --git a/src/components/setting/onsite/Export.vue b/src/components/setting/onsite/Export.vue
new file mode 100644
index 0000000..6725e60
--- /dev/null
+++ b/src/components/setting/onsite/Export.vue
@@ -0,0 +1,1067 @@
+<template>
+  <div>
+    <div class="dl">
+      <div class="dl-box">
+        <div class="dl-button">
+          <div class="arrow"></div>
+          <div class="basket">
+            <div class="basket-top"></div>
+          </div>
+        </div>
+        <div class="dl-progress">
+          <div class="check">
+            <svg>
+              <use xlink:href="#check"></use>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="dl-status">
+        <div class="text text-file">Status</div>
+        <div class="text text-number"></div>
+      </div>
+    </div>
+    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+      <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130 130" id="check">
+        <polyline points="100.2,40.2 51.5,88.8 29.8,67.5 "></polyline>
+      </symbol>
+    </svg>
+  </div>
+</template>
+<script>
+export default {
+  name: "Export",
+  data() {
+    return {
+    }
+  },
+  mounted() {
+    var $ = (s, o = document) => o.querySelector(s);
+
+    $(".dl").addEventListener("click", function () {
+      this.classList.add("run");
+      setTimeout(() => this.classList.add("done"), 4000);
+      setTimeout(() => this.classList.remove("done"), 5500);
+      setTimeout(() => this.classList.remove("run"), 5500);
+    });
+  },
+  created() {
+
+  },
+  computed: {},
+  methods: {
+
+  }
+
+}
+</script>
+<style scoped>
+@-webkit-keyframes status-animation {
+  1% {
+    content: "1%";
+  }
+  2% {
+    content: "2%";
+  }
+  3% {
+    content: "3%";
+  }
+  4% {
+    content: "4%";
+  }
+  5% {
+    content: "5%";
+  }
+  6% {
+    content: "6%";
+  }
+  7% {
+    content: "7%";
+  }
+  8% {
+    content: "8%";
+  }
+  9% {
+    content: "9%";
+  }
+  10% {
+    content: "10%";
+  }
+  11% {
+    content: "11%";
+  }
+  12% {
+    content: "12%";
+  }
+  13% {
+    content: "13%";
+  }
+  14% {
+    content: "14%";
+  }
+  15% {
+    content: "15%";
+  }
+  16% {
+    content: "16%";
+  }
+  17% {
+    content: "17%";
+  }
+  18% {
+    content: "18%";
+  }
+  19% {
+    content: "19%";
+  }
+  20% {
+    content: "20%";
+  }
+  21% {
+    content: "21%";
+  }
+  22% {
+    content: "22%";
+  }
+  23% {
+    content: "23%";
+  }
+  24% {
+    content: "24%";
+  }
+  25% {
+    content: "25%";
+  }
+  26% {
+    content: "26%";
+  }
+  27% {
+    content: "27%";
+  }
+  28% {
+    content: "28%";
+  }
+  29% {
+    content: "29%";
+  }
+  30% {
+    content: "30%";
+  }
+  31% {
+    content: "31%";
+  }
+  32% {
+    content: "32%";
+  }
+  33% {
+    content: "33%";
+  }
+  34% {
+    content: "34%";
+  }
+  35% {
+    content: "35%";
+  }
+  36% {
+    content: "36%";
+  }
+  37% {
+    content: "37%";
+  }
+  38% {
+    content: "38%";
+  }
+  39% {
+    content: "39%";
+  }
+  40% {
+    content: "40%";
+  }
+  41% {
+    content: "41%";
+  }
+  42% {
+    content: "42%";
+  }
+  43% {
+    content: "43%";
+  }
+  44% {
+    content: "44%";
+  }
+  45% {
+    content: "45%";
+  }
+  46% {
+    content: "46%";
+  }
+  47% {
+    content: "47%";
+  }
+  48% {
+    content: "48%";
+  }
+  49% {
+    content: "49%";
+  }
+  50% {
+    content: "50%";
+  }
+  51% {
+    content: "51%";
+  }
+  52% {
+    content: "52%";
+  }
+  53% {
+    content: "53%";
+  }
+  54% {
+    content: "54%";
+  }
+  55% {
+    content: "55%";
+  }
+  56% {
+    content: "56%";
+  }
+  57% {
+    content: "57%";
+  }
+  58% {
+    content: "58%";
+  }
+  59% {
+    content: "59%";
+  }
+  60% {
+    content: "60%";
+  }
+  61% {
+    content: "61%";
+  }
+  62% {
+    content: "62%";
+  }
+  63% {
+    content: "63%";
+  }
+  64% {
+    content: "64%";
+  }
+  65% {
+    content: "65%";
+  }
+  66% {
+    content: "66%";
+  }
+  67% {
+    content: "67%";
+  }
+  68% {
+    content: "68%";
+  }
+  69% {
+    content: "69%";
+  }
+  70% {
+    content: "70%";
+  }
+  71% {
+    content: "71%";
+  }
+  72% {
+    content: "72%";
+  }
+  73% {
+    content: "73%";
+  }
+  74% {
+    content: "74%";
+  }
+  75% {
+    content: "75%";
+  }
+  76% {
+    content: "76%";
+  }
+  77% {
+    content: "77%";
+  }
+  78% {
+    content: "78%";
+  }
+  79% {
+    content: "79%";
+  }
+  80% {
+    content: "80%";
+  }
+  81% {
+    content: "81%";
+  }
+  82% {
+    content: "82%";
+  }
+  83% {
+    content: "83%";
+  }
+  84% {
+    content: "84%";
+  }
+  85% {
+    content: "85%";
+  }
+  86% {
+    content: "86%";
+  }
+  87% {
+    content: "87%";
+  }
+  88% {
+    content: "88%";
+  }
+  89% {
+    content: "89%";
+  }
+  90% {
+    content: "90%";
+  }
+  91% {
+    content: "91%";
+  }
+  92% {
+    content: "92%";
+  }
+  93% {
+    content: "93%";
+  }
+  94% {
+    content: "94%";
+  }
+  95% {
+    content: "95%";
+  }
+  96% {
+    content: "96%";
+  }
+  97% {
+    content: "97%";
+  }
+  98% {
+    content: "98%";
+  }
+  99% {
+    content: "99%";
+  }
+  100% {
+    content: "100%";
+  }
+}
+@keyframes status-animation {
+  1% {
+    content: "1%";
+  }
+  2% {
+    content: "2%";
+  }
+  3% {
+    content: "3%";
+  }
+  4% {
+    content: "4%";
+  }
+  5% {
+    content: "5%";
+  }
+  6% {
+    content: "6%";
+  }
+  7% {
+    content: "7%";
+  }
+  8% {
+    content: "8%";
+  }
+  9% {
+    content: "9%";
+  }
+  10% {
+    content: "10%";
+  }
+  11% {
+    content: "11%";
+  }
+  12% {
+    content: "12%";
+  }
+  13% {
+    content: "13%";
+  }
+  14% {
+    content: "14%";
+  }
+  15% {
+    content: "15%";
+  }
+  16% {
+    content: "16%";
+  }
+  17% {
+    content: "17%";
+  }
+  18% {
+    content: "18%";
+  }
+  19% {
+    content: "19%";
+  }
+  20% {
+    content: "20%";
+  }
+  21% {
+    content: "21%";
+  }
+  22% {
+    content: "22%";
+  }
+  23% {
+    content: "23%";
+  }
+  24% {
+    content: "24%";
+  }
+  25% {
+    content: "25%";
+  }
+  26% {
+    content: "26%";
+  }
+  27% {
+    content: "27%";
+  }
+  28% {
+    content: "28%";
+  }
+  29% {
+    content: "29%";
+  }
+  30% {
+    content: "30%";
+  }
+  31% {
+    content: "31%";
+  }
+  32% {
+    content: "32%";
+  }
+  33% {
+    content: "33%";
+  }
+  34% {
+    content: "34%";
+  }
+  35% {
+    content: "35%";
+  }
+  36% {
+    content: "36%";
+  }
+  37% {
+    content: "37%";
+  }
+  38% {
+    content: "38%";
+  }
+  39% {
+    content: "39%";
+  }
+  40% {
+    content: "40%";
+  }
+  41% {
+    content: "41%";
+  }
+  42% {
+    content: "42%";
+  }
+  43% {
+    content: "43%";
+  }
+  44% {
+    content: "44%";
+  }
+  45% {
+    content: "45%";
+  }
+  46% {
+    content: "46%";
+  }
+  47% {
+    content: "47%";
+  }
+  48% {
+    content: "48%";
+  }
+  49% {
+    content: "49%";
+  }
+  50% {
+    content: "50%";
+  }
+  51% {
+    content: "51%";
+  }
+  52% {
+    content: "52%";
+  }
+  53% {
+    content: "53%";
+  }
+  54% {
+    content: "54%";
+  }
+  55% {
+    content: "55%";
+  }
+  56% {
+    content: "56%";
+  }
+  57% {
+    content: "57%";
+  }
+  58% {
+    content: "58%";
+  }
+  59% {
+    content: "59%";
+  }
+  60% {
+    content: "60%";
+  }
+  61% {
+    content: "61%";
+  }
+  62% {
+    content: "62%";
+  }
+  63% {
+    content: "63%";
+  }
+  64% {
+    content: "64%";
+  }
+  65% {
+    content: "65%";
+  }
+  66% {
+    content: "66%";
+  }
+  67% {
+    content: "67%";
+  }
+  68% {
+    content: "68%";
+  }
+  69% {
+    content: "69%";
+  }
+  70% {
+    content: "70%";
+  }
+  71% {
+    content: "71%";
+  }
+  72% {
+    content: "72%";
+  }
+  73% {
+    content: "73%";
+  }
+  74% {
+    content: "74%";
+  }
+  75% {
+    content: "75%";
+  }
+  76% {
+    content: "76%";
+  }
+  77% {
+    content: "77%";
+  }
+  78% {
+    content: "78%";
+  }
+  79% {
+    content: "79%";
+  }
+  80% {
+    content: "80%";
+  }
+  81% {
+    content: "81%";
+  }
+  82% {
+    content: "82%";
+  }
+  83% {
+    content: "83%";
+  }
+  84% {
+    content: "84%";
+  }
+  85% {
+    content: "85%";
+  }
+  86% {
+    content: "86%";
+  }
+  87% {
+    content: "87%";
+  }
+  88% {
+    content: "88%";
+  }
+  89% {
+    content: "89%";
+  }
+  90% {
+    content: "90%";
+  }
+  91% {
+    content: "91%";
+  }
+  92% {
+    content: "92%";
+  }
+  93% {
+    content: "93%";
+  }
+  94% {
+    content: "94%";
+  }
+  95% {
+    content: "95%";
+  }
+  96% {
+    content: "96%";
+  }
+  97% {
+    content: "97%";
+  }
+  98% {
+    content: "98%";
+  }
+  99% {
+    content: "99%";
+  }
+  100% {
+    content: "100%";
+  }
+}
+.dl {
+  --background: #FFFFFF;
+  --primary: #1F242D;
+  --border-radius: 3px;
+  --square-size: 70px;
+  --progress-color: linear-gradient(to right top, #00A7FC, #0070ED);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.dl .dl-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+.dl .dl-box .dl-button {
+  width: 55px;
+  height: 55px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  background: var(--theme-bg-color);
+  cursor: pointer;
+  transition: width 0.2s ease-in 0.4s, height 0.2s ease-in 0.4s, background 0.2s ease-in 0.4s;
+}
+.dl .dl-box .dl-button .arrow {
+  position: absolute;
+  top: 20px;
+  width: 2px;
+  height: 15px;
+  background: var(--background);
+  border-radius: var(--border-radius);
+  transition: background 0.2s ease-in 0.4s;
+}
+.dl .dl-box .dl-button .arrow:before, .dl .dl-box .dl-button .arrow:after {
+  content: "";
+  display: block;
+  width: 2px;
+  height: 8px;
+  background: var(--background);
+  position: absolute;
+  bottom: 0px;
+  transform-origin: 50% 100%;
+  border-radius: var(--border-radius);
+  transition: background 0.2s ease-in 0.4s;
+}
+.dl .dl-box .dl-button .arrow:before {
+  transform: rotate(-45deg) translateX(25%);
+}
+.dl .dl-box .dl-button .arrow:after {
+  transform: rotate(45deg) translateX(-25%);
+}
+.dl .dl-box .dl-button .basket {
+  position: absolute;
+  width: 40px;
+  height: 20px;
+  bottom: 20px;
+  border-radius: var(--border-radius);
+}
+.dl .dl-box .dl-button .basket:before, .dl .dl-box .dl-button .basket:after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  height: 0;
+  width: 0;
+  display: block;
+  opacity: var(--opacity, 0);
+  transition: opacity 0.15s linear;
+  border-bottom: solid 2px var(--primary);
+  box-sizing: border-box;
+}
+.dl .dl-box .dl-button .basket:before {
+  left: calc(40px / 2);
+  border-right: solid 2px var(--primary);
+  border-radius: 0 var(--border-radius) var(--border-radius) 0;
+}
+.dl .dl-box .dl-button .basket:after {
+  right: calc(40px / 2);
+  border-left: solid 2px var(--primary);
+  border-radius: var(--border-radius) 0 0 var(--border-radius);
+}
+.dl .dl-box .dl-button .basket .basket-top:before, .dl .dl-box .dl-button .basket .basket-top:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  height: 0;
+  width: 0;
+  display: block;
+  border-top: solid 2px var(--primary);
+}
+.dl .dl-box .dl-button .basket .basket-top:before {
+  left: 2px;
+  border-radius: 0 var(--border-radius) var(--border-radius) 0;
+}
+.dl .dl-box .dl-button .basket .basket-top:after {
+  right: 2px;
+  border-radius: var(--border-radius) 0 0 var(--border-radius);
+}
+.dl .dl-box .dl-progress {
+  width: 0px;
+  height: 100%;
+  position: relative;
+  transition: width 0.2s ease-in, height 0s linear 0.2s;
+}
+.dl .dl-box .dl-progress::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: var(--progress-color);
+  transition: top 0s ease 0.4s;
+}
+.dl .dl-box .dl-progress .check {
+  position: relative;
+  z-index: 1;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.dl .dl-box .dl-progress .check svg {
+  height: 45px;
+  width: 45px;
+  fill: none;
+  stroke: var(--background);
+  stroke-width: 6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: 100 100;
+  stroke-dashoffset: 100;
+}
+.dl .dl-status {
+  margin-left: 0;
+  flex-basis: 0;
+  width: 0;
+  transition: all 0.2s ease-out 0.2s;
+  -webkit-clip-path: inset(0 var(--square-size) 0 0);
+  clip-path: inset(0 var(--square-size) 0 0);
+}
+.dl .dl-status .text {
+  text-align: left;
+  text-transform: uppercase;
+  color: rgba(0, 0, 0, 0.3);
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  line-height: 23px;
+}
+.dl .dl-status .text.text-number {
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.6);
+}
+.dl .dl-status .text.text-number::after {
+  content: "0%";
+}
+.dl.run .dl-box {
+  height: 100%;
+}
+.dl.run .dl-box .dl-button {
+  width: var(--square-size);
+  height: var(--square-size);
+  background: var(--background);
+  transition: width 0.2s ease-out 0.3s, height 0.2s ease-out 0.3s, background 0.2s ease-out 0.3s;
+}
+.dl.run .dl-box .dl-button .arrow {
+  background: var(--primary);
+  transition: background 0.3s ease-in;
+  -webkit-animation: arrow-main 0.75s ease-in forwards infinite;
+  animation: arrow-main 0.75s ease-in forwards infinite;
+}
+.dl.run .dl-box .dl-button .arrow:before, .dl.run .dl-box .dl-button .arrow:after {
+  transition: background 0.3s ease-in;
+  background: var(--primary);
+}
+.dl.run .dl-box .dl-button .arrow:before {
+  -webkit-animation: arrow-left 0.75s ease-in forwards infinite;
+  animation: arrow-left 0.75s ease-in forwards infinite;
+}
+.dl.run .dl-box .dl-button .arrow:after {
+  -webkit-animation: arrow-right 0.75s ease-in forwards infinite;
+  animation: arrow-right 0.75s ease-in forwards infinite;
+}
+.dl.run .dl-box .dl-button .basket:before, .dl.run .dl-box .dl-button .basket:after {
+  --opacity: 1;
+  transition: opacity 0s linear 0.3s;
+  -webkit-animation: btn-border 0.3s forwards ease-in normal 0.5s;
+  animation: btn-border 0.3s forwards ease-in normal 0.5s;
+}
+.dl.run .dl-box .dl-button .basket .basket-top:before, .dl.run .dl-box .dl-button .basket .basket-top:after {
+  -webkit-animation: btn-border-top 0.3s forwards ease-in normal 0.8s;
+  animation: btn-border-top 0.3s forwards ease-in normal 0.8s;
+}
+.dl.run .dl-box .dl-progress {
+  width: var(--square-size);
+  height: var(--square-size);
+  transition: width 0.3s ease-in 0.7s, height 0.3s ease-in 0.7s;
+  background: var(--background);
+}
+.dl.run .dl-box .dl-progress::after {
+  top: 0px;
+  transition: top 2.5s ease 1.5s;
+}
+.dl.run .dl-status {
+  width: var(--square-size);
+  -webkit-clip-path: inset(0 0 0 0);
+  clip-path: inset(0 0 0 0);
+  transition: all 0.3s ease-in 0.7s;
+}
+.dl.run .dl-status .text.text-number::after {
+  -webkit-animation: status-animation 2.5s ease 1.5s forwards;
+  animation: status-animation 2.5s ease 1.5s forwards;
+}
+.dl.done .dl-box .dl-button .arrow {
+  -webkit-animation-play-state: paused;
+  animation-play-state: paused;
+}
+.dl.done .dl-box .dl-button .arrow:before {
+  -webkit-animation-play-state: paused;
+  animation-play-state: paused;
+}
+.dl.done .dl-box .dl-button .arrow:after {
+  -webkit-animation-play-state: paused;
+  animation-play-state: paused;
+}
+.dl.done .dl-box .dl-progress .check svg {
+  -webkit-animation: check 0.3s ease-in-out forwards;
+  animation: check 0.3s ease-in-out forwards;
+}
+
+@-webkit-keyframes arrow-main {
+  0% {
+    transform: translateY(0);
+  }
+  30% {
+    transform: translateY(-5px);
+  }
+  80% {
+    transform: translateY(5px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes arrow-main {
+  0% {
+    transform: translateY(0);
+  }
+  30% {
+    transform: translateY(-5px);
+  }
+  80% {
+    transform: translateY(5px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@-webkit-keyframes arrow-left {
+  0% {
+    transform: rotate(-45deg) translateX(25%);
+  }
+  30% {
+    transform: rotate(-55deg) translateX(25%);
+  }
+  80% {
+    transform: rotate(-35deg) translateX(25%);
+  }
+  100% {
+    transform: rotate(-45deg) translateX(25%);
+  }
+}
+@keyframes arrow-left {
+  0% {
+    transform: rotate(-45deg) translateX(25%);
+  }
+  30% {
+    transform: rotate(-55deg) translateX(25%);
+  }
+  80% {
+    transform: rotate(-35deg) translateX(25%);
+  }
+  100% {
+    transform: rotate(-45deg) translateX(25%);
+  }
+}
+@-webkit-keyframes arrow-right {
+  0% {
+    transform: rotate(45deg) translateX(-25%);
+  }
+  30% {
+    transform: rotate(55deg) translateX(-25%);
+  }
+  80% {
+    transform: rotate(35deg) translateX(-25%);
+  }
+  100% {
+    transform: rotate(45deg) translateX(-25%);
+  }
+}
+@keyframes arrow-right {
+  0% {
+    transform: rotate(45deg) translateX(-25%);
+  }
+  30% {
+    transform: rotate(55deg) translateX(-25%);
+  }
+  80% {
+    transform: rotate(35deg) translateX(-25%);
+  }
+  100% {
+    transform: rotate(45deg) translateX(-25%);
+  }
+}
+@-webkit-keyframes btn-border {
+  0% {
+    width: 0;
+    height: 0;
+  }
+  50% {
+    width: calc(40px / 2);
+    height: 0;
+  }
+  100% {
+    width: calc(40px / 2);
+    height: 20px;
+  }
+}
+@keyframes btn-border {
+  0% {
+    width: 0;
+    height: 0;
+  }
+  50% {
+    width: calc(40px / 2);
+    height: 0;
+  }
+  100% {
+    width: calc(40px / 2);
+    height: 20px;
+  }
+}
+@-webkit-keyframes btn-border-top {
+  0% {
+    width: 0px;
+  }
+  100% {
+    width: 10px;
+  }
+}
+@keyframes btn-border-top {
+  0% {
+    width: 0px;
+  }
+  100% {
+    width: 10px;
+  }
+}
+@-webkit-keyframes check {
+  0% {
+    stroke-dashoffset: 100;
+  }
+  100% {
+    stroke-dashoffset: 200;
+  }
+}
+@keyframes check {
+  0% {
+    stroke-dashoffset: 100;
+  }
+  100% {
+    stroke-dashoffset: 200;
+  }
+}
+body {
+  background: #E8EBF3;
+  height: 100vh;
+  font: 400 16px "Poppins", sans-serif;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+body .socials {
+  position: fixed;
+  display: block;
+  left: 20px;
+  bottom: 20px;
+}
+body .socials > a {
+  display: block;
+  width: 30px;
+  opacity: 0.2;
+  transform: scale(var(--scale, 0.8));
+  transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
+}
+body .socials > a:hover {
+  --scale: 1;
+}</style>
\ No newline at end of file
diff --git a/src/components/setting/onsite/Import.vue b/src/components/setting/onsite/Import.vue
new file mode 100644
index 0000000..530c605
--- /dev/null
+++ b/src/components/setting/onsite/Import.vue
@@ -0,0 +1,227 @@
+<template>
+  <div class="container">
+    <div class="main-box">
+      <div class="box-content">
+        <div class="svg">
+          <svg width="33" height="28.5" viewBox="0 0 66 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M2.70977 0H19.4194C20.2733 0 21.0742 0.402215 21.5857 1.08315L25.3821 6.14266C25.8937 6.82361 26.6946 7.22581 27.5484 7.22581H62.3226C63.8185 7.22581 65.0323 8.43956 65.0323 9.93548V53.2903C65.0323 54.7862 63.8185 56 62.3226 56H2.70968C1.21376 56 0 54.7862 0 53.2903V2.70968C0 1.21375 1.21385 0 2.70977 0Z" transform="translate(0.0177612 0.740387)" fill="#4F8AFE"></path>
+          </svg>
+        </div>
+        <div class="text">
+          <p class="title">上传文件</p>
+        </div>
+        <div class="dots">
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+</template>
+<script>
+export default {
+  name: "Import",
+  data() {
+    return {}
+  },
+  mounted() {
+
+  },
+  created() {
+
+  },
+  computed: {},
+  methods: {}
+
+}
+</script>
+<style scoped>
+
+
+.container {
+  -webkit-transition: all 600ms cubic-bezier(0.81,-0.12, 0.64, 0.99);
+  transition: all 600ms cubic-bezier(0.81,-0.12, 0.64, 0.99);
+}
+
+.main-box {
+  cursor: pointer;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 250px;
+  height: 70px;
+  background: #FFFFFF;
+  -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
+  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
+  border-radius: 24px;
+  padding: 40px;
+  -webkit-transition: all 800ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
+  transition: all 800ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
+}
+
+.box-content {
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  /* flex-direction: row; */
+  /* flex-wrap: nowrap; */
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.box-content .text {
+  position: relative;
+  left: -10px;
+  //margin-left: 82px;
+}
+
+.text .title {
+  font-family: sans-serif;
+  font-style: normal;
+  font-weight: bold;
+  line-height: normal;
+  font-size: 18px;
+  color: #4F4F4F;
+}
+
+.text span {
+  font-family: sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  font-size: 20px;
+  color: #4F4F4F;
+}
+
+.dots div {
+  width: 6px;
+  height: 6px;
+  background: #4F8AFE;
+  margin: 3px;
+  border-radius: 100%;
+  -webkit-border-radius: 100%;
+  -moz-border-radius: 100%;
+  -ms-border-radius: 100%;
+  -o-border-radius: 100%;
+}
+
+.blue-bg {
+  display: none;
+  position: absolute;
+  right: 400px;
+  z-index: 1;
+  width: 82.35px;
+  height: 70px;
+  background: #4F8AFE;
+  -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
+  border-radius: 0 24px 24px 0;
+  -webkit-border-radius: 0 24px 24px 0;
+  -moz-border-radius: 0 24px 24px 0;
+  -ms-border-radius: 0 24px 24px 0;
+  -o-border-radius: 0 24px 24px 0;
+}
+
+.box-content::after {
+  content: '';
+  /*display: none;
+  */
+  opacity: 0;
+  position: absolute;
+  right: -10px;
+  z-index: -1;
+  width: 100px;
+  height: 70px;
+  background: #4F8AFE;
+  border-radius: 0 24px 24px 0;
+  -webkit-border-radius: 0 24px 24px 0;
+  -moz-border-radius: 0 24px 24px 0;
+  -ms-border-radius: 0 24px 24px 0;
+  -o-border-radius: 0 24px 24px 0;
+  -webkit-transition: all 700ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
+  transition: all 700ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
+}
+
+.main-box:hover .box-content::after {
+  opacity: 1;
+  position: absolute;
+  z-index: -1;
+  -webkit-transform: translateX(120px);
+  transform: translateX(120px);
+}
+
+.box-content::before {
+  content: '';
+  opacity: 0;
+  position: absolute;
+  right: -30px;
+  /* z-index:1; */
+  width: 162px;
+  height: 70px;
+  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTIiIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA5MiA1NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3Ljc2ODkgNTZINzMuNzcyM0M4My41ODYyIDU2IDkxLjU0NDggNDguMDQxMyA5MS41NDQ4IDM4LjIyNzZDOTEuNTQ0OCAyOS40NzM4IDg1LjIxNjQgMjIuMjE4MSA3Ni44ODQgMjAuNzQ0Qzc0LjYzMTMgMTQuMTQyNSA2OC4zOTEzIDkuMzg4MDcgNjEuMDI2NiA5LjM4ODA3QzU4LjQwMDUgOS4zODgwNyA1NS45MjcgMTAuMDEwNSA1My43MTQ0IDExLjA4NjZDNTAuMzEzMyA0LjUwNTI1IDQzLjQ1ODggMCAzNS41NDQyIDBDMjQuMjQ4OSAwIDE1LjA4OTggOS4xNTkzNSAxNS4wODk4IDIwLjQ1NDRDMTUuMDg5OCAyMC41MzA3IDE1LjEwMTggMjAuNjAzIDE1LjEwMTggMjAuNjc5M0M2LjU1Njg3IDIxLjk3MjIgNi4wNzE3OGUtMDYgMjkuMzI0NiA2LjA3MTc4ZS0wNiAzOC4yMzA3Qy0wLjAwODAyNDM3IDQ4LjA0NDUgNy45NTA2OCA1NS45OTkgMTcuNzY4MyA1NS45OTlMMTcuNzY4OSA1NloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMjk0MjUgMC4yNDAzODcpIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
+  background-repeat: no-repeat;
+  background-position: 45px center;
+  -webkit-transition: all 700ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
+  transition: all 700ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
+}
+
+.main-box:hover .box-content::before {
+  opacity: 1;
+  position: absolute;
+  /* z-index: 1; */
+  -webkit-transform: translateX(120px) scale(.7);
+  transform: translateX(120px) scale(.7);
+}
+
+.dots div {
+  -webkit-transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02);
+  transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02);
+}
+
+.main-box:hover .dots div:nth-child(1) {
+  -webkit-transform: translateY(9px);
+  transform: translateY(9px);
+  /* transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02); */
+}
+
+.main-box:hover .dots div:nth-child(2) {
+  -webkit-transform: scale(3);
+  transform: scale(3);
+  /* transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02); */
+}
+
+.main-box:hover .dots div:nth-child(3) {
+  -webkit-transform: translateY(-9px);
+  transform: translateY(-9px);
+  /* transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02); */
+}
+
+.container:hover {
+  /* z-index: 2; */
+  -webkit-transform: translateX(-75px);
+  transform: translateX(-75px);
+}
+
+
+.dr {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  width:70px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/setting/onsite/ImportExport.vue b/src/components/setting/onsite/ImportExport.vue
index 7fe4f30..50c074d 100644
--- a/src/components/setting/onsite/ImportExport.vue
+++ b/src/components/setting/onsite/ImportExport.vue
@@ -1,9 +1,31 @@
 <template>
+  <div class="main">
+    <div>
+      <el-image style="margin-top: 20px;width: 300px;height: 250px" :src="require('@/assets/img/daoru.a909296f.webp')"></el-image>
+    </div>
+    <div style="margin-top: 20px;display: flex;align-items: center;flex-direction: column">
+      <span class="title">导入数据</span>
+      <div style="width: 200px;height: 70px">
+        <Import></Import>
+      </div>
+    </div>
 
+    <div style="margin-top: 20px">
+      <span class="title">导出数据</span>
+      <div>
+        <Export></Export>
+      </div>
+    </div>
+
+  </div>
 </template>
 <script>
+import Import from "@/components/setting/onsite/Import.vue";
+import Export from "@/components/setting/onsite/Export.vue";
+
 export default {
   name: "ImportExport",
+  components: {Export, Import},
   data() {
     return {}
   },
@@ -19,5 +41,23 @@ export default {
 }
 </script>
 <style scoped>
+.main{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: scroll;
+}
 
+.title {
+  font-weight: bolder;
+  font-size: 20px;
+  color: var(--theme-color);
+  margin-top: 10px;
+//background-color: var(--theme-bg-color);
+}
+
+.min-title {
+  color: var(--theme-color);
+//background-color: var(--theme-bg-color);
+}
 </style>
\ No newline at end of file
diff --git a/src/components/setting/onsite/OnSiteSetting.vue b/src/components/setting/onsite/OnSiteSetting.vue
index f352f50..c8e9400 100644
--- a/src/components/setting/onsite/OnSiteSetting.vue
+++ b/src/components/setting/onsite/OnSiteSetting.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="main">
+  <div class="main-container">
     <SettingMainHeader :tab-list="tabList"></SettingMainHeader>
     <router-view></router-view>
   </div>
diff --git a/src/router/index.js b/src/router/index.js
index d008b77..5fd8e01 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -56,13 +56,18 @@ const routes = [
   },
   {
     path: '/settings',
-    redirect: '/personal',
+    redirect: '/admin',
     name: '/settings',
     component: settings,
     children: [
       {
         path: '/admin',
         name: '/admin',
+        component: personalHomePage
+      },
+      {
+        path: '/system',
+        name: '/system',
         redirect: '/appearance',
         component: systemSettings,
         children:[
@@ -88,11 +93,7 @@ const routes = [
         name: '/website',
         component: websiteManage
       },
-      {
-        path: '/personal',
-        name: '/personal',
-        component: personalHomePage
-      },
+
       {
         path: '/onSite',
         name: '/onSite',
diff --git a/src/utils/request.js b/src/utils/request.js
index c164afe..88c8c3c 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -6,7 +6,7 @@ import { Message} from 'element-ui';
 //1. 创建新的axios实例，
 const service = axios.create({
     // 公共接口--这里注意后面会讲
-    // baseURL: process.env.VUE_APP_BASE_API,
+    baseURL: '/api',
     // 超时时间 单位是ms，这里设置了3s的超时时间
     timeout: 3 * 1000
 })
@@ -15,7 +15,8 @@ service.interceptors.request.use(config => {
     //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
     config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
     config.headers = {
-        'Content-Type':'application/json' //配置请求头
+        'Access-Control-Allow-Origin': '*',
+        "Content-Type": "application/json;charset=utf-8"
     }
     //如有需要：注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
     //const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下
diff --git a/src/utils/tools.js b/src/utils/tools.js
new file mode 100644
index 0000000..63159ac
--- /dev/null
+++ b/src/utils/tools.js
@@ -0,0 +1,233 @@
+
+
+/**
+ * 通用js方法封装处理
+ * Copyright (c) 2019 tszh
+ */
+
+// 日期格式化
+export function parseTime(time, pattern) {
+  if (arguments.length === 0 || !time) {
+    return null
+  }
+  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
+      time = parseInt(time)
+    } else if (typeof time === 'string') {
+      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
+    }
+    if ((typeof time === 'number') && (time.toString().length === 10)) {
+      time = time * 1000
+    }
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+    let value = formatObj[key]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
+    }
+    return value || 0
+  })
+  return time_str
+}
+
+// 表单重置
+export function resetForm(refName) {
+  if (this.$refs[refName]) {
+    this.$refs[refName].resetFields();
+  }
+}
+
+// 添加日期范围
+export function addDateRange(params, dateRange, propName) {
+  let search = params;
+  search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
+  dateRange = Array.isArray(dateRange) ? dateRange : [];
+  if (typeof (propName) === 'undefined') {
+    search.params['beginTime'] = dateRange[0];
+    search.params['endTime'] = dateRange[1];
+  } else {
+    search.params['begin' + propName] = dateRange[0];
+    search.params['end' + propName] = dateRange[1];
+  }
+  return search;
+}
+
+// 回显数据字典
+export function selectDictLabel(datas, value) {
+  if (value === undefined) {
+    return "";
+  }
+  var actions = [];
+  Object.keys(datas).some((key) => {
+    if (datas[key].value == ('' + value)) {
+      actions.push(datas[key].label);
+      return true;
+    }
+  })
+  if (actions.length === 0) {
+    actions.push(value);
+  }
+  return actions.join('');
+}
+
+// 回显数据字典（字符串、数组）
+export function selectDictLabels(datas, value, separator) {
+  if (value === undefined || value.length ===0) {
+    return "";
+  }
+  if (Array.isArray(value)) {
+    value = value.join(",");
+  }
+  var actions = [];
+  var currentSeparator = undefined === separator ? "," : separator;
+  var temp = value.split(currentSeparator);
+  Object.keys(value.split(currentSeparator)).some((val) => {
+    var match = false;
+    Object.keys(datas).some((key) => {
+      if (datas[key].value == ('' + temp[val])) {
+        actions.push(datas[key].label + currentSeparator);
+        match = true;
+      }
+    })
+    if (!match) {
+      actions.push(temp[val] + currentSeparator);
+    }
+  })
+  return actions.join('').substring(0, actions.join('').length - 1);
+}
+
+// 字符串格式化(%s )
+export function sprintf(str) {
+  var args = arguments, flag = true, i = 1;
+  str = str.replace(/%s/g, function () {
+    var arg = args[i++];
+    if (typeof arg === 'undefined') {
+      flag = false;
+      return '';
+    }
+    return arg;
+  });
+  return flag ? str : '';
+}
+
+// 转换字符串，undefined,null等转化为""
+export function parseStrEmpty(str) {
+  if (!str || str == "undefined" || str == "null") {
+    return "";
+  }
+  return str;
+}
+
+// 数据合并
+export function mergeRecursive(source, target) {
+  for (var p in target) {
+    try {
+      if (target[p].constructor == Object) {
+        source[p] = mergeRecursive(source[p], target[p]);
+      } else {
+        source[p] = target[p];
+      }
+    } catch (e) {
+      source[p] = target[p];
+    }
+  }
+  return source;
+};
+
+/**
+ * 构造树型结构数据
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ * @param {*} parentId 父节点字段 默认 'parentId'
+ * @param {*} children 孩子节点字段 默认 'children'
+ */
+export function handleTree(data, id, parentId, children) {
+  let config = {
+    id: id || 'id',
+    parentId: parentId || 'parentId',
+    childrenList: children || 'children'
+  };
+
+  var childrenListMap = {};
+  var nodeIds = {};
+  var tree = [];
+
+  for (let d of data) {
+    let parentId = d[config.parentId];
+    if (childrenListMap[parentId] == null) {
+      childrenListMap[parentId] = [];
+    }
+    nodeIds[d[config.id]] = d;
+    childrenListMap[parentId].push(d);
+  }
+
+  for (let d of data) {
+    let parentId = d[config.parentId];
+    if (nodeIds[parentId] == null) {
+      tree.push(d);
+    }
+  }
+
+  for (let t of tree) {
+    adaptToChildrenList(t);
+  }
+
+  function adaptToChildrenList(o) {
+    if (childrenListMap[o[config.id]] !== null) {
+      o[config.childrenList] = childrenListMap[o[config.id]];
+    }
+    if (o[config.childrenList]) {
+      for (let c of o[config.childrenList]) {
+        adaptToChildrenList(c);
+      }
+    }
+  }
+  return tree;
+}
+
+/**
+* 参数处理
+* @param {*} params  参数
+*/
+export function tansParams(params) {
+  let result = ''
+  for (const propName of Object.keys(params)) {
+    const value = params[propName];
+    var part = encodeURIComponent(propName) + "=";
+    if (value !== null && value !== "" && typeof (value) !== "undefined") {
+      if (typeof value === 'object') {
+        for (const key of Object.keys(value)) {
+          if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {
+            let params = propName + '[' + key + ']';
+            var subPart = encodeURIComponent(params) + "=";
+            result += subPart + encodeURIComponent(value[key]) + "&";
+          }
+        }
+      } else {
+        result += part + encodeURIComponent(value) + "&";
+      }
+    }
+  }
+  return result
+}
+
+// 验证是否为blob格式
+export function blobValidate(data) {
+  return data.type !== 'application/json'
+}
diff --git a/src/utils/validate.js b/src/utils/validate.js
new file mode 100644
index 0000000..adfa254
--- /dev/null
+++ b/src/utils/validate.js
@@ -0,0 +1,83 @@
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUsername(str) {
+  const valid_map = ['admin', 'editor']
+  return valid_map.indexOf(str.trim()) >= 0
+}
+
+/**
+ * @param {string} url
+ * @returns {Boolean}
+ */
+export function validURL(url) {
+  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+  return reg.test(url)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validLowerCase(str) {
+  const reg = /^[a-z]+$/
+  return reg.test(str)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUpperCase(str) {
+  const reg = /^[A-Z]+$/
+  return reg.test(str)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validAlphabets(str) {
+  const reg = /^[A-Za-z]+$/
+  return reg.test(str)
+}
+
+/**
+ * @param {string} email
+ * @returns {Boolean}
+ */
+export function validEmail(email) {
+  const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  return reg.test(email)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function isString(str) {
+  if (typeof str === 'string' || str instanceof String) {
+    return true
+  }
+  return false
+}
+
+/**
+ * @param {Array} arg
+ * @returns {Boolean}
+ */
+export function isArray(arg) {
+  if (typeof Array.isArray === 'undefined') {
+    return Object.prototype.toString.call(arg) === '[object Array]'
+  }
+  return Array.isArray(arg)
+}
diff --git a/vue.config.js b/vue.config.js
index 1a987e5..4b578a3 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -14,23 +14,28 @@ module.exports = defineConfig({
 
       '/api': {
         //后端接口的baseurl
-        target: 'https://open.tophub.today',
+        target: 'http://localhost:8080',
         //是否允许跨域
         changeOrigin: true,
         // ws: true,                       //是否代理 websockets
         // secure: true,
         // 'secure': true,
         headers: {
-          Connection: "kepp-alive"
+          Connection: "kepp-alive",
+          'Access-Control-Allow-Origin': '*',
+          "Content-Type": "application/json;charset=utf-8"
         },
         pathRewrite: {
           //这里的作用是使用去掉api
           '^/api': ''
         }
       },
+
+
+
       '/dev': {
         //后端接口的baseurl
-        target: 'http://localhost:8080',
+        target: 'https://open.tophub.today',
         //是否允许跨域
         changeOrigin: true,
         // ws: true,                       //是否代理 websockets