BigScreenUI/src/views/Index.vue

<template>
    <div>
        <div
            class="pathItem"
            v-for="(item, index) in routeList.list"
            :key="index"
            @click="toPage(item)"
        >
            {{ item.name }}
        </div>
    </div>
</template>

<script setup lang="ts">
const router = useRouter()
const routeList = reactive({
    list: [
        {
            name: 'vant-scss演示',
            path: 'vantTest'
        },
        {
            name: '时间测试',
            path: 'timeTest'
        },
        {
            name: '全局事件 mitt 演示',
            path: 'mittTest'
        },
        {
            name: 'pinia演示',
            path: 'piniaTest'
        },
        {
            name: '路由演示',
            path: 'piniaTest'
        }
    ]
})

/* eslint-disable  @typescript-eslint/no-explicit-any */
const toPage = (item: any) => {
    router.push({ name: item.path })
}
</script>

<style scoped lang="scss">
// @mixin fontStyle($size,$color,$weight,$lineH,$align) {
// @mixin flexStyle($js,$al,$dir,$wrap){
.pathItem {
    @include fontStyle(48px, green, bold, 80px, center);
    @include wh(750px, 80px);

    margin-bottom: 12px;
}




</style>