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;">创衡国际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个等级，假如您认为所描述的状态对该团队当下非常重要为5分，假如您认为所描述的状态对该团队当下非常不重要为1分</div>
				<div class="notice-box-content-p2">Importance: There are 5 levels ranging from 1 to 5. Score of 5 if you believe that the statement is extremely significant for the team at this moment. Score of 1 if you believe it is very insignificant.</div>
				<div class="notice-box-content-p1">完成这个问卷调查大约需要8-10分钟。如有任何疑问，欢迎添加大衡同学企业微信联系。</div>
				<div class="notice-box-content-p2">Completing these questions should take approximately 10-15 minutes. If you have any questions, please feel free to contact Transcend by Wecom.</div>
				<div class="notice-box-content-info adffcac">
					<image class="img1" :src="imgBase+'dtsm_img1.png'"></image>
					<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: 17rpx;
					.img1{
						width: 100%;
						height: 410rpx;
					}
					.img2{
						width: 370rpx;
						height: 370rpx;
						margin-top: 40rpx;
					}
					&-text{
						width: 420rpx;
						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: 30rpx;
					}
				}
			}
			&-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>