✨ feat: 中间图表未完成

mock/community.ts

@@ -0,0 +1,46 @@
+import { defineFakeRoute } from 'vite-plugin-fake-server/client';
+
+const randomNumber = (range: number = 100) => {
+  return parseInt((Math.random() * range).toFixed(0));
+};
+
+export default defineFakeRoute([
+  {
+    url: '/api/community/community-statistics',
+    method: 'GET',
+    response: () => ({
+      code: 200,
+      data: [
+        {
+          name: '统计人口',
+          total: randomNumber(9999),
+          subtitle: '常驻人口',
+          subPercent: `${randomNumber()}%`,
+          subTotal: randomNumber(99999),
+        },
+        {
+          name: '统计人口',
+          total: randomNumber(9999),
+          subtitle: '常驻人口',
+          subPercent: `${randomNumber()}%`,
+          subTotal: randomNumber(99999),
+        },
+        {
+          name: '统计人口',
+          total: randomNumber(9999),
+          subtitle: '常驻人口',
+          subPercent: `${randomNumber()}%`,
+          subTotal: randomNumber(99999),
+        },
+        {
+          name: '统计人口',
+          total: randomNumber(9999),
+          subtitle: '常驻人口',
+          subPercent: `${randomNumber()}%`,
+          subTotal: randomNumber(99999),
+        },
+      ],
+      message: '操作成功',
+    }),
+  },
+]);

src/App.vue

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

src/api/community.ts

@@ -0,0 +1,6 @@
+import request from '@/api/server/request';
+
+/* 社区统计 */
+export const getCommunityStatistics = () => {
+  return request.get('community/community-statistics');
+};

src/api/server/request.ts

@@ -34,22 +34,22 @@ service.interceptors.response.use(
     if (response.config.responseType === 'blob' || response.config.responseType === 'arraybuffer') {
       return response;
     }
-    // const { code, data, msg } = response.data;
+    const { code, data, message } = response.data;
-    // if (code === ResultEnum.SUCCESS) {
+    if (code === 200) {
-    //   return data;
+      return data;
-    // }
+    }
 
     if (response.status === 200) {
       return response.data;
     }
 
     // ElMessage.error(msg || '系统出错');
-    return Promise.reject(response.data.message || 'Error');
+    return Promise.reject(message || 'Error');
   },
   (error: any) => {
     // 异常处理
     if (error.response.data) {
-      // const { code, msg } = error.response.data;
+      // const { code, message } = error.response.data;
       // if (code === ResultEnum.TOKEN_INVALID) {
       // ElNotification({
       //   title: '提示',

src/api/server/requestMock.ts

@@ -34,10 +34,10 @@ service.interceptors.response.use(
     if (response.config.responseType === 'blob' || response.config.responseType === 'arraybuffer') {
       return response;
     }
-    // const { code, data, msg } = response.data;
+    const { code, data, msg } = response.data;
-    // if (code === ResultEnum.SUCCESS) {
+    if (code === 200) {
-    //   return data;
+      return data;
-    // }
+    }
 
     if (response.status === 200) {
       return response.data;

src/assets/styles/global.scss

@@ -4,6 +4,7 @@
 :root {
   --color-primary: #027AFF;
   --color-primary-1: #4F94E6;
+  --color-primary-2: #32C5FF;
   --color-primary-secondary: #00FFFF;
   --color-primary-secondary-1: #00FFFFB5;
   --color-success: #44D7B6;

src/assets/styles/minix/sidebar.scss

@@ -33,7 +33,7 @@
       height: 42px;
       font-size: 22px;
       color: #fff;
-      background: url('@/assets/images/business-supervision/bg/sidebar/bg-frame-4.png') no-repeat;
+      background: url('@/assets/images/common/bg/bg-frame-4.png') no-repeat;
       background-size: cover;
     }
 

src/components/DigitalNumber/DigitalNumber.tsx

@@ -0,0 +1,31 @@
+import { defineComponent } from 'vue-demi';
+
+import { formatter } from '@/utils/chart';
+
+/** 显示数字 */
+export default defineComponent({
+  name: 'DigitalNumber',
+  props: {
+    money: Number,
+    separator: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const moneyString: string = props.separator ? formatter(props.money) : props.money.toString();
+    const moneyStringList = moneyString
+      .split(/(\d,)/g)
+      .filter((item) => item !== '')
+      .map((item) => (!item.includes(',') ? item.split('') : item))
+      .flat();
+
+    return () => (
+      <>
+        {moneyStringList.map((item, index) => (
+          <span key={index}>{item}</span>
+        ))}
+      </>
+    );
+  },
+});

src/components/TimeSelect/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
+import { TimeSelectType } from '@/components/TimeSelect/type';
 
 defineProps({
   timeList: Array<TimeSelectType>,

src/layout/index.vue

@@ -2,9 +2,9 @@
 import { onBeforeMount } from 'vue';
 import { useRoute } from 'vue-router';
 
-import CommonHeader from '@/components/CommonHeader/CommonHeader.vue';
-import LayoutHeader from '@/components/CommonHeader/LayoutHeader.vue';
 import { HeaderTypeEnum } from '@/enums/HeaderTypeEnum';
+import LayoutHeaderCommon from '@/layout/layout-header/components/LayoutHeaderCommon.vue';
+import LayoutHeaderHome from '@/layout/layout-header/components/LayoutHeaderHome.vue';
 import { useAppStore } from '@/store/app';
 
 const route = useRoute();
@@ -17,9 +17,9 @@ onBeforeMount(() => {
 
 <template>
   <div :style="{ background: appStore.background }" class="layout-container">
-    <layout-header v-if="route.meta.headerType === HeaderTypeEnum.default" />
+    <layout-header-home v-if="route.meta.headerType === HeaderTypeEnum.default" />
-    <common-header v-else-if="route.meta.headerType === 'subtitle'" />
+    <layout-header-common v-else-if="route.meta.headerType === 'subtitle'" />
-    <common-header v-else />
+    <layout-header-common v-else />
 
     <main>
       <router-view />

src/layout/layout-header/components/LayoutHeaderCommon.vue

@@ -2,7 +2,7 @@
 import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import BarOp from '@/components/CommonHeader/HeaderBarOp.vue';
+import LayoutHeaderNav from '@/layout/layout-header/components/LayoutHeaderNav.vue';
 import dayjs from '@/plugins/dayjs';
 import { resetRouter } from '@/router';
 
@@ -34,13 +34,13 @@ onMounted(() => {
       <img
         alt="icon-setting"
         class="ml-[-284px]"
-        src="@/assets/images/common/icon/icon-home.png"
+        src="../images/icon/icon-home.png"
         @click="resetRouter()"
       />
-      <img alt="icon-home" class="ml-[284px]" src="@/assets/images/common/icon/icon-setting.png" />
+      <img alt="icon-home" class="ml-[284px]" src="../images/icon/icon-setting.png" />
     </div>
 
-    <BarOp />
+    <LayoutHeaderNav />
   </header>
 </template>
 
@@ -48,7 +48,7 @@ onMounted(() => {
 header {
   position: relative;
   height: 108px;
-  background: url('@/assets/images/common/header/bg-parking-header.png') no-repeat center;
+  background: url('@/layout/layout-header/images/layout-header-2.png') no-repeat center;
   background-size: cover;
 }
 

src/layout/layout-header/components/LayoutHeaderHome.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useRoute } from 'vue-router';
 
-import BarOp from '@/components/CommonHeader/HeaderBarOp.vue';
+import LayoutHeaderNav from '@/layout/layout-header/components/LayoutHeaderNav.vue';
 
 const route = useRoute();
 </script>
@@ -10,7 +10,7 @@ const route = useRoute();
   <header>
     <div class="header-title">
       <h1>{{ route.meta.title }}</h1>
-      <BarOp />
+      <LayoutHeaderNav />
     </div>
   </header>
 </template>
@@ -19,7 +19,7 @@ const route = useRoute();
 .header-title {
   width: 100%;
   height: 108px;
-  background: url('@/assets/images/common/header/bg-layout-header.png') no-repeat center;
+  background: url('@/layout/layout-header/images/layout-header-1.png') no-repeat center;
   background-size: cover;
 
   h1 {

src/layout/layout-header/components/LayoutHeaderNav.vue

@@ -3,9 +3,9 @@
 <template>
   <div class="bar-op">
     <ul>
-      <li><img alt="icon-1" src="@/assets/images/common/icon/icon-1.png" /></li>
+      <li><img alt="icon-1" src="../images/icon/icon-1.png" /></li>
-      <li><img alt="icon-2" src="@/assets/images/common/icon/icon-2.png" /></li>
+      <li><img alt="icon-2" src="../images/icon/icon-2.png" /></li>
-      <li><img alt="icon-3" src="@/assets/images/common/icon/icon-3.png" /></li>
+      <li><img alt="icon-3" src="../images/icon/icon-3.png" /></li>
     </ul>
     <span class="hover">王菠萝</span>
   </div>

src/router/modules/home.ts

@@ -48,8 +48,8 @@ const routes: RouteConfigsTable[] = [
       subtitle: '社区可视化中心',
       headerType: HeaderTypeEnum.subtitle,
       transition: {
-        enter: 'animate__bounceIn animate__faster',
+        enter: 'animate__backInLeft animate__faster',
-        leave: 'animate__bounceOut',
+        leave: 'animate__backOutRight animate__faster',
       },
     },
   },

src/store/modules/community.ts

@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+
+import { getCommunityStatistics } from '@/api/community';
+
+export const useCommunityStore = defineStore('communityStore', {
+  state: () => ({
+    communityStatisticsList: [],
+  }),
+  actions: {
+    /* 社区统计 */
+    async loadCommunityStatisticsList() {
+      this.communityStatisticsList = await getCommunityStatistics();
+    },
+  },
+});

src/views/big-data/charts/content-footer.tsx

@@ -78,7 +78,7 @@ const option = {
 };
 
 /** 渲染图表 */
-export const renderEcharts = (element: Ref<HTMLDivElement>) => {
+export const renderFooterChart = (element: Ref<HTMLDivElement>) => {
   myChart = echarts.init(element.value, null, {
     renderer: 'canvas',
     devicePixelRatio: window.devicePixelRatio,

src/views/big-data/charts/left-footer.tsx

@@ -59,7 +59,7 @@ const option = {
 };
 
 /** 渲染图表 */
-export const renderEcharts = (element: Ref<HTMLDivElement>) => {
+export const renderFooterChart = (element: Ref<HTMLDivElement>) => {
   myChart = echarts.init(element.value, null, {
     renderer: 'canvas',
     devicePixelRatio: window.devicePixelRatio,
@@ -71,7 +71,7 @@ export const renderEcharts = (element: Ref<HTMLDivElement>) => {
 };
 
 /** 更新图表数据 */
-export const updateChart = (option: Array<Array<number>>) => {
+export const updateFooterChart = (option: Array<Array<number>>) => {
   const series = myChart.getOption().series;
   series[0].data = option[0];
   series[1].data = option[1];

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

@@ -1,31 +0,0 @@
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-
-import { renderEcharts } from '@/views/big-data/charts/content-bottom';
-
-const chart = ref<HTMLDivElement>();
-
-onMounted(() => {
-  renderEcharts(chart);
-});
-</script>
-
-<template>
-  <div class="big-data__sidebar-item">
-    <div ref="chart" class="big-data__sidebar-item-chart" />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.big-data__sidebar-item {
-  margin: 16px 0 0 0;
-  width: 100%;
-  height: 377px;
-
-  &-chart {
-    padding: 19px 0 0 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

src/views/big-data/components/big-data-content/components/content-middle.vue

@@ -1,72 +0,0 @@
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-
-const isActive = ref(true);
-
-/** 改变移动状态 */
-const changeMoveState = () => {
-  setInterval(() => {
-    isActive.value = !isActive.value;
-  }, 2000);
-};
-
-onMounted(() => {
-  changeMoveState();
-});
-</script>
-
-<template>
-  <div class="content-middle">
-    <div class="content-middle__inner">
-      <img
-        :class="[isActive ? 'move-top' : 'move-bottom']"
-        alt=""
-        src="@/views/big-data/images/bg-middle-move.png"
-      />
-
-      <h1>工作台</h1>
-
-      <img
-        :class="[isActive ? 'move-bottom' : 'move-top']"
-        alt=""
-        src="@/views/big-data/images/bg-middle-move.png"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.content-middle {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 189px;
-
-  &__inner {
-    position: relative;
-    width: 267px;
-    height: 189px;
-    overflow: hidden;
-  }
-
-  h1 {
-    width: 266px;
-    height: 109px;
-    text-align: center;
-    line-height: 109px;
-    font-size: 34px;
-    color: var(--color-primary-secondary);
-    background: url('@/views/big-data/images/bg-middle-title.png') no-repeat center;
-    background-size: cover;
-  }
-
-  .move-top {
-    animation: 2s linear 0s infinite normal none running line-move;
-  }
-
-  .move-bottom {
-    animation: 2s linear 0s infinite normal none running line-move-alternate;
-  }
-}
-</style>

src/views/big-data/components/big-data-content/components/content-top.vue

@@ -1,63 +0,0 @@
-<script lang="ts" setup>
-import { getImage } from '@/utils/image';
-
-const list = [
-  { title: '员工', img: '/images/big-data/bg-content-top-1.png' },
-  { title: '智慧大楼', img: '/images/big-data/bg-content-top-2.png' },
-  { title: '智慧设备', img: '/images/big-data/bg-content-top-3.png' },
-  { title: '数据报表', img: '/images/big-data/bg-content-top-4.png' },
-];
-</script>
-
-<template>
-  <ul>
-    <li v-for="(item, index) in list" :key="index">
-      <img :src="getImage(item.img)" alt="" />
-      <h2>{{ item.title }}</h2>
-    </li>
-  </ul>
-</template>
-
-<style lang="scss" scoped>
-ul {
-  display: flex;
-  justify-content: space-between;
-  margin: 39px 0 0 0;
-  width: 748px;
-  height: 351px;
-
-  li {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    width: 171px;
-    height: 283px;
-
-    img {
-      width: 171px;
-      height: 191px;
-      animation: shakeY 4s linear infinite;
-    }
-
-    h2 {
-      width: 130px;
-      height: 52px;
-      font-size: 16px;
-      line-height: 54px;
-      text-align: center;
-      color: var(--color-primary-secondary);
-      background: url('@/views/big-data/images/bg-content-top-item.png') no-repeat center;
-      background-size: cover;
-    }
-  }
-
-  li:nth-child(1) {
-    transform: translateY(68px);
-  }
-
-  li:nth-child(4) {
-    transform: translateY(68px);
-  }
-}
-</style>

src/views/big-data/components/big-data-content/index.vue

@@ -1,15 +1,154 @@
 <script lang="ts" setup>
-import ContentBottom from '@/views/big-data/components/big-data-content/components/content-bottom.vue';
+import { useIntervalFn } from '@vueuse/core';
-import ContentMiddle from '@/views/big-data/components/big-data-content/components/content-middle.vue';
+import { onMounted, ref } from 'vue';
-import ContentTop from '@/views/big-data/components/big-data-content/components/content-top.vue';
+
+import { getImage } from '@/utils/image';
+import { renderFooterChart } from '@/views/big-data/charts/content-footer';
+
+const headerList = [
+  { title: '员工', img: '/images/big-data/bg-content-top-1.png' },
+  { title: '智慧大楼', img: '/images/big-data/bg-content-top-2.png' },
+  { title: '智慧设备', img: '/images/big-data/bg-content-top-3.png' },
+  { title: '数据报表', img: '/images/big-data/bg-content-top-4.png' },
+];
+
+const isActive = ref(true);
+const footerChartRef = ref<HTMLDivElement>();
+
+/* 改变移动状态 */
+const changeMoveState = () => {
+  useIntervalFn(() => {
+    isActive.value = !isActive.value;
+  }, 2000);
+};
+
+onMounted(() => {
+  changeMoveState();
+  renderFooterChart(footerChartRef);
+});
 </script>
 
 <template>
   <div class="big-data__content">
-    <content-top />
+    <header class="big-data__header">
-    <content-middle />
+      <ul class="big-data__stats-list">
-    <content-bottom />
+        <li v-for="(item, index) in headerList" :key="index">
+          <img :src="getImage(item.img)" alt="" />
+          <h2>{{ item.title }}</h2>
+        </li>
+      </ul>
+    </header>
+
+    <main class="big-data__main">
+      <div class="big-data__workbench">
+        <img
+          :class="[isActive ? 'move-top' : 'move-bottom']"
+          alt=""
+          src="@/views/big-data/images/bg-middle-move.png"
+        />
+        <h1>工作台</h1>
+        <img
+          :class="[isActive ? 'move-bottom' : 'move-top']"
+          alt=""
+          src="@/views/big-data/images/bg-middle-move.png"
+        />
+      </div>
+    </main>
+
+    <footer class="big-data__body">
+      <div ref="footerChartRef" class="big-data__chart-container" />
+    </footer>
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.big-data__header {
+  .big-data__stats-list {
+    display: flex;
+    justify-content: space-between;
+    margin: 39px 0 0 0;
+    width: 748px;
+    height: 351px;
+  }
+
+  li {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    width: 171px;
+    height: 283px;
+
+    img {
+      width: 171px;
+      height: 191px;
+      animation: shakeY 4s linear infinite;
+    }
+
+    h2 {
+      width: 130px;
+      height: 52px;
+      font-size: 16px;
+      line-height: 54px;
+      text-align: center;
+      color: var(--color-primary-secondary);
+      background: url('@/views/big-data/images/bg-content-top-item.png') no-repeat center;
+      background-size: cover;
+    }
+  }
+
+  li:nth-child(1) {
+    transform: translateY(68px);
+  }
+
+  li:nth-child(4) {
+    transform: translateY(68px);
+  }
+}
+
+.big-data__main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 189px;
+
+  .big-data__workbench {
+    position: relative;
+    width: 267px;
+    height: 189px;
+    overflow: hidden;
+  }
+
+  h1 {
+    width: 266px;
+    height: 109px;
+    text-align: center;
+    line-height: 109px;
+    font-size: 34px;
+    color: var(--color-primary-secondary);
+    background: url('@/views/big-data/images/bg-middle-title.png') no-repeat center;
+    background-size: cover;
+  }
+
+  .move-top {
+    animation: 2s linear 0s infinite normal none running line-move;
+  }
+
+  .move-bottom {
+    animation: 2s linear 0s infinite normal none running line-move-alternate;
+  }
+}
+
+.big-data__body {
+  margin: 16px 0 0 0;
+  width: 100%;
+  height: 377px;
+
+  .big-data__chart-container {
+    padding: 19px 0 0 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

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

@@ -1,63 +0,0 @@
-<script lang="ts" setup>
-import { useIntervalFn } from '@vueuse/core';
-import { onMounted, ref } from 'vue';
-
-import { renderEcharts, updateChart } from '@/views/big-data/charts/left-bottom';
-
-const chart = ref<HTMLDivElement>();
-
-/* 随机数据 */
-const randomData = () => {
-  function random() {
-    return Array(12)
-      .fill(0)
-      .map(() => {
-        const num = (Math.random() * 100).toFixed(2);
-        return parseInt(num);
-      });
-  }
-
-  const data: Array<Array<number>> = [random(), random()];
-
-  updateChart(data);
-};
-
-/* 模拟数据 */
-const mockRandomData = () => {
-  useIntervalFn(() => {
-    randomData();
-  }, 1000);
-};
-
-onMounted(() => {
-  renderEcharts(chart);
-  randomData();
-
-  mockRandomData();
-});
-</script>
-
-<template>
-  <div class="big-data__sidebar-item">
-    <div class="flex-x-between">
-      <div class="big-data__sidebar-title">
-        <h1>园区规划</h1>
-      </div>
-    </div>
-    <div ref="chart" class="chart" />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.big-data__sidebar-item {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 272px;
-}
-
-.chart {
-  width: 100%;
-  height: 200px;
-}
-</style>

src/views/big-data/components/big-data-left/components/left-middle.vue

@@ -1,106 +0,0 @@
-<script lang="tsx" setup>
-import { useIntervalFn } from '@vueuse/core';
-import { onMounted, ref } from 'vue';
-
-import { formatter } from '@/utils/chart';
-import { ChartProgress } from '@/views/big-data/charts/left-middle';
-
-const randomNumber = (range: number = 100) => {
-  return parseInt((Math.random() * range).toFixed(0));
-};
-
-const list = ref([
-  { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
-  { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
-  { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
-  { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
-]);
-
-const renderItem = () => {
-  return (
-    <>
-      {list.value.map((item, index) => {
-        return (
-          <li key={index}>
-            <div>
-              <h1>{item.title}</h1>
-              <em>¥ {formatter(item.amount)}</em>
-            </div>
-            <ChartProgress percent={item.percent} />
-          </li>
-        );
-      })}
-    </>
-  );
-};
-
-const mockList = () => {
-  useIntervalFn(() => {
-    list.value = [
-      { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
-      { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
-      { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
-      { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
-    ];
-  }, 1000);
-};
-
-onMounted(() => {
-  mockList();
-});
-</script>
-
-<template>
-  <div class="big-data__sidebar-item h-[389px]">
-    <div class="flex-x-between">
-      <h1 class="big-data__sidebar-title">本年经营收入</h1>
-      <span class="big-data__sidebar-title-describe">截止时间至2021年6月</span>
-    </div>
-
-    <ul>
-      <component :is="renderItem()" />
-    </ul>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-ul {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-content: space-between;
-  margin: 18px 0 0 0;
-  width: 100%;
-  height: 300px;
-}
-
-li {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 0 18px 0 14px;
-  width: 248px;
-  height: 143px;
-  background: url('@/views/big-data/images/bg-middle.png') no-repeat center;
-  background-size: cover;
-
-  .progress {
-    position: absolute;
-    top: -10px;
-    right: -5px;
-    width: 100px;
-    height: 100px;
-  }
-
-  h1 {
-    font-size: 18px;
-  }
-
-  em {
-    font-size: 28px;
-    color: var(--color-warning-secondary);
-    font-style: normal;
-  }
-}
-</style>

src/views/big-data/components/big-data-left/components/left-top.vue

@@ -1,101 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-import { displayContent } from '@/components/PanelItem/DigitalNumber';
-import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
-import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
-
-const timeList = ref<TimeSelectType[]>([
-  { label: '2020.09', value: '2021' },
-  { label: '2020.09', value: '2021' },
-  { label: '2020.09', value: '2021' },
-]);
-</script>
-
-<template>
-  <div class="big-data__sidebar-item">
-    <div class="flex-x-between">
-      <h1 class="big-data__sidebar-title">规模效益</h1>
-      <TimeSelect :time-list="timeList" />
-    </div>
-
-    <ul>
-      <li>
-        <div class="big-data__sidebar-item-body-title">
-          <h1>进出口总值</h1>
-          <div>
-            <span>
-              总值增幅
-              <em>+123%</em>
-            </span>
-            <span>
-              超越第二名
-              <em>+22.3%</em>
-            </span>
-          </div>
-        </div>
-        <div class="money-digit">
-          <component :is="displayContent('8888888')" />
-        </div>
-      </li>
-
-      <li>
-        <div class="big-data__sidebar-item-body-title">
-          <h1>进出口总值</h1>
-          <div>
-            <span>
-              环比变化
-              <em>+123%</em>
-            </span>
-          </div>
-        </div>
-        <div class="money-digit">
-          <component :is="displayContent('888888')" />
-        </div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-ul {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 100%;
-  height: 198px;
-
-  li {
-    display: flex;
-    flex-direction: column;
-    margin: 9px 0 0 0;
-    width: 100%;
-  }
-}
-
-.big-data__sidebar-item {
-  height: 274px;
-
-  &-body-title {
-    display: flex;
-    justify-content: space-between;
-    margin: 0 0 5px 0;
-    width: 100%;
-
-    h1 {
-      font-size: 18px;
-    }
-
-    span {
-      margin: 0 4px 0 0;
-      font-size: 12px;
-    }
-
-    em {
-      font-style: normal;
-      font-size: 14px;
-      color: var(--color-success);
-    }
-  }
-}
-</style>

src/views/big-data/components/big-data-left/index.vue

@@ -1,13 +1,231 @@
 <script lang="ts" setup>
-import LeftBottom from '@/views/big-data/components/big-data-left/components/left-bottom.vue';
+import { useIntervalFn } from '@vueuse/core';
-import LeftMiddle from '@/views/big-data/components/big-data-left/components/left-middle.vue';
+import { onMounted, ref } from 'vue';
-import LeftTop from '@/views/big-data/components/big-data-left/components/left-top.vue';
+
+import { displayContent } from '@/components/DigitalNumber/DigitalCurrency';
+import TimeSelect from '@/components/TimeSelect/index.vue';
+import { TimeSelectType } from '@/components/TimeSelect/type';
+import { formatter } from '@/utils/chart';
+import { ChartProgress } from '@/views/big-data/charts/left-body';
+import { renderFooterChart, updateFooterChart } from '@/views/big-data/charts/left-footer';
+
+const timeList = ref<TimeSelectType[]>([
+  { label: '2020.09', value: '2021' },
+  { label: '2020.09', value: '2021' },
+  { label: '2020.09', value: '2021' },
+]);
+
+/* body数据---模拟数据 */
+const bodyList = ref([]);
+const initBodyList = () => {
+  const randomNumber = (range: number = 100) => {
+    return parseInt((Math.random() * range).toFixed(0));
+  };
+
+  bodyList.value = [
+    { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
+    { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
+    { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
+    { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
+  ];
+};
+
+/* 底部图表---模拟数据 */
+const footerChartRef = ref<HTMLDivElement>();
+const mockFooterChart = () => {
+  function random() {
+    return Array(12)
+      .fill(0)
+      .map(() => {
+        const num = (Math.random() * 100).toFixed(2);
+        return parseInt(num);
+      });
+  }
+
+  const data: Array<Array<number>> = [random(), random()];
+  updateFooterChart(data);
+};
+
+onMounted(() => {
+  // 渲染底部图表
+  renderFooterChart(footerChartRef);
+  initBodyList();
+
+  // 模拟底部图表
+  useIntervalFn(() => {
+    mockFooterChart();
+    initBodyList();
+  }, 1000);
+});
 </script>
 
 <template>
   <div class="big-data__sidebar">
-    <left-top />
+    <div class="big-data__header">
-    <left-middle />
+      <div class="flex-x-between">
-    <left-bottom />
+        <h1 class="big-data__sidebar-title">规模效益</h1>
+        <TimeSelect :time-list="timeList" />
+      </div>
+
+      <ul>
+        <li>
+          <div class="big-data__header-title">
+            <h1>进出口总值</h1>
+            <div>
+              <span>
+                总值增幅
+                <em>+123%</em>
+              </span>
+              <span>
+                超越第二名
+                <em>+22.3%</em>
+              </span>
+            </div>
+          </div>
+          <div class="money-digit">
+            <component :is="displayContent('8888888')" />
+          </div>
+        </li>
+
+        <li>
+          <div class="big-data__header-title">
+            <h1>进出口总值</h1>
+            <div>
+              <span>
+                环比变化
+                <em>+123%</em>
+              </span>
+            </div>
+          </div>
+          <div class="money-digit">
+            <component :is="displayContent('888888')" />
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="big-data__body h-[389px]">
+      <div class="flex-x-between">
+        <h1 class="big-data__sidebar-title">本年经营收入</h1>
+        <span class="big-data__sidebar-title-describe">截止时间至2021年6月</span>
+      </div>
+
+      <ul>
+        <li v-for="(item, index) in bodyList" :key="index">
+          <div>
+            <h1>{{ item.title }}</h1>
+            <em>¥ {{ formatter(item.amount) }}}</em>
+          </div>
+          <ChartProgress :percent="item.percent" />
+        </li>
+      </ul>
+    </div>
+
+    <div class="big-data__footer">
+      <div class="flex-x-between">
+        <div class="big-data__sidebar-title">
+          <h1>园区规划</h1>
+        </div>
+      </div>
+      <div ref="footerChartRef" class="big-data__footer-chart-container" />
+    </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.big-data__header {
+  height: 274px;
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    height: 198px;
+
+    li {
+      display: flex;
+      flex-direction: column;
+      margin: 9px 0 0 0;
+      width: 100%;
+    }
+  }
+
+  &-title {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 0 5px 0;
+    width: 100%;
+
+    h1 {
+      font-size: 18px;
+    }
+
+    span {
+      margin: 0 4px 0 0;
+      font-size: 12px;
+    }
+
+    em {
+      font-style: normal;
+      font-size: 14px;
+      color: var(--color-success);
+    }
+  }
+}
+
+.big-data__body {
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-content: space-between;
+    margin: 18px 0 0 0;
+    width: 100%;
+    height: 300px;
+  }
+
+  li {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0 18px 0 14px;
+    width: 248px;
+    height: 143px;
+    background: url('@/views/big-data/images/bg-middle.png') no-repeat center;
+    background-size: cover;
+
+    .progress {
+      position: absolute;
+      top: -10px;
+      right: -5px;
+      width: 100px;
+      height: 100px;
+    }
+
+    h1 {
+      font-size: 18px;
+    }
+
+    em {
+      font-size: 28px;
+      color: var(--color-warning-secondary);
+      font-style: normal;
+    }
+  }
+}
+
+.big-data__footer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 272px;
+
+  &-chart-container {
+    width: 100%;
+    height: 200px;
+  }
+}
+</style>

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

@@ -13,7 +13,7 @@ const list = [
 </script>
 
 <template>
-  <div class="big-data__sidebar-item">
+  <div class="big-data__body">
     <div class="flex-x-between">
       <h1 class="big-data__sidebar-title">园区规划</h1>
     </div>
@@ -28,7 +28,7 @@ const list = [
 </template>
 
 <style lang="scss" scoped>
-.big-data__sidebar-item {
+.big-data__body {
   width: 100%;
 
   .big-data__sidebar-card {

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

@@ -11,7 +11,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="big-data__sidebar-item">
+  <div class="big-data__body">
     <div class="flex-x-between">
       <h1 class="big-data__sidebar-title">企业信息</h1>
       <span class="big-data__sidebar-title-describe">截止时间至2021.12.30</span>
@@ -62,7 +62,7 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
-.big-data__sidebar-item {
+.big-data__body {
   width: 100%;
   height: 338px;
 }
@@ -79,7 +79,7 @@ onMounted(() => {
     margin: 15px 0 0 0;
     width: 242px;
     height: 124px;
-    background: url('@/assets/images/business-supervision/bg/sidebar/frame-1.png') no-repeat center;
+    background: url('@/views/big-data/images/frame-1.png') no-repeat center;
     background-size: cover;
 
     h1 {

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

@@ -1,10 +1,10 @@
 <script lang="tsx" setup>
 import { onMounted, ref } from 'vue';
 
-import { displayContent } from '@/components/PanelItem/DigitalNumber';
+import { displayContent } from '@/components/DigitalNumber/DigitalCurrency';
-import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
+import TimeSelect from '@/components/TimeSelect/index.vue';
-import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
+import { TimeSelectType } from '@/components/TimeSelect/type';
-import { renderEcharts } from '@/views/big-data/charts/right-top';
+import { renderEcharts } from '@/views/big-data/charts/right-header';
 
 const chartProgress = ref<HTMLDivElement>();
 const money = '1386114';
@@ -21,11 +21,11 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="big-data__sidebar-item h-[226px]">
+  <div class="big-data__header h-[226px]">
     <div class="flex-x-between">
-      <h1 class="big-data__sidebar-title">园区进出口额</h1>
+      <h1 class="big-data__header-title">园区进出口额</h1>
       <div>
-        <span class="big-data__sidebar-tag">总数据</span>
+        <span class="big-data__header-tag">总数据</span>
         <TimeSelect :time-list="timeList" />
       </div>
     </div>
@@ -35,9 +35,9 @@ onMounted(() => {
     </div>
 
     <div>
-      <div ref="chartProgress" class="big-data__sidebar-progress" />
+      <div ref="chartProgress" class="big-data__header-progress" />
 
-      <ul class="big-data__sidebar-value">
+      <ul class="big-data__header-value">
         <li>
           进口额
           <i>¥1551154545</i>
@@ -62,8 +62,9 @@ onMounted(() => {
   }
 }
 
-.big-data__sidebar {
+.big-data__header {
   width: 100%;
+  height: 226px;
 
   &-progress {
     margin: 14px 0 0 0;

src/views/business-supervision/components/business-supervision-content/components/content-bottom.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
+import TimeSelect from '@/components/TimeSelect/index.vue';
-import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
+import { TimeSelectType } from '@/components/TimeSelect/type';
 import { renderEcharts } from '@/views/business-supervision/charts/contentBottom';
 
 const chartYear = ref();

src/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue

@@ -1,9 +1,9 @@
 <script lang="tsx" setup>
 import { onMounted, ref } from 'vue';
 
-import { displayContent } from '@/components/PanelItem/DigitalNumber';
+import { displayContent } from '@/components/DigitalNumber/DigitalCurrency';
-import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
+import TimeSelect from '@/components/TimeSelect/index.vue';
-import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
+import { TimeSelectType } from '@/components/TimeSelect/type';
 import { renderEcharts } from '@/views/business-supervision/charts/leftSidebarTop';
 
 const chartProgress = ref<HTMLDivElement>();

src/views/business-supervision/components/business-supervision-right/components/sidebar-right-top.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
+import TimeSelect from '@/components/TimeSelect/index.vue';
-import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
+import { TimeSelectType } from '@/components/TimeSelect/type';
 
 const timeList = ref<TimeSelectType[]>([
   { label: '2020.09', value: '2021' },

src/views/community/community-content/index.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <div class="community__content">community-content/index.vue</div>
-</template>
-
-<style lang="scss" scoped>
-.community__content {
-  background: #006bc5;
-}
-</style>

src/views/community/community-left/index.vue

@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-import CommunityPanel from '@/components/PanelItem/CommunityPanel/index.vue';
-</script>
-
-<template>
-  <div class="community__sidebar">
-    <div class="community__sidebar-item">
-      <CommunityPanel title="智慧设备总数" />
-    </div>
-
-    <div class="community__sidebar-item">
-      <CommunityPanel title="预警概览" />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.community__sidebar {
-  //background: #fff;
-}
-</style>

src/views/community/components/CommonPanel.vue

@@ -21,7 +21,7 @@ defineProps({
 .panel {
   width: 430px;
   height: 440px;
-  background: url('./bg.png') no-repeat;
+  background: url('../images/bg-common-panel.png') no-repeat;
   background-size: cover;
 
   h1 {

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

@@ -0,0 +1,205 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia';
+import { onMounted } from 'vue';
+
+import { useCommunityStore } from '@/store/modules/community';
+import { getImage } from '@/utils/image';
+
+const BODY_CARD_LIST = ['大数据中心', '数字楼宇', '平台设备管理'];
+
+const communityStore = useCommunityStore();
+const { communityStatisticsList } = storeToRefs(communityStore);
+
+onMounted(() => {
+  communityStore.loadCommunityStatisticsList();
+});
+</script>
+
+<template>
+  <div class="community__content">
+    <header class="community__header">
+      <ul class="community__stats-list">
+        <li
+          v-for="(item, index) in communityStatisticsList"
+          :key="index"
+          class="community__stat-card"
+        >
+          <div class="community__stat-content">
+            <h1>{{ item.name }}</h1>
+            <h2>{{ item.total }}</h2>
+            <span>{{ item.subtitle }} {{ item.subPercent }}（{{ item.subTotal }}）</span>
+          </div>
+
+          <img :src="`/images/community/bg-card-${index + 1}.png`" alt="" />
+        </li>
+      </ul>
+    </header>
+
+    <main class="community__main">
+      <ul class="community__feature-list">
+        <li v-for="(item, index) in BODY_CARD_LIST" :key="index">
+          <img
+            :src="getImage(`/images/community/body-image-${index + 1}.png`)"
+            alt=""
+            class="animate__animated animate__pulse animate__infinite"
+          />
+          <span>{{ item }}</span>
+        </li>
+      </ul>
+
+      <div class="community__metrics">
+        <div class="community__metric-card">
+          <h1>80</h1>
+          <span>
+            设备
+            <br />
+            正常运行总数
+          </span>
+        </div>
+        <div class="community__metric-card">
+          <h1>20</h1>
+          <span>
+            设备
+            <br />
+            故障总数
+          </span>
+        </div>
+        <div class="community__instrument-panel">xxxx</div>
+        <div class="community__metric-card">
+          <h1>20</h1>
+          <span>
+            设备
+            <br />
+            故障总数
+          </span>
+        </div>
+        <div class="community__metric-card">
+          <h1>98%</h1>
+          <span>
+            设备
+            <br />
+            故障总数
+          </span>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* 头部内容 */
+.community__header {
+  .community__stats-list {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .community__stat-card {
+    position: relative;
+    width: 209px;
+    height: 204px;
+    color: #fff;
+
+    img {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    .community__stat-content {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: 20px;
+      height: 100%;
+      z-index: 1;
+
+      h1 {
+        font-size: 24px;
+      }
+
+      h2 {
+        font-size: 38px;
+      }
+
+      span {
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+/* 中间层内容 */
+.community__main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 40px 0 0 0;
+  width: 100%;
+  height: 660px;
+  background: url('../images/bg-body.png') no-repeat;
+  background-size: contain;
+
+  /* 数据图片内容 */
+  .community__feature-list {
+    display: flex;
+    width: 100%;
+    height: 286px;
+
+    li {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 286px;
+      height: 286px;
+      color: var(--color-primary-2);
+      font-size: 24px;
+    }
+
+    img {
+      width: 230px;
+      height: 209px;
+    }
+  }
+
+  /* 仪表盘列表 */
+  .community__metrics {
+    margin: 44px 0 0 0;
+    width: 100%;
+    height: 170px;
+    display: flex;
+    justify-content: space-around;
+
+    /* 仪表盘周围内容 */
+    .community__metric-card {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 105px;
+      height: 170px;
+      background: url('../images/bg-body-card.png');
+
+      h1 {
+        font-size: 40px;
+        color: var(--color-primary-secondary);
+      }
+
+      span {
+        font-size: 14px;
+        text-align: center;
+        color: #fff;
+      }
+    }
+
+    /* 中间仪表盘内容 */
+    .community__instrument-panel {
+      width: 286px;
+      height: 169px;
+      background: url('../images/bg-body-instrument-panel.png');
+    }
+  }
+}
+</style>

src/views/community/components/community-left.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import DigitalNumber from '@/components/DigitalNumber/DigitalNumber';
+import CommonPanel from '@/views/community/components/CommonPanel.vue';
+</script>
+
+<template>
+  <div class="community__sidebar">
+    <div class="community__sidebar-item">
+      <CommonPanel title="智慧设备总数">
+        <div class="community__sidebar-digital">
+          <DigitalNumber :money="1964" />
+        </div>
+      </CommonPanel>
+    </div>
+
+    <div class="community__sidebar-item">
+      <CommonPanel title="预警概览" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.community__sidebar {
+  &-digital {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+
+    :deep(span) {
+      float: left;
+      margin: 0 11px 0 0;
+      width: 64px;
+      height: 68px;
+      font-size: 50px;
+      line-height: 68px;
+      text-align: center;
+      background: url('@/views/community/images/digital-number.png');
+    }
+  }
+}
+</style>

src/views/community/components/community-right.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import CommunityPanel from '@/components/PanelItem/CommunityPanel/index.vue';
+import CommonPanel from '@/views/community/components/CommonPanel.vue';
 </script>
 
 <template>
   <div class="community__sidebar">
     <div class="community__sidebar-item">
-      <CommunityPanel title="标题标题" />
+      <CommonPanel title="标题标题" />
     </div>
 
     <div class="community__sidebar-item">
-      <CommunityPanel title="标题标题" />
+      <CommonPanel title="标题标题" />
     </div>
   </div>
 </template>

src/views/community/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import CommunityContent from '@/views/community/community-content/index.vue';
+import CommunityContent from '@/views/community/components/community-content.vue';
-import CommunityLeft from '@/views/community/community-left/index.vue';
+import CommunityLeft from '@/views/community/components/community-left.vue';
-import CommunityRight from '@/views/community/community-right/index.vue';
+import CommunityRight from '@/views/community/components/community-right.vue';
 </script>
 
 <template>
@@ -21,6 +21,6 @@ import CommunityRight from '@/views/community/community-right/index.vue';
   width: 100%;
   height: 100%;
 
-  @include view-style-default(530px, 759px, #0e5fff33);
+  @include view-style-default(530px, 926px, #0e5fff33);
 }
 </style>

src/views/data-analyse/components/PanelTitle.vue

@@ -14,6 +14,7 @@ defineProps({
 <style lang="scss" scoped>
 h1 {
   position: relative;
+  color: #fff;
   line-height: 40px;
   font-size: 20px;
 

src/views/data-analyse/components/data-analyse-content.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import PanelTitle1 from '@/components/PanelItem/PanelTitle/PanelTitle1.vue';
 import { renderFooterChart } from '@/views/data-analyse/charts/content-footer';
+import PanelTitle from '@/views/data-analyse/components/PanelTitle.vue';
 
 const titleList = [170582, 586220, 168902];
 
@@ -30,7 +30,7 @@ onMounted(() => {
     <main class="data-analyse-content__body">body</main>
 
     <footer class="data-analyse-content__footer">
-      <PanelTitle1 title="销售设备数量区域占比" />
+      <PanelTitle title="销售设备数量区域占比" />
       <div ref="footerChartRef" class="data-analyse-content__footer-chart" />
     </footer>
   </div>
@@ -42,10 +42,6 @@ onMounted(() => {
   width: 803px;
   height: 970px;
 
-  h1 {
-    color: white;
-  }
-
   &__header {
     display: flex;
     justify-content: space-between;

src/views/data-analyse/components/data-analyse-left.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import PanelTitle1 from '@/components/PanelItem/PanelTitle/PanelTitle1.vue';
+import Progress1 from '@/components/Progress/Progress1.vue';
-import Progress1 from '@/components/PanelItem/Progress/Progress1.vue';
 import { renderEcharts } from '@/views/data-analyse/charts/left-brand';
+import PanelTitle from '@/views/data-analyse/components/PanelTitle.vue';
 
 const brandChartRef = ref();
 const deviceTotal = ref('1010');
@@ -40,7 +40,7 @@ onMounted(() => {
 
     <!--中心区域-->
     <div class="data-analyse-left__center">
-      <PanelTitle1 title="销售公司销售设备数量占比" />
+      <PanelTitle title="销售公司销售设备数量占比" />
 
       <ul>
         <li v-for="(item, index) in companyList" :key="index">
@@ -59,7 +59,7 @@ onMounted(() => {
 
     <!--底部区域-->
     <div class="data-analyse-left__bottom">
-      <PanelTitle1 title="品牌占有率" />
+      <PanelTitle title="品牌占有率" />
 
       <div ref="brandChartRef" class="data-analyse-left__bottom-chart" />
     </div>

src/views/data-analyse/components/data-analyse-right.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import PanelTitle1 from '@/components/PanelItem/PanelTitle/PanelTitle1.vue';
 import { renderBodyChart } from '@/views/data-analyse/charts/right-body';
 import { renderFooterChart } from '@/views/data-analyse/charts/right-footer';
+import PanelTitle from '@/views/data-analyse/components/PanelTitle.vue';
 
 const footerChartRef = ref();
 const footerChart = () => {
@@ -24,17 +24,17 @@ onMounted(() => {
 <template>
   <div class="data-analyse-right">
     <header class="data-analyse-right__header">
-      <PanelTitle1 title="数据占有率" />
+      <PanelTitle title="数据占有率" />
       <div ref="bodyChartRef" class="data-analyse-right-chart" />
     </header>
 
     <main class="data-analyse-right__body">
-      <PanelTitle1 title="数据分析展示" />
+      <PanelTitle title="数据分析展示" />
       <div ref="bodyChartRef" class="data-analyse-right__body-chart" />
     </main>
 
     <footer class="data-analyse-right__footer">
-      <PanelTitle1 title="数据展示统计" />
+      <PanelTitle title="数据展示统计" />
 
       <div ref="footerChartRef" class="data-analyse-right__footer-chart" />
     </footer>
@@ -46,10 +46,6 @@ onMounted(() => {
   width: 496px;
   height: 970px;
 
-  h1 {
-    color: #fff;
-  }
-
   &__header {
     margin: 10px 0 0 0;
     width: 100%;

src/views/data-analyse/index.vue

@@ -2,9 +2,9 @@
 import { onBeforeMount } from 'vue';
 
 import { useAppStore } from '@/store/app';
-import DataAnalyseContent from '@/views/data-analyse/components/data-analyse-content/index.vue';
+import DataAnalyseContent from '@/views/data-analyse/components/data-analyse-content.vue';
-import DataAnalyseLeft from '@/views/data-analyse/components/data-analyse-left/index.vue';
+import DataAnalyseLeft from '@/views/data-analyse/components/data-analyse-left.vue';
-import DataAnalyseRight from '@/views/data-analyse/components/data-analyse-right/index.vue';
+import DataAnalyseRight from '@/views/data-analyse/components/data-analyse-right.vue';
 
 const appStore = useAppStore();
 

src/views/login/components/login-header.vue

@@ -17,7 +17,7 @@ const route = useRoute();
 .header-title {
   width: 100%;
   height: 108px;
-  background: url('@/assets/images/common/header/bg-layout-header.png') no-repeat center;
+  background: url('@/layout/layout-header/images/layout-header-1.png') no-repeat center;
   background-size: cover;
 
   h1 {

src/views/smart-park/components/common/content-item.vue

@@ -12,11 +12,7 @@ defineProps({
     <div class="mt-[7px] font-size-[18px] c-primary">{{ door }}</div>
     <div class="flex-center mt-[8px] c-primary">
       <span class="float-left font-size-[14px] c-primary-secondary cursor-pointer hover">查看</span>
-      <img
+      <img alt="arrow-item" class="float-left h-[16px]" src="../../images/arrow/arrow-item.png" />
-        alt="arrow-item"
-        class="float-left h-[16px]"
-        src="@/views/smart-park/images/arrow/arrow-item.png"
-      />
     </div>
   </div>
 </template>

src/views/smart-park/components/common/content-percent.vue

@@ -35,7 +35,7 @@ const calPercentItem = (percent: number): Element => {
   position: absolute;
   width: 86px;
   height: 86px;
-  background: url('@/views/smart-park/images/bg/bg-main-1.png') no-repeat center;
+  background: url('@/assets/images/common/bg/bg-main-2.png') no-repeat center;
   background-size: cover;
 }
 </style>

src/views/smart-park/components/smart-park-content.vue

@@ -0,0 +1,277 @@
+<script lang="ts" setup>
+import { useIntervalFn } from '@vueuse/core';
+import { onMounted, ref } from 'vue';
+
+import { renderEcharts, updateChart } from '@/views/smart-park/charts/right-sidebar';
+import ContentItem from '@/views/smart-park/components/common/content-item.vue';
+import ContentPercent from '@/views/smart-park/components/common/content-percent.vue';
+
+const weekDataChart = ref<HTMLDivElement>();
+
+/** 随机数据 */
+const randomData = () => {
+  renderEcharts(weekDataChart);
+
+  function random() {
+    return Array(11)
+      .fill(0)
+      .map(() => {
+        const num = (Math.random() * 100).toFixed(2);
+        return parseInt(num);
+      });
+  }
+
+  useIntervalFn(() => {
+    updateChart({ data1: random(), data2: random() });
+  }, 1000);
+};
+
+onMounted(() => {
+  randomData();
+});
+</script>
+
+<template>
+  <div class="pt-[78px] mx-auto flex-center w-[1620px] h-[650px]">
+    <div class="smart-park__sidebar smart-park__sidebar--left">
+      <div class="pt-[55px] pl-[25px]" style="transform: rotateY(180deg)">
+        <!-- 路况 -->
+        <div class="smart-park__sidebar-title">
+          <h1>实时道路情况</h1>
+        </div>
+
+        <!-- 汽车列表 -->
+        <ul class="mt-[32px]">
+          <li class="smart-park__sidebar--left-item">
+            <img alt="car-1" src="../images/car/car-1.png" />
+            <p>入卡口（西北门）</p>
+            <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
+          </li>
+          <li class="smart-park__sidebar--left-item">
+            <img alt="car-1" src="../images/car/car-1.png" />
+            <p>入卡口（东北门）</p>
+            <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
+          </li>
+          <li class="smart-park__sidebar--left-item">
+            <img alt="car-1" src="../images/car/car-2.png" />
+            <p>入卡口（东北门）</p>
+            <span class="dashed-circle c-warning border-b-warning">拥堵</span>
+          </li>
+          <li class="smart-park__sidebar--left-item">
+            <img alt="car-1" src="../images/car/car-1.png" />
+            <p>入卡口（东南门）</p>
+            <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
+          </li>
+        </ul>
+
+        <!-- 建议 -->
+        <div class="smart-park__sidebar--left-suggest">
+          <h5>车流量建议</h5>
+          <p>
+            高峰时段大量车流量容易造成拥堵，主要由XXX企业、XXX企业的车辆构成，
+            <span>可建议XXX企业向后延迟15min错峰入园。</span>
+            高峰时段大量车流量容易造成拥堵， 主要由XXX企业、XXX企业的车辆构成
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div class="smart-park__body">
+      <div class="h-[570px] flex-y-between">
+        <div class="smart-park__body-title">
+          <h1>卡口车辆监控</h1>
+        </div>
+
+        <!-- 中间布局 -->
+        <div class="smart-park__body-inner">
+          <div class="pos-relative">
+            <content-item :count="45" class="top-[37px] left-[40px] w-[175px]" door="西北门" />
+            <content-percent :percent="44" class="top-[73px] left-[193px]" />
+          </div>
+          <div class="pos-relative">
+            <content-item :count="67" class="top-[37px] left-[120px] w-[175px]" door="东北门" />
+            <content-percent :percent="25" class="top-[73px] right-[192px]" />
+          </div>
+          <div class="pos-relative">
+            <content-item :count="345" class="top-[45px] left-[34px] w-[175px]" door="西南门" />
+            <content-percent :percent="25" class="top-[40px] left-[193px]" />
+          </div>
+          <div class="pos-relative">
+            <content-item :count="145" class="top-[45px] left-[130px] w-[175px]" door="东南门" />
+            <content-percent :percent="44" class="top-[40px] left-[66px]" />
+          </div>
+
+          <div class="smart-park__body-content">
+            <div class="smart-park__body-content-headline flex-center">
+              <h1>智能管控</h1>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="smart-park__sidebar ml-[20px]">
+      <div class="pt-[55px] pl-[25px]">
+        <!-- 路况 -->
+        <div class="smart-park__sidebar-title">
+          <h1>近7天车流量概览</h1>
+        </div>
+
+        <!-- 汽车列表 -->
+        <ul class="flex-x-around mt-[32px] w-[331px]">
+          <li class="smart-park__sidebar-flow-item">
+            <span>最高进园车流量</span>
+            <span>897</span>
+          </li>
+          <li class="smart-park__sidebar-flow-item">
+            <span>最高进园车流量</span>
+            <span>494</span>
+          </li>
+        </ul>
+
+        <!-- 七天数据 -->
+        <div class="w-[325px] h-[205px]">
+          <div ref="weekDataChart" class="smart-park__sidebar-flow-item-charts" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.smart-park__sidebar--left {
+  margin: 0 20px 0 0;
+  transform: rotateY(180deg);
+
+  &-item {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 330px;
+    height: 61px;
+    margin: 0 0 9px 0;
+    background: url('@/views/smart-park/images/bg/bg-frame.png') no-repeat center;
+    background-size: cover;
+
+    img {
+      width: 60px;
+    }
+
+    p {
+      color: #fff;
+      font-size: 14px;
+    }
+  }
+
+  &-suggest {
+    margin: 24px 0 0 0;
+    padding: 15px 14px 17px 20px;
+    width: 330px;
+    height: 157px;
+    color: #fff;
+    font-size: 14px;
+    background: url('@/views/smart-park/images/bg/bg-suggest.png') no-repeat center;
+    background-size: cover;
+
+    span {
+      color: var(--color-warning-secondary);
+    }
+  }
+}
+
+.smart-park__body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 824px;
+  height: 650px;
+  background: url('@/views/smart-park/images/bg/bg-middle.png') no-repeat center;
+  background-size: cover;
+
+  // 中间部分标题
+  &-title {
+    height: 61px;
+    background: url('@/views/smart-park/images/bg/bg-main-title.png') no-repeat center;
+    background-size: cover;
+
+    h1 {
+      color: #fff;
+      font-size: 22px;
+      text-align: center;
+    }
+  }
+
+  // 中间部分四个部分
+  &-inner {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    position: relative;
+    margin: 28px 0 77px 0;
+    width: 666px;
+    height: 400px;
+    background: url('@/views/smart-park/images/bg/bg-main-1.png') no-repeat center;
+    background-size: cover;
+  }
+
+  // 中心智能管控
+  &-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 138px;
+    height: 138px;
+
+    &-headline {
+      width: 100%;
+      height: 100%;
+      background: url('@/views/smart-park/images/bg/bg-main-center.png');
+      background-size: cover;
+      font-size: 19px;
+      animation: rotate 30s linear infinite;
+
+      h1 {
+        width: 53px;
+        color: var(--color-primary-secondary);
+        text-align: center;
+        animation: rotate-reverse 30s linear infinite;
+      }
+    }
+  }
+}
+
+.smart-park__sidebar-flow-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 162px;
+  height: 111px;
+  text-align: center;
+
+  span:nth-child(1) {
+    width: 161px;
+    height: 40px;
+    color: #fff;
+    line-height: 40px;
+    font-size: 16px;
+    background: url('@/views/smart-park/images/bg/bg-frame-2.png') no-repeat center;
+    background-size: cover;
+  }
+
+  span:nth-child(2) {
+    width: 161px;
+    height: 66px;
+    color: var(--color-primary-secondary);
+    line-height: 66px;
+    font-size: 34px;
+    background: url('@/views/smart-park/images/bg/bg-frame-3.png') no-repeat center;
+    background-size: cover;
+  }
+
+  &-charts {
+    margin: 71px 0 0 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/smart-park/components/smart-park-content/components/smart-park-content/index.vue

@@ -1,104 +0,0 @@
-<script lang="ts" setup>
-import ContentItem from '@/views/smart-park/components/smart-park-content/components/smart-park-content/components/content-item.vue';
-import ContentPercent from '@/views/smart-park/components/smart-park-content/components/smart-park-content/components/content-percent.vue';
-</script>
-
-<template>
-  <div class="smart-park-central">
-    <div class="h-[570px] flex-y-between">
-      <div class="smart-park-central-title">
-        <h1>卡口车辆监控</h1>
-      </div>
-
-      <!-- 中间布局 -->
-      <div class="smart-park-central-inner">
-        <div class="pos-relative">
-          <content-item :count="45" class="top-[37px] left-[40px] w-[175px]" door="西北门" />
-          <content-percent :percent="44" class="top-[73px] left-[193px]" />
-        </div>
-        <div class="pos-relative">
-          <content-item :count="67" class="top-[37px] left-[120px] w-[175px]" door="东北门" />
-          <content-percent :percent="25" class="top-[73px] right-[192px]" />
-        </div>
-        <div class="pos-relative">
-          <content-item :count="345" class="top-[45px] left-[34px] w-[175px]" door="西南门" />
-          <content-percent :percent="25" class="top-[40px] left-[193px]" />
-        </div>
-        <div class="pos-relative">
-          <content-item :count="145" class="top-[45px] left-[130px] w-[175px]" door="东南门" />
-          <content-percent :percent="44" class="top-[40px] left-[66px]" />
-        </div>
-
-        <div class="smart-park-central-content">
-          <div class="smart-park-central-content-headline flex-center">
-            <h1>智能管控</h1>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.smart-park-central {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 824px;
-  height: 650px;
-  background: url('@/views/smart-park/images/bg/bg-middle.png') no-repeat center;
-  background-size: cover;
-
-  // 中间部分标题
-  &-title {
-    height: 61px;
-    background: url('@/views/smart-park/images/bg/bg-main-title.png') no-repeat center;
-    background-size: cover;
-
-    h1 {
-      color: #fff;
-      font-size: 22px;
-      text-align: center;
-    }
-  }
-
-  // 中间部分四个部分
-  &-inner {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    position: relative;
-    margin: 28px 0 77px 0;
-    width: 666px;
-    height: 400px;
-    background: url('@/views/smart-park/images/bg/bg-main-1.png') no-repeat center;
-    background-size: cover;
-  }
-
-  // 中心智能管控
-  &-content {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 138px;
-    height: 138px;
-
-    &-headline {
-      width: 100%;
-      height: 100%;
-      background: url('@/views/smart-park/images/bg/bg-main-center.png');
-      background-size: cover;
-      font-size: 19px;
-      animation: rotate 30s linear infinite;
-
-      h1 {
-        width: 53px;
-        color: var(--color-primary-secondary);
-        text-align: center;
-        animation: rotate-reverse 30s linear infinite;
-      }
-    }
-  }
-}
-</style>

src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-left/index.vue

@@ -1,88 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <div class="smart-park__sidebar smart-park__sidebar--left">
-    <div class="pt-[55px] pl-[25px]" style="transform: rotateY(180deg)">
-      <!-- 路况 -->
-      <div class="smart-park__sidebar-title">
-        <h1>实时道路情况</h1>
-      </div>
-
-      <!-- 汽车列表 -->
-      <ul class="mt-[32px]">
-        <li class="smart-park__sidebar--left-item">
-          <img alt="car-1" src="@/views/smart-park/images/car/car-1.png" />
-          <p>入卡口（西北门）</p>
-          <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
-        </li>
-        <li class="smart-park__sidebar--left-item">
-          <img alt="car-1" src="@/views/smart-park/images/car/car-1.png" />
-          <p>入卡口（东北门）</p>
-          <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
-        </li>
-        <li class="smart-park__sidebar--left-item">
-          <img alt="car-1" src="@/views/smart-park/images/car/car-2.png" />
-          <p>入卡口（东北门）</p>
-          <span class="dashed-circle c-warning border-b-warning">拥堵</span>
-        </li>
-        <li class="smart-park__sidebar--left-item">
-          <img alt="car-1" src="@/views/smart-park/images/car/car-1.png" />
-          <p>入卡口（东南门）</p>
-          <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
-        </li>
-      </ul>
-
-      <!-- 建议 -->
-      <div class="smart-park__sidebar--left-suggest">
-        <h5>车流量建议</h5>
-        <p>
-          高峰时段大量车流量容易造成拥堵，主要由XXX企业、XXX企业的车辆构成，
-          <span>可建议XXX企业向后延迟15min错峰入园。</span>
-          高峰时段大量车流量容易造成拥堵， 主要由XXX企业、XXX企业的车辆构成
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.smart-park__sidebar--left {
-  margin: 0 20px 0 0;
-  transform: rotateY(180deg);
-
-  &-item {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    width: 330px;
-    height: 61px;
-    margin: 0 0 9px 0;
-    background: url('@/views/smart-park/images/bg/bg-frame.png') no-repeat center;
-    background-size: cover;
-
-    img {
-      width: 60px;
-    }
-
-    p {
-      color: #fff;
-      font-size: 14px;
-    }
-  }
-
-  &-suggest {
-    margin: 24px 0 0 0;
-    padding: 15px 14px 17px 20px;
-    width: 330px;
-    height: 157px;
-    color: #fff;
-    font-size: 14px;
-    background: url('@/views/smart-park/images/bg/bg-suggest.png') no-repeat center;
-    background-size: cover;
-
-    span {
-      color: var(--color-warning-secondary);
-    }
-  }
-}
-</style>

src/views/smart-park/components/smart-park-content/index.vue

@@ -1,100 +0,0 @@
-<script lang="ts" setup>
-import { useIntervalFn } from '@vueuse/core';
-import { onMounted, ref } from 'vue';
-
-import { renderEcharts, updateChart } from '@/views/smart-park/charts/right-sidebar';
-import SmartPartContent from '@/views/smart-park/components/smart-park-content/components/smart-park-content/index.vue';
-import SmartPartSidebarLeft from '@/views/smart-park/components/smart-park-content/components/smart-park-sidebar-left/index.vue';
-
-const weekDataChart = ref<HTMLDivElement>();
-
-/** 随机数据 */
-const randomData = () => {
-  renderEcharts(weekDataChart);
-
-  function random() {
-    return Array(11)
-      .fill(0)
-      .map(() => {
-        const num = (Math.random() * 100).toFixed(2);
-        return parseInt(num);
-      });
-  }
-
-  useIntervalFn(() => {
-    updateChart({ data1: random(), data2: random() });
-  }, 1000);
-};
-
-onMounted(() => {
-  randomData();
-});
-</script>
-
-<template>
-  <main class="pt-[78px] mx-auto flex-center w-[1620px] h-[650px]">
-    <smart-part-sidebar-left />
-    <smart-part-content />
-    <div class="smart-park__sidebar ml-[20px]">
-      <div class="pt-[55px] pl-[25px]">
-        <!-- 路况 -->
-        <div class="smart-park__sidebar-title">
-          <h1>近7天车流量概览</h1>
-        </div>
-
-        <!-- 汽车列表 -->
-        <ul class="flex-x-around mt-[32px] w-[331px]">
-          <li class="smart-park__sidebar-flow-item">
-            <span>最高进园车流量</span>
-            <span>897</span>
-          </li>
-          <li class="smart-park__sidebar-flow-item">
-            <span>最高进园车流量</span>
-            <span>494</span>
-          </li>
-        </ul>
-
-        <!-- 七天数据 -->
-        <div class="w-[325px] h-[205px]">
-          <div ref="weekDataChart" class="smart-park__sidebar-flow-item-charts" />
-        </div>
-      </div>
-    </div>
-  </main>
-</template>
-<style lang="scss" scoped>
-.smart-park__sidebar-flow-item {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 162px;
-  height: 111px;
-  text-align: center;
-
-  span:nth-child(1) {
-    width: 161px;
-    height: 40px;
-    color: #fff;
-    line-height: 40px;
-    font-size: 16px;
-    background: url('@/views/smart-park/images/bg/bg-frame-2.png') no-repeat center;
-    background-size: cover;
-  }
-
-  span:nth-child(2) {
-    width: 161px;
-    height: 66px;
-    color: var(--color-primary-secondary);
-    line-height: 66px;
-    font-size: 34px;
-    background: url('@/views/smart-park/images/bg/bg-frame-3.png') no-repeat center;
-    background-size: cover;
-  }
-
-  &-charts {
-    margin: 71px 0 0 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

src/views/smart-park/components/smart-park-footer.vue

@@ -4,7 +4,7 @@
   <footer>
     <ul class="smart-park__footer-nav">
       <li v-for="index in new Array(5)" :key="index" class="smart-park__footer-item">
-        <img alt="车辆管理" src="@/views/smart-park/images/car/car-39.png" />
+        <img alt="车辆管理" src="../images/car/car-39.png" />
         <span class="text-white hover">车辆管理</span>
       </li>
     </ul>

src/views/smart-park/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import SmartPartContent from '@/views/smart-park/components/smart-park-content/index.vue';
+import SmartParkContent from '@/views/smart-park/components/smart-park-content.vue';
-import SmartPartFooter from '@/views/smart-park/components/smart-park-footer/index.vue';
+import SmartParkFooter from '@/views/smart-park/components/smart-park-footer.vue';
 </script>
 
 <template>
@@ -9,9 +9,9 @@ import SmartPartFooter from '@/views/smart-park/components/smart-park-footer/ind
       <img alt="左箭头" src="@/views/smart-park/images/arrow/arrow-left.png" />
     </div>
 
-    <smart-part-content />
+    <smart-park-content />
 
-    <smart-part-footer />
+    <smart-park-footer />
 
     <div class="smart-park__arrow right-[38px]">
       <img alt="左箭头" src="@/views/smart-park/images/arrow/arrow-right.png" />

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

@@ -6,9 +6,9 @@ const router = useRouter();
 const list = [
   { title: '停车场', image: '/images/welcome/car.png', target: '/smart-park' },
   { title: '数据分析', image: '/images/welcome/distribution.png', target: '/data-analyse' },
-  { title: '智慧渣土', image: '/images/welcome/muck.png', target: '/smart-park' },
+  { title: '大数据', image: '/images/welcome/muck.png', target: '/big-data' },
   { title: '社区', image: '/images/welcome/clean-city.png', target: '/community' },
-  { title: '智慧路灯', image: '/images/welcome/lamp.png', target: '/smart-park' },
+  { title: '经营监督', image: '/images/welcome/lamp.png', target: '/business-supervision' },
 ];
 </script>
 

src/views/welcome/index.vue

@@ -1,12 +1,11 @@
 <script lang="ts" setup>
 import WelcomeContent from '@/views/welcome/components/welcome-content.vue';
-import WelcomeFooter from '@/views/welcome/components/welcome-footer.vue';
 </script>
 
 <template>
   <div class="welcome">
     <welcome-content />
-    <welcome-footer />
+    <!--<welcome-footer />-->
   </div>
 </template>