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