karlcarlo
a5c5d753b6
- 新增大量图片资源，包括图标、背景图、海报等，用于页面展示 - 添加字体文件及样式配置，支持自定义字体 - 引入 uni-ui 组件库，包括图标、弹窗、日期选择器等常用组件 - 添加网络状态监听、加密工具等基础工具函数 - 配置 Vuex 状态管理，包括购物车数量、热门搜索词等 - 增加页面组件，如用户协议、分销信息、提现状态等 - 配置项目构建和忽略文件，优化开发体验
86 lines
1.6 KiB
Vue
86 lines
1.6 KiB
Vue
<template>
|
|
<!-- 无缝滚动效果 -->
|
|
<view class="marquee-wrap">
|
|
<view class="marquee-list" :class="{'animate-up': animateUp}">
|
|
<view class="marquee-item" v-for="(item, index) in listData" :key="item.id">
|
|
{{ prefix }}<text class="name">{{ item.user ? item.user.nickname : '****' }}</text>获得<text>{{ item.prize.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "noticeBar",
|
|
data() {
|
|
return {
|
|
animateUp: false,
|
|
listData: JSON.parse(JSON.stringify(this.showMsg)),
|
|
timer: null
|
|
}
|
|
},
|
|
props: {
|
|
showMsg: {
|
|
type: Array
|
|
},
|
|
prefix: {
|
|
type: String
|
|
},
|
|
},
|
|
mounted() {
|
|
this.timer = setInterval(this.scrollAnimate, 2500);
|
|
},
|
|
methods: {
|
|
scrollAnimate() {
|
|
this.animateUp = true
|
|
setTimeout(() => {
|
|
this.listData.push(this.listData[0])
|
|
this.listData.shift()
|
|
this.animateUp = false
|
|
}, 500)
|
|
}
|
|
},
|
|
destroyed() {
|
|
clearInterval(this.timer)
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.marquee-wrap {
|
|
width: 100%;
|
|
height: 40rpx;
|
|
border-radius: 20px;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
|
|
.marquee-list {
|
|
padding: 0;
|
|
|
|
.marquee-item {
|
|
width: 100%;
|
|
height: 100%;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
padding: 0;
|
|
list-style: none;
|
|
line-height: 40rpx;
|
|
// text-align: center;
|
|
color: #fff;
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.name {
|
|
color: #FFEF6C;
|
|
}
|
|
}
|
|
|
|
.animate-up {
|
|
transition: all 0.5s ease-in-out;
|
|
// transform: translateY(-40rpx);
|
|
margin-top: -40rpx;
|
|
}
|
|
}
|
|
</style> |