AIzhushou-screen/src/views/index/right-bottom.vue

<script setup lang="ts">
import { rightBottom } from "@/api";
import SeamlessScroll from "@/components/seamless-scroll";
import { useSettingStore } from "@/stores";
import { storeToRefs } from "pinia";
import EmptyCom from "@/components/empty-com";
import { ElMessage } from "element-plus";

const settingStore = useSettingStore();
const { defaultOption, indexConfig } = storeToRefs(settingStore);
// 处理数据
import { useDataStore } from "@/stores/index";
const dataStore = useDataStore();
const { provinceDto } = storeToRefs(dataStore)


const state = reactive<any>({
  list: [],
  defaultOption: {
    ...defaultOption.value,
    singleHeight: 205, //单步运动停止的高度，与滚动盒子的高度进行适配
    limitScrollNum: 3,
    // singleWaitTime:3000, // 停顿间隔
    step:1 //滚动速度，数字越大，滚动越快
  },
  scroll: true,
});

const comName = computed(() => {
  if (indexConfig.value.rightBottomSwiper) {
    return SeamlessScroll;
  } else {
    return EmptyCom;
  }
});
</script>

<template>

  <div class="right_bottom">
    <div class="table-title">
      <div class="title-item">排名</div>
      <div class="title-item">省份/地市 </div>
      <div class="title-item">本科</div>
      <div class="title-item">专科</div>
      <div class="title-item">专升本</div>
    </div>
    <div class="right_bottom_wrap" :class="{ 'overflow-y-auto': true }">
      <!-- <component :is="comName" :list="state.list" v-model="state.scroll"
        :singleHeight="state.defaultOption.singleHeight" :step="state.defaultOption.step"
        :limitScrollNum="state.defaultOption.limitScrollNum" :hover="state.defaultOption.hover"
        :singleWaitTime="state.defaultOption.singleWaitTime" :wheel="state.defaultOption.wheel"> -->
        <div class="table-row" v-for="(item, i) in provinceDto">
          <div class="row-item">{{ i + 1 }}</div>
          <div class="row-item">{{ item.provinceName }}</div>
          <div class="row-item" v-for="(peo) in item.degreesDto">{{ peo.paymentCompleted }}</div>
        </div>
      <!-- </component> -->
    </div>
  </div>
</template>

<style scoped lang="scss">
.right_bottom {
  width: 100%;
  height: 100%;

  .table-title {
    display: flex;
    height: 50px;
    align-items: center;
    color: #545e70;
    border-radius: 10px 10px 0px 0px;
    border: 1px solid #33343F;

    .title-item {
      width: 100px;
      text-align: center;

    }
  }
}

.right_bottom_wrap {
  overflow: hidden;
  height: 210px;

  .table-row {
    display: flex;
    height: 50px;
    border-bottom: 1px solid #33343F;
    border-top: 1px solid #33343F;
    line-height: 50px;
    margin-bottom: 2px;
    color:#E6E6FB;
    &:hover{
      background: repeating-linear-gradient(0deg, #0042b3 0%, #0049ca 50%, #0042b3 100%);
    }

    .row-item {
      width: 100px;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.overflow-y-auto {
  overflow-y: auto;
}
::-webkit-scrollbar {
  width: 0px;
}
</style>