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:`“您正在准备激活一次ＰＥＲＩＬＬ團隊發展動態評估问卷调研，这是创衡版权所有的团队发展诊断评估模型，其中的诊断、分析过程将由“创衡团队教练助手”基于创衡独创的团队教练方法及PERILL诊断模型及知识库来完成，为了更好地辅助你以及团队成员结合问卷陈述评估团队发展动态，我们要请您设置问卷对应团队的各项属性信息，这些信息将被保存在问卷对应的项目信息中，你可以选择一个既有的项目来复用相关设置，也可以新建一个项目来创建一组新的团队属性信息。<br>
<br>
如果您激活的是基础版问卷，项目属性信息设置完成后，您可以直接开始填写问卷；<br>
如果您激活的是专业版或专家版（敬请期待）问卷，项目属性信息设置完成后，您可以点击“转发问卷”按钮，将问卷链接转发给需要填写问卷的团队成员伙伴。<br>
<br>
⚠️注意：专业版问卷仅有配置在「被教练团队人员清单」中的成员可以做答，请确保每个用户的关键联系信息：「手机号」、「邮箱地址」填写准确；两者至少填写一项；为便于用户信息核对，优先提供「手机号」信息，如果没有，请至少确保「邮箱地址」准确提供。<br>
创衡承诺所有问卷过程中涉及的用户信息，包括但不限于「微信号」「手机号」「邮箱地址」，仅被用于对应问卷填写及分析，并确保这些信息被安全管控，不被除了问卷创建者以及问卷团队以外的任何第三方（包括创衡及其成员）所接触和使用，具体参见「“ＰＥＲＩＬＬ團隊發展動態評估-小程序”用户隐私协议」”
`
			}
		},
		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: linear-gradient( 90deg, #33A7A7 0%, #64BBBB 100%);;
					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>