青鸟ai,pc版仓库
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

<!-- 子菜单列表组件 -->
<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>