uni-zhihuikuangshan-2/components/openingNotice/openingNotice.vue

<template>
	<view>
		<uni-popup ref="popup">
			<view class="box">
				<view class="content">
					<view class="title">
						<view class="icon">
							<image src="./icon/icon.png" mode="scaleToFill"></image>
						</view>
						<view class="text" v-if="data.title != ''">{{data.title || '通知'}}</view>
						<view class="close"  @click.stop="maskClick()">
							<uni-icons type="closeempty" size="26" color="#ccc"></uni-icons>
						</view>
					</view>
					<scroll-view scroll-y>
						<view class="inner">
							<view v-html="data.content"></view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "openingNotice",
		data() {
			return {
				data: {}
			};
		},
		mounted() {
			this.get_notify_getNotifyOne()
		},
		methods: {
			get_notify_getNotifyOne() {
				this.$api.notify_getNotifyOne({

				}).then((res)=>{
					// console.log(res)

					if(res.data.code == 0 && res.data.data != null){
						this.data = res.data.data

						this.$refs.popup.open('top')

						setTimeout(()=>{
							// this.$refs.popup.close()
						},4000)
					}else{
						// console.log("已读")
					}

				})
			},
			maskClick(){
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss">
	.box {
		height: 100vh;
		display: flex;
		align-items: center;
	}

	.content {
		z-index: 99;
		margin: 0 auto;
		width: 700rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;

		box-sizing: border-box;
		padding: 25rpx;

		.title {
			position: relative;
			
			height: 90rpx;
			line-height: 90rpx;
			font-size: 38rpx;
			font-weight: 700;
			text-align: center;
			
			padding-top: 20rpx;

			.icon {
				position: absolute;
				top: -160rpx;
				left: 0;

				image {
					width: 218rpx;
					height: 193rpx;
				}
			}
			.text{
				border-bottom: 1rpx solid #E1E5E9;
			}
			.close{
				position: absolute;
				top: -10rpx;
				right: 0;
			}
		}

		.inner {
			height: 50vh;
			// text-indent: 2rem;
			
			box-sizing: border-box;
			padding: 20rpx 0;
		}
	}
</style>