|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div id="fenlei">
|
|
|
- <el-col class="swfl" :span="24">
|
|
|
+ <!-- <el-col class="swfl" :span="24">
|
|
|
<el-image style="width:22px;height:22px;margin:0 5px -5px 0;" :src="src"></el-image>
|
|
|
<span>个人中心</span>
|
|
|
</el-col>
|
|
@@ -17,6 +17,24 @@
|
|
|
</template>
|
|
|
</el-menu-item>
|
|
|
</el-menu>
|
|
|
+ </el-col> -->
|
|
|
+ <el-col class="menu" :span="24">
|
|
|
+ <el-image :src="squareImage"></el-image>
|
|
|
+ <span>个人中心</span>
|
|
|
+ <el-col>
|
|
|
+ <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
|
|
|
+ <el-menu-item index="1" v-for="(item, index) in liebiaoList" :key="index">
|
|
|
+ <template v-if="item.name.includes('消息')">
|
|
|
+ <span slot="title" @click="clickUrl(item.name)" :style="`color:${haveMsg ? 'red' : ''}`">
|
|
|
+ {{ item.name }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span slot="title" @click="clickUrl(item.name)">{{ item.name }}</span>
|
|
|
+ </template>
|
|
|
+ </el-menu-item>
|
|
|
+ </el-menu>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -30,6 +48,7 @@ export default {
|
|
|
components: {},
|
|
|
data: () => ({
|
|
|
src: require('@/assets/swfl.png'),
|
|
|
+ squareImage: require('@/assets/live/square_big.png'),
|
|
|
haveMsg: false,
|
|
|
}),
|
|
|
created() {},
|
|
@@ -50,24 +69,47 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.swfl {
|
|
|
- height: 60px;
|
|
|
- line-height: 60px;
|
|
|
- background-color: #22529a;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
+// .swfl {
|
|
|
+// height: 60px;
|
|
|
+// line-height: 60px;
|
|
|
+// background-color: #22529a;
|
|
|
+// text-align: center;
|
|
|
+// }
|
|
|
.swfl span {
|
|
|
font-size: 22px;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
/deep/.el-menu-item {
|
|
|
- height: 60px;
|
|
|
- text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ border-bottom: 1px solid #2d64b3;
|
|
|
+ color: #044b79;
|
|
|
+ font-weight: 600;
|
|
|
line-height: 60px;
|
|
|
- border-bottom: 1px dashed;
|
|
|
- font-size: 22px;
|
|
|
}
|
|
|
/deep/.el-menu-item:last-child {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
+.menu {
|
|
|
+ float: left;
|
|
|
+ height: 480px;
|
|
|
+ width: 100%;
|
|
|
+ // background: no-repeat bottom right;
|
|
|
+ // background-image: url(../../assets/live/menu_back.jpg);
|
|
|
+ padding: 10px 0 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ box-shadow: 0 0 10px #bbbaba;
|
|
|
+}
|
|
|
+.menu .el-image {
|
|
|
+ width: 30px;
|
|
|
+ display: inline-table;
|
|
|
+ margin: 10px 5px;
|
|
|
+}
|
|
|
+.menu span:nth-child(2) {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #92959a;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-left: 3px;
|
|
|
+ position: relative;
|
|
|
+ top: 10px;
|
|
|
+}
|
|
|
</style>
|