web-base-h5/components/notice-styles-demo.vue

<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>