登录页

Report-V3-TS/src/config/website.config.ts

@@ -5,5 +5,5 @@ export const websiteConfig = Object.freeze({
   title: 'Report',
   logo: logoImage,
   loginImage: loginImage,
-  loginDesc: 'Report 拖拽数据大屏',
+  loginDesc: 'Report数据大屏',
 });

Report-V3-TS/src/store/modules/user.ts

@@ -3,7 +3,6 @@ import { store } from '@/store';
 import { ACCESS_TOKEN, CURRENT_USER, IS_SCREENLOCKED } from '@/store/mutation-types';
 import { ResultEnum } from '@/enums/httpEnum';
 
-// import { getUserInfo as getUserInfoApi, login } from '@/api/system/user';
 import { login } from '@/api/login/index';
 import { storage } from '@/utils/Storage';
 

Report-V3-TS/src/views/login/index.vue

@@ -1,46 +1,57 @@
 <template>
   <div class="view-account">
-    <div class="view-account-header"></div>
-    <div class="view-account-container">
-      <div class="view-account-top">
-        <div class="view-account-top-logo">
-          <img :src="websiteConfig.loginImage" alt="" />
+    <div class="view-account-header">
+      <div class="view-account-header-left">
+        <div class="view-account-header-left-logo">
+          <img src="@/assets/imgs/logo-dp.png" alt="" />
+        </div>
+        <div class="view-account-header-left-desc">{{ websiteConfig.loginDesc }}</div>
+      </div>
+      <div class="view-account-header-right">
+        <div class="view-account-header-right-item" v-for="(item, index) in docs" :key="index">
+          <a :href="item.href" target="_blank">{{ item.name }}</a>
         </div>
-        <div class="view-account-top-desc">{{ websiteConfig.loginDesc }}</div>
       </div>
-      <div class="view-account-form">
-        <n-form ref="formRef" label-placement="left" size="large" :model="formInline" :rules="rules">
-          <n-form-item path="loginName">
-            <n-input v-model:value="formInline.loginName" placeholder="请输入用户名">
-              <template #prefix>
-                <n-icon size="18" color="#808695">
-                  <PersonOutline />
-                </n-icon>
-              </template>
-            </n-input>
-          </n-form-item>
-          <n-form-item path="password">
-            <n-input v-model:value="formInline.password" type="password" showPasswordOn="click" placeholder="请输入密码">
-              <template #prefix>
-                <n-icon size="18" color="#808695">
-                  <LockClosedOutline />
-                </n-icon>
-              </template>
-            </n-input>
-          </n-form-item>
-          <n-form-item class="default-color">
-            <div class="flex justify-between">
-              <div class="flex-initial">
-                <n-checkbox v-model:checked="autoLogin">记住密码</n-checkbox>
+    </div>
+    <div class="view-account-container">
+      <div class="view-account-box">
+          <div class="view-account-top">
+          <div class="view-account-top-desc">{{ websiteConfig.loginDesc }}</div>
+        </div>
+        <div class="view-account-form">
+          <n-form ref="formRef" label-placement="left" size="large" :model="formInline" :rules="rules">
+            <n-form-item path="loginName">
+              <n-input v-model:value="formInline.loginName" placeholder="请输入用户名">
+                <template #prefix>
+                  <n-icon size="18" color="#808695">
+                    <PersonOutline />
+                  </n-icon>
+                </template>
+              </n-input>
+            </n-form-item>
+            <n-form-item path="password">
+              <n-input v-model:value="formInline.password" type="password" showPasswordOn="click" placeholder="请输入密码">
+                <template #prefix>
+                  <n-icon size="18" color="#808695">
+                    <LockClosedOutline />
+                  </n-icon>
+                </template>
+              </n-input>
+            </n-form-item>
+            <n-form-item class="default-color">
+              <div class="flex justify-between">
+                <div class="flex-initial">
+                  <n-checkbox v-model:checked="autoLogin">记住密码</n-checkbox>
+                </div>
               </div>
-            </div>
-          </n-form-item>
-          <n-form-item>
-            <n-button type="primary" @click="handleSubmit" size="large" :loading="loading" block>
-              登录
-            </n-button>
-          </n-form-item>
-        </n-form>
+            </n-form-item>
+            <n-form-item>
+              <n-button type="primary" @click="handleSubmit" size="large" :loading="loading" block>
+                登录
+              </n-button>
+            </n-form-item>
+          </n-form>
+        </div>
       </div>
     </div>
   </div>
@@ -60,6 +71,20 @@ interface FormState {
   loginName: string;
   password: string;
 }
+interface Docs {
+  name: string;
+  href: string;
+}
+const docs = reactive<Docs[]>([
+  {
+    name: '文档',
+    href: 'https://ajreport.beliefteam.cn/report-doc/'
+  },
+  {
+    name: '社区',
+    href: 'https://gitee.com/anji-plus/report'
+  }
+])
 
 const formRef = ref();
 const message = useMessage();
@@ -123,22 +148,73 @@ const handleSubmit = (e) => {
   flex-direction: column;
   height: 100vh;
   overflow: auto;
-
+  &-header {
+    height: 60px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 10px 60px;
+    box-sizing: border-box;
+    &-left {
+      display: flex;
+      align-items: center;
+      padding-left: 24px;
+      &-logo {
+        width: 40px;
+        height: 40px;
+        margin-right: 10px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      &-desc {
+        font-size: 20px;
+        font-weight: bold;
+      }
+    }
+    &-right {
+      display: flex;
+      align-items: center;
+      &-item {
+        margin-left: 40px;
+        a {
+          color: #1a1a1a;
+          font-size: 16px;
+          &:hover{
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+  }
   &-container {
-    flex: 1;
-    padding: 32px 12px;
-    max-width: 384px;
-    min-width: 320px;
-    margin: 0 auto;
+    width: 100%;
+    height: calc(100vh - 60px);
+    background: url('@/assets/imgs/login.jpg') no-repeat;
+    background-size: cover;
+    position: relative;
+  }
+  &-box {
+    position: absolute;
+    top: 50%;
+    right: 30%;
+    -webkit-transform: translate(50%, -50%);
+    transform: translate(50%, -50%);
+    min-width: 400px;
+    width: 22%;
+    background-color: #ffffff;
+    border-radius: 11px;
+    padding: 30px;
+    overflow: hidden;
   }
-
   &-top {
     padding: 32px 0;
     text-align: center;
 
     &-desc {
-      font-size: 14px;
-      color: #808695;
+      font-size: 24px;
+      color: #1a1a1a;
     }
   }
 
@@ -155,16 +231,4 @@ const handleSubmit = (e) => {
   }
 }
 
-@media (min-width: 768px) {
-  .view-account {
-    background-image: url('../../assets/images/login.svg');
-    background-repeat: no-repeat;
-    background-position: 50%;
-    background-size: 100%;
-  }
-
-  .page-account-container {
-    padding: 32px 0 24px 0;
-  }
-}
 </style>