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.ruleClassifyName }}
							</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 class="warning-box">
							<image src="@/static/images/index/tishi.png"/>
							<view class="warning-txt">请注意辨认信息真伪，拒绝交纳报名费、线下交易等要求，谨防上当受骗</view>
						</view>

					</view>
				</view>
			</view>

			<!-- 急聘 -->
			<view class="urgent-banner" v-if="info.isDue == 1">
				<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.welfareTag">
							<view class="jobRemarks-box-c-label-item"
								v-for="(item, index) in info.welfareTag ? info.welfareTag.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.companyAllName : '' }}</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="#016BF6" 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="#016BF6" style="margin-right: 20rpx;"
									size="28"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<!-- 职位招聘数据 -->
				<view class="postNum">
					<view style="font-size: 16px;font-weight: 600;">职位招聘数据</view>
					<view class="postNum-ul flex justify-around align-center">
						<view class="postNum-li">
							<view class="postNum-li-num align-center">34</view>
							<view class="postNum-li-txt">沟通过</view>
						</view>
						<view class="postNum-li ">
							<view class="postNum-li-num">34</view>
							<view class="postNum-li-txt">查看过</view>
						</view>
						<view class="postNum-li">
							<view class="postNum-li-num">34</view>
							<view class="postNum-li-txt">分享</view>
						</view>
						<view class="postNum-li">
							<view class="postNum-li-num">34</view>
							<view class="postNum-li-txt">收藏</view>
						</view>
					</view>
					<view style="font-size: 22rpx;color: rgba(102, 102, 102, 1);">职位发布时间：{{ info.createTime }}</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, 'update')"
				style="background-color: #ffffff;border: 1px solid #016bf6;color: #016bf6;">
				编辑
			</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, 'update')"
					style="background-color: #ffffff;border: 1px solid #016bf6;color: #016bf6;">
					编辑
				</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, 'update')"
					style="background-color: #ffffff;border: 1px solid #016bf6;color: #016bf6;">
					编辑
				</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: '/pages/my/jobPosting?postPushId=' + postPushId + '&type=' + type
			})
		},
		//取消招聘
		cancelProject() {
			let that = this
			uni.showModal({
				content: '确认取消该招聘？',
				title: '提示',
				confirmColor: '#016BF6',
				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;
}

.warning-box {
	background: rgba(255, 251, 232, 1);
	color: rgba(237, 106, 12, 1);
	font-family: Microsoft YaHei UI;
	font-size: 22rpx;
	font-weight: 400;
	letter-spacing: 0px;
	padding: 20rpx 32rpx;
	box-sizing: border-box;
	text-align: left;
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	.warning-txt{
		flex: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	image{
		width: 32rpx;
		height: 32rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
	}
}

.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: #016BF6;
			font-size: 24rpx;
			font-weight: 500;
		}
	}
}

.postNum {
	padding: 12rpx;
}

.postNum-ul {
	margin: 22px auto;
	font-family: DM Sans;
}

.postNum-li-num {
	font-size: 32rpx;
	font-weight: 600;
	line-height: 48rpx;
	text-align: center;
}

.postNum-li-txt {
	font-size: 26rpx;
	font-weight: 600;
	line-height: 48rpx;
	text-align: center;
}

.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>