elizebeth/src/xt_pages/sign/signIn.vue

<template>
    <div class="app-container">
        <div class="page_signIn">
            <div class="signInTitle">
                <div>唐山朝阳医院</div>
                <div>2020.8.18   07:22(星期四）</div>
            </div>
            <div class="signInMain">
                <div style="display: flex;justify-content: space-between;padding:10px;">
                    <div class="signInMainLeft">
                        <div class="signInMainLeftTitle">
                            <p>排号</p>
                            <p>姓名</p>
                            <p>病历号</p>
                            <p>签到时间</p>
                        </div>
                        <div class="signInList">
                            <div class="signInListOne" v-for="item in 12" :key="item">
                                <p>P13</p>
                                <p>张*等</p>
                                <p>001</p>
                                <p>09:01:00</p>
                            </div>
                        </div>
                    </div>
                    <div class="signInMainRight">
                        <div class="signInMainRightTitle"><span style="margin:0 auto;">张三</span></div>
                        <div class="signInMainRightContent">
                            <p style="margin: 0 auto;display:flex;align-items: center;"><span>排号&nbsp;&nbsp;</span><span style="font-size:120px;">P06</span></p>
                        </div>
                        <div class="signInMianRightBottom"><span style="margin:0 auto;">签到成功</span></div>
                    </div>
                </div>
                <div class="signInTip">
                    温馨提示：请注意排队叫号，依次叫号就诊上机，谢谢配合
                </div>
            </div>
        </div>
    </div>
</template>


<style lang="scss" scoped>
.page_signIn{
    .signInTitle{
        height: 50px;
        background: #1A82BF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        color:#fff;
        font-size: 20px;
        font-weight: 600;
    }
    .signInMain{
        background: linear-gradient(0deg, #76ECEC, #479CD2);
        height: 600px;
        
        
    }
    .signInMainLeft{
        width:65%;
        height: 530px;
        border-radius: 15px;
    }
    .signInMainLeftTitle{
        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{
            width:25%;
            text-align: center;
        }
    }
    .signInList{
        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;
        }
        .signInListOne{
            height:40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color:#1C6895;
            >p{
                width:25%;
                text-align: center;
            }
        }
    }
    .signInMainRight{
        width: 34%;
        height: 530px;
    }
    .signInMainRightTitle{
        height: 130px;
        border-radius: 15px 15px 0 0;
        background: #1A82BF;
        font-size: 80px;
        font-weight: 600;
        color:#fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .signInMainRightContent{
        background: #F9FDFF;
        height: 300px;
        text-align: center;
        font-weight: 600;
        color:#1C6895;
        box-sizing: border-box;
        font-size:70px;
        display:flex;
        align-items:center;
    }
    .signInMianRightBottom{
        height: 100px;
        background: #1A82BF;
        border-radius: 0 0 15px 15px;
        font-size: 40px;
        font-weight: 600;
        color:#fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .signInTip{
        color:#fff;
        font-size: 18px;
        font-weight: 600;
        display: flex;
        align-items: center;
        height: 50px;
        background: linear-gradient(0deg, #42A9E7, #3686B9, #42A9E7);
        margin-top: 1px;
    }
}
</style>