zh_order_food_xcx/pages-address/select-school.vue

<template>
	<view class="select-school-index iPhone-bottom flex-common-css box-border-box">
		<Nav title='选择学校'></Nav>
		
		<view class="bgc-f box-border-box p-24 mb-28">
			<view class="head-search mb-32">
				<input type="text" placeholder="搜索学校名称">
				<view class="fs-28 fc-f index-search-box-buttom">搜索</view>
			</view>
			
			<view class="head-address display-flex">
				<uni-icons type="location-filled" size="24"></uni-icons>
				<view class="ml-16">
					<view class="fs-36 fw-600 mb-12">四川外语大学重南岸翻译学校（綦江校区）</view>
					<view class="fs-28 fw-400" @click="openPop()">楼栋1</view>
				</view>
			</view>
		</view>
		
		<scroll-view scroll-y="true" class="scroll-view-css bgc-f box-border-box plr-32">
			<view class="item-box fs-32 fw-400" v-for="(item,i) in 20" :key="i">
				四川外国语大学重庆南方翻译学院(渝北校区)四川外国语大学重庆南方翻译学院
			</view>
		</scroll-view>
		
		<uni-popup ref="popup" type="bottom">
			<view class="pop-coupon box-border-box p-24">
				<view class="text-align-center fs-36 fw-600 box-title mb-32">
					请选择楼栋
					<uni-icons @click="closePop" class="box-close" type="closeempty" size="20"></uni-icons>
				</view>
				<view class="head-search mb-32">
					<input type="text" placeholder="搜索楼栋名称">
					<view class="fs-28 fc-f index-search-box-buttom">搜索</view>
				</view>
				
				<view class="scroll-view-css">
					<view class="item-box item-box-f fs-32 fw-400" 
					v-for="(item,i) in 20" :key="i" :class="id == i?'fc-41ABF5':''">
						<!-- <image src="@/static/img/common/n-select.png" mode=""></image> -->
						<image src="@/static/img/common/y-select.png" mode=""></image>
						楼栋1
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				id:0,
			}
		},
		onShow() {
			
		},
		methods:{
			openPop(){
				this.$refs.popup.open()
			},
			closePop(){
				this.$refs.popup.close()
			},
		},
	}
</script>


<style scoped lang="scss">
	.select-school-index{
		.head-search{
			position: relative;
			input{
				width: 100%;
				height: 72rpx;
				background: #F4F5F7;
				border-radius: 200rpx;
				font-size: 32rpx;
				box-sizing: border-box;
				padding: 0 130rpx 0 24rpx;
			}
			.index-search-box-buttom{
				position: absolute;
				right: 6rpx;
				top: 6rpx;
				width: 120rpx;
				height: 60rpx;
				background: linear-gradient( 90deg, #57CAFF 0%, #41ABF5 100%);
				border-radius: 200rpx;
				margin-left: auto;
				line-height: 60rpx;
				text-align: center;
			}
		}
		.item-box{
			box-sizing: border-box;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #eee;
		}
		.item-box-f{
			width: 100%;
			position: absolute;
			box-sizing: border-box;
			padding-left: 60rpx;
			image{
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				left: 0;
				top: 28rpx;
			}
		}
		.pop-coupon{
			width: 100%;
			height: 70vh;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			padding-top: 32rpx !important;
			display: flex;
			flex-direction: column;
			.box-title{
				position: relative;
				.box-close{
					position: absolute;
					right: 22rpx;
				}
			}
			
		}
	}
</style>