|
|
@@ -41,27 +41,26 @@
|
|
|
</swiper>
|
|
|
</view>
|
|
|
|
|
|
- <view class="notice-bar" v-if="noticeList && noticeList.length > 0">
|
|
|
- <text class="notice-icon">📢</text>
|
|
|
- <!-- 使用swiper实现多公告自动切换，每个公告完整显示 -->
|
|
|
- <swiper
|
|
|
- class="notice-swiper"
|
|
|
- :autoplay="true"
|
|
|
- :interval="3000"
|
|
|
- :duration="500"
|
|
|
- :circular="true"
|
|
|
- :autoplay-with-control="false"
|
|
|
- :disable-touch="true"
|
|
|
- direction="horizontal"
|
|
|
- :indicator-dots="false"
|
|
|
- >
|
|
|
- <swiper-item v-for="(notice, index) in noticeList" :key="index">
|
|
|
- <view class="notice-text-wrapper">
|
|
|
- <text class="notice-text">{{ notice.content }}</text>
|
|
|
- </view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
-</view>
|
|
|
+ <!-- 公告栏 - 参考平台活动实现无缝滚动 -->
|
|
|
+ <view class="notice-bar" v-if="noticeList && noticeList.length > 0">
|
|
|
+ <text class="notice-icon">📢</text>
|
|
|
+ <!-- 滚动容器 - 参考活动滚动的结构 -->
|
|
|
+ <view class="notice-scroll-container">
|
|
|
+ <view class="notice-scroll-wrapper">
|
|
|
+ <view class="notice-scroll-content">
|
|
|
+ <!-- 第一组公告 -->
|
|
|
+ <view class="notice-item-scroll" v-for="(notice, index) in noticeList" :key="index">
|
|
|
+ <text class="notice-text">{{ notice.content }}</text>
|
|
|
+ </view>
|
|
|
+ <!-- 第二组公告（用于无缝滚动） -->
|
|
|
+ <view class="notice-item-scroll" v-for="(notice, index) in noticeList" :key="index + 100">
|
|
|
+ <text class="notice-text">{{ notice.content }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
|
|
|
<!-- 核心功能入口 -->
|
|
|
<view class="function-grid">
|
|
|
@@ -1193,60 +1192,74 @@ async loadFunctionGridData() {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- /* 公告栏 */
|
|
|
-.notice-bar {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin: 25rpx 35rpx;
|
|
|
- padding: 24rpx 30rpx;
|
|
|
- background: #FFF8E1;
|
|
|
- border-radius: 8rpx;
|
|
|
- border: 2rpx solid #FFD54F;
|
|
|
- border-left: 6rpx solid #FFC107;
|
|
|
-
|
|
|
- .notice-icon {
|
|
|
- font-size: 34rpx;
|
|
|
- margin-right: 24rpx;
|
|
|
- flex-shrink: 0; /* 固定图标不被挤压 */
|
|
|
- }
|
|
|
-
|
|
|
- .notice-swiper {
|
|
|
- flex: 1;
|
|
|
- height: 60rpx;
|
|
|
- overflow: visible; /* 允许内容溢出 */
|
|
|
- width: 100%; /* 确保swiper容器占满可用宽度 */
|
|
|
-
|
|
|
- swiper-item {
|
|
|
- width: auto !important;
|
|
|
- min-width: 100%; /* 确保最短的公告也能占满容器 */
|
|
|
- max-width: none; /* 允许swiper-item根据内容扩展宽度 */
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- }
|
|
|
-
|
|
|
- .notice-text-wrapper {
|
|
|
- width: auto;
|
|
|
- min-width: 100%;
|
|
|
- overflow: visible;
|
|
|
- }
|
|
|
-
|
|
|
- .notice-text {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #795548;
|
|
|
- line-height: 60rpx;
|
|
|
- white-space: nowrap; /* 文字不换行 */
|
|
|
- font-weight: 500;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 100%;
|
|
|
- padding-right: 30rpx; /* 添加右侧间距，避免内容紧贴边缘 */
|
|
|
- width: auto;
|
|
|
- min-width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
+ .notice-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 25rpx 35rpx;
|
|
|
+ padding: 24rpx 30rpx;
|
|
|
+ background: #FFF8E1;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ border: 2rpx solid #FFD54F;
|
|
|
+ border-left: 6rpx solid #FFC107;
|
|
|
+
|
|
|
+ .notice-icon {
|
|
|
+ font-size: 34rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ flex-shrink: 0; /* 固定图标不被挤压 */
|
|
|
+ }
|
|
|
+
|
|
|
+ // 公告滚动容器 - 参考活动滚动容器结构
|
|
|
+ .notice-scroll-container {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ height: 60rpx;
|
|
|
+
|
|
|
+ .notice-scroll-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .notice-scroll-content {
|
|
|
+ display: flex;
|
|
|
+ animation: noticeScroll 20s linear infinite; /* 滚动动画，时长可调整 */
|
|
|
+ gap: 40rpx; /* 公告之间的间距 */
|
|
|
+ width: fit-content;
|
|
|
+
|
|
|
+ // 悬停暂停滚动（可选）
|
|
|
+ &:hover {
|
|
|
+ animation-play-state: paused;
|
|
|
+ }
|
|
|
+
|
|
|
+ .notice-item-scroll {
|
|
|
+ flex-shrink: 0; /* 固定宽度，不被挤压 */
|
|
|
+ white-space: nowrap; /* 禁止文字换行 */
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 60rpx;
|
|
|
+
|
|
|
+ .notice-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #795548;
|
|
|
+ line-height: 60rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 公告滚动动画 - 参考活动滚动动画逻辑
|
|
|
+ @keyframes noticeScroll {
|
|
|
+ 0% {
|
|
|
+ transform: translateX(0);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translateX(-50%); /* 滚动到第一组公告完全移出，第二组接上 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
/* 功能入口 */
|
|
|
.function-grid {
|
|
|
display: flex; /* 核心：改为flex布局 */
|
