xc/pages/index/index.vue

<template>
	<!-- 首页 -->
	<view class="page">
		<image class="topBanner" src="../../static/index/topBanner.png" mode="scaleToFill"></image>
		<view class="content-list">
			<view class="item">
				<view class="flex item-user">
					<view class="item-left-user flex">
						<view class="user-pic">
							<image class="user-img" src="../../static/img/new.png" mode="scaleToFill"></image>
						</view>
						<view class="user-name-box">
							<view class="user-name">
								哈哈哈
							</view>
							<view class="user-money flex">
								<view class="tipImg">
									<image class="vipTip" src="../../static/index/icon01.png" mode="scaleToFill">
									</image>
								</view>
								<view class="money">
									3123123123
								</view>
							</view>
						</view>
					</view>
					<view class="item-rigt-user">
						<image class="item-right-vip" src="../../static/index/vip.png" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="item-user-model flex">
					<view class="model">
						<image class="model-image model1" src="../../static/index/model1.png" mode="scaleToFill"></image>
						<view class="model-name">
							能量
						</view>
					</view>
					<view class="model">
						<image class="model-image model2" src="../../static/index/model2.png" mode="scaleToFill"></image>
						<view class="model-name">
							飞船
						</view>
					</view>
					<view class="model">
						<image class="model-image model3" src="../../static/index/model3.png" mode="scaleToFill"></image>
						<view class="model-name">
							好友
						</view>
					</view>
				</view>

				<view class="flex function-type">
					<view class="function-block">
						<image class="type1" src="../../static/index/type2.png" mode=""></image>
					</view>
					<view class="function-block">
						<image class="type2" src="../../static/index/type1.png" mode=""></image>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		onLoad(options) {

		},
		onShow() {},
		methods: {

		}
	};
</script>
<style lang="scss">
	.page {
		background-image: linear-gradient(#5d34ff, #e0d8ff);
		min-height: calc(100vh - var(--window-bottom));
	}

	.topBanner {
		width: 750rpx;
		height: 900rpx;
	}

	.content-list {
		padding: 20rpx 30rpx ;
		background-color: #FFF;
		border-radius: 30rpx;
		margin: 0 30rpx;
		margin-top: 50rpx;
		line-height: 1;
		padding-bottom: 50rpx;
		.item{
			.item-left-user{
				align-items: flex-start;
				.user-name-box {
					padding-left: 10rpx;
					.user-money{
						.money{
							padding-left: 10rpx;
							font-weight: bold;
							font-size: 26rpx;
							color: #222222;
						}
					}
					.vipTip {
						width: 36rpx;
						height: 29rpx;
					}
					.user-name {
						font-weight: 800;
						font-size: 27rpx;
						color: #222222;
						padding-bottom: 20rpx;
					}
				
					
				}
				.user-pic{
					overflow: hidden;
					border-radius: 100rpx;
					width: 60rpx;
					height: 60rpx;
					.user-img {
						width: 100%;
						height: 100%;
					}
				}
			}
			.item-rigt-user{
				.item-right-vip{
					width: 210rpx;
					height: 95rpx;
				}
			}
			.item-user-model{
				padding-top: 30rpx;
				.model{
					.model-name{
						padding-top: 30rpx;
						text-align: center;
						font-weight: 500;
						font-size: 23rpx;
						color: #222222;
					}
					.model1{
						width: 121rpx;
						height: 131rpx;
					}
					.model2{
						width: 121rpx;
						height: 116rpx;
					}
					.model3{
						width: 145rpx;
						height: 122rpx;
					}
				}
			}
			.function-type{
				align-items: flex-end;
				margin-top: 30rpx;
				.function-block{
					.type1{
						width: 325rpx;
						height: 130rpx;
						margin-left: -10rpx;
					}
					.type2{
						width: 321rpx;
						height: 112rpx;
					}
				}
			}
		}
	}
</style>