路由循环 自定义样式 和跳转 vue3

<template>
  <div>
    <div class="row">
      <div class="ymdiv" v-for="(item, index) in menuList1" :key="index">
        <div class="fName" v-if="hasChild(item)">{{ item.name }}</div>
        <div class="fName" @click="gnClick(item, index)" v-else>{{ item.name }}</div>
        <div class="rowChild">
          <div class="ChildDiv" v-for="(item1, index1) in item.children" :key="index1">
            <div class="cName" v-if="hasChild(item1)">
              <div class="dd">{{ item1.name }}</div>
              <div class="bb">
                <div v-for="(item2, index2) in item1.children" :key="index2" @click="gnClick(item2, index2)">{{
                    item2.name
                }}</div>
              </div>
            </div>
            <div class="cName aa" @click="gnClick(item1, index1)" v-else>{{ item1.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { initMenu } from "@/utils/menu-api.js";
const router = useRouter();
const menuList1 =  ref([]);
initMenu().then(res=>{
  menuList1.value = res;
})
//菜单数据
function hasChild(item) {
  return item && item.children && item.children.length > 0;
}
function gnClick(item) {
  console.log(item)
  router.push({
    path: item.path
  });
}
</script>

<style scoped>
.row {
  display: flex;
  margin-bottom: 5px;
  margin-left: 35px;
  flex-wrap: wrap;
}

.aa {
  line-height: 150px;
}

.rowChild {
  display: flex;
  margin-bottom: 5px;
  flex-wrap: wrap;
  margin-left: 70px;
}

.bb {
  display: flex;
  justify-content: space-around;
  margin-top: 40px;
}

.ChildDiv {
  width: 150px;
  height: 150px;
  /* line-height: 150px; */
  margin: 10px;
  text-align: center;
  cursor: pointer;
  border-radius: 10px;
  /* border: 1px solid #ccc; */
  box-shadow: -2px 2px 2px 2px #d2d4d4;
}

.ymdiv {
  overflow-y: scroll;
  overflow-x: hidden;
  width: 500px;
  height: 500px;
  margin: 10px;
  text-align: center;
  border-radius: 10px;
  box-shadow: -2px 2px 5px 2px #c5c5c5;
}

/* 整个滚动条 */
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
  border-radius: 50%;
}

/* 滚动条有滑块的轨道部分 */
::-webkit-scrollbar-track-piece {
  background-color: transparent;
  border-radius: 10px;
}

/* 滚动条滑块(竖向:vertical 横向:horizontal) */
::-webkit-scrollbar-thumb {
  cursor: pointer;
  background-color: #b8b9b9;
  border-radius: 10px;
}

/* 滚动条滑块hover */
::-webkit-scrollbar-thumb:hover {
  background-color: #999999;
}

/* 同时有垂直和水平滚动条时交汇的部分 */
::-webkit-scrollbar-corner {
  display: block;
  /* 修复交汇时出现的白块 */
}

.fName {
  font-size: 20px;
  width: 500px;
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  text-align: center;
  background-color: rgb(107, 170, 230);
}

.cName {
  font-size: 16px;
  text-align: center;
}
</style>

效果图