feat:工具栏跳转

ZhangXianQiang

2024-06-20 407b81086e284ddae83c4f124988c7147aa6ee56

feat:工具栏跳转

 src/views/home/components/user-panel/index.vue

@@ -20,7 +20,7 @@
        </div>

        <div class="tool-container grid grid-cols-3 gap-10">
          <div class="tool-item text-center cursor-pointer" v-for="item in toolList">
          <div class="tool-item text-center cursor-pointer" v-for="item in toolList" @click="toolClick(item)">
            <div class="tool-icon mb-1">
              <img :src="item.iconPath" class="width-img" alt="">
            </div>
@@ -38,27 +38,28 @@
<script setup>
import { ref, computed } from 'vue';
import randomColor from '@/utils/randomColor.js';
import { useRouter } from 'vue-router';

const router = useRouter();

const toolList = ref([
  {
    id: 1,
    title: '资源共享',
    iconPath: new URL('@/assets/icons/icon1.png', import.meta.url).href
    title: '在线培训',
    iconPath: new URL('@/assets/icons/icon1.png', import.meta.url).href,
    path: '/train'
  },
  {
    id: 2,
    title: '我的课程',
    iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href
    title: '我的考试',
    iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href,
    path: '/exam-list'
  },
  {
    id: 3,
    title: '我的课程',
    iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href
  },
  {
    id: 4,
    title: '我的课程',
    iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href
    title: '我的成绩',
    iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href,
    path: '/grade-list'
  },
]);

@@ -67,6 +68,12 @@
  return randomColor();
});

const toolClick = (item) => {
  if (item.path) {
    router.push(item.path);
  }
}

</script>

<style lang="scss" scoped>

 src/views/menu/index.vue

@@ -37,12 +37,7 @@
        title: '在线培训',
        iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href,
        path: '/train'
      },
      {
        title: '我的课程',
        iconPath: new URL('@/assets/icons/icon1.png', import.meta.url).href,
        path: '/exam-list'
      },
      }
    ]
  },
  {