feat: 大致完成登录

src/enums/HeaderTypeEnum.ts

@@ -0,0 +1,4 @@
+export const HeaderTypeEnum = {
+  default: 'default',
+  subtitle: 'subtitle',
+};

src/layout/index.vue

@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router';
 
 import CommonHeader from '@/components/CommonHeader/CommonHeader.vue';
 import LayoutHeader from '@/components/CommonHeader/LayoutHeader.vue';
+import { HeaderTypeEnum } from '@/enums/HeaderTypeEnum';
 import { useAppStore } from '@/store/app';
 
 const router = useRouter();
@@ -17,7 +18,8 @@ onBeforeMount(() => {
 
 <template>
   <div :style="{ background: appStore.background }" class="layout-container">
-    <layout-header v-if="route.name === 'welcome'" />
+    <layout-header v-if="route.meta.headerType === HeaderTypeEnum.default" />
+    <common-header v-else-if="route.meta.headerType === 'subtitle'" />
     <common-header v-else />
 
     <main>

src/router/modules/home.ts

@@ -1,3 +1,4 @@
+import { HeaderTypeEnum } from '@/enums/HeaderTypeEnum';
 import type { RouteConfigsTable } from '@/types/router/Route';
 
 const routes: RouteConfigsTable[] = [
@@ -5,25 +6,37 @@ const routes: RouteConfigsTable[] = [
     path: '/welcome',
     name: 'welcome',
     component: () => import('@/views/welcome/index.vue'),
-    meta: { transition: 'fade', title: '后台管理系统大标题' },
+    meta: { transition: 'fade', title: '后台管理系统大标题', headerType: HeaderTypeEnum.default },
   },
   {
     path: '/smart-park',
     name: 'smartPark',
     component: () => import('@/views/smart-park/index.vue'),
-    meta: { title: '智慧智能监管中心', subtitle: '车辆监控中心' },
+    meta: {
+      title: '智慧智能监管中心',
+      subtitle: '车辆监控中心',
+      headerType: HeaderTypeEnum.subtitle,
+    },
   },
   {
     path: '/business-supervision',
     name: 'businessSupervision',
     component: () => import('@/views/business-supervision/index.vue'),
-    meta: { title: '智慧经营监管中心', subtitle: '园区经营可视化' },
+    meta: {
+      title: '智慧经营监管中心',
+      subtitle: '园区经营可视化',
+      headerType: HeaderTypeEnum.subtitle,
+    },
   },
   {
     path: '/big-data',
     name: 'bigData',
     component: () => import('@/views/big-data/index.vue'),
-    meta: { title: '大数据可视化中心', subtitle: '大数据可视化' },
+    meta: {
+      title: '大数据可视化中心',
+      subtitle: '大数据可视化',
+      headerType: HeaderTypeEnum.subtitle,
+    },
   },
 ];
 

src/router/modules/remaining.ts

@@ -25,6 +25,12 @@ const routes: RouteRecordRaw[] | RouteConfigsTable[] = [
       },
     ],
   },
+  {
+    path: '/login',
+    name: 'login',
+    component: () => import('@/views/login/index.vue'),
+    meta: { title: '登录后台系统' },
+  },
   {
     path: '/redirect',
     component: Layout,

src/types/router/Route.ts

@@ -8,6 +8,8 @@ interface CustomizeRouteMeta {
   subtitle?: string;
   transition?: string;
   hidden?: boolean;
+  /* 头部类型 */
+  headerType?: any;
 }
 
 /**

src/views/big-data/components/big-data-right/components/right-bottom.vue

@@ -3,6 +3,12 @@ const list = [
   { title: '134.5㎡', summary: '建成投产面积' },
   { title: '38000㎡', summary: '保税仓库面积' },
   { title: '327.3㎡', summary: '物流场站' },
+  { title: '327.3㎡', summary: '物流场站' },
+  { title: '327.3㎡', summary: '物流场站' },
+  { title: '327.3㎡', summary: '物流场站' },
+  { title: '327.3㎡', summary: '物流场站' },
+  { title: '327.3㎡', summary: '物流场站' },
+  { title: '327.3㎡', summary: '物流场站' },
 ];
 </script>
 
@@ -24,12 +30,12 @@ const list = [
 <style lang="scss" scoped>
 .big-data__sidebar-item {
   width: 100%;
-  height: 166px;
 
   .big-data__sidebar-card {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
     justify-content: center;
-    margin: 19px 0;
+    margin: 19px 0 0 0;
     width: 100%;
   }
 }
@@ -40,7 +46,7 @@ li {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin: 0 24px 0 0;
+  margin: 0 24px 14px 0;
   width: 144px;
   height: 83px;
   background: url('@/assets/images/big-data/bg/bg-right-bottom.png') no-repeat center;

src/views/login/index.vue

@@ -0,0 +1,184 @@
+<script lang="ts" setup>
+import { onBeforeMount, ref } from 'vue';
+
+import LayoutHeader from '@/components/CommonHeader/LayoutHeader.vue';
+import { useAppStore } from '@/store/app';
+
+const appStore = useAppStore();
+
+const isViewPassword = ref(false);
+
+onBeforeMount(() => {
+  appStore.setBackground('/images/common/bg/bg-layout.png');
+});
+</script>
+
+<template>
+  <div :style="{ background: appStore.background }" class="layout-container">
+    <layout-header />
+
+    <div class="layout-content">
+      <div class="layout-content__inner">
+        <main>
+          <h1>欢迎登录</h1>
+
+          <div class="ipt-group">
+            <span>
+              <i class="i-heroicons-outline:user" />
+              <input maxlength="15" placeholder="请输入用户名" />
+            </span>
+            <span>
+              <i class="i-heroicons-outline:lock-closed" />
+              <input
+                :type="isViewPassword ? '' : 'password'"
+                maxlength="32"
+                placeholder="请输入密码"
+              />
+              <i
+                v-show="isViewPassword"
+                class="i-heroicons-outline:eye"
+                style="left: unset; right: 18px"
+                @click="isViewPassword = !isViewPassword"
+              />
+              <i
+                v-show="!isViewPassword"
+                class="i-heroicons-outline:eye-off"
+                style="left: unset; right: 18px"
+                @click="isViewPassword = !isViewPassword"
+              />
+            </span>
+          </div>
+
+          <div class="layout-content__inner-info">
+            <span>手机号登录</span>
+            <span>忘记密码</span>
+          </div>
+
+          <button>登录</button>
+        </main>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@keyframes btn-login {
+  0% {
+    border: 1px solid #a1c4fd;
+    background-image: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%);
+    background-position-x: 12%;
+    background-position-y: 6%;
+  }
+  100% {
+    border: 1px solid #a1c4fd;
+    background-image: linear-gradient(to right, #a1c4fd 100%, #c2e9fb 51%, #a1c4fd 0%);
+  }
+}
+
+.layout-container {
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat !important;
+  background-position: center !important;
+  background-size: cover !important;
+
+  .layout-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: calc(100vh - 108px);
+
+    &__inner {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 749px;
+      height: 578px;
+      background: url('@/assets/images/login/bg-login.png') no-repeat center;
+      background-size: cover;
+
+      &-info {
+        display: flex;
+        justify-content: space-between;
+        margin: 20px 0 0 0;
+        width: 100%;
+        color: var(--color-primary-secondary);
+        font-size: 14px;
+
+        span {
+          transition: all 0.4s;
+          cursor: pointer;
+        }
+
+        span:hover {
+          color: #a4ffff;
+        }
+      }
+    }
+  }
+
+  main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 305px;
+    height: 283px;
+    color: #fff;
+
+    h1 {
+      font-size: 37px;
+      text-align: center;
+    }
+
+    button {
+      width: 145px;
+      height: 60px;
+      margin: 0;
+      padding: 0;
+      font-size: 18px;
+      color: #beffff;
+      border: 1px solid #00142d;
+      border-radius: 9px;
+      transition: 0.5s;
+      background-image: linear-gradient(to right, #00142d 0%, #006bc5 51%, #00142d 100%);
+      background-size: 200% auto;
+
+      &:hover {
+        border: 1px solid #006bc5;
+        background-position: right center;
+      }
+    }
+  }
+
+  .ipt-group {
+    span {
+      display: block;
+      position: relative;
+
+      &:nth-child(2) {
+        margin: 20px 0 0 0;
+      }
+    }
+
+    i {
+      position: absolute;
+      top: 18px;
+      left: 23px;
+      font-size: 24px;
+      color: var(--color-primary-secondary);
+    }
+
+    input {
+      padding: 15px 43px 15px 65px;
+      width: 305px;
+      height: 60px;
+      font-size: 16px;
+      color: var(--color-primary-secondary);
+      outline: none;
+      background: url('@/assets/images/login/bg-login-btn.png') no-repeat center;
+      background-size: cover;
+    }
+  }
+}
+</style>