ChuangHengWx/components/CusNotice/index.vue

<template>
	<view class="notice adffc" v-if="show">
		<view class="notice-box adffc">
			<view class="notice-box-title">{{title}}</view>
			<image class="notice-box-close" :src="imgBase+'remind_close.png'" @click="close"></image>
			<view class="notice-box-content">
				<u-parse :content='content' style="color: #667E90;font-size: 26rpx;line-height: 42rpx;"></u-parse>
			</view>
			<view class="notice-box-bottom">
				<view class="notice-box-bottom-btn" @click="handleKnow">{{btnText}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			title:{
				typeof:String,
				default:'问卷须知'
			},
			btnText:{
				typeof:String,
				default:'我已知晓'
			},
			show:{
				typeof:Boolean,
				default:false
			},
			content:{
				typeof:String,
				default:''
			}
		},
		data(){
			return {
				
			}
		},
		methods:{
			close(){
				this.$emit('close')
			},
			handleKnow(){
				this.$emit('handleKnow')
			}
		}
	}
</script>

<style scoped lang="scss">
	.notice{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .6);
		z-index: 1000;
		justify-content: flex-end;
		&-box{
			height: calc(100% - 317rpx);
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			position: relative;
			&-title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #002846;
				line-height: 36rpx;
				text-align: center;
				margin-top: 48rpx;
			}
			&-close{
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 48rpx;
				right: 30rpx;
			}
			&-content{
				overflow-y: auto;
				padding: 43rpx 40rpx 182rpx;
			}
			&-bottom{
				background: #FFFFFF;
				box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(0,0,0,0.07);
				padding: 20rpx 50rpx 54rpx;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				&-btn{
					width: 100%;
					height: 88rpx;
					background: #904A87;
					border-radius: 44rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 88rpx;
					text-align: center;
					letter-spacing: 2rpx;
				}
			}
		}
	}
</style>