代码如下:
<template>
<div class="aside">
<div class="asideContent">
<span class="courseWare" v-for="(item,index) in menu" :key="index">
<svg-icon :icon-class='item.icon'></svg-icon>
<i>{{item.label}}</i>
</span>
</div>
</div>
</template>
<script>
export default {
data () {
return {
menu: [{
path: '/courseWare',
name: 'courseWare',
label: '课件',
icon: 'courseWare',
url: '/courseWare'
}, {
path: '/course',
name: 'course',
label: '推广',
icon: 'course',
url: '/course'
}, {
path: '/student',
name: 'student',
label: '招生',
icon: 'student',
url: '/student'
}, {
path: '/teach',
name: 'teach',
label: '教学',
icon: 'teach',
url: '/teach'
}, {
path: '/money',
name: 'money',
label: '收益',
icon: 'money',
url: '/money'
}, {
path: '/analysis',
name: 'analysis',
label: '分析',
icon: 'analysis',
url: '/analysis'
}],
}
}
}
</script>
<style scoped lang='scss'>
.aside {
display: flex;
justify-content: space-between;
flex-direction: column;
.asideContent {
padding: 20px 18px 20px 19px;
box-sizing: border-box;
width: 67px;
opacity: 1;
box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.1);
span {
margin-top: 25px;
display: inline-block;
i {
display: inline-block;
margin-top: 9px;
font-style: normal;
font-size: 15px;
font-weight: 400;
letter-spacing: 0px;
line-height: 22px;
color: rgba(138, 154, 181, 1);
text-align: left;
vertical-align: top;
}
}
}
.logo {
padding: 24px 4px;
}
}
</style>