huoran
/
FE_huoran_data
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

数据分类样式

Browse Source
dev
Jo 3 years ago
parent 93b8dbfc06
commit d2310945e4
2 changed files with 27 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 40
      src/pages/data/list/index.vue
  2. 4
      src/pages/stat/list/index.vue

40
src/pages/data/list/index.vue
Unescape View File

@ -8,7 +8,7 @@
<el-submenu :index="item.id" :key="item.id"> <el-submenu :index="item.id" :key="item.id">
<template slot="title"> <template slot="title">
<i :class="item.icon"></i> <i :class="item.icon"></i>
<span slot="title">{{ item.categoryName }}</span> <span slot="title" :title="item.categoryName">{{ item.categoryName }}</span>
</template> </template>
<!-- 第二层 --> <!-- 第二层 -->
<template v-for="subItem in item.children"> <template v-for="subItem in item.children">
@ -16,7 +16,7 @@
<template v-if="subItem.children.length"> <template v-if="subItem.children.length">
<el-submenu :index="subItem.id" :key="subItem.id"> <el-submenu :index="subItem.id" :key="subItem.id">
<template slot="title"> <template slot="title">
<span slot="title">{{ subItem.categoryName }}</span> <span slot="title" :title="subItem.categoryName">{{ subItem.categoryName }}</span>
</template> </template>
<!-- <el-menu-item v-for="(threeItem,i) in subItem.children" :key="i" :index="threeItem.index">{{ threeItem.title }}</el-menu-item> --> <!-- <el-menu-item v-for="(threeItem,i) in subItem.children" :key="i" :index="threeItem.index">{{ threeItem.title }}</el-menu-item> -->
<!-- 第三层 --> <!-- 第三层 -->
@ -25,7 +25,7 @@
<template v-if="subItem2.children.length"> <template v-if="subItem2.children.length">
<el-submenu :index="subItem2.id" :key="subItem2.id"> <el-submenu :index="subItem2.id" :key="subItem2.id">
<template slot="title"> <template slot="title">
<span slot="title">{{ subItem2.categoryName }}</span> <span slot="title" :title="subItem2.categoryName">{{ subItem2.categoryName }}</span>
</template> </template>
<!-- <el-menu-item v-for="(fourItem,i) in subItem2.children" :key="i" :index="fourItem.index">{{ fourItem.title }}</el-menu-item> --> <!-- <el-menu-item v-for="(fourItem,i) in subItem2.children" :key="i" :index="fourItem.index">{{ fourItem.title }}</el-menu-item> -->
<!-- 第四层 --> <!-- 第四层 -->
@ -33,48 +33,48 @@
<!-- 如果第四层有子菜单，则继续循环 --> <!-- 如果第四层有子菜单，则继续循环 -->
<template v-if="subItem3.children"> <template v-if="subItem3.children">
<el-submenu :index="subItem3.id" :key="subItem3.id"> <el-submenu :index="subItem3.id" :key="subItem3.id">
<template slot="title"> <span slot="title" :title="subItem3.categoryName">
{{ subItem3.categoryName }} {{ subItem3.categoryName }}
</template> </span>
<template v-for="subItem4 in subItem3.children"> <template v-for="subItem4 in subItem3.children">
<!-- 如果第五层有子菜单，则继续循环 --> <!-- 如果第五层有子菜单，则继续循环 -->
<template v-if="subItem4.children && subItem4.children.length"> <template v-if="subItem4.children && subItem4.children.length">
<el-submenu :index="subItem4.id" :key="subItem4.id"> <el-submenu :index="subItem4.id" :key="subItem4.id">
<template slot="title"> <span slot="title" :title="subItem4.categoryName">
{{ subItem4.categoryName }} {{ subItem4.categoryName }}
</template> </span>
<template class="level-6" v-for="subItem5 in subItem4.children" :index="subItem5.id"> <template class="level-6" v-for="subItem5 in subItem4.children" :index="subItem5.id">
<!-- 如果第六层有子菜单，则继续循环 --> <!-- 如果第六层有子菜单，则继续循环 -->
<template v-if="subItem5.children && subItem5.children.length"> <template v-if="subItem5.children && subItem5.children.length">
<el-submenu :index="subItem5.id" :key="subItem5.id"> <el-submenu :index="subItem5.id" :key="subItem5.id">
<template slot="title"> <span slot="title" :title="subItem5.categoryName">
{{ subItem5.categoryName }} {{ subItem5.categoryName }}
</template> </span>
<el-menu-item v-for="(fiveItem,i) in subItem5.children" :key="i" :index="fiveItem.id">{{ fiveItem.categoryName }}</el-menu-item> <el-menu-item v-for="(fiveItem,i) in subItem5.children" :key="i" :index="fiveItem.id">{{ fiveItem.categoryName }}</el-menu-item>
</el-submenu> </el-submenu>
</template> </template>
<!-- 如果第五层没有子菜单 --> <!-- 如果第五层没有子菜单 -->
<el-menu-item :index="subItem5.id" :key="subItem5.id">{{ subItem5.categoryName }}</el-menu-item> <el-menu-item :index="subItem5.id" :key="subItem5.id" :title="subItem5.categoryName">{{ subItem5.categoryName }}</el-menu-item>
</template> </template>
</el-submenu> </el-submenu>
</template> </template>
<!-- 如果第五层没有子菜单 --> <!-- 如果第五层没有子菜单 -->
<el-menu-item v-else :index="subItem4.id" :key="subItem4.id">{{ subItem4.categoryName }}</el-menu-item> <el-menu-item v-else :index="subItem4.id" :key="subItem4.id" :title="subItem4.categoryName">{{ subItem4.categoryName }}</el-menu-item>
</template> </template>
</el-submenu> </el-submenu>
</template> </template>
<!-- 如果第四层没有子菜单 --> <!-- 如果第四层没有子菜单 -->
<el-menu-item v-else :index="subItem3.id" :key="subItem3.id">{{ subItem3.categoryName }}</el-menu-item> <el-menu-item v-else :index="subItem3.id" :key="subItem3.id" :title="subItem3.categoryName">{{ subItem3.categoryName }}</el-menu-item>
</template> </template>
</el-submenu> </el-submenu>
</template> </template>
<!-- 如果第三层没有子菜单 --> <!-- 如果第三层没有子菜单 -->
<el-menu-item v-else :index="subItem2.id" :key="subItem2.id">{{ subItem2.categoryName }}</el-menu-item> <el-menu-item v-else :index="subItem2.id" :key="subItem2.id" :title="subItem2.categoryName">{{ subItem2.categoryName }}</el-menu-item>
</template> </template>
</el-submenu> </el-submenu>
</template> </template>
<!-- 如果第二层没有子菜单 --> <!-- 如果第二层没有子菜单 -->
<el-menu-item v-else :index="subItem.id" :key="subItem.id">{{ subItem.categoryName }}</el-menu-item> <el-menu-item v-else :index="subItem.id" :key="subItem.id" :title="subItem.categoryName">{{ subItem.categoryName }}</el-menu-item>
</template> </template>
</el-submenu> </el-submenu>
</template> </template>
@ -82,7 +82,7 @@
<template v-else> <template v-else>
<el-menu-item :index="item.id" :key="item.id"> <el-menu-item :index="item.id" :key="item.id">
<i :class="item.icon"></i> <i :class="item.icon"></i>
<span slot="title">{{ item.categoryName }}</span> <span slot="title" :title="item.categoryName">{{ item.categoryName }}</span>
</el-menu-item> </el-menu-item>
</template> </template>
</template> </template>
@ -341,6 +341,7 @@ export default {
}, },
// 分类展开及点击回调 // 分类展开及点击回调
selectType(index, indexPath) { selectType(index, indexPath) {
console.log(index, indexPath)
let introduce = '' let introduce = ''
let dataSource = '' let dataSource = ''
this.keyword = '' this.keyword = ''
@ -528,7 +529,7 @@ export default {
/deep/.left{ /deep/.left{
margin-right: 20px; margin-right: 20px;
.menu{ .menu{
width: 200px; width: 240px;
overflow: hidden; overflow: hidden;
&>.el-menu-item,.el-submenu__title{ &>.el-menu-item,.el-submenu__title{
span{ span{
@ -554,10 +555,15 @@ export default {
} }
} }
} }
.el-menu-item.is-active{ .el-menu-item{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.is-active{
color: #fff; color: #fff;
background-color: #0070FF; background-color: #0070FF;
} }
}
.level-6 { .level-6 {
padding-right: 0; padding-right: 0;
.el-submenu__title { .el-submenu__title {

4
src/pages/stat/list/index.vue
Unescape View File

@ -373,7 +373,7 @@ export default {
.left{ .left{
margin-right: 20px; margin-right: 20px;
.products{ .products{
width: 170px; width: 200px;
padding: 12px 6px; padding: 12px 6px;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
@ -429,7 +429,7 @@ export default {
} }
} }
.right{ .right{
max-width: calc(100% - 220px); max-width: calc(100% - 250px);
} }
.page{ .page{
margin-bottom: 20px; margin-bottom: 20px;

Write Preview
Loading…
Cancel
Save