bnyer-cloud-hub/pages/userInfo/userInfo.vue

<template>
	<view class="container">
		<view class="top">
			<uni-notice-bar show-get-more show-icon more-text="查看更多" text="年末大礼：uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线！"
				@getmore="getMore" />
			<uni-notice-bar show-icon scrollable
				text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
		</view>
		<view class="middle">
			<uni-section title="我的資金" type="line" padding>
				<text>錢包餘額</text>
			</uni-section>
		</view>
		<view class="foot">
			<uni-section title="更多服務" type="line" padding>
						<uni-grid :column="4" :highlight="true" @change="change">
							<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
								<view class="grid-item-box" style="background-color: #fff;" >
									<uni-icons type="image" :size="30" color="#777" />
									<text class="text">{{item}}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</uni-section>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:['美團外賣','支付助手','廣告助手','上傳圖片','消息通知','我的信息','我的短信','我的頭像']
			}
		},
		methods: {
			change(e) {
				// this.index = e.detail.index
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++

				uni.showToast({
					title: `点击第${index+1}个宫格`,
					icon: 'none'
				})
			},
		},
	}
</script>

<style lang="scss">
	.middle {
		margin-top: 80px;
	}

	.foot {
		margin-top: 80px;
	}

	// .container {
	// 	.top {
	// 		width: 100vw;

	// 		image {
	// 			width: 100vw;
	// 			height: 400rpx;
	// 		}

	// 		.uni-searchbar {
	// 			border: 1px solid #11A8FD;
	// 			margin: 0 40rpx;
	// 			border-radius: 16rpx;
	// 			padding: 0;

	// 			.uni-searchbar__box {
	// 				padding: 0;
	// 				border-radius: 16rpx !important;
	// 			}
	// 		}

	// 		>text {
	// 			font-weight: bold;
	// 			font-size: 14px;
	// 			display: block;
	// 			text-align: center;
	// 			padding-top: 40rpx;
	// 			padding-bottom: 20rpx;
	// 		}

	// 		.user-list {
	// 			display: flex;
	// 			justify-content: flex-start;
	// 			align-items: center;
	// 			overflow-x: auto;

	// 			.user-list-box {
	// 				width: 140rpx;
	// 				padding: 20rpx;
	// 				text-align: center;

	// 				image {
	// 					width: 100rpx;
	// 					height: 100rpx;
	// 					border-radius: 100rpx;
	// 				}

	// 				text {
	// 					font-size: 24rpx;
	// 					color: #1E1E1E;
	// 					text-align: center;
	// 				}
	// 			}
	// 		}
	// 	}

	// 	.middle {
	// 		text-align: center;
	// 		height: calc(100vh - 248rpx);
	// 		padding-top: 40rpx;

	// 		text {
	// 			font-weight: bold;
	// 			font-size: 14px;
	// 			display: block;
	// 		}

	// 		image {
	// 			width: 40rpx;
	// 			height: 40rpx;
	// 		}
	// 	}
	// }
	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
</style>