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

commit

Browse Source
This commit is contained in:
=
2026-07-29 13:44:45 +08:00
parent a93cbc9704
commit e8ed1d93f9
2 changed files with 78 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/views/layouts/v4/home/act.js
+69 -39
View File
@@ -6,41 +6,39 @@ const act = {
<!-- Swiper容器 --> <!-- Swiper容器 -->
<div v-if="actList && actList.length > 0" class="activity-swiper-container"> <div v-if="actList && actList.length > 0" class="activity-swiper-container">
<div class="activity-swiper-container"> <!-- 活动数据 - Swiper -->
<!-- 活动数据 - Swiper --> <div ref="activitySwiper" class="swiper activity-swiper">
<div class="swiper activity-swiper"> <div class="swiper-wrapper">
<div class="swiper-wrapper"> <div class="swiper-slide" v-for="(activity, index) in actList" :key="activity.id">
<div class="swiper-slide" v-for="(activity, index) in actList" :key="activity.id"> <div class="item" @click="go(activity)">
<div class="item" @click="go(activity)"> <div class="img-box">
<div class="img-box"> <img :src="activity.cover || 'https://www.ncu.edu.cn/__local/8/52/2C/644986B4C9A030F7B65300178A6_8679CB08_18467.jpg'"
<img :src="activity.cover || 'https://www.ncu.edu.cn/__local/8/52/2C/644986B4C9A030F7B65300178A6_8679CB08_18467.jpg'" alt="">
alt=""> <span class="status">
<span class="status"> {{getStatusText(activity)}}
{{getStatusText(activity)}} </span>
</span> </div>
</div> <h4 class="title">
<h4 class="title"> {{ activity.name}}
{{ activity.name}} </h4>
</h4> <!--报名时间-->
<!--报名时间--> <div class="time">
<div class="time"> <p>
<p> <i class="fa fa-clock-o"></i>
<i class="fa fa-clock-o"></i> 时间：{{ activity.startDate }}至{{ activity.endDate }}
时间：{{ activity.startDate }}至{{ activity.endDate }} </p>
</p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 导航按钮 -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- 进度条 -->
<div class="swiper-pagination"></div>
</div> </div>
<!-- 导航按钮 -->
<div ref="nextButton" class="swiper-button-next"></div>
<div ref="prevButton" class="swiper-button-prev"></div>
<!-- 进度条 -->
<div ref="pagination" class="swiper-pagination"></div>
</div> </div>
<div v-else class="no-activity-placeholder"> <div v-else class="no-activity-placeholder">
@@ -80,17 +78,33 @@ const act = {
this.swiper.destroy(true, true) this.swiper.destroy(true, true)
this.swiper = null this.swiper = null
} }
this.swiper = new Swiper('.activity-swiper', { const swiperElement = this.$refs.activitySwiper
if (!swiperElement) {
return
}
// 仅操作当前组件的轮播节点，避免页面其他轮播或尺寸观察器影响卡片宽度。
this.swiper = new Swiper(swiperElement, {
slidesPerView: 1, slidesPerView: 1,
spaceBetween: 18, spaceBetween: 18,
centeredSlides: false, centeredSlides: false,
loop: false, loop: false,
watchOverflow: true,
observer: false,
observeParents: false,
resizeObserver: false,
// 鼠标停留在活动区域时可横向浏览，到首尾后释放页面滚动。
mousewheel: {
enabled: true,
forceToAxis: false,
releaseOnEdges: true,
sensitivity: 0.8,
},
navigation: { navigation: {
nextEl: '.swiper-button-next', nextEl: this.$refs.nextButton,
prevEl: '.swiper-button-prev', prevEl: this.$refs.prevButton,
}, },
pagination: { pagination: {
el: '.swiper-pagination', el: this.$refs.pagination,
type: 'progressbar', type: 'progressbar',
}, },
breakpoints: { breakpoints: {
@@ -134,10 +148,25 @@ const act = {
mounted() { mounted() {
this.listAct() this.listAct()
}, },
beforeDestroy() {
if (this.swiper) {
this.swiper.destroy(true, true)
this.swiper = null
}
},
style: /*language=CSS*/ ` style: /*language=CSS*/ `
.activity-section-wrapper { .activity-section-wrapper {
width: 100%; width: 100%;
min-width: 0; min-width: 0;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.section-act {
width: 100%;
min-width: 0;
max-width: 100%;
} }
.section-act .section-act-title span { .section-act .section-act-title span {
@@ -182,8 +211,9 @@ const act = {
position: relative; position: relative;
width: 100%; width: 100%;
min-width: 0; min-width: 0;
max-width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 9px 14px; padding: 9px 54px 12px;
/*margin-top: 30px;*/ /*margin-top: 30px;*/
overflow: hidden; overflow: hidden;
} }
@@ -207,6 +237,8 @@ const act = {
background: white; background: white;
width: 40px; width: 40px;
height: 40px; height: 40px;
top: 72px;
margin-top: 0;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease; transition: all 0.3s ease;
@@ -225,11 +257,9 @@ const act = {
font-weight: bold; font-weight: bold;
} }
/* 进度条样式 */ /* 进度条不展示，活动通过左右箭头或区域内滚轮浏览。 */
.activity-swiper-container .swiper-pagination { .activity-swiper-container .swiper-pagination {
position: relative; display: none;
margin-top: 12px;
height: 4px;
} }
.activity-swiper-container .swiper-pagination-progressbar { .activity-swiper-container .swiper-pagination-progressbar {
src/main/resources/views/layouts/v4/home/index.html
+9 -2
View File
@@ -53,16 +53,23 @@ layout("/layouts/v4/baseLayout.html"){
.act-card { .act-card {
display: flex; display: flex;
align-items: center; align-items: center;
min-width: 320px; width: 100%;
min-width: 0;
max-width: 100%;
background: white; background: white;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.06); box-shadow: 0 4px 12px rgba(0,0,0,0.06);
padding: 11px; padding: 22px 11px;
box-sizing: border-box;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s; transition: transform 0.2s, box-shadow 0.2s;
} }
.home-section { .home-section {
width: 100%; width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
} }
.home-section-header { .home-section-header {