trike-datav/src/view/delivery/components/right.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' },
])
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 class="list">
        <!-- <dv-scroll-board :config="list" style="width: 100%; height: 300px" /> -->
        <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;
  width: calc(100% - 40px);
  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;
  }
  .list {
    margin-top: 20px;
    width: 100%;
    height: 80%;
    .list-span1 {
      background-color: red;
    }
  }
  .scroll-container {
    height: 34rem;
    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>