diff --git a/ruoyi-ui/src/assets/images/login/139.png b/ruoyi-ui/src/assets/images/login/139.png
new file mode 100644
index 00000000..edd626e4
Binary files /dev/null and b/ruoyi-ui/src/assets/images/login/139.png differ
diff --git a/ruoyi-ui/src/assets/images/login/login-background.png b/ruoyi-ui/src/assets/images/login/login-background.png
new file mode 100644
index 00000000..26a364dc
Binary files /dev/null and b/ruoyi-ui/src/assets/images/login/login-background.png differ
diff --git a/ruoyi-ui/src/assets/images/login/logo.png b/ruoyi-ui/src/assets/images/login/logo.png
new file mode 100644
index 00000000..bb77139b
Binary files /dev/null and b/ruoyi-ui/src/assets/images/login/logo.png differ
diff --git a/ruoyi-ui/src/assets/images/login/password.png b/ruoyi-ui/src/assets/images/login/password.png
new file mode 100644
index 00000000..8231760a
Binary files /dev/null and b/ruoyi-ui/src/assets/images/login/password.png differ
diff --git a/ruoyi-ui/src/assets/images/login/user.png b/ruoyi-ui/src/assets/images/login/user.png
new file mode 100644
index 00000000..9c5c54d9
Binary files /dev/null and b/ruoyi-ui/src/assets/images/login/user.png differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Pagination.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Pagination.vue
index 97dcbe14..5c3ed94a 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Pagination.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Pagination.vue
@@ -14,7 +14,7 @@ export default {
     getProps() {
       return {
         // total
-        layout: "prev, pager, next, sizes, jumper,total",
+        layout: "prev, pager, next, sizes, jumper, total",
         ...this.$attrs,
         small: true,
       };
@@ -109,5 +109,8 @@ export default {
       margin-right: 6px;
     }
   }
+  ::v-deep .el-pagination__total {
+    margin-left: 10px;
+  }
 }
 </style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js
index 16fed38e..95cb7750 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js
@@ -22,7 +22,7 @@ var options = {
   color: colorList,
   legend: {
     width: "500px",
-    height: "220px",
+    height: "160px",
     orient: "vertical",
     top: "10",
     icon: "circle",
@@ -64,7 +64,6 @@ var options = {
       let obj = typeAnalysisData.filter((it) => {
         return it.name == params;
       });
-      // console.log(obj);
       return `{ast|${obj[0].name}}    {bst|${
         Math.round((obj[0].value / count) * 100) || 0
       }%} {cst|${obj[0].value}起}`;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue
index 111df349..206fcb26 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue
@@ -61,84 +61,76 @@ export default {
           if (res.code == 200) {
             let data = res.data;
             console.log("===================22", data);
-            typeAnalysisData = [];
-            for (var i = 0; i < data.length; i++) {
-              var it = data[i];
-              if (it.warningType == 1) {
-                typeAnalysisData.push({
-                  name: "交通拥堵",
-                  value: it.number || 0,
-                });
-              }
-              if (it.warningType == 2) {
-                typeAnalysisData.push({
-                  name: "行人",
-                  value: it.number || 0,
-                });
-              }
-              if (it.warningType == 3) {
-                typeAnalysisData.push({
-                  name: "非机动车",
-                  value: it.number || 0,
-                });
-              }
-              if (it.warningType == 4) {
-                typeAnalysisData.push({
-                  name: "停车",
-                  value: it.number || 0,
-                });
-              }
-              if (it.warningType == 5) {
-                typeAnalysisData.push({
-                  name: "倒车/逆行",
-                  value: it.number || 0,
-                });
-              }
-              if (it.warningType == 6) {
-                typeAnalysisData.push({
-                  name: "烟火",
-                  value: it.number || 0,
-                });
-              }
-              if (it.warningType == 7) {
-                typeAnalysisData.push({
-                  name: "撒落物",
-                  value: it.number || 0,
-                });
-              }
-              if (it.warningType == 8) {
-                typeAnalysisData.push({
-                  name: "异常天气",
-                  value: it.number || 0,
-                });
-              }
-              if (it.warningType == 9) {
-                typeAnalysisData.push({
-                  name: "护栏碰撞",
-                  value: it.number || 0,
-                });
-              }
-              if (it.warningType == 10) {
-                typeAnalysisData.push({
-                  name: "交通事故",
-                  value: it.number || 0,
-                });
-              }
-              if (it.warningType == 11) {
-                typeAnalysisData.push({
-                  name: "车辆故障",
-                  value: it.number || 0,
-                });
-              }
-              if (it.warningType == 99) {
-                typeAnalysisData.push({
-                  name: "其他",
-                  value: it.number || 0,
-                });
-              }
-
-              drawRoundRect(context, 250, 8 + i * 28, 120, 24, 12, gr);
-            }
+            typeAnalysisData = [
+              {
+                name: "交通拥堵",
+                warningType: 1,
+                value: 0,
+              },
+              {
+                name: "行人",
+                warningType: 1,
+                value: 0,
+              },
+              {
+                name: "非机动车",
+                warningType: 3,
+                value: 0,
+              },
+              {
+                name: "停车",
+                warningType: 4,
+                value: 0,
+              },
+              {
+                name: "倒车/逆行",
+                warningType: 5,
+                value: 0,
+              },
+              {
+                name: "烟火",
+                warningType: 6,
+                value: 0,
+              },
+              {
+                name: "撒落物",
+                warningType: 7,
+                value: 0,
+              },
+              {
+                name: "异常天气",
+                warningType: 8,
+                value: 0,
+              },
+              {
+                name: "护栏碰撞",
+                warningType: 9,
+                value: 0,
+              },
+              {
+                name: "交通事故",
+                warningType: 10,
+                value: 0,
+              },
+              {
+                name: "车辆故障",
+                warningType: 11,
+                value: 0,
+              },
+              {
+                name: "其他",
+                warningType: 99,
+                value: 0,
+              },
+            ];
+            data.forEach((item, index) => {
+              typeAnalysisData.forEach((r) => {
+                if (item.warningType == r.warningType) {
+                  r.value += item.number;
+                }
+              });
+              // drawRoundRect(context, 250, 8 + index * 28, 120, 24, 12, gr);
+            });
 
             chartsStatistics.legend.data = typeAnalysisData?.map((x) => x.name);
             chartsStatistics.series[0].data = typeAnalysisData.map(
@@ -184,12 +176,11 @@ export default {
         context.lineWidth = 1; // 设置线段宽度
 
         // 绘制圆角矩形
-
-        // drawRoundRect(context, 260, 36, 120, 24, 12,gr)
-        // drawRoundRect(context, 260, 64, 120, 24, 12,gr)
-        // drawRoundRect(context, 260, 92, 120, 24, 12,gr)
-        // drawRoundRect(context, 260, 120, 120, 24, 12,gr)
-        // drawRoundRect(context, 260, 148, 120, 24, 12,gr)
+        drawRoundRect(context, 260, 6, 120, 24, 12, gr);
+        drawRoundRect(context, 260, 36, 120, 24, 12, gr);
+        drawRoundRect(context, 260, 64, 120, 24, 12, gr);
+        drawRoundRect(context, 260, 92, 120, 24, 12, gr);
+        drawRoundRect(context, 260, 120, 120, 24, 12, gr);
       });
     });
   },
diff --git a/ruoyi-ui/src/views/login copy.vue b/ruoyi-ui/src/views/login copy.vue
new file mode 100644
index 00000000..a65882cb
--- /dev/null
+++ b/ruoyi-ui/src/views/login copy.vue	
@@ -0,0 +1,461 @@
+<template>
+  <div class="login">
+    <!-- <Bg2 style=" width: 600px; height:800px; position: fixed; left: 100px; top:100px">发多少刚发的刚发的</Bg2> -->
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+    >
+      <div
+        style="
+          width: 100%;
+          text-align: center;
+          padding-right: 20px;
+          padding-bottom: 10px;
+        "
+      >
+        <!-- <img src="../assets/image/login-logo.png" width="120px;" /> -->
+        <div class="loginTitle">欢迎登录</div>
+      </div>
+      <div class="title">{{ "" }}</div>
+      <el-form-item prop="username" style="margin-top: 40px">
+        <el-input
+          v-model="loginForm.username"
+          type="text"
+          auto-complete="off"
+          placeholder="请输入用户名"
+          class="username"
+        >
+          <img
+            slot="prefix"
+            src="../assets/images/Vector.png"
+            class="el-input__icon input-icon"
+          />
+        </el-input>
+        <!-- <div style="border-bottom: 1px solid #cfcfcf; margin-top: 5px"></div> -->
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input
+          v-model="loginForm.password"
+          type="password"
+          auto-complete="off"
+          placeholder="请输入密码"
+          @keyup.enter.native="handleLogin"
+          class="password"
+        >
+          <img
+            slot="prefix"
+            src="../assets/images/locked.png"
+            class="el-input__icon input-icon"
+          />
+        </el-input>
+        <!-- <div style="border-bottom: 1px solid #cfcfcf; margin-top: 5px"></div> -->
+      </el-form-item>
+      <Verify
+        @success="capctchaCheckSuccess"
+        :mode="'pop'"
+        :captchaType="'blockPuzzle'"
+        :imgSize="{ width: '330px', height: '155px' }"
+        ref="verify"
+      ></Verify>
+      <el-checkbox
+        v-model="loginForm.rememberMe"
+        style="margin: 40px 0px 20px 0px"
+        >记住密码</el-checkbox
+      >
+      <el-form-item style="width: 100%; text-align: center">
+        <el-button
+          :loading="loading"
+          size="medium"
+          type="goon"
+          style="width: 100%"
+          @click.native.prevent="handleLogin"
+        >
+          <span v-if="!loading">登 录</span>
+          <span v-else>登 录 中...</span>
+        </el-button>
+        <div style="float: right" v-if="register">
+          <router-link class="link-type" :to="'/register'"
+            >立即注册</router-link
+          >
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <!--  底部  -->
+    <div class="el-login-footer">
+      <!-- <span>Copyright ©hamdell All Rights Reserved.</span> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import Cookies from "js-cookie";
+import { encrypt, decrypt } from "@/utils/jsencrypt";
+import Verify from "@/components/Verifition/Verify";
+import { getCaptchaOnOff } from "@/api/login.js";
+import { listOrder } from "@/api/payment/order";
+import { getUserDeptId } from "@/api/system/user";
+import { listTunnels } from "@/api/equipment/tunnel/api.js";
+import { getConfigKey } from "@/api/system/config.js";
+
+import Bg2 from "@screen/components/Decorations/bg-2.vue";
+
+export default {
+  components: { Verify, Bg2 },
+  name: "Login",
+  data() {
+    return {
+      title: "", // 系统标题
+      cookiePassword: "",
+      loginForm: {
+        // username: "admin",
+        // password: "dxc123!@#",
+        //dxc123!@#
+        username: "",
+        password: "",
+        rememberMe: false,
+        code: "",
+        uuid: "",
+      },
+      loginRules: {
+        username: [
+          { required: true, trigger: "blur", message: "请输入您的账号" },
+        ],
+        password: [
+          { required: true, trigger: "blur", message: "请输入您的密码" },
+        ],
+      },
+      loading: false,
+      // 验证码开关
+      captchaOnOff: false,
+      // 注册开关
+      register: false,
+      redirect: undefined,
+    };
+  },
+  watch: {
+    $route: {
+      handler: function (route) {
+        this.redirect = route.query && route.query.redirect;
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    this.getCookie();
+    //this.getCaptchaOnOffFun();
+    this.title = systemConfig.title(systemConfig.systemType);
+  },
+  methods: {
+    // 获取验证码是否开启
+    getCaptchaOnOffFun() {
+      getCaptchaOnOff().then((response) => {
+        this.captchaOnOff = response.captchaOnOff;
+      });
+    },
+    // 验证码
+    capctchaCheckSuccess(params) {
+      this.loginForm.code = params.captchaVerification;
+      this.loading = true;
+      console.log(this.loginForm.rememberMe, "=======================");
+      if (this.loginForm.rememberMe == true) {
+        Cookies.set("username", this.loginForm.username, { expires: 30 });
+        Cookies.set("password", encrypt(this.loginForm.password), {
+          expires: 30,
+        });
+        Cookies.set("rememberMe", this.loginForm.rememberMe, { expires: 30 });
+      } else {
+        Cookies.remove("username");
+        Cookies.remove("password");
+        Cookies.remove("rememberMe");
+      }
+      this.$store
+        .dispatch("Login", this.loginForm)
+        .then(() => {
+          this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    getCookie() {
+      const username = Cookies.get("username");
+      const password = Cookies.get("password");
+      const rememberMe = Cookies.get("rememberMe");
+      console.log("rem", rememberMe);
+      this.loginForm = {
+        username: username === undefined ? this.loginForm.username : username,
+        password:
+          password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
+      };
+    },
+    handleLogin() {
+      if (this.captchaOnOff) {
+        this.$refs.loginForm.validate((valid) => {
+          if (valid) {
+            this.$refs.verify.show();
+          }
+        });
+      } else {
+        if (this.loginForm.rememberMe == true) {
+          Cookies.set("username", this.loginForm.username, { expires: 30 });
+          Cookies.set("password", encrypt(this.loginForm.password), {
+            expires: 30,
+          });
+          Cookies.set("rememberMe", this.loginForm.rememberMe, { expires: 30 });
+        } else {
+          Cookies.remove("username");
+          Cookies.remove("password");
+          Cookies.remove("rememberMe");
+        }
+
+        this.$store
+          .dispatch("Login", this.loginForm)
+          .then(() => {
+            this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+            // this.getManageStation();
+          })
+          .catch(() => {
+            this.loading = false;
+          });
+      }
+    },
+    getManageStation() {
+      getConfigKey("sd.moduleSwitch").then((res) => {
+        console.log(res, "管理站01");
+        this.$cache.local.set("manageStation", res.msg);
+      });
+      getConfigKey("sd.navigationBar").then((res) => {
+        console.log(res, "res");
+        let sideTheme = "theme-blue";
+        if (res.msg == "0") {
+          sideTheme = "theme-dark";
+        } else {
+          sideTheme = "theme-blue";
+        }
+        // console.log(res, "是否胡山隧道，胡山单独导航栏样式");
+        this.$cache.local.set("navigationBar", res.msg);
+        this.$store.dispatch("settings/changeSetting", {
+          key: "sideTheme",
+          value: sideTheme,
+        });
+        // this.sideTheme = val;
+        this.$cache.local.set(
+          "layout-setting",
+          `{
+            "topNav":${this.$store.state.settings.topNav},
+            "tagsView":${this.$store.state.settings.tagsView},
+            "weatherView":${this.$store.state.settings.weatherView},
+            "fixedHeader":${this.$store.state.settings.fixedHeader},
+            "sidebarLogo":${this.$store.state.settings.sidebarLogo},
+            "dynamicTitle":${this.$store.state.settings.dynamicTitle},
+            "sideTheme":"${sideTheme}",
+            "theme":"${this.$store.state.settings.theme}"
+          }`
+        );
+        // console.log(this.$store.state.settings.sideTheme)
+      });
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep .el-input__inner {
+  background-color: transparent !important;
+  height: 100%;
+  font-size: 22px;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  color: #07caf6;
+  margin-left: 68px;
+}
+
+::v-deep .el-checkbox__label {
+  color: #fff;
+  font-size: 18px !important;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  color: #ffffff !important;
+  margin-bottom: 10px;
+}
+
+::v-deep .el-form-item__error {
+  position: absolute;
+  top: 75px;
+}
+
+::v-deep .el-input__inner::placeholder {
+  color: #07caf6;
+}
+
+.login {
+  position: relative;
+  height: 100%;
+  background-image: url("../assets/images/login-background.png");
+  // background-size: 100% auto;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.login::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 120px;
+  background-image: url("../assets/images/login-head.png");
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+  background-position: center center;
+}
+
+.title {
+  margin: 0px auto 10px auto;
+  font-size: 24px;
+  text-align: center;
+  color: #353f55;
+  letter-spacing: 2px;
+}
+
+.login-form::after {
+  content: "";
+  position: absolute;
+  left: -4px;
+  top: 0px;
+  width: 4px;
+  height: 100%;
+  background: linear-gradient(
+    180deg,
+    #bdfff600 0%,
+    #bdfff6 50%,
+    #bdfff600 100%
+  );
+}
+
+.login-form::before {
+  content: "";
+  position: absolute;
+  right: -4px;
+  top: 0px;
+  width: 4px;
+  height: 100%;
+  background: linear-gradient(
+    180deg,
+    #bdfff600 0%,
+    #bdfff6 50%,
+    #bdfff600 100%
+  );
+}
+
+.login-form {
+  position: absolute;
+  left: 50%;
+  top: 20%;
+  transform: translateX(-50%);
+  width: 400px;
+  height: 500px;
+  background: #00000080;
+  border-radius: 0px 0px 0px 0px;
+  opacity: 1;
+  border: 4px solid #0c5963;
+  padding: 50px;
+  // margin-left: 50%;
+
+  .loginTitle {
+    display: inline-flex;
+    width: 100%;
+    height: 45px;
+    font-size: 30px;
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 500;
+    color: #ffffff;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .el-input {
+    width: 300px;
+    height: 60px;
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    border: 1px solid #01cffe;
+    background-color: transparent;
+    margin-bottom: 12px;
+
+    ::v-deep .el-input__inner {
+      font-size: 20px !important;
+    }
+
+    input {
+      border: 0;
+      height: 35px;
+    }
+  }
+
+  .input-icon {
+    height: 20px;
+    width: 20px;
+    margin-left: 2px;
+    position: relative;
+    left: 14px;
+    top: 18px;
+  }
+}
+
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+
+.login-code {
+  width: 37%;
+  height: 35px;
+  float: right;
+
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+
+.el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+
+.login-code-img {
+  height: 35px;
+}
+
+/* 重置按钮 */
+.el-button--goon {
+  font-size: 24px;
+  font-weight: 400;
+  color: #fff;
+  width: 380px;
+  height: 55px;
+  background: #07caf6;
+  border-radius: 4px;
+  opacity: 1;
+  border: none;
+}
+
+.el-button--goon:hover {
+}
+
+::v-deep .el-form-item__error {
+  top: 62px;
+}
+</style>
diff --git a/ruoyi-ui/src/views/login.vue b/ruoyi-ui/src/views/login.vue
index 6b0ab0a5..1f1ab1c8 100644
--- a/ruoyi-ui/src/views/login.vue
+++ b/ruoyi-ui/src/views/login.vue
@@ -1,43 +1,79 @@
 <template>
   <div class="login">
-    <!-- <Bg2 style=" width: 600px; height:800px; position: fixed; left: 100px; top:100px">发多少刚发的刚发的</Bg2> -->
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <div style="
-          width: 100%;
-          text-align: center;
-          padding-right: 20px;
-          padding-bottom: 10px;
-        ">
-        <!-- <img src="../assets/image/login-logo.png" width="120px;" /> -->
-        <div class="loginTitle">欢迎登录</div>
+    <div class="login-content">
+      <div class="login-l">
+        <div class="logo"><img src="../assets/images/login/logo.png" /></div>
+        <span>山东高速</span>
+        <span>济菏数字运营管理平台</span>
       </div>
-      <div class="title">{{ '' }}</div>
-      <el-form-item prop="username" style="margin-top: 40px;">
-        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入用户名" class="username">
-          <img slot="prefix" src="../assets/images/Vector.png" class="el-input__icon input-icon" />
-        </el-input>
-        <!-- <div style="border-bottom: 1px solid #cfcfcf; margin-top: 5px"></div> -->
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码"
-          @keyup.enter.native="handleLogin" class="password">
-          <img slot="prefix" src="../assets/images/locked.png" class="el-input__icon input-icon" />
-        </el-input>
-        <!-- <div style="border-bottom: 1px solid #cfcfcf; margin-top: 5px"></div> -->
-      </el-form-item>
-      <Verify @success="capctchaCheckSuccess" :mode="'pop'" :captchaType="'blockPuzzle'"
-        :imgSize="{ width: '330px', height: '155px' }" ref="verify"></Verify>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:40px 0px 20px 0px;">记住密码</el-checkbox>
-      <el-form-item style="width: 100%; text-align: center">
-        <el-button :loading="loading" size="medium" type="goon" style="width: 100%" @click.native.prevent="handleLogin">
-          <span v-if="!loading">登 录</span>
-          <span v-else>登 录 中...</span>
-        </el-button>
-        <div style="float: right" v-if="register">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
-        </div>
-      </el-form-item>
-    </el-form>
+      <div class="login-r">
+        <span class="title">欢迎登录</span>
+        <img class="line" src="../assets/images/login/139.png" />
+        <el-form
+          ref="loginForm"
+          :model="loginForm"
+          :rules="loginRules"
+          class="login-form"
+          ><el-form-item prop="username">
+            <el-input
+              v-model="loginForm.username"
+              type="text"
+              auto-complete="off"
+              placeholder="请输入用户名"
+              class="username"
+            >
+              <img
+                slot="prefix"
+                src="../assets/images/login/user.png"
+                class="el-input__icon input-icon"
+              />
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
+              v-model="loginForm.password"
+              type="password"
+              auto-complete="off"
+              placeholder="请输入密码"
+              @keyup.enter.native="handleLogin"
+              class="password"
+            >
+              <img
+                slot="prefix"
+                src="../assets/images/login/password.png"
+                class="el-input__icon input-icon"
+              />
+            </el-input>
+          </el-form-item>
+          <Verify
+            @success="capctchaCheckSuccess"
+            :mode="'pop'"
+            :captchaType="'blockPuzzle'"
+            :imgSize="{ width: '330px', height: '155px' }"
+            ref="verify"
+          ></Verify>
+          <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
+          <el-form-item>
+            <el-button
+              class="btn"
+              :loading="loading"
+              size="medium"
+              type="goon"
+              style="width: 100%"
+              @click.native.prevent="handleLogin"
+            >
+              <span v-if="!loading">登 录</span>
+              <span v-else>登 录 中...</span>
+            </el-button>
+            <div style="float: right" v-if="register">
+              <router-link class="link-type" :to="'/register'"
+                >立即注册</router-link
+              >
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
 
     <!--  底部  -->
     <div class="el-login-footer">
@@ -56,9 +92,7 @@ import { getUserDeptId } from "@/api/system/user";
 import { listTunnels } from "@/api/equipment/tunnel/api.js";
 import { getConfigKey } from "@/api/system/config.js";
 
-
-import Bg2 from "@screen/components/Decorations/bg-2.vue"
-
+import Bg2 from "@screen/components/Decorations/bg-2.vue";
 
 export default {
   components: { Verify, Bg2 },
@@ -132,7 +166,7 @@ export default {
       this.$store
         .dispatch("Login", this.loginForm)
         .then(() => {
-          this.$router.push({ path: this.redirect || "/" }).catch(() => { });
+          this.$router.push({ path: this.redirect || "/" }).catch(() => {});
         })
         .catch(() => {
           this.loading = false;
@@ -158,7 +192,6 @@ export default {
           }
         });
       } else {
-
         if (this.loginForm.rememberMe == true) {
           Cookies.set("username", this.loginForm.username, { expires: 30 });
           Cookies.set("password", encrypt(this.loginForm.password), {
@@ -174,7 +207,7 @@ export default {
         this.$store
           .dispatch("Login", this.loginForm)
           .then(() => {
-            this.$router.push({ path: this.redirect || "/" }).catch(() => { });
+            this.$router.push({ path: this.redirect || "/" }).catch(() => {});
             // this.getManageStation();
           })
           .catch(() => {
@@ -188,7 +221,7 @@ export default {
         this.$cache.local.set("manageStation", res.msg);
       });
       getConfigKey("sd.navigationBar").then((res) => {
-        console.log(res, "res")
+        console.log(res, "res");
         let sideTheme = "theme-blue";
         if (res.msg == "0") {
           sideTheme = "theme-dark";
@@ -224,155 +257,170 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 ::v-deep .el-input__inner {
-  background-color: transparent !important;
-  height: 100%;
-  font-size: 22px;
-  font-family: Source Han Sans CN, Source Han Sans CN;
+  background-color: #fff !important;
+  height: 34px;
+  font-size: 14px;
   font-weight: 400;
-  color: #07CAF6;
-  margin-left: 68px;
+  color: #999999;
+  border: 1px solid rgba(0, 145, 67, 0.5);
+  // margin-left: 20px;
 }
 
 ::v-deep .el-checkbox__label {
-  color: #fff;
-  font-size: 18px !important;
-  font-family: Source Han Sans CN, Source Han Sans CN;
+  color: #999;
+  font-size: 12px !important;
   font-weight: 400;
-  color: #FFFFFF !important;
+  color: #999 !important;
   margin-bottom: 10px;
+  margin-top: 20px;
 }
 
-
-::v-deep .el-form-item__error {
-  position: absolute;
-  top: 75px;
-}
+// ::v-deep .el-form-item__error {
+//   position: absolute;
+//   top: 75px;
+// }
 
 ::v-deep .el-input__inner::placeholder {
-  color: #07CAF6;
+  color: #999999;
 }
 
 .login {
   position: relative;
   height: 100%;
-  background-image: url("../assets/images/login-background.png");
+  background-image: url("../assets/images/login/login-background.png");
   // background-size: 100% auto;
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
 
-.login::after {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 120px;
-  background-image: url('../assets/images/login-head.png');
-  background-repeat: no-repeat;
-  background-size: auto 100%;
-  background-position: center center;
-}
-
-.title {
-  margin: 0px auto 10px auto;
-  font-size: 24px;
-  text-align: center;
-  color: #353f55;
-  letter-spacing: 2px;
-}
-
-.login-form::after {
-  content: "";
-  position: absolute;
-  left: -4px;
-  top: 0px;
-  width: 4px;
-  height: 100%;
-  background: linear-gradient(180deg, #BDFFF600 0%, #BDFFF6 50%, #BDFFF600 100%);
-  ;
-}
-
-.login-form::before {
-  content: "";
-  position: absolute;
-  right: -4px;
-  top: 0px;
-  width: 4px;
-  height: 100%;
-  background: linear-gradient(180deg, #BDFFF600 0%, #BDFFF6 50%, #BDFFF600 100%);
-}
-
-.login-form {
+.login-content {
   position: absolute;
   left: 50%;
-  top: 20%;
+  top: 367px;
   transform: translateX(-50%);
-  width: 400px;
-  height: 500px;
-  background: #00000080;
-  border-radius: 0px 0px 0px 0px;
-  opacity: 1;
-  border: 4px solid #0C5963;
-  padding: 50px;
-  // margin-left: 50%;
-
-  .loginTitle {
-    display: inline-flex;
-    width: 100%;
-    height: 45px;
-    font-size: 30px;
-    font-family: Source Han Sans CN, Source Han Sans CN;
-    font-weight: 500;
-    color: #FFFFFF;
-    justify-content: center;
-    align-items: center;
+  width: 700px;
+  height: 367px;
+  background: rgba(10, 82, 123, 0.6);
+  display: flex;
+  .login-l {
+    // width: 300px;
+    margin-top: 42px;
+    margin-left: 25px;
+    .logo {
+      width: 177px;
+      height: 135px;
+      margin: auto;
+      margin-bottom: 10px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    span {
+      display: block;
+      font-family: PingFang;
+      font-weight: 600;
+      font-size: 30px;
+      color: rgba(42, 217, 253, 0.7);
+      line-height: 35px;
+      text-align: center;
+      margin-top: 20px;
+    }
   }
+  .login-r {
+    width: 320px;
+    height: 290px;
+    margin-right: 27px;
+    margin-top: 42px;
+    margin-left: 20px;
+    background: #c9e5eb;
+    padding: 25px 22px;
+
+    .title {
+      display: block;
+      width: 100%;
+      font-family: PingFang;
+      font-weight: 600;
+      font-size: 28px;
+      color: #009143;
+      text-align: center;
+    }
+    .line {
+      width: 210px;
+      height: 3px;
+      display: block;
+      margin: auto;
+      margin-bottom: 20px;
+    }
+    .btn {
+      margin: auto;
+      width: 155px;
+      height: 34px;
+      background: #009143;
+      border-radius: 1px;
+      color: #fff;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 5px;
+    }
+  }
+  // .loginTitle {
+  //   display: inline-flex;
+  //   width: 100%;
+  //   height: 45px;
+  //   font-size: 30px;
+  //   font-family: Source Han Sans CN, Source Han Sans CN;
+  //   font-weight: 500;
+  //   color: #ffffff;
+  //   justify-content: center;
+  //   align-items: center;
+  // }
 
   .el-input {
-    width: 300px;
-    height: 60px;
-    border-radius: 4px 4px 4px 4px;
-    opacity: 1;
-    border: 1px solid #01CFFE;
-    background-color: transparent;
-    margin-bottom: 12px;
+    width: 275px;
+    height: 36px;
+    border-radius: 2px;
+    background: #fff;
+    padding-left: 20px;
 
     ::v-deep .el-input__inner {
-      font-size: 20px !important;
+      font-size: 14px !important;
     }
 
-
     input {
       border: 0;
-      height: 35px;
+      height: 36px;
     }
   }
 
   .input-icon {
     height: 20px;
     width: 20px;
-    margin-left: 2px;
+    margin-right: 10px;
     position: relative;
-    left: 14px;
-    top: 18px;
+    left: 10px;
+    top: 7px;
   }
 }
 
-.login-tip {
-  font-size: 13px;
-  text-align: center;
-  color: #bfbfbf;
-}
+// .login-tip {
+//   font-size: 13px;
+//   text-align: center;
+//   color: #bfbfbf;
+// }
 
-.login-code {
-  width: 37%;
-  height: 35px;
-  float: right;
+// .login-code {
+//   width: 37%;
+//   height: 35px;
+//   float: right;
 
-  img {
-    cursor: pointer;
-    vertical-align: middle;
-  }
-}
+//   img {
+//     cursor: pointer;
+//     vertical-align: middle;
+//   }
+// }
 
 .el-login-footer {
   height: 40px;
@@ -395,18 +443,19 @@ export default {
 .el-button--goon {
   font-size: 24px;
   font-weight: 400;
-  color: #FFF;
+  color: #fff;
   width: 380px;
   height: 55px;
-  background: #07CAF6;
+  background: #07caf6;
   border-radius: 4px;
   opacity: 1;
   border: none;
 }
 
-.el-button--goon:hover {}
+.el-button--goon:hover {
+}
 
-::v-deep .el-form-item__error{
-  top:62px;
+::v-deep .el-form-item__error {
+  top: 62px;
 }
 </style>