登陆页面上传

src/assets/styles/index.scss

@@ -259,3 +259,8 @@ aside {
   -moz-osx-font-smoothing: grayscale;
   display: inline-block; /* 添加这个属性 */
 }
+
+@font-face {
+  font-family: 'YSBTH';
+  src: url('../fonts/YSBTH.ttf');
+}
\ No newline at end of file

src/views/login.vue

 <template>
   <div class="login">
+    <div class="logo-box">
+      <img class="logo" src="@/assets/images/login/logo.png" alt="logo" />
+      <div class="tile">
+        <img class="icon" src="@/assets/images/login/icon.png" alt="icon" />
+        <div class="title">{{ title }}</div>
+      </div>
+    </div>
+    <div class="form-box">
       <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">{{ title }}</h3>
-      <el-form-item prop="username">
+        <div class="top">
+          <div>欢迎登录</div>
+          <div class="line"></div>
+        </div>
+        <el-form-item prop="username" style="margin-bottom: 38px;">
           <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
             <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
           </el-input>
@@ -29,8 +40,8 @@
           </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="large" type="primary" style="width:100%;" @click.prevent="handleLogin">
+        <el-form-item style="width:100%;margin-top:78px;">
+          <el-button :loading="loading" size="large" type="primary" class="login-btn" @click.prevent="handleLogin">
             <span v-if="!loading">登 录</span>
             <span v-else>登 录 中...</span>
           </el-button>
@@ -39,10 +50,11 @@
           </div>
         </el-form-item>
       </el-form>
+    </div>
     <!--  底部  -->
-    <div class="el-login-footer">
+    <!-- <div class="el-login-footer">
       <span>Copyright © 2018-2025 All Rights Reserved.</span>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -181,26 +193,73 @@ function getCookie() {
 <style lang='scss' scoped>
 .login {
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
+  background-image: url("../assets/images/login/background.jpg");
   background-size: cover;
+  padding-right: 14%;
+  .logo-box{
+    position: absolute;
+    top: 63px;
+    left: 49px;
+    display: flex;
+    align-items: center;
+    .logo{
+      margin-right: 40px;
+      width: 300px;
+      height: 47.04px;
+    }
+    .tile{
+      font-size: 36px;
+      font-weight: 400;
+      letter-spacing: 0px;
+      line-height: 46.8px;
+      color: rgba(51, 51, 51, 1);
+      display: flex;
+      align-items: center;
+      font-family: 'YSBTH';
+      .icon{
+        width: 40px;
+        height: 40px;
+        margin-right: 13px;
+      }
+    }
+  }
 }
-.title {
-  margin: 0px auto 30px auto;
-  text-align: center;
-  color: #707070;
+.form-box{
+  padding: 4px;
+  background: linear-gradient(90deg, rgba(176, 213, 255, 1) 0%, rgba(235, 235, 235, 1) 5.71%, rgba(255, 255, 255, 1) 100%);
+  border-radius: 15px;
 }
-
 .login-form {
-  border-radius: 6px;
-  // background: #ffffff;
-  background: #5b95d229;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
+  padding: 48px 70px 98px 70px;
+  box-sizing: border-box;
+  background: rgba(235, 245, 255, 0.65);
+  backdrop-filter: blur(10px);
+  border-radius: 15px;
+  overflow: hidden;
   z-index: 1;
+  .top{
+    font-size: 24px;
+    font-weight: 500;
+    letter-spacing: 0px;
+    line-height: 34.75px;
+    color: rgba(51, 51, 51, 1);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .line{
+      margin-top: 14px;
+      margin-bottom: 50px;
+      width: 50px;
+      height: 4px;
+      border-radius: 5px;
+      background: rgba(11, 136, 251, 1);
+    }
+  }
   .el-input {
+    width: 300px;
     height: 40px;
     input {
       height: 40px;
@@ -211,6 +270,13 @@ function getCookie() {
     width: 14px;
     margin-left: 0px;
   }
+  .login-btn{
+    width:100%;
+    height: 48px;
+    border-radius: 40px;
+    background: rgba(11, 136, 251, 1);
+    box-shadow: 0px 2px 19px  rgba(52, 120, 237, 0.36);
+  }
 }
 .login-tip {
   font-size: 13px;