feat(index): 动态修改header样式,及显示内容

duizhaopin_ui
duan 3 years ago
parent 22e8c5f8d6
commit 6b4d30104d

@ -1,5 +1,5 @@
<template>
<section class="app-main">
<section class="app-main" :style="{'height': this.$store.getters.isMain ? 'calc(100vh - 130px)' : 'calc(100vh - 60px)'}">
<transition name="fade-transform" mode="out-in">
<router-view :key="key" />
</transition>
@ -20,7 +20,6 @@ export default {
<style scoped>
.app-main {
/*50 = navbar */
height: calc(100vh - 10rem);
position: relative;
overflow-y: auto;
overflow-x:hidden;

@ -1,7 +1,8 @@
<template>
<div class="navbar" :style="obj">
<div class="navbar" :style="{...obj,'height': this.$store.getters.isMain ? '130px' : '60px'}">
<div class="header-top">
<div class="header-top-item"><img src="@/assets/login/logo-white.png" alt=""> </div>
<div v-if="!$store.getters.isMain" class="header-top-item mid">RMS</div>
<div class="header-top-item">
<el-badge :value="39">
<img style="height: 23px" src="@/assets/0-常用/预警管理-白.png" alt="">
@ -16,10 +17,10 @@
</el-select>
</div>
</div>
<div class="header-title">
<div v-if="$store.getters.isMain" class="header-title">
RMS后台管理系统
</div>
<div class="header-desc">
<div v-if="$store.getters.isMain" class="header-desc">
为您提供基于物联网的智慧实验室物资管理解决方案
</div>
</div>
@ -101,6 +102,11 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
.mid {
font-size: 2rem;
font-weight: 400;
color: #FFFFFF;
}
.header-top-item{
img{
height: 4.6875rem;

@ -26,6 +26,11 @@ router.beforeEach(async(to, from, next) => {
NProgress.done()
} else {
if (to.name) {
if (to.path === '/reagent/mainoverview/index') {
store.commit('settings/CHANGE_SETTING', { key: 'isMain', value: true })
} else {
store.commit('settings/CHANGE_SETTING', { key: 'isMain', value: false })
}
if (to.path.indexOf('reagent') !== -1) {
store.commit('user/SET_CLASS', 'reagent')
}

@ -5,6 +5,7 @@ const getters = {
avatar: state => state.user.avatar,
name: state => state.user.name,
permission_routes: state => state.permission.routes,
classification: state => state.user.classification
classification: state => state.user.classification,
isMain: state => state.settings.isMain
}
export default getters

@ -5,11 +5,13 @@ const { showSettings, fixedHeader, sidebarLogo } = defaultSettings
const state = {
showSettings: showSettings,
fixedHeader: fixedHeader,
sidebarLogo: sidebarLogo
sidebarLogo: sidebarLogo,
isMain: true
}
const mutations = {
CHANGE_SETTING: (state, { key, value }) => {
console.log(key, value)
// eslint-disable-next-line no-prototype-builtins
if (state.hasOwnProperty(key)) {
state[key] = value

@ -1,5 +1,5 @@
<template>
<div class="main-container">
<div class="main-container-text">
<div class="title">库存盘点</div>
<div class="header">
<el-select v-model="client_id" size="small" placeholder="请选择柜体">
@ -20,7 +20,7 @@
<el-table
:data="tableData"
:header-cell-style="headerStyle"
height="465"
height="530"
@selection-change="handleSelectionChange"
>
<el-table-column
@ -240,8 +240,8 @@ export default {
</script>
<style lang="scss" scoped>
.main-container{
min-height:calc(100vh - 12rem) ;
.main-container-text{
min-height:calc(100vh - 110px) ;
padding: 1rem;
margin: 1rem;
background: white;

@ -17,7 +17,7 @@
element-loading-text="拼命加载中"
:data="tableData"
style="width: 100%"
height="500"
height="560"
:header-cell-style="headerStyle"
>
<el-table-column
@ -147,7 +147,7 @@ export default {
display: flex;
.content{
width: 50%;
height: calc(100vh - 12rem);
height: calc(100vh - 110px);
padding: 1rem;
background: white;
.title{

@ -533,7 +533,7 @@ export default {
.main-content-container{
margin: 1rem;
background: white;
min-height: calc(100vh - 12rem);
min-height: calc(100vh - 110px);
.header{
margin: 1rem;
.title{

@ -98,7 +98,7 @@ export default {
display: flex;
.content{
width: 50%;
height: calc(100vh - 12rem);
height: calc(100vh - 110px);
padding: 1rem;
background: white;
.title{

@ -1,5 +1,5 @@
<template>
<div class="main-container">
<div class="main-container-text">
<div class="title">用户管理</div>
<div class="header">
<el-input v-model="user_code" placeholder="请输入工号" />
@ -28,7 +28,7 @@
element-loading-text="拼命加载中"
:data="tableData"
:header-cell-style="headerStyle"
height="460"
height="530"
@selection-change="handleSelectionChange"
>
<el-table-column
@ -410,8 +410,8 @@ export default {
</script>
<style lang="scss" scoped>
.main-container{
min-height:calc(100vh - 12rem) ;
.main-container-text{
min-height:calc(100vh - 110px) ;
padding: 1rem;
margin: 1rem;
background: white;

@ -1,5 +1,5 @@
<template>
<div class="main-container">
<div class="main-container-text">
<div class="title">角色信息</div>
<div class="header">
<el-button type="primary" plain @click="handleAddRole"><i class="el-icon-plus" />新增角色</el-button>
@ -13,7 +13,7 @@
element-loading-text="拼命加载中"
:data="tableData"
:header-cell-style="headerStyle"
height="460"
height="530"
@selection-change="handleSelectionChange"
>
<el-table-column
@ -340,8 +340,8 @@ export default {
</style>
<style lang="scss" scoped>
.main-container{
min-height:calc(100vh - 12rem) ;
.main-container-text{
min-height:calc(100vh - 110px) ;
padding: 1rem;
margin: 1rem;
background: white;

Loading…
Cancel
Save