FE_sandTable/src/views/Home.vue

<template>
  <div class="m-[-0.75rem]">
    <div class="flex justify-between items-center h-[64px] px-5 bg-white">
      <h1>金融产品设计及数字化营销沙盘系统</h1>
      <div class="inline-flex items-center">
        <img class="mr-3 cursor-pointer"
             src="@/assets/images/level/1.png"
             alt="" />
        <img class="mr-3 cursor-pointer"
             src="@/assets/images/level/2.png"
             alt="" />
        <img class="cursor-pointer"
             src="@/assets/images/level/3.png"
             alt="" />
      </div>
    </div>
    <div class="relative min-h-[calc(100vh-64px)] pt-5 pl-5 bg-[url('@/assets/images/level/4.png')] bg-[length:100%_100%] bg-no-repeat">
      <div class="relative">
        <img src="@/assets/images/level/5.png"
             alt="" />
        <div class="absolute top-5 left-40 flex items-center cursor-pointer"
             @click="collected = !collected">
          <img v-if="collected"
               src="@/assets/images/level/7.png"
               alt="" />
          <img v-else
               src="@/assets/images/level/6.png"
               alt="" />
          <span class="ml-2 text-sm text-[#999]">仅显示已收藏的项目</span>
        </div>
      </div>
      <div class="relative mt-5">
        <div v-for="(item, i) in levels"
             :key="i"
             class="item">
          <span class="num">LV.{{ i + 1 }}</span>
          <div class="texts">
            <h6>第一关</h6>
            <p class="des mul-ellipsis2">{{ item.name }}</p>
            <img class="icon"
                 src="@/assets/images/level/star1.png"
                 alt="" />
          </div>
        </div>
      </div>

      <img class="arrow top-0 left-[50%] translate-x-[-50%]"
           src="@/assets/images/level/arrow-up.png"
           alt="" />
      <img class="arrow right-0 top-[50%] translate-y-[-50%]"
           src="@/assets/images/level/arrow-right.png"
           alt="" />
      <img class="arrow bottom-0 left-[50%] translate-x-[-50%]"
           src="@/assets/images/level/arrow-down.png"
           alt="" />
      <img class="arrow left-0 top-[50%] translate-y-[-50%]"
           src="@/assets/images/level/arrow-left.png"
           alt="" />
      <div class="absolute bottom-2 right-1 w-[262px] h-[74px] bg-[url('@/assets/images/level/submit.png')] bg-[length:100%_100%] bg-no-repeat cursor-pointer hover:bg-[url('@/assets/images/level/submit-hover.png')]"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { checkPointList } from '@/api/judgment';

const collected = ref<boolean>(false);
const levels = ref<Record<string, any>[]>([]);
// 关卡列表
const getLevel = async () => {
  const { data } = await checkPointList(1);
  levels.value = data;
};
onMounted(() => {
  getLevel();
});
</script>

<style lang="scss" scoped>
.item {
  --w: 300px;
  --line2: 160px;
  --line3: 360px;
  --line4: 520px;
  @apply absolute w-[218px] h-[120px] text-white bg-[url('@/assets/images/level/8.png')] bg-[length:100%_100%] bg-no-repeat cursor-pointer;
  .num {
    @apply absolute bottom-[35px] left-[28px] font-['DIN-BlackItalic'];
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  }
  .texts {
    @apply pl-[90px] pt-[10px] pr-[13px];
  }
  h6 {
    @apply text-[#FFB627] text-lg font-['AlibabaPuHuiTi_2_105_Heavy'] rounded-[24px];
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    background: linear-gradient(180deg, #fffcf0 0%, #ffc868 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .des {
    @apply text-sm leading-[20px];
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  }
  .icon {
    @apply absolute top-[13px] right-[11px];
  }
  &:hover {
    @apply opacity-80;
  }
  &:nth-child(2) {
    @apply top-[var(--line2)] left-[150px];
  }
  &:nth-child(3) {
    @apply left-[var(--w)];
  }
  &:nth-child(4) {
    @apply top-[var(--line2)] left-[450px];
  }
  &:nth-child(5) {
    @apply left-[calc(var(--w)*2)];
  }
  &:nth-child(6) {
    @apply top-[var(--line2)] left-[750px];
  }
  &:nth-child(7) {
    @apply left-[calc(var(--w)*3)];
  }
  &:nth-child(8) {
    @apply top-[var(--line2)] left-[1050px];
  }
  &:nth-child(9) {
    @apply left-[calc(var(--w)*4)];
  }
  &:nth-child(10) {
    @apply top-[var(--line2)] left-[1350px];
  }
  &:nth-child(11) {
    @apply top-[var(--line3)] left-[1350px];
  }
  &:nth-child(12) {
    @apply top-[var(--line4)] left-[1200px];
  }
}
.arrow {
  @apply absolute cursor-pointer;
}
</style>