nurseWeChatAppletUI/pages/integral/integral.vue

<template>
	<view class="app">
		<view class="vacancies">
			<image src="../../static/jifenbeij.png" mode=""></image>
			<view class="lefttext">
				积分余额
			</view>
			<view class="righttext">
				<image src="../../static/jfgz.png" mode=""></image>
				<view class="">
					积分规则
				</view>
			</view>
			<view class="title">
				1000
			</view>
			<view class="centertext">
				20积分将于2022.01.01过期
			</view>
			<view class="bottombutton" @tap='gainshow=true'>
				获取积分
			</view>
		</view>
		<view class="titles">
			积分兑换
		</view>
		<view class="items">
			<view class="item">
				<image src="../../static/kefu.png" mode=""></image>
				<view class="title">
					维生素1盒
				</view>
				<view class="jifen">
					需使用1000积分兑换
				</view>
				<view class="btn">
					立即兑换
				</view>
			</view>
		</view>
		<u-mask :show="gainshow" @tap="gainshow = false">
			<view class="mask" @click.stop="">
				<view class="title">
					获取方式
				</view>
				<view class="maskitems">
					<view class="item">
						<image src="../../static/qiandao.png" mode=""></image>
						<view class="titletext">
							累计签到24天
						</view>
						<view class="text">
							+30积分
						</view>
						<view class="btn">
							签到
						</view>
					</view>
					<view class="item" style="background-color: #F44B2F;">
						<image src="../../static/yaoqing.png" mode=""></image>
						<view class="titletext">
							每邀请1位好友
						</view>
						<view class="text">
							＋20积分
						</view>
						<view class="btn" style="color: #F44B2F;">
							去完成
						</view>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				gainshow: false,
			};
		},
		methods: {},
	}
</script>

<style lang="scss">
	.app {
		.mask {
			position: fixed;
			bottom: 0;
			height: 600rpx;
			width: 100%;
			background-color: #fff;

			.maskitems {
				color: #fff;
				width: 90%;
				margin:60rpx auto 0;
				.item {
					background: #557BC2;
					width: 100%;
					margin: 0 auto 20rpx;
					height: 150rpx;
					position: relative;
					font-size: 26rpx;

					.btn {
						text-align: center;
						width: 121rpx;
						height: 44rpx;
						background: #FFFFFF;
						border-radius: 22rpx;
						position: absolute;
						right: 30rpx;
						top: 58rpx;
						line-height: 44rpx;
						font-size: 22rpx;
						color: #557BC2;
					}

					.text {
						position: absolute;
						left: 150rpx;
						top: 90rpx;
					}

					.titletext {
						position: absolute;
						left: 150rpx;
						top: 48rpx;
					}

					image {
						margin: 49rpx 0 0 43rpx;
						width: 66rpx;
						height: 66rpx;
					}
				}
			}

			.title {
				padding-top: 10rpx;
				font-size: 38rpx;
				font-weight: 600;
				text-align: center;
				width: 100%;
			}
		}

		.items {
			margin-top: 30rpx;

			.item {
				width: 92%;
				margin: 0 auto 12rpx;
				background-color: #FFFFFF;
				height: 220rpx;
				position: relative;

				.btn {
					position: absolute;
					right: 40rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 139rpx;
					height: 44rpx;
					background: #557BC2;
					border-radius: 22rpx;
					color: #fff;
					text-align: center;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 44rpx;
				}

				.jifen {
					position: absolute;
					left: 220rpx;
					top: 140rpx;
					font-size: 26rpx;
					color: #666666;
				}

				.title {
					font-size: 34rpx;
					font-weight: 600;
					position: absolute;
					left: 220rpx;
					top: 60rpx;
				}

				image {
					margin: 15rpx 0 0 15rpx;
					width: 180rpx;
					height: 180rpx;
				}
			}
		}

		.titles {
			margin: 38rpx 0 0 31rpx;
			font-size: 30rpx;
		}

		.vacancies {
			width: 92%;
			height: 330rpx;
			margin: 0 auto;
			position: relative;
			color: #fff;

			.bottombutton {
				position: absolute;
				top: 230rpx;
				left: 50%;
				font-size: 32rpx;
				color: #557BC2;
				line-height: 72rpx;
				text-align: center;
				transform: translateX(-50%);
				width: 440rpx;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 36rpx;
			}

			.centertext {
				position: absolute;
				top: 160rpx;
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				opacity: 0.8;
			}

			.title {
				position: absolute;
				left: 50%;
				font-size: 60rpx;
				top: 70rpx;
				transform: translateX(-50%);
			}

			.righttext {
				position: absolute;
				top: 32rpx;
				right: 31rpx;
				font-size: 24rpx;
				line-height: 28rpx;
				width: 130rpx;
				height: 28rpx;

				image {
					position: absolute;
					left: 0;
					width: 28rpx;
					height: 28rpx;
				}

				view {
					opacity: 0.6;
					position: absolute;
					right: 0;
				}
			}

			.lefttext {
				position: absolute;
				top: 32rpx;
				left: 33rpx;
				font-size: 30rpx;
				line-height: 33rpx;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>