Vue_New/src/xt_pages/sign/components/beforeDialysisCalling.vue

<template>
    <div class="page_beforeDialysisCalling">
        <div class="cell clearfix">
            <label class="title"><span class="name">叫号状态</span> : </label>
            <div class="time ">
                <ul class="">
                    <li v-for="option in patient_state" :key="option.value" @click="handleStateChange(option.value)" :class="patientStateVal == option.value ? 'active' : ''" >{{option.label}}
                    </li>
                </ul>
            </div>
        </div>
        <div style="display:flex;justify-content: space-between;">
            <div class="callingArea">
                <waiting-called v-if="patientStateVal == 0"></waiting-called>
                <called v-if="patientStateVal == 1"></called>
            </div>
            <div class="nowCalling" v-if="patientStateVal == 0">
                <p class="nowCallingTitle">当前叫号</p>
                <p class="nowCallingName">李小明</p>
                <p class="nowCallingTime">签到时间：07:20</p>
                <p class="nowCallingTime">下一位：张三</p>
                <el-button style="margin: 30px 0 20px 0;">重新叫号</el-button>
                <el-button type="primary" style="margin-left:0;">&ensp;&ensp;叫号&ensp;&ensp;</el-button>
            </div>
        </div>
    </div>
</template>


<script>
import waitingCalled from './waitingCalled'
import called from './called'
export default {
    components:{
        waitingCalled,
        called
    },
    data(){
        return{
            patient_state:[
                {value: 0,label: '待叫号'},
                {value: 1,label: '已叫号'},
            ],
            patientStateVal: 0,
        }
    },
    methods:{
        handleStateChange: function(index) {
            this.patientStateVal = index
        },
    }
}
</script>

<style lang="scss" scoped>
.callingArea{
    display: flex;
    flex-wrap: wrap;
    width: 88%;
    // @media only screen and (max-width: 1340px) {
    //     width:750px;
    // }

    // @media only screen and (min-width: 415px) and (max-width: 767px) {
    // }
}
.nowCalling{
    height: 313px;
    border: 1px solid #e5e5ee;
    // flex: 1;
    width: 12%;
    text-align: center;
    .nowCallingTitle{
        font-size: 20px;
        font-weight: 600;
        margin-top: 20px;
        text-align: center;
    }
    .nowCallingName{
        color: #338AFB;
        font-size: 18px;
        margin-top: 10px;
        font-weight: 600;
    }
    .nowCallingTime{
        font-size: 16px;
        margin-top: 30px;
    }
}
</style>