<template>
	<view class="order-detail-page">

		<!-- 高风险区域提示 isHighRiskArea-->
		<view v-if="orderDetail.isHighRiskArea" class="risk-tip">
			<view style="width: 28rpx;margin-top: -5rpx;margin-right: 8rpx;">
				<image src="/static/workbench/warringIcon.png" style="width: 28rpx;height: 28rpx;" mode="widthFill" />
			</view>

			<view class="risk-text">{{ orderDetail.fenceIntro }}</view>
		</view>

		<!-- 待接单状态卡片 -->
		<view class="status-card">
			<view class="status-title">
				<image v-if="orderDetail.orderStatus == 5" src="/static/workbench/finishIcon.png"
					style="width: 48rpx;height: 48rpx;margin-right: 8rpx;" mode="aspectFill" />
				<image v-if="orderDetail.orderStatus == 4" src="/static/workbench/serviceingIcon.png"
					style="width: 48rpx;height: 48rpx;margin-right: 8rpx;" mode="aspectFill" />
				<view v-if="orderDetail.orderStatus == 3" style="display: flex;align-items: center;">
					<image v-if="orderDetail.execStatus === 0" src="/static/workbench/noGoIcon.png"
						style="width: 48rpx;height: 48rpx;margin-right: 8rpx;" mode="aspectFill" />
					<image v-if="orderDetail.execStatus === 0" src="/static/workbench/noSignIcon.png"
						style="width: 48rpx;height: 48rpx;margin-right: 8rpx;" mode="aspectFill" />
					<image v-if="orderDetail.execStatus === 1" src="/static/workbench/goedIcon.png"
						style="width: 48rpx;height: 48rpx;margin-right: 8rpx;" mode="aspectFill" />
					<image v-if="orderDetail.execStatus === 2" src="/static/workbench/arriveIcon.png"
						style="width: 48rpx;height: 48rpx;margin-right: 8rpx;" mode="aspectFill" />
					<image v-if="orderDetail.execStatus === 2" src="/static/workbench/signIcon.png"
						style="width: 48rpx;height: 48rpx;margin-right: 8rpx;" mode="aspectFill" />

				</view>
				<image v-if="orderDetail.orderStatus == 2" src="/static/workbench/orderIcon.png"
					style="width: 48rpx;height: 48rpx;margin-right: 8rpx;" mode="aspectFill" />


				<view class="status-text">
					<view v-if="orderDetail.orderStatus == 2" style="color: #FF531C;">待接单</view>

					<!-- 3:待服务  待出发\待签到\已出发\已到达\已签到 -->
					<view v-if="orderDetail.orderStatus == 3">
						<view v-if="orderDetail.execStatus === 0">待出发/待签到</view>
						<view v-if="orderDetail.execStatus === 1">已出发</view>
						<view v-if="orderDetail.execStatus === 2">已到达/已签到</view>
					</view>
					<view v-if="orderDetail.orderStatus == 4">服务中</view>
					<view v-if="orderDetail.orderStatus == 5">已完成</view>
					<view v-if="orderDetail.orderStatus == 9">
						<view>售后</view>

					</view>
				</view>
			</view>
			<view class="count-down" v-if="orderDetail.orderStatus == 5">订单服务已完成，请联系客户给出好评</view>
			<view v-else class="count-down">倒计时<span class="red-text">1小时59分</span></view>
		</view>

		<!-- 订单已退金额 -->
		<view v-if="orderDetail.actualRefundAmount" class="refund-amount" @click="goMoneyRecord">
			订单已退金额
			<view class="refund-amount-text">
				<view>￥{{ orderDetail.actualRefundAmount }}</view>
				<image src="/static/workbench/rightIcon.png" style="width: 24rpx;height: 24rpx;" mode="aspectFill" />

			</view>
		</view>

		<!-- 用户信息模块 -->
		<view class="user-info">
			<view class="row2">
				<view style="display: flex;align-items: center;">
					<image src="/static/workbench/peopleIcon1.png"
						style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" mode="aspectFill" />
					<view>
						{{ orderDetail.contactPersonName }} {{ orderDetail.contactPhoneNumber }}
					</view>

				</view>
				<view class="phone-icon">
					<image src="/static/workbench/phoneIcon.png" style="width: 21.49rpx;height: 21.53rpx;"
						mode="aspectFill" />
				</view>
			</view>
			<view class="row1" @click="goDetails(item.cId)">
				<view style="display: flex;align-items: center;">
					<image src="/static/workbench/clockIcon2.png"
						style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" mode="aspectFill" />
					{{ orderDetail.appointmentTimeRange }}
				</view>

			</view>


			<view class="row3">
				<image src="/static/workbench/localIcon3.png" style="width: 32rpx;height: 32rpx;margin-right: 16rpx;"
					mode="aspectFill" />

				{{ orderDetail.contactAddressInfo }}
				<text class="cont">{{ orderDetail.distanceKm }}km</text>
			</view>
		</view>

		<!-- 服务项目卡片 -->
		<view class="row4">
			<view>
				<image :src="orderDetail.projectCover" mode="aspectFill"
					style="border: 1px solid red;width: 96rpx;height: 96rpx;border-radius: 8rpx;" />
			</view>
			<view
				style="display: flex;flex-direction: column;flex: 1;justify-content: space-between;margin-left: 24rpx;">
				<view style="display: flex; justify-content: space-between;">
					<view class="title">{{ orderDetail.projectName }}（{{ orderDetail.projectDuration }}分钟）</view>
					<view class="cont">
						<view style="font-size: 20rpx;">￥</view>
						{{ orderDetail.finalAmount }}
					</view>
				</view>
				<view v-if="orderDetail.orderStatus == 9">
					<view v-if="orderDetail.afterSalesServiceStatus == '退款中'" class="refundStatus1">退款中
					</view>
					<view class="refundStatus2">{{ orderDetail.afterSalesServiceStatus }}
					</view>

				</view>

			</view>

		</view>

		<!-- 费用明细 -->
		<view class="price-card">
			<view class="title">
				<view>订单金额</view>
				<view style="font-size: 32rpx;font-weight: bold;">￥{{ orderDetail.basePrice }}</view>
			</view>
			<view class="title">订单总金额 <view class="cont">￥{{ orderDetail.finalAmount }}</view>
			</view>
			<view class="title" v-if="orderDetail.trafficFee">交通费 <view class="cont">￥{{ orderDetail.trafficFee }}
				</view>
			</view>
			<view class="title" v-if="orderDetail.couponPrice">优惠券 <view class="cont">￥{{ orderDetail.couponPrice }}
				</view>
			</view>
		</view>

		<!-- 订单基础信息 -->
		<view class="order-info-card">
			<view class="info-title">订单信息</view>
			<view class="info-row">
				<text class="info-label">订单编号</text>
				<view class="info-value">
					<text>{{ orderDetail.orderNo }} </text>
					<view style="width: 0;height: 24rpx;border: 0.5rpx solid #86909C;margin: 0 8rpx;"></view>
					<u-icon name="复制" size="12" color="#18BE8D" @click="copyOrderNo"></u-icon>
				</view>
			</view>
			<view class="info-row">
				<text class="info-label">下单时间</text>
				<text class="info-value">{{ orderDetail.createTime }}</text>
			</view>
			<view class="info-row">
				<text class="info-label">付款时间</text>
				<text class="info-value">{{ orderDetail.paidTime }}</text>
			</view>
			<view class="info-row">
				<text class="info-label">完成时间</text>
				<text class="info-value">{{ orderDetail.completedTime }}</text>
			</view>
		</view>

		<!-- 底部占位，避开安全区 -->
		<view class="footer-placeholder"></view>

		<!-- 底部操作按钮栏 -->
		<view class="bottom-btn-group" v-if="orderDetail.orderStatus != 5 && orderDetail.orderStatus != 9">
			<!-- v-if="[0, 1, 2, 3, 6].includes(item.nStatus)" -->
			<view class="pay" v-if="orderDetail.orderStatus == 2" @click.stop="rejectOrder(orderDetail)">拒接</view>
			<view class="pay" v-if="[2, 3,].includes(orderDetail.orderStatus)"
				@click.stop="contactCustomer(orderDetail)">
				联系客户</view>
			<view class="pay main" v-if="orderDetail.orderStatus == 2" @click.stop="acceptOrder(orderDetail)">立即接单
			</view>

			<view class="pay" v-if="[4, 3,].includes(orderDetail.orderStatus)" @click.stop="cancelOrder(orderDetail)">
				取消订单
			</view>
			<view class="pay main main1" v-if="orderDetail.orderStatus == 3 && orderDetail.execStatus == 0"
				@click.stop="startGoOut(orderDetail)">我已出发/签到</view>
			<view class="pay main" v-if="orderDetail.orderStatus == 3 && orderDetail.execStatus == 1"
				@click.stop="arriveSign(orderDetail)">已到达</view>
			<view class="pay main" v-if="orderDetail.orderStatus == 3 && orderDetail.execStatus == 2"
				@click.stop="startService(orderDetail)">开始服务</view>

			<view class="pay" v-if="orderDetail.orderStatus == 4" @click.stop="cancelOrder2(orderDetail)">提前结束</view>
			<view class="pay main" v-if="orderDetail.orderStatus == 4" @click.stop="finishService(orderDetail)">服务完成
			</view>

		</view>
		<!-- 服务完成弹窗 -->
		<u-popup :show="showModal2" mode="center" :round="16" :mask-close-able="false">
			<view class="modal-wrap">
				<!-- 标题居中 -->
				<view class="title">提示</view>
				<!-- 正文 -->
				<view class="content">
					距离服务时间还剩{{ diff }}分钟，确认提前结束订单吗？
				</view>
				<!-- 底部双按钮（必显示） -->
				<view class="btn-box">
					<view class="btn left" @click="showModal2 = false">我再想想</view>
					<view class="btn right" @click="finishService1(orderDetail)">确认结束</view>
				</view>
			</view>
		</u-popup>
		<!-- 线下签到弹窗 -->
		<u-popup :show="showSignPopup" :closeOnClickOverlay="true" mode="center" :round="16"
			@close="showSignPopup = false">
			<view class="sign-wrap">
				<view class="sign-title">输入用户手机后4位完成线下签到</view>
				<view class="sign-input-wrap">
					<Code ref="codeInput" :maxlength="4" :width="494" type="block" inputType="number"
						@onChange="onPhoneInput" @onComplete="onSignComplete" />
				</view>
				<view v-if="signError" class="sign-error">手机号验证错误，请重试</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
//execStatus
//'履约状态：0=待出发/待签到，1=已出发，2=已到达/已签到'
import { orderDetail, acceptOrder, rejectOrder, cancelOrder, arriveSign, startService, finishService, startGoOut, getCustomerPhone } from '@/api/order.js'
export default {
	data() {
		return {
			showSignPopup: false,
			phoneInputValue: '',
			signError: '',
			diff: 0,
			id: '',
			orderDetail: {},
			showModal2: false,
		};
	},
	onLoad(options) {
		console.log(options.id)
		this.id = options.id
		this.getOrderDetail()
	},
	methods: {
		// 订单详情
		getOrderDetail() {
			orderDetail({
				orderId: this.id
			}).then(res => {
				console.log(res)
				if (res.data.code === 200) {
					this.orderDetail = res.data.data
					// this.orderDetail.orderStatus = 9 //guo
					// this.orderDetail.execStatus = 0
				}
			})
		},
		// 去钱款去向记录
		goMoneyRecord() {
			uni.navigateTo({
				url: '/pages/order/moneyRecord?id=' + this.id
			})
		},
		// 立即接单
		acceptOrder(item) {
			acceptOrder({
				id: item.orderId
			}).then(res => {
				console.log(res)
				if (res.data.code === 200) {
					this.getOrderDetail()
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			})
		},
		// 拒绝订单
		rejectOrder(item) {
			uni.showModal({
				title: '确认拒绝',
				content: '确定要拒绝该订单吗？',
				success: (res) => {
					if (res.confirm) {
						rejectOrder({
							id: item.orderId
						}).then(res => {
							console.log(res)
							if (res.data.code === 200) {
								this.getOrderDetail()
								uni.showToast({ title: res.data.msg, icon: 'none' });
							}
						})
					}
				}
			});

		},
		// 联系客户
		contactCustomer(item) {
			getCustomerPhone({
				orderId: item.orderId,
			}).then(res => {
				console.log(res)
				if (res.data.code === 200) {
					uni.showToast({ title: res.data.msg, icon: 'none' });
				} else {
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			}).catch(err => {
				console.log(err)
			})
			//uni.showToast({ title: '联系客户', icon: 'none' });
		},
		// 取消订单
		cancelOrder(item) {
			uni.navigateTo({
				url: '/pages/order/cancelOrder?orderId=' + item.orderId + '&orderStatus=' + item.orderStatus
			})

		},
		// 我已出发/签到
		startGoOut(item) {
			startGoOut({
				orderId: item.orderId,
			}).then(res => {
				console.log(res)
				if (res.data.code === 200) {
					this.$refs.paging.reload();
					uni.showToast({ title: res.data.msg, icon: 'none' });
				} else {
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			})
		},
		// 我已到
		arriveSign() {
			this.showSignPopup = true;
			this.phoneInputValue = '';
			this.signError = '';
			// 清空验证码输入
			this.$nextTick(() => {
				if (this.$refs.codeInput) {
					this.$refs.codeInput.clear();
				}
			});
		},
		// 监听输入（yi-code组件触发）
		onPhoneInput(e) {
			// 兼容不同调用方式
			const value = e.detail ? e.detail.value : e;
			// 过滤非数字字符
			const filteredValue = String(value || '').replace(/[^0-9]/g, '');
			this.phoneInputValue = filteredValue;
			this.signError = '';
		},
		// 输入完成
		onSignComplete(value) {
			this.phoneInputValue = value;
			arriveSign({
				orderId: this.orderDetail.orderId,
				phoneTail: this.phoneInputValue,//手机号后4位
			}).then(res => {
				console.log(res)
				if (res.data.code === 200) {
					this.showSignPopup = false;
					this.$refs.paging.reload();
					uni.showToast({ title: res.data.msg, icon: 'none' });
				} else {
					this.signError = res.data.msg;
					uni.showToast({ title: res.data.msg, icon: 'none' });

				}
			})
		},
		// 开始服务
		startService(item) {
			if (item.projectType == 1) {
				uni.navigateTo({
					url: '/pages/order/businessFormal?orderId=' + item.orderId
				})
				return
			}

			//陪玩开始服务
			startService({
				orderId: item.orderId,
				imageUrls: []
			}).then(res => {
				console.log(res)
				if (res.data.code === 200) {
					this.getOrderDetail()
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			})
		},
		// 服务完成
		finishService(item) {

			const diff = new Date(item.appointmentEndTime).getTime() - new Date().getTime();
			this.diff = Math.floor(diff / (1000 * 60));
			if (this.diff > 6) {
				this.selectOrderDetail = item
				this.showModal2 = true
				return
			}
			this.finishService1(item)

		},
		// 确认提前结束订单
		finishService1(item) {
			finishService({
				orderId: item.orderId,
			}).then(res => {
				if (res.data.code === 200) {
					this.getOrderDetail()
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			})
		},
		// 提前结束
		cancelOrder2(item) {
			uni.showModal({
				title: '提示',
				content: '确定要提前结束该订单吗？',
				success: (res) => {
					if (res.confirm) {
						this.finishService(item)
					}
				}
			});
		},
		// 复制订单号
		copyOrderNo() {
			uni.setClipboardData({
				data: '5017036467099547354',
				success: () => {
					uni.showToast({ title: '复制成功' });
				}
			});
		},

	}
};
</script>

<style scoped lang="scss">
// 线下签到弹窗
.sign-wrap {
	width: 650rpx;
	background: #fff;
	border-radius: 16rpx;
	padding: 48rpx;

	.sign-error {
		font-weight: 400;
		font-size: 26rpx;
		color: #F53F3F;
	}



	.sign-title {
		font-weight: 400;
		font-size: 30rpx;
		color: #1D2129;
		text-align: left;
		margin-bottom: 32rpx;
	}

	.sign-input-wrap {
		display: flex;
		justify-content: center;
	}
}

.user-info {
	background: #fff;
	margin: 16rpx 32rpx 0 32rpx;
	border-radius: 16rpx;
	padding: 32rpx;

	.row1 {
		margin-top: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 400;
		font-size: 28rpx;
		color: #4E5969;
		text-align: left;


		.status {
			background: #FFF0ED;
			border-radius: 4rpx 4rpx 4rpx 4rpx;

			font-weight: 400;
			font-size: 24rpx;
			color: #FF531C;
			line-height: 34rpx;
			text-align: center;
		}

		.status1 {
			background: #FFF7E7;
			border-radius: 4rpx 4rpx 4rpx 4rpx;

			font-weight: 400;
			font-size: 24rpx;
			color: #FF7D00;
			line-height: 34rpx;

		}

		.status2 {
			background: #E8FFEA;
			border-radius: 4rpx 4rpx 4rpx 4rpx;

			font-weight: 400;
			font-size: 24rpx;
			color: #00B42A;
			line-height: 34rpx;
			text-align: center;
		}


		.status3 {
			background: #F7F8FA;
			border-radius: 4rpx 4rpx 4rpx 4rpx;

			font-weight: 400;
			font-size: 24rpx;
			color: #4E5969;
			line-height: 34rpx;
			text-align: center;
		}

	}

	.row2 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		font-weight: 400;
		font-size: 28rpx;
		color: #4E5969;
		text-align: left;

		.phone-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 40rpx;
			height: 40rpx;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			border: 1rpx solid #86909C;
		}

		.type {
			margin-left: 16rpx;
			display: flex;
			align-items: center;
		}
	}

	.row3 {
		display: flex;
		align-items: center;
		margin-top: 16rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #4E5969;
		margin-bottom: 24rpx;

		.cont {
			margin-left: 40rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #1D2129;
		}
	}

}

.row4 {
	background: #fff;
	margin: 16rpx 32rpx 0 32rpx;
	border-radius: 16rpx;
	padding: 32rpx;
	display: flex;
	height: 160rpx;

	.title {
		font-weight: 500;
		font-size: 30rpx;
		color: #1D2129;
	}

	.cont {
		display: flex;
		align-items: baseline;
		font-weight: 400;
		font-size: 28rpx;
		color: #1D2129;
	}
}

.refundStatus1 {
	margin-top: 16rpx;
	width: 96rpx;
	height: 36rpx;
	background: #FFF2E5;
	border-radius: 4rpx 4rpx 4rpx 4rpx;
	border: 1rpx solid #FF7D00;

	font-weight: 400;
	font-size: 24rpx;
	color: #FF7D00;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;

}

.refundStatus2 {
	width: 96rpx;
	height: 36rpx;
	background: #FFF2E5;
	border-radius: 4rpx 4rpx 4rpx 4rpx;
	border: 1rpx solid #F53F3F;

	font-weight: 400;
	font-size: 24rpx;
	color: #F53F3F;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;

}

.order-detail-page {
	background-color: #f5f5f5;
	min-height: 100vh;
}

// 风险提示栏
.risk-tip {
	padding: 26rpx 32rpx;
	background: #FFF8EC;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	display: flex;
	align-items: flex-start;

	.risk-text {
		font-weight: 400;
		font-size: 28rpx;
		color: #FF7D00;
	}
}

// 待接单状态卡片
.status-card {
	background: #fff;
	margin: 16rpx 32rpx 0 32rpx;
	border-radius: 16rpx;
	padding: 32rpx;

	.status-title {
		display: flex;
		align-items: center;

		.status-text {
			font-size: 40rpx;
			font-weight: 600;
			display: flex;
			align-items: center;
		}
	}

	.count-down {
		margin-top: 16rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #86909C;

		.red-text {
			color: #F53F3F;
			font-weight: 500;
		}
	}
}

// 订单已退金额
.refund-amount {
	background: #fff;
	margin: 16rpx 32rpx 0 32rpx;
	border-radius: 16rpx;
	padding: 32rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 400;
	font-size: 28rpx;
	color: #4E5969;

	.refund-amount-text {
		font-weight: bold;
		font-size: 32rpx;
		color: #1D2129;
		line-height: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;

	}
}

// 用户信息卡片
.user-info-card {
	background: #fff;
	margin: 0 20rpx;
	border-radius: 12rpx;
	padding: 24rpx;
	display: flex;
	flex-direction: column;
	gap: 20rpx;

	.user-row,
	.time-row,
	.address-row {
		display: flex;
		align-items: center;
		gap: 12rpx;
		font-size: 28rpx;
		color: #333;
	}

	.address-text {
		flex: 1;
	}

	.distance {
		color: #666;
	}
}

// 服务项目卡片
.service-card {
	background: #fff;
	margin: 20rpx;
	border-radius: 12rpx;
	padding: 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.service-left {
		display: flex;
		align-items: center;
		gap: 20rpx;

		.service-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
		}

		.service-info {
			display: flex;
			flex-direction: column;
			gap: 8rpx;

			.service-name {
				font-size: 30rpx;
				font-weight: 500;
			}
		}
	}

	.service-price {
		font-size: 32rpx;
		color: #333;
	}
}

// 费用明细
.price-card {
	background: #fff;
	margin: 16rpx 32rpx 0 32rpx;
	border-radius: 16rpx;
	padding: 32rpx;


	.title {
		font-weight: 400;
		font-size: 28rpx;
		color: #4E5969;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.title:last-child {
		margin-bottom: 0;
	}

	.cont {
		font-weight: 400;
		font-size: 28rpx;
		color: #FF4C12;
	}

}

// 订单信息卡片
.order-info-card {
	background: #fff;
	margin: 16rpx 32rpx 0 32rpx;
	border-radius: 16rpx;
	padding: 32rpx;

	.info-title {
		font-weight: 500;
		font-size: 32rpx;
		color: #1D2129;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		margin-top: 24rpx;

		.info-label {
			font-weight: 400;
			font-size: 28rpx;
			color: #4E5969;
		}

		.info-value {
			font-weight: 400;
			font-size: 28rpx;
			color: #1D2129;
			display: flex;
			align-items: center;
		}
	}
}

// 底部占位，防止按钮遮挡内容
.footer-placeholder {
	height: 160rpx;
}

// 底部按钮组
.bottom-btn-group {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	padding: 0 48rpx;
	padding-bottom: calc(20rpx + var(--safe-area-inset-bottom));
	display: flex;
	justify-content: space-between;

	// display: flex;
	// align-items: center;
	// justify-content: flex-end;

	.pay {
		margin-bottom: 24rpx;
		margin-top: 24rpx;
		// display: flex;
		// align-items: center;
		// justify-content: center;
		width: 196.67rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: rgba(51, 51, 53, 0.05);
		border-radius: 60rpx;
		text-align: center;

		font-weight: 400;
		font-size: 32rpx;
		color: #1D2129;
	}

	.alarm {
		background-color: #F53F3F;
		color: #FFFFFF;
	}

	.main {
		background-color: #333335;
		color: #FFFFFF;
	}

	.main1 {
		width: 250rpx;

	}
}
</style>