586 lines
14 KiB
Vue
586 lines
14 KiB
Vue
|
<template>
|
|||
|
|
<view class="simple-vertical-swiper" :style="{ height: height + 'px' }">
|
|||
|
|
<view
|
|||
|
|
class="swiper-wrapper"
|
|||
|
|
@touchstart.stop="onTouchStart"
|
|||
|
|
@touchmove.stop.prevent="onTouchMove"
|
|||
|
|
@touchend.stop="onTouchEnd"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
v-for="(item, index) in items"
|
|||
|
|
:key="index"
|
|||
|
|
class="swiper-slide"
|
|||
|
|
:class="{ 'swiper-slide-active': index === currentIndex }"
|
|||
|
|
:style="getSlideStyle(index)"
|
|||
|
|
>
|
|||
|
|
<!-- 公告类型 -->
|
|||
|
|
<view v-if="type === 'notice'" class="notice-item">
|
|||
|
|
<text class="notice-icon">📢</text>
|
|||
|
|
<text class="notice-text">{{ item.content || item }}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 商品类型 -->
|
|||
|
|
<view v-else-if="type === 'product'" class="product-item">
|
|||
|
|
<image
|
|||
|
|
class="product-image"
|
|||
|
|
:src="item.image"
|
|||
|
|
mode="aspectFill"
|
|||
|
|
></image>
|
|||
|
|
<view class="product-info">
|
|||
|
|
<text class="product-name">{{ item.name }}</text>
|
|||
|
|
<text class="product-price">¥{{ item.price }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 内容类型 -->
|
|||
|
|
<view v-else-if="type === 'content'" class="content-item">
|
|||
|
|
<text class="content-title">{{ item.title }}</text>
|
|||
|
|
<text class="content-desc">{{ item.description }}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 文本类型 -->
|
|||
|
|
<view v-else-if="type === 'text'" class="text-item">
|
|||
|
|
<text class="text-content">{{ item.text || item }}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 自定义插槽 -->
|
|||
|
|
<slot v-else :item="item" :index="index">
|
|||
|
|
<view class="default-item">
|
|||
|
|
<text>{{ item.text || item.content || item }}</text>
|
|||
|
|
</view>
|
|||
|
|
</slot>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 指示器 -->
|
|||
|
|
<view v-if="showIndicators && items.length > 1" class="indicators">
|
|||
|
|
<view
|
|||
|
|
v-for="(item, index) in items"
|
|||
|
|
:key="index"
|
|||
|
|
class="indicator"
|
|||
|
|
:class="{ active: index === currentIndex }"
|
|||
|
|
></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: 'SimpleVerticalSwiper',
|
|||
|
|
props: {
|
|||
|
|
// 轮播数据
|
|||
|
|
items: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => [],
|
|||
|
|
},
|
|||
|
|
// 数据类型：notice(公告), product(商品), content(内容), text(文本), custom(自定义)
|
|||
|
|
type: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'text',
|
|||
|
|
},
|
|||
|
|
// 组件高度
|
|||
|
|
height: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 60,
|
|||
|
|
},
|
|||
|
|
// 是否自动轮播
|
|||
|
|
autoplay: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true,
|
|||
|
|
},
|
|||
|
|
// 自动轮播间隔时间(ms)
|
|||
|
|
interval: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 3000,
|
|||
|
|
},
|
|||
|
|
// 动画持续时间(ms)
|
|||
|
|
duration: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 300,
|
|||
|
|
},
|
|||
|
|
// 是否显示指示器
|
|||
|
|
showIndicators: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false,
|
|||
|
|
},
|
|||
|
|
// 是否循环轮播
|
|||
|
|
circular: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
currentIndex: 0,
|
|||
|
|
timer: null,
|
|||
|
|
isTransitioning: false,
|
|||
|
|
// 触摸相关
|
|||
|
|
touchStartY: 0,
|
|||
|
|
touchStartTime: 0,
|
|||
|
|
isTouching: false,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
itemsLength() {
|
|||
|
|
return this.items.length
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
items: {
|
|||
|
|
handler() {
|
|||
|
|
this.initSwiper()
|
|||
|
|
},
|
|||
|
|
immediate: true,
|
|||
|
|
},
|
|||
|
|
autoplay(newVal) {
|
|||
|
|
if (newVal) {
|
|||
|
|
this.startAutoplay()
|
|||
|
|
} else {
|
|||
|
|
this.clearTimer()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.initSwiper()
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
this.clearTimer()
|
|||
|
|
},
|
|||
|
|
// uniapp 生命周期
|
|||
|
|
onReady() {
|
|||
|
|
this.initSwiper()
|
|||
|
|
},
|
|||
|
|
onUnload() {
|
|||
|
|
this.clearTimer()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 获取滑块样式 - 解决循环轮播动画连续性问题
|
|||
|
|
getSlideStyle(index) {
|
|||
|
|
if (this.itemsLength <= 1) {
|
|||
|
|
return {
|
|||
|
|
transform: 'translateY(0px)',
|
|||
|
|
opacity: 1,
|
|||
|
|
zIndex: 1,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let translateY = 0
|
|||
|
|
let opacity = 0.6
|
|||
|
|
let zIndex = 1
|
|||
|
|
|
|||
|
|
if (index === this.currentIndex) {
|
|||
|
|
// 当前激活项
|
|||
|
|
translateY = 0
|
|||
|
|
opacity = 1
|
|||
|
|
zIndex = 10
|
|||
|
|
} else {
|
|||
|
|
// 计算偏移量
|
|||
|
|
let offset = index - this.currentIndex
|
|||
|
|
|
|||
|
|
// 循环轮播的关键：选择最短路径
|
|||
|
|
if (this.circular && this.itemsLength > 2) {
|
|||
|
|
const halfLength = this.itemsLength / 2
|
|||
|
|
|
|||
|
|
// 如果偏移量的绝对值大于一半，说明走相反方向更近
|
|||
|
|
if (offset > halfLength) {
|
|||
|
|
offset = offset - this.itemsLength // 从负方向走
|
|||
|
|
} else if (offset < -halfLength) {
|
|||
|
|
offset = offset + this.itemsLength // 从正方向走
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
translateY = offset * this.height
|
|||
|
|
|
|||
|
|
// 控制可见性，只显示相邻的项目
|
|||
|
|
const absOffset = Math.abs(offset)
|
|||
|
|
if (absOffset <= 1) {
|
|||
|
|
opacity = absOffset === 1 ? 0.3 : 0.6
|
|||
|
|
zIndex = absOffset === 1 ? 5 : 1
|
|||
|
|
} else {
|
|||
|
|
opacity = 0
|
|||
|
|
zIndex = 0
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const transition =
|
|||
|
|
this.isTransitioning && !this.isTouching
|
|||
|
|
? `all ${this.duration}ms cubic-bezier(0.25, 0.46, 0.45, 0.94)`
|
|||
|
|
: 'none'
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
transform: `translateY(${translateY}px)`,
|
|||
|
|
opacity: opacity,
|
|||
|
|
zIndex: zIndex,
|
|||
|
|
transition: transition,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 初始化轮播
|
|||
|
|
initSwiper() {
|
|||
|
|
console.log(
|
|||
|
|
'初始化轮播, items数量:',
|
|||
|
|
this.itemsLength,
|
|||
|
|
'autoplay:',
|
|||
|
|
this.autoplay
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
if (this.itemsLength === 0) return
|
|||
|
|
|
|||
|
|
this.currentIndex = 0
|
|||
|
|
|
|||
|
|
if (this.autoplay && this.itemsLength > 1) {
|
|||
|
|
this.startAutoplay()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 开始自动轮播
|
|||
|
|
startAutoplay() {
|
|||
|
|
this.clearTimer()
|
|||
|
|
if (this.autoplay && this.itemsLength > 1) {
|
|||
|
|
console.log('开始自动轮播，间隔:', this.interval)
|
|||
|
|
this.timer = setInterval(() => {
|
|||
|
|
this.next()
|
|||
|
|
}, this.interval)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 清除定时器
|
|||
|
|
clearTimer() {
|
|||
|
|
if (this.timer) {
|
|||
|
|
clearInterval(this.timer)
|
|||
|
|
this.timer = null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 下一页
|
|||
|
|
next() {
|
|||
|
|
if (this.isTransitioning || this.itemsLength <= 1) return
|
|||
|
|
|
|||
|
|
console.log('切换到下一页，当前:', this.currentIndex)
|
|||
|
|
|
|||
|
|
this.isTransitioning = true
|
|||
|
|
|
|||
|
|
const nextIndex = this.circular
|
|||
|
|
? (this.currentIndex + 1) % this.itemsLength
|
|||
|
|
: Math.min(this.currentIndex + 1, this.itemsLength - 1)
|
|||
|
|
|
|||
|
|
this.currentIndex = nextIndex
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.isTransitioning = false
|
|||
|
|
this.$emit('change', {
|
|||
|
|
current: this.currentIndex,
|
|||
|
|
currentItem: this.items[this.currentIndex],
|
|||
|
|
})
|
|||
|
|
}, this.duration)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 上一页
|
|||
|
|
prev() {
|
|||
|
|
if (this.isTransitioning || this.itemsLength <= 1) return
|
|||
|
|
|
|||
|
|
this.isTransitioning = true
|
|||
|
|
|
|||
|
|
const prevIndex = this.circular
|
|||
|
|
? (this.currentIndex - 1 + this.itemsLength) % this.itemsLength
|
|||
|
|
: Math.max(this.currentIndex - 1, 0)
|
|||
|
|
|
|||
|
|
this.currentIndex = prevIndex
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.isTransitioning = false
|
|||
|
|
this.$emit('change', {
|
|||
|
|
current: this.currentIndex,
|
|||
|
|
currentItem: this.items[this.currentIndex],
|
|||
|
|
})
|
|||
|
|
}, this.duration)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 跳转到指定页
|
|||
|
|
goToSlide(index) {
|
|||
|
|
if (index === this.currentIndex || this.isTransitioning) return
|
|||
|
|
if (index < 0 || index >= this.itemsLength) return
|
|||
|
|
|
|||
|
|
this.isTransitioning = true
|
|||
|
|
this.currentIndex = index
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.isTransitioning = false
|
|||
|
|
this.$emit('change', {
|
|||
|
|
current: this.currentIndex,
|
|||
|
|
currentItem: this.items[this.currentIndex],
|
|||
|
|
})
|
|||
|
|
}, this.duration)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 触摸开始
|
|||
|
|
onTouchStart(e) {
|
|||
|
|
if (this.itemsLength <= 1) return
|
|||
|
|
|
|||
|
|
console.log('触摸开始')
|
|||
|
|
|
|||
|
|
this.clearTimer() // 停止自动轮播
|
|||
|
|
this.touchStartY = e.touches[0].clientY
|
|||
|
|
this.touchStartTime = Date.now()
|
|||
|
|
this.isTouching = true
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 触摸移动
|
|||
|
|
onTouchMove(e) {
|
|||
|
|
if (this.isTransitioning || !this.isTouching || this.itemsLength <= 1)
|
|||
|
|
return
|
|||
|
|
|
|||
|
|
const deltaY = e.touches[0].clientY - this.touchStartY
|
|||
|
|
console.log('触摸移动, deltaY:', deltaY)
|
|||
|
|
|
|||
|
|
// 事件已通过修饰符处理，这里只做逻辑判断
|
|||
|
|
// 可以在这里添加实时跟随手指的效果
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 触摸结束
|
|||
|
|
onTouchEnd(e) {
|
|||
|
|
if (!this.isTouching || this.itemsLength <= 1) return
|
|||
|
|
|
|||
|
|
this.isTouching = false
|
|||
|
|
|
|||
|
|
const currentY = e.changedTouches[0].clientY
|
|||
|
|
const deltaY = currentY - this.touchStartY
|
|||
|
|
const deltaTime = Date.now() - this.touchStartTime
|
|||
|
|
const velocity = Math.abs(deltaY) / deltaTime
|
|||
|
|
|
|||
|
|
console.log('触摸结束, deltaY:', deltaY, 'velocity:', velocity)
|
|||
|
|
|
|||
|
|
// 判断是否需要切换
|
|||
|
|
const threshold = this.height * 0.25 // 降低阈值，更容易触发
|
|||
|
|
const velocityThreshold = 0.3
|
|||
|
|
const shouldSwitch =
|
|||
|
|
Math.abs(deltaY) > threshold || velocity > velocityThreshold
|
|||
|
|
|
|||
|
|
if (shouldSwitch) {
|
|||
|
|
if (deltaY > 0) {
|
|||
|
|
// 向下滑动，显示上一项
|
|||
|
|
console.log('手势触发：上一页')
|
|||
|
|
this.prev()
|
|||
|
|
} else {
|
|||
|
|
// 向上滑动，显示下一项
|
|||
|
|
console.log('手势触发：下一页')
|
|||
|
|
this.next()
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
console.log('手势未达到切换阈值，不切换')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重新开始自动轮播
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (this.autoplay) {
|
|||
|
|
this.startAutoplay()
|
|||
|
|
}
|
|||
|
|
}, 1000)
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.simple-vertical-swiper {
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
// 防止触摸时选中文本
|
|||
|
|
user-select: none;
|
|||
|
|
-webkit-user-select: none;
|
|||
|
|
// App端需要的设置
|
|||
|
|
-webkit-overflow-scrolling: touch;
|
|||
|
|
|
|||
|
|
.swiper-wrapper {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
// uniapp App端触摸控制
|
|||
|
|
touch-action: none;
|
|||
|
|
// 防止触摸时的默认行为
|
|||
|
|
-webkit-touch-callout: none;
|
|||
|
|
-webkit-tap-highlight-color: transparent;
|
|||
|
|
// App端滚动穿透防护
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper-slide {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
// 防止子元素被选中
|
|||
|
|
user-select: none;
|
|||
|
|
-webkit-user-select: none;
|
|||
|
|
|
|||
|
|
&.swiper-slide-active {
|
|||
|
|
opacity: 1 !important;
|
|||
|
|
z-index: 10 !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 公告样式
|
|||
|
|
.notice-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0 15px;
|
|||
|
|
width: calc(100% - 30px);
|
|||
|
|
height: 80%;
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
border-radius: 6px;
|
|||
|
|
|
|||
|
|
.notice-icon {
|
|||
|
|
font-size: 16px;
|
|||
|
|
margin-right: 8px;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.notice-text {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 14px;
|
|||
|
|
flex: 1;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 商品样式
|
|||
|
|
.product-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 10px 15px;
|
|||
|
|
width: calc(100% - 30px);
|
|||
|
|
height: calc(100% - 20px);
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|||
|
|
|
|||
|
|
.product-image {
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
margin-right: 12px;
|
|||
|
|
background-color: #f0f0f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-info {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.product-name {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-price {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #ff6b6b;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 内容样式
|
|||
|
|
.content-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 15px;
|
|||
|
|
width: calc(100% - 30px);
|
|||
|
|
height: calc(100% - 30px);
|
|||
|
|
text-align: center;
|
|||
|
|
background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
|
|||
|
|
.content-title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-desc {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: rgba(255, 255, 255, 0.9);
|
|||
|
|
line-height: 1.3;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 文本样式
|
|||
|
|
.text-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 0 15px;
|
|||
|
|
width: calc(100% - 30px);
|
|||
|
|
height: 80%;
|
|||
|
|
background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
|
|||
|
|
border-radius: 6px;
|
|||
|
|
|
|||
|
|
.text-content {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 默认样式
|
|||
|
|
.default-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 0 15px;
|
|||
|
|
width: calc(100% - 30px);
|
|||
|
|
height: 80%;
|
|||
|
|
background-color: #f8f9fa;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
border: 1px solid #e9ecef;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 14px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 指示器
|
|||
|
|
.indicators {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 8px;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 3px;
|
|||
|
|
z-index: 20;
|
|||
|
|
|
|||
|
|
.indicator {
|
|||
|
|
width: 3px;
|
|||
|
|
height: 12px;
|
|||
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|||
|
|
border-radius: 2px;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|||
|
|
height: 16px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|