<template>
    <div class="info">
        <!-- 左侧头像 -->
        <div class="info-profile">
            <img :src="profileImage" alt="">
        </div>
        <!-- 右侧个人信息 -->
        <div class="info-detail">
            <div class="info-detail-name">
                {{profileName}}
            </div>
            <div class="info-detail-others">自<span>{{date}}</span>起&nbsp;&nbsp;您与云鹊医相识已经<span>{{days}}</span>天啦                      
            </div>
        </div>
        <!-- arrow -->
        <div class="arrow-right">
            <img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/arrowRight.png" alt="">
        </div>
    </div>
</template>
<script>
export default {
    name:'PersonalInformation',
    props:{
            profileImage:{
                type:String,
                default:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png'
            },
            profileName:{
                type:String,
                default:'你的名字'
            },
            date:{
                type:String,
                default:'2018.10.1'
            },
            days:{
                type:Number,
                default:343
            }
        
        },
}
</script>

<style lang="scss" scoped>
@import 'src/style/mixin';
    .info{
        display:flex;
        display:-webkit-flex;
        flex-direction:row;
        justify-content: center;
        // position: absolute;
        // top:px2rem(80px);
        width:px2rem(345px);
        height:px2rem(70px);
        background-color: $fc;
        border-radius:px2rem(3px);
        box-shadow: 0 px2rem(1px) px2rem(11px) 0 rgba(21,138,123,0.1);
    }
    .info-profile {
        margin-right:px2rem(5px);
        display:flex;
        display:-webkit-flex;
        flex-direction: row;
        align-items:center;
    }
    .info-profile img{
        width:px2rem(40px);
        height:px2rem(40px);
        border-radius:px2rem(20px);
    }
    .info-detail{
        display:flex;
        display:-webkit-flex;
        flex-direction:column;
        justify-content: center;
        width:px2rem(260px);

    }
    .info-detail .info-detail-name{
        font-size:px2rem(15px);
        font-weight:500;
        // margin-bottom:px2rem(3px);
        text-align:left;
    }
    .info-detail .info-detail-others{
        height:px2rem(13px);
        line-height:px2rem(13px);
        font-size:px2rem(13px);
        font-weight:400;
        margin-top:px2rem(10px);
        color:#999;
        span{
            color:#999;
        }
    }
    
    .arrow-right{
        margin-left:px2rem(5px);
    }
    .arrow-right img{
        width:px2rem(20px);
        height:px2rem(20px);

    }
</style>


