no message

common/css/common.css

@@ -305,7 +305,9 @@ image {
 .bgc-F3F4F6{
 	background-color: #F3F4F6;
 }
-
+.bgc-D5EDFB{
+	background-color: #D5EDFB;
+}
 .b-b-F9F9F9{
 	border-bottom: 1rpx solid #F9F9F9;
 }

components/en-from/en-textarea/en-textarea.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="box">
-    <view class="input-box">
+    <view class="input-box" :class="isFlex?'input-flex':''">
       <view class="input-box-left" :style="{'letter-spacing':labelWidth}">
         {{ label }}
       </view>
@@ -36,7 +36,10 @@ export default {
     },
     value: {
       default: ''
-    }
+    },
+	isFlex:{
+		default: true
+	}
   },
   data() {
     return {
@@ -80,9 +83,12 @@ export default {
 @import url("../../static/css/en-common.css");
 
 .box {
+   .input-flex{
+	   display: flex;
+	   align-items: center;
+   }
   .input-box {
-    display: flex;
-    align-items: center;
+    
 
     .input-box-left {
       width: 210rpx;

pages-school/add-circle.vue

@@ -0,0 +1,47 @@
+<template>
+	<view class="add-circle-box iPhone-bottom flex-common-css box-border-box">
+		<Nav title='发圈子' bgckgroundBox='#fff'></Nav>
+		
+		<view class="scroll-view-css box-border-box ptp-24">
+			<view class="bgc-f box-border-box p-32">
+				<view class="fs-34 fw-600 mb-20">内容描述 <span class='fs-34 fc-9 fw-400'>(必填）</span></view>
+				<textarea class=" fs-24" placeholder='这一刻说些什么'></textarea>
+			</view>
+			<view class="bgc-f mb-20">
+				<EnUpload></EnUpload>
+			</view>
+			
+			<view class="bgc-f box-border-box p-32 flex-justify-space align-items-center">
+				<view class="fs-34 fw-600">分享交流</view>
+				<image class="right-icon" src="@/static/img/toRight.png" mode=""></image>
+			</view>
+		</view>
+		
+		<view class="box-border-box p-32">
+			<view class="b-bottom text-align-center fs-32 fw-600">发布</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import EnUpload from '@/components/en-from/en-upload/en-upload.vue';
+	export default {
+		components:{EnUpload},
+	}
+</script>
+
+<style scoped lang="scss">
+	.add-circle-box{
+		.b-bottom{
+			width: 686rpx;
+			height: 88rpx;
+			line-height: 88rpx;
+			background: linear-gradient( 105deg, #57CAFF 0%, #41ABF5 100%);
+			border-radius: 200rpx;
+		}
+		.right-icon{
+			width: 32rpx;
+			height: 32rpx;
+		}
+	}
+</style>

pages-school/circle-info.vue

@@ -0,0 +1,282 @@
+<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>

pages-school/school-circle.vue

@@ -29,7 +29,7 @@
 		</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">
+			<view class="card-box box-border-box p-24 bgc-f flex-justify-space" v-for="(item,i) in 5" :key="i" @click.stop="toDet()">
 				<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">
@@ -68,11 +68,11 @@
 							<image src="@/static/img/school/fx.png" mode=""></image>
 							<view class="fs-24 fc-9">分享</view>
 						</view>
-						<view class="align-items-center" @click="handUp()">
+						<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">
+						<view class="align-items-center" @click.stop="openMsg()">
 							<image src="@/static/img/school/info.png" mode=""></image>
 							<view class="fs-24 fc-9">6</view>
 						</view>
@@ -84,21 +84,104 @@
 		
 		<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="head-pop flex-justify-space align-items-center mb-24">
+					<uni-icons @click.stop="closePop()" 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 class="fs-28 fw-600 fc-41ABF5" @click.stop="add">确定</view>
+				</view>
+				<view class="scroll-view-css">
+					<view class="item-box fs-32 " :class="id==i?'fc-41ABF5 bgc-D5EDFB':'bgc-F3F4F6'" v-for="(item,i) in 10" :key="i">分享交流</view>
+				</view>
+			</view>
+		</uni-popup>
+		
+		
+		<uni-popup ref="popmsg" type="bottom">
+			<view class="pop-box pop-msg box-border-box p-24">
+				<view class="pop-input" v-if="isShowIpnut">
+					<view class="head-pop flex-justify-space align-items-center mb-24 box-border-box p-24">
+						<uni-icons @click.stop="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.stop="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>
+				
+				<view class="head-pop flex-justify-space align-items-center mb-24">
+					<view class=""></view>
+					<view class="fs-36 fc-0 fw-600">评论(4)</view>
+					<uni-icons @click.stop="closeMsg()" type="closeempty" size="24"></uni-icons>
+				</view>
+				<view class="scroll-view-css 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.stop="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.stop="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>
+			
 		</uni-popup>
 	</view>
 </template>
 
 <script>
+	import EnUpload from '@/components/en-from/en-upload/en-upload.vue';
 	export default {
+		components:{EnUpload},
 		data(){
 			return{
 				id:0,
+				isShowIpnut:false,
 			}
 		},
 		onLoad() {
@@ -110,10 +193,38 @@
 			},
 			handUp(){
 				
+			},
+			toDet(){
+				uni.navigateTo({
+					url:"/pages-school/circle-info"
+				})
 			},
 			openPop(){
 				this.$refs.popup.open();
 			},
+			closePop(){
+				this.$refs.popup.close();
+			},
+			add(){
+				uni.navigateTo({
+					url:"/pages-school/add-circle"
+				})
+			},
+			save(){
+				this.isShowIpnut = false;
+			},
+			openMsg(){
+				this.$refs.popmsg.open();
+			},
+			closeMsg(){
+				this.$refs.popmsg.close();
+			},
+			openInput(){
+				this.isShowIpnut = true;
+			},
+			closeInput(){
+				this.isShowIpnut = false;
+			},
 		},
 	}
 </script>
@@ -125,12 +236,70 @@
 		position: relative;
 		
 		.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;
+			position: relative;
+			.pop-input{
+				position: absolute;
+				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;
+			}
+			.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;
+				}
+			}
 		}
 		
 		.circle-add{
@@ -139,7 +308,7 @@
 			position: absolute;
 			right: 0;
 			bottom: 20vh;
-			z-index: 100;
+			z-index: 2;
 		}
 		.w-400{
 			width: 400rpx;

pages.json

@@ -145,6 +145,18 @@
 					"style": {
 						"navigationBarTitleText": "校友圈"
 					}
+				},
+				{
+					"path": "add-circle",
+					"style": {
+						"navigationBarTitleText": "发圈子"
+					}
+				},
+				{
+					"path": "circle-info",
+					"style": {
+						"navigationBarTitleText": "校友圈"
+					}
 				}
 			]
 		},