提交登录页更改

ruoyi-ui/src/App.vue

@@ -63,4 +63,10 @@ export default {
   src: url("/static/fonts/优设标题黑.ttf");
 }
 
+@font-face {
+  font-family: "PangMenZhengDao";
+  src: url("/static/fonts/优设标题黑.ttf");
+}
+
+
 </style>

ruoyi-ui/src/components/eventDialogTable/video.vue

@@ -407,7 +407,7 @@ export default {
           status: "正在进行",
         },
         {
-          pic: require("@/assets/images/login-background.jpg"),
+          pic: require("@/assets/images/login-background.png"),
           time: "2022-03-11 14:47:13",
           event: "事件: 道路拥堵",
           status: "正在进行",

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorQuery/index.vue

@@ -189,6 +189,24 @@
     .buttonbar {
       display: inline-flex;
       flex-direction: row;
+      padding-top:15px;
+
+      > .button {
+        display: inline-flex;
+        min-width:90px;
+        height:28px;
+        background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+        border-radius: 2px 2px 2px 2px;
+        justify-content: center;
+        align-items: center;
+        padding: 1px 10px;;
+        opacity: 1;
+        font-size: 14px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 400;
+    color: #FFFFFF;
+        margin-left:15px;
+      }
 
     }
 

ruoyi-ui/src/views/login.vue

@@ -14,7 +14,8 @@
           padding-bottom: 10px;
         "
       >
-        <img src="../assets/image/login-logo.png" width="120px;" />
+        <!-- <img src="../assets/image/login-logo.png" width="120px;" /> -->
+        <div class="loginTitle"  >欢迎登录</div>
       </div>
       <div class="title">{{ 济菏数字运营管理平台 }}</div>
       <el-form-item prop="username">
@@ -22,31 +23,31 @@
           v-model="loginForm.username"
           type="text"
           auto-complete="off"
-          placeholder="账号"
+          placeholder="请输入用户名"
         >
-          <svg-icon
+        <img
             slot="prefix"
-            icon-class="user"
+            src="../assets/images/Vector.png"
             class="el-input__icon input-icon"
           />
         </el-input>
-        <div style="border-bottom: 1px solid #cfcfcf; margin-top: 5px"></div>
+        <!-- <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="密码"
+          placeholder="请输入密码"
           @keyup.enter.native="handleLogin"
         >
-          <svg-icon
+          <img
             slot="prefix"
-            icon-class="password"
+            src="../assets/images/locked.png"
             class="el-input__icon input-icon"
           />
         </el-input>
-        <div style="border-bottom: 1px solid #cfcfcf; margin-top: 5px"></div>
+        <!-- <div style="border-bottom: 1px solid #cfcfcf; margin-top: 5px"></div> -->
       </el-form-item>
       <Verify
         @success="capctchaCheckSuccess"
@@ -55,7 +56,7 @@
         :imgSize="{ width: '330px', height: '155px' }"
         ref="verify"
       ></Verify>
-      <!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 20px 0px;">记住密码</el-checkbox> -->
+      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 20px 0px;">记住密码</el-checkbox>
       <el-form-item style="width: 100%; text-align: center">
         <el-button
           :loading="loading"
@@ -86,7 +87,7 @@
 import Cookies from "js-cookie";
 import { encrypt, decrypt } from "@/utils/jsencrypt";
 import Verify from "@/components/Verifition/Verify";
-import { getCaptchaOnOff } from "@/api/login";
+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";
@@ -132,12 +133,12 @@ export default {
   },
   created() {
     this.getCookie();
-    this.getCaptchaOnOff();
+    this.getCaptchaOnOffFun();
     this.title = systemConfig.title(systemConfig.systemType);
   },
   methods: {
     // 获取验证码是否开启
-    getCaptchaOnOff() {
+    getCaptchaOnOffFun() {
       getCaptchaOnOff().then((response) => {
         this.captchaOnOff = response.captchaOnOff;
       });
@@ -237,12 +238,46 @@ export default {
 </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-deef .el-checkbox__label {
+    color:#fff;
+   }
+
+   ::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.jpg");
+  background-image: url("../assets/images/login-background.png");
   background-size: cover;
 }
+
+.login::after {
+  content: "";
+  position: absolute;
+  width:100%;
+  height: 120px;
+  background-image: url('../assets/images/login-head.png');
+  background-size: auto 100%;
+  background-position: center center;
+}
 .title {
   margin: 0px auto 10px auto;
   font-size: 24px;
@@ -251,27 +286,74 @@ export default {
   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%);
-  border-radius: 6px;
+  width: 548px;
-  background: #ffffff;
+  height: 535px;
-  width: 400px;
+  background: #00000080;
-  padding: 40px 70px 25px 70px;
+  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 {
-    height: 35px;
+    width: 420px;
+    height: 70px;
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    border: 1px solid #01CFFE;
+    background-color: transparent;
+    margin-bottom: 12px;;
+
+      
     input {
       border: 0;
       height: 35px;
     }
   }
   .input-icon {
-    height: 35px;
+    height: 28px;
-    width: 14px;
+    width: 28px;
     margin-left: 2px;
+    position: relative;
+    left:14px;
+    top:18px;
   }
 }
 .login-tip {
@@ -306,12 +388,18 @@ export default {
 
 /* 重置按钮 */
 .el-button--goon {
-  color: #ffffff;
+  font-size: 30px;
-  background-color: #4a5c73;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  color: #FFFFFF;
+  width: 420px;
+  height: 70px;
+  background: #07CAF6;
+  border-radius: 4px 4px 4px 4px;
+  opacity: 1;
 }
 
 .el-button--goon:hover {
-  color: #ffffff;
+ 
-  background-color: #304156;
 }
 </style>

ruoyi-ui/src/views/loginjqtunnel.vue

@@ -150,7 +150,7 @@ export default {
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/image/login-background.jpg");
+  background-image: url("../assets/images/login-background.png");
   background-size: cover;
 }
 .title {

ruoyi-ui/src/views/register.vue

@@ -152,7 +152,7 @@ export default {
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
+  background-image: url("../assets/images/login-background.png");
   background-size: cover;
 }
 .title {

ruoyi-ui/src/views/workbench/config/components/video.vue

@@ -474,7 +474,7 @@ export default {
           status: "正在进行",
         },
         {
-          pic: require("@/assets/images/login-background.jpg"),
+          pic: require("@/assets/images/login-background1.jpg"),
           time: "2022-03-11 14:47:13",
           event: "事件: 道路拥堵",
           status: "正在进行",