登录页和首页样式

src/views/index.vue

 <template>
   <div class="app-container">
-    首页
+    <div class="home">
+      <el-card class="margin-bottom-small">
+        <div style="margin-left: 23%">
+          <!--        <img src="@/assets/images/welcome.png" alt="welcome" />-->
+          <img src="@/assets/images/index-barder.png" alt="welcome" />
+        </div>
+      </el-card>
+    </div>
   </div>
 </template>
 
@@ -15,5 +22,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.home {
+  background: #efefef;
+  height: calc(100vh - 84px);
+  padding-bottom: 50px;
+}
 
+.margin-bottom-small {
+  margin-bottom: 25px;
+}
 </style>

src/views/login.vue

 <template>
   <div class="login">
+    <!-- 页面的名称 -->
+    <img class="loginTitleStyle" src="../assets/images/login-title.png" alt="">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">薪瑞通</h3>
+      <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" />
@@ -14,7 +16,7 @@
         </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%"
+        <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>
@@ -22,7 +24,7 @@
           <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-checkbox v-model="loginForm.rememberMe" style="margin:12px 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">
@@ -36,7 +38,7 @@
     </el-form>
     <!--  底部  -->
     <div class="el-login-footer">
-      <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
+      <span></span>
     </div>
   </div>
 </template>
@@ -141,21 +143,33 @@ 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;
+  position: relative;
+
+  .loginTitleStyle {
+    position: absolute;
+    left: 8vw;
+    top: 9vh;
+    width: 200px;
+    height: 45px;
+  }
 }
 
 .title {
-  margin: 0px auto 30px auto;
-  text-align: center;
-  color: #707070;
+  margin-bottom: 30px;
+  // text-align: center;
+  color: #000;
+  font-weight: 500;
 }
 
 .login-form {
+  margin-top: 50px;
+  margin-left: 35vw;
   border-radius: 6px;
   background: #ffffff;
   width: 400px;
-  padding: 25px 25px 5px 25px;
+  padding: 35px 45px 25px 35px;
 
   .el-input {
     height: 38px;

src/views/register.vue

@@ -131,7 +131,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;
 }