user

pages.json

@@ -123,6 +123,20 @@
 				"style": {
 					"navigationBarTitleText": "隐私协议"
 				}
+			},
+			{
+				"path": "user",
+				"style": {
+					// #ifdef MP
+					"navigationStyle": "custom",
+					// #endif
+					// #ifndef MP
+					"app-plus": {
+						"titleNView": false
+					},
+					// #endif
+					"navigationBarTitleText": "个人中心"
+				}
 			}]
 		}
 	],
@@ -162,7 +176,7 @@
 				"text": "联盟"
 			},
 			{
-				"pagePath": "pages/user/index",
+				"pagePath": "pages/user/user",
 				"iconPath": "static/tabBar/tab-04.png",
 				"selectedIconPath": "static/tabBar/tab-04-current.png",
 				"text": "我的"

pages/user/user.vue

@@ -1,130 +1,82 @@
 <template>
 	<view class="container">
-		<view class="vheigh"></view>
-		<view class="user-top">
-			<!-- #ifndef APP-PLUS -->
-			<image src="http://yiqugo.oss-cn-hangzhou.aliyuncs.com/bf48a202304061504282861.png" mode=""
-				class="user-top-bg"></image>
-			<!-- #endif -->
-			<!-- #ifdef APP-PLUS -->
-			<image src="../../static/img/user-bg.png" mode="" class="user-top-bg"></image>
-			<!-- #endif -->
-			<view class="user-info" @click="navTo('/pages/set/set')">
-				<view class="avatar">
-					<image class="avatarimg" :src="userInfo.avatar || '/static/error/missing-face.png'" mode=""></image>
-					<image v-if="sm != 0" class="real" src="../../static/img/real.png" mode=""></image>
-				</view>
-				<view class="name">{{ userInfo.nickname || '游客' }}</view>
-				<view class="phone flex" v-if="userInfo.uid">
-					<view class="phone-font">ID号：{{ userInfo.uid }}</view>
-				</view>
-				<view class="vip" v-if="userInfo.level_name">
-					<image class="vip-bg" src="../../static/img/vip.png" mode=""></image>
-					<view class="vip-title">{{ userInfo.level_name }}</view>
-				</view>
+		<view class="userinfo flex">
+			<view class="avt">
+				<image src="../../static/error/missing-face.png" mode=""></image>
 			</view>
-			<view class="sy-box flex" v-if="isShowIllegality" >
-				<view class="sy-item" @click="navTo('/pages/user/mygs')">
-					<view class="sy-item-val">{{ userInfo.profit > 0 ? userInfo.profit : '0' }}</view>
-					<view class="sy-item-name">我的收益</view>
-				</view>
-				<view class="jg"></view>
-				<view class="sy-item" @click="navTo('/pages/money/qudou')">
-					<view class="sy-item-val">{{ userInfo.integral || '0.00' }}</view>
-					<view class="sy-item-name">我的趣豆</view>
-				</view>
-				<view class="jg"></view>
-				<view class="sy-item" @click="navTo('/pages/user/myAppointment')">
-					<view class="sy-item-val">{{ userInfo.anticipate || '0.00' }}</view>
-					<view class="sy-item-name">我的易趣卷</view>
+			<view class="info">
+				<view class="name clamp">
+					李丹丹李丹丹李丹丹李丹丹李丹丹李丹丹李丹丹李丹丹李丹丹
 				</view>
-				<view class="jg"></view>
-				<view class="sy-item" @click="navTo('/pages/user/mytihuo')">
-					<view class="sy-item-val">{{ userInfo.good_integral || '0.00' }}</view>
-					<view class="sy-item-name">提货积分</view>
+				<view class="id flex">
+					<view class="xs">
+						ID
+					</view>
+					<view class="val">
+						236322
+					</view>
+					<image src="../../static/icon/copy.png" mode="" class="copy"></image>
 				</view>
 			</view>
 		</view>
-		<!-- <view class="qd-box flex">
-			<image src="../../static/icon/uqd.png" mode=""></image>
-			<view class="qd-info">
-				<view class="" style="font-weight: bold;color: #0C1732;">签到领取积分</view>
-				<view class="">已连续签到{{ actionDay }}天</view>
-				<view class="">累计签到奖励{{ sum_integral }}趣豆</view>
-			</view>
-			<view class="qd-btn" :class="{ qded: qded }" @click="qded ? '' : goQd()">{{ qded ? '已签到' : '立即签到' }}</view>
-		</view> -->
-		<view class="tool-box flex"  v-if="isShowIllegality">
-			<view class="tool-item flex" v-for="itemt in toolList" :key="itemt.id" @click="useTool(itemt)"
-				v-if="itemt.id != 't7' || userInfo.staff">
-				<view class="tool-item-img">
-					<image :src="itemt.img" mode="widthFix" :style="{ width: itemt.width, height: itemt.height }"
-						class="tool-logo"></image>
+		<view class="ks flex">
+			<image src="../../static/icon/ks.png" mode=""></image>
+			<view class="value">
+				<view class="val">
+					7772032.30
 				</view>
-				<view class="tool-item-name">{{ itemt.name }}</view>
+				<view class="">
+					我的矿石
+				</view>
+			</view>
+			<view class="btn ">
+				转赠
 			</view>
 		</view>
-		<uni-list class="tool-list">
-			<uni-list-item class="item" title="收款信息" @click="navTo('/pages/collection/collection')"
-				thumb="/static/icon/user_page.png"></uni-list-item>
-			<uni-list-item class="item" title="实名认证" @click="navTo('/pages/user/approve')"
-				thumb="/static/icon/user_name.png"></uni-list-item>
-			<uni-list-item class="item" title="收货地址" @click="navTo('/pages/set/address')"
-				thumb="/static/icon/user_address.png"></uni-list-item>
-			<uni-list-item class="item" title="客服" @click="openKf()" thumb="/static/icon/user_serve.png"></uni-list-item>
-			<uni-list-item class="item" title="设置" @click="navTo('/pages/set/set')" thumb="/static/icon/user_set.png"></uni-list-item>
-			<!-- #ifdef H5 -->
-			<uni-list-item class="item" title="绑定手机" @click="navTo('/pages/set/phone')"
-				thumb="/static/icon/user_bind.png"></uni-list-item>
-			<!-- #endif -->
-			<!-- <uni-list-item class="item" title="关于我们" @click="navTo('/pages/user/about')" thumb="/static/icon/img09.png"></uni-list-item> -->
-		</uni-list>
-		<view class="page-btm" style="padding-top: 20rpx;">©2022 杭州尚视拍卖有限公司 版权所有</view>
-		<!-- #ifdef APP -->
-		<view class="page-btm" >APP版本号{{wgtinfo.version}},最新版本号{{appversion}}</view>
-		<!-- #endif -->
-		<view class="page-btm" style="padding-bottom: 10rpx;">浙ICP备2022017146号-2</view>
-		<uni-popup ref="popupkf" type="center">
-			<view class="popup-box">
-				<view class="img">
-					<image src="../../static/img/img009.png" mode=""></image>
+		<view class="friend">
+			<view class="top flex">
+				<view class="">
+					邀请好友
 				</view>
-				<view class="mian">
-					<view class="delivery">
-						<view class="title">已经为您定制专属客服</view>
-						<image src="../../static/img/img010.png" mode=""></image>
+				<image src="../../static/icon/djl.png" mode=""></image>
+				<view class="tc">
+					
+				</view>
+				<view class="xq">
+					详情<image src="../../static/img/back.png" mode=""></image>
+				</view>
+			</view>
+			<view class="tit">
+				好友会为你贡献一定比例的奖励
+			</view>
+			<view class="val-wrap flex">
+				<view class="item ">
+					<view class="val">
+						72032.30
 					</view>
-					<view class="nocancel">客服电话:{{ text }}</view>
-					<view class="comfirm-box">
-						<view class="cancel" @click="cancel">取消</view>
-						<view class="comfirm" @click="comfirm(text)">复制微信</view>
+					<view class="">
+						累计收益
 					</view>
 				</view>
-			</view>
-		</uni-popup>
-		<uni-popup ref="popupqd" type="center">
-			<view class="popup">
-				<view class="popup-dox">
-					<image class="popup-logo" src="../../static/img/sign-popup.png"></image>
+				<view class="item item1">
+					<view class="val">
+						203
+					</view>
+					<view class="">
+						好友数
+					</view>
 				</view>
-				<view class="popup-title">
-					获得
-					<text>{{ today_integral }}</text>
-					趣豆
+				<view class="btn">
+					邀请好友
 				</view>
-				<view class="popup-btn" @click="closeQd">知道了</view>
 			</view>
-			<!-- <view class="close_icon" @click="close">
-				<image src="../../static/img/Close.png"></image>
-			</view> -->
-		</uni-popup>
-		<u-tabbar activeColor="#f42b4e" v-model="current" :list="tabbar"></u-tabbar>
+		</view>
 	</view>
 </template>
 <script>
-	import {
-		tabbar1
-	} from '@/utils/tabbar.js';
+	// import {
+	// 	tabbar1
+	// } from '@/utils/tabbar.js';
 	import {
 		mapState,
 		mapMutations
@@ -163,9 +115,9 @@
 		data() {
 			return {
 				// #ifdef APP
-				wgtinfo:{
-					version:'1.0.0'
-				},//版本信息
+				wgtinfo: {
+					version: '1.0.0'
+				}, //版本信息
 				// #endif
 				sm: 0, //是否已实名认证
 				money: '', //保存当前月份
@@ -254,7 +206,7 @@
 				// this.isSm();
 			}
 			// #ifdef APP
-			if(this.appversion!==this.wgtinfo.version){
+			if (this.appversion !== this.wgtinfo.version) {
 				getUpApp();
 			}
 			// #endif
@@ -283,7 +235,7 @@
 		},
 		computed: {
 			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
-			...mapState(["isShowIllegality","appversion"])
+			...mapState(["isShowIllegality", "appversion"])
 		},
 		methods: {
 			...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
@@ -513,676 +465,177 @@
 	};
 </script>
 <style lang="scss">
-	%flex-center {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
+	.container {
+		background-image: url('../../static/img/user-bg.png');
+		background-size: 100% 100%;
+		min-height: 1600rpx;
 	}
-
-	%section {
-		display: flex;
-		justify-content: space-around;
-		align-content: center;
-		background: #fff;
-		border-radius: 10rpx;
-	}
-
-	.container,
-	page {
-		min-height: 100%;
-		height: auto;
-		background-color: $page-color-base;
-	}
-
-	.vheigh {
-		height: var(--status-bar-height);
-		background-color: $base-color;
-	}
-
-	.user-section {
-		height: 435rpx;
-		padding: 15rpx 30rpx 0;
-		position: relative;
-
-		.bg {
-			position: absolute;
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 100%;
-			background-color: $base-color;
-		}
-	}
-
-	.user-info-box {
-		height: 180rpx;
-		color: white;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		position: relative;
-		z-index: 1;
-
-		.detail {
-			height: 130rpx;
-
-			.portrait-box {
-				height: 100%;
-
-				.portrait {
-					width: 130rpx;
-					height: 100%;
-					border: 5rpx solid #fff;
-					border-radius: 50%;
-				}
-			}
-
-			.info-box {
-				margin-left: 20rpx;
-				line-height: 1.5;
-
-				.username {
-					font-size: $font-lg + 6rpx;
-					height: 100%;
-				}
-			}
-		}
-
-		.config {
-			font-size: 48rpx;
-			height: 130rpx;
-
-			.setting {
-				margin-right: 51rpx;
-			}
-		}
-	}
-
-	.vip-card-box {
-		display: flex;
-		flex-direction: column;
-		color: #f7d680;
-		height: 240rpx;
-		background: linear-gradient(left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
-		border-radius: 16rpx 16rpx 0 0;
-		overflow: hidden;
-		position: relative;
-		padding: 20rpx 24rpx;
-
-		.card-bg {
-			position: absolute;
-			top: 20rpx;
-			right: 0;
-			width: 380rpx;
-			height: 260rpx;
-		}
-
-		.b-btn {
-			position: absolute;
-			right: 20rpx;
-			top: 16rpx;
-			width: 132rpx;
-			height: 40rpx;
-			text-align: center;
-			line-height: 40rpx;
-			font-size: 22rpx;
-			color: #36343c;
-			border-radius: 20px;
-			background: linear-gradient(left, #f9e6af, #ffd465);
-			z-index: 1;
-		}
-
-		.tit {
-			font-size: $font-base + 2rpx;
-			color: #f7d680;
-			margin-bottom: 28rpx;
-
-			.iconfont {
-				color: #f6e5a3;
-				margin-right: 16rpx;
-			}
-		}
-
-		.e-b {
-			font-size: $font-sm;
-			color: #d8cba9;
-			margin-top: 10rpx;
-		}
-	}
-
-	.cover-container {
-		background: $page-color-base;
-		margin-top: -150rpx;
-		padding: 0 30rpx;
-		position: relative;
-		background: #f5f5f5;
-		padding-bottom: 20rpx;
-
-		.arc {
-			position: absolute;
-			left: 0;
-			top: -34rpx;
-			width: 100%;
-			height: 36rpx;
-		}
-	}
-
-	.tj-sction {
-		@extend %section;
-
-		.tj-item {
-			@extend %flex-center;
-			flex-direction: column;
-			height: 140rpx;
-			font-size: $font-sm;
-			color: #75787d;
-		}
-
-		.num {
-			font-size: $font-lg;
-			color: $font-color-dark;
-			margin-bottom: 8rpx;
-		}
-	}
-
-	.item-box {
-		border-radius: 10rpx;
-		background-color: white;
-		margin-top: 20rpx;
-
-		.box-title {
-			line-height: 1;
-			padding: 30rpx;
-
-			.title {
-				font-size: $font-lg;
-				font-weight: bold;
-			}
-
-			.link {
-				font-size: $font-base - 2rpx;
-				color: $font-color-light;
-			}
-		}
-
-		.order-section {
-			@extend %section;
-			padding: 28rpx 0;
-
-			.order-item {
-				@extend %flex-center;
+	.userinfo {
+		height: 316rpx;
+		justify-content: flex-start;
+		.avt {
+			border-radius: 50%;
+			// border-radius: 2rpx;
+			border: 2rpx solid #fff;
+			height: 124rpx;
+			width: 124rpx;
+			image {
 				width: 120rpx;
 				height: 120rpx;
-				border-radius: 10rpx;
-				font-size: $font-sm;
-				color: $font-color-dark;
-			}
-
-			.iconfont {
-				font-size: 48rpx;
-				margin-bottom: 18rpx;
-				color: #fa436a;
-			}
-
-			.icon-shouhoutuikuan {
-				font-size: 44rpx;
-			}
-
-			.icon {
-				height: 50rpx;
-				width: 48rpx;
-				margin-bottom: 18rpx;
-				background-size: 100%;
-				background-repeat: no-repeat;
-				background-position: center;
-
-				.icon-img {
-					width: 100%;
-					height: 100%;
-				}
 			}
 		}
-	}
-
-	.history-section {
-		// padding: 30rpx 0 0;
-		margin-top: 20rpx;
-		background: #fff;
-		border-radius: 10rpx;
-
-		.sec-header {
-			display: flex;
-			align-items: center;
-			font-size: $font-base;
-			color: $font-color-dark;
-			line-height: 40rpx;
-			margin-left: 30rpx;
-			padding-top: 30rpx;
-
-			.iconfont {
-				font-size: 44rpx;
-				color: $color-red;
-				margin-right: 16rpx;
-				line-height: 40rpx;
-			}
-		}
-
-		.h-list {
-			white-space: nowrap;
-			padding: 30rpx 30rpx 0;
-
-			.h-list-image {
-				display: inline-block;
-				width: 160rpx;
-				height: 160rpx;
-				margin-right: 20rpx;
-				border-radius: 10rpx;
-			}
-		}
-	}
-
-	.user-top {
-		height:620rpx;
-		position: relative;
-
-		.user-top-bg {
-			width: 750rpx;
-			height: 660rpx;
-			// width: 100%;
-			// position: absolute;
-		}
-
-		.user-info {
-			width: 750rpx;
-			position: absolute;
-			top: 66rpx;
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			align-items: center;
-
-			.avatar {
-				position: relative;
-				width: 134rpx;
-				height: 134rpx;
-				border-radius: 50%;
-
-				.avatarimg {
-					border-radius: 50%;
-					width: 134rpx;
-					height: 134rpx;
-				}
-
-				.real {
-					position: absolute;
-					bottom: 0;
-					left: 10rpx;
-					width: 120rpx;
-					height: 34rpx;
-				}
-			}
-
+		.info {
+			font-weight: 800;
+			font-size: 31rpx;
+			color: #212121;
+			padding-left: 23rpx;
 			.name {
-				margin-top: 20rpx;
-				font-size: 32rpx;
-				font-family: PingFang SC;
-				font-weight: bold;
-				color: #ffffff;
+				width: 500rpx;
 			}
-
-			.phone {
-				justify-content: start;
-				margin-top: 13rpx;
-				font-size: 30rpx;
-				font-family: PingFang SC;
-				font-weight: 500;
-				color: #ffffff;
-
-				.green {
-					margin-left: 12rpx;
-					position: relative;
-					width: 100rpx;
-					height: 40rpx;
-
-					.green-bg {
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						width: 100%;
-						height: 100%;
-					}
-
-					.green-title {
-						line-height: 30rpx;
-						text-align: center;
-						position: relative;
-						z-index: 10;
-						font-size: 20rpx;
-						font-family: PingFang SC;
-						font-weight: 500;
-						// color: #93794b;
-						color: #fff;
-					}
-				}
-			}
-
-			.vip {
+			.id {
+				width: 188rpx;
+				height: 32rpx;
+				border-radius: 5rpx;
+				border: 1px solid #797E96;
+				padding-right: 10rpx;
 				margin-top: 20rpx;
-				position: relative;
-				width: 120rpx;
-				height: 40rpx;
-
-				.vip-bg {
-					position: absolute;
-					top: 0;
-					left: 0;
-					right: 0;
-					width: 100%;
-					height: 100%;
-				}
-
-				.vip-title {
-					width: 120rpx;
-					line-height: 40rpx;
+				.xs {
+					width: 40rpx;
+					line-height:30rpx;
+					background: linear-gradient(0deg, #384054, #707991);
+					border-radius: 5rpx;
+					font-size: 25rpx;
+					color: #FFFFFF;
 					text-align: center;
-					position: relative;
-					z-index: 10;
-					font-size: 20rpx;
-					font-family: PingFang SC;
+				}
+				.copy {
+					width: 24rpx;
+					height: 24rpx;
+				}
+				.val {
+					flex-grow: 1;
+					padding-left: 6rpx;
 					font-weight: 500;
-					color: #93794b;
+					font-size: 25rpx;
+					color: #212121;
 				}
 			}
 		}
-
-		.sy-box {
-			position: absolute;
-			bottom: 105rpx;
-			height: 148rpx;
-			width: 750rpx;
-			.sy-item {
-				flex-grow: 1;
-				text-align: center;
-				font-size: 28rpx;
-				font-family: PingFang SC;
-				font-weight: 500;
-				color: #ffffff;
-
-				.sy-item-val {}
-			}
-
-			.jg {
-				width: 2rpx;
-				height: 68rpx;
-				background-color: #fff;
-			}
-		}
 	}
-
-	.qd-box {
-		width: 690rpx;
-		height: 210rpx;
-		background: #ffffff;
-		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
-		border-radius: 20rpx;
-		margin: -105rpx auto 30rpx;
+	.ks {
+		width: 709rpx;
+		height: 162rpx;
+		background-color: #1b2d59;
+		margin:auto;
+		color: #FFFFFF;
 		position: relative;
-		padding: 0 40rpx;
-		font-size: 26rpx;
-		font-family: PingFang SC;
-		font-weight: 500;
-		color: #666666;
-
-		image {
-			flex-shrink: 0;
-			width: 65rpx;
-			height: 68rpx;
+		padding: 0 30rpx 0 20rpx;
+		&::before ,&::after {
+			content: '';
+			width: 15rpx;
+			height: 15rpx;
+			position: absolute;
+			background-color: #fff;
 		}
-
-		.qd-info {
-			flex-grow: 1;
-			padding-left: 24rpx;
-			line-height: 46rpx;
+		&::after {
+			right: 15rpx;
+			top: 0;
 		}
-
-		.qd-btn {
-			width: 190rpx;
-			height: 80rpx;
-			line-height: 80rpx;
-			border-radius: 20px;
-			background: #dc262b;
-			border-radius: 20rpx;
-			text-align: center;
-			font-size: 32rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
-			color: #ffffff;
+		&::before {
+			right: 0;
+			top: 15rpx;
 		}
-
-		.qded {
-			background: #e8e8e8;
-			color: #999999;
+		image {
+			width: 107rpx;
+			height: 84rpx;
 		}
-	}
-
-	.tool-box {
-		padding-top: 30rpx;
-		padding-bottom: 46rpx;
-		width: 690rpx;
-		background: #ffffff;
-		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
-		border-radius: 20rpx;
-		margin: 30rpx auto;
-		flex-wrap: wrap;
-		justify-content: flex-start;
-		align-content: space-around;
-		margin-top: -100rpx;
-		z-index: 10;
-		position: relative;
-		.tool-item {
-			// width: 20%;
+		.value {
+			font-size: 23rpx;
+			padding-left: 10rpx;
 			flex-grow: 1;
-			height: 120rpx;
-			flex-shrink: 0;
-			flex-direction: column;
-			align-content: space-between;
-			justify-content: center;
-			font-size: 28rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
-			color: #0c1732;
-
-			.tool-item-img {
-				width: 68rpx;
-				height: 90rpx;
-				position: relative;
-				flex-shrink: 0;
-
-				.tool-logo {
-					position: absolute;
-					width: 56rpx;
-					height: 56rpx;
-					top: 0;
-					left: 0;
-					bottom: 0;
-					right: 0;
-					margin: auto;
-				}
-			}
-
-			.tool-item-name {
-				display: inline-block;
-				font-size: 26rpx;
+			.val {
+				font-size: 44rpx;
 			}
+			
 		}
-	}
-
-	.tool-list {
-		width: 690rpx;
-		margin: auto;
-		background: transparent;
-		.item{
-			background: #ffffff;
-			border-radius: 20rpx;
-			box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
-			margin-bottom: 10rpx;
+		.btn {
+			width: 89rpx;
+			// height: 38rpx;
+			padding: 6rpx 0;
+			border-radius: 19rpx;
+			border: 1px solid #DDE1EB;
+			font-weight: 500;
+			font-size: 24rpx;
+			text-align: center;
 		}
 	}
-
-	.popup-box {
-		width: 522rpx;
-		height: 605rpx;
-		background-color: #ffffff;
-		border-radius: 20rpx;
-		position: relative;
-
-		.img {
-			position: relative;
-			top: -56rpx;
-			left: 0;
-			width: 522rpx;
-			height: 132rpx;
-			display: flex;
-			justify-content: center;
-
+	.friend {
+		width: 709rpx;
+		height: 253rpx;
+		background: #FFFFFF;
+		border-radius: 10rpx;
+		margin: 26rpx auto 30rpx;
+		padding: 30rpx 20rpx;
+		.top {
+			font-weight: bold;
+			font-size: 29rpx;
+			color: #212121;
+			justify-content: flex-start;
 			image {
-				border-radius: 20rpx 20rpx 0 0;
-				width: 450rpx;
-				height: 132rpx;
+				width: 89rpx;
+				height: 35rpx;
 			}
-		}
-
-		.mian {
-			margin-top: -44rpx;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			// padding: 32rpx 32rpx;
-			background-color: #ffffff;
-			border-radius: 0 0 20rpx 20rpx;
-			text-align: center;
-
-			.delivery {
-				font-size: 40rpx;
-				color: #333333;
-				display: flex;
-				align-items: center;
-				flex-direction: column;
-
-				.title {}
-
-				image {
-					margin-top: 48rpx;
-					width: 172rpx;
-					height: 160rpx;
-				}
-			}
-
-			.nocancel {
-				font-size: 32rpx;
-				color: #333333;
-				margin-top: 14rpx;
+			.tc {
+				flex-grow: 1;
 			}
-
-			.comfirm-box {
-				margin-top: 52rpx;
-				display: flex;
-				// margin-bottom: 32rpx;
-
-				// justify-content: space-around;
-				.cancel {
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					width: 197rpx;
-					height: 74rpx;
-					border: 1px solid #dcc786;
-					border-radius: 38rpx;
-
-					font-size: 32rpx;
-					color: #605128;
-				}
-
-				.comfirm {
-					margin-left: 32rpx;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					width: 197rpx;
-					height: 74rpx;
-					background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
-					border-radius: 38px;
-					font-size: 32rpx;
-					color: #605128;
+			.xq {
+				font-weight: 400;
+				font-size: 26rpx;
+				color: #8B8B8B;
+				image {
+					width: 10rpx;
+					height: 20rpx;
+					margin-left: 13rpx;
 				}
 			}
 		}
-	}
-
-	.popup {
-		width: 560rpx;
-		padding-bottom: 45rpx;
-		background-color: #ffffff;
-		border-radius: 15rpx;
-		text-align: center;
-		line-height: 1;
-
-		.popup-dox {
-			position: relative;
-
-			.popup-logo {
-				margin: -160rpx auto 0;
-				width: 400rpx;
-				height: 200rpx;
-			}
+		.tit {
+			font-size: 24rpx;
+			color: #8B8B8B;
+			padding-top: 15rpx;
 		}
-
-		.popup-title {
-			margin-top: 85rpx;
-			font-size: 40rpx;
-			font-family: PingFang SC;
-			font-weight: bold;
-			color: #2a2a2a;
-
-			text {
-				font-size: 56rpx;
-				color: #e83f30;
+		.val-wrap {
+			padding-top: 30rpx;
+			justify-content: flex-start;
+			.item {
+				padding:0 15rpx 0 0rpx;
+				font-size: 24rpx;
+				color: #8B8B8B;
+				.val {
+					font-size: 41rpx;
+					color: #222222;
+					&::after {
+						content: '个';
+						font-size: 24rpx;
+					}
+				}
 			}
-		}
-
-		.popup-tip {
-			margin-top: 20rpx;
-			font-size: 28rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
-			color: #8c8c8c;
-
-			text {
-				color: #e83f30;
+			.item1 {
+				flex-grow: 1;
+				border-left: 1px solid #ECECEC;
+				padding-left: 30rpx;
+				
+			}
+			.btn {
+				width: 211rpx;
+				line-height: 83rpx;
+				background: #333333;
+				border-radius: 8rpx;
+				font-weight: bold;
+				font-size: 28rpx;
+				color: #FFFFFF;
+				text-align: center;
 			}
 		}
-
-		.popup-btn {
-			margin: 58rpx auto 0;
-			width: 270rpx;
-			height: 66rpx;
-			background: #f0c838;
-			border-radius: 34rpx;
-			text-align: center;
-			line-height: 66rpx;
-			font-size: 36rpx;
-			font-family: Source Han Sans CN;
-			font-weight: 500;
-			color: #ffffff;
-		}
-	}
-
-	.page-btm {
-		background-color: #f5f5f5;
-		font-size: 20rpx;
-		text-align: center;
-		color: #d6d6d8;
 	}
 </style>