<template>
	<view class='app'>
		<view class="card">
			<view class="toptitle">
				<image src="../../static/shipin.png" mode=""></image>
				<view class="title">
					视频
				</view>
			</view>
			<view class="items">
				<view class="item">
					<image src="../../static/jnks.png" mode=""></image>
					<view class="text">
						基础护理技能操作
					</view>
				</view>
				<view class="item">
					<image src="../../static/jnks.png" mode=""></image>
					<view class="text">
						基础护理技能操作
					</view>
				</view>
				<view class="item">
					<image src="../../static/jnks.png" mode=""></image>
					<view class="text">
						基础护理技能操作
					</view>
				</view>
				<view class="item">
					<image src="../../static/jnks.png" mode=""></image>
					<view class="text">
						基础护理技能操作
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="toptitle">
				<image src="../../static/zhibo.png" mode=""></image>
				<view class="title">
					直播
				</view>
			</view>
			<view class="items">
				<view class="item">
					<image src="../../static/jnks.png" mode=""></image>
					<view class="text">
						基础护理技能操作
					</view>
				</view>
				<view class="item">
					<image src="../../static/jnks.png" mode=""></image>
					<view class="text">
						基础护理技能操作
					</view>
				</view>
				<view class="item">
					<image src="../../static/jnks.png" mode=""></image>
					<view class="text">
						基础护理技能操作
					</view>
				</view>
				<view class="item">
					<image src="../../static/jnks.png" mode=""></image>
					<view class="text">
						基础护理技能操作
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="toptitle">
				<image src="../../static/peixun.png" mode=""></image>
				<view class="title">
					培训
				</view>
			</view>
			<view class="items">
				<view class="item">
					<image src="../../static/jnks.png" mode=""></image>
					<view class="text">
						基础护理技能操作
					</view>
				</view>
				<view class="item">
					<image src="../../static/jnks.png" mode=""></image>
					<view class="text">
						基础护理技能操作
					</view>
				</view>
				<view class="item">
					<image src="../../static/jnks.png" mode=""></image>
					<view class="text">
						基础护理技能操作
					</view>
				</view>
				<view class="item">
					<image src="../../static/jnks.png" mode=""></image>
					<view class="text">
						基础护理技能操作
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.app {
		margin: 15rpx auto 0;
		padding: 0 0 60rpx;
		color: #000000;

		.card {
			width: 97%;
			margin: 0 auto 15rpx;
			background-color: #fff;

			.items {
				width: 92%;
				margin: 30rpx auto 0;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					margin-bottom: 55rpx;

					image {
						width: 190rpx;
						height: 190rpx;
						border-radius: 5rpx;
					}

					.text {
						width: 166rpx;
						font-size: 27rpx;
						font-weight: 500;
						line-height: 36rpx;
						margin: 0 auto;
					}
				}
			}

			.toptitle {
				width: 92%;
				margin: 0 auto;
				position: relative;
				height: 90rpx;
				border-bottom: 1rpx solid #E6E6E6;

				.title {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 50rpx;
				}

				image {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 0;
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}
</style>
