hospital/app/pages/index/index.vue

<template>
	<view class="main">
		<image src="https://chenglantimes.com/prod-api/profile/upload/2024/07/27/1722074138272.jpg" mode="widthFix" class="banner"></image>
		<!--通知公告-->
		<view class="notice">
			<u-notice-bar color="#545555" :text="noticeList" :step="true" direction="column" mode="link" bgColor="white" speed="300" url="/pages/notice/index"></u-notice-bar>
		</view>
		<!--卡片菜单-->
		<view class="flow">
			<view class="item" @click="go('/pages/doctor/index')">
				<view class="out">
					<view class="int" style="height: 217px; background-color: #d9e8fd">
						<view class="icon" style="color: #4687ed">&#xe62d;</view>
						<view class="title">
							<view>医生团队</view>
							<view class="desc">权威团队服务</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="out" @click="go('/pages/department/index')">
					<view class="int" style="height: 87px; background-color: #ddf8f3">
						<view class="icon" style="color: #22b789">&#xe606;</view>
						<view class="title">
							<view>科室介绍</view>
							<view class="desc">众多先进设备</view>
						</view>
					</view>
				</view>
				<view class="out" @click="go('/pages/introduction/index')">
					<view class="int" style="height: 90px; background-color: #fff3e3">
						<view class="icon" style="color: #fe9b01">&#xe636;</view>
						<view class="title"></view>
						<view class="title">
							<view>医院指南</view>
							<view class="desc">医院简介</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--健康知识-->
		<view class="tg" @click="go('/pages/knowledge/index')">
			<image src="https://chenglantimes.com/prod-api/profile/upload/2024/07/27/1722076102395.jpg" mode="widthFix"></image>
			<view class="tit">
				<view>知识课堂</view>
				<view class="desc">每天一个健康小知识</view>
			</view>
		</view>
		<!--权威专家-->
		<view class="bos" style="margin-top: 8px" v-if="expertList.length > 0">
			<view class="gg">
				<view class="title">权威专家</view>
				<view class="bor"></view>
				<view class="more" @click="go('/pages/doctor/index')">
					<text>更多</text>
					<text class="icon">&#xe62b;</text>
				</view>
			</view>
			<u-scroll-list :indicator="true" indicatorColor="#e0e0e0">
				<view class="doctor">
					<view class="item" v-for="(item, index) in expertList" :key="index" @click="go('/pages/doctor/detail?id=' + item.userId)">
						<image :src="ip + item.avatar" mode="scaleToFill" class="avatar"></image>
						<view class="title">{{ item.nickName }}</view>
					</view>
				</view>
			</u-scroll-list>
		</view>
		<!--健康知识-->
		<view class="bos">
			<view class="gg">
				<view class="title">健康知识</view>
				<view class="bor"></view>
				<view class="more" @click="go('/pages/knowledge/index')">
					<text>更多</text>
					<text class="icon">&#xe62b;</text>
				</view>
			</view>
			<view class="knowledgeList">
				<view class="item" v-for="(item, index) in knowledgeList" :key="index" @click="go('/pages/knowledge/detail?id=' + item.id)">
					<view class="title omit">
						<text class="icon" v-if="item.top === 1">&#xe61f;</text>
						<text>{{ item.title }}</text>
					</view>
					<view class="desc">
						<text>{{ item.type }}</text>
						<text>{{ item.createTime.substring(5, 10) }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			ip: this.http.ip,
			noticeList: ['医院开通线上小程序啦，快来体验吧', '首次使用如何绑定就诊卡'],
			expertList: [],
			knowledgeList: []
		};
	},
	onLoad() {
		this.getData();
	},
	methods: {
		getData() {
			this.http.request({
				url: '/app/home/index',
				success: (res) => {
					this.knowledgeList = res.data.data.knowledgeList;
					this.expertList = res.data.data.expertList;
				}
			});
		},
		go(url) {
			uni.navigateTo({ url: url });
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: white;
}
.banner {
	width: 100%;
	border-radius: 7px;
}
.notice {
	margin-top: 5px;
	border-radius: 5px;
	overflow: hidden;
}
.flow {
	padding-top: 5px;
	margin-left: -5px;
	margin-right: -5px;
	overflow: hidden;
	.item {
		border-radius: 10px;
		float: left;
		width: 50%;
		.out {
			padding: 5px;
			.int {
				padding: 15px;
				background-color: white;
				overflow: hidden;
				border-radius: 9px;
				text-align: center;
				position: relative;
				.icon {
					margin: 0 auto;
					line-height: 39px;
					color: $main-color;
					font-size: 57px;
					position: absolute;
					right: 10px;
					bottom: 20px;
				}
				.title {
					padding-top: 8px;
					float: left;
					font-size: 18px;
					text-align: left;
					font-weight: bold;
					.desc {
						font-size: 14px;
						padding-top: 5px;
						color: $font-c;
						font-weight: normal;
					}
				}
			}
		}
	}
}
.tg {
	margin-top: 5px;
	overflow: hidden;
	image {
		width: 100%;
		border-radius: 50px;
	}
	.tit {
		text-align: left;
		float: left;
		margin-top: -60px;
		left: 116px;
		position: relative;
		font-weight: bold;
		color: white;
		font-size: 18px;
		.desc {
			font-size: 14px;
			font-weight: normal;
		}
	}
}
.bos {
	background-color: white;
	border-radius: 7px;
	overflow: hidden;
	padding: 12px 0px 0px 0px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
	padding: 12px;
	margin-top: 12px;
	.gg {
		font-weight: bold;
		margin-bottom: 5px;
		overflow: hidden;
		.title {
			margin-left: 10px;
		}
		.bor {
			width: 5px;
			height: 12px;
			background-color: $main-color;
			border-radius: 20px;
			float: left;
			margin-top: -16px;
		}
		.more {
			float: right;
			font-size: 14px;
			font-weight: normal;
			margin-top: -20px;
		}
	}
	.doctor {
		display: flex;
		.item {
			padding-top: 10px;
			font-size: 15px;
			width: 105px;
			text-align: center;
			image {
				width: 80px;
				height: 105px;
				border-radius: 5px;
			}
			.title {
				padding-top: 3px;
				font-size: 14px;
			}
		}
	}
	.knowledgeList {
		.item {
			padding: 10px 0px 10px 0px;
			border-bottom: 1px solid $line;
			&:last-child {
				border: 0px;
			}
			.title {
				font-size: 15px;
			}
			.desc {
				font-size: 14px;
				padding-top: 5px;
				color: #909090;
				text {
					padding-right: 25px;
				}
			}
		}
	}
}
</style>