bike/page_user/my.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>

		<view class="backimg-container">
					<image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/uJVTiExwVDJJzYywmoLc"
						mode="aspectFit" v-if="deptId == 101"></image>
					<image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/uvRt04OhPwHf2MRkU6mk"
						mode="aspectFit" v-if="deptId == 100"></image>
				</view>
		<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
		<view class="statusBars" :style="{ height: navBarHeight + 'px' }"></view>
		<view class="topbg" style="z-index: 10;position: relative;">
			<view class="topbox">
				<view class="info">
					<image v-if="info.avatar != ''" :src='info.avatar' mode=""></image>
					<image v-if="info.avatar == '' && deptId == 100"
						src="https://lxnapi.ccttiot.com/bike/img/static/uSRzzLXhnbnWLB8jMKmr" mode=""></image>
					<image v-if="info.avatar == '' && deptId == 101"
						src="https://lxnapi.ccttiot.com/bike/img/static/uP9vN4Vht0B2bd10Sy60" mode=""></image>

					<view class="cont">
						<view class="name" v-if="info.realName != null">
							{{ maskedName }}
						</view>
						<view class="name" v-if="info.realName == null">
							未实名
						</view>
						<view class="phone">
							{{ maskedPhoneNumber }}
						</view>

					</view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/un6Wi8CefEjy04qzvn67" mode=""
						style="margin-right: 40rpx;" v-if="hasMenuPermission('车辆绑定')" @click="topage(12)"></image>
				</view>
			</view>

			<view class="btnbg" v-if="false">
				<view class="btnbox">
					<view class="btncard">
						<view class="card_li" @click="topage(1)" v-if="areaInfo.deposit != 0">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/u3ILM6aE0MdFo3ZKiYPH" mode="">

								</image>
								<view class="text">
									押金
								</view>
								<view class="tip" v-if="info.balance == null">
									未充值
								</view>
							</view>
							<view class="iconfont icon-xiangyou1">

							</view>
						</view>
						<view class="card_li" @click="topage(2)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/u4Y4UAai9GLSaCBMMIsv" mode="">

								</image>
								<view class="text">
									我的订单
								</view>

							</view>
							<view class="iconfont icon-xiangyou1">

							</view>
						</view>
						<view class="card_li" @click="topage(3)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/u245BAqGOvTbYYGXJcrC" mode="">
								</image>
								<view class="text">
									问题上报记录
								</view>

							</view>
							<view class="iconfont icon-xiangyou1">

							</view>
						</view>
						<view class="card_li" @click="topage(4)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/ufD1uFe0pknx00weXJaU" mode="">
								</image>
								<view class="text">
									用车指南
								</view>

							</view>
							<view class="iconfont icon-xiangyou1">

							</view>
						</view>
						<!-- <view class="card_li" style="border-bottom:2rpx solid #fff ;" @click="topage(5)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/uJFhEFoioikjCQqqWW3c" mode=""></image>
								<view class="text">
									计费规则
								</view>
								
							</view>
							<view class="iconfont icon-xiangyou1" >
								
							</view>
						</view> -->
						<view class="card_li" @click="topage(10)">
							<view class="card_left">
								<image src="https://lxnapi.ccttiot.com/bike/img/static/uk7i80QWz02cAfbbC518" mode="">
								</image>
								<view class="text">
									客户服务
								</view>

							</view>
							<view class="iconfont icon-xiangyou1">

							</view>
						</view>
						<view class="card_li" @click="topage(8)" v-if="info.role == 3 || info.role == 2">
							<view class="card_left">
								<image src="https://lxnapi.ccttiot.com/bike/img/static/unIGXFEhvTgtXVcfPH33" mode="">
								</image>
								<view class="text">
									维护入口
								</view>

							</view>
							<view class="iconfont icon-xiangyou1">

							</view>
						</view>
						<view class="card_li" @click="topage(9)" v-if="info.role == 3 || info.role == 9">
							<view class="card_left">
								<image src="https://lxnapi.ccttiot.com/bike/img/static/unIGXFEhvTgtXVcfPH33" mode="">
								</image>
								<view class="text">
									管理入口
								</view>

							</view>
							<view class="iconfont icon-xiangyou1">

							</view>
						</view>
					</view>
					<view class="btncard" style="margin-top: 36rpx;" v-if="false">
						<view class="card_li" @click="topage(5)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/utp8xohLmuvcTiYZdGCL" mode="">
								</image>
								<view class="text">
									用户协议
								</view>

							</view>
							<view class="iconfont icon-xiangyou1">

							</view>
						</view>
						<view class="card_li" @click="topage(6)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/um7bn51NCkfnuQbP0toj" mode="">
								</image>
								<view class="text">
									隐私政策
								</view>

							</view>
							<view class="iconfont icon-xiangyou1">

							</view>
						</view>

						<view class="card_li" style="border-bottom:2rpx solid #fff ;" @click="topage(7)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/uJ1TRgb6xURsKZo5GUj8" mode="">
								</image>
								<view class="text">
									关于我们
								</view>

							</view>
							<view class="iconfont icon-xiangyou1">

							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="tocont">
			<view class="cont_li" @click="topage(1)" v-if="areaInfo.deposit != 0">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uYfTj4a3NkSNY0AqYHFc" mode="" v-if="deptId == 100">
				</image>
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uixPe8LlgKO7aUauIPVG" mode="" v-else
					style="width:59.46rpx;height: 49.87rpx;"></image>
				<view class="txt">
					押金
				</view>
			</view>
			<view class="cont_li" @click="topage(11)">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/unrltNyYYRXUutaqtuJY" mode="" v-if="deptId == 100">
				</image>
				<image src="https://lxnapi.ccttiot.com/bike/img/static/ujxTS92ZiZolG2CimtTF" mode="" v-else
					style="width:69.05rpx;height: 44.12rpx;"></image>

				<view class="txt">
					实名认证
				</view>
			</view>
			<view class="cont_li" @click="topage(4)">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/ucR0pDCg1vDshatphlUb" mode="" v-if="deptId == 100">
				</image>
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uRRKE06XlWBjxhjBuGbE" mode="" v-else
					style="width:47.95rpx;height: 49.87rpx;"></image>
				<view class="txt">
					用车指南
				</view>
			</view>
			<view class="cont_li" @click="topage(10)">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uLHRXFuIPhMy0EDgPdVr" mode="" v-if="deptId == 100">
				</image>
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uUsAb1dSN92FkJmlT40Q" mode="" v-else
					style="width: 30.69rpx;height: 44.12rpx;"></image>
				<view class="txt">
					客服服务
				</view>
			</view>
		</view>
		<view class="vip_box" v-if="info.vipType == 0 && false">
			<view class="txt1">月卡会员</view>
			<view class="txt2" v-if="CarkTypeList[0].retailPrice"> 仅需￥{{ CarkTypeList[0].retailPrice }}，可享30天免费骑行权益
			</view>
		</view>
		<view class="vip_box1" v-if="info.vipType == 1 && false">
			<view class="txt1">月卡会员</view>
			<view class="txt2"> 月卡会员{{ daysUntilExpiration }}天后到期</view>
			<view class="btn">
				立即续费
			</view>
		</view>
		<view class="fee_box" v-if="false">
			<view class="auto_box">
				<view class="auto_li" v-for="(item, index) in CouponList" :key="index" @click="tobuy()">
					<view class="txt1">
						{{ item.name }}
					</view>
					<view class="txt1">
						{{ item.retailPrice }}元
					</view>
					<view class="txt2" v-if="item.desc">
						{{ item.desc }}
						<!-- 每单最高抵3元 -->
					</view>
					<view class="buy_btn">
						购买
					</view>
				</view>
			</view>
		</view>
		<view class="type_cont">
			<view class="type_li" @click="topage(2)">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uG1iB3C69uNIr9Zx7qH6" mode="" v-if="deptId == 100">
				</image>
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uDMXuZiiktkF0EWBrZv3" mode="" v-else
					style="width: 49.87rpx;height: 44.12rpx;"></image>
				我的订单
				<view class="iconfont icon-xiangyou1"></view>
			</view>
			<view class="type_li" style="margin-top: 70rpx;" @click="topage(3)">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uqsALXg6QXh9Yf6wIddS" mode="" v-if="deptId == 100">
				</image>
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uhy9Mp5SoiTQoogpCI3T" mode="" v-else
					style="width: 59.46rpx;height: 47.95rpx;"></image>
				问题上报
				<view class="iconfont icon-xiangyou1"></view>
			</view>
			<view class="type_li" style="margin-top: 70rpx;" @click="topage(10)">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uuVBPGs95GoM8RZ1FfVx" mode="" v-if="deptId == 100">
				</image>
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uN9B5Nu05ynxDQkaO9jE" mode="" v-else
					style="width: 53.71rpx;height: 47.95rpx;"></image>
				帮助中心
				<view class="iconfont icon-xiangyou1"></view>
			</view>
		</view>
		<view class="type_cont" v-if="info.sysRole">
			<view class="type_li" @click="topage(8)" style="margin-bottom: 70rpx;">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uyA3Cjjryy4Z9fCjs15Z" mode=""></image>
				运维人员
				<view class="iconfont icon-xiangyou1"></view>
			</view>

			<view class="type_li" @click="topage(9)">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uC0nQVG6EK7OCYefw1Ws" mode=""></image>
				管理人员
				<view class="iconfont icon-xiangyou1"></view>
			</view>
		</view>
		<view class="btns" @click="layout">
			退出登录
		</view>
		<u-select v-model="show" :list="list" title='选择运营区' @confirm="confirm" v-if="list.length <= 5"></u-select>

		<!-- 自定义选择器 -->
		<view class="custom-select" v-if="show && list.length > 5">
		    <view class="mask" @click="show = false"></view>
		    <view class="select-content">
		      <view class="select-header">
		        <text>选择运营区</text>
		        <text class="close" @click="show = false">×</text>
		      </view>
		
		      <view class="search-box">
		        <input 
		          type="text" 
		          v-model="searchKey" 
		          placeholder="搜索运营区" 
		          @input="handleSearch"
		        />
		      </view>
		
			  <scroll-view scroll-y class="select-list">
					<view class="select-item" v-for="item in displayList" :key="item.value" @click="selectItem(item)"
						:class="{ 'highlight': searchKey && item.label.includes(searchKey) }">
						{{ item.label }}
						<view style="font-size: 24rpx;color: #999;margin-left: auto;"> {{ item.deptName }}</view>
					</view>
					</scroll-view>
		    </view>
		  </view>
	</view>
</template>

<script>
import {
	info
} from 'autoprefixer';
export default {
	data() {
		return {
			background: {
				backgroundColor: 'transparent'
			},
			backcolor: {
				color: '#ffffff'
			},
			info: {},
			totype: 0,
			list: [],
			show: false,
			deptId: 0,
			statusBarHeight: 0,
			navBarHeight: 0,
			areaInfo: {},
			CouponList: [],
			CarkTypeList: [],
			daysUntilExpiration: 0,// 剩余天数
			islogin: false,
			menuList: [],
			searchKey: '',
			displayList: [], // 用于显示的列表


		}
	},
	onLoad() {
		//获取手机状态栏高度
		this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];

		// #ifdef MP-WEIXIN
		// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
		const custom = wx.getMenuButtonBoundingClientRect()


		// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
		this.navBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2


		// #endif

	},
	computed: {

		maskedPhoneNumber() {
			if (!this.info.phonenumber) return '';
			return this.info.phonenumber.slice(0, 3) + '****' + this.info.phonenumber.slice(7);
		},
		maskedName() {
			if (!this.info.realName) return '';
			return this.info.realName.charAt(0) + '*'.repeat(this.info.realName.length - 1);
		},
		// 添加过滤后的列表计算属性
		filteredList() {
			if (!this.searchKey) return this.list;
			return this.list.filter(item =>
				item.label.toLowerCase().includes(this.searchKey.toLowerCase())
			);
		}
	},
	onShow() {
		this.deptId = uni.getStorageSync('deptId');
		this.getuserInfo()
		this.getarea()
	},
	computed: {
		maskedPhoneNumber() {
			if (!this.info.phonenumber) return '';
			return this.info.phonenumber.slice(0, 3) + '****' + this.info.phonenumber.slice(7);
		},
		maskedName() {
			if (!this.info.realName) return '';
			return this.info.realName.charAt(0) + '*'.repeat(this.info.realName.length - 1);
		}
	},
	methods: {
		handleSearch(e) {
			const value = e.detail.value;
			if (!value) {
				// 搜索框为空时显示全部数据
				this.displayList = this.list;
			} else {
				// 有搜索内容时过滤数据
				this.displayList = this.list.filter(item =>
					item.label.toLowerCase().includes(value.toLowerCase()) ||
					item.deptName.toLowerCase().includes(value.toLowerCase())
				);
			}
		},

		selectItem(item) {
			this.confirm([item]);
			this.show = false;
			this.searchKey = ''; // 选择后清空搜索框
			this.displayList = this.list; // 重置显示列表
		},
		hasMenuPermission(menuName) {
			return this.menuList.some(item => item.menuName === menuName);
		},
		getuserInfo() {
			uni.showLoading({
				title: '加载中'
			})
			this.$u.get("/getAppInfo").then((res) => {

				if (res.code == 200) {
					uni.hideLoading()
					this.getCouponList()
					this.getCarkType()
					this.$store.commit('SET_USERID', res.user.userId);
					this.info = res.user

					this.menuList = res.menu
					this.islogin = true
					// this.calculateDaysUntilExpiration()
					if (this.info.sysRole) {

						this.getareaList()
					}
					// if( res.user.role==2){
					// 	uni.navigateTo({
					// 		url:'/page_fix/fix_index'
					// 	})
					// }
				} else {
					uni.redirectTo({
						url: '/pages/login/login'
					});


				}
			});
		},
		calculateDaysUntilExpiration() {
			const currentDate = new Date();
			const expirationDate = new Date(this.userinfo.expirationTime);

			// 计算时间差（毫秒）
			const timeDifference = expirationDate - currentDate;

			// 将毫秒转换为天
			this.daysUntilExpiration = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
		},
		tobuy() {
			uni.navigateTo({
				url: '/page_vip/buyCard'
			})
		},
		getarea() {
			let id = uni.getStorageSync('areaId');
			this.$u.get("/app/area/" + id).then((res) => {

				if (res.code == 200) {
					this.areaInfo = res.data

				} else {
					// uni.showToast({
					// 	title: res.msg,
					// 	icon: 'none',
					// 	duration: 2000
					// });
				}
			});
		},
		getCouponList() {
			let data = {
				type: '3,4'
			}
			this.$u.get("/app/couponList", data).then((res) => {

				if (res.code == 200) {
					this.CouponList = res.data

				} else {
					// uni.showToast({
					// 	title: res.msg,
					// 	icon: 'none',
					// 	duration: 2000
					// });
				}
			});
		},
		getCarkType() {
			let data = {
				type: '1'
			}
			this.$u.get("/app/couponList", data).then((res) => {

				if (res.code == 200) {
					this.CarkTypeList = res.data

				} else {
					// uni.showToast({
					// 	title: res.msg,
					// 	icon: 'none',
					// 	duration: 2000
					// });
				}
			});
		},
		layout() {
			this.$u.post('/logout').then((res) => {
				if (res.code == 200) {
					// 获取所有缓存键
					const keys = uni.getStorageInfoSync().keys;

					// 指定要保留的缓存键
					const preserveKey = 'deptId'; // 替换为你想要保留的缓存键

					// 遍历所有缓存键并删除除指定键以外的所有键
					keys.forEach(key => {
						if (key !== preserveKey) {
							uni.removeStorageSync(key);
						}
					});

					// 进行重定向
					uni.redirectTo({
						url: '/pages/index/index'
					});
				}
			}).catch(error => {
				console.error("Error fetching area data:", error);
			});

		},
		topage(num) {
			if (num == 0) {
				// uni.navigateTo({
				// 	url:''
				// })
			} else if (num == 1) {
				if (this.islogin) {
					uni.navigateTo({
						url: '/page_user/yj?showList=true'
					})
				}

			} else if (num == 2) {
				uni.navigateTo({
					url: '/page_user/good_list'
				})
			} else if (num == 3) {
				uni.navigateTo({
					url: '/page_user/qsrecord'
				})
			} else if (num == 4) {
				uni.navigateTo({
					url: '/page_user/yczn'
				})
			} else if (num == 5) {
				uni.navigateTo({
					url: '/page_user/jfgz'
				})
			} else if (num == 8) {
				this.totype = 1

				if (this.list.length < 2) {
					uni.setStorageSync('adminAreaid', this.list[0].value);

					uni.navigateTo({
						url: '/page_fix/fix_index'
					})

				} else {
					
					this.show = true
				}
			} else if (num == 9) {

				this.totype = 2

				if (this.list.length < 2) {
					uni.setStorageSync('adminAreaid', this.list[0].value);
					uni.navigateTo({
						url: '/pages_admin/admin_index'
					})
				} else {
					this.show = true
				}

			} else if (num == 10) {

				uni.navigateTo({
					url: '/page_user/khfw/khfw'
				})
			} else if (num == 11) {
				if (info.idCard == null || info.idCard == '' || info.idCard == undefined) {
					uni.navigateTo({
						url: '/page_user/idcard_test'
					})
				} else {
					uni.showToast({
						title: '实名授权已完成',
						icon: 'none',
						duration: 2000
					});
				}

			} else if (num == 12) {
				uni.navigateTo({
					url: '/pages_admin/worke/bind_sn'
				})
			}

		},
		confirm(e) {
			// console.log(e);
			uni.setStorageSync('adminAreaid', e[0].value);
			if (this.totype == 2) {

				uni.navigateTo({
					url: '/pages_admin/admin_index'
				})
			} else {
				uni.navigateTo({
					url: '/page_fix/fix_index'
				})
			}


		},
		getareaList() {


			this.$u.get('/appVerify/getAreaList').then((res) => {
				if (res.code == 200) {
					this.list = res.data.map(item => ({
						value: item.areaId,
						label: item.areaName,
						deptName: item.deptName
					}));
					this.displayList = this.list; // 重置显示列表
				}
			}).catch(error => {
				console.error("Error fetching area data:", error);
			});
		},

	}
}
</script>


<style lang="scss">
	/deep/ .uni-navbar {
		background: transparent !important; // 使用 !important 确保覆盖原样式
	}

	page {
		background-color: #F4F4F4;
		// overflow-y: auto;
		// background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uYRs7Cv2Pbp95w3KjGO3');
		// background-size: cover;
		// background-position: center;
		// background-repeat: no-repeat;
		// min-height: 100vh;
	}
	.custom-select {
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.select-content {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		z-index: 1000;
		height: 50vh; // 最大高度
		// min-height: 400rpx; // 添加最小高度
		display: flex;
		flex-direction: column;
		padding-bottom: 20rpx;

		.select-header {
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #eee;

			.close {
				font-size: 40rpx;
				color: #999;
			}
		}

		.search-box {
			padding: 15rpx 20rpx;
			border-bottom: 1px solid #eee;

			input {
				width: 100%;
				height: 60rpx;
				background: #f5f5f5;
				border-radius: 30rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
			}
		}

		.select-list {
			flex: 1;
			max-height: calc(50vh - 140rpx);
			min-height: 260rpx; // 为列表添加最小高度

			.select-item {
				display: flex;
				// flex-direction: column;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 30rpx;
				border-bottom: 1px solid #eee;
				font-size: 28rpx;

				&.highlight {
					background-color: #f0f9ff;
					color: #2d8cf0;
				}

				&:active {
					background: #f5f5f5;
				}
			}
		}
	}
}
	.page {
		width: 750rpx;

		.fee_box {
			margin-top: 18rpx;
			position: relative;
			margin-left: 38rpx;
			width: 680rpx;
			height: 288rpx;
			background-image: url('https://lxnapi.ccttiot.com/bike/img/static/ugciMYClSGgJxP8HYoRU');
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;

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

			.auto_box {
				padding-left: 24rpx;
				display: flex;
				overflow-x: auto;
				/* 允许横向滚动 */
				flex-wrap: nowrap;
				/* 禁止换行，保持所有元素在一行 */
				position: absolute;
				top: 90rpx;
				width: 100%;
				/* 根据需要调整宽度 */
				height: auto;
				/* 根据内容自动调整高度 */

				.auto_li {
					position: relative;
					padding: 24rpx 28rpx;
					margin-right: 22rpx;
					width: 408rpx;
					height: 176rpx;
					flex-shrink: 0;
					/* 防止子元素被压缩 */
					background-image: url('https://lxnapi.ccttiot.com/bike/img/static/ui88NWy9R1j2zFGojdHU');
					background-size: cover;
					background-position: center;

					.txt1 {
						width: 100%;
						font-weight: 600;
						font-size: 32rpx;
						color: #495E74;
					}

					.txt2 {
						font-weight: 400;
						font-size: 24rpx;
						color: #495E74;
					}

					.buy_btn {
						position: absolute;
						right: 26rpx;
						bottom: 38rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 132rpx;
						height: 50rpx;
						background: #495E74;
						border-radius: 25rpx 25rpx 25rpx 25rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #FFF3DB;
					}
				}
			}
		}

		.vip_box1 {
			position: relative;
			margin-left: 38rpx;
			width: 680rpx;
			height: 158rpx;
			background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uiaiNkMy7221n3bk2ta0');
			background-size: cover;
			/* 背景图片等比缩放以覆盖整个容器 */
			background-position: center;
			/* 背景图片居中显示 */
			background-repeat: no-repeat;

			.txt1 {
				top: 20rpx;
				left: 171rpx;
				position: absolute;
				font-weight: 500;
				font-size: 39rpx;
				color: #B07C1E;
			}

			.txt2 {
				position: absolute;
				left: 171rpx;
				bottom: 20rpx;
				font-weight: 400;
				font-size: 25rpx;
				color: #B07C1E;
			}

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 18rpx;
				right: 23rpx;
				width: 150rpx;
				height: 43rpx;
				border-radius: 31rpx 31rpx 31rpx 31rpx;
				border: 1rpx solid #B07C1E;
				font-weight: 400;
				font-size: 25rpx;
				color: #B07C1E;
			}
		}

		.vip_box {
			position: relative;
			margin-left: 38rpx;
			width: 680rpx;
			height: 158rpx;
			background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uw6bYgjn1bS1ayNm6VI9');
			background-size: cover;
			/* 背景图片等比缩放以覆盖整个容器 */
			background-position: center;
			/* 背景图片居中显示 */
			background-repeat: no-repeat;

			.txt1 {
				top: 20rpx;
				left: 100rpx;
				position: absolute;
				font-weight: 500;
				font-size: 44rpx;
				color: #FFE09E;
			}

			.txt2 {
				position: absolute;
				right: 74rpx;
				bottom: 10rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFE09E;
			}
		}

		.btns {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 680rpx;
			height: 90rpx;
			background: #64B6A7;
			color: #fff;
			font-size: 36rpx;
			border-radius: 20rpx;
			margin: 40rpx auto;
		}

		.fixed {
			z-index: 999;
			position: fixed;
			top: 0;
		}

		.backimg-container {
			position: fixed;
			top: -7px;
			left: 0;
			width: 100%;
			height: 564rpx;
			z-index: 0;

			.backimg {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
		}


		.topbg {
			width: 750rpx;
			// background: #fff;
			height: 184rpx;

			.topbox {
				width: 750rpx;
				// background: #fff;
				height: 184rpx;
				border-radius: 0 0 100rpx 0;

				.info {
					padding-top: 40rpx;
					margin-left: 100rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;

					image {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}

					.cont {
						margin-left: 40rpx;
						width: 70%;

						.name {
							font-weight: 400;
							font-size: 32rpx;
							color: #FFFFFF;
							width: 100%;
							text-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);
						}

						.phone {
							margin-top: 4rpx;
							width: 100%;
							font-weight: 400;
							font-size: 20rpx;
							color: #FFFFFF;
							text-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);
						}
					}
				}
			}
		}

		.type_cont {

			width: 680rpx;
			padding: 58rpx 54rpx;
			// height: 608rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 0 auto;
			margin-top: 30rpx;

			.type_li {
				width: 100%;
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				font-weight: 400;
				font-size: 32rpx;
				color: #2F3240;

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 20rpx;
				}

				.icon-xiangyou1 {
					margin-left: auto;
					color: #2F3240;
					font-size: 36rpx;
				}

			}
		}

		.tocont {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-around;
			margin: 0 auto;
			margin-top: 100rpx;
			width: 680rpx;
			height: 176rpx;
			background: #fff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			z-index: 10;
			position: relative;

			.cont_li {
				width: 112rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				image {
					margin-top: 10rpx;
					width: 44rpx;
					height: 44rpx;
				}

				.txt {
					width: 112rpx;
					text-align: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #2F3240;
				}
			}
		}

		.btnbg {
			width: 750rpx;
			// background: #4C97E7;

			.btnbox {
				padding-top: 36rpx;
				width: 750rpx;
				background: #fff;

				border-radius: 100rpx 0 0 0;

				.btncard {
					padding: 0 54rpx;
					margin: 0 auto;
					width: 680rpx;
					// height: 438rpx;
					padding: 0 56rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
					border-radius: 34rpx 34rpx 34rpx 34rpx;

					.card_li {
						padding-top: 18rpx;
						width: 100%;
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						justify-content: space-between;
						border-bottom: 2rpx solid #D8D8D8;
						padding-bottom: 26rpx;

						.card_left {
							// width: 100%;
							display: flex;
							flex-wrap: nowrap;
							// align-items: center;

							image {
								margin-right: 28rpx;
								width: 40rpx;
								height: 40rpx;
							}

							.text {
								margin-right: 24rpx;
								font-weight: 400;
								font-size: 28rpx;
								color: #3D3D3D;
							}

							.tip {
								display: flex;
								align-items: center;
								justify-content: center;
								width: 80rpx;
								height: 28rpx;
								background: #FFEFEF;
								border-radius: 17rpx 17rpx 17rpx 17rpx;
								font-weight: 400;
								font-size: 16rpx;
								color: #FA5F5F;
							}
						}

						.icon-xiangyou1 {
							font-size: 42rpx;
							color: #3D3D3D;
						}

					}
				}
			}
		}
	}
</style>