clsd/app/pages/job/detail.vue

<template>
	<view>
		<view class="main">
			<view class="title">快递装卸工</view>
			<view class="price">5000/月</view>
			<view class="desc">两班倒 · 需10人 · 学历不限 · 经验不限</view>
		</view>
		<view class="bos">
			<view class="ms" style="margin-top: 0px;">
				<view class="mtitle">职位描述</view>
				<view class="item">1、装车、卸货、扫码计重</view>
				<view class="item">2、3~4人装卸一辆17.5米的大货车，每车货物重33吨左右，每个小组装卸量约3辆车/天;</view>
				<view class="item">3、年龄要求18~45岁以内，低于18岁超过45岁均不安排:</view>
				<view class="item">4、底薪(保底货量)+奖金(超保底货量)，装蓰儱瘕卸多少吨货，给多少工资，做多得多，上不封顶5、免费住宿，伙食补贴12.5/天:</view>
				<view class="item">5、上班时间两个班次19:00~凌晨5:00，中途有休息，或凌晨12:00~早上9点，均为固定长期夜班。</view>
				<view class="item">6、暑假工/临时工勿扰</view>
			</view>
			<view class="ms" @click="detail()">
				<image src="../../static/favicon.png" mode="widthFix"></image>
				<view class="con">
					<view class="mti">广西龙坚贸易有限公司</view>
					<view class="address">南宁青秀山航洋城1433</view>
				</view>
				<text class="icon">&#xe62b;</text>
			</view>
			<map style="width: 100%; height: 150px" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
		</view>
		<view class="footer">
			<view class="td">
				<button class="btn">投递简历</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			latitude: 39.909,
			longitude: 116.39742,
			covers: [
				{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				},
				{
					latitude: 39.9,
					longitude: 116.39,
					iconPath: '../../../static/location.png'
				}
			]
		};
	},
	methods: {
		detail() {
			uni.navigateTo({
				url: '/pages/clsd/job/company'
			});
		}
	}
};
</script>

<style lang="scss">
.title {
	font-weight: bold;
}
.price {
	padding-top: 5px;
	font-size: 15px;
	font-weight: bold;
	color: #ff5722;
}
.desc {
	padding-top: 5px;
	font-size: 14px;
}
.bos {
	background-color: white;
	padding: 20px;
	border-radius: 25px 25px 0px 0px;
}
.ms {
	margin-top: 20px;
	overflow: hidden;
	.mtitle {
		font-weight: bold;
		margin-bottom: 10px;
	}
	.item {
		font-size: 14px;
		padding-top: 7px;
	}
	image {
		float: left;
		width: 55px;
		height: 55px;
		border-radius: 50%;
	}
	.con {
		float: left;
		padding-left: 10px;
		.mti {
			font-weight: bold;
			padding-bottom: 5px;
		}
		.address {
			font-size: 14px;
		}
	}
	.icon {
		float: right;
		margin-top: 14px;
	}
}
map {
	border-radius: 8px;
	overflow: hidden;
	margin-top: 15px;
}
.footer {
	position: fixed;
	width: 100%;
	bottom: 20px;
	.td {
		width: 100%;
		.btn {
			width: 60%;
		}
	}
}
</style>