besiweb/pages/dynamic/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)" :key="index">
							{{item.name}}
						</li>
					</ul>
				</view>
				<view class="right-nav">
					<image src="../../static/index/icon/notice_message_white_icon.png" class="index_search"></image>
				</view>
			</view>
		</view>
		<view class="uni-notice">
				 <swiper class="swiper" circular :autoplay="autoplay"
				 	:interval="interval" :duration="duration" indicator-active-color="#FF713F"
				 	indicator-color="transparent" vertical="true">
				 	<swiper-item v-for="(item,index) in notices" :key="index">
				 		<view class="swiper-item">
				 			<view class="notice">{{item.publish_at}}{{item.username}}{{item.title}}</view>
				 		</view>
				 	</swiper-item>
				 </swiper>
		</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="uni-list_avatar">
							<image :src="item.user.avatar" class="avatar"></image>
						</view>
						<view class="uni-list_info">
							<image class="icon" src="../../static/index/icon/recommend_tag_icon.png"></image>
							<view class="text_nickname" v-text="item.user.nickname"></view>
							<view class="text_time">{{item.publish_format_at}}</view>
							<view class="text_content">{{item.description}}</view>
							<view class="albums" v-if="item.albums && item.albums.length>0">
								<image v-for="(v,k) in item.albums" :key="k" class="album" :src="v"></image>
							</view>
							<view class="text_option">
								<view class="btn collect">
									<image class="icon" src="../../static/index/icon/heart_gray.png"></image><text v-text="item.collect">0</text>
								</view>
								<view class="btn comment">
									<image class="icon" src="../../static/index/icon/circle_leave_message.png"></image><text v-text="item.collect">0</text>
								</view>
								<view class="btn share">
									<image class="icon" src="../../static/index/icon/share_grey_common.png"></image>
								</view>
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<view class="uni-publish">
			<navigator url="/pages/dynamic/send">
				<image class="send" src="../../static/index/icon/gongxiu_notice_add.png"></image>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuIndex: 0,
				cateList: [
					{id:0, name: '推荐' },
					{id:1, name: '关注' },
				],
				autoplay: true,
				interval: 4000,
				duration: 1000,
				notices: [
					{id: 1, title: '日行一善，福慧增长；', username: '小xx', publish_at: '12:10'},
					{id: 2, title: '礼佛苹果，佛祖加持，所求皆满；', username: 'xx', publish_at: '11:50'},
					{id: 3, title: '放生鸽子，功德无量；', username: '清净x', publish_at: '11:10'},
					{id: 4, title: '佛前供灯，具大福报；', username: '悦xx', publish_at: '09:30'},
					{id: 5, title: '日行一善，福慧增长；', username: '小xx', publish_at: '15:05'},
					{id: 6, title: '超度琉璃，六时吉祥；', username: 'xx', publish_at: '19:40'},
				],
				dataList: [{
						id: 1,
						user: {
							id: 1,
							nickname: '妙慧当下观心',
							avatar: '../../static/index/headlines/1.jpg',
						},
						albums: [
							'../../static/index/headlines/2.jpg',
							'../../static/index/headlines/3.jpg',
							'../../static/index/headlines/4.jpg',
						],
						thumb: '../../static/index/headlines/5.jpg',
						title: '日行一善，福慧增长',
						description: "积德虽无人见，行善自有天知。人为善，福虽未至，祸已远离；人为恶，祸虽未至，福已远离；行善之人，如春园之草，不见其长，日有所长。",
						publish_at: "2021-05-24 11:20:12",
						publish_format_at: "1小时前",
						collect: 3,
						comment: 10,
						share: 6,
						content: '积德虽无人见，行善自有天知。人为善，福虽未至，祸已远离；人为恶，祸虽未至，福已远离；行善之人，如春园之草，不见其长，日有所长。',
					},
					{
							id: 2,
							user: {
								id: 2,
								nickname: '小帮手',
								avatar: '../../static/index/headlines/2.jpg',
							},
							albums: [
								'../../static/index/headlines/3.jpg',
								
							],
							thumb: '../../static/index/headlines/4.jpg',
							title: '积德行善',
							description: "积德虽无人见，行善自有天知。人为善，福虽未至，祸已远离；人为恶，祸虽未至，福已远离；行善之人，如春园之草，不见其长，日有所长。",
							publish_at: "2021-05-24 08:20:12",
							publish_format_at: "3小时前",
							collect: 2,
							comment: 8,
							share: 3,
							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: #fff;
		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 {
		position: relative;
	}
	.uni-list-item {
		padding: 20rpx 30rpx;
		margin-bottom: 8rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		position: relative;
		border-bottom: 2rpx solid #eee;
	}
	

	.uni-list_avatar {
		display: inline-block;
		width: 120rpx;
	}
	.uni-list_avatar .avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
		vertical-align: top;
		
	}
	.uni-list_info {
		display: inline-block;
		width: calc(100% - 130rpx);
		// margin-left: 10rpx;
		vertical-align: top;
		
		>.icon {
			width: 60rpx;
			height: 64rpx;
			position: absolute;
			top: 0;
			right: 0;
		}
	}
	.uni-list_info .albums .album {
		width: 30%;
		height: 200rpx;
		margin-right: 3%;
		display: inline-block;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
	}
	.uni-list_info .text_nickname {
		font-size: 36rpx;
		font-weight: bold;
	}
	.uni-list_info .text_time {
		color: #999;
		padding: 20rpx 0rpx;
	}
	.uni-list_info .text_content {
		font-size: 36rpx;
	}
	.uni-list_info .text_option {
		margin-top: 30rpx;
	}
	.uni-list_info .text_option .btn {
		width: 33%;
		display: inline-block;
		color: #999;
	}
	.uni-list_info .text_option .comment {
		text-align: center;
	}
	.uni-list_info .text_option .share {
		text-align: right;
	}
	.uni-list_info .text_option .btn .icon {
		width: 32rpx;
		height: 32rpx;
		vertical-align: middle;
		margin-right: 10rpx;
	}
	
	.uni-publish {
		position: fixed;
		right: 30rpx;
		bottom: 15%;
		z-index: 3;
	}
	.uni-publish .send {
		width: 120rpx;
		height: 120rpx;
	}
	.uni-list_text {
		padding-top: 10rpx;
	}
	
	.uni-list_text .text_time {
		color: #999;
	}

	.uni-notice {
		height: 84rpx;
		line-height: 84rpx;
		border-bottom: 2rpx solid #eee;
	}
	.uni-notice .notice {
		font-size: 32rpx;
		padding-left: 20rpx;
		color: #ccad51;
	}
</style>