MD_worker/pages/index/my.vue

<template>
    <view class="user" hover-class="navigator-hover">
        <view class="profile-photo">
            <up-image :show-loading="true" src="/static/image/user.png" width="120rpx" height="120rpx" />
        </view>
        <view class="user-info">
            <view class="user-name">用户名</view>
            <view class="user-phone">用户ID</view>
        </view>
    </view>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.user {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 40rpx;

    .profile-photo {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
    }

    .user-info {
        flex: 1;
        margin-left: 40rpx;
        padding-top: 10rpx;

        .user-name {
            line-height: 42rpx;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-size: 32rpx;
            color: #333333;
        }

        .user-phone {
            line-height: 38rpx;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-size: 28rpx;
            color: #999999;
            margin-top: 20rpx;
        }

    }
}
</style>