feat: 管理左侧完成部分

build/plugins.ts

@@ -1,7 +1,7 @@
 import UnoCssIcons from '@unocss/preset-icons';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
-import { presetIcons, presetUno } from 'unocss';
+import { presetIcons } from 'unocss';
 import UnoCSS from 'unocss/vite';
 import type { PluginOption } from 'vite';
 import { vitePluginFakeServer } from 'vite-plugin-fake-server';
@@ -37,7 +37,6 @@ export const plugins = (mode): PluginOption[] => {
             display: 'inline-block',
           },
         }),
-        presetUno(),
       ],
     }),
     compressPack(mode),

src/assets/styles/animations/src/transition.scss

@@ -53,14 +53,26 @@
   transition: var(--pure-transition-duration) all !important;
 }
 
-//.slide-enter-active,
+.slide-left-enter-active,
-//.slide-leave-active {
+.slide-left-leave-active {
-//  transition: opacity 0.3s,
+  transition: opacity 0.3s,
-//  transform 0.3s;
+  transform 0.3s;
-//}
+}
-//
+
-//.slide-enter-from,
+.slide-left-enter-from,
-//.slide-leave-to {
+.slide-left-leave-to {
-//  opacity: 0;
+  opacity: 0;
-//  transform: translateX(-30%);
+  transform: translateX(-30%);
-//}
+}
+
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: opacity 0.3s,
+  transform 0.3s;
+}
+
+.slide-right-enter-from,
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(30%);
+}

src/assets/styles/common/src/element.scss

@@ -17,4 +17,20 @@
   &:hover {
     color: var(--color-hover);
   }
+}
+
+.thin-line {
+  position: relative;
+}
+
+.thin-line::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 100%;
+  background-color: var(--color-primary-secondary);
+  transform: scaleX(0.8);
+  transform-origin: 0 0;
 }

src/assets/styles/global.scss

@@ -1,10 +1,12 @@
 @use "animations/animations";
 @use "common/common";
+@use "views/views";
 
 :root {
   --colot-primary: #027AFF;
   --color-primary-secondary: #00FFFF;
   --color-info: #7CC1FF;
+  --color-info-secondary: #707070;
   --color-hover: #1C8ADF;
   --color-warning: #FFBE44;
   --color-warning-secondary: #FEDB65;

src/assets/styles/views/src/manage-forms.scss

@@ -0,0 +1,30 @@
+.manage-forms {
+  padding: 19px 25px;
+  width: 100%;
+  height: 100%;
+
+  .manage-forms-slide {
+    width: 530px;
+    height: 100%;
+    color: #fff;
+  }
+
+  .common-bg {
+    padding: 10px 15px;
+    background: rgba(14, 95, 255, 0.2);
+  }
+
+  .title {
+    width: 172px;
+    height: 42px;
+    font-size: 22px;
+    color: #fff;
+    background: url('@/assets/images/bg/bg-frame-4.png') no-repeat;
+    background-size: cover;
+  }
+
+  .title-description {
+    font-size: 12px;
+    color: var(--color-info-secondary);
+  }
+}

src/assets/styles/views/views.scss

@@ -0,0 +1 @@
+@use "@/assets/styles/views/src/manage-forms";

src/router/index.ts

@@ -9,7 +9,7 @@ const routes: RouteRecordRaw[] = [...remaining, ...error];
 const router = createRouter({
   history: createWebHashHistory(),
   routes,
-  scrollBehavior: () => ({ top: 0, behavior: 'smooth' }),
+  scrollBehavior: () => ({ left: 0, top: 0, behavior: 'smooth' }),
 });
 
 /** 全局注册 router */
@@ -22,10 +22,4 @@ export const resetRouter = () => {
   router.replace({ path: '/' }).then();
 };
 
-// router.afterEach((to, from) => {
-//   const toDepth = to.path.split('/').length;
-//   const fromDepth = from.path.split('/').length;
-//   to.meta.transition = toDepth < fromDepth ? 'slide-right' : 'slide-left';
-// });
-
 export default router;

src/router/modules/home.ts

@@ -1,3 +1,4 @@
+import Layout from '@/layout/index.vue';
 import type { RouteConfigsTable } from '@/types/router/Route';
 
 const routes: RouteConfigsTable[] = [
@@ -7,6 +8,14 @@ const routes: RouteConfigsTable[] = [
     component: () => import('@/views/welcome/index.vue'),
     meta: { transition: 'fade', title: '后台管理系统大标题' },
   },
+
+  {
+    path: '/manage-forms',
+    name: 'manageForms',
+    component: () => import('@/views/manage-forms/index.vue'),
+    meta: { title: '智慧经营监管中心', subtitle: '园区经营可视化' },
+  },
+
   {
     path: '/smart-parking',
     name: 'smartParking',
@@ -14,10 +23,15 @@ const routes: RouteConfigsTable[] = [
     meta: { title: '智慧智能监管中心', subtitle: '车辆监控中心' },
   },
   {
-    path: '/manage-forms',
+    path: '/redirect',
-    name: 'manageForms',
+    component: Layout,
-    component: () => import('@/views/manage-forms/index.vue'),
+    meta: { hidden: true },
-    meta: { title: '智慧经营监管中心', subtitle: '园区经营可视化' },
+    children: [
+      {
+        path: '/redirect/:path(.*)',
+        component: () => import('@/views/redirect/index.vue'),
+      },
+    ],
   },
 ];
 

src/utils/digte-formatter.ts

@@ -0,0 +1,10 @@
+export function formatter(number) {
+  const numbers = number.toString().split('').reverse();
+  const segs = [];
+
+  while (numbers.length) segs.push(numbers.splice(0, 3).join(''));
+
+  return segs.join(',').split('').reverse().join('');
+}
+
+export default formatter;

src/views/manage-forms/components/manage-left/index.vue

@@ -1,42 +1,201 @@
-<script lang="ts" setup></script>
+<script lang="tsx" setup>
+import { ref } from 'vue';
+
+import formatter from '@/utils/digte-formatter';
+
+const money = ref('1386114');
+
+const displayContent = () => {
+  formatter(money);
+  return (
+    <>
+      <span>¥</span>
+      {money.value.split('').map((item, index) => (
+        <span key={index}>{item}</span>
+      ))}
+    </>
+  );
+};
+</script>
 
 <template>
-  <div class="manage-container flex-y-between">
+  <div class="manage-forms-slide flex-y-between">
-    <div class="money">
+    <div class="common-bg money">
-      <h1>园区进出口金额</h1>
+      <div class="title">
+        <h1>园区进出口额</h1>
+      </div>
+
+      <div class="money-digit">
+        <component :is="displayContent()" />
+      </div>
+
+      <div>
+        <div class="progress">111</div>
+        <ul class="import-export-value flex-x-between">
+          <li>
+            进口额
+            <i>¥1551154545</i>
+          </li>
+          <li class="thin-line h-[20px]" />
+          <li>
+            <i>¥1551154545</i>
+            出口额
+          </li>
+        </ul>
+      </div>
     </div>
 
-    <div class="enterprise-info">
+    <div class="enterprise-info common-bg">
-      <h1>园区进出口金额</h1>
+      <div class="flex-x-between">
+        <div class="title">
+          <h1>企业信息</h1>
+        </div>
+        <span class="title-description">截止时间至2021.12.30</span>
+      </div>
+
+      <ul>
+        <li>
+          <h1>报税金额</h1>
+          <p class="c-warning-secondary">¥1551154545</p>
+        </li>
+        <li>
+          <div class="flex-x-between">
+            <div>
+              <h1>企业数量</h1>
+              <p class="c-primary-secondary">783</p>
+            </div>
+            <div>111</div>
+          </div>
+          <div class="enterprise-type">
+            <span class="mr-[13px]">
+              <i class="bg-primary-secondary" />
+              国营企业 345
+            </span>
+            <span>
+              <i class="bg-warning-secondary" />
+              私营企业 345
+            </span>
+          </div>
+        </li>
+        <li>
+          <div class="flex-x-between">
+            <h1>总投资金额</h1>
+            <span class="font-size-[12px]">环比变化</span>
+            <span class="font-size-[12px]">+123%</span>
+          </div>
+          <p class="c-primary-secondary">¥1551154545</p>
+        </li>
+        <li>
+          <div class="flex-x-between">
+            <h1>税收总金额</h1>
+            <span class="font-size-[12px]">环比变化</span>
+            <span class="font-size-[12px]">-123%</span>
+          </div>
+          <p class="c-primary-secondary">¥1551154545</p>
+        </li>
+      </ul>
     </div>
 
-    <div class="plan">
+    <div class="common-bg plan">
-      <h1>园区进出口金额</h1>
+      <div class="flex-x-between">
+        <div class="title">
+          <h1>地理规划</h1>
+        </div>
+        <span class="title-description">截止时间至2021.12.30</span>
+      </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.manage-container {
+.money {
-  width: 530px;
+  width: 100%;
-  height: 100%;
+  height: 246px;
 
-  .money {
+  .money-digit {
-    width: 100%;
+    display: flex;
-    height: 246px;
+    justify-content: end;
-    background: mediumpurple;
+    margin: 26px 0 0 0;
+    color: var(--color-primary-secondary);
+    font-size: 45px;
+    text-align: center;
+
+    span {
+      float: left;
+      margin: 0 3.5px;
+      width: 49px;
+      height: 69px;
+      background: url('@/assets/images/bg/bg-count.png') no-repeat;
+      background-size: cover;
+    }
   }
 
-  .enterprise-info {
+  .progress {
-    width: 530px;
+    margin: 21px 0 0 0;
-    height: 354px;
-    background: mediumpurple;
   }
 
-  .plan {
+  .import-export-value {
-    width: 530px;
+    font-size: 18px;
-    height: 294px;
+
-    background: mediumpurple;
+    i {
+      font-style: normal;
+      font-size: 20px;
+      color: var(--color-primary-secondary);
+    }
   }
 }
+
+.enterprise-info {
+  padding: 10px 15px;
+  width: 530px;
+  height: 354px;
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-content: flex-start;
+    width: 100%;
+    height: 100%;
+
+    li {
+      //margin: 15px 0 0 0;
+      padding: 9px 16px 0 19px;
+      margin: 15px 0 0 0;
+      width: 242px;
+      height: 124px;
+      background: url('@/assets/images/manage-forms/frame-1.png') no-repeat center;
+      background-size: cover;
+
+      h1 {
+        margin: 0 0 2px 0;
+        font-size: 18px;
+      }
+
+      p {
+        font-size: 30px;
+      }
+    }
+
+    .enterprise-type {
+      width: 100%;
+
+      span {
+        font-size: 13px;
+      }
+
+      i {
+        display: inline-block;
+        width: 9px;
+        height: 9px;
+        border-radius: 50%;
+      }
+    }
+  }
+}
+
+.plan {
+  width: 530px;
+  height: 294px;
+}
 </style>

src/views/manage-forms/components/manage-right/index.vue

@@ -1,42 +1,40 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="manage-container flex-y-between">
+  <div class="manage-forms-slide flex-y-between">
-    <div class="money">
+    <div class="common-bg money">
-      <h1>园区进出口金额</h1>
+      <div class="title">
+        <h1>园区进出口额</h1>
+      </div>
     </div>
 
-    <div class="enterprise-info">
+    <div class="common-bg enterprise-info">
-      <h1>园区进出口金额</h1>
+      <div class="title">
+        <h1>园区进出口额</h1>
+      </div>
     </div>
 
-    <div class="plan">
+    <div class="common-bg plan">
-      <h1>园区进出口金额</h1>
+      <div class="title">
+        <h1>园区进出口额</h1>
+      </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.manage-container {
+.money {
+  width: 100%;
+  height: 246px;
+}
+
+.enterprise-info {
   width: 530px;
-  height: 100%;
+  height: 354px;
+}
 
-  .money {
+.plan {
-    width: 100%;
+  width: 530px;
-    height: 246px;
+  height: 294px;
-    background: mediumpurple;
-  }
-
-  .enterprise-info {
-    width: 530px;
-    height: 354px;
-    background: mediumpurple;
-  }
-
-  .plan {
-    width: 530px;
-    height: 294px;
-    background: mediumpurple;
-  }
 }
 </style>

src/views/manage-forms/index.vue

@@ -5,18 +5,9 @@ import ManageRight from '@/views/manage-forms/components/manage-right/index.vue'
 </script>
 
 <template>
-  <div class="manage flex-x-between">
+  <div class="manage-forms flex-x-between">
     <manage-left />
     <mange-content />
     <manage-right />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.manage {
-  padding: 19px 25px;
-  width: 100%;
-  height: 100%;
-  background: #20a0ff;
-}
-</style>

uno.config.ts

@@ -24,6 +24,7 @@ export default defineConfig({
       primary: '#027AFF',
       'primary-secondary': '#00FFFF',
       info: '#7CC1FF',
+      'info-secondary': '#707070',
       warning: '#FFBE44',
       'warning-secondary': '#FEDB65',
     },