change sidebar ui and icon
This commit is contained in:
27
src/App.vue
27
src/App.vue
@@ -5,6 +5,7 @@ import { invoke } from "@tauri-apps/api/core";
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { Document, VideoPlay, CircleCheck, Moon, Sunny, Delete, UploadFilled, Refresh } from '@element-plus/icons-vue';
|
||||
import { listen, UnlistenFn } from '@tauri-apps/api/event';
|
||||
import appIcon from './assets/app-icon-96.png';
|
||||
|
||||
// Navigation
|
||||
const activeMenu = ref("preparation");
|
||||
@@ -469,6 +470,9 @@ watch(currentDir, (newPath) => {
|
||||
<template>
|
||||
<el-container class="layout-container" style="height: 100vh">
|
||||
<el-aside width="200px" class="main-aside">
|
||||
<div class="aside-header">
|
||||
<img :src="appIcon" alt="App Icon" class="app-icon" />
|
||||
</div>
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
class="el-menu-vertical-demo"
|
||||
@@ -503,7 +507,6 @@ watch(currentDir, (newPath) => {
|
||||
<el-main>
|
||||
<!-- Preparation Page -->
|
||||
<div v-if="activeMenu === 'preparation'">
|
||||
<h2>准备工作</h2>
|
||||
|
||||
<el-card class="box-card" shadow="hover">
|
||||
<template #header>
|
||||
@@ -573,7 +576,6 @@ watch(currentDir, (newPath) => {
|
||||
|
||||
<!-- Review Page -->
|
||||
<div v-else-if="activeMenu === 'review'">
|
||||
<h2>审核</h2>
|
||||
|
||||
<el-alert
|
||||
v-if="isReviewDisabled"
|
||||
@@ -627,7 +629,6 @@ watch(currentDir, (newPath) => {
|
||||
|
||||
<!-- Check Page -->
|
||||
<div v-else-if="activeMenu === 'check'" style="display: flex; flex-direction: column; height: 100%; overflow: hidden;">
|
||||
<h2>检查</h2>
|
||||
|
||||
<el-alert
|
||||
v-if="isReviewDisabled"
|
||||
@@ -680,6 +681,26 @@ body {
|
||||
flex-direction: column;
|
||||
transition: background-color 0.3s, border-color 0.3s;
|
||||
}
|
||||
.aside-header {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.app-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
.el-menu-vertical-demo .el-menu-item {
|
||||
font-size: 20px; /* Increase text size */
|
||||
height: 80px; /* Adjust height to accommodate larger font/icons and maintain spacing */
|
||||
line-height: 50px;
|
||||
}
|
||||
.el-menu-vertical-demo .el-menu-item .el-icon {
|
||||
font-size: 20px; /* Increase icon size */
|
||||
margin-right: 12px;
|
||||
}
|
||||
.aside-footer {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user