关卡

src/api/judgment.ts

@@ -5,3 +5,4 @@ export const getProcess = async (): Promise<any> => (await axios.post('/judgment
 export const getProcessInformationBasedOnRoles = async (id: number): Promise<any> =>
   (await axios.post(`/judgment/judgment/stRecord/getProcessInformationBasedOnRoles?systemId=19&parentId=${id}`)).data;
 export const addOperation = async (data: Record<string, any>): Promise<any> => (await axios.post('/product/product/bank/operation/addOperation', data)).data;
+export const checkPointList = async (projectId: number): Promise<any> => (await axios.post(`/judgment/judgment/stRecord/checkPointList?projectId=${projectId}`)).data;

src/layout/index.vue

@@ -1,14 +1,11 @@
 <template>
-  <div class="expand body min-h-full bg-gray-100">
+  <div class="min-h-full"
-    <!--遮罩层。当手机模式且左边栏打开时，显示遮罩层-->
+       :class="isIndex ? 'index' : 'body'">
-    <div v-if="showMask"
+    <app-header v-if="!isIndex" />
-         class="h-full mt-1 w-full absolute z-30 bg-black opacity-30 md:hidden"
+    <app-sidebar v-if="!hideNav && !isIndex"
-         @click="closeSidebar" />
+                 class="sidebar fixed w-sidebar h-full px-5 overflow-hidden transition-width duration-300 z-40" />
-    <app-header />
+    <div class="main min-h-[calc(100vh-85px)] transition-margin duration-300 overflow-auto"
-    <app-sidebar v-if="!hideNav"
+         :class="{ 'md:ml-sidebar': !hideNav && !isIndex }">
-                 class="sidebar fixed h-full px-5 overflow-hidden transition-width duration-300 z-40" />
-    <div class="main h-[calc(100vh-85px)] transition-margin duration-300 overflow-auto"
-         :class="{ 'md:ml-sidebar': !hideNav }">
       <app-main />
     </div>
   </div>
@@ -17,7 +14,6 @@
 <script lang="ts">
 import { ref, defineComponent, computed, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { appState, closeSidebar } from '@/store/useAppState';
 import Setting from '@/settings';
 import { AppSidebar, AppHeader, AppMain } from './components';
 import useResizeHandler from './composables/useResizeHandler';
@@ -27,25 +23,18 @@ export default defineComponent({
   components: { AppSidebar, AppHeader, AppMain },
   setup() {
     const route = useRoute();
-    const hideNav = ref<boolean>(false);
+    // 是否是选择关卡页面
-    watch(
+    const isIndex = computed(() => {
-      () => route.path,
+      return route.path === '/';
-      (val: any) => {
+    });
-        hideNav.value = Setting.hideNavPath.includes(val);
+    // 是否隐藏左侧导航
-      },
+    const hideNav = computed(() => {
-      {
+      return Setting.hideNavPath.includes(route.path);
-        immediate: true,
+    });
-      },
-    );
 
     useResizeHandler();
     return {
-      closeSidebar,
+      isIndex,
-      showMask: computed(() => appState.sidebar),
-      classObj: computed(() => ({
-        expand: appState.sidebar,
-        collapse: !appState.sidebar,
-      })),
       hideNav,
     };
   },
@@ -53,19 +42,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.expand .sidebar {
-  @apply w-sidebar;
-}
-.expand .main {
-  // @apply ml-0 md:ml-sidebar;
-}
-.collapse .sidebar {
-  @apply w-0 md:w-sidebar-collapse;
-}
-.collapse .main {
-  @apply ml-0 md:ml-sidebar-collapse;
-}
 .body {
   background: url(../assets/images/1.png) 0 0/100% auto no-repeat;
+  @apply bg-gray-100;
 }
 </style>

src/router/index.ts

@@ -19,7 +19,7 @@ export const routes: Array<RouteRecordRaw> = [
     path: '',
     component: Layout,
     meta: { hidden: true },
-    children: [{ path: '', component: () => import('@/views/Home.vue'), meta: { title: 'menu.home' } }],
+    children: [{ path: '', component: () => import('@/views/Home.vue'), meta: { title: '选择关卡' } }],
   },
   {
     path: '/product',

src/styles/index.scss

@@ -1,5 +1,31 @@
 @import './transition.scss';
 
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin mul-ellipsis($num) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $num;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.ellipsis {
+  @include ellipsis();
+}
+
+.mul-ellipsis2 {
+  @include mul-ellipsis(2);
+}
+
+.mul-ellipsis3 {
+  @include mul-ellipsis(3);
+}
+
 html {
   height: 100%;
 }

src/views/Home.vue

@@ -1,29 +1,148 @@
 <template>
-  <div>
+  <div class="m-[-0.75rem]">
-    <div class="block p-3 flex">
+    <div class="flex justify-between items-center h-[64px] px-5 bg-white">
-      <div>
+      <h1>金融产品设计及数字化营销沙盘系统</h1>
-        <el-avatar :size="76"
+      <div class="inline-flex items-center">
-                   class="flex justify-center items-center">
+        <img class="mr-3 cursor-pointer"
-          <el-icon class="text-5xl">
+             src="@/assets/images/level/1.png"
-            <avatar />
+             alt="" />
-          </el-icon>
+        <img class="mr-3 cursor-pointer"
-        </el-avatar>
+             src="@/assets/images/level/2.png"
+             alt="" />
+        <img class="cursor-pointer"
+             src="@/assets/images/level/3.png"
+             alt="" />
       </div>
-      <div class="ml-3 space-y-1 text-gray-regular text-sm">
+    </div>
-        <p class="text-base font-bold">{{ currentUser.username }}</p>
+    <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">
-        <p>
+      <div class="relative">
-          {{ $t('user.loginDate') }}: <span class="ml-1">{{ dayjs(currentUser.loginDate).format('YYYY-MM-DD HH:mm:ss') }}</span>
+        <img src="@/assets/images/level/5.png"
-        </p>
+             alt="" />
-        <p>
+        <div class="absolute top-5 left-40 flex items-center cursor-pointer"
-          {{ $t('user.loginIp') }}: <span class="ml-1">{{ currentUser.loginIp }}</span>
+             @click="collected = !collected">
-        </p>
+          <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 { Avatar } from '@element-plus/icons-vue';
+import { ref, onMounted } from 'vue';
-import dayjs from 'dayjs';
+import { checkPointList } from '@/api/judgment';
-import { currentUser } from '@/store/useCurrentUser';
+
+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>