feat: 登录页面完成

.env.development

@@ -20,8 +20,8 @@ VITE_MOCK_DEV_SERVER=true
 VITE_STRICT_PORT=false
 
 # 是否启用屏幕转vw适配，可以选择 postcss-px-to-viewport-8-plugin || autofit
-#VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN="autofit"
+VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN="autofit"
-VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN="postcss-px-to-viewport-8-plugin"
+#VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN="postcss-px-to-viewport-8-plugin"
 
 # 是否在打包时使用cdn替换本地库 替换 true 不替换 false
 VITE_CDN=false

src/App.vue

@@ -9,7 +9,7 @@
 <style lang="scss">
 #app {
   width: 100%;
-  height: 1080px;
+  //height: 1080px;
-  //height: 100%;
+  height: 100%;
 }
 </style>

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/store/modules/login.ts

@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia';
+
+export const useLoginStore = defineStore('loginStore', {
+  state: () => ({
+    username: '',
+    password: '',
+    rememberMe: false,
+    isLoading: false,
+  }),
+  getters: {},
+  actions: {},
+});

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/components/login-header.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { useRoute, useRouter } from 'vue-router';
+
+const router = useRouter();
+const route = useRoute();
+</script>
+
+<template>
+  <header>
+    <div class="header-title">
+      <h1>{{ route.meta.title }}</h1>
+    </div>
+  </header>
+</template>
+
+<style lang="scss" scoped>
+.header-title {
+  width: 100%;
+  height: 108px;
+  background: url('@/assets/images/common/header/bg-layout-header.png') no-repeat center;
+  background-size: cover;
+
+  h1 {
+    color: #fff;
+    text-align: center;
+    line-height: 100px;
+    font-size: 42px;
+  }
+}
+</style>

src/views/login/index.vue

@@ -0,0 +1,197 @@
+<script lang="ts" setup>
+import { onBeforeMount, ref } from 'vue';
+
+import { useAppStore } from '@/store/app';
+import { useLoginStore } from '@/store/modules/login';
+import LoginHeader from '@/views/login/components/login-header.vue';
+
+const appStore = useAppStore();
+const loginStore = useLoginStore();
+const isViewPassword = ref(false);
+
+/* 显示密码 */
+const viewPasswordOnClick = () => {
+  isViewPassword.value = !isViewPassword.value;
+};
+
+/* 表单提交 */
+const onSubmit = () => {
+  console.log(666);
+};
+
+onBeforeMount(() => {
+  appStore.setBackground('/images/common/bg/bg-layout.png');
+});
+</script>
+
+<template>
+  <div :style="{ background: appStore.background }" class="layout-container">
+    <login-header />
+
+    <div class="layout-content">
+      <div class="layout-content__inner">
+        <form class="layout-content__form" @submit="onSubmit">
+          <h1>欢迎登录</h1>
+
+          <div class="layout-content__inner-input-group">
+            <span>
+              <i class="i-heroicons-outline:user" />
+              <input v-model="loginStore.username" maxlength="15" placeholder="请输入用户名" />
+            </span>
+            <span>
+              <i class="i-heroicons-outline:lock-closed" />
+              <input
+                v-model="loginStore.password"
+                :type="isViewPassword ? '' : 'password'"
+                maxlength="32"
+                placeholder="请输入密码"
+              />
+              <i
+                v-show="isViewPassword"
+                class="i-heroicons-outline:eye"
+                style="left: unset; right: 18px"
+                @click="viewPasswordOnClick"
+              />
+              <i
+                v-show="!isViewPassword"
+                class="i-heroicons-outline:eye-off"
+                style="left: unset; right: 18px"
+                @click="viewPasswordOnClick"
+              />
+            </span>
+          </div>
+
+          <div class="layout-content__inner-info">
+            <span class="flex-center">
+              <input id="rememberMe" v-model="loginStore.rememberMe" type="checkbox" />
+              <label class="ml-[4px]" for="rememberMe">记住我</label>
+            </span>
+          </div>
+
+          <button>登录</button>
+        </form>
+      </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;
+        }
+
+        span:hover {
+          color: #a4ffff;
+        }
+      }
+
+      &-input-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;
+        }
+      }
+    }
+
+    &__form {
+      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;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/welcome/components/welcome-content.vue

@@ -40,7 +40,7 @@ const list = [
 
   &-inner {
     margin: 156px 0 0 0;
-    animation: flipInY 1s 0.9s;
+    animation: flipInY 0.6s 0.4s;
   }
 
   p {