feat: 首页媒体查询

src/layout/components/Main/index.vue

@@ -3,7 +3,7 @@
     <a-layout-content :class="isFooter ? 'content' : 'content-no-footer'">
       <Tabs v-if="isTabs" />
       <a-scrollbar style="height: 100%; overflow: auto" :outer-class="isTabs ? 'scrollbar' : 'scrollbar-no-tabs'">
-        <div class="main">
+        <div>
           <router-view v-slot="{ Component, route }">
             <MainTransition>
               <keep-alive :include="cacheRoutes">
@@ -58,10 +58,6 @@ watch(watermarkConfig, newv => {
   background: $color-fill-1; // 背景颜色
 }
 
-.main {
-  padding: $padding;
-}
-
 // 修改左侧滚动条宽度
 :deep(.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar) {
   width: 4px;

src/layout/index.vue

@@ -25,18 +25,6 @@ onMounted(() => {
   // 页面渲染完毕，结束loading
   loadingPage.done(200);
 });
-
-// 页面加载前
-onBeforeMount(() => {
-  onLayoutResize();
-  window.addEventListener("resize", onLayoutResize);
-});
-
-// 监听页面大小
-const onLayoutResize = () => {
-  let clientWidth = document.body.clientWidth;
-  console.log("窗口大小", clientWidth);
-};
 </script>
 
 <style lang="scss" scoped></style>

src/style/global-style.scss

@@ -1,5 +1,6 @@
 /* global style scss */
 .dc-page {
+  margin: $padding;
   padding: $padding;
   background: $color-bg-1;
 }

src/style/index.scss

@@ -14,7 +14,7 @@ body,
 #app {
   margin: 0;
   padding: 0;
-  height: 100%;
+  overflow: hidden;
 }
 
 html {
@@ -22,8 +22,6 @@ html {
 }
 
 #app {
-  width: 100vw;
-  height: 100vh;
   overflow: hidden;
 }
 

src/views/home/components/data-box.vue

@@ -5,21 +5,21 @@
         <span class="data-title">销售额趋势</span>
         <span class="data-subtext">单位：元</span>
       </div>
-      <SellHistogram />
+      <HistogramChart />
     </div>
     <div class="monthly-analysis">
       <div>
         <span class="data-title">现金分析</span>
         <span class="data-subtext">单位：元</span>
       </div>
-      <MonthlyAnalysis />
+      <AnalysisChart />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import SellHistogram from "@/views/home/components/sell-histogram.vue";
-import MonthlyAnalysis from "@/views/home/components/monthly-analysis.vue";
+import HistogramChart from "@/views/home/components/histogram-chart.vue";
+import AnalysisChart from "@/views/home/components/analysis-chart.vue";
 </script>
 
 <style lang="scss" scoped>
@@ -37,17 +37,5 @@ import MonthlyAnalysis from "@/views/home/components/monthly-analysis.vue";
     color: $color-text-2;
     margin-left: $margin-text;
   }
-  // .sell-histogram {
-  //   // width: calc(100% - 600px - $padding);
-  //   width: 100%;
-  //   height: 400px;
-  //   padding-bottom: $padding;
-  // }
-  // .monthly-analysis {
-  //   margin-left: $padding;
-  //   width: 100%;
-  //   height: 400px;
-  //   padding-bottom: $padding;
-  // }
 }
 </style>

src/views/home/components/data-box2.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="data-box">
-    <a-row :gutter="[16, 16]">
-      <a-col :xs="24" :sm="24" :xl="16">
-        <div>
-          <span class="data-title">销售额趋势</span>
-          <span class="data-subtext">单位：元</span>
-        </div>
-        <SellHistogram />
-      </a-col>
-      <a-col :xs="24" :sm="24" :xl="8">
-        <div>
-          <span class="data-title">现金分析</span>
-          <span class="data-subtext">单位：元</span>
-        </div>
-        <MonthlyAnalysis />
-      </a-col>
-    </a-row>
-  </div>
-</template>
-
-<script setup lang="ts">
-import SellHistogram from "@/views/home/components/sell-histogram.vue";
-import MonthlyAnalysis from "@/views/home/components/monthly-analysis.vue";
-</script>
-
-<style lang="scss" scoped>
-.data-box {
-  margin-top: calc($padding * 2);
-  // border: 1px solid red;
-  .data-title {
-    font-size: $font-size-body-3;
-    color: $color-text-1;
-  }
-  .data-subtext {
-    font-size: $font-size-body-2;
-    color: $color-text-2;
-  }
-}
-</style>