keysass_app/pages/index/outsourcing/cloudUserdetail.vue

<template>
	<view class="moreCould">
		<view class="topbanner">
			<image class="topbannerimg" src="../../../static/index/activeall.png" mode=""></image>
			<view class="topCon">
				<view class="topConT">
					<div class="topConTL">嵌入式软件测试工程师</div>
					<div class="topConTR">6-10K</div>
				</view>
				<view class="topConM">
					<div class="topConMit">
						<image src="../../../static/index/dd.png" mode=""></image>
						北京
					</div>
					<div class="topConMit">
						<image src="../../../static/index/dd.png" mode=""></image>
						北京
					</div>
					<div class="topConMit">
						<image src="../../../static/index/dd.png" mode=""></image>
						北京
					</div>
					<div class="topConMit">
						<image src="../../../static/index/dd.png" mode=""></image>
						北京
					</div>
					<div class="topConMit">
						<image src="../../../static/index/dd.png" mode=""></image>
						北京
					</div>
				</view>
				<view class="topConB">
					<div class="topConBit">五险一金</div>
					<div class="topConBit">加班补助</div>
					<div class="topConBit">餐补</div>
					<div class="topConBit">带薪年假</div>
				</view>
			</view>
			<view class="bocontent">
				<div class="bocontentBox">
					<div class="bocontentBoxT">职位描述</div>
					<div class="skillBox">
						<div class="skillBoxIt">C++test</div>
						<div class="skillBoxIt">Testbed</div>
						<div class="skillBoxIt">loadrunner</div>
						<div class="skillBoxIt">jmeter</div>
						<div class="skillBoxIt">C++</div>
					</div>
					<div class="bocontentBoxC">
						岗位要求：<br />
						1.本科及以上学历，计算机相关专业毕业；<br />
						2.对测试工作有兴趣，能够接受出差。
					</div>
					<div class="bocontentBoxC">
						岗位技能：<br />
						1.掌握软件测试技能、具备用例编写能力；<br />
						2.熟练掌握C、C++语言，有白盒测试经验，有单元测试经验者优先；（非常重要条件）<br />
						3.具有嵌入式培训、工作经历及相关行业测试经验者优先；<br />
						4.熟悉C++test、Testbed、loadrunner、jmeter等测试工具，或具有第三方测评经验者优先录用。
					</div>
					<div class="bocontentBoxC">
						岗位职责：<br />
						1.负责嵌入式软件的单元测试、集成测试、配置项测试和系统测试，完成测试计划，测试用例编写问题单提交，测试报告编写；<br />
						2.负责通用软件文档审查、功能测试、性能测试、兼容性、易用性、可靠性、信息安全性、维护性、可移植性测试，完成测试文档和测试报告编写；<br />
						3.完成内部测试和第三方软件测评。
					</div>
					<div class="bocontentBoxT">工作地点</div>
					<div class="bocontentBoxC">北京市昌平区国电投中央园区</div>
					<div class="bocontentBoxT">入职企业</div>
					<div class="bocontentBoxC">北京关键科技股份有限公司</div>
				</div>
			</view>
			<view class="bottomBtn">
				<div class="bottomB" @click="shenqing">
					申请职位
				</div>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			shenqing() {}
		}
	}
</script>

<style lang="scss" scoped>
	.moreCould {
		.topbanner {
			height: 250rpx;
			margin-bottom: 26rpx;
			position: relative;

			.topbannerimg {
				width: 100%;
				height: 100%;
			}

			.topCon {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				padding: 0 60rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.topConT {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.topConTL {
						font-weight: bold;
						font-size: 34rpx;
						color: #FFFFFF;
					}

					.topConTR {
						font-weight: bold;
						font-size: 34rpx;
						color: #FCA362;
					}
				}

				.topConM {
					display: flex;
					align-items: center;
					margin: 34rpx 0;

					.topConMit {
						display: flex;
						align-items: center;
						font-weight: 500;
						font-size: 22rpx;
						color: #FFFFFF;
						margin-right: 32rpx;

						image {
							width: 23rpx;
							height: 23rpx;
							margin-right: 7rpx;
						}
					}
				}

				.topConB {
					display: flex;
					align-items: center;

					.topConBit {
						width: 113rpx;
						height: 43rpx;
						line-height: 43rpx;
						text-align: center;
						background: rgba(140, 158, 177, 0.3);
						border-radius: 3rpx;
						font-weight: 500;
						font-size: 22rpx;
						color: #E6E6E6;
						margin-right: 18rpx;
					}

				}
			}

			.bocontent {
				padding: 0 25rpx;
				box-sizing: border-box;

				.bocontentBox {
					background: #FFFFFF;
					padding: 30rpx;
					box-sizing: border-box;

					.bocontentBoxT {
						font-weight: bold;
						font-size: 30rpx;
						color: #1A1A1A;
						margin-bottom: 27rpx;
					}

					.bocontentBoxC {
						font-weight: 500;
						font-size: 24rpx;
						color: #595959;
						line-height: 40rpx;
						margin-bottom: 30rpx;
					}

					.skillBox {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						margin-bottom: 30rpx;

						.skillBoxIt {
							height: 45rpx;
							line-height: 45rpx;
							background: #F2F3F7;
							border-radius: 3rpx;
							padding: 0 10rpx;
							margin-right: 17rpx;
							font-weight: 500;
							font-size: 23rpx;
							color: #4D4D4D;
						}
					}
				}
			}

			.bottomBtn {
				height: 120rpx;
				background: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 32rpx;
				.bottomB {
					width: 700rpx;
					height: 70rpx;
					background: #1778F7;
					border-radius: 6rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 70rpx;
					text-align: center;
				}
			}
		}

	}
</style>