相关代码：

<template>
    <div class="top">
        <div class="top__header">
            <img class="top__header__editor" src="../page/images/editor.png">
            <img  class="top__header__pic" src="../page/images/avatar.jpg">
        </div>
        <div class="top__contents">
            <div class="top__contents__name">
                热心市民李先生
                <span class="top__contents__name__label">
                    <img  class="top__contents__name__label__img" src="../page/images/star.png" >
                    <b class="top__contents__name__label__b">16</b>
                </span> 
            </div>
            <div class="top__contents__num">ID: 1069643013</div>
            <div class="top__list">
                <div class="top__list__mm">
                    <div class="top__list__mm-name">红包</div>
                     <div class="top__list__mm-num">218</div>
                </div>
                <div class="top__list__mm">
                    <div class="top__list__mm-name">优惠券</div>
                     <div class="top__list__mm-num">12张</div>
                </div>
                <div class="top__list__mm">
                    <div class="top__list__mm-name">鲜豆</div>
                     <div class="top__list__mm-num">88</div>
                </div>
                <div class="top__list__mm">
                    <div class="top__list__mm-name">白条</div>
                     <div class="top__list__mm-num">1000</div>
                </div>
            </div>
        </div>
    </div>
    <div class="info">
        <div class="info__money">
            <img class="info__img info__img-img1" src="../page/images/money.png">
            <span class="info__text">我的钱包</span>
            <span class="info__icon iconfont">&#xe623;</span>
        </div>
        <div class="info__address">
            <img class="info__img info__img-img2" src="../page/images/address.png">
            <span class="info__text">我的地址</span>
            <span class="info__icon iconfont">&#xe623;</span>  
        </div>
        <div class="info__help">
            <img class="info__img info__img-img3" src="../page/images/help.png">
            <span class="info__text">客服与帮助</span>
            <span class="info__icon iconfont">&#xe623;</span>
        </div>
    </div>
    <DockerName :currentIndex="3"/>
</template>
<script>
import DockerName from '../../components/Docker.vue'
export default {
    name:'MyPage',
    components:{DockerName}
}
</script>
<style lang="scss" scoped>
.top{
    position: relative;
    height:2.5rem;
    background-image: linear-gradient(239deg, #3A6FF3 0%, #50C7FB 100%);
    background-size: 100% 2.5rem;
    background-repeat: no-repeat;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
    &__header{
        &__editor{
            position: absolute;
            right: .2rem;
            top: .57rem;
            height: 0.2rem;
        }
        &__pic{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            height: 0.94rem;
            border-radius: 50%;
            z-index: 1;
        }
    }
    // 样式不能应用于PC端,不知道怎么修改成适应PC端的样式
    &__contents{
            position: absolute;
            left: .18rem;
            top: 1.08rem;
            width: 3.39rem;
            background: #FFFFFF;
            box-shadow: 0 .08rem .16rem 0 rgba(0,0,0,0.08);
            border-radius: .08rem;
            padding-top: .61rem;
            &__name{
                position: relative;
                margin-top: .12rem;
                font-size: .24rem;
                color: #262628;
                text-align: center;
                line-height: .36rem;
                &__label{
                    position: absolute;
                    margin:.1rem 0 0 .16rem;
                    width: 0.35rem;
                    height: 0.15rem;
                    background-image: linear-gradient(180deg, #BEE700 0%, #8ACA00 100%);
                    border-radius: 1rem;
                    &__img{
                        position: absolute;
                        top: .04rem;
                        left: .05rem;
                        height: 0.07rem;
                    }
                    &__b{
                        position: absolute;
                        bottom: -.1rem;
                        right: .06rem;
                        font-size: .1rem;
                        color: #FFFFFF;
                    }
                }
            }
            &__num{
                font-size: 14px;
                color: #C1C0C9;
                text-align: center;
            }
    }
    &__list{
        display: flex;
        margin: .16rem;
        &__mm{
            flex: 1;
            border-top: 1px solid  #F1F1F1;
            &-name{
                font-size: 12px;
                color: #C1C0C9;
                text-align: center;
                margin-top: .16rem;
                margin-bottom: .03rem;
            }
            &-num{
                font-size: 20px;
                color: #262628;
                text-align: center;
            }
        }
    }
}
.info{
    position: absolute;
    left: 0;
    bottom: 24%;
    width: 3.39rem;
    height: 1.46rem;
    margin: .16rem .18rem;
    background: #FFFFFF;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.08);
    border-radius: 8px;
    &__img{
        height: 0.22rem;
        border-radius: .08rem;
        margin: .21rem .12rem 0 .21rem;
        &-img1{
            background: #ED4A47;
        }
        &-img2{
            background: #32C5FF;
        }
        &-img3{
            background: rgba(144,19,254,0.92);
        }
    }
    &__icon{
        position: absolute;
        right: .16rem;
        margin-top: .16rem;
        display: inline-block;
        transform: rotate(180deg);
        color: #C2C4CA;
        font-size: .14rem;
    }
    &__text{
        position: absolute;
        margin-top: .25rem;
    }
}
</style>