From 9cca65a6e40ebd265244cdafa2c29d41cd9527b1 Mon Sep 17 00:00:00 2001
From: xiaozzzi <42293085+xiaozzzi@users.noreply.github.com>
Date: Wed, 4 Oct 2023 17:20:23 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=A0=B7=E5=BC=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blossom-editor/src/renderer/components.d.ts   |   1 +
 .../renderer/src/views/home/ArticleStars.vue  | 229 ++++++++++--------
 .../src/views/home/ArticleSubjects.vue        | 197 ++++++++-------
 .../src/renderer/src/views/home/Home.vue      | 112 ++++-----
 .../renderer/src/views/home/StatisticCard.vue |   2 +-
 5 files changed, 292 insertions(+), 249 deletions(-)

diff --git a/blossom-editor/src/renderer/components.d.ts b/blossom-editor/src/renderer/components.d.ts
index 4b27bb4..11c8ea2 100644
--- a/blossom-editor/src/renderer/components.d.ts
+++ b/blossom-editor/src/renderer/components.d.ts
@@ -41,6 +41,7 @@ declare module 'vue' {
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
diff --git a/blossom-editor/src/renderer/src/views/home/ArticleStars.vue b/blossom-editor/src/renderer/src/views/home/ArticleStars.vue
index 9411b9e..9255538 100644
--- a/blossom-editor/src/renderer/src/views/home/ArticleStars.vue
+++ b/blossom-editor/src/renderer/src/views/home/ArticleStars.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="article-stars-root">
+  <el-scrollbar :onresize="false">
+    <!-- <div class="article-stars-root"> -->
     <div v-if="isEmpty(articles)" class="placeholder">
       无收藏的文章
     </div>
@@ -17,7 +18,9 @@
         </div>
       </div>
     </div>
-  </div>
+    <div style="width: 100%;height: 10px;"></div>
+    <!-- </div> -->
+  </el-scrollbar>
 </template>
 
 <!-- 
@@ -61,123 +64,143 @@ defineExpose({ reload })
 </script>
 
 <style scoped lang="scss">
-.article-stars-root {
-  @include box(100%, 100%);
-  @include flex(row, flex-start, flex-start);
-  flex-wrap: wrap;
-  align-content: flex-start;
-  overflow: auto;
-  overflow-y: overlay;
+.el-scrollbar {
+  --el-scrollbar-opacity: 1;
+  --el-scrollbar-hover-opacity: 1;
+  --el-scrollbar-bg-color: var(--el-color-primary-light-8);
+  --el-scrollbar-hover-bg-color: var(--el-color-primary-light-6);
 
-  .placeholder {
-    padding: 20px 0 0 20px;
-    color: var(--bl-text-color-light);
+  :deep(.el-scrollbar__bar) {
+    width: 5px;
+    right: 0px;
   }
 
-  .star-item {
-    @include box(210px, 70px, 210px, 210px);
-    position: relative;
-    margin: 10px 15px;
-    filter: drop-shadow(2px 2px 2px rgb(180, 180, 180));
+  :deep(.el-scrollbar__view) {
+    @include box(100%, 100%);
+    @include flex(row, flex-start, flex-start);
+    flex-wrap: wrap;
+    align-content: flex-start;
+  }
+}
 
-    [class="dark"] & {
-      filter: drop-shadow(2px 2px 2px rgb(0, 0, 0));
+
+// .article-stars-root {
+//   @include box(100%, 100%);
+//   @include flex(row, flex-start, flex-start);
+//   flex-wrap: wrap;
+//   align-content: flex-start;
+//   overflow: auto;
+//   overflow-y: overlay;
+// }
+
+.placeholder {
+  padding: 20px 0 0 20px;
+  color: var(--bl-text-color-light);
+}
+
+.star-item {
+  @include box(210px, 70px, 210px, 210px);
+  position: relative;
+  margin: 10px 15px;
+  filter: drop-shadow(2px 2px 2px rgb(180, 180, 180));
+
+  [class="dark"] & {
+    filter: drop-shadow(2px 2px 2px rgb(0, 0, 0));
+  }
+
+  &:hover {
+    .counterfoil {
+      transform: translateX(-5px);
+    }
+
+    .content {
+      transform: translateX(5px);
+    }
+  }
+
+  .counterfoil,
+  .content {
+    @include flex(row, center, center);
+    @include absolute(0);
+    color: #fff;
+    transition: 0.3s;
+    cursor: pointer;
+    z-index: 2;
+
+    &::before {
+      @include box(100%, 100%);
+      @include absolute('', 0, '', 0);
+      content: '';
+      background: var(--el-color-primary-light-3);
+      border-radius: 10px;
+      -webkit-mask-composite: source-in;
+      mask-composite: source-in;
+      z-index: -1;
+    }
+  }
+
+  // 左侧存根
+  .counterfoil {
+    @include box(53px, 100%);
+    padding: 5px;
+
+    &::before {
+      -webkit-mask: radial-gradient(circle at 10px 10px, transparent 10px, #fff 0) 43px -10px / 120%,
+        radial-gradient(circle at 1px 1px, transparent 2px, #fff 0) 51px 0px / 110% 8%;
     }
 
     &:hover {
-      .counterfoil {
-        transform: translateX(-5px);
-      }
-
-      .content {
-        transform: translateX(5px);
-      }
+      transform: rotate(-10deg);
+      transform-origin: 100% 100%;
     }
 
-    .counterfoil,
-    .content {
-      @include flex(row, center, center);
-      @include absolute(0);
-      color: #fff;
-      transition: 0.3s;
-      cursor: pointer;
-      z-index: 2;
-
-      &::before {
-        @include box(100%, 100%);
-        @include absolute('', 0, '', 0);
-        content: '';
-        background: var(--el-color-primary-light-3);
-        border-radius: 10px;
-        -webkit-mask-composite: source-in;
-        mask-composite: source-in;
-        z-index: -1;
-      }
+    .iconbl {
+      font-size: 30px;
     }
 
-    // 左侧存根
-    .counterfoil {
-      @include box(53px, 100%);
-      padding: 5px;
-
-      &::before {
-        -webkit-mask: radial-gradient(circle at 10px 10px, transparent 10px, #fff 0) 43px -10px / 120%,
-          radial-gradient(circle at 1px 1px, transparent 2px, #fff 0) 51px 0px / 110% 8%;
-      }
-
-      &:hover {
-        transform: rotate(-10deg);
-        transform-origin: 100% 100%;
-      }
-
-      .iconbl {
-        font-size: 30px;
-      }
-
-      .bl-shuxingtiaoma {
-        @include absolute('', '', -3px, 14px);
-        font-size: 22px;
-        transform: rotate(90deg)
-      }
-
-      .bl-tiaoxingma {
-        position: absolute;
-        bottom: -15px;
-        left: 8px;
-        font-size: 40px;
-      }
-
-      .open-barcode {
-        @include absolute('', '', 0px, 17px);
-        font-size: 15px;
-      }
+    .bl-shuxingtiaoma {
+      @include absolute('', '', -3px, 14px);
+      font-size: 22px;
+      transform: rotate(90deg)
     }
 
-    // 
-    .content {
-      @include box(157px, 100%);
-      right: 0;
-      padding: 5px 5px 5px 10px;
-      font-size: 12px;
+    .bl-tiaoxingma {
+      position: absolute;
+      bottom: -15px;
+      left: 8px;
+      font-size: 40px;
+    }
 
-      &::before {
-        -webkit-mask: radial-gradient(circle at 10px 10px, transparent 10px, #000 0) -10px -10px / 120%,
-          // radial-gradient(circle at 10px 10px, transparent 10px, #fff 0) -10px -10px,
-          radial-gradient(circle at 1px 1px, transparent 2px, #000 0) -1px 0px / 110% 8%;
-      }
+    .open-barcode {
+      @include absolute('', '', 0px, 17px);
+      font-size: 15px;
+    }
+  }
 
-      .name {
-        @include box(100%, calc(100% - 12px));
-      }
+  // 
+  .content {
+    @include box(157px, 100%);
+    right: 0;
+    padding: 5px 5px 5px 10px;
+    font-size: 12px;
 
-      .infos {
-        @include box(140px, 12px);
-        @include flex(row, space-between, center);
-        @include font(10px, 300);
-        @include absolute('', '', 2px, 12px);
-        border-top: 1px dashed #f1f1f1;
-        padding-top: 4px;
-      }
+    &::before {
+      -webkit-mask: radial-gradient(circle at 10px 10px, transparent 10px, #000 0) -10px -10px / 120%,
+        // radial-gradient(circle at 10px 10px, transparent 10px, #fff 0) -10px -10px,
+        radial-gradient(circle at 1px 1px, transparent 2px, #000 0) -1px 0px / 110% 8%;
+    }
+
+    .name {
+      @include box(100%, calc(100% - 12px));
+    }
+
+    .infos {
+      @include box(140px, 12px);
+      @include flex(row, space-between, center);
+      @include font(10px, 300);
+      @include absolute('', '', 2px, 12px);
+      border-top: 1px dashed #f1f1f1;
+      padding-top: 4px;
     }
   }
 }
diff --git a/blossom-editor/src/renderer/src/views/home/ArticleSubjects.vue b/blossom-editor/src/renderer/src/views/home/ArticleSubjects.vue
index e18a5fe..17229dc 100644
--- a/blossom-editor/src/renderer/src/views/home/ArticleSubjects.vue
+++ b/blossom-editor/src/renderer/src/views/home/ArticleSubjects.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="home-subject-root">
+  <el-scrollbar>
     <div v-if="isEmpty(subjects)" class="placeholder">
       无专题内容
     </div>
@@ -35,9 +35,10 @@
           <span class="iconbl bl-a-clock3-line"></span>{{ subject.subjectUpdTime }}
         </div>
       </bl-row>
-
     </div>
-  </div>
+
+    <div style="width: 100%;height: 5px;"></div>
+  </el-scrollbar>
 </template>
 
 <script setup lang="ts">
@@ -77,107 +78,125 @@ const toToc = (articleId: number) => {
 </script>
 
 <style scoped lang="scss">
-.home-subject-root {
-  // @include box(900px, 100%);
-  @include box(100%, 100%);
-  @include flex(row, flex-start, flex-start);
-  flex-wrap: wrap;
-  align-content: flex-start;
-  overflow: auto;
-  overflow-y: overlay;
+.el-scrollbar {
+  --el-scrollbar-opacity: 1;
+  --el-scrollbar-hover-opacity: 1;
+  --el-scrollbar-bg-color: var(--el-color-primary-light-8);
+  --el-scrollbar-hover-bg-color: var(--el-color-primary-light-6);
 
-  .placeholder {
-    padding: 20px 0 0 20px;
-    color: var(--bl-text-color-light);
+  :deep(.el-scrollbar__bar) {
+    width: 5px;
+    right: 0px;
   }
 
-  $width-item: 210px;
+  :deep(.el-scrollbar__view) {
+    @include box(100%, 100%);
+    @include flex(row, flex-start, flex-start);
+    flex-wrap: wrap;
+    align-content: flex-start;
+  }
+}
 
-  .subject-item {
-    @include flex(column, flex-start, flex-start);
-    @include box($width-item, 90px, $width-item, $width-item);
-    @include themeShadow(3px 3px 5px 1px rgba(88, 88, 88, 0.3), 3px 3px 5px 1px rgba(0, 0, 0, 1));
-    @include themeBg(linear-gradient(155deg, #ffffff00 0%, #F0F0F0 60%, var(--bl-subject-color1) 100%),
-      linear-gradient(155deg, var(--bl-html-color) 0%, var(--el-color-primary-light-9) 60%, var(--bl-subject-color1) 100%));
-    border-radius: 5px;
-    margin: 15px;
-    transition: 0.3s;
-    position: relative;
-    overflow: hidden;
-    cursor: pointer;
-    z-index: 1;
+// .home-subject-root {
+//   @include box(100%, 100%);
+//   @include flex(row, flex-start, flex-start);
+//   flex-wrap: wrap;
+//   align-content: flex-start;
+//   overflow: auto;
+//   overflow-y: overlay;
+// }
 
-    &:hover {
-      transform: translateY(-5px);
-      @include themeShadow(3px 3px 5px 1px rgb(116, 116, 116), 3px 3px 5px 1px rgba(0, 0, 0, 1));
+.placeholder {
+  padding: 20px 0 0 20px;
+  color: var(--bl-text-color-light);
+}
 
-      .seal {
-        text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
-        transform: translateY(-30px);
-        @include themeShadow(0 3px 15px 1px rgb(116, 116, 116), 3px 3px 5px 1px rgba(0, 0, 0, 1));
+$width-item: 210px;
 
-        [class="dark"] & {
-          text-shadow: 5px 5px 15px #000, -3px -3px 10px rgba(255, 255, 255, .5);
-        }
-      }
+.subject-item {
+  @include flex(column, flex-start, flex-start);
+  @include box($width-item, 90px, $width-item, $width-item);
+  @include themeShadow(3px 3px 5px 1px rgba(88, 88, 88, 0.3), 3px 3px 5px 1px rgba(0, 0, 0, 1));
+  @include themeBg(linear-gradient(155deg, #ffffff00 0%, #F0F0F0 60%, var(--bl-subject-color1) 100%),
+    linear-gradient(155deg, var(--bl-html-color) 0%, var(--el-color-primary-light-9) 60%, var(--bl-subject-color1) 100%));
+  border-radius: 5px;
+  margin: 15px;
+  transition: 0.3s;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  z-index: 1;
 
-      .inner {
-        opacity: 1;
-      }
-    }
-
-    .progress {
-      @include box($width-item, 2px);
-      @include absolute(0, '', '', 0);
-      z-index: 3;
-    }
+  &:hover {
+    transform: translateY(-5px);
+    @include themeShadow(3px 3px 5px 1px rgb(116, 116, 116), 3px 3px 5px 1px rgba(0, 0, 0, 1));
 
     .seal {
-      @include flex(row, space-between, center);
-      @include box($width-item, 40px);
-      @include font(14px, 500);
-      @include themeColor(#636363, #CDCDCD);
-      @include themeShadow(0 3px 10px rgb(144, 144, 144), 0 3px 5px rgb(37, 37, 37));
-      padding: 5px 10px;
-      border-bottom-left-radius: 30px;
-      border-bottom-right-radius: 30px;
-      text-shadow: 2px 2px 5px rgb(54, 54, 54);
-      backdrop-filter: blur(5px);
-      transition: 0.3s;
-      z-index: 2;
+      text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
+      transform: translateY(-30px);
+      @include themeShadow(0 3px 15px 1px rgb(116, 116, 116), 3px 3px 5px 1px rgba(0, 0, 0, 1));
+
+      [class="dark"] & {
+        text-shadow: 5px 5px 15px #000, -3px -3px 10px rgba(255, 255, 255, .5);
+      }
     }
 
     .inner {
-      @include box(calc(#{$width-item} - 30px), 25px);
-      @include absolute(1px, '', '', 15px);
-      border-bottom-left-radius: 30px;
-      border-bottom-right-radius: 30px;
-      @include themeShadow(inset 0 3px 10px rgb(84, 84, 84), inset 0 3px 10px rgb(0, 0, 0));
-      transition: 1.5s;
-      opacity: 0;
+      opacity: 1;
+    }
+  }
+
+  .progress {
+    @include box($width-item, 2px);
+    @include absolute(0, '', '', 0);
+    z-index: 3;
+  }
+
+  .seal {
+    @include flex(row, space-between, center);
+    @include box($width-item, 40px);
+    @include font(14px, 500);
+    @include themeColor(#636363, #CDCDCD);
+    @include themeShadow(0 3px 10px rgb(144, 144, 144), 0 3px 5px rgb(37, 37, 37));
+    padding: 5px 10px;
+    border-bottom-left-radius: 30px;
+    border-bottom-right-radius: 30px;
+    text-shadow: 2px 2px 5px rgb(54, 54, 54);
+    backdrop-filter: blur(5px);
+    transition: 0.3s;
+    z-index: 2;
+  }
+
+  .inner {
+    @include box(calc(#{$width-item} - 30px), 25px);
+    @include absolute(1px, '', '', 15px);
+    border-bottom-left-radius: 30px;
+    border-bottom-right-radius: 30px;
+    @include themeShadow(inset 0 3px 10px rgb(84, 84, 84), inset 0 3px 10px rgb(0, 0, 0));
+    transition: 1.5s;
+    opacity: 0;
+  }
+
+  .subject-icon {
+    @include box(55px, 55px);
+    @include absolute('', 2px, 8px, '');
+    @include themeFilter(drop-shadow(0 0 3px rgb(62, 62, 62)), drop-shadow(0 0 3px #000000));
+  }
+
+  .infos {
+    @include box(100%, 25px);
+    @include font(11px, 300);
+    @include themeColor(#595959, #8D8D8D);
+    padding: 5px 10px;
+
+    .iconbl {
+      font-size: 12px;
+      margin-right: 5px;
+      transition: 0.3s;
     }
 
-    .subject-icon {
-      @include box(55px, 55px);
-      @include absolute('', 2px, 8px, '');
-      @include themeFilter(drop-shadow(0 0 3px rgb(62, 62, 62)), drop-shadow(0 0 3px #000000));
-    }
-
-    .infos {
-      @include box(100%, 25px);
-      @include font(11px, 300);
-      @include themeColor(#595959, #8D8D8D);
-      padding: 5px 10px;
-
-      .iconbl {
-        font-size: 12px;
-        margin-right: 5px;
-        transition: 0.3s;
-      }
-
-      .bl-sendmail-fill {
-        font-size: 15px;
-      }
+    .bl-sendmail-fill {
+      font-size: 15px;
     }
   }
 }
diff --git a/blossom-editor/src/renderer/src/views/home/Home.vue b/blossom-editor/src/renderer/src/views/home/Home.vue
index 597548c..e3a1703 100644
--- a/blossom-editor/src/renderer/src/views/home/Home.vue
+++ b/blossom-editor/src/renderer/src/views/home/Home.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="global-home-root">
     <div class="main">
-      <bl-row class="greetings">
+      <bl-row class="greetings" height="65px">
         Good {{ now }}.
       </bl-row>
       <!--  -->
@@ -20,45 +20,46 @@
       </bl-row>
 
       <!-- 统计 -->
-      <bl-row class="container-name">字数统计</bl-row>
-      <bl-row width="100%" height="270px">
-        <!-- 字数图表 -->
-        <bl-col width="calc(100% - 200px)">
-          <bl-row class="container-sub-name">
-            Article Words
-            <span class="iconbl bl-refresh-smile container-refresh" @click="loadWordLine"></span>
-          </bl-row>
-          <ChartLineWords ref="ChartLineWordsRef"></ChartLineWords>
-        </bl-col>
-        <!-- 统计卡片 -->
-        <bl-col width="200px" style="margin-left: 20px;">
-          <bl-row class="container-sub-name">Blossom Statistic</bl-row>
-          <StatisticCard></StatisticCard>
-        </bl-col>
-      </bl-row>
+      <el-scrollbar height="calc(100% - 315px)" wrap-style="padding-right:20px">
+        <bl-row class="container-name">字数统计</bl-row>
+        <bl-row width="100%" height="270px">
+          <!-- 字数图表 -->
+          <bl-col width="calc(100% - 200px)">
+            <bl-row class="container-sub-name">
+              Article Words
+              <span class="iconbl bl-refresh-smile container-refresh" @click="loadWordLine"></span>
+            </bl-row>
+            <ChartLineWords ref="ChartLineWordsRef"></ChartLineWords>
+          </bl-col>
+          <!-- 统计卡片 -->
+          <bl-col width="200px" style="margin-left: 20px;">
+            <bl-row class="container-sub-name">Blossom Statistic</bl-row>
+            <StatisticCard></StatisticCard>
+          </bl-col>
+        </bl-row>
 
-      <!-- 流量统计 -->
-      <bl-row class="container-name">请求流量</bl-row>
-      <bl-row class="container-sub-name">
-        Flow Statistic / Requests & Average Response Time(ms)
-        <span class="iconbl bl-refresh-smile container-refresh" @click="loadSentinlLine"></span>
-      </bl-row>
-      <bl-row width="880px" height="250px">
-        <SentinelChartLine ref="SentinelChartLineRef"></SentinelChartLine>
-      </bl-row>
-
-      <!-- 热力图 -->
-      <bl-col class="heatmap-container" width="100%" style="height: 330px;">
-        <bl-row class="container-name">编辑热力图</bl-row>
+        <!-- 流量统计 -->
+        <bl-row class="container-name">请求流量</bl-row>
         <bl-row class="container-sub-name">
-          每日编辑文章数 (每5分钟更新)
-          <span class="iconbl bl-refresh-smile container-refresh" @click="loadArticleHeapmap"></span>
+          Flow Statistic / Requests & Average Response Time(ms)
+          <span class="iconbl bl-refresh-smile container-refresh" @click="loadSentinlLine"></span>
         </bl-row>
-        <bl-row style="height: calc(100% - 60px - 20px);">
-          <ChartHeatmap ref="ChartHeatmapRef"></ChartHeatmap>
+        <bl-row width="880px" height="250px">
+          <SentinelChartLine ref="SentinelChartLineRef"></SentinelChartLine>
         </bl-row>
-      </bl-col>
 
+        <!-- 热力图 -->
+        <bl-col class="heatmap-container" width="100%" style="height: 360px;">
+          <bl-row class="container-name">编辑热力图</bl-row>
+          <bl-row class="container-sub-name">
+            每日编辑文章数 (每5分钟更新)
+            <span class="iconbl bl-refresh-smile container-refresh" @click="loadArticleHeapmap"></span>
+          </bl-row>
+          <bl-row style="height: calc(100% - 60px - 20px);">
+            <ChartHeatmap ref="ChartHeatmapRef"></ChartHeatmap>
+          </bl-row>
+        </bl-col>
+      </el-scrollbar>
     </div>
 
     <!-- 
@@ -195,8 +196,8 @@ let now: string = nowWhen()
     cursor: pointer;
 
     &:hover {
-      animation: rotation 4s linear infinite;
-      text-shadow: var(--bl-text-shadow);
+      animation: rotation 10s linear infinite;
+      text-shadow: none;
     }
   }
 
@@ -205,7 +206,7 @@ let now: string = nowWhen()
   $margin-web: 30px 0 50px 0px;
   $margin-middle: 10px;
 
-  $width-main: 900px;
+  $width-main: 910px;
   $width-web: 420px;
   $width-middle: calc(100% -
       /* border */
@@ -219,8 +220,7 @@ let now: string = nowWhen()
 
   .main {
     @include box($width-main, 100%, $width-main, $width-main);
-    padding: 0 10px 10px 20px;
-    $height-greetings: 65px;
+    padding: 0 0 10px 20px;
     z-index: 2;
 
     // 笔记本图片等
@@ -240,21 +240,28 @@ let now: string = nowWhen()
     }
 
     .greetings {
-      height: $height-greetings;
       @include font(50px, 700);
       @include themeColor(#5C5C5C, var(--el-color-primary));
       text-shadow: var(--bl-text-shadow);
     }
 
     .now-time {
-      height: 20px;
       @include themeColor(#5C5C5C, var(--el-color-primary));
+      height: 20px;
       text-shadow: var(--bl-text-shadow);
       font-size: 12px;
     }
 
-    .heatmap-container {
-      opacity: 0;
+    .el-scrollbar {
+      --el-scrollbar-opacity: 1;
+      --el-scrollbar-hover-opacity: 1;
+      --el-scrollbar-bg-color: var(--el-color-primary-light-8);
+      --el-scrollbar-hover-bg-color: var(--el-color-primary-light-6);
+
+      :deep(.el-scrollbar__bar) {
+        width: 5px;
+        right: 3px;
+      }
     }
   }
 
@@ -263,7 +270,8 @@ let now: string = nowWhen()
     @include box($width-middle, 100%, $width-middle, $width-middle);
     position: relative;
     transition: 0.2s;
-    opacity: 0;
+    // opacity: 0;
+    display: none;
     z-index: 2;
   }
 
@@ -287,21 +295,13 @@ let now: string = nowWhen()
     }
   }
 
-  @media screen and (min-height: 1120px) {
-    .main {
-      .heatmap-container {
-        opacity: 1 !important;
-      }
-    }
-  }
-
   // 大于1600时使用以下样式
   @media screen and (min-width: 1600px) {
-
     .middle {
       @include themeBorder(1px, #E6E6E6, #171717, 'left');
-      opacity: 1 !important;
-      margin-left: $margin-middle;
+      // opacity: 1 !important;
+      display: block;
+      // margin-left: $margin-middle;
       padding: 0 10px 10px 20px;
     }
   }
diff --git a/blossom-editor/src/renderer/src/views/home/StatisticCard.vue b/blossom-editor/src/renderer/src/views/home/StatisticCard.vue
index 5ae61a3..6c500c1 100644
--- a/blossom-editor/src/renderer/src/views/home/StatisticCard.vue
+++ b/blossom-editor/src/renderer/src/views/home/StatisticCard.vue
@@ -67,7 +67,7 @@ onActivated(() => {
   transition: 0.3s;
 
   &:hover {
-    box-shadow: var(--bl-box-shadow-dialog);
+    @include themeShadow(2px 3px 7px 0 rgba(58, 47, 47, 0.5), 3px 3px 10px 0 rgba(0, 0, 0, 1));
 
     .icon-shadow {
       @include font(150px, 500);