536 lines
12 KiB
Vue
536 lines
12 KiB
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>
|