From d20dea09441741bce0d998fd626f5d8056205c60 Mon Sep 17 00:00:00 2001
From: Qing <landaiqing@126.com>
Date: Fri, 22 Dec 2023 22:57:37 +0800
Subject: [PATCH] update

---
 package-lock.json                             |   11 +
 package.json                                  |    1 +
 src/api/api.js                                |   12 -
 src/api/login.js                              |   25 +-
 src/assets/img/daoru.a909296f.webp            |  Bin 0 -> 88268 bytes
 src/components/home/HomeHeader.vue            |  214 ++--
 src/components/hotNews/HotNews.vue            |    7 +-
 .../setting/home/PersonalHomePage.vue         |    7 +-
 .../setting/home/PersonalInfoCard.vue         |  471 ++++++++
 .../setting/layout/SettingLeftSide.vue        |    4 +-
 .../setting/layout/SettingMainHeader.vue      |    2 +-
 .../setting/onsite/BaseSettings.vue           |  123 +-
 src/components/setting/onsite/Export.vue      | 1067 +++++++++++++++++
 src/components/setting/onsite/Import.vue      |  227 ++++
 .../setting/onsite/ImportExport.vue           |   40 +
 .../setting/onsite/OnSiteSetting.vue          |    2 +-
 src/router/index.js                           |   13 +-
 src/utils/request.js                          |    5 +-
 src/utils/tools.js                            |  233 ++++
 src/utils/validate.js                         |   83 ++
 vue.config.js                                 |   11 +-
 21 files changed, 2413 insertions(+), 145 deletions(-)
 delete mode 100644 src/api/api.js
 create mode 100644 src/assets/img/daoru.a909296f.webp
 create mode 100644 src/components/setting/home/PersonalInfoCard.vue
 create mode 100644 src/components/setting/onsite/Export.vue
 create mode 100644 src/components/setting/onsite/Import.vue
 create mode 100644 src/utils/tools.js
 create mode 100644 src/utils/validate.js

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 0000000000000000000000000000000000000000..27d4219a136d395f18e5ceecbe3da0cc1aa50caa
GIT binary patch
literal 88268
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

literal 0
HcmV?d00001

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