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/assets/images/menu/ziyuan.png | 0
src/layout/layout.vue | 114 ----------
src/assets/images/menu/mulu.png | 0
src/assets/main.css | 20 +
src/assets/images/header/top-bg.png | 0
src/assets/images/menu/biaoqian.png | 0
src/assets/images/menu/biji.png | 0
src/assets/images/menu/jietu.png | 0
package.json | 1
src/router/index.ts | 30 --
src/assets/images/menu/zhishitupu.png | 0
src/views/home.vue | 381 +++++++++++++------------------------
12 files changed, 170 insertions(+), 376 deletions(-)
diff --git a/package.json b/package.json
index cd802bb..b6129cd 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
"moment": "^2.29.4",
"node-xlsx": "^0.23.0",
"pinia": "^2.1.7",
+ "qiankun": "^2.10.16",
"style-resources-loader": "^1.5.0",
"vite-plugin-electron": "^0.15.5",
"vue": "^3.3.10",
diff --git a/src/assets/images/header/top-bg.png b/src/assets/images/header/top-bg.png
new file mode 100644
index 0000000..e544b0b
--- /dev/null
+++ b/src/assets/images/header/top-bg.png
Binary files differ
diff --git a/src/assets/images/menu/biaoqian.png b/src/assets/images/menu/biaoqian.png
new file mode 100644
index 0000000..c2aa3a4
--- /dev/null
+++ b/src/assets/images/menu/biaoqian.png
Binary files differ
diff --git a/src/assets/images/menu/biji.png b/src/assets/images/menu/biji.png
new file mode 100644
index 0000000..8819e0b
--- /dev/null
+++ b/src/assets/images/menu/biji.png
Binary files differ
diff --git a/src/assets/images/menu/jietu.png b/src/assets/images/menu/jietu.png
new file mode 100644
index 0000000..c180b57
--- /dev/null
+++ b/src/assets/images/menu/jietu.png
Binary files differ
diff --git a/src/assets/images/menu/mulu.png b/src/assets/images/menu/mulu.png
new file mode 100644
index 0000000..1a9b5f2
--- /dev/null
+++ b/src/assets/images/menu/mulu.png
Binary files differ
diff --git a/src/assets/images/menu/zhishitupu.png b/src/assets/images/menu/zhishitupu.png
new file mode 100644
index 0000000..e493532
--- /dev/null
+++ b/src/assets/images/menu/zhishitupu.png
Binary files differ
diff --git a/src/assets/images/menu/ziyuan.png b/src/assets/images/menu/ziyuan.png
new file mode 100644
index 0000000..ac5de92
--- /dev/null
+++ b/src/assets/images/menu/ziyuan.png
Binary files differ
diff --git a/src/assets/main.css b/src/assets/main.css
index 857b72e..74e88b2 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -5,7 +5,23 @@
height: 100%;
}
-
page {
display: block;
-}
\ No newline at end of file
+}
+
+.imgBox {
+ position: relative;
+}
+
+.imgBox img {
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ width: auto;
+ height: auto;
+ max-width: 100%;
+ max-height: 100%;
+ margin: auto;
+}
diff --git a/src/layout/layout.vue b/src/layout/layout.vue
index aff9cda..2185c8c 100644
--- a/src/layout/layout.vue
+++ b/src/layout/layout.vue
@@ -1,115 +1,17 @@
<template>
<div class="layoutBox">
- <div class="menuBox">
- <div :class="['menuItem', activeMenu == index ? 'active' : '']" v-for="(item, index) in menuData" :key="index"
- @click="menuItemClick(index)">
- <div class="menuIcon">
- <el-icon v-if="item.icon == 'FolderOpened'" :size="24">
- <FolderOpened />
- </el-icon>
- <el-icon v-if="item.icon == 'Files'" :size="24">
- <Files />
- </el-icon>
- <el-icon v-if="item.icon == 'Switch'" :size="24">
- <Switch />
- </el-icon>
- <el-icon v-if="item.icon == 'Setting'" :size="24">
- <Setting />
- </el-icon>
- </div>
- <p>{{ item.name }}</p>
- </div>
- </div>
- <div class="pageBox">
- <RouterView />
- </div>
+ <RouterView />
</div>
</template>
<script setup lang="ts">
- import { ref, reactive, watch } from 'vue'
- import { useRouter, RouterView } from 'vue-router'
- const router = useRouter()
-
- // 鑿滃崟
- const menuData = reactive([
- // {
- // name: '鏂囦欢',
- // icon: 'FolderOpened',
- // router: '/home'
- // },
- {
- name: '浼犺緭',
- icon: 'Switch',
- router: '/transmission'
- },
- // {
- // name: '瀵煎嚭',
- // icon: 'Files',
- // router: '/exportTask'
- // },
- {
- name: '璁剧疆',
- icon: 'Setting',
- router: '/setting'
- }
- ])
-
- // 閫変腑鑿滃崟
- 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
- router.push(menuData[index].router)
- }
+import { ref, reactive, watch } from 'vue'
+import { useRouter, RouterView } from 'vue-router'
</script>
<style lang="less">
- .layoutBox {
- width: 100%;
- height: 100%;
- display: flex;
-
- .menuBox {
- width: 80px;
- background-color: #f5f5f6;
- border-right: 1px solid #e6e7e8;
- padding: 10px;
- box-sizing: border-box;
-
- .menuItem {
- padding: 8px 0;
- text-align: center;
- border-radius: 8px;
- line-height: 1;
- cursor: pointer;
- margin-bottom: 10px;
-
- &.active,
- &:hover {
- background-color: #e3e3e5;
- }
-
- .menuIcon {
- margin-bottom: 4px;
- }
- }
- }
-
- .pageBox {
- flex: 1;
- overflow: auto;
- }
- }
-</style>
\ No newline at end of file
+.layoutBox {
+ width: 100%;
+ height: 100%;
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index ca3da48..775ed51 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,8 +1,6 @@
import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/layout/layout.vue'
-const Transmission = () => import('@/views/transmission.vue')
-const ExportTask = () => import('@/views/exportTask.vue')
-const Setting = () => import('@/views/setting.vue')
+const Home = () => import('@/views/home.vue')
const Login = () => import('@/views/login.vue')
const router = createRouter({
@@ -10,7 +8,7 @@
routes: [
{
path: '/',
- redirect: 'transmission'
+ redirect: 'home'
},
{
path: '/login',
@@ -21,29 +19,11 @@
path: '/',
component: Layout,
children: [
- // {
- // path: '/home',
- // name: 'home',
- // meta: { auth: true },
- // component: Home
- // },
{
- path: '/transmission',
- name: 'transmission',
+ path: '/home',
+ name: 'home',
meta: { auth: true },
- component: Transmission
- },
- {
- path: '/exportTask',
- name: 'exportTask',
- meta: { auth: true },
- component: ExportTask
- },
- {
- path: '/setting',
- name: 'setting',
- meta: { auth: true },
- component: Setting
+ component: Home
}
]
}
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