From 1ed69aab3d1c57f5096f57c8d77b396b0c5babe4 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期三, 17 四月 2024 09:13:43 +0800
Subject: [PATCH] menu调整
---
src/views/home.vue | 381 +++++++++++++++++++----------------------------------
1 files changed, 138 insertions(+), 243 deletions(-)
diff --git a/src/views/home.vue b/src/views/home.vue
index 4d72ddf..321ae97 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -1,281 +1,176 @@
<template>
<div class="homeBox">
- <div class="herderBox">
- <p>鏂囦欢</p>
- <div class="viewChangeBox">
- <el-icon :size="16" v-if="viewMode == 0" @click="setViewMode"><Calendar /></el-icon>
- <el-icon :size="16" v-if="viewMode == 1" @click="setViewMode"><Menu /></el-icon>
- </div>
- <div class="search">
- <el-input v-model="searchKey" size="small" placeholder="鍏抽敭瀛楁悳绱�">
- <template #append>
- <el-button :icon="Search" />
- </template>
- </el-input>
- </div>
+ <div class="headerBox">
+ <p>鏁板瓧鏁欐潗骞冲彴</p>
</div>
- <div class="toolBox">
- <div class="checkBox" v-if="viewMode == 0">
- <el-checkbox
- v-model="checkBoxState.check"
- :indeterminate="checkBoxState.indeterminate"
- @change="handleCheckAllChange"
- />
- <span class="checkText">{{
- checkBoxState.selectCount > 0
- ? `宸查�� ${checkBoxState.selectCount} 椤筦
- : `鍏� ${checkBoxState.totalCount} 椤筦
- }}</span>
- </div>
- <div class="sortBox" v-if="viewMode == 0">
- <el-dropdown trigger="click" @command="sortChange">
- <span class="sortText">
- <el-icon :size="16"><Sort /></el-icon>
- <span>
- 鎸墈{ sortState.fields[sortState.selectFieldIndex].name
- }}{{ sortState.types[sortState.selectTypeIndex].name }}鎺掑簭
- </span>
- </span>
- <template #dropdown>
- <el-dropdown-menu>
- <el-dropdown-item
- v-for="(item, index) in sortState.fields"
- :key="item.value"
- :command="'fields.' + item.value"
- >
- <p>
- <span>
- <el-icon v-if="sortState.selectFieldIndex == index" :size="16" color="#409EFF">
- <Check />
- </el-icon>
- </span>
- <span>{{ item.name }}</span>
- </p>
- </el-dropdown-item>
- <el-dropdown-item
- v-for="(item, index) in sortState.types"
- :key="item.value"
- :divided="index == 0"
- :command="'types.' + item.value"
- >
- <p>
- <span>
- <el-icon v-if="sortState.selectTypeIndex == index" :size="16" color="#409EFF">
- <Check />
- </el-icon>
- </span>
- <span>{{ item.name }}</span>
- </p>
- </el-dropdown-item>
- </el-dropdown-menu>
- </template>
- </el-dropdown>
- </div>
- </div>
- <div class="fileList">
- <div v-if="viewMode == 0" class="blockBox">
- <div class="fileItem" v-for="item in tableData">
- <div class="iconBox">
- <img :src="item.img" alt="" />
+ <div class="contentBox">
+ <div class="menuBox">
+ <div
+ :class="['menuItem', activeMenu == index ? 'active' : '']"
+ v-for="(item, index) in menuData"
+ :key="index"
+ @click="menuItemClick(index)"
+ >
+ <div class="menuIcon imgBox">
+ <img :src="item.icon" />
</div>
- <p class="name">{{ item.name }}</p>
- <p class="time">{{ item.createDate }}</p>
+ <p>{{ item.name }}</p>
</div>
</div>
- <el-table v-if="viewMode == 1" :data="tableData" style="width: 100%">
- <el-table-column type="selection" width="55" />
- <el-table-column type="index" width="80" />
- <el-table-column prop="name" label="鍚嶇О" sortable />
- <el-table-column prop="createDate" label="鍒涘缓鏃堕棿" width="200" sortable />
- <el-table-column prop="size" label="澶у皬" width="200" sortable />
- </el-table>
+ <div class="pageBox"></div>
+ <div class="toolBox">
+ <el-menu default-active="2" :collapse="isCollapse" @open="handleOpen" @close="handleClose">
+ <el-sub-menu index="1">
+ <template #title>
+ <el-icon><location /></el-icon>
+ <span>Navigator One</span>
+ </template>
+ <el-menu-item-group>
+ <template #title><span>Group One</span></template>
+ <el-menu-item index="1-1">item one</el-menu-item>
+ <el-menu-item index="1-2">item two</el-menu-item>
+ </el-menu-item-group>
+ <el-menu-item-group title="Group Two">
+ <el-menu-item index="1-3">item three</el-menu-item>
+ </el-menu-item-group>
+ <el-sub-menu index="1-4">
+ <template #title><span>item four</span></template>
+ <el-menu-item index="1-4-1">item one</el-menu-item>
+ </el-sub-menu>
+ </el-sub-menu>
+ <el-menu-item index="2">
+ <el-icon><icon-menu /></el-icon>
+ <template #title>Navigator Two</template>
+ </el-menu-item>
+ <el-menu-item index="3" disabled>
+ <el-icon><document /></el-icon>
+ <template #title>Navigator Three</template>
+ </el-menu-item>
+ <el-menu-item index="4">
+ <el-icon><setting /></el-icon>
+ <template #title>Navigator Four</template>
+ </el-menu-item>
+ </el-menu>
+ </div>
</div>
</div>
</template>
<script setup lang="ts">
-import { ref, reactive } from 'vue'
-import { Search, Check } from '@element-plus/icons-vue'
-import { useRouter, RouterView } from 'vue-router'
-const router = useRouter()
+import { ref, reactive, watch } from 'vue'
+import mulu from '@/assets/images/menu/mulu.png'
+import biji from '@/assets/images/menu/biji.png'
+import ziyuan from '@/assets/images/menu/ziyuan.png'
+import zhishitupu from '@/assets/images/menu/zhishitupu.png'
+import jietu from '@/assets/images/menu/jietu.png'
+import biaoqian from '@/assets/images/menu/biaoqian.png'
+import topbg from '@/assets/images/header/top-bg.png'
-// 鎼滅储
-const searchKey = ref('')
-
-// 閫夋嫨妗�
-const checkBoxState = reactive({
- selectCount: 0,
- totalCount: 0,
- check: false,
- indeterminate: false
-})
-
-const handleCheckAllChange = (val) => {
- if (val) {
- checkBoxState.check = true
- } else {
- checkBoxState.check = false
+// 鑿滃崟
+const menuData = reactive([
+ {
+ name: '鐩綍',
+ icon: mulu
+ },
+ {
+ name: '绗旇',
+ icon: biji
+ },
+ {
+ name: '璧勬簮',
+ icon: ziyuan
+ },
+ {
+ name: '鐭ヨ瘑鍥捐氨',
+ icon: zhishitupu
+ },
+ {
+ name: '鎴浘',
+ icon: jietu
+ },
+ {
+ name: '鏍囩',
+ icon: biaoqian
}
- checkBoxState.indeterminate = false
+])
+
+// 閫変腑鑿滃崟
+const activeMenu = ref(0)
+
+// // 鐩戝惉璺敱鍙樺寲锛岄粯璁ら�変腑鑿滃崟
+// watch(
+// () => router.currentRoute.value,
+// (newRoute) => {
+// console.log(newRoute.path)
+
+// const index = menuData.findIndex((item) => item.router == newRoute.path)
+// activeMenu.value = index > -1 ? index : 0
+// }
+// )
+
+// 鑿滃崟鐐瑰嚮
+const menuItemClick = (index) => {
+ activeMenu.value = index
}
-// 鎺掑簭
-const sortState = reactive({
- fields: [
- {
- name: '鍚嶇О',
- value: 'Name'
- },
- {
- name: '鍒涘缓鏃堕棿',
- value: 'CreateDate'
- },
- {
- name: '鏂囦欢澶у皬',
- value: 'Size'
- }
- ],
- types: [
- {
- name: '鍗囧簭',
- value: 'Asc'
- },
- {
- name: '闄嶅簭',
- value: 'Desc'
- }
- ],
- selectFieldIndex: 1,
- selectTypeIndex: 1
-})
-
-const sortChange = (command) => {
- const type = command.split('.')[0]
- const data = command.split('.')[1]
- if (type == 'fields') {
- sortState.selectFieldIndex = sortState.fields.findIndex((item) => item.value == data)
- } else {
- sortState.selectTypeIndex = sortState.types.findIndex((item) => item.value == data)
- }
-}
-
-// 瑙嗗浘妯″紡 0:鍧楃姸瑙嗗浘 1:琛ㄦ牸瑙嗗浘
-const viewMode = ref(0)
-const setViewMode = () => {
- if (viewMode.value == 0) {
- viewMode.value = 1
- } else {
- viewMode.value = 0
- }
-}
-
-// 鏂囦欢鍒楄〃
-const tableData = ref([])
+// 鍙充晶宸ュ叿
+const isCollapse = ref(false)
</script>
<style lang="less">
.homeBox {
width: 100%;
height: 100%;
- padding: 50px;
- box-sizing: border-box;
display: flex;
flex-direction: column;
- .herderBox {
- overflow: hidden;
- margin-bottom: 20px;
+ .headerBox {
+ height: 48px;
+ background-image: url('@/assets/images/header/top-bg.png');
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ padding: 0 20px;
+ line-height: 48px;
p {
- float: left;
- font-size: 20px;
+ font-size: 24px;
+ color: #ffffff;
+ letter-spacing: 2px;
font-weight: bold;
- line-height: 32px;
- }
- .search {
- float: right;
- margin-right: 20px;
- }
- .viewChangeBox {
- float: right;
- line-height: 32px;
- i {
- cursor: pointer;
- vertical-align: sub;
- }
}
}
- .toolBox {
+ .contentBox {
overflow: hidden;
- margin-bottom: 10px;
- line-height: 32px;
- .checkBox {
- float: left;
- .checkText {
- display: inline-block;
- line-height: 32px;
- vertical-align: top;
- margin-left: 8px;
- }
- }
- .sortBox {
- float: right;
- .sortText {
- width: 150px;
- line-height: 32px;
- cursor: pointer;
- i,
- span {
- vertical-align: middle;
- }
- }
- }
- }
- .fileList {
flex: 1;
- overflow: auto;
- .blockBox {
- overflow: hidden;
- .fileItem {
- width: 140px;
- float: left;
- margin: 20px;
- padding: 15px;
- border-radius: 10px;
- cursor: context-menu;
+ display: flex;
+ .menuBox {
+ width: 80px;
+ border-right: 1px solid #e6e7e8;
+ padding-bottom: 20px;
+ box-sizing: border-box;
+ .menuItem {
+ text-align: center;
+ line-height: 1;
+ cursor: pointer;
+ padding: 10px 0;
+ &.active,
&:hover {
- background-color: #f1f1f1;
- }
- .iconBox {
- width: 100%;
- height: 140px;
- margin-bottom: 10px;
- position: relative;
- img {
- width: auto;
- height: auto;
- max-width: 100%;
- max-height: 100%;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- margin: auto;
- border-radius: 6px;
+ background-color: #cfebff;
+ p {
+ color: #0093ff;
}
}
- .name {
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
- margin-bottom: 8px;
- }
- .time {
- font-size: 12px;
- color: #999;
+ .menuIcon {
+ display: inline-block;
+ width: 32px;
+ height: 32px;
+ margin-bottom: 4px;
}
}
}
+
+ .pageBox {
+ flex: 1;
+ overflow: auto;
+ }
}
}
</style>
--
Gitblit v1.9.1