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>
		
		<div class="footer">
			<div>
				<image src="../../static/home_icon_default_sel@2x.png" mode="widthFix"></image>
				<p>首页</p>
			</div>
			<div>
				<image src="../../static/home_icon_volunteer_nor@2x.png" mode="widthFix"></image>
				<p>志愿预测</p>
			</div>
			<div>
				<image src="../../static/home_icon_my_nor@2x.png" mode="widthFix"></image>
				<p>我的</p>
			</div>
			
			
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</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;
		 }
	.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;
	}

	.footer{
		display: flex;
		position: fixed;
		bottom: 0;
		width:750upx;
		height:99upx;
		background:rgba(255,255,255,1);
		margin-top: 20upx;
	}
	.footer div:first-child{
		margin-left: 92upx;
		margin-right: 184upx;
	}
	.footer div:nth-child(2){
		margin-right: 183upx;
	}
	.footer div:nth-child(3){
		margin-right: 93upx;
	}
	.footer image{
		width:66upx;
		height:67upx;
		overflow: visible;
	}
	.footer div:first-child p{
		margin-left: 15upx;
	}
	.footer div:nth-child(3) p{
		margin-left: 15upx;
	}
	.footer div{
		display: flex;
		flex-direction: column;
		width:80upx;
		height:28upx;
		font-size:20upx;
		font-family:PingFangSC;
		font-weight:500;
		color:rgba(175,178,191,1);
		line-height:28upx;
	}

</style>