173 lines
4.2 KiB
Vue
173 lines
4.2 KiB
Vue
<script setup>
|
|
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"
|
|
import border from "../../../components/border.vue"
|
|
const items = reactive([
|
|
{ id: 1, text: '莲花池 1' },
|
|
{ id: 2, text: '莲花池 2' },
|
|
{ id: 3, text: '莲花池 3' },
|
|
{ id: 3, text: '莲花池 4' },
|
|
{ id: 3, text: '莲花池 5' },
|
|
{ id: 3, text: '莲花池 6' },
|
|
{ id: 3, text: '莲花池 7' },
|
|
{ id: 3, text: '莲花池 8' },
|
|
{ id: 3, text: '莲花池 8' },
|
|
{ id: 3, text: '莲花池 8' },
|
|
{ id: 3, text: '莲花池 8' },
|
|
{ id: 3, text: '莲花池 8' },
|
|
{ id: 3, text: '莲花池 8' },
|
|
{ id: 3, text: '莲花池 8' },
|
|
{ id: 3, text: '莲花池 8' },
|
|
{ id: 3, text: '莲花池 8' },
|
|
{ id: 3, text: '莲花池 8' },
|
|
{ id: 3, text: '莲花池 8' },
|
|
{ id: 3, text: '莲花池 8' },
|
|
{ id: 3, text: '莲花池 8' },
|
|
{ id: 3, text: '莲花池 8' },
|
|
{ id: 3, text: '莲花池 8' },
|
|
{ id: 3, text: '莲花池 8' },
|
|
])
|
|
const scrollContainerRef = ref(null);
|
|
let timer = null;
|
|
const autoScroll = () => {
|
|
setTimeout(() => {
|
|
timer = setInterval(() => {
|
|
if (scrollContainerRef.value) {
|
|
scrollContainerRef.value.scrollTop += 1;
|
|
if (scrollContainerRef.value.scrollTop + scrollContainerRef.value.clientHeight >= scrollContainerRef.value.scrollHeight - 1) {
|
|
scrollContainerRef.value.scrollTop = 0;
|
|
clearInterval(timer);
|
|
autoScroll();
|
|
}
|
|
}
|
|
}, 50)
|
|
}, 1000)
|
|
}
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
autoScroll();
|
|
})
|
|
})
|
|
onUnmounted(() => {
|
|
clearInterval(timer);
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<border>
|
|
<div class="box">
|
|
<div class="title">订单排行榜</div>
|
|
<div
|
|
style="
|
|
height: calc(100% - 60px);
|
|
width: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
"
|
|
>
|
|
<div class="scroll-container" ref="scrollContainerRef">
|
|
<div
|
|
v-for="(item, index) in items"
|
|
:key="item.id"
|
|
class="b-list-item"
|
|
>
|
|
<div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
|
|
{{ index + 1 }}
|
|
</div>
|
|
<div class="name">{{ item.text }}</div>
|
|
<div class="line">
|
|
<div
|
|
class="line-body"
|
|
:style="{ width: '80%' }"
|
|
:class="{ 'line-body2': index >= 3 }"
|
|
></div>
|
|
</div>
|
|
<div class="count">6000</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</border>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.box {
|
|
padding: 20px;
|
|
font-size: 0.8rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
.title {
|
|
width: 100%;
|
|
background-image: url(../../../assets/img/title.png);
|
|
background-size: 100% 100%;
|
|
height: 40px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: "ifonts";
|
|
font-size: 1.2rem;
|
|
}
|
|
.scroll-container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
overflow-y: auto;
|
|
/* 隐藏滚动条 */
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.b-list-item {
|
|
height: 3rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 10px;
|
|
.rank {
|
|
width: 50px;
|
|
height: 1.5em;
|
|
}
|
|
.rank1 {
|
|
background-image: url(../../../assets/img/ranking1.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
.rank2 {
|
|
background-image: url(../../../assets/img/ranking2.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
.name {
|
|
flex: 5;
|
|
}
|
|
.line {
|
|
width: 50%;
|
|
height: 0.8rem;
|
|
background-color: #0a385b;
|
|
border-radius: 0.8rem;
|
|
.line-body {
|
|
height: 100%;
|
|
border-radius: 0.8rem;
|
|
width: 0%;
|
|
background: linear-gradient(270deg, #00c0fe 0%, #0f87fa 100%);
|
|
}
|
|
.line-body2 {
|
|
background: linear-gradient(270deg, #5bdbf6 0%, #5bdbf6 100%);
|
|
}
|
|
}
|
|
.count {
|
|
flex: 2;
|
|
font-size: 1rem;
|
|
font-family: "ifonts";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|