From fefe4a3011fb472788abb2e7ffdbbc5a4f58623c Mon Sep 17 00:00:00 2001
From: charles <981744753@qq.com>
Date: 星期三, 05 六月 2024 14:10:16 +0800
Subject: [PATCH] feat:更新ui界面
---
src/views/home/components/leftNav.vue | 80 +++++++++++++++++++++++++++++++++++-----
1 files changed, 70 insertions(+), 10 deletions(-)
diff --git a/src/views/home/components/leftNav.vue b/src/views/home/components/leftNav.vue
index 3c17578..1605c9f 100644
--- a/src/views/home/components/leftNav.vue
+++ b/src/views/home/components/leftNav.vue
@@ -1,17 +1,44 @@
<template>
<div class="left-nav">
- <h1>
+ <div class="left-nav-title">
+ <img src="@/assets/logo2.svg" />
+ <div>璇煶鏅鸿兘鍒嗘瀽搴旂敤</div>
+ </div>
+ <div style="margin: 20px 0"></div>
+ <div class="left-nav-body">
<img
- class="icon"
- :src="`${publicPath}images/audio/railroad.png`"
- style="height: 30px"
+ class="icon"
+ :src="`${publicPath}images/audio/u606.png`"
+ />
+ <div v-show="!isCollapse" :class="{item:true,'is-active':$route.path==='/home/uploadAudio','span-sty':true}" @click="$router.push('/home/uploadAudio',()=>{})">闊抽涓婁紶</div>
+ </div>
+ <div class="left-nav-body">
+ <img
+ class="icon"
+ :src="`${publicPath}images/audio/u819.png`"
+ />
+ <span v-show="!isCollapse" :class="{item:true,'is-active':$route.path==='/home/audioAnalysis','span-sty':true}" @click="$router.push('/home/audioAnalysis',()=>{})">闊抽鍒嗘瀽妫�绱�</span>
+ </div>
+ <div class="left-nav-body">
+ <img
+ class="icon"
+ :src="`${publicPath}images/audio/u=1143771061,298321605&fm=253&fmt=auto&app=138&f=JPEG.webp`"
+ />
+ <span v-show="!isCollapse" :class="{item:true,'is-active':$route.path==='/home/textManager','span-sty':true}" @click="$router.push('/home/textManager',()=>{})">鏂囧瓧搴撶鐞�</span>
+ </div>
+<!-- <h1>
+ <img
+ class="icon"
+ :src="`${publicPath}images/audio/railroad.png`"
+ style="height: 30px"
/>
<span v-show="!isCollapse" style="display:inline-block;width:180px;padding-left: 6px">璇煶鏅鸿兘鍒嗘瀽搴旂敤</span>
- </h1>
- <div class="menu-btn" v-show="!isCollapse">
+ </h1>-->
+<!-- <div class="menu-btn" v-show="!isCollapse">
+ <div :class="{item:true,'is-active':$route.path==='/home/uploadAudio'}" @click="$router.push('/home/uploadAudio',()=>{})">闊抽涓婁紶</div>
<div :class="{item:true,'is-active':$route.path==='/home/audioAnalysis'}" @click="$router.push('/home/audioAnalysis',()=>{})">闊抽鍒嗘瀽妫�绱�</div>
<div :class="{item:true,'is-active':$route.path==='/home/textManager'}" @click="$router.push('/home/textManager',()=>{})">鏂囧瓧搴撶鐞�</div>
- </div>
+ </div>-->
</div>
</template>
@@ -26,8 +53,8 @@
computed: {
isAdmin() {
if (
- sessionStorage.getItem("userInfo") &&
- sessionStorage.getItem("userInfo") !== ""
+ sessionStorage.getItem("userInfo") &&
+ sessionStorage.getItem("userInfo") !== ""
) {
let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
return loginName === "admin" || loginName === "basic";
@@ -58,9 +85,42 @@
</script>
<style scoped lang="scss">
+.left-nav-title{
+ text-align: center;
+ font-weight: bold;
+ font-size: 16px;
+ color: white;
+ padding-top: 80px;
+}
+.left-nav-body{
+ display: flex;
+ align-items: center;
+ height: 50px;
+ //padding: 0 20px;
+ font-size: 12px;
+ padding-left: 60px;
+ //border-bottom: 1px solid #eee;
+ color:white;
+ //border: 1px solid burlywood;
+}
+.left-nav-body:hover{
+ background-color: rgba(255, 255, 255, 0.2);}
+.icon{
+ background-color: white;
+ width:20px;
+ height:20px;
+}
+.span-sty{
+ display:inline-block;
+ width:180px;
+ padding-left: 10px;
+ cursor: pointer;
+}
+/**/
.left-nav {
- background: #fff;
+ background: #03347a;
height: 100vh;
+ //width: 280px;
h1 {
display: flex;
align-items: center;
--
Gitblit v1.8.0