123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120 |
- <template>
- <div class="record">
- <div class="top">
- <popover placement="bottom" >
- <div slot="content" class="popover-demo-content">
- <ul>
- <li>医院医院医院</li>
- <li>医院医院医院 <span class="iconfont"></span></li>
- </ul>
- </div>
- <div class="hospital"><span class="title"> 深圳市人民医院血液透析中心</span><span class="iconfont"></span></div>
- </popover>
-
- <div class="department">
- <ul>
- <li v-for="(item,i) in ['候诊室','透析区']" :key="i" :class="index == i? 'active':'' " @click="ClickTab(i)" >{{item}}</li>
-
- </ul>
- </div>
- <div class="search">
- <span class="iconfont"></span>
- <input type="text" class="searchInput" placeholder="透析号/姓名">
- </div>
- </div>
- <div class="area">
- <waiting-area v-show="index==0" title="候诊区"></waiting-area>
- <dialysis-area v-show="index==1" title="透析区"></dialysis-area>
- </div>
-
- </div>
- </template>
-
-
- <script>
- import DialysisArea from "@/pages/main/DialysisArea";
- import WaitingArea from "@/pages/main/WaitingArea";
- import { Popover } from 'vux'
- export default {
- name: "RecordPage",
- data(){
- return{
- index:0
- }
- },
- components: {
- DialysisArea,
- WaitingArea,
- Popover,
- // Group,
- // Cell
- },
- methods: {
- ClickTab: function(tabIndex) {
- this.index = tabIndex;
- },
- }
- };
- </script>
-
- <style style="stylesheet/scss" lang="scss" scoped>
- .record {
- .top {
- padding: 0.28rem 0.3rem;
- @include display-flex;
- @include align-items-center;
- @include text-align;
- @include justify-content-between;
- font-size: 0.3rem;
- border-bottom: 1px #e5e5e5 solid;
- .title {
- font-size: 0.3rem;
- font-weight: bold;
- color: $pgh-color;
- }
- .iconfont{
- font-size: 0.24rem;
- color: #a8b3ba;
- }
- }
- .department {
-
- ul {
- li {
- float: left;
- font-size: 0.28rem;
- margin: 0 0.2rem;
- height: 0.48rem;
- line-height: 0.48rem;
- width: 1.4rem;
- &.active {
- background: $main-color;
- color: #fff;
- border-radius: 30px;
- }
- }
- }
- }
- .search {
- background: #ebf1f7;
- border-radius: 30px;
- padding: 0 0.3rem;
- height: 0.6rem;
- line-height: 0.6rem;
- color: #a8b3ba;
-
- .iconfont {
- color: #a8b3ba;
- }
- .searchInput {
- font-size: 0.28rem;
- border: none;
- outline: none;
- background: #ebf1f7;
- }
- }
-
- }
- </style>
-
|