yizhizan-h5/pages/jobManagement/jobDetail.vue

<template>
	<view class="job-detail-page">
		<!-- 固定顶部导航栏 -->
		<view class="fixed-header">
			<!-- 自定义导航栏 -->
			<view class="custom-navbar" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
				<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 class="main-content" :style="{ 
			marginTop: (12 + statusBarHeight + 88) + 'px',
			height: 'calc(100vh - ' + (12 + statusBarHeight + 88) + 'px)',
			overflowY: 'auto'
		}">
			<!-- 审核状态提示 -->
			<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">亚马逊运营</text>
					</view>
					<view class="job-status">
						<text class="status-text">审核未通过</text>
					</view>
				</view>
				<view class="job-info">
					<text class="job-details">深圳-西乡 本科 1-3年 10-15K·13薪 全职</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">1.这是一段由平台端填写的审核详情</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部重新发布按钮 -->
		<view class="bottom-action">
			<view class="republish-btn" @click="republishJob">
				<text class="republish-text">重新发布</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0 // 状态栏高度
		}
	},
	onLoad() {
		// 获取状态栏高度
		let systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 0;
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		republishJob() {
			// 跳转到重新发布页面
			uni.navigateTo({
				url: '/package/addJob/addJob'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #ffffff;
}

.job-detail-page {
	height: 100vh;
	overflow: hidden;
	background-color: #ffffff;
}

.fixed-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background-color: #ffffff;
}

.custom-navbar {
	// padding-top 已改为动态计算，在模板中通过 :style 设置
	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;
		}
	}
}

.main-content {
	padding: 0 40rpx;
	padding-bottom: 120rpx;
}

.status-section {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 40rpx;
	
	.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-bottom: 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 {
	.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;
			}
		}
	}
}

.bottom-action {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30rpx 40rpx;
	background: #ffffff;
	z-index: 9999;
	
	.republish-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.republish-text {
			color: rgba(255, 255, 255, 1);
			font-family: DM Sans;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 48rpx;
			letter-spacing: 0%;
			text-align: center;
		}
	}
}
</style>