首页静态页画写以及框架调整

package-lock.json

@@ -12,6 +12,8 @@
         "axios": "^0.19.0",
         "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
         "dayjs": "^1.10.7",
+        "echarts": "^5.6.0",
+        "echarts-gl": "^2.0.9",
         "element-theme": "^2.0.1",
         "element-ui": "^2.11.1",
         "file-loader": "^6.2.0",
@@ -5430,6 +5432,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/claygl": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
+      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
+    },
     "node_modules/clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmmirror.com/clean-css/-/clean-css-4.2.3.tgz",
@@ -6950,6 +6957,32 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz",
+      "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.1"
+      }
+    },
+    "node_modules/echarts-gl": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz",
+      "integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
+      "dependencies": {
+        "claygl": "^1.2.1",
+        "zrender": "^5.1.1"
+      },
+      "peerDependencies": {
+        "echarts": "^5.1.2"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -21797,6 +21830,19 @@
       "engines": {
         "node": ">=10"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz",
+      "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     }
   },
   "dependencies": {
@@ -25847,6 +25893,11 @@
         }
       }
     },
+    "claygl": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
+      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmmirror.com/clean-css/-/clean-css-4.2.3.tgz",
@@ -27035,6 +27086,31 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz",
+      "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
+    "echarts-gl": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz",
+      "integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
+      "requires": {
+        "claygl": "^1.2.1",
+        "zrender": "^5.1.1"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -38514,6 +38590,21 @@
       "version": "20.2.9",
       "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-20.2.9.tgz",
       "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
+    },
+    "zrender": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz",
+      "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }

package.json

@@ -19,6 +19,8 @@
     "axios": "^0.19.0",
     "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
     "dayjs": "^1.10.7",
+    "echarts": "^5.6.0",
+    "echarts-gl": "^2.0.9",
     "element-theme": "^2.0.1",
     "element-ui": "^2.11.1",
     "file-loader": "^6.2.0",

public/index.html

@@ -85,7 +85,6 @@
 
 <body>
   <div id="app"></div>
-  <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=tHCKI9rDMnTgxHPYsk95hGExEbYqkcIn"></script>
 </body>
 
 </html>

src/assets/scss/common.scss

@@ -485,7 +485,7 @@ img {
   position: relative;
   height: 100%;
   width: 100%;
-  overflow: hidden;
+  overflow: auto;
 
   &__wrapper {
     width: calc(100% - 240px);

src/store/index.js

@@ -28,7 +28,6 @@ export default new Vuex.Store({
     // 内容, 是否需要刷新
     contentIsNeedRefresh: false,
     currentMenuIndex:0,
-    isFull:false,
     stateTagsList:[],
     // 内容, 标签页(默认添加首页)
     contentTabs: [

src/views/main-sidebar.vue

@@ -2,7 +2,6 @@
 <template>
   <aside
     class="aui-sidebar"
-    :style="{ display: $store.state.isFull ? 'none' : '' }"
   >
     <div class="logo">
       <img src="@/assets/images/agent/logo.png">
@@ -31,49 +30,7 @@
         <img src="@/assets/images/agent/avatar.png">
         <div class="name">
           <span>{{ userName }}</span>
-          <!-- <span class="type">{{ userType }}</span> -->
-        </div>
-      </div>
-      <div class="right" @click="handleSet">
-        <img src="@/assets/images/agent/setting.png">
-      </div>
-    </div>
-    <div class="loginBox" v-if="login">
-      <div class="box">
-        <div class="left">
-          <img src="@/assets/images/agent/login_leftbg.png">
-        </div>
-        <div class="right">
-          <img class="close" src="@/assets/images/agent/close_mini.png" @click="handleClose">
-          <div class="tabs">
-            <div class="t_pre" :class="{'active':tidx===1}" @click="handleChangeLogin(1)">验证码登录</div>
-            <div class="t_pre" :class="{'active':tidx===2}" @click="handleChangeLogin(2)">账号登录</div>
-          </div>
-          <div class="content" v-if="tidx===1">
-            <div class="c_pre">
-              <el-input type="phone" v-model="codeInfo.phone" placeholder="请输入手机号码"></el-input>
-            </div>
-            <div class="c_pre">
-              <div class="left">
-                <el-input v-model="codeInfo.code" placeholder="请输入验证码"></el-input>
-              </div>
-              <div class="cp_right" @click="handleCode">
-                <span>{{ codeBtnText }}</span>
-              </div>
-            </div>
-          </div>
-          <div class="content" v-else-if="tidx===2">
-            <div class="c_pre">
-              <el-input v-model="accountInfo.account" placeholder="请输入账号"></el-input>
-            </div>
-            <div class="c_pre">
-              <el-input type="password" v-model="accountInfo.password" placeholder="请输入密码"></el-input>
-            </div>
-          </div>
-          <div class="login" :class="{'active':((tidx===1&&codeInfo.phone&&codeInfo.code)||(tidx===2&&accountInfo.account&&accountInfo.password))}" @click="handleLogin">登录</div>
-          <div class="agree">
-            <el-checkbox v-model="agree">我已阅读并同意 用户服务协议、隐私协议 和 开源协议</el-checkbox>
-          </div>
+          <span class="type">{{ userType }}</span>
         </div>
       </div>
     </div>
@@ -90,30 +47,8 @@ export default {
     return {
       activeMenuId:'',
       erjiMenu:[],
-      userName:'未登录',
+      userName:'威廉教练',
       userType:'专业教练',
-      userInfo:null,
-      login:false,
-      tidx:1,
-      codeInfo:{
-        phone:'',
-        code:''
-      },
-      accountInfo:{
-        account:'',
-        password:''
-      },
-      time:60,
-      codeBtn:true,
-      codeBtnText:'获取验证码',
-      agree:false,
-      testMenus:[],
-      dataForm: {
-        username: "admin",
-        password: "cx8082",
-        uuid: "",
-        captcha: "",
-      },
     }
   },
   components: {
@@ -137,144 +72,8 @@ export default {
         this.activeMenuId=newval;
       }
     },
-    handleUser(){
-      if(!this.userInfo){
-        this.login = true;
-        return
-      }
-    },
-    handleSet(){
-      if(!this.userInfo){
-        this.login = true;
-        return
-      }
-    },
-    handleClose(){
-      this.close();
-    },
-    handleChangeLogin(idx){
-      this.tidx = idx;
-    },
-    handleCode(){
-      if(!this.codeBtn) return;
-      this.codeBtn = false;
-      this.codeBtnText = '重新发送('+this.time+'s)';
-      timer = setInterval(()=>{
-        this.time--;
-        if(this.time<=0){
-          clearInterval(timer);
-          this.codeBtnText = '获取验证码';
-          this.codeBtn = true;
-          this.time = 60;
-        }else{
-          this.codeBtnText = '重新发送('+this.time+'s)';
-        }
-      },1000)
-    },
-    handleLogin(){
-      if(this.tidx===1){
-        if(!this.codeInfo.phone||!this.codeInfo.code) return;
-        if(!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.codeInfo.phone)) return this.$message.error('请输入正确的手机号');
-      }else if(this.tidx===2){
-        if(!this.accountInfo.account||!this.accountInfo.password) return;
-      }
-      if(!this.agree) return this.$message.error('请阅读并同意协议');
-
-      this.$http.post("/login", this.dataForm)
-      .then(({ data: res }) => {
-        sessionStorage.removeItem("tags");
-        Cookies.set("token", res.data.token);
-
-        this.setCookie("", "", -1); // 修改2值都为空，天数为负1天就好了
-
-        // 获取菜单列表, 添加并全局变量保存
-        this.$http.get("/sys/menu/nav", {
-          params: {
-            menuClassify: 1
-          }
-        }).then(({ data: res }) => {
-          if (res.code !== 0) {
-            Vue.prototype.$message.error(res.msg);
-          }
-          var menuList = res.data;
-
-          for (var i = 0; i < menuList.length; i++) {
-            var menu = {};
-            if (menuList[i].url != "") {
-              menu = menuList[i];
-            } else if (menuList[i].children.length > 0) {
-              menu = menuList[i].children[0];
-            }
-
-            // 组装路由
-            var route = {
-              path: "",
-              component: null,
-              name: "index",
-              meta: {
-                ...window.SITE_CONFIG["contentTabDefault"],
-                menuId: menu.id,
-                title: menu.name,
-              },
-            };
-            let URL = (menu.url || "").replace(
-              /{{([^}}]+)?}}/g,
-              (s1, s2) => eval(s2)
-            ); // URL支持{{ window.xxx }}占位符变量
-
-            URL = URL.replace(/^\//, "").replace(/_/g, "-");
-            route["path"] = route["name"] = URL.replace(/\//g, "-");
-            route["component"] = () => import(`@/views/modules/${URL}`);
-            this.$router.push(route);
-            this.$store.state.sidebarMenuActiveName = [];
-
-            var proute = menuList.filter(
-              (item) =>
-                item.children.filter((child) => child.id == menu.id)
-                  .length > 0
-            );
-
-            this.$store.state.sidebarMenuActiveName.push(
-              proute.length > 0 ? proute[0].name : ""
-            );
-            this.$store.state.sidebarMenuActiveName.push(
-              route.meta.title
-            );
-            break;
-          }
-          localStorage.setItem("currentMenuIndex", 0);
-          this.$store.state.currentMenuIndex = 0;
-        });
-      })
-      .catch(() => { });
-
-      this.close();
-    },
-    close(){
-      this.login = false;
-      this.codeBtn = true;
-      this.codeInfo = {
-        phone:'',
-        code:''
-      };
-      this.accountInfo = {
-        account:'',
-        password:''
-      };
-      this.agree = false;
-      clearInterval(timer);
-      this.time = 60;
-      this.codeBtnText = '获取验证码';
-      this.tidx = 1;
-    },
-    
-    getCaptcha() {
-      this.dataForm.uuid = getUUID();
-      this.captchaPath = `${window.SITE_CONFIG["apiURL"]}/captcha?uuid=${this.dataForm.uuid}`;
-    },
   },
   created () {
-    this.getCaptcha();
     this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']
     this.erjiMenu=this.$store.state.erjismenu==null?this.$store.state.sidebarMenuList[0].children:this.$store.state.erjismenu;
  }
@@ -284,15 +83,16 @@ export default {
 <style lang="scss" scoped>
 .logo{
   img{
-    width: 148px;
-    height: 30px;
+    width: 202px;
+    height: 34px;
+    margin-top: 9px;
   }
 }
 
 .create_dialog{
   width: 100%;
   height: 42px;
-  background: #2463EB;
+  background: #904A87;
   border-radius: 8px;
   font-family: PingFang-SC, PingFang-SC;
   font-weight: bold;

src/views/main.vue

@@ -5,12 +5,12 @@
     class="aui-wrapper"
   >
     <template v-if="!loading">
-      <main-sidebar v-if="!$store.state.isfull" />
+      <main-sidebar />
       <div
         class="aui-content__wrapper"
         :style="{
-          'margin-left': $store.state.isFull ? '0' : '240px',
-          width: $store.state.isFull ? '100%' : 'calc(100% - 240px)',
+          'margin-left': '240px',
+          width: 'calc(100% - 240px)',
           'overflow-y':'auto'
         }"
       >
@@ -41,7 +41,6 @@ export default {
   },
   data() {
     return {
-      isfull: true,
       loading: true,
     };
   },
@@ -75,27 +74,13 @@ export default {
   mounted() {
     let currentMenuIndex = localStorage.getItem("currentMenuIndex");
     this.$store.state.sidebarMenuList = window.SITE_CONFIG["menuList"];
-    if(['工作台','态势感知','首页','数据大屏'].includes(this.$store.state.sidebarMenuList[currentMenuIndex].name)){
-      this.$store.state.isFull = true;
-    } else {
-      this.$store.state.isFull = false;
-    }
-
-    // if(['/wms-index','/wms-screen'].includes(this.$route.path)){
-    //   this.$store.state.isFull = true;
-    // }
   },
   methods: {
     changeMenuIndex(newval, oldval) {
       this.$store.state.sidebarMenuList = window.SITE_CONFIG["menuList"];
       localStorage.setItem("currentMenuIndex", newval);
       this.$store.state.erjismenu =
-        this.$store.state.sidebarMenuList[newval].children;
-      if(['工作台','态势感知','首页','数据大屏'].includes(this.$store.state.sidebarMenuList[newval].name)){
-        this.$store.state.isFull = true;
-      } else {
-        this.$store.state.isFull = false;
-      }
+      this.$store.state.sidebarMenuList[newval].children;
     },
     //工作台和态势感知不显示左边菜单栏
     changeyijiInd(v) {
@@ -131,11 +116,6 @@ export default {
          }
         });
       }
-        if(['工作台','态势感知','首页','数据大屏'].includes(this.$store.state.sidebarMenuList[v].name)){
-        this.$store.state.isFull = true;
-      } else {
-        this.$store.state.isFull = false;
-      }
     },
     // 窗口改变大小
     windowResizeHandle() {

src/views/modules/home.vue

@@ -1,42 +1,483 @@
 <template>
-  <div class="home"></div>
+  <div class="page">
+    <el-row gutter="10">
+      <el-col :span="6">
+        <div class="home_box">
+          <div class="tg_top adfacjb">
+            <div class="tgt_l">执行项目</div>
+            <div class="tgt_r">
+              <img src="@/assets/images/agent/home_xm.png">
+            </div>
+          </div>
+          <div class="tg_num adfac">{{ 42 }}<span>个</span></div>
+          <div class="tg_jd">
+            <div class="tj tj1" :style="{'width':70+'%'}"></div>
+          </div>
+          <div class="tg_tn adfac">
+            <div class="tt_pre adfac">进行中<span>{{6}}</span></div>
+            <div class="tt_pre adfac">已完成<span>{{36}}</span></div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="home_box">
+          <div class="tg_top adfacjb">
+            <div class="tgt_l">调查问卷</div>
+            <div class="tgt_r">
+              <img src="@/assets/images/agent/home_wj.png">
+            </div>
+          </div>
+          <div class="tg_num adfac">{{ 120 }}<span>份</span></div>
+          <div class="tg_jd">
+            <div class="tj tj2" :style="{'width':40+'%'}"></div>
+          </div>
+          <div class="tg_tn adfac">
+            <div class="tt_pre adfac">已完成<span>{{36}}</span></div>
+            <div class="tt_pre adfac">进行中<span>{{6}}</span></div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="home_box">
+          <div class="tg_top adfacjb">
+            <div class="tgt_l">团队</div>
+            <div class="tgt_r">
+              <img src="@/assets/images/agent/home_td.png">
+            </div>
+          </div>
+          <div class="tg_num adfac">{{ 43 }}<span>个</span></div>
+          <div class="tg_jd">
+            <div class="tj tj3" :style="{'width':100+'%'}"></div>
+          </div>
+          <div class="tg_tn adfac">
+            <div class="tt_pre adfac">团队成员<span>{{236}}</span></div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="home_box">
+          <div class="tg_top adfacjb">
+            <div class="tgt_l">知识总量</div>
+            <div class="tgt_r">
+              <img src="@/assets/images/agent/home_zs.png">
+            </div>
+          </div>
+          <div class="tg_num adfac">{{ 356720 }}<span>条</span></div>
+          <div class="tg_jd">
+            <div class="tj tj4" :style="{'width':80+'%'}"></div>
+          </div>
+          <div class="tg_tn adfac">
+            <div class="tt_pre adfac">解析中<span>{{6}}</span></div>
+            <div class="tt_pre adfac">已完成<span>{{356714}}</span></div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row gutter="10" style="margin-top: 10px;">
+      <el-col :span="12">
+        <div class="home_box">
+          <div class="tj_top adfacjb">
+            <div class="tjt_l">
+              <p>答卷数量统计</p>
+              <el-date-picker style="border: none;"
+                v-model="startEndDate"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期">
+              </el-date-picker>
+            </div>
+            <div class="tjt_r adf">
+              <div class="tjtr_pre" :class="{'active':tidx===1}" @click="handleChangeTime(1)">近15天</div>
+              <div class="tjtr_pre" :class="{'active':tidx===2}" @click="handleChangeTime(2)">近一年</div>
+            </div>
+          </div>
+          <div class="tj_chart">
+            <div ref="djsltjRef" style="width: 100%; height: 260px;"></div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="home_box">
+          <div class="zb_title">问卷类别占比</div>
+          <div ref="wjlbzbRef" style="width: 100%; height: 300px;"></div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row gutter="10" style="margin-top: 10px;">
+      <el-col :span="12">
+        <div class="home_box">
+          <div class="hb_title adfacjb">
+            <div class="hbt_l">最近的调查问卷</div>
+            <div class="hbt_r">查看更多 ></div>
+          </div>
+          <div class="hb_list">
+            <div class="hl_item adfacjb" v-for="(item,index) in dcwjList" :key="index">
+              <div class="hil_l">
+                <p>{{ item.name }}</p>
+                <p class="tip">{{ item.team }} · {{ item.persons }}名成员</p>
+              </div>
+              <div class="hil_r">
+                <div class="hr_btn" v-if="item.status===1">已完成</div>
+                <div class="hr_btn jxz" v-if="item.status===0">进行中</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="home_box">
+          <div class="hb_title adfacjb">
+            <div class="hbt_l">近期报告</div>
+            <div class="hbt_r">更多报告 ></div>
+          </div>
+          <div class="hb_list">
+            <div class="hl_item adfacjb" v-for="(item,index) in jqbgList" :key="index">
+              <div class="hil_l">
+                <p>{{ item.name }}</p>
+                <p class="tip">{{ item.type }} · 生成于{{ item.time }}</p>
+              </div>
+              <div class="hil_r">
+                <div class="hr_btn ck">查看</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
-<script>
-import debounce from 'lodash/debounce'
-export default {
-  data () {
-    return {
-                 
-    }
-  },
-  computed: {
-    dataRule () {
-      return {
+<script setup name="">
+  import * as echarts from "echarts";
+  import { ref, getCurrentInstance, onMounted } from 'vue'
+  const { proxy } = getCurrentInstance();
 
-      }
-    }
-  },
-  mounted () { 
-  },
-  created () {
-  },
-  methods: {
-   
+  const tidx = ref(1);
+  const startEndDate = ref('');
+  const djsltjRef = ref(null);
+  const wjlbzbRef = ref(null);
+  
+  const dcwjList = ref([
+    {name:'领导团队评估',team:'泰科公司阿尔法团队',persons:12,status:1},
+    {name:'领导团队评估',team:'泰科公司阿尔法团队',persons:12,status:0},
+    {name:'领导团队评估',team:'泰科公司阿尔法团队',persons:12,status:1},
+    {name:'领导团队评估',team:'泰科公司阿尔法团队',persons:12,status:1},
+    {name:'领导团队评估',team:'泰科公司阿尔法团队',persons:12,status:1}
+  ]);
+  const jqbgList = ref([
+    {name:'TechCorp 团队分析',type:'团队报告',time:'2025-04-20 13:00'},
+    {name:'TechCorp 团队分析',type:'个人报告',time:'2025-04-20 13:00'},
+    {name:'TechCorp 团队分析',type:'团队报告',time:'2025-04-20 13:00'},
+    {name:'TechCorp 团队分析',type:'团队报告',time:'2025-04-20 13:00'},
+    {name:'TechCorp 团队分析',type:'团队报告',time:'2025-04-20 13:00'}
+  ])
+
+  const handleChangeTime = (idx) => {
+    tidx.value = idx;
+  }
+
+  const initDjsltjChart = () => {
+    let myChart = echarts.init(djsltjRef.value);
+    let option = {
+      xAxis: {
+        type: 'category',
+        data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
+      },
+      tooltip: {
+        trigger: 'axis'
+      },
+      yAxis: {
+        type: 'value'
+      },
+      grid: {
+        left: '1%',
+        right: '1%',
+        bottom: '1%',
+        top: '10%',
+        containLabel: true
+      },
+      series: [
+        {
+          data: [0, 40, 30, 70, 100, 60, 50, 40, 70, 60, 50, 0],
+          type: 'line',
+          smooth: true,
+          showSymbol: false,
+          areaStyle: {
+            opacity: 0.8,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#D5E5FC'
+              },
+              {
+                offset: 1,
+                color: '#F2E9F0'
+              }
+            ])
+          },
+          lineStyle: {
+            width: 3,
+            color:{
+              type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 1,
+                y2: 0,
+                colorStops: [{
+                  offset: 1, color: '#8360FC'  
+                }, {
+                  offset: 0.5, color: '#8E49CB'
+                }, {
+                  offset: 0, color: '#25D9FF'
+                }]
+            }
+          },
+        }
+      ]
+    };
+    myChart.setOption(option)
+  }
+
+  const initWjlbzbChart = () => {
+    let myChart = echarts.init(wjlbzbRef.value);
+    let option = {
+      tooltip: {
+        trigger: 'item'
+      },
+      legend: {
+        bottom: '-1%',
+        left: 'center'
+      },
+      color:['#761E6A','#D2B7CE','#9D5F94'],
+      series: [
+        {
+          name: '问卷类别占比',
+          type: 'pie',
+          radius: ['50%', '80%'],
+          center: ['50%', '45%'],
+          itemStyle: {
+            borderRadius: 0
+          },
+          data: [
+            { value: 1048, name: '高级问卷' },
+            { value: 735, name: '中级问卷' },
+            { value: 580, name: '初级问卷' },
+          ]
+        }
+      ]
+    };
+    myChart.setOption(option)
   }
-}
+
+  onMounted(()=>{
+    initDjsltjChart();
+    initWjlbzbChart();
+  })
 </script>
-<style lang="scss" >
- .home{
+
+<style scoped lang="scss">
+  .page{
+    padding: 14px 16px;
+    background-color: #FAFAFA;
+    overflow-y: auto;
+
+    .home_box{
+      padding: 26px 20px;
+      background: #FFFFFF;
+      border-radius: 6px;
+      border: 1px solid #F3F4F6;
+      .tg_top{
+        .tgt_l{
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          font-size: 14px;
+          color: #646464;
+          line-height: 16px;
+        }
+        .tgt_r{
+          img{
+            width: 40px;
+            height: 40px;
+          }
+        }
+      }
+      .tg_num{
+        margin-top: 1px;
+        font-family: DINAlternate, DINAlternate;
+        font-weight: bold;
+        font-size: 32px;
+        color: #252525;
+        line-height: 32px;
+        span{
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          font-size: 14px;
+          color: #999999;
+          line-height: 16px;
+          margin-left: 5px;
+        }
+      }
+      .tg_jd{
+        margin-top: 14px;
         width: 100%;
-        height:  calc(100vh - 80px) ;
-        min-height: calc(100vh - 80px) ;
-        color: #ffffff; 
- }
- .aui-content{
-position: relative;
-    padding: 0px;
-    min-height: calc(100vh - 50px);
-
- }
+        height: 8px;
+        background: #F3F4F6;
+        position: relative;
+        border-radius: 4px;
+        .tj{
+          height: 8px;
+          border-radius: 4px;
+          position: absolute;
+          left: 0;
+          top: 0;
+          &.tj1{
+            background: linear-gradient( 270deg, #3C82F6 0%, #3C82F6 100%);
+          }
+          &.tj2{
+            background: linear-gradient( 270deg, #9D5F94 0%, #904A87 100%);
+          }
+          &.tj3{
+            background: linear-gradient( 90deg, #189B9B 0%, #7DC6C6 100%);
+          }
+          &.tj4{
+            background: linear-gradient( 90deg, #FFD750 0%, #FDE182 100%);
+          }
+        }
+      }
+      .tg_tn{
+        margin-top: 18px;
+        .tt_pre{
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          font-size: 14px;
+          color: #6B7280;
+          line-height: 14px;
+          span{
+            color: #252525;
+            margin-left: 5px;
+          }
+          &:last-child{
+            margin-left: 48px;
+          }
+        }
+      }
+
+      .tj_top{
+        .tjt_l{
+          p{
+            font-family: PingFang-SC, PingFang-SC;
+            font-weight: bold;
+            font-size: 16px;
+            color: #393939;
+            line-height: 22px;
+          }
+        }
+        .tjt_r{
+          .tjtr_pre{
+            width: 54px;
+            height: 32px;
+            border-radius: 6px;
+            border: 1px solid #E5E7EB;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 12px;
+            color: #4B5563;
+            line-height: 28px;
+            text-align: center;
+            cursor: pointer;
+            margin-left: 16px;
+            &.active{
+              background: #904A87;
+              color: #FFFFFF;
+            }
+          }
+        }
+      }
+      .zb_title{
+        font-family: PingFang-SC, PingFang-SC;
+        font-weight: bold;
+        font-size: 16px;
+        color: #252525;
+        line-height: 22px;
+      }
+
+      .hb_title{
+        .hbt_l{
+          font-family: PingFang-SC, PingFang-SC;
+          font-weight: bold;
+          font-size: 16px;
+          color: #252525;
+          line-height: 22px;
+        }
+        .hbt_r{
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          font-size: 14px;
+          color: #833478;
+          line-height: 20px;
+          text-align: right;
+          cursor: pointer;
+        }
+      }
+      .hb_list{
+        margin-top: 12px;
+        .hl_item{
+          width: 100%;
+          padding: 10px 20px;
+          box-sizing: border-box;
+          margin-top: 12px;
+          background: #F9FAFB;
+          border-radius: 8px;
+          .hil_l{
+            p{
+              font-family: PingFang-SC, PingFang-SC;
+              font-weight: bold;
+              font-size: 14px;
+              color: #252525;
+              line-height: 20px;
+              &.tip{
+                font-weight: 400;
+                color: #6B7280;
+                margin-top: 2px;
+              }
+            }
+          }
+          .hil_r{
+            .hr_btn{
+              width: 68px;
+              height: 28px;
+              background: #E1F0F0;
+              border-radius: 14px;
+              font-family: PingFangSC, PingFang SC;
+              font-weight: 400;
+              font-size: 14px;
+              color: #009191;
+              line-height: 28px;
+              text-align: center;
+              &.jxz{
+                background: #FCECB6;
+                color: #864F10;
+              }
+              &.ck{
+                background: rgba(118,30,106,0.16);
+                color: #761E6A;
+                cursor: pointer;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  ::v-deep .el-range-editor.el-input__inner{
+    padding: 3px 0 !important;
+  }
+  ::v-deep .el-date-editor .el-range__icon{
+    display: none !important;
+  }
+  ::v-deep .el-date-editor .el-range-input{
+    width: 30% !important;
+  }
 </style>

src/views/pages/login copy.vue

@@ -0,0 +1,184 @@
+<template>
+  <div
+    v-loading.fullscreen.lock="loading"
+    :element-loading-text="$t('loading')"
+    class="aui-wrapper"
+  >
+    <template v-if="!loading">
+      <main-sidebar />
+      <div
+        class="aui-content__wrapper"
+        :style="{
+          'margin-left': '240px',
+          width: 'calc(100% - 240px)',
+          'overflow-y':'auto'
+        }"
+      >
+        <div class="page">
+            <div class="box">
+                <div class="title">{{helloWord}}</div>
+                <div class="tip">{{helloTip}}</div>
+                <div class="ask">
+                    <div class="question">
+                        <el-input type="textarea" :rows="2" v-model="question" placeholder="有什么问题，您可以对我提问！" resize="none"></el-input>
+                    </div>
+                    <div class="btns">
+                        <div class="left">
+                            <div class="copy">
+                                <img src="@/assets/images/agent/link.png">
+                            </div>
+                            <div class="think" :class="{'active':deepThink}" @click="toDeepThink">
+                                <img src="@/assets/images/agent/think.png">
+                                <span>深度思考</span>
+                            </div>
+                        </div>
+                        <div class="right">
+                            <img src="@/assets/images/agent/photo.png">
+                            <img src="@/assets/images/agent/upload.png">
+                            <img src="@/assets/images/agent/input_hou.png" v-if="question" @click="handleQuestion">
+                            <img src="@/assets/images/agent/input_qian.png" v-else>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup name="">
+  import MainSidebar from "../main-sidebar.vue";
+  import { ref, getCurrentInstance } from 'vue'
+  const { proxy } = getCurrentInstance();
+  
+  const helloWord = ref('Hi～，我是PERILL Coach')
+  const helloTip = ref('可以为你提供PERILL模型，个人教练、团队教练相关的理论、案例、分析报告等知识的查询和解答')
+  const question = ref('')
+  const deepThink = ref(false)
+
+  const toDeepThink = () => {
+      deepThink.value = !deepThink.value
+  }
+
+  const handleQuestion = () => {
+      proxy.$router.push({
+          path: '/agentDialogResult',
+          query: {
+              question: question.value,
+              deepThink: deepThink.value
+          }
+      })
+  }
+</script>
+
+<style scoped lang="scss">
+  ::v-deep .el-textarea__inner{
+      background: #FFFFFF;
+      border-radius: 10px !important;
+      border: none !important;
+      padding: 0 !important;
+  }
+
+  .page{
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .box{
+          .title{
+              font-family: DingTalk, DingTalk;
+              font-weight: normal;
+              font-size: 24px;
+              color: #111111;
+              line-height: 29px;
+          }
+          .tip{
+              font-family: PingFangSC, PingFang SC;
+              font-weight: 400;
+              font-size: 14px;
+              color: #9CA3AF;
+              line-height: 20px;
+              margin-top: 11px;
+          }
+
+          .ask{
+              width: 980px;
+              height: 148px;
+              background: #FFFFFF;
+              border-radius: 10px;
+              border: 1px solid #E5E7EB;
+              padding: 20px;
+              box-sizing: border-box;
+              margin-top: 80px;
+              position: relative;
+              .btns{
+                  width: 940px;
+                  position: absolute;
+                  left: 20px;
+                  bottom: 20px;
+                  display: flex;
+                  justify-content: space-between;
+                  .left{
+                      display: flex;
+                      .copy{
+                          width: 36px;
+                          height: 36px;
+                          background: #FFFFFF;
+                          border-radius: 6px;
+                          border: 1px solid #E5E7EB;
+                          cursor: pointer;
+                          display: flex;
+                          align-items: center;
+                          justify-content: center;
+                          img{
+                              width: 14px;
+                              height: 16px;
+                          }
+                      }
+                      .think{
+                          width: 96px;
+                          height: 36px;
+                          background: #FFFFFF;
+                          border-radius: 6px;
+                          border: 1px solid #E5E7EB;
+                          margin-left: 8px;
+                          display: flex;
+                          align-items: center;
+                          justify-content: center;
+                          cursor: pointer;
+                          img{
+                              width: 14px;
+                              height: 14px;
+                          }
+                          span{
+                              font-family: PingFangSC, PingFang SC;
+                              font-weight: 400;
+                              font-size: 14px;
+                              color: #111111;
+                              line-height: 20px;
+                              margin-left: 3px;
+                          }
+                          &.active{
+                              border: 1px solid #70b2df;
+                              span{
+                                  color: #70b2df;
+                              }
+                          }
+                      }
+                  }
+                  .right{
+                      display: flex;
+                      img{
+                          width: 30px;
+                          height: 30px;
+                          margin-left: 33px;
+                          cursor: pointer;
+                      }
+                  }
+              }
+          }
+      }
+  }
+</style>

src/views/pages/login.vue

@@ -1,184 +1,374 @@
 <template>
-  <div
-    v-loading.fullscreen.lock="loading"
-    :element-loading-text="$t('loading')"
-    class="aui-wrapper"
-  >
-    <template v-if="!loading">
-      <main-sidebar v-if="!$store.state.isfull" />
-      <div
-        class="aui-content__wrapper"
-        :style="{
-          'margin-left': $store.state.isFull ? '0' : '240px',
-          width: $store.state.isFull ? '100%' : 'calc(100% - 240px)',
-          'overflow-y':'auto'
-        }"
-      >
-        <div class="page">
-            <div class="box">
-                <div class="title">{{helloWord}}</div>
-                <div class="tip">{{helloTip}}</div>
-                <div class="ask">
-                    <div class="question">
-                        <el-input type="textarea" :rows="2" v-model="question" placeholder="有什么问题，您可以对我提问！" resize="none"></el-input>
-                    </div>
-                    <div class="btns">
-                        <div class="left">
-                            <div class="copy">
-                                <img src="@/assets/images/agent/link.png">
-                            </div>
-                            <div class="think" :class="{'active':deepThink}" @click="toDeepThink">
-                                <img src="@/assets/images/agent/think.png">
-                                <span>深度思考</span>
+    <div class="page">
+        <img src="@/assets/images/agent/ch_logo.png" class="logo">
+        <div class="login">
+            <div class="l_tabs adfac">
+                <div class="t_pre" :class="{'active':tidx===1}" @click="handleChangeTab(1)">账号密码登录</div>
+                <div class="t_pre" :class="{'active':tidx===2}" @click="handleChangeTab(2)">验证码登录</div>
+            </div>
+            <div class="l_form">
+                <template v-if="tidx===1">
+                    <el-form ref="accountRef" :model="accountForm" :rules="accountRules" label-width="0px">
+                        <el-form-item label="" prop="username">
+                            <el-input v-model="accountForm.username" placeholder="请输入账号" />
+                        </el-form-item>
+                        <el-form-item label="" prop="password">
+                            <el-input show-password v-model="accountForm.password" placeholder="请输入密码" />
+                        </el-form-item>
+                    </el-form>
+                </template>
+                <template v-else-if="tidx===2">
+                    <el-form ref="codeRef" :model="codeForm" :rules="codeRules" label-width="0px">
+                        <el-form-item label="" prop="phone">
+                            <el-input type="number" v-model="codeForm.phone" placeholder="请输入手机号码" />
+                        </el-form-item>
+                        <el-form-item label="" prop="code">
+                            <div class="c_pre">
+                                <div class="left">
+                                    <el-input v-model="codeForm.code" placeholder="请输入验证码"></el-input>
+                                </div>
+                                <div class="cp_right" @click="handleCode">
+                                    <span>{{ codeBtnText }}</span>
+                                </div>
                             </div>
-                        </div>
-                        <div class="right">
-                            <img src="@/assets/images/agent/photo.png">
-                            <img src="@/assets/images/agent/upload.png">
-                            <img src="@/assets/images/agent/input_hou.png" v-if="question" @click="handleQuestion">
-                            <img src="@/assets/images/agent/input_qian.png" v-else>
-                        </div>
-                    </div>
-                </div>
+                        </el-form-item>
+                    </el-form>
+                </template>
+            </div>
+            <div class="l_check">
+                <el-checkbox v-model="checked">记住密码</el-checkbox>
+            </div>
+            <div class="l_btn" :class="{'active':((tidx===1&&accountForm.username&&accountForm.password)||(tidx===2&&codeForm.phone&&codeForm.code))}" @click="handleLogin">立即登录</div>
+            <div class="l_check">
+                <el-checkbox v-model="agree">已阅读并同意 <span class="lcs">隐私协议</span> 和 <span class="lcs">服务条款</span></el-checkbox>
             </div>
         </div>
-      </div>
-    </template>
-  </div>
+    </div>
 </template>
 
 <script setup name="">
-  import MainSidebar from "../main-sidebar.vue";
-  import { ref, getCurrentInstance } from 'vue'
-  const { proxy } = getCurrentInstance();
-  
-  const helloWord = ref('Hi～，我是PERILL Coach')
-  const helloTip = ref('可以为你提供PERILL模型，个人教练、团队教练相关的理论、案例、分析报告等知识的查询和解答')
-  const question = ref('')
-  const deepThink = ref(false)
-
-  const toDeepThink = () => {
-      deepThink.value = !deepThink.value
-  }
-
-  const handleQuestion = () => {
-      proxy.$router.push({
-          path: '/agentDialogResult',
-          query: {
-              question: question.value,
-              deepThink: deepThink.value
+    var timer = null;
+    import Cookies from "js-cookie";
+    import { getUUID } from "@/utils";
+    import { ref, getCurrentInstance } from 'vue'
+    const { proxy } = getCurrentInstance();
+    
+    const time = ref(60);
+    const codeBtn = ref(true);
+    const codeBtnText = ref('获取验证码');
+    const tidx = ref(1);
+    const accountRef = ref(null);
+    const codeRef = ref(null);
+    const accountForm = ref({
+        username: '',
+        password: '',
+        uuid: getUUID()
+    });
+    const accountRules = ref({
+        username: [
+            { required: true, message: '请输入账号', trigger: 'blur' }
+        ],
+        password: [
+            { required: true, message: '请输入密码', trigger: 'blur' }
+        ]
+    });
+    const codeForm = ref({
+        phone: '',
+        code: ''
+    });
+    const codeRules = ref({
+        phone: [
+            { required: true, message: '请输入手机号码', trigger: 'blur' },
+            { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
+        ],
+        code: [
+            { required: true, message: '请输入验证码', trigger: 'blur' }
+        ]
+    })
+    const checked = ref(false);
+    const agree = ref(false);
+
+    
+    const handleChangeTab = (idx) => {
+        tidx.value = idx;
+    }
+
+    const handleCode = () => {
+        if(!codeBtn.value) return;
+        codeBtn.value = false;
+        codeBtnText.value = '重新发送('+time.value+'s)';
+        timer = setInterval(()=>{
+            time.value--;
+            if(time.value<=0){
+                clearInterval(timer);
+                codeBtnText.value = '获取验证码';
+                codeBtn.value = true;
+                time.value = 60;
+            }else{
+                codeBtnText.value = '重新发送('+time.value+'s)';
+            }
+        },1000)
+    }
+
+    const handleLogin = () => {
+        if(tidx.value===1){
+            proxy.$refs.accountRef.validate((valid) => {
+                if (valid) {
+                    if(!agree.value) return proxy.$message({type: 'warning', message: '请阅读并同意隐私协议和服务条款'})
+                    toLogin();
+                } else {
+                    return false;
+                }
+            });
+        }else if(tidx.value===2){
+            proxy.$refs.codeRef.validate((valid) => {
+                if (valid) {
+                    if(!agree.value) return proxy.$message({type: 'warning', message: '请阅读并同意隐私协议和服务条款'})
+                    console.log("验证码登录");
+                } else {
+                    return false;
+                }
+            });
+        }
+    }
+
+    const toLogin = () => {
+        proxy.$http.post("/login", accountForm.value).then(({ data: res }) => {
+            if (res.code !== 0) proxy.$message.error(res.msg);
+            sessionStorage.removeItem("tags");
+            Cookies.set("token", res.data.token);
+
+            if (checked.value) {
+                setCookie(accountForm.value.username, accountForm.value.password, 7);
+            } else {
+                setCookie("", "", -1);
+            }
+
+            return proxy.$router.push('agentDialog')
+
+            // 获取菜单列表, 添加并全局变量保存
+            proxy.$http.get("/sys/menu/nav", {
+                params: {
+                    menuClassify: 1
+                }
+            }).then(({ data: res }) => {
+                if (res.code !== 0) proxy.$message.error(res.msg);
+                var menuList = res.data;
+                for (var i = 0; i < menuList.length; i++) {
+                    var menu = {};
+                    if (menuList[i].url != "") {
+                        menu = menuList[i];
+                    } else if (menuList[i].children.length > 0) {
+                        menu = menuList[i].children[0];
+                    }
+
+                    // 组装路由
+                    var route = {
+                        path: "",
+                        component: null,
+                        name: "index",
+                        meta: {
+                        ...window.SITE_CONFIG["contentTabDefault"],
+                        menuId: menu.id,
+                        title: menu.name,
+                        },
+                    };
+                    let URL = (menu.url || "").replace(/{{([^}}]+)?}}/g,(s1, s2) => eval(s2));
+                    URL = URL.replace(/^\//, "").replace(/_/g, "-");
+                    route["path"] = route["name"] = URL.replace(/\//g, "-");
+                    route["component"] = () => import(`@/views/modules/${URL}`);
+                    proxy.$router.push(route);
+                    proxy.$store.state.sidebarMenuActiveName = [];
+
+                    var proute = menuList.filter(
+                        (item) =>
+                        item.children.filter((child) => child.id == menu.id).length > 0
+                    );
+
+                    proxy.$store.state.sidebarMenuActiveName.push(
+                        proute.length > 0 ? proute[0].name : ""
+                    );
+                    proxy.$store.state.sidebarMenuActiveName.push(
+                        route.meta.title
+                    );
+                    break;
+                }
+                localStorage.setItem("currentMenuIndex", 0);
+                proxy.$store.state.currentMenuIndex = 0;
+            });
+        })
+    }
+
+    const setCookie = (name, pwd, exdays) => {
+      var exdate = new Date();
+      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); 
+      window.document.cookie =
+        "userName" + "=" + name + ";path=/;expires=" + exdate.toGMTString();
+      window.document.cookie =
+        "userPwd" + "=" + pwd + ";path=/;expires=" + exdate.toGMTString();
+    }
+    const getCookie = () => {
+      if (document.cookie.length > 0) {
+        var arr = document.cookie.split("; "); 
+        for (var i = 0; i < arr.length; i++) {
+          var arr2 = arr[i].split("="); 
+          if (arr2[0] === "userName") {
+            accountForm.value.username = arr2[1]; 
+          } else if (arr2[0] === "userPwd") {
+            accountForm.value.password = arr2[1];
           }
-      })
-  }
+        }
+      }
+    }
+    
+    getCookie();
 </script>
 
 <style scoped lang="scss">
-  ::v-deep .el-textarea__inner{
-      background: #FFFFFF;
-      border-radius: 10px !important;
-      border: none !important;
-      padding: 0 !important;
-  }
-
-  .page{
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .box{
-          .title{
-              font-family: DingTalk, DingTalk;
-              font-weight: normal;
-              font-size: 24px;
-              color: #111111;
-              line-height: 29px;
-          }
-          .tip{
-              font-family: PingFangSC, PingFang SC;
-              font-weight: 400;
-              font-size: 14px;
-              color: #9CA3AF;
-              line-height: 20px;
-              margin-top: 11px;
-          }
+    .page{
+        width: 100%;
+        height: 100vh;
+        background: url(@/assets/images/agent/login_bg.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
 
-          .ask{
-              width: 980px;
-              height: 148px;
-              background: #FFFFFF;
-              border-radius: 10px;
-              border: 1px solid #E5E7EB;
-              padding: 20px;
-              box-sizing: border-box;
-              margin-top: 80px;
-              position: relative;
-              .btns{
-                  width: 940px;
-                  position: absolute;
-                  left: 20px;
-                  bottom: 20px;
-                  display: flex;
-                  justify-content: space-between;
-                  .left{
-                      display: flex;
-                      .copy{
-                          width: 36px;
-                          height: 36px;
-                          background: #FFFFFF;
-                          border-radius: 6px;
-                          border: 1px solid #E5E7EB;
-                          cursor: pointer;
-                          display: flex;
-                          align-items: center;
-                          justify-content: center;
-                          img{
-                              width: 14px;
-                              height: 16px;
-                          }
-                      }
-                      .think{
-                          width: 96px;
-                          height: 36px;
-                          background: #FFFFFF;
-                          border-radius: 6px;
-                          border: 1px solid #E5E7EB;
-                          margin-left: 8px;
-                          display: flex;
-                          align-items: center;
-                          justify-content: center;
-                          cursor: pointer;
-                          img{
-                              width: 14px;
-                              height: 14px;
-                          }
-                          span{
-                              font-family: PingFangSC, PingFang SC;
-                              font-weight: 400;
-                              font-size: 14px;
-                              color: #111111;
-                              line-height: 20px;
-                              margin-left: 3px;
-                          }
-                          &.active{
-                              border: 1px solid #70b2df;
-                              span{
-                                  color: #70b2df;
-                              }
-                          }
-                      }
-                  }
-                  .right{
-                      display: flex;
-                      img{
-                          width: 30px;
-                          height: 30px;
-                          margin-left: 33px;
-                          cursor: pointer;
-                      }
-                  }
-              }
-          }
-      }
-  }
+        .logo{
+            width: 285px;
+            height: 48px;
+            position: absolute;
+            top: 40px;
+            left: 48px;
+            z-index: 2;
+        }
+
+        .login{
+            width: 514px;
+            height: 614px;
+            background: #FFFFFF;
+            border-radius: 16px;
+            padding: 64px 48px;
+            box-sizing: border-box;
+            position: absolute;
+            top: 50%;
+            margin-top: -307px;
+            right: 262px;
+
+            .l_tabs{
+                .t_pre{
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 20px;
+                    color: #646464;
+                    line-height: 28px;
+                    padding-bottom: 4px;
+                    cursor: pointer;
+                    &.active{
+                        font-weight: bold;
+                        color: #761E6A;
+                        position: relative;
+                        &::after{
+                            content:'';
+                            width: 100%;
+                            height: 2px;
+                            background: #761E6A;
+                            position: absolute;
+                            left: 0;
+                            bottom: 0;
+                        }
+                    }
+                    &:last-child{
+                        margin-left: 64px;
+                    }
+                }
+            }
+
+            .l_check{
+                margin-top: 48px;
+                .lcs{
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 16px;
+                    color: #761E6A;
+                    line-height: 22px;
+                }
+            }
+
+            .l_btn{
+                margin-top: 48px;
+                height: 60px;
+                background: rgba(131, 52, 120, .4);
+                border-radius: 6px;
+                font-family: PingFang-SC, PingFang-SC;
+                font-weight: bold;
+                font-size: 20px;
+                color: #FFFFFF;
+                line-height: 60px;
+                text-align: center;
+                cursor: pointer;
+                letter-spacing: 1px;
+                cursor: not-allowed;
+                &.active{
+                    background: rgba(131, 52, 120, 1);
+                    cursor: pointer;
+                }
+            }
+
+            .c_pre{
+                height: 54px;
+                background: #FFFFFF;
+                border-radius: 6px;
+                border: 1px solid #ECEEF5;
+                display: flex;
+                align-items: center;
+                .left{
+                    width: 304px;
+                }
+                .cp_right{
+                    width: calc(100% - 304px);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    position: relative;
+                    cursor: pointer;
+                    &::before{
+                        content: '';
+                        width: 1px;
+                        height: 21px;
+                        background: #ECEEF5;
+                        position: absolute;
+                        top: 50%;
+                        margin-top: -10.5px;
+                        left: 0;
+                    }
+                    &>span{
+                        font-family: PingFangSC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 14px;
+                        color: #761E6A;
+                        line-height: 20px;
+                    }
+                }
+            }
+        }
+    }
+
+    ::v-deep .el-form-item{
+        margin-bottom: 0 !important;
+        margin-top: 48px;
+    }
+    ::v-deep .el-input__inner{
+        height: 54px !important;
+        line-height: 54px !important;
+    }
+    ::v-deep .el-checkbox__label{
+        font-size: 16px !important;
+        color: #393939;
+    }
+    ::v-deep .c_pre .el-input__inner{
+        border: none !important;
+        height: 48px !important;
+        line-height: 48px !important;
+        width: calc(100% - 2px);
+        margin-left: 2px;
+    }
 </style>

yarn.lock

@@ -3141,6 +3141,11 @@
     "isobject" "^3.0.0"
     "static-extend" "^0.1.1"
 
+"claygl@^1.2.1":
+  "integrity" "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
+  "resolved" "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz"
+  "version" "1.3.0"
+
 "clean-css@^3.1.9":
   "integrity" "sha512-aTWyttSdI2mYi07kWqHi24NUU9YlELFKGOAgFzZjDN1064DMAOy2FBuoyGmkKRlXkbpXd0EVHmiVkbKhKoirTw=="
   "resolved" "https://registry.npmmirror.com/clean-css/-/clean-css-3.4.28.tgz"
@@ -4179,6 +4184,22 @@
     "jsbn" "~0.1.0"
     "safer-buffer" "^2.1.0"
 
+"echarts-gl@^2.0.9":
+  "integrity" "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA=="
+  "resolved" "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz"
+  "version" "2.0.9"
+  dependencies:
+    "claygl" "^1.2.1"
+    "zrender" "^5.1.1"
+
+"echarts@^5.1.2", "echarts@^5.6.0":
+  "integrity" "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA=="
+  "resolved" "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz"
+  "version" "5.6.0"
+  dependencies:
+    "tslib" "2.3.0"
+    "zrender" "5.6.1"
+
 "ee-first@1.1.1":
   "integrity" "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
   "resolved" "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz"
@@ -10876,6 +10897,11 @@
   "resolved" "https://registry.npmmirror.com/tslib/-/tslib-2.6.2.tgz"
   "version" "2.6.2"
 
+"tslib@2.3.0":
+  "integrity" "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+  "resolved" "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz"
+  "version" "2.3.0"
+
 "tty-browserify@0.0.0":
   "integrity" "sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw=="
   "resolved" "https://registry.npmmirror.com/tty-browserify/-/tty-browserify-0.0.0.tgz"
@@ -11884,3 +11910,10 @@
     "string-width" "^4.2.0"
     "y18n" "^5.0.5"
     "yargs-parser" "^20.2.2"
+
+"zrender@^5.1.1", "zrender@5.6.1":
+  "integrity" "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag=="
+  "resolved" "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz"
+  "version" "5.6.1"
+  dependencies:
+    "tslib" "2.3.0"