update SiteNotice.vue

src/components/card/SiteNotice.vue

@@ -7,10 +7,10 @@
       </div>
     </div>
 
-    <div class="notice-content">
+    <div class="notice-body">
       <el-skeleton :loading="loading" :rows="5" animated>
         <template>
-          <el-scrollbar class="custom-scrollbar">
+          <el-scrollbar class="custom-scrollbar" ref="scrollbar">
             <div class="html-container" v-html="content || '暂无公告'" />
           </el-scrollbar>
         </template>
@@ -53,22 +53,25 @@ export default {
 
 <style lang="scss" scoped>
 .notice-card {
-  height: 100%; // 关键：配合 Home.vue 的 align-items: stretch
+  height: 100%;
   display: flex;
   flex-direction: column;
   border-radius: 12px;
   border: none;
+  overflow: hidden; // 防止内容溢出卡片圆角
 
-  // 深度选择器修改 el-card 内部结构
   ::v-deep .el-card__header {
     padding: 12px 16px;
+    flex-shrink: 0; // 头部高度固定，不参与压缩
     border-bottom: 1px solid #f0f2f5;
   }
 
   ::v-deep .el-card__body {
-    flex: 1; // 让 body 撑开，充满剩余空间
-    overflow: hidden;
-    padding: 15px;
+    flex: 1;           // 占据剩余所有空间
+    display: flex;     // 开启 flex 模式
+    flex-direction: column;
+    overflow: hidden;  // 关键：body 不能溢出，才能让里面的 scrollbar 滚动
+    padding: 15px !important;
   }
 }
 
@@ -76,65 +79,58 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-
   .header-left {
     display: flex;
     align-items: center;
-    gap: 10px; // 图标和文字的间距
-  }
-
-  .notice-icon {
-    width: 24px;
-    height: 24px;
-    object-fit: contain;
-  }
-
-  .notice-title {
-    font-size: 16px;
-    font-weight: 600;
-    color: #303133;
+    gap: 10px;
   }
+  .notice-icon { width: 22px; height: 22px; }
+  .notice-title { font-size: 16px; font-weight: 600; color: #303133; }
 }
 
-.notice-content {
+.notice-body {
+  flex: 1;             // 填满卡片 body
   height: 100%;
+  position: relative;  // 为 scrollbar 提供参考高度
+  overflow: hidden;
 
   .custom-scrollbar {
-    height: 100%;
+    height: 100%;      // 强制充满容器
 
-    // 隐藏横向滚动条
     ::v-deep .el-scrollbar__wrap {
-      overflow-x: hidden;
-    }
-  }
-
-  .html-container {
-    font-size: 14px;
-    line-height: 1.6;
-    color: #606266;
-    word-break: break-all;
-
-    // 优化 v-html 内部可能出现的图片
-    ::v-deep img {
-      max-width: 100%;
-      height: auto;
-      border-radius: 4px;
+      overflow-x: hidden; // 彻底禁用横向滚动
+      margin-bottom: 0 !important; // 修复 Element UI 可能出现的原生滚动条间隙
     }
 
-    ::v-deep p {
-      margin-bottom: 8px;
+    // 让内容区平滑滚动
+    ::v-deep .el-scrollbar__view {
+      padding-right: 10px; // 为右侧滚动条留出一点呼吸感
     }
   }
 }
 
-/* 响应式适配 */
-@media screen and (max-width: 768px) {
-  .notice-title {
-    font-size: 14px;
+.html-container {
+  font-size: 14px;
+  line-height: 1.8;
+  color: #606266;
+  word-break: break-all;
+
+  ::v-deep img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+    margin: 8px 0;
   }
 
+  ::v-deep p { margin-bottom: 12px; }
+  ::v-deep a { color: #409EFF; text-decoration: none; &:hover { text-underline: underline; } }
+}
+
+/* 响应式：在 PC 端跟随轮播图高度，在移动端固定高度 */
+@media screen and (max-width: 991px) {
   .notice-card {
-    height: 240px; // 移动端固定一个高度，防止无限拉长
+    height: 250px; // 轮播图下方显示的公告高度
+    margin-top: 10px;
   }
 }
 </style>