FE_sandTable/src/views/Home.vue

<template>
  <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', { active: curLevel === item.id }]"
           @click="selecLevel(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')]"
         @click="toRole"></div>
  </div>
  <Panel />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { checkPointList } from '@/api/judgment';
import Panel from '@/components/Panel/index.vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';

const router = useRouter();
const route = useRoute();
const collected = ref<boolean>(false);
const curLevel = ref<number | string>('');
const levels = ref<Record<string, any>[]>([]);
// 关卡列表
const getLevel = async () => {
  const { data } = await checkPointList(1);
  levels.value = data;
};
// 点击关卡回调
const selecLevel = (item: Record<string, any>) => {
  curLevel.value = item.id;
};
// 确定
const toRole = () => {
  curLevel.value
    ? router.push({
        path: `/role`,
        query: {
          ...route.query,
          levelId: curLevel.value,
        },
      })
    : ElMessage.error('请选择关卡！');
};
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;
  }
  &.active {
    @apply bg-[url('@/assets/images/level/10.png')];
    h6 {
      @apply bg-none;
      text-shadow: none;
      -webkit-text-fill-color: #fff;
    }
  }
  &: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>