smart-tourism/smart-ui-app/pages/other/about.vue

<template>
	<view>
		<view class="top"><image src="../../static/bj.jpg" mode="aspectFill"></image></view>
		<view class="content">
			<view class="title">
				<text class="mt">谢通门</text>
				县隶属于日喀则市，位于西藏自治区日喀则市西北部、雅鲁藏布江北岸。东邻南木林县和日喀则市桑珠孜区，北接那曲市申扎县，西邻昂仁县，南与萨迦县和拉孜县接壤。位于东经87°4′至89°1′，北纬29°18′至30°26′，县人民政府驻卡嘎镇。县城距日喀则市人民政府83千米。截至2014年，谢通门县辖1个镇、18个乡。总面积13960平方千米。
				谢通门县被命名为“四好农村路”全国
				<text class="mt">示范县。</text>
			</view>
			<view class="info">
				<view class="item">
					<view class="name" @click="phone()">
						联系电话
						<text class="tag">{{ item.helpPhone }}</text>
					</view>
				</view>
				<view class="item">
					<view class="name">
						所在地址
						<text class="tag">日喀则市</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			item: {}
		};
	},
	onLoad(e) {
		this.$http.request({
			url: this.$http.urls.getAboutUs,
			success: res => {
				console.log('asd:' + JSON.stringify(res));
				this.item = res.data.data.aboutUs;
			}
		});
	},
	methods: {
		phone() {
			uni.makePhoneCall({
				phoneNumber: this.item.helpPhone
			});
		}
	}
};
</script>

<style lang="scss">
.top {
	position: relative;
	height: 300px;
	color: white;
	image {
		width: 100%;
		height: 300px;
		position: absolute;
	}
}
.content {
	padding: 15px;
	.title {
		padding: 10px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		.mt {
			font-size: 25px;
			font-weight: bold;
			padding-left: 5px;
			padding-right: 5px;
		}
	}
	.info {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		margin-top: 10px;
		border-radius: 5px;
		.item {
			padding: 15px;
			border-bottom: 1px solid #f1f1f1;
			color: black;
			font-size: 15px;
			overflow: hidden;
			.tag {
				float: right;
				color: $dar2;
			}
		}
	}
}
</style>