zh_order_food_xcx/pages-school/school-circle.vue

<template>
	<view class="school-circle iPhone-bottom flex-common-css box-border-box ">
		<image class="circle-add" src="@/static/img/school/add.png" mode="" @click="openPop()"></image>
		
		
		<view class="bg-box"></view>
		<Nav title='圈子' bgckgroundBox='transparent'></Nav>
		
		<view class="ts-box mt-24 align-items-center box-border-box plr-12 mb-20">
			<image src="@/static/img/school/ts.png" mode=""></image>
			<view class="fs-26 fw-400 fc-FB3D03">警惕骗钱骗色，保护自身安全，不轻信陌生人</view>
		</view>
		
		<view class="nav-box display-flex box-border-box mb-20">
			<view class="nav-item view-nowrap" :class="id == i?'h130':''" v-for="(item,i) in 10" :key="i">
				<image class="nav-icon" src="@/static/img/school/icon.png" mode=""></image>
				<view class="fs-24 plr-24 " :class="id==i?'fw-600 fc-41ABF5':''">全部帖子</view>
				<image v-if="id == i" class="nav-bg" src="@/static/img/school/bg.png" mode=""></image>
			</view>
		</view>
		
		<view class="flex-justify-space type-box mb-24">
			<view class="display-flex">
				<view class="box-1" :class="id == 0?'box-s':''">最新</view>
				<view class="box-1">最热</view>
				<view class="box-1">评论最多</view>
			</view>
			<view class="box-2 fs-24 fc-41ABF5">逛其他学校</view>
		</view>
		
		<scroll-view scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
			<view class="card-box box-border-box p-24 bgc-f flex-justify-space" v-for="(item,i) in 5" :key="i">
				<image class="card-head" src="@/static/img/my/lqzx-bg.png" mode="scaleToFill"></image>
				<view class="flex-1">
					<view class="card-1 flex-justify-space mb-16">
						<view class="">
							<view class="w-400 fs-28 fw-600 mb-8">恒生科技和半导体恒生科技和半导体恒生科技和半导体恒生科技和半导体</view>
							<view class="fs-24 fc-9">1小时前</view>
						</view>
						<view class="">
							<image class="dian-img" src="@/static/img/school/dian.png" mode=""></image>
							<view class="align-items-center">
								<image class="hot-img" src="@/static/img/school/hot.png" mode=""></image>
								<view class="fs-26 fw-400 fc-9">125</view>
							</view>
						</view>
					</view>
					<view class="card-2 fs-30 fw-400 mb-16">
						欢迎打脸，科技类型很顽强，不是刚刚说11吧，换着领涨，这个季节玩什么光伏储白酒，普
					</view>
					<view class="card-3 flex-wrap-wrap mb-32">
						<image class="card-3-img" src="@/static/img/my/lqzx-bg.png" v-for="(item,i) in 9" mode="scaleToFill"></image>
					</view>
					<view class="card-4 flex-wrap-wrap mb-40">
						<view class="">重庆工商职业学校</view>
						<view class="">买卖闲置</view>
						<view class="">买卖闲置</view>
						<view class="">买卖闲置</view>
						<view class="">买卖闲置</view>
						<view class="">买卖闲置</view>
						<view class="">买卖闲置</view>
						<view class="">买卖闲置</view>
						<view class="">买卖闲置</view>
					</view>
					
					<view class="card-5 flex-justify-space">
						<view class="align-items-center">
							<image src="@/static/img/school/fx.png" mode=""></image>
							<view class="fs-24 fc-9">分享</view>
						</view>
						<view class="align-items-center" @click="handUp()">
							<uni-icons type="hand-up" size="22" color="#999"></uni-icons>
							<view class="fs-24 fc-9">12</view>
						</view>
						<view class="align-items-center">
							<image src="@/static/img/school/info.png" mode=""></image>
							<view class="fs-24 fc-9">6</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		
		<uni-popup ref="popup" type="bottom">
			<view class="pop-box box-border-box p-24">
				<view class="head-pop flex-justify-space align-items-center">
					<uni-icons type="closeempty" size="24"></uni-icons>
					<view class="fs-36 fc-0 fw-600">选发布类型</view>
					<view class="fs-28 fw-600 fc-41ABF5">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				id:0,
			}
		},
		onLoad() {
			
		},
		methods:{
			scrolltolower(){
				console.log('触底');
			},
			handUp(){
				
			},
			openPop(){
				this.$refs.popup.open();
			},
		},
	}
</script>

<style scoped lang="scss">
	.school-circle{
		padding-left: 24rpx;
		padding-right: 24rpx;
		position: relative;
		
		.pop-box{
			width: 100%;
			height: 50vh;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			display: flex;
			flex-direction: column;
		}
		
		.circle-add{
			width: 88rpx;
			height: 88rpx;
			position: absolute;
			right: 0;
			bottom: 20vh;
			z-index: 100;
		}
		.w-400{
			width: 400rpx;
		}
		.bg-box{
			width: 100%;
			height: 260rpx;
			filter: blur(80rpx);
			background: linear-gradient(to right,#E1F2FD,#E0F3FA,#DBF8EF);
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
		.ts-box{
			width: 100%;
			height: 72rpx;
			background: linear-gradient( 180deg, #FFDBD0 0%, #FFFFFF 100%);
			border-radius: 16rpx;
			image{
				width: 44rpx;
				height: 44rpx;
				margin-right: 8rpx;
			}
		}
		.nav-box{
			width: 100%;
			overflow-x: scroll;
			.h130{
				height: 130rpx !important;
			}
			.nav-item{
				margin-right: 12rpx;
				width: 144rpx;
				height: 114rpx;
				text-align: center;
				border-radius: 20rpx;
				position: relative;
				.nav-icon{
					width: 64rpx;
					height: 64rpx;
					margin: 12rpx auto 0 auto;
				}
				.nav-bg{
					width: 144rpx;
					height: 130rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: -1;
				}
			}
		}
		.type-box{
			.box-s{
				font-weight: 600 !important;
				color: #41ABF5;
				background: #E0F1FF !important; 
				box-sizing: border-box;
				border: 1rpx solid #70C0F8;
			}
			.box-1{
				padding: 8rpx 32rpx;
				margin-right: 20rpx;
				background-color: #fff;
				border-radius: 12rpx;
				font-size: 24rpx;
				font-weight: 400;
			}
			.box-2{
				width: 168rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 1rpx solid #41ABF5;
			}
		}
		.card-box{
			width: 100%;
			min-height: 100rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.card-head{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 16rpx;
			}
			.dian-img{
				width: 30rpx;
				height: 6rpx;
				margin-bottom: 24rpx;
				margin-left: auto;
			}
			.hot-img{
				width: 40rpx;
				height: 40rpx;
				margin-left: auto;
			}
			.card-3{
				.card-3-img{
					width: 182rpx;
					height: 182rpx;
					border-radius: 12rpx;
					margin-right: 6rpx;
					margin-bottom: 6rpx;
				}
				.card-3-img:nth-child(3n){
					margin-right: 0rpx;
				}
			}
			.card-4{
				view{
					padding: 4rpx 16rpx;
					background: #F2F2F2;
					border-radius: 200rpx;
					font-size: 24rpx;
					color: #999;
					margin-right: 20rpx;
					margin-bottom: 10rpx;
				}
			}
			.card-5{
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 8rpx;
				}
			}
		}
	}
</style>