gaobaoUniApp/pages/index/index.vue

<template>
<view class="content"> 
		 	<!-- <image class="logo" src="/static/logo.png"></image> -->
		 	<div class="search-input-box">
		 		<div>
		 			<image class="search_icon_nor" src="../../static/search_icon_nor.png" mode=""></image>
		 		</div>
		 			<input type="text" placeholder="搜索专业、院校" value="" />
		 	</div>
		 	<!-- <image class="banner" src="/static/home-all.png" mode="widthFix"></image> -->
		 	<div class="view-content">
		 		<div>
		 			<image src="../../static/home_ic_college@2x.png" mode="widthFix"></image>
		 			<p>院校库</p>
		 		</div>
		 		<div>
		 			<image src="../../static/home_ic_major@2x.png" mode="widthFix"></image>
		 			<p>专业库</p>
		 		</div>
		 		<div>
		 			<image src="../../static/home_ic_test@2x.png" mode="widthFix"></image>
		 			<p>兴趣测评</p>
		 		</div>
		 	</div>
		 	
		 	<div class="school">
		 		<image src="../../static/home_word_university@2x.png" mode="widthFix"></image>
		 		<div class="school-content">
		 				<div class="schol-icon">
		 					<image src="../../static/清华@2x.png" mode="widthFix"></image>
		 					<span>清华大学</span>
		 				</div>
		 				<div class="schol-icon">
		 					<image src="../../static/清华@2x.png" mode="widthFix"></image>
		 					<span>清华大学</span>
		 				</div>	
		 		</div>
		 		<div class="school-content">
		 			<!-- <div> -->
		 				<div class="schol-icon">
		 					<image src="../../static/清华@2x.png" mode="widthFix"></image>
		 					<span>清华大学</span>
		 				</div>
		 				<div class="schol-icon">
		 					<image src="../../static/清华@2x.png" mode="widthFix"></image>
		 					<span>清华大学</span>
		 				</div>
		 		</div>
		 		<div class="school-content">
		 			<!-- <div> -->
		 				<div class="schol-icon">
		 					<image src="../../static/清华@2x.png" mode="widthFix"></image>
		 					<span>清华大学</span>
		 				</div>
		 				<div class="schol-icon">
		 					<image src="../../static/清华@2x.png" mode="widthFix"></image>
		 					<span>清华大学</span>
		 				</div>
		 		</div>
		 	</div>
		 	
		 	<div class="major">
		 		<image src="../../static/home_word_profession@2x.png" mode="widthFix"></image>
		 		<div class="major-content">
		 			
		 		</div>
		 	</div>

		<view class="example-title">自定义弹出层</view>
		<view class="example-body">
			<button class="button" type="button" @click="togglePopup('center', 'tip')">提示框</button>
			<button class="button" type="button" @click="togglePopup('center', 'popup')">中间弹出 popup</button>
			<button class="button" type="button" @click="togglePopup('center', 'get-grade')">插屏广告</button>
			<!-- <button class="button" type="button" @click="togglePopup('bottom', 'share')">底部分享</button> -->
		</view>
		
		<uni-popup ref="popup" :type="type" @change="change">{{ content }}</uni-popup>
		<uni-popup :show="show" :type="type" :custom="true" :mask-click="false" @change="change">
			<view class="uni-tip">
				<view class="uni-tip-title">微信授权</view>
				<view class="uni-tip-image">
					<image src="../../static/芝麻高报-logo.png" mode=""></image>
				</view>
				<view class="uni-tip-content">芝麻高报系统申请获取以下权限：</view>
				<view class="uni-tip-content">
					 <ul>
					 	<li>获得你的信息（昵称、头像、地区 等）</li>
					 </ul>
					 <picker mode="">
					 	<view>文科</view><view>内蒙古</view>
					 </picker>
					 <picker mode="">
					 	<view>内蒙古</view>
					 </picker>
				</view>
				<view class="uni-tip-group-button">
					<view class="uni-tip-button" @click="cancel('tip')">拒绝</view>
					<view class="uni-tip-button" @click="cancel('tip')">允许</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="get-grade" :type="type" :custom="true" :mask-click="false" @change="change">
			<view class="get-grade">
				<view class="get-grade-title">输入分数，获取适合你的学校、专业和志愿预测</view>
		
				<view class="get-grade-content">
				<button type="primary" bindtap="listenerButton">弹出ActionSheet</button>
				
				<input type="number" name="" id="" value="" placeholder="内蒙古" @click="wx.showActionSheet()"/>
				<input type="idcard" name="" id="" value="" placeholder="文科" />
			
				</view>
				<view class="get-grade-content">
					<input type="number" name="" id="" value="" placeholder="输入预估分数"/>
					<input type="number" name="" id="" value="" placeholder="输入位次（选填）"/>
				</view>
				<view class="uni-get-grade-button">
					<view class="get-grade-button" @click="togglePopup('center', 'image')">立即获取</view>
				</view>
			</view>
		</uni-popup>
		
		
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniIcon from '@/components/uni-icon/uni-icon.vue'
	
	
	export default {
		components: {
			uniPopup,
			uniIcon
		},
		data() {
			return {
				title:"hello",
				open:'tip',
				show: false,
				type: '',
				list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
				content: '顶部弹 popup'
			}
		},
		onLoad() {
			// wx.showActionSheet({
			// 
			//      itemList: ['A', 'B', 'C'],
			// 
			//      success: function (res) {
			// 
			//        if (!res.cancel) {
			// 
			//          console.log(res.tapIndex)//这里是点击了那个按钮的下标
			// 
			//        }
			// 
			//      }
			// 
			//    })
		},
		methods: {
			togglePopup(type, open) {
				switch (type) {
					case 'top':
						this.content = '顶部弹出 popup'
						break

					case 'bottom':
						this.content = '底部弹出 popup'
						break
					case 'center':
						this.content = '居中弹出 popup'
						break
				}
				this.type = type
				if (open === 'tip') {
					this.show = true
				} else {
					this.$refs[open].open()
				}
			},
			cancel(type) {
				if (type === 'tip') {
					this.show = false
					return
				}
				this.$refs[type].close()
			},
			change(e) {
				console.log(e.show)
			}
		}
	}
</script>

<style>
	
	.search-input-box{
			width:690upx;
			height:70upx;
			background:rgba(248,248,248,1);
			border-radius:36upx;
			border:1upx solid rgba(242,242,242,1); 
			margin-top: 42upx;
		}
		.search-input-box image{
			width:70upx;
			height:70upx;
			margin-left: 20upx;
			float: left;
		}
		.search-input-box  uni-input {
			overflow: visible;
			float: left;
		}
		.search-input-box input{
			 box-sizing: border-box;
			 /* margin-bottom: 1upx; */
			 outline: none;
			 padding-left: 10upx;
			 border:0;
			 /* margin-top: 10upx; */
			 height:70upx;
			 }
		.search-input-box .uni-input-placeholder{
			width:196upx;
			height:40upx;
			font-size:28upx;
			font-family:PingFangSC;
			font-weight:400;
			color:rgba(175,178,191,1);
			line-height:40upx;
		}
	
		.banner{
			width:690upx;
			height:308upx;
			border-radius:20upx;
		}
	
		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			/* background-color: #F8F8F8; */
		}
	
		.view-content{
			display: flex;
			flex-direction: row no-wrap;
			height:210upx;
			background:rgba(255,255,255,1);
		}
		.view-content image{
			width:128upx;
			height:128upx;
			overflow: visible;
			vertical-align:middle;
		}
		.view-content p{
			text-align:center;
			width:96upx;
			height:33upx;
			font-size:24upx;
			font-family:PingFangSC;
			font-weight:500;
			color:rgba(117,119,128,1);
			line-height:33upx;
			
		}
		.view-content div{
			display: flex;
			flex-direction: column;
			width:80upx;
			height:28upx;
		}
		.view-content div:first-child{
			margin-left: 61upx;
			margin-right: 0upx;
		}
		.view-content div:nth-child(2){
			margin-left: 122upx;
			margin-right: 122upx;
		}
		.view-content div:nth-child(3){
			margin-right: 61upx;
		}
		.view-content p{
			align-self:center;
		}
		.view-content image{
			align-self:center;
		}
	
		.school {
			align-items:flex-start;
			width:750upx;
			/* height:984upx; */
			background:rgba(255,255,255,1);
		}
		.school image{
			width: 170upx;
			height: 54upx;
			    margin: 0 auto;
			    /* text-align: center; */
			    /* vertical-align: middle; */
			    display: block;
		}
		.school-content{
			display: flex;
			flex-wrap: wrap;
		}
		.school-content div:first-child{
			margin-left: 98upx;
			margin-right: 195upx;
		}
		.schol-icon image{
			width: 180upx;
			height: 180upx;
		}
		.schol-icon span{
			width:112upx;
			height:40upx;
			font-size:28upx;
			font-family:PingFangSC;
			font-weight:500;
			color:rgba(44,44,44,1);
			line-height:40upx;
			margin-top: 24upx;
			margin-bottom: 40upx;
		}
		.schol-icon{
			    display: flex;
			    flex-direction: column;
			    align-items: flex-end;
				text-align: -webkit-center;
			}
		
	
		.major{
			width:750upx;
			height:470upx;
			background:rgba(255,255,255,1);
			margin-top: 20upx;
		}
		.major image{
			width: 170upx;
			height: 54upx;
			margin: 0 auto;
			display: block;
		}
	
	/* 授权窗口 */
	.uni-tip {
		padding: 15upx;
		width: 300upx;
		background: #fff;
		box-sizing: border-box;
		border-radius: 10upx;
		width:560upx;
		height:515upx;
		background:rgba(255,255,255,1);
		border-radius:8upx;
	}
	
	.uni-tip-title {
		text-align: center;
		padding: 21upx 100upx;
		/* width:136upx; */
		height:48upx;
		font-size:34upx;
		font-family:PingFangSC;
		font-weight:500;
		color:rgba(0,0,0,1);
		line-height:48upx;
		border-bottom: 1px solid rgba(229,229,229,1);
	}
	.uni-tip-image {
		border:0upx;
		text-align: center;
	}
	.uni-tip-image image{
		width: 64upx;
		height: 64upx;
		border:0upx;
		margin-top: 36upx;
		margin-bottom: 24upx;
	}
	
	.uni-tip-content {
		margin-left: 54upx;
		padding-bottom: 36upx;
		width:420upx;
		height:40upx;
		font-size:28upx;
		font-family:PingFangSC;
		font-weight:400;
		color:rgba(0,0,0,1);
		line-height:40upx;
	}
	
	.uni-tip-group-button {
		margin-top: 10upx;
		display: flex;
		justify-content: space-around;
		border-top: 1px solid rgba(229,229,229,1);
		padding-top: 27upx;
	}
	.uni-tip-group-button view:nth-child(1){
		width:144upx;
		height:45upx;
		font-size:32upx;
		font-family:PingFangSC;
		font-weight:400;
		color:#000000;
		line-height:45upx;
	}
	.uni-tip-group-button view:nth-child(2){
		width:111upx;
		height:45upx;
		font-size:32upx;
		font-family:PingFangSC;
		font-weight:400;
		color:#02BB00;
		line-height:45upx;
	}
	.uni-tip-button {
		width: 100%;
		text-align: center;
		/* font-size: 14upx; */
		/* color: #3b4144; */
	}
	.get-grade{
		width:560upx;
		height:616upx;
		background:rgba(255,255,255,1);
		border-radius:8upx;
		text-align: center;
	}
	.get-grade-title{
		padding: 40upx;
		
	}
	/* .get-grade-content{
		margin: 0 auto;
	} */
	.get-grade-content select{
		width:230upx;
		height:80upx;
		background:rgba(248,248,248,1);
		border-radius:40upx;
		border:1upx solid rgba(242,242,242,1);
		margin-right: 20upx; 
	}
	/* .get-grade-content option{
		margin: 20upx 40upx;
	} */
	.get-grade-content input{
		width:480upx;
		height:80upx;
		background:rgba(248,248,248,1);
		border-radius:40upx;
		border:1upx solid rgba(242,242,242,1);
		margin: 10upx 40upx;
	}
	.uni-get-grade-button{
		width:480upx;
		height:80upx;
		background:rgba(239,58,58,1);
		box-shadow:0upx 6upx 12upx 0upx rgba(239,58,58,0.2);
		border-radius:40upx;
		text-align: center;
		margin: 22upx 40upx;
	}
	select{
		width: auto;
		padding: 0 0 0 55upx;
		margin: 0;
		}
	 
	.get-grade-button{
		/* margin: 24upx 100upx; */
		width:120upx;
		height:42upx;
		font-size:30upx;
		font-family:PingFangSC;
		font-weight:500;
		color:rgba(255,255,255,1);
		line-height:80upx;
		margin: 0 auto;
		/* height:80upx; */
	 }
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 200upx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50upx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
	}
</style>