<template>
    <div class="page_lineUp">
        <div class="lineUpTitle">
            <div>唐山朝阳医院<span>温馨提示：请注意排队叫号，依次叫号就诊上机，谢谢配合</span></div>
            <div>2020.8.18   07:22(星期四）</div>
        </div>
        <div class="lineUpMain">
            <div class="lineUpMainLeft">
                <div class="lineUpMainLeftTitle">
                    <p style="width:14%">排号</p>
                    <p style="width:14%">姓名</p>
                    <p style="width:14%">病例号</p>
                    <p style="width:14%">床位号</p>
                    <p style="width:14%">治疗状态</p>
                    <p style="width:14%">上机时间</p>
                    <p style="width:14%">预计下机时间</p>
                </div>
                <div class="lineUpList">
                    <div class="lineUpListOne" v-for="item in 8" :key="item">
                        <p style="width:14%">P01</p>
                        <p style="width:14%">张*等</p>
                        <p style="width:14%">001</p>
                        <p style="width:14%">普通区1号床</p>
                        <p style="width:14%">已下机</p>
                        <p style="width:14%">09:01</p>
                        <p style="width:14%">09:01</p>
                    </div>
                </div>
            </div> 
            <div class="callingBox">
                <div class="callingBoxLeft">
                    <div class="callingTitle"><span style="margin: 0 auto;">接<br />诊<br />叫<br />号</span></div>
                    <div style="flex: 1;">
                        <div class="callingTop" style="margin-bottom:4px;">
                            <div class="callingTopTip"><span style="margin: 0 auto;">正在<br />接诊</span></div>
                            <div class="callingContent">
                                <p style="margin-top:13px;">请李四宋到1号诊台就诊</p>
                                <p>请王岐岐到2号诊台就诊</p>
                            </div>
                        </div>
                        <div class="callingTop" style="border-radius: 0 0 15px 0;">
                            <div class="callingTopTip"><span style="margin: 0 auto;">等待<br />接诊</span></div>
                            <div class="callingContent">
                                <p style="margin-top:13px;">欧大大、王思思、陈啦啦、吴东汉、</p>
                                <p>孔豆豆、陈米春、孔豆豆、陈米春、</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="callingBoxLeft">
                    <div class="callingTitle newCallingTitle"><span style="margin: 0 auto;">上<br />机<br />叫<br />号</span></div>
                    <div style="flex: 1;">
                        <div class="callingTop" style="margin-bottom:4px;">
                            <div class="callingTopTip newCallingTopTip"><span style="margin: 0 auto;">正在<br />叫号</span></div>
                            <div class="callingContent">
                                <p style="margin-top:13px;">请李四宋到普通区2号床上机</p>
                                <p>请王岐岐到普通区3号床上机</p>
                            </div>
                        </div>
                        <div class="callingTop" style="border-radius: 0 0 15px 0;">
                            <div class="callingTopTip newCallingTopTip"><span style="margin: 0 auto;">等待<br />叫号</span></div>
                            <div class="callingContent">
                                <p style="margin-top:13px;">欧大大、王思思、陈啦啦、吴东汉、</p>
                                <p>孔豆豆、陈米春、孔豆豆、陈米春、</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<style lang="scss" scoped>
.page_lineUp{
    .lineUpTitle{
        height: 50px;
        background: #1A82BF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        color:#fff;
        font-size: 20px;
        font-weight: 600;
    }
    .lineUpMain{
        background: linear-gradient(0deg, #76ECEC, #479CD2);
        height: 550px;
        padding:10px;
    }
    .lineUpMainLeft{
        height: 370px;
        border-radius: 15px;
        
    }
    .lineUpMainLeftTitle{
        display: flex;
        justify-content: space-between;
        align-items: center;
        color:#fff;
        font-size: 18px;
        font-weight: 600;
        height:50px;
        background: #1A82BF;
        border-radius: 15px 15px 0 0;
        >p{
            text-align: center;
        }
    }
    .lineUpList{
        font-size: 18px;
        font-weight: 600;
        >div:nth-child(odd){
            background: #F9FDFF;
        }
        >div:nth-child(even){
            background: #CCEBFF;
        }
        >div:last-child{
            border-radius: 0 0 15px 15px;
        }
        .lineUpListOne{
            height:40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color:#1C6895;
            >p{
                width:25%;
                text-align: center;
            }
        }
    }
    .callingBox{
        height: 150px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        .callingBoxLeft{
            width: 49%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            .callingTitle{
                width: 60px;
                height: 100%;
                border-radius: 15px 0 0 15px;
                font-size: 30px;
                font-weight:600;
                text-align: center;
                color: #fff;
                background: #1A82BF;
                display: flex;
                align-items: center;
                margin-right: 5px;
            }
            .newCallingTitle{
                background: linear-gradient(90deg, rgba(66, 231, 167, 1), rgba(26, 191, 84, 1), rgba(157, 254, 31, 1));
            }
        } 
        .callingTop{
            height: 73px;
            border-radius: 0 15px 0 0;
            background: #F9FDFF;
            display: flex;
            justify-content: space-between;
            .callingTopTip{
                width: 73px;
                height: 100%;
                color: #fff;
                font-size: 18px;
                font-weight: 600;
                background: #1A82BF;
                display: flex;
                align-items: center;
            }
            .newCallingTopTip{
                background: linear-gradient(90deg, rgba(66, 231, 167, 1), rgba(26, 191, 84, 1), rgba(157, 254, 31, 1));
            }
            .callingContent{
                flex: 1;
                display: flex;
                flex-direction: column;
                font-size: 16px;
                color:#1C6895;
                font-weight: 600;
                padding-left: 20px;
                >p{
                    width:100%;
                    text-align: left;
                    line-height: 24px;
                }
            }
        }
    }
}
</style>
