c-chengc1/zhgh_nau
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
c-chengc1
2026-10-16 15:21:07 +08:00
parent c1dfe9b7a1
commit 143d9eb0ce
1 changed files with 35 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/views/platform/zhghh5/sys/home/home.js
+32 -48
View File
@@ -37,7 +37,7 @@ const home = {
<div class="quick-entry-item" <div class="quick-entry-item"
v-for="item in quickEntries" v-for="item in quickEntries"
@click="menuClick(item)" @click="menuClick(item)"
:key="item.id"> :key="item.id">
<div class="quick-entry-icon"> <div class="quick-entry-icon">
<img v-if="getQuickEntryIcon(item)" :src="getQuickEntryIcon(item)" alt=""> <img v-if="getQuickEntryIcon(item)" :src="getQuickEntryIcon(item)" alt="">
<van-icon v-else name="apps-o" size="36"></van-icon> <van-icon v-else name="apps-o" size="36"></van-icon>
@@ -51,12 +51,12 @@ const home = {
<!--娲诲姩鍒楄〃--> <!--娲诲姩鍒楄〃-->
<div class="feature-panel"> <div class="feature-panel">
<div <div
class="feature-card" class="feature-card"
:class="[item.className, { 'feature-card--primary': index === 0 }]" :class="[item.className, { 'feature-card--primary': index === 0 }]"
:style="{ backgroundImage: 'url(' + item.asset + ')' }" :style="{ backgroundImage: 'url(' + item.asset + ')' }"
v-for="(item, index) in featuredEntries" v-for="(item, index) in featuredEntries"
:key="item.name" :key="item.name"
@click="featureClick(item)"> @click="featureClick(item)">
<div class="feature-card__text"> <div class="feature-card__text">
<div class="feature-card__title">{{ item.name }}</div> <div class="feature-card__title">{{ item.name }}</div>
<div class="feature-card__desc">{{ item.desc }}</div> <div class="feature-card__desc">{{ item.desc }}</div>
@@ -89,7 +89,6 @@ const home = {
<van-icon v-if="spreadActiveIndex === index" name="success" color="#1989fa"></van-icon> <van-icon v-if="spreadActiveIndex === index" name="success" color="#1989fa"></van-icon>
</button> </button>
</div> </div>
<div class="union-news-viewport" ref="spreadViewport">
<div v-if="spreadLoading && !spreadDynamics.length" class="union-news-list union-news-list--skeleton"> <div v-if="spreadLoading && !spreadDynamics.length" class="union-news-list union-news-list--skeleton">
<div class="union-news-item union-news-item--skeleton" <div class="union-news-item union-news-item--skeleton"
v-for="index in 2" v-for="index in 2"
@@ -109,7 +108,7 @@ const home = {
</div> </div>
</div> </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" <div class="union-news-item"
v-for="item in spreadDynamics" v-for="item in spreadDynamics"
:key="item.href || item.title" :key="item.href || item.title"
@@ -150,7 +149,6 @@ const home = {
alt="暂无工会动态"> alt="暂无工会动态">
<span class="union-news-empty__text">暂无工会动态</span> <span class="union-news-empty__text">暂无工会动态</span>
</div> </div>
</div>
</div> </div>
<div class="classroom-section"> <div class="classroom-section">
@@ -575,12 +573,14 @@ const home = {
}) })
}, },
selectSpreadSection(index) { selectSpreadSection(index) {
// 切换栏目时复位列表滚动位置；固定视口避免不同数据量引发页面跳动。 // 切换栏目后回到横向卡片列表开头，等待新栏目列表渲染完成。
// 新闻样式锚定 home-page 根节点作用域，动态行无需等待 styleMixin 异步补属性。 // 新闻样式锚定 home-page 根节点作用域，动态行无需等待 styleMixin 异步补属性。
const section = this.spreadSections[index] || {} const section = this.spreadSections[index] || {}
this.$set(this, "spreadActiveIndex", index) this.$set(this, "spreadActiveIndex", index)
this.$set(this, "spreadDynamics", section.value || []) 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() this.loadSpreadImages()
}, },
loadSpreadImages() { loadSpreadImages() {
@@ -1570,7 +1570,10 @@ const home = {
.home-page/deep/ .union-news-list { .home-page/deep/ .union-news-list {
margin-top: 7px; margin-top: 7px;
padding-bottom: 3px; padding-bottom: 3px;
display: block; display: flex;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none; scrollbar-width: none;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
@@ -1580,16 +1583,16 @@ const home = {
} }
.home-page/deep/ .union-news-item--skeleton { .home-page/deep/ .union-news-item--skeleton {
height: 96px; height: 100px;
min-height: 96px; min-height: 100px;
} }
.home-page/deep/ .union-news-skeleton__cover { .home-page/deep/ .union-news-skeleton__cover {
width: 80px; width: 104px;
height: 48px; height: 78px;
margin-right: 10px; margin-right: 12px;
flex-shrink: 0; flex-shrink: 0;
border-radius: 4px; border-radius: 6px;
} }
.home-page/deep/ .union-news-skeleton__content { .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-skeleton__meta span:last-child { width: 28px; }
.home-page/deep/ .union-news-item { .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; flex-shrink: 0;
display: flex; display: flex;
align-items: center; align-items: center;
border: 0; border: 1px solid #edf1f6;
border-radius: 0; border-radius: 9px;
background-color: #fff; background-color: #fff;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -1630,22 +1633,14 @@ const home = {
} }
.home-page/deep/ .union-news-item__cover { .home-page/deep/ .union-news-item__cover {
width: 80px; width: 104px;
height: 60px; height: 78px;
margin-right: 10px; margin-right: 12px;
flex-shrink: 0; flex-shrink: 0;
border-radius: 4px; border-radius: 6px;
object-fit: cover; 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 { .home-page/deep/ .union-news-item__placeholder {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -1655,17 +1650,6 @@ const home = {
font-size: 26px; 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 { .home-page/deep/ .union-news-item__content {
min-width: 0; min-width: 0;
flex: 1; flex: 1;