登录页

psdc-ui/src/App.vue

@@ -20,4 +20,8 @@ onMounted(() => {
     padding: 0;
     box-sizing:border-box;
   }
+  body{
+    color: #f3ffff;
+    font-size: 14px;
+  }
 </style>

psdc-ui/src/views/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container home">
-    <h1>这是能源控制页</h1>
+    <h1>首页</h1>
   </div>
 </template>
 

psdc-ui/src/views/login.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="login">
     <h2>电能替代分布式控制试验平台</h2>
+    <div class="loginBox">
+      <div class="dianzhui"></div>
       <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
         <h3 class="title">用户登录</h3>
         <el-form-item prop="username">
@@ -58,6 +60,9 @@
           </div>
         </el-form-item>
       </el-form>
+    </div>
+
+
     <!--  底部  -->
     <div class="el-login-footer">
 <!--      <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>-->
@@ -156,28 +161,39 @@ getCookie();
   height: 100%;
   background-image: url("../assets/images/bg.png");
   background-size: cover;
+  padding-top: 50px;
   h2{
     text-align: center;
     font-size: 36px;
     font-weight: bold;
     color: #AFEAFF;
-    margin:20px 0 50px 0;
+    margin:0px 0 50px 0;
   }
-}
-.title {
+  .loginBox{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    width: 400px;
+    .dianzhui{
+      width: 100%;
+      height: 20px;
+      background-image: url("../assets/images/1.png");
+      background-size: 100% 100%;
+      margin-bottom: 10px;
+    }
+    .login-form {
+      border-radius: 4px;
+      background-image: url("../assets/images/5.png");
+      background-size: 100% 100%;
+      padding: 25px 25px 5px 25px;
+      .title {
         font-size: 24px;
         font-weight: bold;
         margin: 0px auto 30px auto;
         text-align: center;
         color: #9BCDFF;
-}
-
-.login-form {
-  border-radius: 4px;
-  background-image: url("../assets/images/5.png");
-  background-size: 100% 100%;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
+      }
       .el-input {
         height: 40px;
         input {
@@ -189,6 +205,26 @@ getCookie();
         width: 14px;
         margin-left: 0px;
       }
+    }
+  }
+}
+
+::v-deep .el-input__prefix{
+  color: #1678C0;
+}
+::v-deep .el-input__inner{
+  color: #1678C0;
+}
+::v-deep .el-input__wrapper{
+  border: 1px solid #1678C0 !important;
+  border-radius: 5px;
+  background-color: #1B2553 !important;
+}
+::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
+  color: #9BCDFF;
+}
+::v-deep .el-button.el-button--primary.el-button--large{
+  background-image: linear-gradient(#339BF6,#336FF6);
 }
 .login-tip {
   font-size: 13px;