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