github/CRMEB
1
0
Fork 0
mirror of https://github.com/crmeb/CRMEB.git synced 2026-10-30 06:20:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve: 标签/菜单样式

Browse Source
This commit is contained in:
From-wh 2023-04-24 16:33:59 +08:00
parent 63a2dcbbee
commit ed66d5c2e7
5 changed files with 39 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
template/admin/src/layout/component/columnsAside.vue
View File

@ -209,6 +209,8 @@ export default {
height: 100%;
background: var(--prev-bg-columnsMenuBar);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
border-right: 1px solid var(--prev-border-color-lighter);
ul {
position: relative;
li {

2
template/admin/src/layout/navBars/breadcrumb/index.vue
View File

@ -79,6 +79,6 @@ export default {
padding-right: 15px;
overflow: hidden;
background: var(--prev-bg-topBar);
// border-bottom: 1px solid var(--prev-border-color-lighter);
border-bottom: 1px solid var(--prev-border-color-lighter);
}
</style>

15
template/admin/src/layout/navBars/breadcrumb/setings.vue
View File

@ -196,7 +196,7 @@
<el-switch v-model="getThemeConfig.isTagsview" :width="35" @change="setLocalThemeConfig"></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex mt15" v-if="getThemeConfig.isTagsview">
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsTagsviewIcon') }}</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-switch v-model="getThemeConfig.isTagsviewIcon" :width="35" @change="setLocalThemeConfig"></el-switch>
@ -233,10 +233,10 @@
<!-- 其它设置 -->
<el-divider :content-position="contentPosotion">{{ $t('message.layout.fiveTitle') }}</el-divider>
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex mt15" v-if="getThemeConfig.isTagsview">
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveTagsStyle') }}</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-select
<!-- <el-select
v-model="getThemeConfig.tagsStyle"
placeholder="请选择"
size="mini"
@ -246,16 +246,21 @@
<el-option label="风格1" value="tags-style-one"></el-option>
<el-option label="风格2" value="tags-style-four"></el-option>
<el-option label="风格3" value="tags-style-five"></el-option>
</el-select>
</el-select> -->
<el-radio-group v-model="getThemeConfig.tagsStyle" size="mini" @change="setLocalThemeConfig">
<el-radio-button label="tags-style-one">卡片</el-radio-button>
<el-radio-button label="tags-style-four">灵动</el-radio-button>
<el-radio-button label="tags-style-five">圆滑</el-radio-button>
</el-radio-group>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveAnimation') }}</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-radio-group v-model="getThemeConfig.animation" size="mini" @change="setLocalThemeConfig">
<el-radio-button label="slide-right">右滑</el-radio-button>
<el-radio-button label="slide-left">左滑</el-radio-button>
<el-radio-button label="opacitys">透明</el-radio-button>
<el-radio-button label="slide-right">右滑</el-radio-button>
</el-radio-group>
</div>
</div>

21
template/admin/src/layout/navBars/breadcrumb/user.vue
View File

@ -26,9 +26,7 @@
<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
<i class="el-icon-search" :title="$t('message.user.title2')"></i>
</div>
<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
<i class="el-icon-star-off" :title="$t('message.user.title3')"></i>
</div>
<div class="layout-navbars-breadcrumb-user-icon">
<el-popover
placement="bottom"
@ -58,14 +56,18 @@
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="homePath">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
<!-- <el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>
<el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>
<el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>
<el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item> -->
<!-- <el-dropdown-item :command="homePath">{{ $t('message.user.dropdown1') }}</el-dropdown-item> -->
<el-dropdown-item command="user">{{ $t('message.user.dropdown6') }}</el-dropdown-item>
<!-- <el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item> -->
<!-- <el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item> -->
<!-- <el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item> -->
<!-- <el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item> -->
<el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
<i class="el-icon-setting" :title="$t('message.user.title3')"></i>
</div>
<Search ref="searchRef" />
</div>
</template>
@ -225,7 +227,8 @@ export default {
})
.catch(() => {});
}, 150);
} else if (path === 'wareHouse') {
} else if (path === 'user') {
this.$router.push({ name: 'systemUser' });
} else {
this.$router.push(path);
}

23
template/admin/src/layout/navBars/tagsView/tagsView.vue
View File

@ -252,8 +252,7 @@ export default {
this.closeCurrentTagsView(path);
break;
case 2:
this.$router.push({ path, query: currentTag.query });
this.closeOtherTagsView(path);
this.closeOtherTagsView(path, currentTag.query);
break;
case 3:
this.closeAllTagsView(path);
@ -284,20 +283,22 @@ export default {
// this.addBrowserSetSession(this.tagNavList);
},
// 3、关闭其它 tagsView：如果是设置了固定的（isAffix），不进行关闭
closeOtherTagsView(path) {
closeOtherTagsView(path, query) {
let tagsViewList = [];
this.tagsViewRoutesList.map((v) => {
if (v.meta.isAffix && !v.meta.isHide) tagsViewList.push({ ...v });
if ((v.path = path)) tagsViewList.push({ ...v });
if ((v.meta && v.meta.isAffix) || v.path === path) tagsViewList.push({ ...v });
});
console.log(tagsViewList, this.tagsViewRoutesList, path);
this.addBrowserSetSession(tagsViewList);
this.$router.push({ path, query });
// this.addTagsView(path);
},
// 4、关闭全部 tagsView：如果是设置了固定的（isAffix），不进行关闭
closeAllTagsView(path) {
let tagsViewList = [];
this.tagsViewRoutesList.map((v) => {
if (v.meta.isAffix && !v.meta.isHide) {
if (v.meta.isAffix) {
tagsViewList.push({ ...v });
if (tagsViewList.some((v) => v.path === path)) this.$router.push({ path, query: this.$route.query });
else this.$router.push({ path: v.path, query: this.$route.query });
@ -326,6 +327,9 @@ export default {
</script>
<style scoped lang="scss">
/deep/ .el-scrollbar__bar.is-horizontal {
height: 0;
}
.layout-navbars-tagsview {
flex: 1;
background-color: var(--prev-bg-white);
@ -370,9 +374,9 @@ export default {
background: var(--prev-tag-active-color);
z-index: -1;
opacity: 0;
transform: scale3d(0.7, 1, 1);
transition: transform 0.3s, opacity 0.3s;
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
// transform: scale3d(0.7, 1, 1);
// transition: transform 0.3s, opacity 0.3s;
// transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
&:hover {
color: var(--prev-color-primary-light-9);
@ -444,6 +448,7 @@ export default {
border: none !important;
position: relative;
border-radius: 3px !important;
.layout-icon-active {
display: none;
}