feat:更新ui界面

charles

2024-06-05 fefe4a3011fb472788abb2e7ffdbbc5a4f58623c

 src/views/home/components/leftNav.vue

@@ -1,18 +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>

@@ -27,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";
@@ -59,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;