弹窗滚动css，输入提示input应用

<template>
	<view class="container">
		<view class="opt-list">
			<view class="box">
				<view v-for="(fontItem,fontIndex) in fontList" :key='fontIndex' class="opt-item">
					<view class="name">
						{{fontItem.name}}
					</view>
					<input class="font" v-model="fontItem.txt" />
					<image class="img" v-if="fontIndex===2 " src="../../static/icon/right-.png" @click="batch"></image>
					<image class="img" v-if=" fontIndex===3 " src="../../static/icon/right-.png" @click="call"></image>

				</view>
			</view>
		</view>
		<view class="bot-list">
			<view class=" title">申报材料上传</view>
			<view class="txt">
				<text class="front">1. 请上传JPG/PNG格式图片或PDF文档。</text>
				<text class="front">2. 上传扫描件资料应包含已获得职称证书和本次申请报告。</text>
			</view>
			<view class="add">
			</view>
		</view>
		<view class="list sub">
			<view class="submit">提交</view>
		</view>
		<!-- 弹窗1 -->
		<view class="select-type" v-if="batchStutas">
			<view class="title">
				<image src="@/static/images/teach/cross.png" mode="widthFix" @click="close"></image>
			</view>
			<view class="active-title">申报批次</view>
			<view class="item" @click="type='secound'" :class="type=='secound'? 'item_':'item' ">
				<text>2020年第二批申报</text>
				<image src="/static/icon/gou.png" mode="widthFix" class="gou" v-if="type=='secound' "></image>
			</view>
			<view class="item" @click="type='first'" :class="type=='first'? 'item_':'item' ">
				<text>2019年第一申报</text>
				<image src="/static/icon/gou.png" mode="widthFix" class="gou" v-if="type=='first' "></image>
			</view>
			<view class="item" @click="type='third'" :class="type=='third'? 'item_':'item' ">
				<text>2018年第三申报</text>
				<image src="/static/icon/gou.png" mode="widthFix" class="gou" v-if="type=='third' "></image>
			</view>
			<view class="btn">
				<view class="left"@click="close">
					确认
				</view>
				<view class="right" @click="close">
					清空筛选
				</view>
			</view>
		</view>
		<!-- 弹窗1 -->
		<!-- 弹窗2 -->
		<view class="select-type" v-if="callStutas">
			<view class="title">
				<image src="@/static/images/teach/cross.png" mode="widthFix" @click="shut"></image>
			</view>
			<view class="active-title">申报职称</view>
			<view class="item" @click="unitype='one'" :class="unitype=='one'? 'item_':'item' ">
				<text>正高级</text>
				<image src="/static/icon/gou.png" mode="widthFix" class="gou" v-if="unitype=='one' "></image>
			</view>
			<view class="item" @click="unitype='two'" :class="unitype=='two'? 'item_':'item' ">
				<text>高级</text>
				<image src="/static/icon/gou.png" mode="widthFix" class="gou" v-if="unitype=='two' "></image>
			</view>
			<view class="item" @click="unitype='three'" :class="unitype=='three'? 'item_':'item' ">
				<text>一级</text>
				<image src="/static/icon/gou.png" mode="widthFix" class="gou" v-if="type=='three' "></image>
			</view>
			<view class="btn">
				<view class="left" @click="shut">
					确认
				</view>
				<view class="right" @click="shut">
					清空筛选
				</view>
			</view>
		</view>
		<!-- 弹窗2 -->
	</view>

</template>

<script>
	export default {
		data() {

			return {
				type: 'first',
				unitype:'two',
				isShow: 0,
				batchStutas: false,
				callStutas:false,
				fontList: [{
						name: '申请人姓名',
						txt: '唐赛赛'

					}, {
						name: '当前职称',
						txt: '中级教师'
					},
					{
						name: '申报批次',
						txt: '2021年第一批教师职称晋升评价'

					},
					{
						name: '申报职称',
						txt: '副高级教师'
					}
				],

			}
		},
		methods: {
			batch() {
				this.batchStutas = !this.batchStutas
			},
			call(){
				this.callStutas =!this.callStutas
				},
				shut(){
					this.callStutas =false
				},

			
			close() {
				this.batchStutas = !this.batchStutas
			}



		},
	}
</script>

<style lang="scss" scoped>
	.container {
		@extend %flex;
		@extend %flex-column;
		@extend %box;
		width: 100%;
		height: 100%;

		.box {
			width: 686upx;
			margin: 0 auto;
			margin-top: 42upx;
			background: #FFFFFF;
		
			border-radius: 6upx;
			padding: 52upx 36upx 64upx;
			@extend %box;

			.opt-item {
				.font {
					width: 400upx;
					text-align: right;
					font-size: 24upx;
				}

				.img {
					width: 14upx;
					height: 20upx;
				}
			}
		}

		.opt-list {
			width: 100%;
			@extend %flex;
			@extend %flex-column;

			.opt-item {
				padding-bottom: 8upx;
				@extend %box;
				width: 100%;
				font-size: 16upx;
				color: #707070;
				border-bottom: 2upx solid #E5E5E5;
				@extend %flex;
				@extend %flex-align-center;
				@extend %flex-justify-between;
				margin-bottom: 42upx;

				.name {
					font-size: 32upx !important;
					color: #363535 !important;
					font-weight: 500;
				}
			}

			.opt-item:last-child {
				margin-bottom: 0;
			}

		}

		.bot-list {
			background-color: #FFFFFF;
			width: 686upx;
			margin: 32upx auto;

			.title {
				color: #363535;
				font-size: 32upx;
				margin-left: 36upx;
				margin-top: 34upx;
				margin-bottom: 36upx;
			}
		

			.txt {
				@extend %flex;
				@extend %flex-wrap;
				margin-left: 38upx;
				line-height: 42upx;
				margin-bottom: 62upx;

				.front {
					color: #A1A1A1;
					font-size: 24upx;

				}
			}

			.add {
				border: 2upxpx solid #FFFFFF;
				width: 180upx;
				height: 172upx;
				background-color: #E8E8E8;
				transition: color .25s;
				position: relative;
				margin-left: 42upx;
				margin-bottom: 60upx;
			}

			.add::before {
				content: '';
				position: absolute;
				left: 50%;
				top: 50%;
				width: 72upx;

				color: #9A9A9A;
				margin-left: -38upx;

				border: 4upx solid #9a9a9a;
			}

			.add::after {
				content: '';
				position: absolute;
				left: 50%;
				top: 50%;
				color: #9A9A9A;
				height: 72upx;

				margin-top: -36upx;
				border: 4upx solid #9a9a9a;
			}
		}


		.list {
			width: 100%;
			height: 96upx;
			color: #ffffff;
			line-height: 96upx;
			text-align: center;
			font-size: 32upx;
			border-radius: 50upx;
			margin-top: 64upx;

			.sub {
				background-color: #F2F5FF !important;
			}

			.submit {
				width: 414upx;
				height: 64upx;
				background-color: #7696FE;
				color: #FFFFFF;
				text-align: center;
				line-height: 64upx;
				font-size: 28upx;
				border-radius: 50upx;
				margin: auto;
			}
		}

		.select-type {
			width: 750upx;
			height: 600upx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			z-index: 2;

			.title {
				width: 750upx;
				height: 112upx;
				display: flex;
				justify-content: flex-end;

				image {
					width: 24upx;
					height: 24upx;
					display: block;
					margin-top: 44upx;
					margin-bottom: 44upx;
					margin-right: 32upx;
				}
			}
			.active-title{
				font-size: 32upx;
			
			}

			.item {
				width: 638upx;
				height: 82upx;
				border-bottom: 2upx solid #e5e5e5;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #8f8f8f;
				font-size: 28rpx;

				&:nth-child(2) {
					border-top: 2upx solid #e5e5e5;
				}
			}

			.item_ {
				width: 638upx;
				height: 82upx;
				border-bottom: 2rpx solid #e5e5e5;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 36rpx;
				color: #656565;
				position: relative;

				&:nth-child(2) {
					border-top: 2upx solid #e5e5e5;
				}

				.gou {
					position: absolute;
					top: 32upx;
					right: 2upx;
					width: 28upx;
					height: 24upx;
				}
			}

			.btn {
				@extend %flex;
				@extend %flex-align-center;
				text-align: center;	
					font-size:28upx ;
				margin-left:360upx ;
				line-height: 54upx;
				.left {
			width: 144upx;
			height: 60upx;
	
		background: #7696fe;
			border-radius: 30upx;
		color: #FFFFFF;
		
				}

				.right {
				width: 182upx;
				height: 60upx;
			color: #9F9F9F;
				background: #e3e3e3;
				border-radius: 30upx;
				margin-left: 32upx;
				}
			}
		}

	}
</style>