roundabout/src/pages/TopRulePage.vue

<template>
  <BackPage>
    <div v-if="route.query.type =='rule'">
      <div class="ruleImage-box">
        <img :src="ruleImage" />
      </div>
      <div class="IKnow-box">
        <img :src="IKnow" @click="goBack" />
      </div>
    </div>
    <div v-else>
      <div class="ruleImage-box">
        <img :src="TopImage" />
        <div class="Scroll-box">
          <div v-for="(item,index) in Toplist" :key="index" class="Scroll-box-Content">
            <div class="Scroll-box-Content-sum">{{ index+1 }}</div>
            <div class="Scroll-box-Content-name">{{ item.name }}</div>
            <img :src="item.avatar" />
            <div class="Scroll-box-Content-time">{{ item.totalMillsec/1000 }}s</div>
          </div>
        </div>
      </div>
      <div class="IKnow-box">
        <img :src="GoHome" @click="gohomePage" />
      </div>
    </div>
  </BackPage>
</template>

<script>
import { useRoute, useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import ruleImage from '@/assets/TipsImage/3-3.png'
import IKnow from '@/assets/ButtonImage/我知道了.png'
import TopImage from '@/assets/TipsImage/3-2.png'
import GoHome from '@/assets/ButtonImage/返回首页.png'
import { gameTop } from '@/utils/api'

export default {
  setup() {
    const route = useRoute()
    const router = useRouter()

    const goBack = () => {
      // 字符串路径
      router.go(-1)
    }

    const gohomePage = () => {
      // 字符串路径
      router.push('/')
    }
    let Toplist = ref([])

    onMounted(() => {
      if (route.query.type == 'top') {
        gameTop().then((e) => {
          Toplist.value = e
          console.log(e)
        })
      }
      console.log(router)
      // 打印
    })

    return {
      goBack,
      gohomePage,
      ruleImage,
      IKnow,
      TopImage,
      GoHome,
      Toplist,
      router,
      route
    }
  }
}
</script>

<style lang="less" scoped>
.ruleImage-box {
  width: 100vw;
  position: absolute;
  top: 13vh;
  display: flex;
  justify-content: center;
  > img {
    width: 93%;
    height: 100%;
  }
  .Scroll-box {
    width: 80%;
    height: 61%;
    top: 18vh;
    position: absolute;
    overflow: auto;
    .Scroll-box-Content {
      display: flex;
      border-bottom: 1px dashed rgba(0, 0, 0, 0.3);
      align-items: center;
      height: 7vh;

      > img {
        width: 10vw;
        height: 5vh;
        border-radius: 50%;
      }
      &-sum {
        // text-align: left;
        // padding-left: 2em;
        width: 25vw;
        text-align: center;
      }
      &-name {
        width: 30vw;
        text-align: left;
      }
      &-time {
        width: 30vw;
        text-align: center;
      }
    }
  }
}
.IKnow-box {
  position: absolute;
  width: 100vw;
  z-index: 500;
  display: flex;
  bottom: 7vh;

  justify-content: center;
  > img {
    width: 30%;
  }
}
</style>