12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- <template>
- <div class="sideColumn">
- <div class="column">
- <div class="head"><img :src="$store.getters.user.org.org_logo" alt=""></div>
- <ul class="sidebar">
- <li :class="active_index == 0 ? 'active' : ''">
- <router-link to="/main"><span class="iconfont"></span><p>记录</p></router-link>
- </li>
- <li :class="active_index == 1 ? 'active' : ''">
- <router-link to="/monitoring"><span class="iconfont"></span><p>监控</p></router-link>
- </li>
- <li :class="active_index == 2 ? 'active' : ''">
- <router-link to="/advice"><span class="iconfont"></span><p>医嘱</p></router-link>
- </li>
- <li :class="active_index == 3 ? 'active' : ''">
- <router-link to="/my"><span class="iconfont"></span><p>我的</p></router-link>
- </li>
- </ul>
- </div>
- </div>
- </template>
-
- <script>
- export default {
- name: "SideBar",
- props: {
- active_index: {
- type: Number,
- default: 0
- }
- }
- };
- </script>
-
- <style style="stylesheet/scss" lang="scss" scoped>
- .sideColumn {
- float: left;
- width: 1.58rem;
- background: #f5f8fb;
- height: 100%;
- border-right: 1px solid rgba(193, 193, 193, 0.8);
- position: fixed;
- z-index: 999;
- .column {
- .head {
- @include display-flex;
- @include align-items-center;
- @include text-align;
- @include justify-content-center;
- margin: 0.5rem auto 0.7rem auto;
- width: 1rem;
- height: 1rem;
- overflow: hidden;
- border-radius: 50%;
- img {
- width: 100%;
- height: auto;
- display: block;
- }
- }
- .sidebar {
- @include display-flex;
- @include align-items-center;
- @include flex-direction;
- @include text-align;
- padding: 0;
- li {
- padding: 0 0 0.8rem 0;
- a {
- color: #a8b3ba;
- display: inline-block;
- padding: 0;
- margin: 0;
- p {
- font-size: 0.32rem;
- margin-top: 0.05rem;
- }
- .iconfont {
- font-size: 0.52rem;
- display: inline-block;
- }
- }
- &.active {
- a {
- color: $main-color;
- .iconfont {
- color: $main-color;
- }
- }
- }
- }
- }
- }
- }
- </style>
-
|