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/logo2.png" alt="" width="250" />
+      <img src="/src/assets/images/login/logo.png" alt="" width="500" />
-      </div>
+    </div>
     <div class="form">
-      <div class="title">欢迎登录！</div>
+      <div class="title">安全生产综合监管</div>
       <el-form
         ref="formRef"
         :model="form"
@@ -12,22 +12,31 @@
         @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>
@@ -37,9 +46,20 @@
           <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">
-      河北秦安安全科技股份有限公司 版权所有 Copy right 2013-2020-v7
+      ICP备案号： 冀ICP备15003849号 技术支持：河北秦安安全科技股份有限公司
     </div>
   </div>
 </template>
@@ -58,7 +78,6 @@ 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();
@@ -122,13 +141,10 @@ const fnSubmitLogin = async () => {
   width: 100%;
   background-color: #2d3a4b;
   overflow: hidden;
-  background-image: url(../../assets/images/login/bg2.png);
+  background-image: url(../../assets/images/login/bg.png);
   background-repeat: no-repeat;
-  background-size: 70% 100%;
+  background-size: 100% 100%;
-  float: left;
-  position: relative;
 }
-
 .login {
   width: 100%;
   max-width: 1920px;
@@ -138,21 +154,24 @@ const fnSubmitLogin = async () => {
   background-color: #fff;
 
   .logo {
-    top: 20px;
+    margin-top: 20px;
-    left: 20px;
+    margin-left: 20px;
-    position: absolute;
+    width: 100%;
+    pointer-events: none;
   }
 
   .form {
-    float: right;
+    border-radius: 5px;
-    padding-left: 100px;
+    box-shadow: 0 0 20px rgb(109 109 109 / 40%);
-    padding-right: 100px;
+    position: absolute;
-    padding-top: 150px;
+    right: 230px;
-    width: 30%;
+    top: 50%;
-    height: 100%;
+    transform: translateY(-50%);
-    //padding: 40px 50px;
+    width: 400px;
-    background-color: #d6def2;
+    height: 490px;
-    //z-index: 1;
+    padding: 40px 50px;
+    background-color: #fff;
+    z-index: 1;
 
     &:after {
       content: "";
@@ -212,13 +231,12 @@ const fnSubmitLogin = async () => {
     width: 100%;
     height: 80px;
     font-size: 14px;
-    color: white;
+    color: rgba(0, 0, 0, 0.5);
-    //color: rgba(0, 0, 0, 0.5);
     text-align: center;
     position: absolute;
     bottom: 0;
     left: 50%;
-    transform: translateX(-70%);
+    transform: translateX(-50%);
     z-index: 1;
     line-height: 80px;
   }