'admin-21.03.02:优化菜单管理、tagsView风格'

This commit is contained in:
lyt 2021-03-02 18:04:26 +08:00
parent 41e87ced71
commit a0201ee678
5 changed files with 30 additions and 79 deletions

View File

@ -8,7 +8,7 @@
<i class="iconfont icon-webicon318 layout-navbars-tagsview-ul-li-iconfont font14" v-if="isActive(v.path)"></i>
<i class="layout-navbars-tagsview-ul-li-iconfont" :class="v.meta.icon"
v-if="!isActive(v.path) && getThemeConfig.isTagsviewIcon"></i>
<span :class="{'is-active-four': v.meta.isAffix}">{{v.meta.title}}</span>
<span>{{v.meta.title}}</span>
<template v-if="isActive(v.path)">
<i class="el-icon-refresh-right ml5" @click="refreshCurrentTagsView(v.path)"></i>
<i class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-active" v-if="!v.meta.isAffix"
@ -414,7 +414,7 @@ export default {
margin-right: 0 !important;
border: none !important;
position: relative;
border-radius: 0 !important;
border-radius: 3px !important;
.layout-icon-active {
display: none;
}
@ -426,57 +426,8 @@ export default {
}
}
.is-active {
border-top-left-radius: 8px !important;
border-top-right-radius: 8px !important;
position: relative;
z-index: 1;
span {
position: relative;
&::before,
&::after {
content: "";
position: absolute;
bottom: 0px;
width: 10px;
height: 10px;
background: var(--color-primary);
z-index: 1;
}
&::before {
left: -36px;
}
&::after {
right: -51px;
}
}
.is-active-four {
&::after {
right: -40px;
}
}
&::before,
&::after {
content: "";
position: absolute;
bottom: 1px;
width: 10px;
height: 10px;
background: white;
z-index: 2;
}
&::before {
left: -10px;
transform: rotate(-4deg);
border-bottom-right-radius: 10px;
}
&::after {
right: -10px;
transform: rotate(4deg) !important;
border-bottom-left-radius: 10px;
}
&:hover {
background: var(--color-primary) !important;
}
background: none !important;
color: var(--color-primary) !important;
}
}
}

View File

@ -131,7 +131,7 @@ export const filterList = [
img:
"http://www.sznews.com/photo/pic/2020-08/12/a08d6eb0-1d53-4f76-a313-ad3e5d701f98.jpg",
title:
"记者手记可可西里“挪”向“藏羚羊大产房”的14个半小时 记者手记可可西里“挪”向“藏羚羊大产房”的14个半小时",
"记者手记可可西里“挪”向“藏羚羊大产房”的14个半小时",
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),

View File

@ -4,27 +4,27 @@
<div class="system-menu-form">
<el-form :model="ruleForm" size="small" label-width="80px">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="菜单名称">
<el-input v-model="ruleForm.meta.title" placeholder="请输入菜单名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="路由名称">
<el-input v-model="ruleForm.name" placeholder="路由名称路由中的name值" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="菜单图标">
<el-input v-model="ruleForm.meta.icon" placeholder="请输入菜单图标" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="组件地址">
<el-input v-model="ruleForm.component" placeholder="组件地址" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="是否隐藏">
<el-select v-model="ruleForm.meta.isHide" placeholder="请选择是否隐藏" clearable class="w100">
<el-option label="是" value="true"></el-option>
@ -32,7 +32,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="是否缓存">
<el-select v-model="ruleForm.meta.isKeepAlive" placeholder="请选择是否缓存" clearable class="w100">
<el-option label="是" value="true"></el-option>
@ -40,7 +40,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="是否固定">
<el-select v-model="ruleForm.meta.isAffix" placeholder="请选择是否固定" clearable class="w100">
<el-option label="是" value="true"></el-option>
@ -48,7 +48,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="是否外链">
<el-select v-model="ruleForm.isLink" placeholder="请选择是否外链" clearable class="w100"
:disabled="ruleForm.meta.isIframe === 'true'">
@ -57,7 +57,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="是否内嵌">
<el-select v-model="ruleForm.meta.isIframe" placeholder="请选择是否iframe" clearable class="w100"
@change="onSelectIframeChange">
@ -66,19 +66,19 @@
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="链接地址">
<el-input v-model="ruleForm.meta.isLink" placeholder="外链/内嵌时链接地址http:xxx.com" clearable
:disabled="ruleForm.isLink === '' || ruleForm.isLink === 'false'">
</el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="权限标识">
<el-input v-model="ruleForm.meta.auth" placeholder="路由权限标识(多个请用逗号隔开)" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="菜单排序">
<el-input v-model="ruleForm.menuSort" placeholder="菜单排序" clearable></el-input>
</el-form-item>

View File

@ -4,27 +4,27 @@
<div class="system-menu-form">
<el-form :model="ruleForm" size="small" label-width="80px">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="菜单名称">
<el-input v-model="ruleForm.meta.title" placeholder="请输入菜单名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="路由名称">
<el-input v-model="ruleForm.name" placeholder="路由名称路由中的name值" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="菜单图标">
<el-input v-model="ruleForm.meta.icon" placeholder="请输入菜单图标" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="组件地址">
<el-input v-model="ruleForm.component" placeholder="组件地址" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="是否隐藏">
<el-select v-model="ruleForm.meta.isHide" placeholder="请选择是否隐藏" clearable class="w100">
<el-option label="是" value="true"></el-option>
@ -32,7 +32,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="是否缓存">
<el-select v-model="ruleForm.meta.isKeepAlive" placeholder="请选择是否缓存" clearable class="w100">
<el-option label="是" value="true"></el-option>
@ -40,7 +40,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="是否固定">
<el-select v-model="ruleForm.meta.isAffix" placeholder="请选择是否固定" clearable class="w100">
<el-option label="是" value="true"></el-option>
@ -48,7 +48,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="是否外链">
<el-select v-model="ruleForm.isLink" placeholder="请选择是否外链" clearable class="w100"
:disabled="ruleForm.meta.isIframe === 'true'">
@ -57,7 +57,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="是否内嵌">
<el-select v-model="ruleForm.meta.isIframe" placeholder="请选择是否iframe" clearable class="w100"
@change="onSelectIframeChange">
@ -66,19 +66,19 @@
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="链接地址">
<el-input v-model="ruleForm.meta.isLink" placeholder="外链/内嵌时链接地址http:xxx.com" clearable
:disabled="ruleForm.isLink === '' || ruleForm.isLink === 'false'">
</el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="权限标识">
<el-input v-model="ruleForm.meta.auth" placeholder="路由权限标识(多个请用逗号隔开)" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="菜单排序">
<el-input v-model="ruleForm.menuSort" placeholder="菜单排序" clearable></el-input>
</el-form-item>

View File

@ -56,7 +56,7 @@ export default {
num: `00${i + 1}`,
name: (Math.round(Math.random() * 20901) + 19968).toString(16),
photo:
"https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3142181265,1044547961&fm=11&gp=0.jpg",
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1633081619,2004077072&fm=26&gp=0.jpg",
phone: Math.floor(Math.random() * 10000000000),
email: `${Math.floor(Math.random() * 1000)}@qq.com`,
sex: i % 2 === 0 ? "男" : "女",