From 5c52892f34b725c3f7fc2b4cc7e9a9ba68f26648 Mon Sep 17 00:00:00 2001
From: woody <woody@163>
Date: Tue, 3 Jun 2025 13:47:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(notice):=20=E9=A6=96=E9=A1=B5=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=85=AC=E5=91=8A=E8=BD=AE=E6=92=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/notice-styles-demo.vue  | 535 +++++++++++++++++++++++++
 components/slot-swiper-example.vue | 618 -----------------------------
 pages.json                         |   7 -
 pages/index/index.vue              | 211 +++++++++-
 pages/test-swiper.vue              | 289 --------------
 pages/test-ticket.vue              |  95 -----
 6 files changed, 739 insertions(+), 1016 deletions(-)
 create mode 100644 components/notice-styles-demo.vue
 delete mode 100644 components/slot-swiper-example.vue
 delete mode 100644 pages/test-swiper.vue
 delete mode 100644 pages/test-ticket.vue

diff --git a/components/notice-styles-demo.vue b/components/notice-styles-demo.vue
new file mode 100644
index 0000000..f71eff9
--- /dev/null
+++ b/components/notice-styles-demo.vue
@@ -0,0 +1,535 @@
+<template>
+  <view class="notice-styles-demo">
+    <view class="demo-title">公告样式演示</view>
+
+    <!-- 样式1: 渐变卡片式 -->
+    <view class="demo-section">
+      <view class="section-title">样式1: 渐变卡片式（推荐）</view>
+      <simple-vertical-swiper
+        :items="demoNotices"
+        type="custom"
+        :height="80"
+        :autoplay="true"
+        :interval="3000"
+        :show-indicators="false"
+      >
+        <template #default="{ item }">
+          <view class="notice-style-1">
+            <view class="notice-icon-wrapper">
+              <text class="notice-icon">📢</text>
+              <view class="icon-pulse"></view>
+            </view>
+            <view class="notice-content">
+              <view class="notice-header">
+                <text class="notice-title">{{ item.title }}</text>
+                <view class="notice-badge">公告</view>
+              </view>
+              <view class="notice-meta">
+                <text class="notice-time">{{ item.creationTime }}</text>
+                <text class="notice-arrow">→</text>
+              </view>
+            </view>
+          </view>
+        </template>
+      </simple-vertical-swiper>
+    </view>
+
+    <!-- 样式2: 玻璃拟态风格 -->
+    <view class="demo-section">
+      <view class="section-title">样式2: 玻璃拟态风格</view>
+      <simple-vertical-swiper
+        :items="demoNotices"
+        type="custom"
+        :height="70"
+        :autoplay="true"
+        :interval="4000"
+        :show-indicators="false"
+      >
+        <template #default="{ item }">
+          <view class="notice-style-2">
+            <view class="glass-effect"></view>
+            <view class="notice-icon">🔔</view>
+            <view class="notice-text">
+              <text class="title">{{ item.title }}</text>
+              <text class="time">{{ item.creationTime }}</text>
+            </view>
+            <view class="notice-indicator">
+              <view class="indicator-dot"></view>
+            </view>
+          </view>
+        </template>
+      </simple-vertical-swiper>
+    </view>
+
+    <!-- 样式3: 扁平简约风格 -->
+    <view class="demo-section">
+      <view class="section-title">样式3: 扁平简约风格</view>
+      <simple-vertical-swiper
+        :items="demoNotices"
+        type="custom"
+        :height="60"
+        :autoplay="true"
+        :interval="2500"
+        :show-indicators="false"
+      >
+        <template #default="{ item }">
+          <view class="notice-style-3">
+            <view class="notice-stripe"></view>
+            <view class="notice-emoji">📋</view>
+            <view class="notice-info">
+              <text class="notice-text">{{ item.title }}</text>
+              <text class="notice-time">{{ item.creationTime }}</text>
+            </view>
+            <view class="notice-chevron">
+              <text>›</text>
+            </view>
+          </view>
+        </template>
+      </simple-vertical-swiper>
+    </view>
+
+    <!-- 样式4: 霓虹发光风格 -->
+    <view class="demo-section">
+      <view class="section-title">样式4: 霓虹发光风格</view>
+      <simple-vertical-swiper
+        :items="demoNotices"
+        type="custom"
+        :height="75"
+        :autoplay="true"
+        :interval="3500"
+        :show-indicators="false"
+      >
+        <template #default="{ item }">
+          <view class="notice-style-4">
+            <view class="neon-border"></view>
+            <view class="notice-glow-icon">⚡</view>
+            <view class="notice-glow-content">
+              <text class="glow-title">{{ item.title }}</text>
+              <text class="glow-time">{{ item.creationTime }}</text>
+            </view>
+            <view class="pulse-dot"></view>
+          </view>
+        </template>
+      </simple-vertical-swiper>
+    </view>
+  </view>
+</template>
+
+<script>
+import SimpleVerticalSwiper from './simple-vertical-swiper.vue'
+
+export default {
+  name: 'NoticeStylesDemo',
+  components: {
+    SimpleVerticalSwiper,
+  },
+  data() {
+    return {
+      demoNotices: [
+        {
+          title: '系统维护通知：明日凌晨2:00-4:00进行系统升级',
+          creationTime: '2024-01-15 10:30',
+        },
+        {
+          title: '新功能上线：支持多语言切换功能',
+          creationTime: '2024-01-14 16:20',
+        },
+        {
+          title: '重要提醒：请及时更新您的个人信息',
+          creationTime: '2024-01-13 09:15',
+        },
+      ],
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.notice-styles-demo {
+  padding: 20rpx;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  min-height: 100vh;
+
+  .demo-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    text-align: center;
+    color: #333;
+    margin-bottom: 40rpx;
+  }
+
+  .demo-section {
+    margin-bottom: 40rpx;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 16rpx;
+    padding: 24rpx;
+    backdrop-filter: blur(10rpx);
+
+    .section-title {
+      font-size: 24rpx;
+      color: #666;
+      margin-bottom: 20rpx;
+      font-weight: 500;
+    }
+  }
+
+  // 样式1: 渐变卡片式
+  .notice-style-1 {
+    position: relative;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 16rpx;
+    padding: 24rpx;
+    margin: 0 10rpx;
+    height: calc(100% - 48rpx);
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
+
+    .notice-icon-wrapper {
+      position: relative;
+      width: 64rpx;
+      height: 64rpx;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 20rpx;
+
+      .notice-icon {
+        font-size: 32rpx;
+        z-index: 2;
+      }
+
+      .icon-pulse {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.3);
+        animation: pulse-1 2s ease-in-out infinite;
+      }
+    }
+
+    .notice-content {
+      flex: 1;
+
+      .notice-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 8rpx;
+
+        .notice-title {
+          color: #fff;
+          font-size: 26rpx;
+          font-weight: 600;
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          margin-right: 12rpx;
+        }
+
+        .notice-badge {
+          background: rgba(255, 255, 255, 0.25);
+          color: #fff;
+          font-size: 18rpx;
+          padding: 4rpx 10rpx;
+          border-radius: 10rpx;
+          border: 1rpx solid rgba(255, 255, 255, 0.3);
+        }
+      }
+
+      .notice-meta {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .notice-time {
+          color: rgba(255, 255, 255, 0.8);
+          font-size: 20rpx;
+        }
+
+        .notice-arrow {
+          color: rgba(255, 255, 255, 0.9);
+          font-size: 24rpx;
+          animation: arrow-bounce-1 2s ease-in-out infinite;
+        }
+      }
+    }
+  }
+
+  // 样式2: 玻璃拟态风格
+  .notice-style-2 {
+    position: relative;
+    background: rgba(255, 255, 255, 0.25);
+    border: 1rpx solid rgba(255, 255, 255, 0.3);
+    border-radius: 20rpx;
+    padding: 20rpx;
+    margin: 0 10rpx;
+    height: calc(100% - 40rpx);
+    display: flex;
+    align-items: center;
+    backdrop-filter: blur(10rpx);
+    box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.37);
+
+    .glass-effect {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(
+        135deg,
+        rgba(255, 255, 255, 0.1),
+        rgba(255, 255, 255, 0)
+      );
+      border-radius: 20rpx;
+    }
+
+    .notice-icon {
+      font-size: 32rpx;
+      margin-right: 16rpx;
+      z-index: 2;
+    }
+
+    .notice-text {
+      flex: 1;
+      z-index: 2;
+
+      .title {
+        display: block;
+        color: #333;
+        font-size: 24rpx;
+        font-weight: 500;
+        margin-bottom: 4rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .time {
+        color: #666;
+        font-size: 20rpx;
+      }
+    }
+
+    .notice-indicator {
+      z-index: 2;
+
+      .indicator-dot {
+        width: 12rpx;
+        height: 12rpx;
+        background: #007aff;
+        border-radius: 50%;
+        animation: dot-blink 1.5s ease-in-out infinite;
+      }
+    }
+  }
+
+  // 样式3: 扁平简约风格
+  .notice-style-3 {
+    position: relative;
+    background: #fff;
+    border-radius: 12rpx;
+    padding: 20rpx;
+    margin: 0 10rpx;
+    height: calc(100% - 40rpx);
+    display: flex;
+    align-items: center;
+    box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.1);
+    border-left: 6rpx solid #007aff;
+
+    .notice-stripe {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 6rpx;
+      height: 100%;
+      background: linear-gradient(to bottom, #007aff, #00d4aa);
+    }
+
+    .notice-emoji {
+      font-size: 28rpx;
+      margin-right: 16rpx;
+    }
+
+    .notice-info {
+      flex: 1;
+
+      .notice-text {
+        display: block;
+        color: #333;
+        font-size: 24rpx;
+        margin-bottom: 4rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .notice-time {
+        color: #999;
+        font-size: 20rpx;
+      }
+    }
+
+    .notice-chevron {
+      color: #ccc;
+      font-size: 32rpx;
+      animation: chevron-move 2s ease-in-out infinite;
+    }
+  }
+
+  // 样式4: 霓虹发光风格
+  .notice-style-4 {
+    position: relative;
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+    border-radius: 16rpx;
+    padding: 20rpx;
+    margin: 0 10rpx;
+    height: calc(100% - 40rpx);
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
+    .neon-border {
+      position: absolute;
+      top: 2rpx;
+      left: 2rpx;
+      right: 2rpx;
+      bottom: 2rpx;
+      border: 2rpx solid;
+      border-image: linear-gradient(45deg, #00ffff, #ff00ff, #ffff00) 1;
+      border-radius: 14rpx;
+      animation: neon-glow 3s ease-in-out infinite;
+    }
+
+    .notice-glow-icon {
+      font-size: 32rpx;
+      margin-right: 16rpx;
+      z-index: 2;
+      text-shadow:
+        0 0 10rpx #00ffff,
+        0 0 20rpx #00ffff;
+      animation: icon-glow 2s ease-in-out infinite;
+    }
+
+    .notice-glow-content {
+      flex: 1;
+      z-index: 2;
+
+      .glow-title {
+        display: block;
+        color: #fff;
+        font-size: 24rpx;
+        margin-bottom: 4rpx;
+        text-shadow: 0 0 10rpx rgba(255, 255, 255, 0.5);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .glow-time {
+        color: #00ffff;
+        font-size: 18rpx;
+        text-shadow: 0 0 8rpx #00ffff;
+      }
+    }
+
+    .pulse-dot {
+      width: 16rpx;
+      height: 16rpx;
+      background: #ff00ff;
+      border-radius: 50%;
+      box-shadow: 0 0 20rpx #ff00ff;
+      animation: pulse-glow 1.5s ease-in-out infinite;
+      z-index: 2;
+    }
+  }
+
+  // 动画定义
+  @keyframes pulse-1 {
+    0%,
+    100% {
+      transform: scale(1);
+      opacity: 0.7;
+    }
+    50% {
+      transform: scale(1.1);
+      opacity: 0.3;
+    }
+  }
+
+  @keyframes arrow-bounce-1 {
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+    50% {
+      transform: translateX(6rpx);
+    }
+  }
+
+  @keyframes dot-blink {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.3;
+    }
+  }
+
+  @keyframes chevron-move {
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+    50% {
+      transform: translateX(4rpx);
+    }
+  }
+
+  @keyframes neon-glow {
+    0%,
+    100% {
+      filter: brightness(1) hue-rotate(0deg);
+    }
+    50% {
+      filter: brightness(1.5) hue-rotate(180deg);
+    }
+  }
+
+  @keyframes icon-glow {
+    0%,
+    100% {
+      text-shadow:
+        0 0 10rpx #00ffff,
+        0 0 20rpx #00ffff;
+    }
+    50% {
+      text-shadow:
+        0 0 20rpx #00ffff,
+        0 0 40rpx #00ffff,
+        0 0 60rpx #00ffff;
+    }
+  }
+
+  @keyframes pulse-glow {
+    0%,
+    100% {
+      transform: scale(1);
+      box-shadow: 0 0 20rpx #ff00ff;
+    }
+    50% {
+      transform: scale(1.2);
+      box-shadow:
+        0 0 40rpx #ff00ff,
+        0 0 60rpx #ff00ff;
+    }
+  }
+}
+</style>
diff --git a/components/slot-swiper-example.vue b/components/slot-swiper-example.vue
deleted file mode 100644
index 7def49e..0000000
--- a/components/slot-swiper-example.vue
+++ /dev/null
@@ -1,618 +0,0 @@
-<template>
-  <view class="slot-swiper-example">
-    <view class="demo-title">轮播组件插槽使用示例</view>
-
-    <!-- 示例1: 基础插槽使用 -->
-    <view class="demo-section">
-      <view class="section-title">1. 基础插槽 - 自定义卡片</view>
-      <simple-vertical-swiper
-        :items="customItems"
-        :height="100"
-        type="custom"
-        :autoplay="true"
-        :interval="3000"
-        :show-indicators="true"
-      >
-        <template #default="{ item, index }">
-          <view class="custom-card">
-            <view class="card-header">
-              <text class="card-icon">{{ item.icon }}</text>
-              <text class="card-title">{{ item.title }}</text>
-            </view>
-            <text class="card-desc">{{ item.description }}</text>
-            <view class="card-badge">#{{ index + 1 }}</view>
-          </view>
-        </template>
-      </simple-vertical-swiper>
-    </view>
-
-    <!-- 示例2: 通知类插槽 -->
-    <view class="demo-section">
-      <view class="section-title">2. 通知插槽 - 带按钮的通知</view>
-      <simple-vertical-swiper
-        :items="notificationItems"
-        :height="80"
-        type="custom"
-        :autoplay="true"
-        :interval="4000"
-        :show-indicators="false"
-      >
-        <template #default="{ item, index }">
-          <view class="notification-card">
-            <view class="notification-content">
-              <text class="notification-icon">{{ item.icon }}</text>
-              <text class="notification-text">{{ item.message }}</text>
-            </view>
-            <view
-              class="notification-action"
-              @click="handleNotificationClick(item)"
-            >
-              <text class="action-text">{{ item.actionText }}</text>
-            </view>
-          </view>
-        </template>
-      </simple-vertical-swiper>
-    </view>
-
-    <!-- 示例3: 活动推广插槽 -->
-    <view class="demo-section">
-      <view class="section-title">3. 活动推广插槽 - 带图片和按钮</view>
-      <simple-vertical-swiper
-        :items="promotionItems"
-        :height="120"
-        type="custom"
-        :autoplay="true"
-        :interval="5000"
-        :show-indicators="true"
-      >
-        <template #default="{ item, index }">
-          <view class="promotion-card">
-            <image
-              class="promotion-bg"
-              :src="item.bgImage"
-              mode="aspectFill"
-            ></image>
-            <view class="promotion-content">
-              <view class="promotion-info">
-                <text class="promotion-title">{{ item.title }}</text>
-                <text class="promotion-subtitle">{{ item.subtitle }}</text>
-              </view>
-              <view class="promotion-btn" @click="handlePromotionClick(item)">
-                <text class="btn-text">{{ item.btnText }}</text>
-              </view>
-            </view>
-          </view>
-        </template>
-      </simple-vertical-swiper>
-    </view>
-
-    <!-- 示例4: 复杂数据插槽 -->
-    <view class="demo-section">
-      <view class="section-title">4. 复杂数据插槽 - 用户动态</view>
-      <simple-vertical-swiper
-        :items="userActivityItems"
-        :height="90"
-        type="custom"
-        :autoplay="true"
-        :interval="6000"
-        :circular="true"
-      >
-        <template #default="{ item, index }">
-          <view class="activity-card">
-            <view class="user-info">
-              <image
-                class="user-avatar"
-                :src="item.user.avatar"
-                mode="aspectFill"
-              ></image>
-              <view class="user-details">
-                <text class="user-name">{{ item.user.name }}</text>
-                <text class="activity-time">{{ item.timestamp }}</text>
-              </view>
-            </view>
-            <view class="activity-content">
-              <text class="activity-text">{{ item.activity }}</text>
-              <view v-if="item.tags" class="activity-tags">
-                <text v-for="tag in item.tags" :key="tag" class="tag">{{
-                  tag
-                }}</text>
-              </view>
-            </view>
-          </view>
-        </template>
-      </simple-vertical-swiper>
-    </view>
-
-    <!-- 示例5: 交互式插槽 -->
-    <view class="demo-section">
-      <view class="section-title">5. 交互式插槽 - 可点击的项目</view>
-      <simple-vertical-swiper
-        :items="interactiveItems"
-        :height="100"
-        type="custom"
-        :autoplay="false"
-        :show-indicators="true"
-      >
-        <template #default="{ item, index }">
-          <view class="interactive-card" @click="handleItemClick(item, index)">
-            <view class="item-icon-wrapper">
-              <text class="item-icon">{{ item.icon }}</text>
-            </view>
-            <view class="item-content">
-              <text class="item-title">{{ item.title }}</text>
-              <text class="item-value">{{ item.value }}</text>
-            </view>
-            <view class="item-arrow">
-              <text class="arrow-icon">→</text>
-            </view>
-          </view>
-        </template>
-      </simple-vertical-swiper>
-    </view>
-  </view>
-</template>
-
-<script>
-import SimpleVerticalSwiper from './simple-vertical-swiper.vue'
-
-export default {
-  name: 'SlotSwiperExample',
-  components: {
-    SimpleVerticalSwiper,
-  },
-  data() {
-    return {
-      // 基础自定义数据
-      customItems: [
-        {
-          icon: '🎉',
-          title: '新功能上线',
-          description: '体验全新的用户界面设计',
-        },
-        {
-          icon: '🔥',
-          title: '热门推荐',
-          description: '发现最受欢迎的内容',
-        },
-        {
-          icon: '⭐',
-          title: '精选内容',
-          description: '为您精心挑选的优质内容',
-        },
-      ],
-
-      // 通知数据
-      notificationItems: [
-        {
-          icon: '📦',
-          message: '您的订单已发货，预计明天送达',
-          actionText: '查看',
-          orderId: '12345',
-        },
-        {
-          icon: '💰',
-          message: '恭喜获得5元优惠券',
-          actionText: '使用',
-          couponId: 'COUP001',
-        },
-        {
-          icon: '🎁',
-          message: '签到7天获得神秘礼品',
-          actionText: '领取',
-          giftId: 'GIFT001',
-        },
-      ],
-
-      // 推广活动数据
-      promotionItems: [
-        {
-          title: '双十一大促',
-          subtitle: '全场5折起',
-          btnText: '立即抢购',
-          bgImage: '/static/images/promotion1.jpg',
-          promoId: 'PROMO001',
-        },
-        {
-          title: '新用户专享',
-          subtitle: '注册送豪礼',
-          btnText: '立即注册',
-          bgImage: '/static/images/promotion2.jpg',
-          promoId: 'PROMO002',
-        },
-        {
-          title: '限时秒杀',
-          subtitle: '每日10点开抢',
-          btnText: '设置提醒',
-          bgImage: '/static/images/promotion3.jpg',
-          promoId: 'PROMO003',
-        },
-      ],
-
-      // 用户动态数据
-      userActivityItems: [
-        {
-          user: {
-            name: '张小明',
-            avatar: '/static/images/avatar1.jpg',
-          },
-          activity: '刚刚购买了iPhone 15 Pro',
-          timestamp: '2分钟前',
-          tags: ['数码', '热销'],
-        },
-        {
-          user: {
-            name: '李小红',
-            avatar: '/static/images/avatar2.jpg',
-          },
-          activity: '分享了一篇关于旅行的文章',
-          timestamp: '5分钟前',
-          tags: ['旅行', '分享'],
-        },
-        {
-          user: {
-            name: '王小强',
-            avatar: '/static/images/avatar3.jpg',
-          },
-          activity: '完成了今日运动目标',
-          timestamp: '10分钟前',
-          tags: ['运动', '健康'],
-        },
-      ],
-
-      // 交互式数据
-      interactiveItems: [
-        {
-          icon: '📊',
-          title: '今日销售',
-          value: '¥12,580',
-          type: 'sales',
-        },
-        {
-          icon: '👥',
-          title: '新增用户',
-          value: '156人',
-          type: 'users',
-        },
-        {
-          icon: '📈',
-          title: '增长率',
-          value: '+23.5%',
-          type: 'growth',
-        },
-        {
-          icon: '🎯',
-          title: '完成率',
-          value: '89.2%',
-          type: 'completion',
-        },
-      ],
-    }
-  },
-  methods: {
-    // 处理通知点击
-    handleNotificationClick(item) {
-      console.log('通知点击:', item)
-      uni.showToast({
-        title: `点击了: ${item.actionText}`,
-        icon: 'none',
-      })
-    },
-
-    // 处理推广点击
-    handlePromotionClick(item) {
-      console.log('推广点击:', item)
-      uni.showToast({
-        title: `点击了: ${item.title}`,
-        icon: 'none',
-      })
-    },
-
-    // 处理项目点击
-    handleItemClick(item, index) {
-      console.log('项目点击:', item, index)
-      uni.showModal({
-        title: item.title,
-        content: `当前值: ${item.value}\n类型: ${item.type}`,
-        showCancel: false,
-      })
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.slot-swiper-example {
-  padding: 20px;
-  background-color: #f5f5f5;
-  min-height: 100vh;
-
-  .demo-title {
-    font-size: 20px;
-    font-weight: bold;
-    color: #333;
-    text-align: center;
-    margin-bottom: 30px;
-  }
-
-  .demo-section {
-    margin-bottom: 30px;
-    background-color: #fff;
-    border-radius: 12px;
-    padding: 20px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-
-    .section-title {
-      font-size: 16px;
-      font-weight: 600;
-      color: #333;
-      margin-bottom: 15px;
-      padding-bottom: 8px;
-      border-bottom: 2px solid #007aff;
-    }
-  }
-
-  // 自定义卡片样式
-  .custom-card {
-    position: relative;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-radius: 10px;
-    padding: 15px;
-    margin: 0 10px;
-    color: white;
-    height: calc(100% - 20px);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    .card-header {
-      display: flex;
-      align-items: center;
-      margin-bottom: 8px;
-
-      .card-icon {
-        font-size: 20px;
-        margin-right: 8px;
-      }
-
-      .card-title {
-        font-size: 16px;
-        font-weight: 600;
-      }
-    }
-
-    .card-desc {
-      font-size: 12px;
-      opacity: 0.9;
-      line-height: 1.4;
-    }
-
-    .card-badge {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      background-color: rgba(255, 255, 255, 0.2);
-      border-radius: 12px;
-      padding: 2px 8px;
-      font-size: 10px;
-    }
-  }
-
-  // 通知卡片样式
-  .notification-card {
-    background-color: #fff;
-    border-radius: 8px;
-    padding: 15px;
-    margin: 0 10px;
-    height: calc(100% - 20px);
-    display: flex;
-    align-items: center;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    border-left: 4px solid #ff9500;
-
-    .notification-content {
-      flex: 1;
-      display: flex;
-      align-items: center;
-
-      .notification-icon {
-        font-size: 18px;
-        margin-right: 10px;
-      }
-
-      .notification-text {
-        font-size: 14px;
-        color: #333;
-        line-height: 1.4;
-      }
-    }
-
-    .notification-action {
-      background-color: #007aff;
-      border-radius: 16px;
-      padding: 6px 12px;
-
-      .action-text {
-        color: white;
-        font-size: 12px;
-      }
-    }
-  }
-
-  // 推广卡片样式
-  .promotion-card {
-    position: relative;
-    border-radius: 10px;
-    margin: 0 10px;
-    height: calc(100% - 20px);
-    overflow: hidden;
-
-    .promotion-bg {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 1;
-    }
-
-    .promotion-content {
-      position: relative;
-      z-index: 2;
-      background: linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent);
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 0 20px;
-
-      .promotion-info {
-        .promotion-title {
-          display: block;
-          color: white;
-          font-size: 18px;
-          font-weight: bold;
-          margin-bottom: 4px;
-        }
-
-        .promotion-subtitle {
-          color: rgba(255, 255, 255, 0.9);
-          font-size: 12px;
-        }
-      }
-
-      .promotion-btn {
-        background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
-        border-radius: 20px;
-        padding: 8px 16px;
-
-        .btn-text {
-          color: white;
-          font-size: 12px;
-          font-weight: 600;
-        }
-      }
-    }
-  }
-
-  // 用户动态样式
-  .activity-card {
-    background-color: #fff;
-    border-radius: 8px;
-    padding: 12px;
-    margin: 0 10px;
-    height: calc(100% - 20px);
-    display: flex;
-    flex-direction: column;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-
-    .user-info {
-      display: flex;
-      align-items: center;
-      margin-bottom: 8px;
-
-      .user-avatar {
-        width: 32px;
-        height: 32px;
-        border-radius: 16px;
-        margin-right: 10px;
-        background-color: #f0f0f0;
-      }
-
-      .user-details {
-        .user-name {
-          display: block;
-          font-size: 14px;
-          font-weight: 500;
-          color: #333;
-          margin-bottom: 2px;
-        }
-
-        .activity-time {
-          font-size: 11px;
-          color: #999;
-        }
-      }
-    }
-
-    .activity-content {
-      .activity-text {
-        font-size: 13px;
-        color: #666;
-        line-height: 1.4;
-        margin-bottom: 6px;
-      }
-
-      .activity-tags {
-        display: flex;
-        gap: 4px;
-
-        .tag {
-          background-color: #f0f0f0;
-          color: #666;
-          font-size: 10px;
-          padding: 2px 6px;
-          border-radius: 8px;
-        }
-      }
-    }
-  }
-
-  // 交互式卡片样式
-  .interactive-card {
-    background-color: #fff;
-    border-radius: 8px;
-    padding: 15px;
-    margin: 0 10px;
-    height: calc(100% - 20px);
-    display: flex;
-    align-items: center;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    transition: all 0.3s ease;
-
-    &:active {
-      transform: scale(0.98);
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    }
-
-    .item-icon-wrapper {
-      width: 40px;
-      height: 40px;
-      border-radius: 8px;
-      background: linear-gradient(135deg, #74b9ff, #0984e3);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-right: 12px;
-
-      .item-icon {
-        font-size: 18px;
-        color: white;
-      }
-    }
-
-    .item-content {
-      flex: 1;
-
-      .item-title {
-        display: block;
-        font-size: 14px;
-        color: #333;
-        margin-bottom: 4px;
-      }
-
-      .item-value {
-        font-size: 20px;
-        font-weight: bold;
-        color: #007aff;
-      }
-    }
-
-    .item-arrow {
-      .arrow-icon {
-        font-size: 16px;
-        color: #ccc;
-      }
-    }
-  }
-}
-</style>
diff --git a/pages.json b/pages.json
index a29608d..3ecc5fa 100644
--- a/pages.json
+++ b/pages.json
@@ -814,13 +814,6 @@
       "style": {
         "navigationBarTitleText": "我的门票"
       }
-    },
-    {
-      "path": "pages/test-ticket",
-      "style": {
-        "navigationBarTitleText": "门票模块测试",
-        "navigationBarBackgroundColor": "#fff"
-      }
     }
   ],
   "tabBar": {
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 4ea7222..6786d3e 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -29,15 +29,19 @@
       <view v-if="isEmpty(noticeList) == false" class="notice-wrapper">
         <simple-vertical-swiper
           :items="noticeList"
-          type="text"
-          :height="60"
+          type="custom"
+          :height="40"
           :autoplay="true"
-          :interval="1500"
+          :interval="3000"
           :show-indicators="false"
         >
           <template #default="{ item }">
-            <view class="notice-item">
-              <text class="notice-text">{{ item.text }}</text>
+            <view @click="goNotice(item)" class="clean-notice-item">
+              <text class="notice-icon">📢</text>
+              <view class="notice-content">
+                <text class="notice-text">{{ item.title }}</text>
+                <text class="notice-time">{{ item.creationTime }}</text>
+              </view>
             </view>
           </template>
         </simple-vertical-swiper>
@@ -402,6 +406,7 @@ export default {
     this.getGoodsInfo()
     this.getAreaGoods()
     this.getBanners()
+    this.getNoticeList()
     // this.getLanguage();
     this.getService()
   },
@@ -431,7 +436,14 @@ export default {
     },
     getNoticeList() {
       ban.getNoticeList({ functionType: 1 }).then(res => {
-        this.noticeList = res.data
+        this.noticeList = res.rows || []
+      })
+    },
+    goNotice(item) {
+      console.log(item, '....item')
+      return
+      uni.navigateTo({
+        url: '/pages/notice/index?id=' + item.id,
       })
     },
     goAreaUrl() {
@@ -894,7 +906,7 @@ header {
   // padding: 30rpx 0 0 0;
   text-align: center;
   width: 100%;
-  margin-bottom: 20rpx;
+  margin-bottom: 10rpx;
 }
 
 .changeLanguages {
@@ -1007,4 +1019,189 @@ page {
   opacity: 0.5;
   z-index: 1;
 }
+
+// 简洁实用的公告样式
+.notice-wrapper {
+  margin-bottom: 20rpx;
+  // border-radius: 12rpx;
+  overflow: hidden;
+  background: #fff;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  border: 1rpx solid #f0f0f0;
+}
+
+.clean-notice-item {
+  display: flex;
+  padding: 16rpx 20rpx;
+  background: #fff;
+  margin: 0;
+  height: calc(100% - 32rpx);
+  width: 100%;
+  align-items: center;
+  .notice-icon {
+    margin-right: 16rpx;
+    flex-shrink: 0;
+  }
+
+  .notice-content {
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+    .notice-text {
+      color: #333;
+      font-size: 26rpx;
+      font-weight: 500;
+      line-height: 1.5;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      word-break: break-word;
+    }
+
+    .notice-time {
+      color: #999;
+      font-size: 22rpx;
+      margin-top: 8rpx;
+      display: block;
+    }
+  }
+
+  .notice-arrow {
+    color: #ccc;
+    font-size: 32rpx;
+    margin-left: 16rpx;
+    margin-top: 8rpx;
+    flex-shrink: 0;
+  }
+}
+
+.index-left {
+  font-weight: bold;
+
+  .english {
+    font-size: 24rpx;
+    color: #333;
+  }
+
+  .text {
+    font-size: 30rpx;
+    color: #333;
+    margin-top: 2rpx;
+    letter-spacing: 16rpx;
+  }
+}
+
+.index-top {
+  // background: url('~@/static/images/tBgd.jpg') no-repeat;
+  background-size: 100% 100%;
+  // padding: 30rpx 20rpx; // height: 100rpx;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  position: fixed;
+  z-index: 10;
+  width: 100%;
+  height: 20rpx;
+  .index_t {
+    padding: 30rpx 20rpx;
+  }
+}
+.index-top1 {
+  background: url('~@/static/images/tBgd.jpg') no-repeat;
+  background-size: 100% 100%;
+  // padding: 30rpx 20rpx; // height: 100rpx;
+  // background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  position: fixed;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  .index_t {
+    padding: 30rpx 20rpx;
+  }
+}
+
+.index-right {
+  display: flex;
+}
+
+.kf_A {
+  position: fixed;
+  background: rgba(256, 256, 256, 0.8);
+  width: 62px;
+  // height: 60px;
+  z-index: 10;
+  right: 40rpx;
+  top: 11%;
+  border-radius: 10px;
+  text-align: center;
+  padding: 20rpx 0;
+}
+
+.kf {
+  image {
+    width: 48rpx;
+    height: 48rpx;
+    margin-bottom: 10rpx;
+  }
+
+  font-size: 10px;
+  color: #333333;
+}
+.fly {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  background: #eee;
+  opacity: 0.5;
+  z-index: 1;
+}
+
+// 动画定义
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.7;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.3;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.7;
+  }
+}
+
+@keyframes arrow-bounce {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(6rpx);
+  }
+}
+
+@keyframes dot-fade {
+  0%,
+  100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>
diff --git a/pages/test-swiper.vue b/pages/test-swiper.vue
deleted file mode 100644
index ab4abb9..0000000
--- a/pages/test-swiper.vue
+++ /dev/null
@@ -1,289 +0,0 @@
-<template>
-  <view class="test-page">
-    <view class="page-header">
-      <text class="title">纵向轮播测试</text>
-      <text class="subtitle">验证循环动画连续性</text>
-    </view>
-
-    <!-- 3个项目的轮播测试 -->
-    <view class="test-section">
-      <text class="section-title">3项轮播测试 (重点测试循环)</text>
-      <simple-vertical-swiper
-        :items="threeItems"
-        type="text"
-        :height="60"
-        :autoplay="true"
-        :interval="2000"
-        :show-indicators="true"
-        @change="onThreeItemsChange"
-      />
-      <text class="tip">观察从第3项到第1项的动画是否平滑</text>
-    </view>
-
-    <!-- 4个项目的轮播测试 -->
-    <view class="test-section">
-      <text class="section-title">4项轮播测试</text>
-      <simple-vertical-swiper
-        :items="fourItems"
-        type="notice"
-        :height="50"
-        :autoplay="true"
-        :interval="1800"
-        :show-indicators="true"
-        @change="onFourItemsChange"
-      />
-    </view>
-
-    <!-- 5个项目的轮播测试 -->
-    <view class="test-section">
-      <text class="section-title">5项轮播测试</text>
-      <simple-vertical-swiper
-        :items="fiveItems"
-        type="content"
-        :height="80"
-        :autoplay="true"
-        :interval="2200"
-        :show-indicators="true"
-        @change="onFiveItemsChange"
-      />
-    </view>
-
-    <!-- 手动控制按钮 -->
-    <view class="control-section">
-      <text class="section-title">手动控制测试</text>
-      <simple-vertical-swiper
-        ref="manualSwiper"
-        :items="threeItems"
-        type="text"
-        :height="60"
-        :autoplay="false"
-        :show-indicators="true"
-        @change="onManualChange"
-      />
-      <view class="control-buttons">
-        <button @click="prevSlide" class="control-btn">上一页</button>
-        <button @click="nextSlide" class="control-btn">下一页</button>
-        <button @click="goToFirst" class="control-btn">第1页</button>
-        <button @click="goToLast" class="control-btn">最后页</button>
-      </view>
-    </view>
-
-    <!-- 当前状态显示 -->
-    <view class="status-section">
-      <text class="section-title">状态信息</text>
-      <text class="status-text">3项轮播当前索引: {{ currentIndex.three }}</text>
-      <text class="status-text">4项轮播当前索引: {{ currentIndex.four }}</text>
-      <text class="status-text">5项轮播当前索引: {{ currentIndex.five }}</text>
-      <text class="status-text"
-        >手动轮播当前索引: {{ currentIndex.manual }}</text
-      >
-    </view>
-  </view>
-</template>
-
-<script>
-import SimpleVerticalSwiper from '@/components/simple-vertical-swiper.vue'
-
-export default {
-  name: 'TestSwiper',
-  components: {
-    SimpleVerticalSwiper,
-  },
-  data() {
-    return {
-      // 3项测试数据 - 重点测试循环
-      threeItems: [
-        '🎯 第1项 - 测试到第3项',
-        '🎨 第2项 - 中间项目',
-        '🎪 第3项 - 测试到第1项',
-      ],
-      // 4项测试数据
-      fourItems: [
-        { content: '🌟 公告1 - 欢迎使用轮播组件' },
-        { content: '🎁 公告2 - 新功能上线啦' },
-        { content: '🚀 公告3 - 性能全面优化' },
-        { content: '💫 公告4 - 修复循环动画' },
-      ],
-      // 5项测试数据
-      fiveItems: [
-        { title: '第1项', description: '循环动画测试项目' },
-        { title: '第2项', description: '正常切换动画' },
-        { title: '第3项', description: '中间项目测试' },
-        { title: '第4项', description: '倒数第二项' },
-        { title: '第5项', description: '最后一项到第一项' },
-      ],
-      // 当前索引记录
-      currentIndex: {
-        three: 0,
-        four: 0,
-        five: 0,
-        manual: 0,
-      },
-    }
-  },
-  onLoad() {
-    console.log('轮播测试页面加载')
-  },
-  methods: {
-    // 3项轮播变化
-    onThreeItemsChange(e) {
-      console.log('3项轮播变化:', e)
-      this.currentIndex.three = e.current
-    },
-
-    // 4项轮播变化
-    onFourItemsChange(e) {
-      console.log('4项轮播变化:', e)
-      this.currentIndex.four = e.current
-    },
-
-    // 5项轮播变化
-    onFiveItemsChange(e) {
-      console.log('5项轮播变化:', e)
-      this.currentIndex.five = e.current
-    },
-
-    // 手动轮播变化
-    onManualChange(e) {
-      console.log('手动轮播变化:', e)
-      this.currentIndex.manual = e.current
-    },
-
-    // 手动控制方法
-    prevSlide() {
-      if (this.$refs.manualSwiper) {
-        this.$refs.manualSwiper.prev()
-      }
-    },
-
-    nextSlide() {
-      if (this.$refs.manualSwiper) {
-        this.$refs.manualSwiper.next()
-      }
-    },
-
-    goToFirst() {
-      if (this.$refs.manualSwiper) {
-        this.$refs.manualSwiper.goToSlide(0)
-      }
-    },
-
-    goToLast() {
-      if (this.$refs.manualSwiper) {
-        this.$refs.manualSwiper.goToSlide(this.threeItems.length - 1)
-      }
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.test-page {
-  padding: 20px;
-  background-color: #f5f7fa;
-  min-height: 100vh;
-}
-
-.page-header {
-  text-align: center;
-  margin-bottom: 30px;
-
-  .title {
-    display: block;
-    font-size: 24px;
-    font-weight: 700;
-    color: #2c3e50;
-    margin-bottom: 8px;
-  }
-
-  .subtitle {
-    display: block;
-    font-size: 14px;
-    color: #7f8c8d;
-  }
-}
-
-.test-section {
-  margin-bottom: 25px;
-  background-color: #fff;
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-
-  .section-title {
-    display: block;
-    font-size: 16px;
-    font-weight: 600;
-    color: #34495e;
-    margin-bottom: 15px;
-  }
-
-  .tip {
-    display: block;
-    font-size: 12px;
-    color: #e74c3c;
-    margin-top: 10px;
-    font-style: italic;
-  }
-}
-
-.control-section {
-  margin-bottom: 25px;
-  background-color: #fff;
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-
-  .section-title {
-    display: block;
-    font-size: 16px;
-    font-weight: 600;
-    color: #34495e;
-    margin-bottom: 15px;
-  }
-
-  .control-buttons {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 15px;
-    gap: 10px;
-
-    .control-btn {
-      flex: 1;
-      height: 40px;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      color: #fff;
-      border: none;
-      border-radius: 6px;
-      font-size: 13px;
-      font-weight: 500;
-    }
-  }
-}
-
-.status-section {
-  background-color: #fff;
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-
-  .section-title {
-    display: block;
-    font-size: 16px;
-    font-weight: 600;
-    color: #34495e;
-    margin-bottom: 15px;
-  }
-
-  .status-text {
-    display: block;
-    font-size: 14px;
-    color: #555;
-    margin-bottom: 8px;
-    padding: 8px 12px;
-    background-color: #f8f9fa;
-    border-radius: 4px;
-    border-left: 3px solid #667eea;
-  }
-}
-</style>
diff --git a/pages/test-ticket.vue b/pages/test-ticket.vue
deleted file mode 100644
index a3373b7..0000000
--- a/pages/test-ticket.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<!--
- * @Descripttion: 门票模块测试页面
- * @version: 1.0.0
- * @Author: Assistant
- * @Date: 2025-01-22
--->
-<template>
-  <view class="test-container">
-    <view class="header">
-      <text class="title">门票模块测试</text>
-    </view>
-
-    <view class="button-list">
-      <button class="test-btn" @click="goToTicketList">进入门票活动</button>
-
-      <button class="test-btn" @click="goToBuyTicket">测试购票页面</button>
-
-      <button class="test-btn" @click="goToTicketDetail">测试门票详情</button>
-    </view>
-
-    <view class="info">
-      <text class="info-text">点击按钮测试相应功能模块</text>
-    </view>
-  </view>
-</template>
-
-<script>
-export default {
-  methods: {
-    // 进入门票活动列表
-    goToTicketList() {
-      uni.navigateTo({
-        url: '/pages/ticket/index',
-      })
-    },
-
-    // 测试购票页面
-    goToBuyTicket() {
-      uni.navigateTo({
-        url: '/pages/ticket/buy?activityId=12&activityName=测试活动&price=0.03',
-      })
-    },
-
-    // 测试门票详情
-    goToTicketDetail() {
-      uni.navigateTo({
-        url: '/pages/ticket/detail?ticketId=201',
-      })
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.test-container {
-  padding: 20px;
-  background: #f8f8f8;
-  min-height: 100vh;
-}
-
-.header {
-  text-align: center;
-  margin-bottom: 40px;
-
-  .title {
-    font-size: 24px;
-    font-weight: 600;
-    color: #333;
-  }
-}
-
-.button-list {
-  .test-btn {
-    width: 100%;
-    height: 50px;
-    background: #005bac;
-    color: #fff;
-    border: none;
-    border-radius: 25px;
-    margin-bottom: 20px;
-    font-size: 16px;
-    font-weight: 600;
-  }
-}
-
-.info {
-  text-align: center;
-  margin-top: 40px;
-
-  .info-text {
-    font-size: 14px;
-    color: #999;
-  }
-}
-</style>