99 lines
2.1 KiB
Vue
99 lines
2.1 KiB
Vue
<script setup>
|
||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||
|
||
import useStore from "@/store";
|
||
import { storeToRefs } from "pinia";
|
||
const { user } = storeToRefs(useStore());
|
||
|
||
const props = defineProps({});
|
||
const list = [1, 2, 3, 4, 5];
|
||
const timer = ref(null);
|
||
const offset = ref(0);
|
||
|
||
onMounted(async () => {
|
||
timer.value = setInterval(() => {
|
||
if (offset.value <= -100 * list.length) {
|
||
offset.value = 100;
|
||
} else {
|
||
offset.value -= 0.2;
|
||
}
|
||
}, 10);
|
||
});
|
||
onBeforeUnmount(() => {
|
||
clearInterval(timer.value);
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<view class="notice-bar">
|
||
<image src="../static/announce.png" mode="heightFix" />
|
||
<view>
|
||
<view
|
||
v-for="(item, index) in list"
|
||
:key="item"
|
||
:style="{
|
||
transform: `translateX(${offset}%)`,
|
||
}"
|
||
>
|
||
<image src="../static/user-icon.png" mode="widthFix" />
|
||
<text class="truncate">{{ index + 1 }}毛毛丛</text>
|
||
<text>成功晋升</text>
|
||
<text>荣耀王者</text>
|
||
<text>段位，从此横着走！</text>
|
||
</view>
|
||
</view>
|
||
<image src="../static/enter.png" mode="widthFix" />
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.notice-bar {
|
||
margin-top: 10rpx;
|
||
background: linear-gradient(180deg, #2f2d2b 0%, #252831 100%);
|
||
border-radius: 25rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.notice-bar > image:first-child {
|
||
height: 100%;
|
||
}
|
||
.notice-bar > view {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.notice-bar > view > view {
|
||
flex-shrink: 0;
|
||
font-size: 24rpx;
|
||
padding-left: 15rpx;
|
||
color: #999;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.notice-bar > view > view > image {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 10rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.notice-bar > view > view > text {
|
||
word-break: keep-all;
|
||
display: inline-block;
|
||
}
|
||
.notice-bar > view > view > text:nth-child(2) {
|
||
color: #fff;
|
||
width: 100rpx;
|
||
display: block;
|
||
}
|
||
.notice-bar > view > view > text:nth-child(4) {
|
||
color: #e7ba80;
|
||
}
|
||
.notice-bar > image:last-child {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin: 0 20rpx;
|
||
}
|
||
</style>
|