<template>
	<div class="home">
		<div class="search">
			<div class=" container">
				<router-link to="search"
          ><img src="../assets/search1.png" />输入搜索关键词</router-link
        >
			</div>
		</div>

		<van-tabs class="order_tab">
			<van-tab v-for="item in list" :key="item.tit">
				<template #title>
					{{item.tit}}
				</template>
					<ul>
						<li v-for="(xzks) in item.list" :key="xzks.index">
							<van-cell :title="xzks.bt" is-link :to="xzks.url" />
						</li>
					</ul>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
	export default {
		components: {
		},
		mounted() {
			console.log(this.$route.meta.title);
			this.title = this.$route.meta.title
		},
		data() {
			return {
				active: 0,
				title: '',
				flag: false,
				list: [{
						tit: '内科',
						list: [
							{bt: '普通内科',
								url:'/Guke_yy',
							},
							{
								bt: '普通内科',
								url:'/Guke_yy',
							},
							{
								bt: '普通内科',
								url:'/Guke_yy',
							},
							{
								bt: '普通内科',
								url:'/Guke_yy',
							},
						]
					},
					{
						tit: '外科',
						list: [
							{
								bt: '普通外科',
								url:'/Guke_yy',
							},
							{
								bt: '普通外科',
								url:'/Guke_yy',
							},
							{
								bt: '普通外科',
								url:'/Guke_yy',
							},
						]
					},
					{
						tit: '放射科',
						list: [
							{
								bt: '普通放射科',
								url:'/Guke_yy',
							},
							{
								bt: '普通放射科',
								url:'/Guke_yy',
							},
							{
								bt: '普通放射科',
								url:'/Guke_yy',
							},
						]
					},
				],
			};
		}
	};
</script>


<style scoped lang="scss">
.search a {
  background: #F1F1F1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 64px;
  border-radius: 32px;
  font-size: 28px;
  color: #999;
  margin: 30px 0px;
}

.search a img {
  width: 28px;
  height: 28px;
  margin-right: 10px;
}

.van-tabs{
	display: flex;
}



::v-deep .van-tabs--line .van-tabs__wrap{ height: calc(100vh - 124px); overflow-y: auto;
width: 158px;}
::v-deep .van-tabs__nav--line{
 display: block;
 background: #E6E6E6;
}
::v-deep .van-tab{
	height: 116px;
	flex:inherit;
}
::v-deep .van-tab--active{
	background: #fff;
	position: relative;
}

::v-deep .van-tab--active::after{
	content: '';
	position: absolute;
	left: 0px;
	top: 50%;
	transform:translate(0 , -50%);
	width: 4px;
height: 40px;
	background: #46C3B0;
}

::v-deep .van-tabs__line{
	display: none;
}

::v-deep .van-tabs__content{
	
	width: calc(100% - 158px);
}

</style>
