<template>
	<view class="news-page-info">
		<view class="tabs-info">
			<u-tabs :list="listTabs" @click="click"
			 lineColor="#387DF7"
			 lineWidth="35"
			 lineHeight="4"
			 :activeStyle="{
			 color: '#333333',
			 fontWeight: '600',
			 transform: 'scale(1.1)'
			}"
			:inactiveStyle="{
			 color: '#666666',
			 }"
			></u-tabs>
		</view>
		<view class="news-page-btn">
			<view class="btn-index">多选</view>
			<view class="btn-index">清空</view>
			<view class="btn-index">一键已读</view>
		</view>
		<view class="news-page-list">
			<view class="list-index" v-for="item in 5">
				<view class="list-index-img">
					<image style="width:80upx;height:80upx" src="../../static/images/woman.png" mode=""></image>
				</view>
				<view class="list-index-cen">
					<view class="cen-name">
						李沐沐
					</view>
					<view class="cen-text">
						收藏了你发布的课程···
					</view>
					
				</view>
				<view class="list-index-time">
					2022/9/20
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listTabs:[
					{name:'系统'},
					{name:'@我的'}
				],
				tab:1,
			}
		},
		methods: {
			click(item) {
				this.tab = item.index;
			},
			ubtab(num){
				this.tab = num
			}
		}
	}
</script>

<style scoped lang="scss">

	.news-page-info{
		background-color: #fff;
		.tabs-info{
			padding: 0 254upx;
		}
		.news-page-btn{
			height: 80upx;
			padding: 30upx 32upx 0 36upx;
			.btn-index{
				font-size: 28upx;
				color: #666666;
				float: right;
				margin-left: 20upx;
				padding: 6upx 32upx 6upx 28upx;
				border: 2upx solid rgba(153,153,153,0.2);
				border-radius: 26upx;
			}
			.btn-index:first-child{
				margin-left: 0;
				float: left;
			}
		}
		.news-page-list{
			padding: 0 32upx 0 36upx;
			box-sizing: border-box;
			.list-index{
				display: flex;
				padding: 40upx 0;
				border-bottom: 2upx solid rgba(153,153,153,0.1);;
				.list-index-img{
					width: 80upx;
				}
				.list-index-cen{
					margin-left: 30upx;
					width: 100%;
					.cen-name{
						font-size: 28upx;
						font-weight: 500;
						color: #333333;
						margin-top: 4upx;
					}
					.cen-text{
						font-size: 24upx;
						color: #999999;
						margin-top: 4upx;
					}
				}
				.list-index-time{
					margin-top: 4upx;
					width: 130upx;
					font-size: 24upx;
					color: #999999;
				}
			}
			
		}
	 
	}
</style>
