clsd/app/pages/job/company.vue

<template>
	<view>
		<view class="main">
			<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>
			</view>
		</view>
		<view class="bos">
			<view class="mtitle">公司介绍</view>
			<view class="item">淘宝店-有料素材店是一个基于UI界面设计师的素材模板售卖网店，面向设计社区，设计师、平面设计师和创意行业人员，在这里可以买到自己需要或者学习的设计素材，可供于学习使用。</view>
			<view class="item">这里是公司介绍信息文字示例，淘宝店-有料素材店是一个基于UI界面设计师的素材模板售卖网店，是要来面向设计社区，设计师、平面设计师和创意行业人员</view>
			<view class="rows">
				<view class="r50">
					<view class="int">
						<view class="out">
							<image src="../../static/a1.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="r50">
					<view class="int">
						<view class="out">
							<image src="../../static/a1.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="mtitle">更多信息</view>
			<view class="item b">公司地址：</view>
			<view class="item">北京市海淀区银谷大厦某某号楼某</view>
			<view class="item b">法定代表人：</view>
			<view class="item">杨从</view>
			<view class="item b">注册资金：</view>
			<view class="item">100万人民币</view>
			<view class="item b">公司行业：</view>
			<view class="item">传媒</view>
			<map style="width: 100%; height: 150px" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
		</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">
.ms {
	overflow: hidden;
	.mtitle {
		font-weight: bold;
		margin-bottom: 10px;
	}
	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;
		}
	}
}
.bos {
	background-color: white;
	padding: 20px;
	border-radius: 25px 25px 0px 0px;
	.mtitle {
		font-weight: bold;
		margin-bottom: 10px;
	}
	.item {
		font-size: 14px;
		padding-top: 7px;
	}
	.b{
		font-weight: bold;
	}
	.rows {
		overflow: hidden;
		margin-left: -5px;
		margin-right: -5px;
		margin-top: 15px;
		.r50 {
			.int {
				.out {
					padding: 5px;
					image{
						width: 100%;
						border-radius: 5px;
					}
				}
			}
		}
	}
	map {
		border-radius: 8px;
		overflow: hidden;
		margin-top: 15px;
	}
}
</style>