insomnia-cognition-h5/src/views/cognitiveTasks/main/index.vue

<template>
  <section class="app-container">
    <van-nav-bar title="认知任务" />
    <div class="w-[630px] min-h-[180px] bg-white rounded-[16px] mt-[18px] ml-[4%] p-x-[30px] p-y-[28px]">
      <div class="flex-row border">
        <resolverImage :src="`images/task/${subjectInfo.id}.png`" />
        <div class="ml-[24px] text-[42px] font-600">{{ subjectInfo.name }}</div>
      </div>
      <div class="mt-[40px] mb-[20px] text-[#00AABD] text-[36px]">操作提示：</div>
      <div class="text-[#999999] text-[32px] line-height-[44px]">
        空间定向是测试者在所处环境中根据参照点或者绝对坐标系统定位正确辨识方向的知觉反应，要求主体编码并记住环境中不同地点的相对位置，然后利用自身的认知结构和空间表征对自己所在的空间的感知觉线索进行迅速而准确的分析和加工，从而对自己姿态、位置和运动做出判断。
      </div>
    </div>
    <van-button type="primary" color="#00AABD" class="bottom-block-btn" @click="startTest">开始测试</van-button>
  </section>
</template>

<script setup lang="ts">
/*
 * 组件名: index
 * 组件用途: XXX
 * 创建日期: 2024/8/16
 * 编写者: JutarryWu
 */
import { router } from '/@/router'

const subjectInfo = ref({
  name: '空间定向训练',
  id: 1
})
const urlList = ['/cognitiveTasks/spatialOrientationAbility']

const startTest = () => {
  router.push(urlList[subjectInfo.value.id - 1])
}

async function exec() {}

onMounted(() => {
  exec()
})
</script>

<style scoped lang="less">
.app-container {
  background-image: url('./../../../assets/images/bg-main.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; /* 可选，让图片居中对齐 */

  :deep(.van-nav-bar) {
    background-color: transparent;
  }

  .van-image {
    width: 240px;
    height: 240px;
  }
}
</style>