feat:首页样式优化，增加应用-我的收藏

src/main/resources/views/layouts/v4/home/act.js

@@ -10,22 +10,23 @@ const act = {
                     <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="item" role="button" tabindex="0" @click="go(activity)" @keydown.enter="go(activity)" @keydown.space.prevent="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">
+                                        <el-image :src="activity.cover" fit="cover" :alt="activity.name">
+                                            <div slot="error" class="portal-cover-empty"><i class="fa fa-picture-o" aria-hidden="true"></i><span>暂无图片</span></div>
+                                        </el-image>
+                                        <span class="status" :class="{'status-ended': getStatusText(activity) === '已结束', 'status-upcoming': getStatusText(activity) === '未开始'}">
                                        {{getStatusText(activity)}}
                                     </span>
                                     </div>
-                                    <h4 class="title">
+                                    <h4 class="title" :title="activity.name">
                                         {{ activity.name}}
                                     </h4>
                                     <!--报名时间-->
                                     <div class="time">
-                                        <p>
+                                        <p :title="[activity.startDate, activity.endDate].filter(Boolean).join(' 至 ')">
                                             <i class="fa fa-clock-o"></i>
-                                            时间：{{ activity.startDate }}至{{ activity.endDate }}
+                                            {{ formatActivityDate(activity.startDate) }} 至 {{ formatActivityDate(activity.endDate) }}
                                         </p>
                                     </div>
                                 </div>
@@ -34,15 +35,15 @@ const act = {
                     </div>
 
                     <!-- 导航按钮 -->
-                    <div ref="nextButton" class="swiper-button-next"></div>
-                    <div ref="prevButton" class="swiper-button-prev"></div>
+                    <button type="button" ref="nextButton" class="swiper-button-next" aria-label="下一组活动"></button>
+                    <button type="button" ref="prevButton" class="swiper-button-prev" aria-label="上一组活动"></button>
 
                     <!-- 进度条 -->
                     <div ref="pagination" class="swiper-pagination"></div>
                 </div>
 
                 <div v-else class="no-activity-placeholder">
-                    <div class="icon">📅</div>
+                    <div class="icon"><i class="fa fa-calendar" aria-hidden="true"></i></div>
                     <p>暂无近期活动</p>
                     <p class="subtext">敬请关注后续通知</p>
                 </div>
@@ -57,6 +58,24 @@ const act = {
         }
     },
     methods: {
+        updateNavigationPosition() {
+            const swiperElement = this.$refs.activitySwiper
+            const cover = swiperElement && swiperElement.querySelector('.img-box')
+            if (!cover) return
+            // 按实际封面高度定位，避免标题换行或响应式列数变化导致箭头偏移。
+            const container = swiperElement.parentElement
+            const top = cover.getBoundingClientRect().top - container.getBoundingClientRect().top + cover.offsetHeight / 2
+            ;[this.$refs.prevButton, this.$refs.nextButton].forEach(button => {
+                if (button) button.style.top = top + 'px'
+            })
+        },
+        formatActivityDate(value) {
+            return value ? this.$moment(value).format('YYYY-MM-DD') : '待定'
+        },
+        browseNext() {
+            if (!this.swiper) return
+            this.swiper.isEnd ? this.swiper.slideTo(0) : this.swiper.slideNext()
+        },
         /*查询活动*/
         listAct() {
             this.$axios.post("/platform/home/listHomeActivity").then((res) => {
@@ -89,13 +108,22 @@ const act = {
                 centeredSlides: false,
                 loop: false,
                 watchOverflow: true,
+                // 双栏中的活动按容器宽度排布，避免用整个窗口宽度挤出过多卡片。
+                breakpointsBase: 'container',
                 observer: false,
                 observeParents: false,
-                resizeObserver: false,
+                // 页面内容加载后可能出现滚动条，需重新计算列宽，避免末张封面及圆角被裁切。
+                resizeObserver: true,
+                roundLengths: true,
+                on: {
+                    init: () => this.$nextTick(() => this.updateNavigationPosition()),
+                    resize: () => this.$nextTick(() => this.updateNavigationPosition()),
+                    slidesUpdated: () => this.$nextTick(() => this.updateNavigationPosition()),
+                },
                 // 鼠标停留在活动区域时可横向浏览，到首尾后释放页面滚动。
                 mousewheel: {
                     enabled: true,
-                    forceToAxis: false,
+                    forceToAxis: true,
                     releaseOnEdges: true,
                     sensitivity: 0.8,
                 },
@@ -108,14 +136,11 @@ const act = {
                     type: 'progressbar',
                 },
                 breakpoints: {
-                    768: {
+                    480: {
                         slidesPerView: 2,
                     },
-                    1024: {
-                        slidesPerView: 4,
-                    },
-                    1200: {
-                        slidesPerView: 5,
+                    740: {
+                        slidesPerView: 3,
                     }
                 }
             })