<template>
|
<div class="left-nav">
|
<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/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">
|
<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>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
isCollapse: {
|
type: Boolean,
|
default: true,
|
}
|
},
|
computed: {
|
isAdmin() {
|
if (
|
sessionStorage.getItem("userInfo") &&
|
sessionStorage.getItem("userInfo") !== ""
|
) {
|
let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
|
return loginName === "admin" || loginName === "basic";
|
}
|
return false;
|
},
|
},
|
data() {
|
return {
|
publicPath: process.env.BASE_URL,
|
activeIndex: "guideIndex",
|
};
|
},
|
mounted() {
|
this.activeIndex = this.isAdmin ? "guideIndex" : "searchForVideoAnalyze";
|
this.$emit("menuChange", this.activeIndex);
|
},
|
methods: {
|
handleSelect(index, indePath) {
|
this.activeIndex = index;
|
sessionStorage.setItem("leftNavAct", this.activeIndex);
|
this.$emit("menuChange", index);
|
},
|
handleOpen() {},
|
handleClose() {},
|
},
|
};
|
</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: #03347a;
|
height: 100vh;
|
//width: 280px;
|
h1 {
|
display: flex;
|
align-items: center;
|
height: 65px;
|
padding: 0 20px;
|
font-size: 20px;
|
border-bottom: 1px solid #eee;
|
color: rgb(0, 150, 250);
|
}
|
.iconfont {
|
padding-right: 10px;
|
}
|
.menu-btn{
|
.item{
|
width: 90%;
|
margin: 0px auto;
|
text-align: center;
|
line-height: 40px;
|
background-color: rgba(241, 241, 241, 1);
|
border-radius: 20px;
|
margin-top: 30px;
|
font-family: 'PingFangSC-Regular', 'PingFang SC';
|
font-weight: 400;
|
font-style: normal;
|
font-size: 16px;
|
color: rgba(0, 0, 0, 0.647058823529412);
|
&:hover{
|
cursor: pointer;
|
}
|
}
|
.is-active{
|
background-color: deepskyblue;
|
color: white;
|
}
|
}
|
}
|
</style>
|
