首页

ruoyi-ui/src/views/login.vue

@@ -1,5 +1,28 @@
 <template>
-  <div class="login">
+  <div class="loginBox">
+    <div class="head">
+      <div class="doll">
+        <div class="leftBox">
+          <img 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>
+            <p>赴汤蹈火  竭诚为民</p>
+          </span>
+        </div>
+        <div class="rightBox">
+          <span class="time">{{ currentTime  }}</span>
+          <span class="day"> 
+            <p>{{ currentDayOfWeek }}</p> 
+            <p>{{ currentDate }}</p> 
+          </span>
+        </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">
@@ -56,9 +79,11 @@
     </el-form>
     <!--  底部  -->
     <div class="el-login-footer">
-      <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
+      <!-- <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span> -->
     </div>
   </div>
+  </div>
+  
 </template>
 
 <script>
@@ -92,7 +117,11 @@ export default {
       captchaEnabled: true,
       // 注册开关
       register: false,
-      redirect: undefined
+      redirect: undefined,
+      currentTime: '',  
+      currentDayOfWeek: '', 
+      currentDate: '' ,
+      timer:null,
     };
   },
   watch: {
@@ -106,6 +135,8 @@ export default {
   created() {
     this.getCode();
     this.getCookie();
+    this.getCurrentTime()
+    this.timer = setInterval(this.getCurrentTime, 1000);
   },
   methods: {
     getCode() {
@@ -150,19 +181,41 @@ export default {
           });
         }
       });
+    },
+
+    // 获取时间
+    getCurrentTime() {
+      const date = new Date();
+      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'); 
+      this.currentTime = `${hours}:${minutes}`;
+      this.currentDayOfWeek = dayOfWeek; 
+      this.currentDate = `${year}-${month}-${day}`; 
+    },
+    getDayOfWeek(day) {
+      const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+      return daysOfWeek[day];
     }
-  }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer); // 在组件销毁前清除定时器
+  },
 };
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
 .login {
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
-  height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
-  background-size: cover;
+  // height: 100%;
+
+  margin-top: 4%;
+    margin-right: 8%;
 }
 .title {
   margin: 0px auto 30px auto;
@@ -216,4 +269,77 @@ export default {
 .login-code-img {
   height: 38px;
 }
+
+
+.loginBox{
+  width: 100%;
+  height: 100%;
+
+  background-image: url("../assets/images/background.jpg");
+  background-size: 100% 100%;
+
+  .head{
+    height: 20%;
+    background: #056891;
+    .doll{
+      width: 85%;
+      height: 100%;
+      margin: auto;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .leftBox{
+        display: flex;
+        align-items: center;
+
+        img{
+          // object-fit: none;
+          width: 50px;
+          height: 50px;
+          margin-right: 15px;
+        }
+
+        color: #ffffff;
+      }
+      .rightBox{
+        display: flex;
+        align-items: center;
+
+
+      }
+    }
+  }
+}
+.leftBox {
+  .pChina{
+    display: table-row;
+    font-size: 40px;
+  }
+  .pEnglish{
+    display: table-row;
+    font-size: 13px;
+    letter-spacing: 1px;
+  }
+
+ .slogan{
+    font-size: 24px;
+    color: #ff6c00;
+    line-height: 10px;
+    font-weight: 500;
+    margin-left: 30px;
+  }
+}
+.rightBox{
+  color: #ffffff;
+  font-size: 24px;
+  line-height: 10px;
+
+  .time{
+    font-size: 60px;
+    margin-right: 20px;
+  }
+  .day{
+    font-size: 20px;
+  }
+}
 </style>