great_distribution/pages/me/index.vue

<template>
	<view class="me-content" :style="{'--status-bar-': statusBarHeight}">
		<view class="me-content-info">
			<!-- 头部主要内容 开始 -->
			<view class="me-content-header">	
				<customNavbar 
				title="我的" 
				bgColor="#fff"
				:is-left="false"
				:contentStyle="{color: '#000'}"
				></customNavbar>
			</view>
			<!-- 头部主要内容 结束 -->
			
			<!-- userInfo内容 开始 -->
			
			<view class="me-content-userinfo">
				<view class="me-userinfo-info">
					<view><text>分销商名称：</text><text>张飞烤地瓜旅行社是发射点发射点发
					张飞烤地瓜旅行社是发射点发射点发张飞烤地瓜旅行社是发射点发射点发</text></view>
					<view><text>负责人：</text><text>关羽</text></view>
				</view>
			</view>
			<!-- userInfo内容 结束 -->
			
			<!-- tool内容 开始  -->
			<view class="me-content-tool">
				<view 
				class="me-tool-item"
				v-for="(item,index) in tool"
				:key="index"
				@click="navigateToFun(item)"
				>
					<image 
					class="me-tool-item-icon"
					:src="item.icon"></image>
					<text>{{ item.title }}</text>
					<view><u-icon name="arrow-right"></u-icon></view>
				</view>
			</view>
			<!-- tool内容 结束  -->
		</view>
	</view>
</template>

<script>
	import { navigateTo } from "@/utils/util.js"
	export default {
		data() {
			return {
				title: '这是我的',
				statusBarHeight: 0, // 状态栏安全距离
				tool: [ // 我的工具
					{ title: "邀请统计",icon: this.$commonConfig.staticUrl + 'me/yijian2.png', url: '/pages/invitationStatistics/index' },
					{ title: "余额提现",icon: this.$commonConfig.staticUrl + 'me/beifeng.png', url: '/pages/balance/index' },
					{ title: "我的推广码",icon: this.$commonConfig.staticUrl + 'me/yijian1.png', url: '' },
				]
			}
		},
		onLoad() {

		},
		onShow() {
			this.statusBarHeight = getApp().globalData.statusBarHeight
		},
		methods: {
			/**
			 * @author ygh
			 * @data 2023-12-20
			 */
			navigateToFun(item){
				navigateTo(item.url)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.me-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		--header-h: 90rpx;
		.me-content-info {
			width: 100%;
			box-sizing: border-box;
		}
	}
	/** 头部主要内容 开始 */
	.me-content-header {
		width: 100%;
		height: var(--header-h);
		box-sizing: border-box;
		::v-deep .u-search {
			padding: 0 30rpx !important;
		}
		::v-deep .u-search__action {
			color: #fff !important;
		}
	}
	/** 头部主要内容 结束  **/
	
	/** userInfo内容 开始 */
	.me-content-userinfo {
		width: 100%;
		padding: 24rpx;
		box-sizing: border-box;
		.me-userinfo-info {
			width: 100%;
			height: 200rpx;
			box-sizing: border-box;
			background: linear-gradient(to bottom, rgba(238, 12, 12, 1) 0%, rgba(243, 157, 159, 1) 100%);
			border-radius: 20rpx;
			box-shadow: 0rpx 0 20rpx 2rpx rgba(205, 205, 205, 0.50);
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			color: #fff;
			font-size: 28rpx;
			font-family: SourceHanSansCN, SourceHanSansCN;
			padding: 0 50rpx;
			>view:nth-child(1) {
				display: flex;
				font-weight: 600;
				width: 100%;
				text:nth-child(1) {
					width: 168rpx;
					flex-shrink: 0;
				}
				text:nth-child(2) {
					width: calc( 100% - 168rpx );
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2; /* 设置最大显示行数 */
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
				}
			}
			>view:nth-child(2) {
				width: 100%;
				display: flex;
				margin-top: 20rpx;
				text:nth-child(1) {
					width: 112rpx;
					flex-shrink: 0;
				}
				text:nth-child(2) {
					width: calc( 100% - 112rpx );
				}
			}
		}
	}
	/** userInfo内容 结束  **/
	
	/** tool内容 开始  */
	.me-content-tool {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 30rpx 0;
		.me-tool-item {
			width: 100%;
			background: #FBFBFB;
			border-radius: 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: rgba(54, 54, 54, 1);
			font-size: 28rpx;
			padding: 12rpx 10rpx;
			margin-bottom: 20rpx;
			.me-tool-item-icon {
				width: 54rpx;
				height: 56rpx;
				flex-shrink: 0;
			}
			>text {
				width: 100%;
				padding-left: 20rpx;
				box-sizing: border-box;
			}
			
		}
	}
	/** tool内容 结束  */
</style>