|
@@ -2,8 +2,8 @@
|
|
|
<div class="navbar">
|
|
<div class="navbar">
|
|
|
<div class="hos-name">
|
|
<div class="hos-name">
|
|
|
<img :src="logo" alt="logo">
|
|
<img :src="logo" alt="logo">
|
|
|
|
|
+ <span v-if="userData.ocName" class="tag">{{ userData.ocName }}</span>
|
|
|
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
|
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
|
|
- <!-- <span v-if="userData.ocName" class="tag">/{{ userData.ocName }}</span> -->
|
|
|
|
|
</div>
|
|
</div>
|
|
|
<!-- 隐藏标签 -->
|
|
<!-- 隐藏标签 -->
|
|
|
<breadcrumb v-if="0" id="breadcrumb-container" class="breadcrumb-container" />
|
|
<breadcrumb v-if="0" id="breadcrumb-container" class="breadcrumb-container" />
|
|
@@ -21,15 +21,21 @@
|
|
|
|
|
|
|
|
</template>
|
|
</template>
|
|
|
<div class="sideMenuTab">
|
|
<div class="sideMenuTab">
|
|
|
|
|
+
|
|
|
<div
|
|
<div
|
|
|
v-for="(tab,index) in sideMenus"
|
|
v-for="(tab,index) in sideMenus"
|
|
|
:key="'sideMenuTab'+index"
|
|
:key="'sideMenuTab'+index"
|
|
|
class="item"
|
|
class="item"
|
|
|
- :class="sideMenuTabIndex===tab.id?'active-'+sideMenuTabIndex:''"
|
|
|
|
|
- @click="sideTabChange(tab.id,tab)"
|
|
|
|
|
|
|
+ :class="sideMenuTabIndex===tab.id?'active':''"
|
|
|
>
|
|
>
|
|
|
- <i class="iconfont" :class="tab.icon" />
|
|
|
|
|
- <p>{{ tab.name }}</p>
|
|
|
|
|
|
|
+ <a v-if="tab.href" :href="tab.href" target="_blank" class="item-cont">
|
|
|
|
|
+ <img :src="tab.icon" class="icon">
|
|
|
|
|
+ <p>{{ tab.name }}</p>
|
|
|
|
|
+ </a>
|
|
|
|
|
+ <div v-else class="item-cont" @click="sideTabChange(tab.id,tab)">
|
|
|
|
|
+ <img :src="tab.icon" class="icon">
|
|
|
|
|
+ <p>{{ tab.name }}</p>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="right-menu-item" @click="navToPage('/message')">
|
|
<div class="right-menu-item" @click="navToPage('/message')">
|
|
@@ -81,13 +87,14 @@ export default {
|
|
|
sideMenuTabIndex: 0,
|
|
sideMenuTabIndex: 0,
|
|
|
sideMenus: [],
|
|
sideMenus: [],
|
|
|
sideMenuTabList: [
|
|
sideMenuTabList: [
|
|
|
- { name: '数据总览', icon: 'el-icon-s-platform', path: '/', permit: 'hos_overview', id: 0 },
|
|
|
|
|
- { name: '平安医院', icon: 'icon-common_satisfaction', path: '/hos/safe/overview', permit: 'hos_safe', id: 1 },
|
|
|
|
|
- { name: '质量医院', icon: 'icon-common_quality', path: '/hos/quality/overview', permit: 'hos_quality', id: 2 },
|
|
|
|
|
- { name: '满意医院', icon: 'icon-common_safety', path: '/hos/satisfy/overview', permit: 'hos_satisfy', id: 3 },
|
|
|
|
|
- { name: '智慧医院', icon: 'icon-common_wisdom1', path: '/hos/smart/overview', permit: 'hos_smart', id: 4 },
|
|
|
|
|
- { name: '健康医院', icon: 'icon-common_health', path: '/hos/health/overview', permit: 'hos_health', id: 5 },
|
|
|
|
|
- { name: '节约型医院', icon: 'icon-common_saving', path: '/hos/economic/overview', permit: 'hos_economic', id: 6 }
|
|
|
|
|
|
|
+ { name: '数据总览', icon: require('./nav/icon.png'), path: '/', permit: 'hos_overview', id: 0 },
|
|
|
|
|
+ { name: '平安医院', icon: require('./nav/icon-1.png'), path: '/hos/safe/overview', permit: 'hos_safe', id: 1, href: 'http://baidu.com' },
|
|
|
|
|
+ { name: '质量医院', icon: require('./nav/icon-2.png'), path: '/hos/quality/overview', permit: 'hos_quality', id: 2 },
|
|
|
|
|
+ { name: '满意医院', icon: require('./nav/icon-3.png'), path: '/hos/satisfy/overview', permit: 'hos_satisfy', id: 3 },
|
|
|
|
|
+ { name: '智慧医院', icon: require('./nav/icon-4.png'), path: '/hos/smart/overview', permit: 'hos_smart', id: 4 },
|
|
|
|
|
+ { name: '健康医院', icon: require('./nav/icon-5.png'), path: '/hos/health/overview', permit: 'hos_health', id: 5 },
|
|
|
|
|
+ { name: '节约型医院', icon: require('./nav/icon-6.png'), path: '/hos/economic/overview', permit: 'hos_economic', id: 6 },
|
|
|
|
|
+ { name: '系统管理', icon: require('./nav/icon-7.png'), path: '/hos/profile', permit: 'hos_economic', id: 7 }
|
|
|
]
|
|
]
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
@@ -180,7 +187,7 @@ export default {
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
background: unset;
|
|
background: unset;
|
|
|
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
|
|
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
|
|
|
- border-bottom: 1px solid #457486;
|
|
|
|
|
|
|
+ border-bottom: 1px solid #0f3a4a;
|
|
|
position: fixed;
|
|
position: fixed;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
z-index: 999;
|
|
z-index: 999;
|
|
@@ -188,6 +195,9 @@ export default {
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
background-color: inherit;
|
|
background-color: inherit;
|
|
|
top: 0;
|
|
top: 0;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
.hos-name{
|
|
.hos-name{
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -195,18 +205,18 @@ export default {
|
|
|
float: left;
|
|
float: left;
|
|
|
padding-left: 10px;
|
|
padding-left: 10px;
|
|
|
color: #fff;
|
|
color: #fff;
|
|
|
- flex: 1;
|
|
|
|
|
|
|
+ // flex: 1;
|
|
|
img{
|
|
img{
|
|
|
display: block;
|
|
display: block;
|
|
|
width: auto;
|
|
width: auto;
|
|
|
- height: 32px;
|
|
|
|
|
|
|
+ height: 36px;
|
|
|
}
|
|
}
|
|
|
.tag{
|
|
.tag{
|
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
|
line-height: 16px;
|
|
line-height: 16px;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
padding-left: 10px;
|
|
padding-left: 10px;
|
|
|
- margin-top: 10px;
|
|
|
|
|
|
|
+ margin-top: 15px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.hamburger-container {
|
|
.hamburger-container {
|
|
@@ -236,12 +246,13 @@ export default {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.right-menu {
|
|
.right-menu {
|
|
|
- float: right;
|
|
|
|
|
|
|
+ // float: right;
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
line-height: var(--navHeight);
|
|
line-height: var(--navHeight);
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
|
|
|
|
+ justify-content: flex-end;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
+ flex: 1;
|
|
|
&:focus {
|
|
&:focus {
|
|
|
outline: none;
|
|
outline: none;
|
|
|
}
|
|
}
|
|
@@ -288,28 +299,44 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.sideMenuTab{
|
|
.sideMenuTab{
|
|
|
|
|
+ overflow-x: auto;
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
justify-content: flex-start;
|
|
|
|
|
+ align-items: center;
|
|
|
padding-right: 50px;
|
|
padding-right: 50px;
|
|
|
.item{
|
|
.item{
|
|
|
- height: 100%;
|
|
|
|
|
display: flex;
|
|
display: flex;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- flex-direction: column;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- line-height: 1;
|
|
|
|
|
- padding: 0 15px;
|
|
|
|
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
transition: 0.2s;
|
|
transition: 0.2s;
|
|
|
- &.active-0{color: #1890ff;font-weight: 600;}
|
|
|
|
|
- &.active-1{color: #b97741;font-weight: 600;}
|
|
|
|
|
- &.active-2{color: #97cd38;font-weight: 600;}
|
|
|
|
|
- &.active-3{color: #dc5a2c;font-weight: 600;}
|
|
|
|
|
- &.active-4{color: #414ab9;font-weight: 600;}
|
|
|
|
|
- &.active-5{color: #c13ac9;font-weight: 600;}
|
|
|
|
|
- &.active-6{color: #29c761;font-weight: 600;}
|
|
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ line-height: 40px;
|
|
|
|
|
+ border-radius: 20px;
|
|
|
|
|
+ .item-cont{
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ padding: 0 14px 0 8px;
|
|
|
|
|
+ border-radius: 20px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ }
|
|
|
|
|
+ &.active{
|
|
|
|
|
+ background: rgba(24, 144, 255, 0.9);
|
|
|
|
|
+ p{
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .icon{
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ width: 24px;
|
|
|
|
|
+ height: 24px;
|
|
|
|
|
+ }
|
|
|
.iconfont{
|
|
.iconfont{
|
|
|
font-size: 30px;
|
|
font-size: 30px;
|
|
|
&.el-icon-s-platform{
|
|
&.el-icon-s-platform{
|
|
@@ -321,9 +348,8 @@ export default {
|
|
|
}
|
|
}
|
|
|
p{
|
|
p{
|
|
|
padding: 0;
|
|
padding: 0;
|
|
|
- margin: 5px 0 0 0;
|
|
|
|
|
- font-size: 12px;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|