demingshangjia/pages/user/index.vue

<template>
    <view class="user">
        <view class="head" @click="toOthersPage('info')">
            <view class="info">
                <image></image>
                <view class="name">
                    <text>萨大赛</text>
                    <text>账号：123456789</text>
                    <text>个性签名：为梦努力</text>
                </view>
            </view>
            <image src="/static/image/user/1.png"></image>
        </view>
        <view class="nav" @click="toOthersPage('fans')">
			<text>我的粉丝</text>
			<image src="/static/image/user/1.png"></image>
		</view>
		<view class="nav" @click="toOthersPage('content')">
			<text>内容管理</text>
			<image src="/static/image/user/1.png"></image>
		</view>
		<view class="nav" @click="toOthersPage('complaint')">
			<text>骑手投诉</text>
			<image src="/static/image/user/1.png"></image>
		</view>
    </view>
</template>
<script>
export default {
	name:"user",
	methods: {
		toOthersPage(url) {
			uni.navigateTo({
				url: '/pages/user/' + url
			});
		}
	},
}
</script>
<style lang="scss" scoped>
.user{
    min-height: calc(100vh - var(--window-top));
    background: #ececec;
    .head{
        width: 100%;
        height: 220rpx;
        background-color: #FF780F;
        padding: 0 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .info{
            display: flex;
            align-items: center;
            
            >image{
                width: 110rpx;
                height: 110rpx;
                border-radius: 50%;
				background-color: #0f0;
            }
            .name{
                font-size: 24rpx;
                color: #fff;
                display: flex;
                flex-direction: column;
                margin-left: 26rpx;
                >text{
                    margin-top: 14rpx;
                }
                >text:first-child{
                    font-size: 28rpx;
                    margin-top: 0;
                }
            }

        }
        >image{
            width: 12rpx;
            height: 20rpx;
        }
    }
	.nav{
		width: 100%;
		height: 100rpx;
		display: flex;
		padding: 30rpx;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		margin-bottom: 2rpx;
		color:#333;
		background-color: #fff;
		>image{
			width: 13rpx;
			height: 25rpx;
		}
	}
}
</style>