From 57db252eee7aea6bcfd5fadfc0acf6e2be8a687d Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期二, 04 六月 2024 14:01:52 +0800
Subject: [PATCH] feat:菜单页
---
src/views/menu/index.vue | 75 ++++++++++++++++++++++++++++++++++++-
1 files changed, 73 insertions(+), 2 deletions(-)
diff --git a/src/views/menu/index.vue b/src/views/menu/index.vue
index aaf3acb..c9a2c10 100644
--- a/src/views/menu/index.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.8.0