jp-xqjy/pages/news/index.vue

<template>
	<view>
		<view class="home-head">
			<view class="homeTab">
				<u-tabs :list="tabList" :current="current" @change="change" :show-bar="false" active-color="#333" inactive-color="#c4c0c0"></u-tabs>
			</view>
		</view>
		<view class="homeWrap">
			<u-swiper :list="wrapList" height="300" border-radius="24"></u-swiper>
		</view>
		<view class="newsList">
			<view class="newsList-item">
				<view class="newsList-text">
					<h4 class="u-line-2">还真别说，我幻想过，假如我脑子里有个大容量硬盘，我把维我把维我把维我把维</h4>
					<p>2021-12-01</p>
				</view>
				<u-image class="newsList-img" src="/static/img/user1.jpg" height="150" width="200" border-radius="10"></u-image>
			</view>
			<view class="newsList-item">
				<view class="newsList-text">
					<h4 class="u-line-2">还真别说，我幻想过，假如我脑子里有个大容量硬盘，我把维我把维我把维我把维</h4>
					<p>2021-12-01</p>
				</view>
				<u-image class="newsList-img" src="/static/img/user1.jpg" height="150" width="200" border-radius="10"></u-image>
			</view>
			
			<u-divider color="#B6BDC3" style="margin-top:20px;">已经到底了</u-divider>
		</view>
 	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					name: '通知公告'
				}, {
					name: '活动报道'
				},{
					name: '婚恋课堂'
				},{
					name: '问题解答'
				}],
				current: 0,
				wrapList: [{
						image: '/static/img/banner.png',
					},
					{
						image: '/static/img/banner.png',
					},
					{
						image: '/static/img/banner.png',
					}
				],
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-head{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 15px;  
		.homeAdd{
			color: #FF5E5E;
			span{
				margin-left: 3px;
			}
		}
	}
	.homeWrap{
		padding:0 15px;
	}
	.newsList{
		padding: 15px;
		.newsList-item{
			display: flex;
			margin-bottom: 24px;
			.newsList-text{
				flex: 1;
				min-width: 0;
				margin-right: 10px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				h4{
					font-weight: normal;
				}
				p{
					color: #999;
					font-size: 12px;
				}
			}
		}
	}
</style>