feat:菜单页

ZhangXianQiang

2024-06-04 57db252eee7aea6bcfd5fadfc0acf6e2be8a687d

feat:菜单页

 src/views/home/index.vue

@@ -1,7 +1,7 @@
<template>
  <div class="home-page container mx-auto flex justify-between py-6">
    <UserPanel class="flex-shrink-0 mr-5 sticky top-6"></UserPanel>
    <InfoPanel class="flex-shrink-0 grow"></InfoPanel>
    <InfoPanel class="grow"></InfoPanel>
  </div>
</template>


 src/views/menu/index.vue

@@ -1,13 +1,84 @@
<template>
  <div>
123
  <div class="menu-container container mx-auto py-5">
    <div class="categroy-item mb-5" v-for="menu in menuList">
      <el-row class="mb-2">
        <div class="menu-title text-lg font-bold">{{ menu.name }}</div>
      </el-row>
      <el-row :gutter="20" class="mb-2">
        <el-col :span="3" v-for="item in menu.categroy">
          <div class="menu-item cursor-pointer">
            <el-card shadow="hover" class="menu-card">
              <div class="item-icon mx-auto">
                <img :src="item.iconPath" class="icon-img" alt="">
              </div>
              <div class="item-title text-center">
                {{ item.title }}
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue';

const menuList = ref([
  {
    name: '课程',
    categroy: [
      {
        title: '我的课程',
        iconPath: new URL('@/assets/icons/icon1.png', import.meta.url).href
      },
      {
        title: '我的考试',
        iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href
      },
    ]
  },
  {
    name: '考试',
    categroy: [
      {
        title: '我的课程',
        iconPath: new URL('@/assets/icons/icon1.png', import.meta.url).href
      },
      {
        title: '我的考试',
        iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href
      },
    ]
  },
]);
</script>

<style lang="scss" scoped>
@media (min-width: 1836px) {
  .container {
    max-width: 1724px;
  }
}

.menu-card {
  border-radius: 10px;

  &:hover {
    border: 1px solid #1890ff;
  }
}

.item-icon {
  width: 90px;
  height: 90px;
}

.icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>