ydd_front/mer_uniapp/pages/user/index.vue

<template>
	<view>
		<!-- 状态栏高度 -->
		<view :style="{ height: `${statusBarHeight}px` }"></view>

		<!-- 导航栏 -->
		<view :style="{ height: `${navigationBarHeight}px`,lineHeight: `${navigationBarHeight}px`}" class="order-nav">
			北京大学校园送
		</view>

		<view style="background-color: #ffffff; border-radius: 23rpx;padding: 30rpx 20rpx 40rpx 20rpx;">

			<view style="display: flex;padding: 20rpx;">
				<view style="flex: 1;font-size: 21rpx;color: #999999;">
					<text style="margin-right: 14rpx;">绑定手机号：185-7033-6037</text>
					<image src="/static/img/ic-copy.png" style="width: 27rpx;height: 27rpx;vertical-align: middle;"></image>
				</view>
				
				<view style="flex: 1;text-align: right;color: #141414;font-size: 23rpx;font-weight: 600;">
					个人中心 >
				</view>
				
			</view>

			<view class="item-settled">
					<view style="flex: 1;">
						<image src="/static/img/ic-merchant-settled.png" style="width: 116rpx;height: 116rpx;"></image>
						<text style="margin-right: 14rpx;">商家入驻</text>
					</view>
					
					<view style="flex: 1;">
						
					</view>
			</view>

		</view>


	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	let app = getApp();
	export default {
		data() {
			return {
				statusBarHeight: app.globalData.statusBarHeight,
				navigationBarHeight: 0,
			}
		},
		onLoad(options) {
			let that = this;
			//首页数据加载
			// this.getIndexConfig();
			// #ifdef MP-WEIXIN
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			const custom = wx.getMenuButtonBoundingClientRect()
			// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.navigationBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2
			// console.log("导航栏高度："+this.globalData.navigationBarHeight)
			// #endif

		},
		methods: {},
	}
</script>

<style scoped>
	.order-nav {
		font-weight: 500;
		font-size: 35rpx;
		color: #FFFFFF;
		background-color: #FF6702;
		text-align: center;
	}

	.item-settled {
		background: linear-gradient(135deg, #FED0A7 0%, #FFF3E2 52%, #FAEDD3 100%);
		border-radius: 8rpx;
		border: 2rpx solid;
		border-image: linear-gradient(200deg, rgba(255, 220, 135, 1), rgba(255, 172, 33, 1), rgba(255, 201, 24, 1)) 2 2;
		padding: 40rpx;
	}
</style>