feat:h5首页工会动态模块恢复左右滑动样式

src/main/resources/views/platform/zhghh5/sys/home/home.js

@@ -89,7 +89,6 @@ const home = {
                         <van-icon v-if="spreadActiveIndex === index" name="success" color="#1989fa"></van-icon>
                     </button>
                 </div>
-                <div class="union-news-viewport" ref="spreadViewport">
                 <div v-if="spreadLoading && !spreadDynamics.length" class="union-news-list union-news-list--skeleton">
                     <div class="union-news-item union-news-item--skeleton"
                          v-for="index in 2"
@@ -109,7 +108,7 @@ const home = {
                         </div>
                     </div>
                 </div>
-                <div class="union-news-list" v-else-if="spreadDynamics.length">
+                <div class="union-news-list" ref="spreadViewport" v-else-if="spreadDynamics.length">
                     <div class="union-news-item"
                          v-for="item in spreadDynamics"
                          :key="item.href || item.title"
@@ -151,7 +150,6 @@ const home = {
                     <span class="union-news-empty__text">暂无工会动态</span>
                 </div>
             </div>
-            </div>
             
             <div class="classroom-section">
                 <div class="classroom-section__head">
@@ -575,12 +573,14 @@ const home = {
             })
         },
         selectSpreadSection(index) {
-            // 切换栏目时复位列表滚动位置；固定视口避免不同数据量引发页面跳动。
+            // 切换栏目后回到横向卡片列表开头，等待新栏目列表渲染完成。
             // 新闻样式锚定 home-page 根节点作用域，动态行无需等待 styleMixin 异步补属性。
             const section = this.spreadSections[index] || {}
             this.$set(this, "spreadActiveIndex", index)
             this.$set(this, "spreadDynamics", section.value || [])
-            if (this.$refs.spreadViewport) this.$refs.spreadViewport.scrollTop = 0
+            this.$nextTick(() => {
+                if (this.$refs.spreadViewport) this.$refs.spreadViewport.scrollLeft = 0
+            })
             this.loadSpreadImages()
         },
         loadSpreadImages() {
@@ -1570,7 +1570,10 @@ const home = {
         .home-page/deep/ .union-news-list {
             margin-top: 7px;
             padding-bottom: 3px;
-            display: block;
+            display: flex;
+            gap: 10px;
+            overflow-x: auto;
+            overflow-y: hidden;
             scrollbar-width: none;
             -webkit-overflow-scrolling: touch;
         }
@@ -1580,16 +1583,16 @@ const home = {
         }
 
         .home-page/deep/ .union-news-item--skeleton {
-            height: 96px;
+            height: 100px;
-            min-height: 96px;
+            min-height: 100px;
         }
 
         .home-page/deep/ .union-news-skeleton__cover {
-            width: 80px;
+            width: 104px;
-            height: 48px;
+            height: 78px;
-            margin-right: 10px;
+            margin-right: 12px;
             flex-shrink: 0;
-            border-radius: 4px;
+            border-radius: 6px;
         }
 
         .home-page/deep/ .union-news-skeleton__content {
@@ -1608,15 +1611,15 @@ const home = {
         .home-page/deep/ .union-news-skeleton__meta span:last-child { width: 28px; }
 
         .home-page/deep/ .union-news-item {
-            width: 100%;
+            width: calc(100% - 32px);
-            min-width: 0;
+            min-width: calc(100% - 32px);
-            height: 96px;
+            min-height: 100px;
-            padding: 12px 0;
+            padding: 10px;
             flex-shrink: 0;
             display: flex;
             align-items: center;
-            border: 0;
+            border: 1px solid #edf1f6;
-            border-radius: 0;
+            border-radius: 9px;
             background-color: #fff;
             box-sizing: border-box;
         }
@@ -1630,22 +1633,14 @@ const home = {
         }
 
         .home-page/deep/ .union-news-item__cover {
-            width: 80px;
+            width: 104px;
-            height: 60px;
+            height: 78px;
-            margin-right: 10px;
+            margin-right: 12px;
             flex-shrink: 0;
-            border-radius: 4px;
+            border-radius: 6px;
             object-fit: cover;
         }
 
-        .home-page/deep/ .union-news-viewport {
-            height: 288px;
-            overflow-y: auto;
-            overflow-x: hidden;
-            overscroll-behavior: contain;
-            overflow-anchor: none;
-        }
-
         .home-page/deep/ .union-news-item__placeholder {
             display: flex;
             align-items: center;
@@ -1655,17 +1650,6 @@ const home = {
             font-size: 26px;
         }
 
-        .home-page/deep/ .union-news-empty {
-            height: 100%;
-            box-sizing: border-box;
-            justify-content: center;
-        }
-
-        .home-page/deep/ .union-news-empty__image {
-            max-height: 200px;
-            object-fit: contain;
-        }
-
         .home-page/deep/ .union-news-item__content {
             min-width: 0;
             flex: 1;