wxThird/pages/integral/integral.vue

<template>
	<view class="box">
		<view class="topBox">
			<view class="topCont">
				<view class="jfgz">
					<view class="jfgzTxt">积分规则</view>
					<img src="../../static/timg/jthei.png" alt="" class="jfjt">
				</view>
				<view class="kyjf">
					<view class="kyjfTitle">可用积分</view>
					<view class="kyjfCont">
						<view class="kyjfNum">79999</view>
						<view class="kyjfDq">333积分即将过期</view>
					</view>
				</view>
				
			</view>
			<view class="topBottom">
				
			</view>
		</view>
	</view>
</template>

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

<style scoped>
.box{
	background: #F4F5F7;
	min-height: 100vh;
}
.jfjt{
   width: 24rpx;height: 24rpx;margin-top: 12rpx;
}
.jfgz{
	display: flex;
	width: 150rpx;
	height: 48rpx;
	background: #FFF9F1 linear-gradient(90deg, #FCF0D9 0%, #FFFBF3 49%, #FFE5D3 100%);
	border-radius: 0px 2rpx 0px 26rpx;
	font-size: 24rpx;
	line-height: 48rpx;
	color: #573400;
	position: absolute;
	top: 0;
	right: 0;
}
.jfgzTxt{
	padding-left: 18rpx;
}
.topBox{
	width: 100%;
	height: 410rpx;
	background:#38394E;
	padding-top: 30rpx;
	position: relative;
}
.topCont{
	width: 702rpx;
	height: 200rpx;
	background: url('http://dmsphoto.66km.com.cn/thFiles/DCCDB197-4F64-4711-89C0-E5034B2F1788.png') no-repeat;
	background-size: 100% 100%;
	margin-left: 24rpx;
	position: relative;
	border-radius: 20rpx;
	overflow: hidden;
}
.topBottom{
	width: 750rpx;
	height: 180rpx;
	background: #FFFFFF;
	border-radius: 26rpx 26rpx 0px 0px;
	position: absolute;
	left: 0;
	bottom: 0;
}
.kyjf{
	padding-top: 46rpx;
	padding-left: 40rpx;
}
.kyjfTitle{
	color: #523509;font-size: 28rpx;
}
.kyjfNum{
	font-size: 60rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #523509;
	line-height: 84rpx;
}
.kyjfDq{
	width: 224rpx;
	height: 44rpx;
	background: linear-gradient(135deg, #FFC81B 0%, #FFA800 100%);
	border-radius: 22rpx 22rpx 22rpx 0px;
	text-align: center;
	color: #573400;
	line-height: 44rpx;
	font-size: 24rpx;
	margin-left:10rpx ;
	margin-top: 22rpx;
}
.kyjfCont{
	display: flex;
}
</style>