登录页

src/views/login/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="login login-container">
-    <div class="logo">
+      <div class="logo">
-      <img src="/src/assets/images/login/logo.png" alt="" width="500" />
+        <img src="/src/assets/images/login/logo2.png" alt="" width="250" />
-    </div>
+      </div>
     <div class="form">
-      <div class="title">安全生产综合监管</div>
+      <div class="title">欢迎登录！</div>
       <el-form
         ref="formRef"
         :model="form"
@@ -12,31 +12,22 @@
         @submit.prevent="fnLogin"
       >
         <el-form-item prop="username">
+          <label>账号</label>
           <el-input
             v-model="form.username"
             placeholder="请输入用户名"
             tabindex="1"
           >
-            <template #prepend>
-              <icon-people theme="filled" size="16" fill="#909399" />
-            </template>
           </el-input>
         </el-form-item>
         <el-form-item prop="password">
+          <label>密码</label>
           <el-input
             v-model="form.password"
             type="password"
             placeholder="请输入密码"
             tabindex="2"
           >
-            <template #prepend>
-              <icon-lock
-                theme="filled"
-                size="16"
-                fill="#909399"
-                :stroke-width="3"
-              />
-            </template>
           </el-input>
         </el-form-item>
         <el-form-item>
@@ -46,20 +37,9 @@
           <el-button native-type="submit">登录</el-button>
         </el-form-item>
       </el-form>
-      <div class="tips">
-        <div style="color: red; text-align: left">
-          本平台为互联网非涉密平台，严禁处理、传输国家秘密和工作秘密
-        </div>
-      </div>
-      <el-tooltip effect="dark" placement="bottom">
-        <template #content>
-          <img :src="appPath.value" alt="" width="180" height="180" />
-        </template>
-        <div class="tooltip" style="margin-top: 10px">监管端APP下载</div>
-      </el-tooltip>
     </div>
     <div class="footer">
-      ICP备案号： 冀ICP备15003849号 技术支持：河北秦安安全科技股份有限公司
+      河北秦安安全科技股份有限公司 版权所有 Copy right 2013-2020-v7
     </div>
   </div>
 </template>
@@ -78,6 +58,7 @@ import { ElMessage } from "element-plus";
 import { useQRCode } from "@vueuse/integrations/useQRCode";
 import { getFileUrl } from "@/assets/js/utils.js";
 
+
 const userStore = useUserStore();
 const router = useRouter();
 const { formRef, validate } = useForm();
@@ -141,10 +122,13 @@ const fnSubmitLogin = async () => {
   width: 100%;
   background-color: #2d3a4b;
   overflow: hidden;
-  background-image: url(../../assets/images/login/bg.png);
+  background-image: url(../../assets/images/login/bg2.png);
   background-repeat: no-repeat;
-  background-size: 100% 100%;
+  background-size: 70% 100%;
+  float: left;
+  position: relative;
 }
+
 .login {
   width: 100%;
   max-width: 1920px;
@@ -154,24 +138,21 @@ const fnSubmitLogin = async () => {
   background-color: #fff;
 
   .logo {
-    margin-top: 20px;
+    top: 20px;
-    margin-left: 20px;
+    left: 20px;
-    width: 100%;
+    position: absolute;
-    pointer-events: none;
   }
 
   .form {
-    border-radius: 5px;
+    float: right;
-    box-shadow: 0 0 20px rgb(109 109 109 / 40%);
+    padding-left: 100px;
-    position: absolute;
+    padding-right: 100px;
-    right: 230px;
+    padding-top: 150px;
-    top: 50%;
+    width: 30%;
-    transform: translateY(-50%);
+    height: 100%;
-    width: 400px;
+    //padding: 40px 50px;
-    height: 490px;
+    background-color: #d6def2;
-    padding: 40px 50px;
+    //z-index: 1;
-    background-color: #fff;
-    z-index: 1;
 
     &:after {
       content: "";
@@ -231,12 +212,13 @@ const fnSubmitLogin = async () => {
     width: 100%;
     height: 80px;
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.5);
+    color: white;
+    //color: rgba(0, 0, 0, 0.5);
     text-align: center;
     position: absolute;
     bottom: 0;
     left: 50%;
-    transform: translateX(-50%);
+    transform: translateX(-70%);
     z-index: 1;
     line-height: 80px;
   }