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()"> 更多
					<uni-icons type="right" color="darkgray" size="15"></uni-icons>
				</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 uniIcons from '../uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
	import yxpTxtScroll from '../components/yxp-txt-scroll/yxp-txt-scroll.nvue'
	import {
		getNoticeList,
	} from '@/api/common'
	export default {
		components: {
			uniIcons,
			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>