yizhizan-h5/my/order/pay.vue

<template>
	<view>
		<!-- 固定顶部导航栏 -->
		<view class="fixed-header">
			<!-- 自定义导航栏 -->
			<view class="custom-navbar">
				<view class="navbar-content">
					<view class="nav-left" @click="goBack">
						<u-icon name="arrow-leftward" color="#333" size="32"></u-icon>
					</view>
					<view class="nav-title">职位详情</view>
					<view class="nav-right"></view>
				</view>
			</view>
		</view>
		
		<!-- 审核失败 -->
		<view v-if="info.status === 3">
			<!-- 审核状态提示 -->
			<view class="status-section">
				<view class="status-icon">
					<image src="../../static/images/index/redGantan.svg" class="status-icon-img"></image>
				</view>
				<view class="status-title">职位审核失败</view>
			</view>
			
			<!-- 职位信息卡片 -->
			<view class="job-info-card">
				<view class="job-header">
					<view class="job-title-section">
						<text class="job-title">{{info.stationName}}</text>
					</view>
					<view class="job-status">
						<text class="status-text">审核未通过</text>
					</view>
				</view>
				<view class="job-info">
					<text class="job-details">{{info.county}} {{info.education}} {{info.experience}} {{info.salaryRange}} {{info.postType}}</text>
				</view>
			</view>
			
			<!-- 失败原因 -->
			<view class="failure-reason-section">
				<view class="section-title">失败原因</view>
				<view class="reason-list">
					<view class="reason-item">
						<text class="reason-text">{{info.auditContent}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 其他状态 -->
		<view v-if="info.status !== 3">
			<view class="remarks flex justify-center">
				<view class="remarks-box flex justify-between align-center">
					<text style="color: rgba(1, 107, 246, 1);font-weight: bold;">{{info.status==1?'待审核':(info.status==2?'进行中':(info.status==3?'已拒绝':(info.status==4?'已取消':'已关闭')))}}</text>
					<text style="color: rgba(156, 164, 171, 1);font-size: 24rpx;">{{info.createTime}}</text>
				</view>
			</view>
			<view class="remarks flex justify-center" v-if="info.isOverdue==1">
				<view class="remarks-box flex justify-between align-center">
					<text style="color: #000000;font-weight: bold;">已到期</text>
					<text style="color: #000000;font-size: 24rpx;">{{info.overdueTime}}</text>
				</view>
			</view>
			<!-- 岗位要求 -->
			<view class="job flex justify-center">
				<view class="job-info flex justify-center">
					<view class="job-info-c">
						<view class="job-info-c-header">
							<view class="job-info-c-title">
								{{info.stationName}}
							</view>
							<view class="job-info-c-price">
								{{info.salaryRange}}
							</view>
						</view>

						<!-- 地址 -->
						<view class="job-info-c-address">
							<u-icon name="map" color="rgba(58, 57, 67, 1)" style="margin-right: 10rpx;" size="24"></u-icon>
							{{info.city}} {{info.county}} {{info.address}}
						</view>

						<view class="job-info-c-label flex align-center flex-wrap">
							<view class="job-info-c-label-item">
								{{info.experience}}
							</view>
							<view class="job-info-c-label-item">
								{{info.education}}
							</view>
							<view class="job-info-c-label-item">
								{{info.industry}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 急聘 -->
			<view class="urgent-banner">
				<view class="urgent-left-section flex align-center">
					<view class="urgent-star-icon-wrapper flex align-center justify-center">
						<u-icon name="star-fill" color="rgba(251, 231, 185, 1)" size="40rpx"></u-icon>
					</view>
					<view class="urgent-text-content">
						<view class="urgent-main-title">急聘职位 | 2天后到期</view>
						<view class="urgent-sub-description">急聘免费体验中,升级正式版享受更多权益</view>
						<view class="urgent-benefits flex align-center">今日剩余权益:5次沟通,0次查看 <u-icon name="arrow-right" color="#FFFFFF" size="20rpx" style="margin-left: 10rpx;"></u-icon></view>
					</view>
				</view>
				<view class="urgent-upgrade-button">
					升级正式版
				</view>
			</view>

			<!-- 岗位介绍 -->
			<view class="jobRemarks flex justify-center">
				<view class="jobRemarks-box flex justify-center">
					<view class="jobRemarks-box-c">
						<view class="jobRemarks-box-c-title flex align-center">
							<image src="/static/images/index/ins.png" class="title-icon"></image>
							<text>职位说明</text>
						</view>
						<view class="jobRemarks-box-c-label flex align-center flex-wrap" v-if="info.tag">
							<view class="jobRemarks-box-c-label-item" v-for="(item,index) in info.tag.split(',')" :key="index">
								{{item}}
							</view>
						</view>
						
						<view class="job-description">
							<view class="description-item">1.负责Amazon英国、欧洲站、制定推广与销售计划，达成团队要求的销售业绩；</view>
							<view class="description-item">2.做好数据的统计分析工作，收集、分析市场信息，竞争对手状况，并根据产品销售与排名变化，及时制定和调整产品的销售策略；</view>
							<view class="description-item">3.熟悉Amazon店铺操作，负责店铺产品编辑上传，精准把握关键词选择，负责标题，详情页面的优化；</view>
							<view class="description-item">4.熟悉Amazon平台规则，熟悉Amazon站内广告投放和促销式，站外促销，找红人营销等提高曝光率和转化率的引流方；</view>
							<view class="description-item">5.控制产品风险，合理规划FBA库存,及时合理处理滞销FBA库存；</view>
							<view class="description-item">6.对产品销售进行跟踪，分析，及时汇报销售中存在的问题，并给出可行性意见；</view>
							<view class="description-item">7.及时处理客户留言及回评，解答客户相关咨询与投诉，并进行问题整理统计分析，提高店铺的好评率，确保账号安全；</view>
							<view class="description-item">8.每月定期整理分析运营各项数据，并提出相应的合理化建议。</view>
						</view>
						
						<!-- <view class="jobRemarks-box-c-con" v-if="info.positionDetails">
							<view class="jobRemarks-box-c-con-item" v-html="info.positionDetails">
							</view>
						</view> -->
						
						<!-- <view class="jobRemarks-box-c-line"></view> -->
						
						<view class="jobRemarks-box-c-title flex align-center" style="margin-top: 25rpx;">
							<image src="/static/images/index/welfare.png" class="title-icon"></image>
							<text>岗位福利</text>
						</view>
						<view class="jobRemarks-box-c-label flex align-center flex-wrap" v-if="info.positionWelfare">
							<view class="jobRemarks-box-c-label-item" v-for="(item,index) in info.positionWelfare?info.positionWelfare.split(','):[]" :key="index">
								{{item}}
							</view>
						</view>
						<view class="jobRemarks-box-c-label flex align-center flex-wrap" v-else>
							<view class="jobRemarks-box-c-label-item">
								暂无
							</view>
						</view>
						
						<view class="job-description">
							<view class="description-item">1.完整的晋升机制，每年2次调薪机会；</view>
							<view class="description-item">2.满一年五天带薪年假；</view>
							<view class="description-item">3.每月员工下午茶；</view>
							<view class="description-item">4.各类大促活动有对应的激励方案；</view>
							<view class="description-item">5.丰厚的提成和年终奖励；</view>
							<view class="description-item">6.开设员工俱乐部:羽毛球、篮球、舞蹈、瑜伽等等。</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 企业简介 -->
			<view class="enterprise">
				<!-- 公司介绍卡片 -->
				<view class="company-intro-card" @click="goInfo(info.company.companyId)">
					<view class="company-avatar">
						<image :src="info.company?info.company.companyLogo:'../../../static/logo.png'"
							style="width: 95rpx;height: 95rpx;border-radius: 50%;" mode="aspectFill"></image>
					</view>
					<view class="company-info">
						<view class="company-name">{{info.company?info.company.companyName:''}}</view>
						<view class="company-details">{{info.company?info.company.companyPeople:''}} · {{info.company?info.company.companyScope:''}}</view>
					</view>
					<view class="company-arrow">
						<u-icon name="arrow-right" color="rgba(51, 51, 51, 1)" size="32"></u-icon>
					</view>
				</view>
				
				<!-- 地图区域 -->
				<view class="enterprise-box flex justify-center">
					<view class="enterprise-box-c">
						<view class="enterprise-box-c-bto flex align-center justify-between" @click.stop="gotoMap()">
							<view class="enterprise-box-c-bto-l flex align-center">
								<u-icon name="map" color="#00B88F" style="margin-left: 20rpx;margin-right: 10rpx;" size="28"></u-icon>
								{{info.province}}{{info.city}}{{info.county}}{{info.address}}
							</view>
							<view class="enterprise-box-c-bto-r">
								<u-icon name="arrow-right" color="#00B88F" style="margin-right: 20rpx;" size="28"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部操作 -->
		<view class="btn flex justify-center" v-if="info.status==1">
			<view class="btn-box bgBox flex justify-center align-center" @click="cancelProject">
				取消招聘
			</view>
		</view>
		<view class="btn flex justify-center" v-if="info.status==4 || info.isOverdue==1" @click="updataServeType(info.postPushId,'save')">
			<view class="btn-box bgBox flex justify-center align-center">
				重新发布
			</view>
		</view>
		<view class="btn flex justify-center" v-if="info.status==3 && info.isOverdue==0">
			<view class="btn-box bgBox flex justify-center align-center" @click="updataServeType(info.postPushId,'updata')">
				编辑
			</view>
		</view>
		<view class="btn flex justify-center" v-if="info.status==2 && info.isOverdue == 0">
			<view class="btn-box flex justify-between">
				<view class="btn-box bgBox btn-boxs flex justify-center align-center" @click="updataServeType(info.postPushId,'updata')">
					编辑
				</view>
				<view class="btn-box bgBox btn-boxs flex justify-center align-center" @click="closeOpenJob('close')">
					关闭岗位
				</view>
			</view>
		</view>
		<view class="btn flex justify-center" v-if="info.status==5 && info.isOverdue == 0">
			<view class="btn-box flex justify-between">
				<view class="btn-box bgBox btn-boxs flex justify-center align-center" @click="updataServeType(info.postPushId,'updata')">
					编辑
				</view>
				<view class="btn-box bgBox btn-boxs flex justify-center align-center" @click="closeOpenJob('open')">
					开启岗位
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				postPushId:'',
				info:{},//岗位详情
			};
		},
		onLoad(option) {
			this.postPushId = option.postPushId
			this.getInfo()
		},
		methods:{
			//返回上一页
			goBack() {
				// 检查页面栈，如果没有可返回的页面，则跳转到职位管理
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack()
				} else {
					// 如果没有可返回的页面，跳转到职位管理页面
					uni.navigateTo({
						url: '/pages/jobManagement/jobManagement'
					})
				}
			},
			//修改岗位
			updataServeType(postPushId,type) {
				let companyStatus = uni.getStorageSync('companyStatus')
				if(companyStatus==1){
					uni.showToast({
						title:'企业认证审核中，请审核通过后操作!',
						icon:'none'
					})
					return
				}
				if(companyStatus==3){
					uni.showToast({
						title:'企业认证审核未通过，请重新认证!',
						icon:'none'
					})
					return
				}
				uni.navigateTo({
					url: '/package/addJob/addJob?postPushId=' + postPushId+'&type='+type
				})
			},
			//取消招聘
			cancelProject() {
				let that = this
				uni.showModal({
					content: '确认取消该招聘？',
					title: '提示',
					confirmColor:'#00B88F',
					success(iet) {
						if (iet.confirm) {
							let data = {
								postPushId: that.postPushId
							}
							that.$Request.postT('/app/postPush/cancelPostPush', data).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '取消成功',
										duration: 1500,
										complete() {
											that.getInfo()
										}
									})
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
								uni.hideLoading()
							})
						}
					}
				})
			},
			//关闭/开启岗位
			closeOpenJob(type){
				let that = this
				uni.showModal({
					title:'提示',
					content:type=='close'?'关闭岗位后，该岗位不会再推荐给用户，是否关闭？':'开启岗位后，该岗位会重新推荐给用户，是否开启？',
					complete(ret) {
						if(ret.confirm){
							that.$Request.getT('/app/postPush/closeOrOpen',{postPushId:that.postPushId}).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title:type=='close'?'已关闭':'已开启',
										duration: 1500,
										complete() {
											that.getInfo()
										}
									})
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
			},
			//拉起地图导航
			gotoMap(){
				let that = this
				uni.openLocation({
					latitude:that.info.lat,
					longitude:that.info.lng,
					address:that.info.province+''+that.info.city+''+that.info.county+''+that.info.address,
					name:that.info.address,
					// complete(ret) {
						
					// }
				})
			},
			/**
			 * 获取岗位详情
			 */
			getInfo(){
				this.$Request.getT("/app/postPush/selectPostPushDetails",{
					// userId:uni.getStorageSync('userId'),
					postPushId:this.postPushId
				}).then(res => {
					if(res.code==0){
						this.info = res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		// background-color: #F2F2F7;
		padding-top: 160rpx;
	}
	
	.fixed-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		background-color: #ffffff;
	}

	.custom-navbar {
		padding-top: 80rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		
		.navbar-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 88rpx;
			padding: 0 40rpx;
			
			.nav-left, .nav-right {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.nav-title {
				color: rgba(51, 51, 51, 1);
				font-family: DM Sans;
				font-size: 30rpx;
				font-weight: 700;
				line-height: 52px;
				letter-spacing: 0.5%;
				text-align: center;
			}
		}
	}
	
	.status-section {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 40rpx 0rpx 40rpx 0rpx;
		
		.status-icon {
			margin-right: 20rpx;
			display: flex;
			align-items: center;
			
			.status-icon-img {
				width: 48rpx;
				height: 48rpx;
			}
		}
		
		.status-title {
			color: rgba(29, 33, 41, 1);
			font-family: DM Sans;
			font-size: 36rpx;
			font-weight: 500;
			line-height: 48rpx;
			letter-spacing: 0%;
			text-align: left;
			display: flex;
			align-items: center;
		}
	}
	
	.job-info-card {
		background: #ffffff;
		border-radius: 12rpx;
		margin: 0 40rpx 40rpx 40rpx;
		padding: 32rpx;
		border: 0.5px solid rgba(227, 231, 236, 1);
		
		.job-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 16rpx;
			
			.job-title-section {
				flex: 1;
				
				.job-title {
					color: rgba(153, 153, 153, 1);
					font-family: DM Sans;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 44rpx;
					letter-spacing: 0.5%;
					text-align: left;
				}
			}
			
			.job-status {
				.status-text {
					color: rgba(153, 153, 153, 1);
					font-family: DM Sans;
					font-size: 18rpx;
					font-weight: 400;
					line-height: 20rpx;
					letter-spacing: -0.5px;
					text-align: right;
				}
			}
		}
		
		.job-info {
			.job-details {
				color: rgba(153, 153, 153, 1);
				font-family: DM Sans;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 36rpx;
				letter-spacing: 0.5%;
				text-align: left;
			}
		}
	}
	
	.failure-reason-section {
		margin: 0 40rpx;
		
		.section-title {
			color: rgba(31, 44, 55, 1);
			font-family: DM Sans;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 44rpx;
			letter-spacing: 0.5%;
			text-align: left;
			margin-bottom: 20rpx;
		}
		
		.reason-list {
			.reason-item {
				margin-bottom: 16rpx;
				
				.reason-text {
					color: rgba(153, 153, 153, 1);
					font-family: DM Sans;
					font-size: 24rpx;
					font-weight: 500;
					line-height: 48rpx;
					letter-spacing: 0.5%;
					text-align: left;
				}
			}
		}
	}
	
	.remarks{
		width: 100%;
		margin-top: 30rpx;
		.remarks-box{
			width: 686rpx;
			border-radius: 24rpx;
			background-color: #ffffff;
			padding: 0rpx 20rpx;
			color: red;
		}
	}
	.job{
		width: 100%;
		margin-top: 30rpx;
		
		.job-info{
			width: 686rpx;
			height: 100%;
			border-radius: 24rpx;
			background-color: #ffffff;
			.job-info-c{
				// width: 626rpx;
				width: 100%;
				height: 100%;
				padding: 30rpx 20rpx;
			}
			.job-info-c-header{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.job-info-c-address {
				color: rgba(156, 164, 171, 1);
				font-family: DM Sans;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 26rpx;
				letter-spacing: 0.5%;
				text-align: left;
				padding: 20rpx 0;
			}
			.job-info-c-title{
				color: rgba(58, 57, 67, 1);
				font-family: DM Sans;
				font-size: 48rpx;
				font-weight: 700;
				line-height: 60rpx;
				letter-spacing: 0px;
				text-align: left;
			}
			.job-info-c-label{
				// margin-top: 30rpx;
				.job-info-c-label-item{
					color: rgba(153, 153, 153, 1);
					font-family: DM Sans;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 20rpx;
					letter-spacing: 0.5%;
					padding: 12rpx;
					text-align: left;
					margin-right: 30rpx;
					border-radius: 12rpx;
					background: rgba(198, 198, 198, 0.1);
				}
			}
			.job-info-c-price{
				color: rgba(1, 107, 246, 1);
				font-family: DM Sans;
				font-size: 32rpx;
				font-weight: 700;
				line-height: 40rpx;
				letter-spacing: 0.5%;
				text-align: right;
			}
		}
	}
	.jobRemarks{
		width: 100%;
		padding: 0 20rpx;
		.jobRemarks-box{
			width: 100%;
			height: 100%;
			background-color: #ffffff;
			border-radius: 24rpx;
			.jobRemarks-box-c{
				width: 100%;
				height: 100%;
				padding: 30rpx 20rpx;
			}
			.jobRemarks-box-c-title{
				color: rgba(1, 107, 246, 1);
				font-size: 32rpx;
				padding: 8px 12px;
				border-radius: 36px;
				font-weight: 500;
				background: rgba(246, 246, 246, 1);
				
				.title-icon {
					width: 32rpx;
					height: 32rpx;
				}
			}
			.job-description {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				
				.description-item {
					color: rgba(97, 110, 124, 1);
					font-family: DM Sans;
					font-size: 26rpx;
					font-weight: 400;
					line-height: 16px;
					letter-spacing: 0px;
					text-align: left;
					margin-bottom: 8rpx;
				}
			}
			.jobRemarks-box-c-label{
				width: 100%;
				margin-top: 25rpx;
				.jobRemarks-box-c-label-item{
					color: rgba(1, 107, 246, 1);
					font-size: 20rpx;
					padding: 10rpx 15rpx;
					background-color: #F6F6F6;
					border-radius: 10rpx;
					margin-right: 20rpx;
					margin-bottom: 10rpx;
					background: rgba(252, 233, 220, 1);
				}
			}
			.jobRemarks-box-c-con{
				width: 100%;
				margin-top: 25rpx;
				.jobRemarks-box-c-con-item{
					margin-bottom: 10rpx;
					color: #141414;
					font-size: 28rpx;
					font-weight: 500;
				}
			}
			.jobRemarks-box-c-line{
				width: 100%;
				border: 1rpx solid #E6E6E6;
				margin-top: 25rpx;
			}
		}
	}
	.enterprise {
		width: 100%;
		margin-top: 25rpx;
		padding: 0 20rpx;

		.company-intro-card {
			width: 100%;
			background-color: #ffffff;
			border-radius: 24rpx;
			padding: 12rpx 24rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			border: 0.5px solid rgba(227, 231, 236, 1);

			.company-avatar {
				flex-shrink: 0;
				margin-right: 24rpx;
			}

			.company-info {
				flex: 1;

				.company-name {
					color: rgba(51, 51, 51, 1);
					font-size: 26rpx;
					font-weight: 600;
					line-height: 1.4;
					margin-bottom: 8rpx;
				}

				.company-details {
					color: rgba(153, 153, 153, 1);
					font-size: 24rpx;
					font-weight: 400;
					line-height: 1.4;
				}
			}

			.company-arrow {
				flex-shrink: 0;
				margin-left: 48rpx;
			}
		}

		.enterprise-box {
			width: 100%;
			background-color: #ffffff;
			height: 100%;
			padding-bottom: 25rpx;
			border-radius: 24rpx;

			.enterprise-box-c {
				width: 100%;
				height: 100%;
			}

			.enterprise-box-c-bto{
				width: 100%;
				// padding-top: 15rpx;
				padding-bottom: 15rpx;
				background-color: #EDFFFB;
				border-radius: 30rpx;
				margin-top: 20rpx;
				color: #00B88F;
				font-size: 24rpx;
				font-weight: 500;
			}
		}
	}
	
	.urgent-banner {
		width: 686rpx;
		height: 150rpx;
		background: linear-gradient(180deg, rgba(255, 181, 60, 1) 100%, rgba(251, 231, 185, 1) 50%);
		border-radius: 16rpx;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		margin: 0 auto 20rpx auto;

		.urgent-left-section {
			flex: 1;
			display: flex;
			align-items: center;

			.urgent-star-icon-wrapper {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				background: linear-gradient(90deg, rgba(255, 65, 86, 1) 0%, rgba(255, 102, 0, 0.35) 100%);
				margin-right: 24rpx;
				flex-shrink: 0;
			}

			.urgent-text-content {
				flex: 1;

				.urgent-main-title {
					color: rgba(255, 255, 255, 1);
					font-family: DM Sans;
					font-size: 24rpx;
					font-weight: 500;
					line-height: 32rpx;
					letter-spacing: 0%;
					text-align: left;
					margin-bottom: 8rpx;
				}

				.urgent-sub-description {
					color: rgba(255, 255, 255, 1);
					font-family: DM Sans;
					font-size: 20rpx;
					font-weight: 400;
					line-height: 26rpx;
					letter-spacing: 0%;
					text-align: left;
					margin-bottom: 6rpx;
				}

				.urgent-benefits {
					color: rgba(255, 255, 255, 1);
					font-family: DM Sans;
					font-size: 20rpx;
					font-weight: 400;
					line-height: 26rpx;
					letter-spacing: 0%;
					text-align: left;
				}
			}
		}

		.urgent-upgrade-button {
			background: linear-gradient(90deg, rgba(255, 65, 86, 1) 0%, rgba(255, 102, 0, 0.35) 100%);
			padding: 8rpx;
			border-radius: 8rpx;
			color: rgba(255, 255, 255, 1);
			font-family: DM Sans;
			font-size: 16rpx;
			font-weight: 400;
			line-height: 20rpx;
			letter-spacing: -0.5px;
			text-align: right;
			margin-left: 20rpx;
		}
	}
	
	.bgBox{
		color: #ffffff;
		background-color: rgba(1, 107, 246, 1);
		font-weight: bold;
		border-radius: 50rpx;
	}
	.btn{
		width: 100%;
		height: 88rpx;
		margin: 30rpx 0rpx;
		border-radius: 40rpx;
		.btn-boxs{
			width: 49% !important;
			
		}
		.btn-box{
			width: 686rpx;
			height: 100%;
			
		}
	}
</style>