feat: 登录页

src/style/login.css

@@ -1,12 +1,17 @@
 .wave {
   position: fixed;
   height: 100%;
-  width: 100%;
+  width: 60%;
   left: 0;
   bottom: 0;
   z-index: -1;
 }
-
+.wave-logo {
+  height: 40px;
+  position: absolute;
+  top: 5%;
+  left: 5%;
+}
 .login-container {
   width: 100vw;
   height: 100vh;
@@ -32,6 +37,7 @@
   align-items: center;
   text-align: center;
   overflow: hidden;
+  margin-left: 25%;
 }
 
 .login-form {
@@ -46,13 +52,18 @@
 .login-form h2 {
   text-transform: uppercase;
   margin: 15px 0;
-  color: #999;
+  /* color: #999; */
   font:
     bold 200% Consolas,
     Monaco,
     monospace;
 }
-
+.logo-box-form {
+  /* position: absolute;
+  top: 50%;
+  left: 60%;
+  transform: translate(-50%, -50%); */
+}
 @media screen and (max-width: 1180px) {
   .login-container {
     grid-gap: 9rem;

src/views/login/index.vue

@@ -78,6 +78,7 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="select-none">
+    <img src="@/assets/login/logo.png" class="wave-logo" />
     <img :src="bg" class="wave" />
     <!-- 主题 -->
     <!-- <div class="flex-c absolute right-5 top-3">
@@ -91,81 +92,74 @@ onBeforeUnmount(() => {
     </div> -->
     <div class="login-container">
       <div class="img">
-        <el-card style="max-width: 600px">
-          <template #header>
-            <div class="card-header">
-              <h4 class="text-center">账号登录</h4>
-            </div>
-          </template>
-          <el-form
-            ref="ruleFormRef"
-            :model="ruleForm"
-            :rules="loginRules"
-            size="large"
-          >
-            <Motion :delay="100">
-              <el-form-item
-                :rules="[
-                  {
-                    required: true,
-                    message: '请输入账号',
-                    trigger: 'blur'
-                  }
-                ]"
-                prop="username"
-              >
-                <el-input
-                  v-model="ruleForm.username"
-                  clearable
-                  placeholder="账号"
-                  :prefix-icon="useRenderIcon(User)"
-                />
-              </el-form-item>
-            </Motion>
-
-            <Motion :delay="150">
-              <el-form-item prop="password">
-                <el-input
-                  v-model="ruleForm.password"
-                  clearable
-                  show-password
-                  placeholder="密码"
-                  :prefix-icon="useRenderIcon(Lock)"
-                />
-              </el-form-item>
-            </Motion>
-
-            <Motion :delay="250">
-              <el-button
-                class="w-full mt-4"
-                size="default"
-                type="primary"
-                :loading="loading"
-                @click="onLogin(ruleFormRef)"
-              >
-                登录
-              </el-button>
-            </Motion>
-          </el-form>
-          <template #footer>
-            <div class="text-center gongshi">
-              <p>提供商：浙江易视通联信息科技有限公司</p>
-              <p>
-                备案号：浙ICP备17054630号-6<span class="ml-3"
-                  >版本号：v0.2.1</span
-                >
-              </p>
-            </div>
-          </template>
-        </el-card>
+        <!--  -->
       </div>
       <div class="login-box">
         <div class="login-form">
-          <!-- <avatar class="avatar" /> -->
-          <Motion>
-            <!-- <h2 class="outline-none">{{ title }}</h2> -->
-          </Motion>
-
+          <avatar class="avatar" />
+          <div class="logo-box-form">
+            <Motion>
+              <!-- <h2 class="outline-none">{{ title }}</h2> -->
+              <h2 class="">您好，欢迎登录！</h2>
+            </Motion>
+            <el-card style="max-width: 1200px">
+              <template #header>
+                <div class="card-header">
+                  <h4 class="text-center">账号登录</h4>
+                </div>
+              </template>
+              <el-form
+                ref="ruleFormRef"
+                :model="ruleForm"
+                :rules="loginRules"
+                size="large"
+              >
+                <Motion :delay="100">
+                  <el-form-item
+                    :rules="[
+                      {
+                        required: true,
+                        message: '请输入账号',
+                        trigger: 'blur'
+                      }
+                    ]"
+                    prop="username"
+                  >
+                    <el-input
+                      v-model="ruleForm.username"
+                      clearable
+                      placeholder="账号"
+                      :prefix-icon="useRenderIcon(User)"
+                    />
+                  </el-form-item>
+                </Motion>
+
+                <Motion :delay="150">
+                  <el-form-item prop="password">
+                    <el-input
+                      v-model="ruleForm.password"
+                      clearable
+                      show-password
+                      placeholder="密码"
+                      :prefix-icon="useRenderIcon(Lock)"
+                    />
+                  </el-form-item>
+                </Motion>
+
+                <Motion :delay="250">
+                  <el-button
+                    class="w-full mt-4"
+                    size="default"
+                    type="primary"
+                    :loading="loading"
+                    @click="onLogin(ruleFormRef)"
+                  >
+                    登录
+                  </el-button>
+                </Motion>
+              </el-form>
+            </el-card>
+          </div>
           <!-- <el-form
             ref="ruleFormRef"
             :model="ruleForm"