QianNiaoUser/components/PageDesign/components/Notice.vue

<template>
	<view class="Notice-view blanck-pop clearfix" :style="{ backgroundColor: modelData.bgColor, margin: modelData.padding * 2 + 'rpx auto' }" v-if="noticeData.content">
		<view @click="noticePop = true">
			<view class="notice-icon float_left"><image src="https://onlineimg.qianniao.vip/noticeicon.png" mode="aspectFill"></image></view>
			<view class="notice-main float_left">
				<u-notice-bar
					mode="horizontal"
					padding="18rpx 0"
					:volume-icon="false"
					:font-size="28"
					type="none"
					:speed="50"
					:color="modelData.textColor"
					:border-radius="12"
					:list="[noticeData.content]"
				></u-notice-bar>
			</view>
		</view>
		<u-popup
			v-model="noticePop"
			border-radius="18"
			mode="center"
			height="905"
			:custom-style="{
				background: 'rgba(0,0,0,0)'
			}"
		>
			<view class="mag-view">
				<view class="mag-top primary-bg"><image class="notice-i" src="https://onlineimg.qianniao.vip/notice-i.png" mode=""></image></view>
				<view class="msg-cont">
					<image class="msg-yun" src="https://onlineimg.qianniao.vip/notice-bg.png" mode=""></image>
					<view class="mag-tit">{{ noticeData.title }}</view>
					<scroll-view class="mag-main" scroll-y>{{ noticeData.content }}</scroll-view>
				</view>
				<view class="confirm-btn primary-btn-pain" @click="noticePop = false">我知道了</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: 'Notice',
	props: {
		modelData: {
			type: Object,
			default: () => {
				return {};
			}
		},
		noticeData: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			noticePop: false
		};
	},
	methods: {
		openPop() {
			this.noticePop = true;
		},
		closePop() {
			this.noticePop = false;
		}
	}
};
</script>
<style scoped lang="scss">
.Notice-view {
	width: 710upx;
	padding-right: 24upx;
	margin: 10upx auto;
	background-color: #ffffff;
	border-radius: 64upx;
	.notice-icon {
		width: 72upx;
		text-align: center;
		line-height: 64upx;
		height: 64upx;
		image {
			width: 30rpx;
			height: 32rpx;
			vertical-align: middle;
			transform: translate(10rpx, 4rpx);
		}
	}
	.notice-main {
		width: 608upx;
	}
}

.mag-view {
	text-align: center;
	transform: translateY(100rpx);
	background-color: #ffffff;
	width: 612rpx;
	border-radius: 18rpx;
	padding-bottom: 46rpx;
	.mag-top {
		height: 242rpx;
		border-radius: 18rpx;
		background-color: $uni-color-primary;
		width: 100%;
		position: relative;
		.notice-i {
			width: 422rpx;
			height: 312rpx;
			position: absolute;
			top: -100rpx;
			left: 140rpx;
		}
	}
	.msg-cont {
		padding: 0 50rpx;
		padding-top: 56rpx;
		position: relative;
		.msg-yun {
			position: absolute;
			width: 622rpx;
			height: 215rpx;
			left: 0;
			top: -116rpx;
			z-index: 1;
		}
		.mag-main {
			height: 200rpx;
		}
		.mag-tit {
			position: relative;
			z-index: 9;
			font-size: 38upx;
			font-weight: bold;
			padding-bottom: 30rpx;
		}
	}
	.confirm-btn {
		line-height: 90rpx;
		height: 90rpx;
		font-size: 34rpx;
		width: 506rpx;
		margin: 30rpx auto 0;
		border: 1px solid $uni-color-primary;
		color: $uni-color-primary;
		border-radius: 12rpx;
	}
}
</style>