From 208ca50585c7b5c4fdd8716a26c9c16b438d3c19 Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期三, 05 六月 2024 20:21:56 +0800
Subject: [PATCH] 1
---
src/views/menu/leftMenu.vue | 85 ++++++++++++++++++++++++++++++++++++++++++
1 files changed, 85 insertions(+), 0 deletions(-)
diff --git a/src/views/menu/leftMenu.vue b/src/views/menu/leftMenu.vue
new file mode 100644
index 0000000..c1bf890
--- /dev/null
+++ b/src/views/menu/leftMenu.vue
@@ -0,0 +1,85 @@
+<template>
+ <div class="menuBox">
+ <div class="menu">
+ <div
+ class="menuItem"
+ @click="setMenuClick(item)"
+ v-for="(item, index) in menuOption"
+ :key="index"
+ >
+ <div
+ class="meuContent"
+ :class="menuFlag == item.id ? 'meuContent_active' : ''"
+ >
+ <img
+ class="itemImg"
+ :src="require(`../../assets/img/leftMenu/${item.image}`)"
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import configData from "../../assets/js/data/configData.js";
+
+export default {
+ data() {
+ return {
+ menuOption: [],
+ menuFlag: null
+ };
+ },
+ methods: {
+ setMenuClick(res) {
+ this.menuFlag = res.id;
+ },
+ setMenuStart() {
+ this.menuOption = configData.leftMenu;
+ this.menuFlag = this.menuOption[0].id;
+ }
+ },
+ mounted() {
+ this.setMenuStart();
+ }
+};
+</script>
+
+<style scoped>
+.menuBox {
+ width: 100%;
+ height: calc(100% - 39px);
+ padding-top: 39px;
+ background: black;
+}
+.menuBox .menu {
+ color: white;
+}
+.menuItem {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ margin-top: 29px;
+}
+.meuContent {
+ padding: 5px;
+ box-sizing: border-box;
+}
+.meuContent:hover {
+ border-radius: 10px;
+ border: 1px solid #797979;
+ background-color: #797979;
+ box-sizing: border-box;
+}
+.meuContent_active {
+ border-radius: 10px;
+ border: 1px solid #797979;
+ background-color: #797979;
+ box-sizing: border-box;
+}
+.itemImg {
+ width: 16px;
+ height: 16px;
+}
+</style>
--
Gitblit v1.9.3