MinNan/user_fenbao/jiFen/jiFen.vue

<template>
	<view class="body" style="background-color: #efefef">
		<u-navbar :autoBack="true" title="积分商城" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>

		<view class="box_1">
			<view class="group_10">
				<view class="section_3">
					<view class="block_1">
						<view class="image-text_5">
							<uni-icons type="help" size="16"></uni-icons>
							<text lines="1" class="text-group_1">规则</text>
						</view>
					</view>
					<view class="text-wrapper_5">
						<text lines="1" class="text_2">我的积分：</text>
					</view>
					<view class="block_2">
						<view class="image-text_6"></view>
						<view class="text-wrapper_2">
							<text lines="1" class="text_3">获取积分</text>
						</view>
					</view>
				</view>
				<view class="box_4">
					<image src="https://huli-app.wenlvti.net/app_static/minnanhun/image/jf_sc.png" class="image_4"></image>
				</view>
				<view class="list_2">
					<view class="list-items_1-1">
						<view class="group_3-1"></view>
						<view class="group_11-1">
							<text lines="1" class="text_4-1">完成学习打卡</text>
							<view class="image-text_7-1">
								<text lines="1" class="text-group_3-1">+5</text>
							</view>
						</view>
						<view class="group_12-1">
							<text lines="1" class="text_5-1">0/1</text>
							<view class="text-wrapper_3-1">
								<text lines="1" class="text_6-1">去分享</text>
							</view>
						</view>
					</view>
					<view class="list-items_1-1">
						<view class="group_3-1"></view>
						<view class="group_11-1">
							<text lines="1" class="text_4-1">分享打卡</text>
							<view class="image-text_7-1">
								<text lines="1" class="text-group_3-1">+5</text>
							</view>
						</view>
						<view class="group_12-1">
							<text lines="1" class="text_5-1">0/1</text>
							<view class="text-wrapper_3-1">
								<text lines="1" class="text_6-1">去分享</text>
							</view>
						</view>
					</view>
					<view class="list-items_1-1">
						<view class="group_3-1"></view>
						<view class="group_11-1">
							<text lines="1" class="text_4-1">邀请好友</text>
							<view class="image-text_7-1">
								<text lines="1" class="text-group_3-1">+5</text>
							</view>
						</view>
						<view class="group_12-1">
							<text lines="1" class="text_5-1">0/1</text>
							<view class="text-wrapper_3-1">
								<text lines="1" class="text_6-1">去分享</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>

<style>
.box_1 {
	width: 749rpx;
	margin-top: 7rpx;
	display: flex;
	flex-direction: column;
}
.group_10 {
	width: 749rpx;
	display: flex;
	flex-direction: column;
}

.section_3 {
	height: 302rpx;
	background: url(https://huli-app.wenlvti.net/app_static/minnanhun/image/jf_bj.png) 100% no-repeat;
	background-size: 100% 100%;
	width: 749rpx;
	display: flex;
	flex-direction: column;
}

.block_1 {
	width: 73rpx;
	height: 23rpx;
	display: flex;
	flex-direction: row;
	margin: 30rpx 0 0 624rpx;
}

.image-text_5 {
	width: 73rpx;
	height: 23rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	line-height: 20rpx;
}

.text-group_1 {
	width: 45rpx;
	height: 23rpx;
	overflow-wrap: break-word;
	color: rgba(195, 160, 123, 1);
	font-size: 24rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
}

.text-wrapper_5 {
	width: 182rpx;
	height: 40rpx;
	display: flex;
	flex-direction: row;
	margin: 4rpx 0 0 51rpx;
}

.text_2 {
	width: 182rpx;
	height: 40rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 42rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 42rpx;
}

.block_2 {
	width: 651rpx;
	height: 73rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 5rpx 0 127rpx 48rpx;
}

.image-text_6 {
	width: 155rpx;
	height: 53rpx;
	margin-top: 20rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
}

.text-group_2 {
	width: 113rpx;
	height: 53rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 68rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 68rpx;
}

.text-wrapper_2 {
	width: 197rpx;
	height: 49rpx;
	background: linear-gradient(193deg, #ffffff, #ff930e, #ff940e);
	border-radius: 25rpx;
}

.text_3 {
	width: 119rpx;
	height: 28rpx;
	color: rgba(255, 255, 255, 1);
	font-size: 30rpx;
	white-space: nowrap;
	line-height: 45rpx;
	margin: 11rpx 0 0 39rpx;
}

.box_4 {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 20rpx;
	height: 197rpx;
	display: flex;
	flex-direction: column;
	width: 686rpx;
	margin: 31rpx 0 0 31rpx;
}

.image_4 {
	width: 686rpx;
	height: 197rpx;
}

.list_2 {
	width: 686rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 31rpx 0 31rpx 31rpx;
}

.list-items_1-1 {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 20rpx;
	width: 686rpx;
	height: 150rpx;
	margin-bottom: 30rpx;
	flex-direction: row;
	display: flex;
}

.group_3-1 {
	border-radius: 50%;
	width: 96rpx;
	height: 96rpx;
	display: flex;
	flex-direction: column;
	margin: 27rpx 0 0 18rpx;
	background: rgba(255, 97, 95, 1);
}

.group_11-1 {
	width: 178rpx;
	height: 76rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 46rpx 0 0 24rpx;
}

.text_4-1 {
	width: 178rpx;
	height: 29rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 30rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 30rpx;
}

.image-text_7-1 {
	width: 63rpx;
	height: 23rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 24rpx 0 0 2rpx;
}

.text-group_3-1 {
	width: 32rpx;
	height: 23rpx;
	overflow-wrap: break-word;
	color: rgba(202, 86, 66, 1);
	font-size: 30rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 30rpx;
}

.group_12-1 {
	width: 130rpx;
	height: 85rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 32rpx 19rpx 0 221rpx;
}

.text_5-1 {
	width: 33rpx;
	height: 24rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 24rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin-left: 95rpx;
}

.text-wrapper_3-1 {
	border-radius: 10rpx;
	height: 45rpx;
	border: 1px solid rgba(202, 86, 66, 1);
	margin-top: 16rpx;
	display: flex;
	flex-direction: column;
	width: 130rpx;
	background: rgba(202, 86, 66, 1);
}

.text_6-1 {
	width: 94rpx;
	height: 23rpx;
	font-size: 24rpx;
	white-space: nowrap;
	line-height: 24rpx;
	margin: 10rpx 0 0 30rpx;
	color: rgba(255, 255, 255, 1);
}
</style>