elizebeth/src/xt_pages/dialysis/components/called.vue

<template>
    <div class="page_called">
        <div class="calledOne" v-for="item in 12" :key="item">
            <div class="calledOneLeft">
                <img src="https://images.shengws.com/201809182128111.png?imageView2/2/w/500/h/500/q/90" alt="">
                <div class="name">
                    <p>吴保龄</p>
                    <p>
                        <span class="nameTips">签到时间：07:00:00</span>
                        <span class="nameTips" v-if="index == 1">床位号：A区5号床</span>
                        <span class="nameTips" v-else>叫号时间：07:30:00</span>
                    </p>
                    <p>
                        <span class="nameTips">透前体重：59kg</span>
                        <span class="nameTips lastNameTips">透前血压：120/110mmHg</span>
                    </p>
                </div>
            </div>
            <div class="calledOneRight" v-if="index == 1">
                <img src="../../../assets/img/volume.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        index:Number
    },
    data(){
        return{

        }
    },
}
</script>


<style lang="scss" scoped>
.page_called{
    .calledOne{
        border: 1px #e5e5ee solid;
        padding: 9px 0;
        margin: 0 15px 15px 0;
        float: left;
        width: 360px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        .calledOneLeft{
            display: flex;
            img{
                width: 45px;
                height: 45px;
                border-radius: 50%;
                margin-right: 15px;
            }
            .name{
                >p:first-child{
                    font-size: 16px;
                    font-weight: bold;
                    color:#000;
                }
                >p:nth-of-type(2){
                    font-size: 12px;
                    color:#999999;
                    margin-top: 6px;
                }
                >p:nth-of-type(3){
                    font-size: 12px;
                    color:#999999;
                    margin-top: 3px;
                }
                .nameTips{
                    margin-right:10px;
                    display: inline-block;
                }
                
            }
            
        }
        .calledOneRight{
            img{
                width: 30px;
                margin-top: 8px;
            }
        }
    }
}
</style>