You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
1.9 KiB
99 lines
1.9 KiB
<!-- 子菜单列表组件 --> |
|
<script setup lang="ts"> |
|
import { inject, ref } from 'vue' |
|
import type { Task } from './index.d' |
|
|
|
const sectionRefs = inject<Task>('sectionRefs') |
|
const taskContainer = inject('taskContainer') |
|
const activeIndex = ref(0) |
|
const list = [ |
|
{ |
|
title: '基础任务', |
|
status: true, |
|
task: 'task1', |
|
}, |
|
{ |
|
title: '新手任务', |
|
status: false, |
|
task: 'task2', |
|
}, |
|
{ |
|
title: '每日任务', |
|
status: false, |
|
task: 'task3', |
|
}, |
|
{ |
|
title: '其他任务', |
|
status: false, |
|
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>
|
|
|