qn-ai-pc/src/components/AppTaskMenuList/index.vue

<!-- 子菜单列表组件 -->
<script setup lang="ts">
import { computed, inject, ref } from 'vue'
import type { Task } from './index.d'
import { useTaskListStore } from '@/store/moules/taskListStore'

const taskListStore = useTaskListStore()
const sectionRefs = inject<Task>('sectionRefs')
const taskContainer = inject('taskContainer')
const activeIndex = ref(0)

const list = computed(() => [
  {
    title: '基础任务',
    status: taskListStore.basicTask,
    task: 'task1',
  },
  {
    title: '新手任务',
    status: taskListStore.noviceTask,
    task: 'task2',
  },
  {
    title: '每日任务',
    status: taskListStore.dailyTask,
    task: 'task3',
  },
  {
    title: '其他任务',
    status: taskListStore.otherTask,
    task: 'task4',
  },
])
// 切换任务
function handleClick(index: number, task: string) {
  activeIndex.value = index

  const target = sectionRefs[task].value.$el.offsetTop - 40

  taskContainer.value.scrollTo({
    top: target,
    behavior: 'smooth',
  })
}
</script>

<template>
  <div class="app-task-menu-list">
    <div
      v-for="(item, index) in list"
      :key="index"
      class="app-task-menu-list-item"
      :class="[activeIndex === index && 'app-task-menu-list-item-active']"
      @click="handleClick(index, item.task)"
    >
      <p class="title">
        {{ item.title }}
      </p>
      <div v-show="item.status" class="dot"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@include app('task-menu-list') {
  &-item {
    width: 80%;
    margin: 5px auto;
    padding: 6px;
    border-radius: 10px;
    transition: all 0.2s;
    text-align: center;
    cursor: pointer;
    color: #888c90;
    position: relative;
    .title {
      font-size: 13px;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      line-height: 20px;
      margin: 0;
    }
    .dot {
      width: 6px;
      height: 6px;
      background-color: red;
      border-radius: 50%;
      position: absolute;
      right: 40px;
      top: 10px;
    }
  }
  &-item-active {
    background: #e1e9f9;
    color: #4670e3;
  }
  &-item:hover {
    background: #e1e9f9;
    color: #4670e3;
  }
}
</style>