From 73d299576f1b7ea7d229d78b396e71ddae415d78 Mon Sep 17 00:00:00 2001
From: "MY-SH\\lenovo" <1312913002@qq.com>
Date: Tue, 16 Jan 2024 14:40:37 +0800
Subject: [PATCH] p

---
 ruoyi-ui/src/views/login.vue | 333 ++++++++++++++++++++---------------
 1 file changed, 187 insertions(+), 146 deletions(-)

diff --git a/ruoyi-ui/src/views/login.vue b/ruoyi-ui/src/views/login.vue
index 5c70677..1a53723 100644
--- a/ruoyi-ui/src/views/login.vue
+++ b/ruoyi-ui/src/views/login.vue
@@ -3,96 +3,129 @@
     <div class="head">
       <div class="doll">
         <div class="leftBox">
-          <img class="hui" src="../assets/images/logo2.png" alt="">
-          <span>
-            <p class="pChina">唐河县应急管理综合业务平台</p>
-            <!--<p class="pEnglish">Ministry of Emergency Management of the People's Republic of China</p>-->
-          </span>
-          <span class="slogan">
-            <!-- <p>对党忠诚  纪律严明</p>
+          <img class="hui" src="../assets/images/logo2.png" alt="" />
+          <div
+            style="
+              flex: 1;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+            "
+          >
+            <span>
+              <p class="pChina">唐河县应急管理综合业务平台</p>
+              <!--<p class="pEnglish">Ministry of Emergency Management of the People's Republic of China</p>-->
+            </span>
+            <span class="slogan">
+              <!-- <p>对党忠诚  纪律严明</p>
             <p>赴汤蹈火  竭诚为民</p> -->
-            <img class="ft" src="../assets/images/ftdh.png" alt="">
-            <img class="ft" src="../assets/images/ddzc.png" alt="">
-          </span>
+              <img class="ft" src="../assets/images/ftdh.png" alt="" />
+              <img class="ft" src="../assets/images/ddzc.png" alt="" />
+            </span>
+          </div>
         </div>
-        <div class="rightBox">
+        <!-- <div class="rightBox">
           <img src="../assets/images/hui.png" alt="">
           <span class="time">{{ currentTime  }}</span>
           <span class="day">
             <p>{{ currentDayOfWeek }}</p>
             <p>{{ currentDate }}</p>
           </span>
-        </div>
+        </div> -->
       </div>
     </div>
     <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">唐河县应急管理综合业务平台</h3>
-      <el-form-item prop="username">
-        <el-input
-          v-model="loginForm.username"
-          type="text"
-          auto-complete="off"
-          placeholder="账号"
-        >
-          <svg-icon slot="prefix" icon-class="user" 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"
-        >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="code" v-if="captchaEnabled">
-        <el-input
-          v-model="loginForm.code"
-          auto-complete="off"
-          placeholder="验证码"
-          style="width: 63%"
-          @keyup.enter.native="handleLogin"
+      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+        <h3 class="title">唐河县应急管理综合业务平台</h3>
+        <el-form-item prop="username">
+          <el-input
+            v-model="loginForm.username"
+            type="text"
+            auto-complete="off"
+            placeholder="账号"
+          >
+            <svg-icon slot="prefix" icon-class="user" 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"
+          >
+            <svg-icon
+              slot="prefix"
+              icon-class="password"
+              class="el-input__icon input-icon"
+            />
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="code" v-if="captchaEnabled">
+          <el-input
+            v-model="loginForm.code"
+            auto-complete="off"
+            placeholder="验证码"
+            style="width: 63%"
+            @keyup.enter.native="handleLogin"
+          >
+            <svg-icon
+              slot="prefix"
+              icon-class="validCode"
+              class="el-input__icon input-icon"
+            />
+          </el-input>
+          <div class="login-code">
+            <img :src="codeUrl" @click="getCode" class="login-code-img" />
+          </div>
+        </el-form-item>
+        <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px"
+          >记住密码</el-checkbox
         >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
-        </div>
-      </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-      <el-form-item style="width:100%;">
-        <el-button
-          :loading="loading"
-          size="medium"
-          type="primary"
-          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>
+        <el-form-item style="width: 100%">
+          <el-button
+            :loading="loading"
+            size="medium"
+            type="primary"
+            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 © 2018-2023 ruoyi.vip All Rights Reserved.</span> -->
+        <div class="rightBox">
+         <div style="
+    display: flex;
+    align-items: center;
+">
+          <span class="time">{{ currentTime }}</span>
+          <span class="day">
+            <p>{{ currentDayOfWeek }}</p>
+            <p>{{ currentDate }}</p>
+          </span>
+         </div>
+          
+
+          <img src="../assets/images/hui.png" alt="" />
         </div>
-      </el-form-item>
-    </el-form>
-    <!--  底部  -->
-    <div class="el-login-footer">
-      <!-- <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span> -->
+      </div>
     </div>
   </div>
-  </div>
-
 </template>
 
 <script>
 import { getCodeImg } from "@/api/login";
 import Cookies from "js-cookie";
-import { encrypt, decrypt } from '@/utils/jsencrypt'
+import { encrypt, decrypt } from "@/utils/jsencrypt";
 
 export default {
   name: "Login",
@@ -104,16 +137,12 @@ export default {
         password: "admin123",
         rememberMe: false,
         code: "",
-        uuid: ""
+        uuid: "",
       },
       loginRules: {
-        username: [
-          { required: true, trigger: "blur", message: "请输入您的账号" }
-        ],
-        password: [
-          { required: true, trigger: "blur", message: "请输入您的密码" }
-        ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+        username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
+        password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
+        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
       },
       loading: false,
       // 验证码开关
@@ -121,30 +150,31 @@ export default {
       // 注册开关
       register: false,
       redirect: undefined,
-      currentTime: '',
-      currentDayOfWeek: '',
-      currentDate: '' ,
-      timer:null,
+      currentTime: "",
+      currentDayOfWeek: "",
+      currentDate: "",
+      timer: null,
     };
   },
   watch: {
     $route: {
-      handler: function(route) {
+      handler: function (route) {
         this.redirect = route.query && route.query.redirect;
       },
-      immediate: true
-    }
+      immediate: true,
+    },
   },
   created() {
     this.getCode();
     this.getCookie();
-    this.getCurrentTime()
+    this.getCurrentTime();
     this.timer = setInterval(this.getCurrentTime, 1000);
   },
   methods: {
     getCode() {
-      getCodeImg().then(res => {
-        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+      getCodeImg().then((res) => {
+        this.captchaEnabled =
+          res.captchaEnabled === undefined ? true : res.captchaEnabled;
         if (this.captchaEnabled) {
           this.codeUrl = "data:image/gif;base64," + res.img;
           this.loginForm.uuid = res.uuid;
@@ -154,34 +184,37 @@ export default {
     getCookie() {
       const username = Cookies.get("username");
       const password = Cookies.get("password");
-      const rememberMe = Cookies.get('rememberMe')
+      const rememberMe = Cookies.get("rememberMe");
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
         password: password === undefined ? this.loginForm.password : decrypt(password),
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
       };
     },
     handleLogin() {
-      this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
           this.loading = true;
           if (this.loginForm.rememberMe) {
             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 });
+            Cookies.set("rememberMe", this.loginForm.rememberMe, { expires: 30 });
           } else {
             Cookies.remove("username");
             Cookies.remove("password");
-            Cookies.remove('rememberMe');
+            Cookies.remove("rememberMe");
           }
-          this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
-          }).catch(() => {
-            this.loading = false;
-            if (this.captchaEnabled) {
-              this.getCode();
-            }
-          });
+          this.$store
+            .dispatch("Login", this.loginForm)
+            .then(() => {
+              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+            })
+            .catch(() => {
+              this.loading = false;
+              if (this.captchaEnabled) {
+                this.getCode();
+              }
+            });
         }
       });
     },
@@ -189,20 +222,28 @@ export default {
     // 获取时间
     getCurrentTime() {
       const date = new Date();
-      const hours = String(date.getHours()).padStart(2, '0');
-      const minutes = String(date.getMinutes()).padStart(2, '0');
+      const hours = String(date.getHours()).padStart(2, "0");
+      const minutes = String(date.getMinutes()).padStart(2, "0");
       const dayOfWeek = this.getDayOfWeek(date.getDay());
       const year = date.getFullYear();
-      const month = String(date.getMonth() + 1).padStart(2, '0');
-      const day = String(date.getDate()).padStart(2, '0');
+      const month = String(date.getMonth() + 1).padStart(2, "0");
+      const day = String(date.getDate()).padStart(2, "0");
       this.currentTime = `${hours}:${minutes}`;
       this.currentDayOfWeek = dayOfWeek;
       this.currentDate = `${year}-${month}-${day}`;
     },
     getDayOfWeek(day) {
-      const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+      const daysOfWeek = [
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ];
       return daysOfWeek[day];
-    }
+    },
   },
   beforeDestroy() {
     clearInterval(this.timer); // 在组件销毁前清除定时器
@@ -218,7 +259,7 @@ export default {
   // height: 100%;
 
   margin-top: 4%;
-    margin-right: 8%;
+  margin-right: 8%;
 }
 .title {
   margin: 0px auto 30px auto;
@@ -258,7 +299,7 @@ export default {
   }
 }
 .el-login-footer {
-  height: 40px;
+  height: 30%;
   line-height: 40px;
   position: fixed;
   bottom: 0;
@@ -266,36 +307,34 @@ export default {
   text-align: center;
   color: #fff;
   font-family: Arial;
-  font-size: 12px;
+  // font-size: 12px;
   letter-spacing: 1px;
 }
 .login-code-img {
   height: 38px;
 }
 
-
-.loginBox{
+.loginBox {
   width: 100%;
   height: 100%;
-
   background-image: url("../assets/images/background.jpg");
   background-size: 100% 100%;
 
-  .head{
+  .head {
     height: 20%;
     background: #056891;
-    .doll{
+    .doll {
       width: 91%;
       height: 100%;
       margin: auto;
       display: flex;
       justify-content: space-between;
       align-items: center;
-      .leftBox{
+      .leftBox {
         display: flex;
         align-items: center;
-
-        img{
+        flex: 1;
+        img {
           // object-fit: none;
           width: 50px;
           height: 50px;
@@ -304,31 +343,21 @@ export default {
 
         color: #ffffff;
       }
-      .rightBox{
-        display: flex;
-        align-items: center;
-
-        img{
-          width: 120px;
-          height: auto;
-          margin-right: 35px;
-        }
-      }
     }
   }
 }
 .leftBox {
-  .pChina{
+  .pChina {
     display: table-row;
     font-size: 40px;
   }
-  .pEnglish{
+  .pEnglish {
     display: table-row;
     font-size: 13px;
     letter-spacing: 1px;
   }
 
- .slogan{
+  .slogan {
     font-size: 24px;
     color: #ff6c00;
     line-height: 10px;
@@ -336,27 +365,39 @@ export default {
     margin-left: 30px;
     display: flex;
     flex-direction: column;
-    .ft{
+    .ft {
       object-fit: contain;
       width: 300px !important;
     }
   }
 }
-.rightBox{
-  color: #ffffff;
-  font-size: 24px;
-  line-height: 10px;
-
-  .time{
-    font-size: 60px;
-    margin-right: 20px;
-  }
-  .day{
-    font-size: 20px;
-  }
-}
-.hui{
+.hui {
   width: 65px !important;
   height: 65px !important;
 }
+
+.el-login-footer {
+  .rightBox {
+    display: flex;
+        margin-left: -30%;
+    flex: 1;
+    justify-content: space-evenly;
+    align-items: center;
+    img {
+      // object-fit: none;
+      width: auto;
+      height: 200px;
+      margin-left: -333px;
+    }
+    span {
+      font-size: 22px;
+    line-height: 30px;
+    margin-left: 15px;
+    }
+    .time{
+      font-size:65px;
+    }
+    color: #ffffff;
+  }
+}
 </style>