ChuangHengWx/components/CusNotice/index2.vue

<template>
	<view class="notice adffc" v-if="show">
		<view class="notice-box adffc">
			<view class="notice-box-title">问卷答题说明</view>
			<image class="notice-box-close" :src="imgBase+'remind_close.png'" @click="close"></image>
			<view class="notice-box-content">
				<div class="notice-box-content-p1" style="margin-top: 36rpx;">本次问卷分为两个阶段：先完成5道团队背景调研，再完成36道PERILL团队发展动态评估题。</div>
				<div class="notice-box-content-p2">This questionnaire has two stages: 5 team background questions followed by the 36-item PERILL assessment.</div>
				<div class="notice-box-content-p1">创衡国际PERILL团队发展动态评估旨在深入了解支撑高价值团队的关键因素。这些关键因素涵盖六个维度：宗旨和动机、外部流程/系统和结构、人际关系、内部流程/系统和结构、学习、领导力。</div>
				<div class="notice-box-content-p2">Transcend International PERILL Assessment is designed to provide insight into the key factors that underpin high value-creating team. It consists of six elements, focusing on Purpose & Motivation, External Systems and Processes, Relationships, Internal Systems and Processes, Learning Processes, Leadership Qualities and Behaviours.</div>
				<div class="notice-box-content-p1">您所填写的所有信息将被保密的。</div>
				<div class="notice-box-content-p2">All information will be kept confidential.</div>
				<div class="notice-box-content-p1">以下36个陈述是对团队理想状态的描述，请您对受测团队当下在每项描述上所呈现的实际表现从两个角度进行打分：</div>
				<div class="notice-box-content-p2">The following 36 statements describe the ideal state of a team. Please score the actual performance of the team being tested on each statement from two perspectives:</div>
				<div class="notice-box-content-p1">1、同意度：1-5分共5个等级，假如您完全同意该团队当下达到了所描述的状态为5分，假如您完全不同意该团队当下达到了所描述的状态为1分</div>
				<div class="notice-box-content-p2">Agreement: There are 5 levels ranging from 1 to 5. Score of 5 if you completely agree that the team has reached the statement. Score of 1 if you completely disagree.</div>
				<div class="notice-box-content-p1">2、一年后期待：1-5分共5个等级，请评估团队在此项陈述方面一年后可达成的表现；一年后期待分不得低于现状评分。</div>
				<div class="notice-box-content-p2">Future expectation: Rate the performance the team can achieve in one year from 1 to 5. The future expectation score must not be lower than the current score.</div>
				<div class="notice-box-content-p1">完成这个问卷调查大约需要15-20分钟。如有任何疑问，欢迎添加大衡同学企业微信联系。</div>
				<div class="notice-box-content-p2">Completing these questions should take approximately 15-20 minutes. If you have any questions, please feel free to scan below QR code to contact with Transcend.</div>
				<div class="notice-box-content-info adffcac">
					<image class="img2" :src="imgBase+'dtsm_img2.png'"></image>
					<div class="notice-box-content-info-text">扫码添加大衡同学</div>
				</div>
			</view>
			<view class="notice-box-bottom">
				<view class="notice-box-bottom-btn" @click="handleKnow">我已知晓</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			show:{
				typeof:Boolean,
				default:false
			}
		},
		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: 53rpx 40rpx 182rpx;
				margin-top: 20rpx;
				&-p1{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #002846;
					line-height: 48rpx;
					margin-top: 30rpx;
				}
				&-p2{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #4D697E;
					line-height: 36rpx;
					margin-top: 10px;
				}
				&-info{
					width: 100%;
					padding-bottom: 38rpx;
					border: 1rpx solid #E6EAED;
					margin-top: 64rpx;
					.img2{
						width: 370rpx;
						height: 370rpx;
						margin-top: 63rpx;
					}
					&-text{
						width: 320rpx;
						height: 54rpx;
						background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/dtsm_img3.png') no-repeat;
						background-size: 100% 100%;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 24rpx;
						color: #7E3602;
						line-height: 54rpx;
						text-align: center;
						letter-spacing: 2rpx;
						margin-top: 35rpx;
					}
				}
			}
			&-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>