zh_order_food_xcx/pages-school/circle-info.vue

<template>
	<view class="circle-info-box iPhone-bottom flex-common-css box-border-box bgc-f">
		<view class="nav-box bgc-f">
			<Nav :leftShow='false' :customNav='true' bgckgroundBox='transparent'>
				<template>
					<view slot="custom" class="display-flex">
						<image class="nav-img" @click="toBack()" src="@/static/img/takeout/bg-back.png" mode="scaleToFill"></image>
						<view class="info-nav display-flex">
							<image src="@/static/img/my/lqzx-bg.png" mode=""></image>
							<view class="">
								<view class="fs-32 fw-600 w348 text-overflow-ellipsis-one">最佳损友最佳损友最佳最佳损友最佳损友最佳</view>
								<view class="fs-24 fc-9 fw-400">2021-04-18 15:53</view>
							</view>
						</view>
					</view>
				</template>
			</Nav>
		</view>
		
		<scroll-view scroll-y="true" class="scroll-view-css">
			<view>
				<view class="box-border-box mb-50">
					<swiper class="swiper mb-32 " circular indicator-dots indicator-active-color="#4FB3EF" :autoplay="true" :interval="3000" :duration="500">
						<swiper-item v-for="(item,i) in 3" :key="i">
							<image  class="swiper-item" src="@/static/img/buy/group-bg.png" mode="scaleToFill"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="box-border-box bz-box bgc-f b-b-F9F9F9">
					<view class="fs-30 fw-600 mb-32">我是阳光大男孩</view>
					<view class="card-4 flex-wrap-wrap">
						<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>
				
				<view class="pop-box pop-msg box-border-box p-24">
					<view class=" box-border-box plr-24">
						<view class="list-box flex-justify-space" v-for="(item,i) in 10" :key="i"> 
							<image class="list-box-img" src="@/static/img/my/bg.png" mode="scaleToFill"></image>
							<view class="flex-1">
								<view class=" flex-justify-space">
									<view class="p-b-20 b-b-F9F9F9 mr-20">
										<view class="fs-28 fw-400 fc-9 mb-8">
											最佳损友最佳损友 <span class='only-box text-align-center fs-24 fc-41ABF5 ml-10'>作者</span>
										</view>
										<view class="fs-30 fw-400 mb-8" @click="openInput()">
											回关一下啊，这么近这么近这么近这么近这么近这么近
										</view>
										<view class="flex-wrap-wrap mb-8">
											<image class="msg-img" v-for="(item,i) in 4" :key="i" src="@/static/img/my/bg.png" mode="scaleToFill"></image>
										</view>
										<view class="fs-24 fw-400 fc-9 mb-8">2021-04-17 15:53</view>	
									</view>
									<view class="display-flex">
										<uni-icons type="hand-up" size="20" color="#999"></uni-icons>
										<view class="fs-24 fw-400 fc-9 mt-5">11</view>
									</view>
								</view>
								<view class="list-box flex-justify-space" v-for="(info,index) in 5" :key="index">
									<image class="list-box-img" src="@/static/img/my/bg.png" mode="scaleToFill"></image>
									<view class="flex-1">
										<view class=" flex-justify-space">
											<view class="p-b-20 b-b-F9F9F9 mr-20">
												<view class="fs-28 fw-400 fc-9 mb-8">
													最佳损友最佳损友 <span class='only-box text-align-center fs-24 fc-41ABF5 ml-10'>作者</span>
												</view>
												<view class="fs-30 fw-400 mb-8"  @click="openInput()">
													回关一下啊，这么近这么近这么近这么近这么近这么近
												</view>
												<view class="flex-wrap-wrap mb-8">
													<image class="msg-img-1 msg-img" v-for="(item,i) in 4" :key="i" src="@/static/img/my/bg.png" mode="scaleToFill"></image>
												</view>
												<view class="fs-24 fw-400 fc-9 mb-8">2021-04-17 15:53</view>	
											</view>
											<view class="display-flex">
												<uni-icons type="hand-up" size="20" color="#999"></uni-icons>
												<view class="fs-24 fw-400 fc-9 mt-5">11</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view class="card-5 flex-justify-space box-border-box">
			<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.stop="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" @click.stop="openInput()">
				<image src="@/static/img/school/info.png" mode=""></image>
				<view class="fs-24 fc-9">6</view>
			</view>
		</view>
		
		<uni-popup ref="popup" type="bottom">
			<view class="pop-input">
				<view class="head-pop flex-justify-space align-items-center mb-24 box-border-box p-24">
					<uni-icons @click="closeInput()" type="closeempty" size="24"></uni-icons>
					<view class="fs-36 fc-0 fw-600">评论</view>
					<view class="fs-28 fw-600 fc-41ABF5" @click="save()">确定</view>
				</view>
				<view class="scroll-view-css">
					<view class="bgc-f box-border-box p-32">
						<view class="fs-34 fw-600 mb-20">评论</view>
						<textarea class=" fs-24" placeholder='友善评论，文明发言'></textarea>
					</view>
					<view class="">
						<EnUpload></EnUpload>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import EnUpload from '@/components/en-from/en-upload/en-upload.vue';
	import tools from "@/service/tools";
	export default {
		components:{EnUpload},
		data(){
			return{
				id:0,
			}
		},
		methods:{
			toBack(){
				tools.leftClick()
			},
			openInput(){
				this.$refs.popup.open();
			},
			closeInput(){
				this.$refs.popup.close();
			},
			handUp(){
				
			},
			save(){
				this.closeInput()
			},
		},
	}
</script>

<style scoped lang="scss">
	.circle-info-box{
		.card-5{
			padding: 50rpx;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
		}
		.w348{
			width: 348rpx;
		}
		.nav-box{
			padding-bottom: 10rpx;
			.nav-img{
				width: 56rpx;
				height: 56rpx;
				margin-right: 30rpx;
			}
			.info-nav{
				image{
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}
		}
		.swiper{
			width: 100%rpx;
			height: 920rpx;
			.swiper-item{
				width: 100%;
				height: 920rpx;
				background-color: skyblue;
			}
		}
		.bz-box{
			padding: 0 32rpx 20rpx 32rpx;
			.card-4{
				view{
					padding: 4rpx 16rpx;
					background: #F2F2F2;
					border-radius: 200rpx;
					font-size: 24rpx;
					color: #999;
					margin-right: 20rpx;
					margin-bottom: 10rpx;
				}
			}
		}
		
		.pop-input{
			width: 100%;
			height: 70vh;
			background-color: #fff;
			bottom: 0;
			left: 0;
			border-top: 1rpx solid #ccc;
			border-radius: 20rpx 20rpx 0 0;
			display: flex;
			flex-direction: column;
		}
		
		.pop-box{
			
			width: 100%;
			height: 50vh;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			display: flex;
			flex-direction: column;
			.item-box{
				width: 100%;
				height: 92rpx;
				
				border-radius: 200rpx;
				line-height: 92rpx;
				text-align: center;
				margin-bottom: 24rpx;
			}
		}
		.pop-msg{
			height: 70vh;
			.head-pop{
				padding-bottom: 34rpx !important;
				border-bottom: 1rpx solid #F2F2F2;
			}
			.list-box{
				.list-box-img{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}
				.only-box{
					padding: 4rpx 16rpx;
					background: rgba(65,171,245,0.1);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
				.msg-img{
					width: 144rpx;
					height: 144rpx;
					border-radius: 12rpx;
					margin-right:5rpx;
					margin-bottom: 5rpx;
				}
					
				.msg-img:nth-child(3n){
					margin-right: 0rpx;
				}
				.msg-img-1{
					width: 100rpx !important;
					height: 100rpx !important;
				}
			}
		}
	}
</style>