diagnosis_app/views/patientItems/index/index.vue

<template>
	<view class="content">
		<view class="title">
			<text class="tl-1">AI</text>
			<text>辅助诊断</text>
		</view>
		<view class="list">
			<view class="item" v-for="item in items" :key="item.id" @click="linkTo(item.id)">
				<view class="icon">
					<text class="zhcx-iconfont" :class="item.icon" :style="{color:item.color}"></text>
				</view>
				<view class="text">
					<text>{{item.name}}</text>
				</view>
				<view class="link">
					<text class="xiangzuo zhcx-iconfont"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"patient-index",
		data() {
			return {
				items:[
					{
						id:1,
						name:'医学影像检索',
						icon:"zhcx-icon-tupian",
						color:"#00bfff"
					},
					{
						id:2,
						name:'文本检索',
						icon:"zhcx-icon-sousuo",
						color:"#fa6400"
					},
					{
						id:3,
						name:'语音检索',
						icon:"zhcx-icon-yuyin",
						color:"#17b18f"
					}										
				]
			}
		},
		methods: {
			linkTo(id){	
				let type="image";
					if(id===2){
						type="text";
					}else if(id===3){
						type="voice";
					}
					uni.navigateTo({
						url:"/views/patientItems/search/index?type="+type
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		&{
			padding: 0 24upx;
		}
		.title {
			font-size: 38upx;
			padding: 58upx 0 49upx 0;
			font-weight: 600;
			.tl-1{
				color: #3384ff;
				padding-right: 8upx;
			}
		}
		.list{
			.item{
				height: 160upx;
				margin-top: 24upx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				position: relative;
				.icon{
					.zhcx-iconfont{
						font-size: 55upx;
					}
					padding-right: 79upx;
				}
				.text{
					font-size: 32upx;
					color: #333;
				}
				.link{
					position: absolute;
					right: 34upx;
				}
			}
		}
	}	
</style>