shenweishi/pages/message/index.vue

<template>
	<view class="">
		<!-- <view class="renal_top">
			<img class="renal_friends" src="../../static/images/4.png" alt="" />
			<view>肾友知识</view>
		</view> -->
		
		<!-- <text class="renal_friends">肾友知识</text> -->
		<van-tabs :active="active" sticky color="#69d9bf" offset-top="80px" @click="vantabs">
			<van-tab v-for="index in 8" :title="'标签 ' + (index+1)" :name="index+1">
				<view class="knowledge" v-for="(item,i) in 6" :key="i">
					<view class="knowledge_box" style="">
						<view class="box_left" style="">
							<view style="" class="knowledge_title">领透圣卫士肾友知识小科普</view>
							<view class="author" style="">
								<text class='author_1'>圣妞儿</text>
								<text class='author_1'>阅读量:xxxxx</text>
							</view>
						</view>
						<view class="box_right" style="width: 30%;">
							<img style="width: 100%;height: 160rpx;" src="@/static/images/11.png" alt="" />
						</view>
					</view>
				</view>
			</van-tab>
		</van-tabs>
		
	</view>
</template>

<script>

	export default{
		data(){
			return{
				active:1,
			}
		},
		methods:{
			vantabs(e){
				this.active = e.target.name
				console.log('ccccc',this.active);
				console.log('bbbbbbb',e);
			},
		}
	}
</script>

<style>
	.renal_top{
		height: 4rem;
		vertical-align:bottom;
		padding: 20rpx;
		background: gainsboro;
	}
	.renal_friends{
		width: 10px;
		height: 10px;
		/* text-align: center; */
		position:relative;
		top: 0;
		left: 10px;
	}
	.knowledge{
		/* margin-top: 20rpx; */
	}
	.knowledge_box{
		/* margin-bottom: 20rpx; */
		display: flex;
		padding: 40rpx;
		border-bottom: 1px solid #f2f0f0b3;
		height: 160rpx;
		background: white;
		box-shadow: 0 0 5 f2f0f0b3;
		/* border-radius: 20rpx; */
	}
	.box_left{
		width: 70%;
	}
	.box_right{
		width: 30%;
	}
	.knowledge_title{
		height: 120rpx;
		font-size: 36rpx;
	}
	.author{
		height: 40rpx;
		font-size: 28rpx;
		display: flex;
		text-align: left;
	}
	.author_1{
		flex: 1;
	}
	.right_img{
		width: 100%;
		height: 160rpx;
	}
</style>