zd_wechatApp/pages/index.vue

<template>
	<view class="gg-container">
		<view class="gg-tit">
			<view class="gg-title">
				<image :src="loadImgSrc('logo-gg.png')" style="width: 100rpx; height: 71rpx;"></image>
				长春市贞达市政施工管理平台
			</view>
			<image :src="loadImgSrc('gg-bg.png')" style="width: 100%; position:absolute;height: 40vh;" />
			<view class="gg-body">
				<view class="gg-body-tt">
					<image :src="loadImgSrc('gg-lb.png')" style="width: 60rpx; height: 60rpx;margin-right: 10rpx;">
					</image>
					<view>公告</view>
				</view>
				
				<view class="container-gg">
					<view class="notice-text-box">
						<view class="notice-text-con">{{content1}}</view>
					</view>
				</view>
				<view
					style=" text-align: right;width: 50px;color: #fff; display: flex; justify-content: end;align-items: center;"
					@click="more()">
					更多
					<image :src="loadImgSrc('icon_right.png')" style="width: 15px;height: 15px;" mode="widthFix" />
				</view>
			</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" style="font-size: 42rpx; font-weight: bold;">
					{{item.noticeTitle}}
				</view>
				<view class="font-twenty-eight gray"
					style="display: flex; align-items: center; margin-top: 20rpx; color:#777;">
					<image :src="loadImgSrc('time.png')" style="width: 26rpx;height: 26rpx; margin-right: 15rpx;">
					</image> {{item.createTime}}
				</view>
			</view>
			<view class="font-thirty-two black" style="margin: 30rpx 0;">
				<rich-text :nodes="item.noticeContent"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getNoticeList,
	} from '@/api/common'
	export default {
		
		data() {

			return {
				list: [],
				content: [],
				content1: '',
				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]
							)
							this.content1 = res.rows[0].noticeTitle
						} else {
							this.$modal.msg('暂无数据')
						}
					} else {
						this.$modal.msg(res.msg)
					}

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.gg-container {
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.gg-tit {
		width: 100%;
		position: relative;
		top: 0;
		height: 40vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.gg-body {
		display: flex;
		position: absolute;
		bottom: 25rpx;
		width: 728rpx;
		height: 80rpx;
		background: linear-gradient(0deg, #90BDFF, #3F93FD, #20B9D5);
		border-radius: 40rpx;
		justify-content: center;
		align-items: center;

		.gg-body-tt {
			text-align: left;
			margin-left: 5px;
			width: 20%;
			display: flex;
			align-items: center;
			color: #FFFFFF;
			font-weight: bold;
			font-size: 30rpx;
		}
	}

	.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;
	}

	.gg-title {
		width: 100%;
		position: absolute;
		z-index: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
		font-weight: bold;
		color: #FFFFFF;
	}



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

	.text {
		color: white;
		padding-left: 20rpx;
	}


	.container-gg {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		/* #ifndef APP-PLUS */
		height: 100%;
		width: 100%;
		/* #endif */
	}

	.notice-text-box {
		display: flex;
		flex-direction: column;
		position: relative;
		/* #ifndef APP-PLUS */
		height: 100%;
		width: 100%;
		/* #endif */
		flex: 1;
		align-items: center;
		justify-content: center;
	}

	.notice-text-con {
		flex: 1;
		display: flex;
		color: white;
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: pre;
		-webkit-animation: scroll-left 4s infinite linear;
		animation: scroll-left 4s infinite linear;
		left: 0;
		padding-left: 100%;
		/* #endif */
		position: absolute;
		/* #ifdef APP-NVUE */
		left: 0;
		/* #endif */
	}

	/* #ifndef APP-NVUE */
	@-webkit-keyframes scroll-left {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}

		100% {
			-webkit-transform: translateX(-100%);
			transform: translateX(-100%);
		}
	}

	@keyframes scroll-left {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}

		100% {
			-webkit-transform: translateX(-100%);
			transform: translateX(-100%);
		}
	}

	/* #endif */
</style>