AiSkinMeasurementMp/pages/user/mine.vue

<template>
    <view class="mine">
        <!-- main -->
        <view class="main">
            <!-- header -->
            <view class="header">
                <view class="avatar">
                    <u-avatar :src="src" size="80"></u-avatar>
                </view>
                <view class="edit-mine">
                    <u-button shape="circle" :customStyle="{width: '280rpx', color: '#6049a9', borderColor:'#6049a9'}" @click="onEdit">编辑资料</u-button>
                </view>
            </view>

            <!-- numberinfo -->
            <view class="numberinfo">
                <view class="nickname">
                    <text>昵称：微信用户</text>
                    <u-icon name="woman" color="#2979ff" size="26"></u-icon>
                </view>
                <view class="phone">
                    <text>16698592316</text>
                </view>
                <view class="id-box">
                    <text>ID 1858708950943834113</text>
                    <u-icon name="file-text" color="#2979ff" size="35"></u-icon>
                </view>
            </view>
            <!-- actions -->
            <view class="actions">
                <u-grid :col="3" :border="false" >
                    <u-grid-item v-for="index in 4" :key="index" :customStyle="gridStyle">
                        <view class="button-item" style="background-color: #FFC0CB;">
                            <u-icon name="file-text" size="40" color="#fff"></u-icon>
                            <text class="button-text">个人资料</text>
                        </view>
                    </u-grid-item>
                </u-grid>
            </view>
        </view>

    </view>
</template>

<script>
export default {
    data() {
        return {
            src: require("../../static/logo.png"),
        }
    },
    computed: {
        gridStyle() {
            return {
                height: '240rpx', 
                padding: '15rpx 20rpx 15rpx 0', 
            }
        },
    },
    methods: {
        onEdit() {
           	uni.navigateTo({
        		url: '/pages/user/info',
        	})
        }
    }

}
</script>

<style scoped lang="scss">
    .mine {
        position: relative;
        height: 100vh;
        overflow: hidden;
        .main {
            padding: 40rpx;
            .header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 30rpx 0;
                .avatar {

                }
            }
            .numberinfo {
                .nickname {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    text {
                        font-size: 40rpx;
                        font-weight: bold;
                        margin: 20rpx 20rpx 20rpx 0;
                    }
                }
                .phone {
                    font-size: 28rpx;
                    margin: 10rpx 0;
                }
                .id-box {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    text {
                        font-size: 28rpx;
                        margin-right: 20rpx;
                    }
                }
            }
            .actions {
                margin-top: 20rpx;
                .button-item {
                    height: 100%;
                    width: 100%;
                    padding: 10rpx 0;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    flex-direction: column;
                    border-radius: 10rpx;
                    .button-text {
                        font-weight: bold;
                        font-size: 30rpx;
                        color: $uni-color-subtitle;
                    }
                }
            }
        }
    }
</style>