hospital/app/pages/index/index.vue

<template>
	<view class="main">
		<image src="https://axure-file.lanhuapp.com/md5__f93627286149f825890eb821ab5d5abb.png" mode="widthFix" class="banner"></image>
		<view class="flow">
			<view class="item" @click="go('/pages/introduction/index')">
				<view class="out">
					<view class="int">
						<view class="icon" style="color: rgb(72, 154, 253)">&#xe775;</view>
						<view class="title">医院介绍</view>
					</view>
				</view>
			</view>
			<view class="item" @click="go('/pages/department/index')">
				<view class="out">
					<view class="int">
						<view class="icon" style="color: rgb(72, 154, 253)">&#xe752;</view>
						<view class="title">科室介绍</view>
					</view>
				</view>
			</view>
			<view class="item" @click="go()">
				<view class="out">
					<view class="int">
						<view class="icon" style="color: rgb(72, 154, 253)">&#xe6a3;</view>
						<view class="title">医生介绍</view>
					</view>
				</view>
			</view>
			<view class="item" @click="go('/pages/knowledge/index')">
				<view class="out">
					<view class="int">
						<view class="icon" style="color: rgb(72, 154, 253)">&#xe69a;</view>
						<view class="title">健康知识</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			ip: this.http.ip,
			user: {}
		};
	},
	onShow() {},
	onLoad() {
		this.getData();
	},
	methods: {
		getData() {},
		go(url) {
			uni.navigateTo({ url: url });
		}
	}
};
</script>

<style lang="scss">
.banner {
	width: 100%;
	border-radius: 7px;
	margin-top: -10px;
}
.flow {
	padding-top: 10px;
	overflow: hidden;
	margin-left: -5px;
	margin-right: -5px;
	.item {
		border-radius: 10px;
		overflow: hidden;
		float: left;
		width: 50%;
		.out {
			padding: 5px;
			.int {
				padding: 15px;
				background-color: white;
				overflow: hidden;
				border-radius: 9px;
				text-align: center;
				.icon {
					margin: 0 auto;
					width: 40px;
					height: 40px;
					padding: 10px;
					line-height: 39px;
					color: $main-color;
					box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
					border-radius: 50%;
					font-size: 27px;
				}
				.title {
					padding-top: 8px;
				}
			}
		}
	}
}
</style>