bike/page_vip/vip_index.vue

<template>
	<view class="page">

		<view class="fixed">
			<u-navbar title=" " :border-bottom="false" :background="background" title-color='#fff' title-size='36'
				back-icon-color='#fff' height='45'></u-navbar>
		</view>
		<image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/u3NgziRzuV79XdIE8cCn" mode=""></image>
	
		<view class="vipcard">
			<view class="card_top">
				<view class="name">
					17795402553
				</view>
				<view class="type">
					未开通
				</view>
			</view>
			<view class="card_bot">
				<view class="txts">
					开通立享超值会员特权
				</view>
				<view class="topage">
					购买记录 >
				</view>
			</view>
		</view>
		<image class="mc" src="https://lxnapi.ccttiot.com/bike/img/static/uCIpavkHbM18al7gpxH8" mode=""></image>
		<view class="cont_box">

			<view class="cont_li" v-for="item in 4" :key="item">
				<view class="tit">
					月卡
				</view>
				<view class="money">
					￥39.9
				</view>
				<view class="tips" style="text-decoration: line-through; ">
					￥59.9
				</view>
				<view class="tips">
					立省￥20
				</view>
			</view>
		</view>
		<view class="txt">
			该卡只能用于抵扣骑行费用，不能抵扣调度费、预约费等费用。 如您产生调度费、预约费等费用，需另支付差额。
		</view>
		<view class="pay_btn">
			￥39.9立即开通
		</view>
		<view class="tipss">
			更多优惠
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			
			return {
				bgc: {
					backgroundColor: '#fff'
				},
				sn: '',
				istrue: false
			}
		},

		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.page {
		width: 750rpx;

		.fixed {
			z-index: 999;
			position: fixed;
			top: 0;
		}
		.tipss{
			margin-left: 40rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #3D3D3D;
		}
		.vipcard {
			padding: 36rpx ;
			position: fixed;
			top: 428rpx;
			left: 38rpx;
			width: 680rpx;
			height: 244rpx;
			z-index: 1;
			background-image: url('https://lxnapi.ccttiot.com/bike/img/static/u78FEc5oHRKzdvopQpZE');
			background-size: cover;
			/* 背景图片等比缩放以覆盖整个容器 */
			background-position: center;
			/* 背景图片居中显示 */
			background-repeat: no-repeat;
			.card_top{
				
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				.name{
					font-weight: 500;
					font-size: 44rpx;
					color: #B07C1E;
				}
				.type{
					margin-left: 30rpx;
					padding: 4rpx 18rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #B07C1E;
					border-radius: 35rpx 35rpx 35rpx 35rpx;
					border: 1rpx solid #B07C1E;
				}
			}
			.card_bot{
				margin-top: 20rpx;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				.txts{
					font-weight: 400;
					font-size: 28rpx;
					color: #B07C1E;
				}
				.topage{
					margin-left: auto;
					font-weight: 400;
					font-size: 28rpx;
					color: #B07C1E;
				}
			}
			
		}
		.pay_btn{
			
			display: flex;
			align-items: center;
			justify-content: center;	
			margin: 20rpx auto ;
			width: 680rpx;
			height: 104rpx;
			background: linear-gradient( 90deg, rgba(255,201,87,0.84) 0%, rgba(255,224,158,0.58) 100%);
			border-radius: 58rpx 58rpx 58rpx 58rpx;
			font-weight: 500;
			font-size: 44rpx;
			color: #B07C1E;
			
		}
		.backimg {
			position: fixed;
			width: 750rpx;
			height: 670rpx;
			top: 0;
			left: 0;
			z-index: -1; // 确保背景图片在所有内容之下
		}
		.txt{
			margin: 56rpx 48rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #64B6A7;
		}
		.cont_box {
			display: flex;
			flex-wrap: nowrap;
			padding: 0 38rpx;
			margin-top: 690rpx;
			z-index: 10;
			overflow-x: auto; // 允许横向滚动
			white-space: nowrap; // 保持内容不换行
			-webkit-overflow-scrolling: touch; // 使滚动更流畅

			// 隐藏横向滚动条
			::-webkit-scrollbar {
				display: none; // 针对 WebKit 浏览器 (如 Safari 和 Chrome)
				height: 0; // 设定横向滚动条高度为 0
			}

			scrollbar-width: none; // 针对 Firefox
			-ms-overflow-style: none; // 针对 Internet Explorer 和 Edge

			.cont_li {
				width: 218rpx;
				height: 256rpx;
				background: rgba(255, 224, 158, 0.15) #FFFFFF;
				border-radius: 20rpx;
				border: 1rpx solid rgba(176, 124, 30, 0.56);
				z-index: 10;
				flex-shrink: 0; // 防止子元素缩小
				margin-right: 20rpx; // 子元素之间的间距
				.tit{
					width: 100%;
					text-align: center;
					font-weight: 500;
					font-size: 32rpx;
					color: #B07C1E;
				}
				.money{
					width: 100%;
					text-align: center;
					margin-top: 20rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #E46666;
				}
				.tips{
					margin-top: 20rpx;
					width: 100%;
					text-align: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #979797;
				}
			}
		}

		.cont_box::-webkit-scrollbar {
			display: none;
		}

		

		.mc {
			position: fixed;
			top: 611rpx;
			left: 0rpx;
			width: 750rpx;
			height: 107.29rpx;
			z-index: 2;
		}
	}
</style>