ChuangHengWx/pagesPublish/questionnairePreview.vue

<template>
	<view class="default_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='问卷预览'></cus-header>
		<view class="top">
			<view class="top-title">{{'GW+MC PREILL36测评题库版本'}}</view>
			<view class="top-progress adfac">
				<view class="top-progress-text">测评进度</view>
				<view class="top-progress-box">
					<view class="top-progress-box-current" :style="{'width':(0/36*100)+'%'}"></view>
				</view>
				<view class="top-progress-num"><span>{{0}}</span>/{{36}}</view>
			</view>
		</view>
		<view class="list">
			<question-item v-for="(item,index) in list" :key="index" :item="item"></question-item>
		</view>
		<view class="bottom adfacjb">
			<view class="zt_btn" @click="handleBack">返回</view>
		</view>
	</view>
</template>

<script>
	import QuestionItem from '@/components/QuestionItem/index3.vue'
	export default {
		components:{ QuestionItem },
		data(){
			return {
				list:[
					{
						question:'我们的团队成员可以清晰阐述团队的共享目的 We can collectively and clearly articulate our shared purpose',
						userAnswer:[
							{
								assessmentMethod:1,
								answer:'',
								questionOption:[
									{ questionOption:'1-强烈不同意（Strongly disagree）' },
									{ questionOption:'2-不同意(Disagree)' },
									{ questionOption:'3-中立(Neutral)' },
									{ questionOption:'4-同意(Agree)' },
									{ questionOption:'5-完全同意（Totally agree）' }
								]
							},
							{
								assessmentMethod:2,
								answer:'',
								questionOption:[
									{ questionOption:'1-强烈不同意（Strongly disagree）' },
									{ questionOption:'2-不同意(Disagree)' },
									{ questionOption:'3-中立(Neutral)' },
									{ questionOption:'4-同意(Agree)' },
									{ questionOption:'5-完全同意（Totally agree）' }
								]
							},
						]
					}
				],
			}
		},
		methods:{
			handleBack(){
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped lang="scss">
	.default_page{
		padding: 0 0 192rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		
		.top{
			padding: 40rpx 24rpx 50rpx;
			&-title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #002846;
				line-height: 51rpx;
			}
			&-progress{
				margin-top: 35rpx;
				&-text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #002846;
					line-height: 30rpx;
				}
				&-box{
					flex: 1;
					width: 100%;
					height: 14rpx;
					margin: 0 20rpx;
					background: #F0F2F8;
					border-radius: 8rpx;
					position: relative;
					&-current{
						height: 14rpx;
						background: #FFD750;
						border-radius: 8rpx;
						position: absolute;
						left: 0;
						top: 0;
					}
				}
				&-num{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #667E90;
					line-height: 26rpx;
					span{
						font-size: 36rpx;
						color: #199C9C;
						line-height: 36rpx;
					}
				}
			}
		}
			
		.list{
			flex: 1;
			padding: 0 24rpx;
			overflow-y: auto;
		}
		
		.bottom{
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(0,0,0,0.07);
			padding: 20rpx 40rpx 54rpx;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 1000;
			
			&-right{
				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>