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
+35 -51
View File
@@ -37,7 +37,7 @@ const home = {
<div class="quick-entry-item"
v-for="item in quickEntries"
@click="menuClick(item)"
:key="item.id">
:key="item.id">
<div class="quick-entry-icon">
<img v-if="getQuickEntryIcon(item)" :src="getQuickEntryIcon(item)" alt="">
<van-icon v-else name="apps-o" size="36"></van-icon>
@@ -51,12 +51,12 @@ const home = {
<!--娲诲姩鍒楄〃-->
<div class="feature-panel">
<div
class="feature-card"
:class="[item.className, { 'feature-card--primary': index === 0 }]"
:style="{ backgroundImage: 'url(' + item.asset + ')' }"
v-for="(item, index) in featuredEntries"
:key="item.name"
@click="featureClick(item)">
class="feature-card"
:class="[item.className, { 'feature-card--primary': index === 0 }]"
:style="{ backgroundImage: 'url(' + item.asset + ')' }"
v-for="(item, index) in featuredEntries"
:key="item.name"
@click="featureClick(item)">
<div class="feature-card__text">
<div class="feature-card__title">{{ item.name }}</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>
</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"
@@ -150,7 +149,6 @@ const home = {
alt="暂无工会动态">
<span class="union-news-empty__text">暂无工会动态</span>
</div>
</div>
</div>
<div class="classroom-section">
@@ -230,8 +228,8 @@ const home = {
<van-tag class="act-item-wrapper-tag" v-if="$moment().unix() > $moment(item.endDate).unix()">
已结束
</van-tag>
<van-tag class="act-item-wrapper-tag" type="success"
<van-tag class="act-item-wrapper-tag" type="success"
v-else-if="$moment().unix() > $moment(item.startDate).unix() && $moment().unix() < $moment(item.endDate).unix()">
进行中
</van-tag>
@@ -239,7 +237,7 @@ const home = {
<van-tag class="act-item-wrapper-tag" type="success" v-else-if="$moment().unix() < $moment(item.startDate).unix()">
即将开始
</van-tag>
<div class="act-item-cover">
<van-image v-if="item.cover" width="120" height="84" :src="item.cover"></van-image>
</div>
@@ -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;
min-height: 96px;
height: 100px;
min-height: 100px;
}
.home-page/deep/ .union-news-skeleton__cover {
width: 80px;
height: 48px;
margin-right: 10px;
width: 104px;
height: 78px;
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%;
min-width: 0;
height: 96px;
padding: 12px 0;
width: calc(100% - 32px);
min-width: calc(100% - 32px);
min-height: 100px;
padding: 10px;
flex-shrink: 0;
display: flex;
align-items: center;
border: 0;
border-radius: 0;
border: 1px solid #edf1f6;
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;
height: 60px;
margin-right: 10px;
width: 104px;
height: 78px;
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;