besiweb/pages/headlines/index.vue

<template>
	<view class="uni-main">
		<view class="sticky-nav">
			<view class="nav-bar">
				<view class="left-nav">
					<ul>
						<li v-for="(item,index) in cateList" :class="{active:!(index-menuIndex)}"
							@click="menuShow(index)">
							{{item.name}}
						</li>
					</ul>
				</view>
				<view class="right-nav">
					<image src="../../static/index/search_white_blod_big_icon.png" class="index_search"></image>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-item" v-for="(item,index) in dataList" :key="index">
				<view class="uni-list-item_box">
					<navigator :url="'./detail?id='+item.id">
						<view class="text_title">{{item.title}}</view>
						<view>
							<image :src="item.thumb" class="thumb"></image>
						</view>
						<view class="uni-list_text">
							<text class="text_time">{{item.publish_at}}</text>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuIndex: 0,
				cateList: [
					{id:0, name: '推荐' },
					{id:1, name: '法音' },
					{id:2, name: '开示' },
					{id:3, name: '故事' },
					{id:4, name: '入门' },
					{id:5, name: '禅艺' },
				],
				dataList: [{
						id: 1,
						thumb: '../../static/index/headlines/1.jpg',
						title: '宽运法师对话李家杰博士(下),如何做到自在生命',
						description: "般若智慧、慈悲宽容",
						publish_at: "2021-05-24 11:20:12",
						publish_format_at: "05-24 11:20",
						content: '宽运法师对话李家杰博士(下),如何做到自在生命',
					},
					{
						id: 2,
						thumb: '../../static/index/headlines/2.jpg',
						title: "文殊菩萨",
						description: "守护生肖：兔",
						publish_at: "2021-05-24 11:28:12",
						publish_format_at: "05-24 11:20",
						content: '详情',
					},
					{
						id: 3,
						thumb: '../../static/index/headlines/3.jpg',
						title: "观世音菩萨",
						description: "救苦救难",
						publish_at: "2021-05-23 11:20:12",
						publish_format_at: "05-24 11:20",
						content: '详情',
					},
					{
						id: 4,
						thumb: '../../static/index/headlines/4.jpg',
						title: "财神爷",
						description: "财运亨通",
						publish_at: "2021-05-21 10:20:12",
						publish_format_at: "05-24 11:20",
						content: '详情',
					},
					{
						id: 5,
						thumb: '../../static/index/headlines/6.jpg',
						title: "千手观音",
						description: "守护生肖：鼠",
						publish_format_at: "05-24 11:20",
						content: '详情',
					}
				],
			}
		},
		methods: {
			menuShow(index) {
				this.menuIndex = index;
			},
		}
	}
</script>
<style>
	page {
		background-color: rgb(247, 246, 242);
	}
</style>
<style lang="less" scoped>
	.uni-main {
		width: 100%;
		height: 100%;
		background-color: #f6f7f5;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}

	.sticky-nav {
		position: sticky;
		width: 100%;
		top: 0;
		z-index: 1;
	}
	
	.nav-bar {
		padding-top: 50rpx;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: linear-gradient(rgb(255, 152, 101), rgb(255, 122, 85));
		height: 125rpx;
	}
	
	.left-nav {
		ul {
			padding: 0;
			margin-left: 20rpx;
		}
	
		ul li {
			list-style: none;
			display: inline-block;
			height: 60rpx;
			line-height: 60rpx;
			width: 100rpx;
			text-align: center;
			color: rgb(255, 214, 205);
			font-size: 36rpx;
			font-weight: bold;
			padding-bottom: 4rpx;
		}
	
		.active {
			color: #fff;
			font-size: 44rpx;
			border-bottom: 4rpx solid #fff;
		}
	}

	.nav-box {
		width: 100%;
		padding-top: 90rpx;
		display: flex;
		align-items: center;
		background: linear-gradient(rgb(255, 152, 101), rgb(255, 122, 85));
		height: 135rpx;
		padding-bottom: 50rpx;

		.header-text {
			font-size: 45rpx;
			color: #333;
			font-weight: bold;
			width: 100%;
			text-align: center;
			margin-left: 20rpx;
		}

		.header_operate {
			width: 23px;
			height: 21px;
			float: right;
			margin-right: 20rpx;
		}
	}
	
	.right-nav {
		margin-right: 15rpx;
	
		.index_search {
			width: 45rpx;
			height: 45rpx;
			margin-right: 15rpx;
		}
	
		.index_info {
			width: 45rpx;
			height: 45rpx;
		}
	}

	.uni-list-item {
		padding: 20rpx 30rpx;
		margin-bottom: 8rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		position: relative;
	}

	.uni-list-item_box .thumb {
		width: 100%;
		height: 300rpx;
		border-radius: 4rpx;
	}

	.uni-list-item_box .text_title {
		font-size: 40rpx;
		// font-weight: bold;
		padding: 8rpx 0rpx;
	}

	.uni-list_text {
		padding-top: 10rpx;
	}
	
	.uni-list_text .text_time {
		color: #999;
	}

</style>