gaobaoUniApp/pages/collection/collection.vue

<template>
<view>
	<view class="mainstay" :class="{prevent_move:modelFlag}" :style="{height:photoheight-23+'px'}">
		<block v-for="(list,index) in lists" :key="index">
			<view class="collList">
				<view class="listLeft">
					<view class="collPic"><image src="../../static/school.png"></image></view>
					<view class="collName">{{list.name}}</view>
				</view>
				<view class="listRight">
					<view class="listTop">
						<view>
							<view>
								<view class="collAddress">
									<view class="deletDeg">{{list.address}}</view>
								</view> 
							    <view class="collType">
									<view class="deletDeg">{{list.type}}</view>
								</view>
							    <view class="collProject">
									<view class="deletDeg">{{list.project}}</view>
								</view>
							</view>
							<view class="score">
								<view class="collMaxSco u-f"><view>最高分:</view>{{list.maxSco}}</view>
							    <view class="collMinSco u-f"><view>最低分:</view>{{list.minSco}}</view>
							</view>
							<view class="gailv">
								录取概率：-
							</view>
						</view>
						<view>
							<view class="icon iconfont icon-wodeshoucang" @tap="delCollection(index)">
							</view>
						</view>
					</view>
					<view class="listBottom">
						<view class="collLevel" @tap="matchFun(index)">分数匹配专业</view>
					</view>
				</view>
			</view>
		</block>
		<!-- 遮罩层 -->
		<view class="page" v-if="modelFlag"></view>
	</view>
	<!-- 弹窗 -->
	<view class="model" v-if="modelFlag">
		<view class="title">
			<view>{{modelTitle}}</view>-专业列表2018
			<view class="icon iconfont icon-guanbi1" @tap="canelModel"></view>
		</view>
		<view class="select">
			<view>专业</view>
			<view>平均分</view>
			<view>最低分</view>
			<view>录取<br/>分数</view>
			<view>录取<br/>批次</view>
		</view>
		<view class="content">
			<view class="left"></view>
			<view class="right">2018年数据暂未开放，敬请期待</view>
		</view>
	</view>

</view>
</template>

<script>
	export default {
		data() {
			return {
				lists:getApp().globalData.global_collection_arr,
				modelTitle:"大学",
				modelFlag:false,
				photoheight:200,
			}
		},
		updated() {                             
			uni.getSystemInfo({
				success:e=>{
					 this.photoheight=e.windowHeight
					 console.log(this.photoheight);
				}
			});
		},
		methods:{
			delCollection(index){
			uni.showModal({
				title:"取消收藏",
				content:"确定要取消收藏该院校吗？",
				mask:true,
				success:function(res) {
					if(res.confirm){
						console.log("queding");
						getApp().globalData.global_collection_arr.splice(index,1)	
					}
				}
			})
			},
			matchFun(index){
				this.modelTitle=getApp().globalData.global_collection_arr[index].name
				this.modelFlag=true
			},
			canelModel(){
				this.modelFlag=false
			}
		}
	}
</script>

<style scoped>
.mainstay{
	margin-top: 55upx;
	width: 100%;
}
.mainstay .collList{
	width:100%;
	height: 310upx;
	border-top: 25upx solid rgba(245,245,245,1);
	display: flex;
}
/* 校徽部分 */
.mainstay .collList .listLeft{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	flex: 1;
	justify-content: center;
	align-items: center;
}
.mainstay .collList .listLeft .collPic{
	width: 100%;
	height: 210upx;
}
.mainstay .collList .listLeft .collPic image{
	margin-top: 20%;
	margin-left: 5%;
	width: 90%;
	height: 80%;
}
/* 左边学校名字 */
.mainstay .collList .listLeft .collName{
	width: 100%;
	height: 100upx;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 30upx;
}
.mainstay .collList .listRight{
	display: flex;
	flex: 3;
	flex-direction: column;
}
.mainstay .collList .listRight .listTop{
	display: flex;
	flex-wrap: wrap;
	height: 210upx;
}
/* 右边的分布 */
.mainstay .collList .listRight .listTop>view{
	display: flex;
	flex-direction: column;
	color: black;
	flex-wrap: nowrap;
}
/* 地区,类型,985/211 */
.mainstay .collList .listRight .listTop>view>view:first-of-type{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: 100upx;
	align-items: center;
}
/* 平行四边形样式 */
.mainstay .collList .listRight .listTop>view>view:first-of-type>view{
	display: flex;
	background: #F1F1F1;
	min-width: 20%;
	max-width: 42%;
	margin: 20upx 0upx 20upx 20upx;
	justify-content: center;
	align-items: center;
	transform: skew(-12deg);
	z-index: -1;
}
/* 平行四边形里面字体的样式 去除倾斜*/
.deletDeg{
	font-size: 25upx;
	transform: skew(12deg);
}
/* 最低分,最高分 */
.mainstay .collList .listRight .listTop .score{
	display: flex;
	height: 70upx;
	flex-direction: row;
	font-size: 30upx;
}
.mainstay .collList .listRight .listTop .gailv{
	font-size: 30upx;
}
/* 最高分,最低分颜色 */
.mainstay .collList .listRight .listTop .collMaxSco>view{
	color: #999999;
	margin-right: 15upx;
}
.mainstay .collList .listRight .listTop .collMaxSco{
	margin-right: 50upx;
	margin-left: 20upx;
}
.mainstay .collList .listRight .listTop .collMinSco>view{
	color: #999999;
	margin-right: 15upx;
}
.mainstay .collList .listRight .listTop .gailv{
	margin-left: 20upx;
	color: #999999;
}
/* 收藏图标和左边内容的比例是3:1 */
.mainstay .collList .listRight .listTop>view:first-of-type{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	flex: 3;
}
.mainstay .collList .listRight .listTop>view:last-of-type{
	flex: 1;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 50upx!important;
	display: flex;
}
.mainstay .collList .listRight .listTop .icon{
	flex: 1;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 50upx!important;
	color: red;
	font-weight: 100;
	color:#FFB400;
}
.icon-wodeshoucang{
	color:#FFB400;
	font-size: 50upx!important;
}
/* 分数匹配专业行的设置 */
.mainstay .collList .listRight .listBottom{
	padding-top: 20upx;
	padding-left: 350upx;
	font-size: 30upx;
	color: #999999;
}
.mainstay .collList .listRight .listBottom>view{
	display: flex;
	flex-direction: row;
}
.mainstay .collList .listRight .listBottom .collLevel>view:last-of-type{
	color: red;
	margin-left: 10upx;
}
.u-f{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.u-s{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex: 1;
}
/* 模态框位置大小 */
.model{
	position: fixed;
	top: 30%;
	left: 10%;
	display: flex;
	flex-direction: column;
	width: 80%;
	height: 40%;
	border: 1upx solid black;
	background: rgba(255,255,255,1);
	z-index: 999;
}
/* 模态框标题 */
.model .title{
	display: flex;
	background: rgba(255,255,255,1);
	width: 100%;
	align-items: center;
	justify-content: center;
	font-size: 26upx;
	margin-top: 20upx;
	margin-bottom: 20upx;
}
/* 模态框x号 */
.model .title>view:last-of-type{
	position: absolute;
	right: 30upx;
	font-size: 20upx;
}
.model .select{
	display: flex;
	justify-content: flex-start;
	width: 100%;
	flex-direction: row;
}
.model .select>view{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20%;
	text-align: center;
	font-size: 30upx;
	background:#D9D9D9;
	padding-top: 20upx;
	padding-bottom: 20upx;
}
.model .content{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 100%;
	background:#D9D9D9
}
.model .content .left{
	width: 20%;
	height: 100%;
	background: rgba(255,255,255,1);
}
.model .content .right{
	width: 80%;
	font-size: 30upx;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* 遮罩层 */
.page{
	width: 100%;
	height: 100%;
	position: fixed;
	bottom: 0upx;
	background: rgba(0,0,0,0.2);
	z-index: 100;
}
.prevent_move{
	overflow: hidden;
}
</style>