ChuangHengWx/pagesHome/questionnaireEdit.vue

<template>
	<view class="default_page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='编辑问卷'></cus-header>
		<div class="box adfacjb" style="padding: 32rpx 24rpx 40rpx;">
			<div class="box-left">
				<div class="box-title">问卷名称</div>
				<div class="box-tip" style="margin-top: 32rpx;">{{'GW+MC PREILL36测评题库版本'}}</div>
			</div>
			<div class="box-right adfac">
				<text>预览</text>
				<image :src="imgBase+'my_arrow_right.png'"></image>
			</div>
		</div>
		<div class="box" style="padding: 32rpx 24rpx;">
			<div class="box-title">选择团队</div>
			<div class="box-team adfacjb">
				<div class="box-tip">{{'甜梦2025一期团队'}}</div>
				<image :src="imgBase+'my_arrow_right.png'"></image>
			</div>
		</div>
		<div class="box" style="padding: 32rpx 24rpx 0;">
			<div class="box-title">问卷作答时间设置</div>
			<div class="box-time adfacjb" style="margin-top: 32rpx;">
				<div class="box-time-left">开始时间</div>
				<div class="box-time-right adfac">
					<text>{{'2025-10-13 00:00'}}</text>
					<image :src="imgBase+'my_arrow_right.png'"></image>
				</div>
			</div>
			<div class="box-time adfacjb">
				<div class="box-time-left">截止时间</div>
				<div class="box-time-right adfac">
					<text>{{'2025-10-20 00:00'}}</text>
					<image :src="imgBase+'my_arrow_right.png'"></image>
				</div>
			</div>
		</div>
		<div class="box" style="padding: 32rpx 24rpx 18rpx;">
			<div class="box-title adfacjb">
				<text>限制每位用户提交次数</text>
				<u-switch v-model="limit" activeColor="#833478" size="38"></u-switch>
			</div>
			<div class="box-num adfacjb">
				<div class="box-num-title">可提交次数</div>
				<div class="box-num-right">
					<cus-number-box :min="1" :number="dto.submitNum" @valChange="valChange"></cus-number-box>
				</div>
			</div>
		</div>
		<div class="box" style="padding: 30rpx 24rpx 0;">
			<div class="box-title adfacjb">
				<text>团队人员</text>
				<div class="box-add">+ 添加</div>
			</div>
			<div class="box-user">
				<div class="box-user-item adfacjb" v-for="(item,index) in dto.userList" :key="index">
					<div class="box-user-item-left">
						<div class="box-user-item-left-name adfac">
							<text>{{'吴亦可'}}</text>
							<div class="type">{{'赞助人Sponsor'}}</div>
						</div>
						<div class="box-user-item-left-email">{{'123456789@qq.com'}}</div>
					</div>
					<image class="box-user-item-right" :src="imgBase+''"></image>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="zt_btn">确认发布</div>
		</div>
	</view>
</template>

<script>
	import CusNumberBox from '@/components/CusNumberBox/index.vue'
	export default {
		components:{ CusNumberBox },
		data(){
			return {
				limit:true,
				dto:{
					submitNum:1,
					userList:[1,1,1,1]
				}
			}
		},
		methods:{
			valChange(e){
				this.dto.submitNum = e;
			}
		}
	}
</script>

<style scoped lang="scss">
	.default_page{
		padding: 0 24rpx 182rpx;
		box-sizing: border-box;
		
		.box{
			background: #FFFFFF;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx rgba(229,231,235,0.5);
			border-radius: 24rpx;
			margin-top: 20rpx;
			
			&-title,&-title>text{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #002846;
				line-height: 32rpx;
			}
			&-tip{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #667E90;
				line-height: 32rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			&-left{
				width: calc(100% - 150rpx);
			}
			&-right{
				&>text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #33A7A7;
					line-height: 32rpx;
				}
				&>image{
					width: 32rpx;
					height: 32rpx;
					margin-left: 10rpx;
				}
			}
			&-team{
				margin-top: 31rpx;
				&>image{
					width: 36rpx;
					height: 36rpx;
				}
			}
			&-time{
				padding: 33rpx 0;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx rgba(229,231,235,0.5);
				&-left{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #002846;
					line-height: 32rpx;
				}
				&-right{
					&>text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #667E90;
						line-height: 32rpx;
					}
					&>image{
						width: 36rpx;
						height: 36rpx;
						margin-left: 10rpx;
					}
				}
			}
			&-num{
				margin-top: 65rpx;
				&-left{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #002846;
					line-height: 32rpx;
				}
			}
			&-add{
				width: 120rpx;
				height: 54rpx;
				border-radius: 27rpx;
				border: 1rpx solid #761E6A;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #761E6A;
				line-height: 54rpx;
				text-align: center;
			}
			&-user{
				margin-top: 21rpx;
				&-item{
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
					border-radius: 24rpx;
					padding: 30rpx 0 36rpx;
					&-left{
						&-name{
							text{
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 30rpx;
								color: #002846;
								line-height: 32rpx;
							}
							.type{
								background: #F8F4F8;
								border-radius: 21rpx;
								margin-left: 20rpx;
								padding: 5rpx 16rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 22rpx;
								color: #9F6196;
								line-height: 30rpx;
								text-align: center;
							}
						}
						&-email{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #667E90;
							line-height: 28rpx;
							margin-top: 20rpx;
						}
					}
					&-right{
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}
		
		.bottom{
			width: 100%;
			height: 162rpx;
			background: #FFFFFF;
			padding: 20rpx 50rpx;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 888;
		}
	}
</style>