.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

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

src/layout/index.vue

@@ -4,7 +4,6 @@ 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();
@@ -18,8 +17,7 @@ onBeforeMount(() => {
 
 <template>
   <div :style="{ background: appStore.background }" class="layout-container">
-    <layout-header v-if="route.meta.headerType === HeaderTypeEnum.default" />
+    <layout-header v-if="route.name === 'welcome'" />
-    <common-header v-else-if="route.meta.headerType === 'subtitle'" />
     <common-header v-else />
 
     <main>

src/router/modules/home.ts

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

src/router/modules/remaining.ts

@@ -25,12 +25,6 @@ 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

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

src/types/router/Route.ts

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

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

@@ -3,12 +3,6 @@ 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>
 
@@ -30,12 +24,12 @@ const list = [
 <style lang="scss" scoped>
 .big-data__sidebar-item {
   width: 100%;
+  height: 166px;
 
   .big-data__sidebar-card {
-    display: grid;
+    display: flex;
-    grid-template-columns: 1fr 1fr 1fr;
     justify-content: center;
-    margin: 19px 0 0 0;
+    margin: 19px 0;
     width: 100%;
   }
 }
@@ -46,7 +40,7 @@ li {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin: 0 24px 14px 0;
+  margin: 0 24px 0 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

@@ -1,30 +0,0 @@
-<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

@@ -1,197 +0,0 @@
-<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 0.6s 0.4s;
+    animation: flipInY 1s 0.9s;
   }
 
   p {