zd_wechatApp/pages/index.vue

<template>


	<view>
		<view style="background-color: white;">
			<view style=" display: flex;">
				<text style="text-align:center;width: 35px;margin-left: 15px; margin-top: 10px;">
					公告
				</text>


				<yxp-txt-scroll :text="content" fontSize="28" duration="5000" delay="500" txtPadding="10"
					style=" margin: auto; width: 100%;" @onClick="goDetails"></yxp-txt-scroll>

				<view style=" text-align: right;width: 70px;margin-top: 10px;color: darkgray" @click="more()"> 更多
					<image src="../static/images/icon_right.png" style="width: 15px;height: 15px;" mode="widthFix">
					</image>
				</view>
			</view>
			<view class="notice" v-for="(item,index) in list" :key="index" v-if="index==0">
				<view class="justify-content">
					<view class="font-forty">
						{{item.noticeTitle}}
					</view>
					<view class="font-twenty-eight gray">
						{{item.createTime}}
					</view>
				</view>
				<view class="font-thirty-two black" style="margin: 30rpx 0;">
					<rich-text :nodes="item.noticeContent"></rich-text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import yxpTxtScroll from '../components/yxp-txt-scroll/yxp-txt-scroll.nvue'
	import {
		getNoticeList,
	} from '@/api/common'
	export default {
		components: {
			yxpTxtScroll
		},
		data() {

			return {
				list: [],
				content: [],
				noticeDetails: {},
			}
		},
		onLoad() {
			this.lists()
			uni.setNavigationBarTitle({
				title: ''
			})
		},
		methods: {
			goDetails(item) {
				uni.navigateTo({
					url: '/pages/notice/noticeDetail?params=' + encodeURIComponent(JSON.stringify(
						item))
				})
			},
			more() {
				uni.navigateTo({
					url: '/pages/notice/noticeList'

				});
			},
			lists() {
				uni.showLoading()
				getNoticeList('3', '1', '').then(res => { //查注意事项
					uni.hideLoading();
					if (res.code == '200') {

						if (res.rows.length > 0) {
							this.list = res.rows
						} else {
							this.$modal.msg('暂无数据')
						}

					} else {
						this.$modal.msg(res.msg)
					}

				})
				getNoticeList('1', '1', '').then(res => { //通知公告

					if (res.code == '200') {
						if (res.rows.length > 0) {
							this.noticeDetails = res.rows[0]
							this.content.push(
								res.rows[0]
							)
						} else {
							this.$modal.msg('暂无数据')
						}
					} else {
						this.$modal.msg(res.msg)
					}

				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.background {
		border: 15px solid hsla(0, 0%, 100%, .5);
		background: white;
		background-clip: padding-box;
		/*从padding开始往外面裁剪背景*/

	}

	.container {
		display: flex;
		margin-left: 10px;
		margin-top: 10px;
		margin-right: 10px;
		align-items: flex-start;
		justify-content: space-between;
	}




	.notice {
		margin: 20rpx;
		padding: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 17rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 10rpx;
	}

	.text {
		border-left: 15rpx solid #3857F3;
		padding-left: 20rpx;
	}
</style>