no message

pages.json

@@ -161,6 +161,13 @@
 				"enablePullDownRefresh": false
 			}
 		},
+		{
+			"path": "pages/circle/publishCircle",
+			"style": {
+				"navigationBarTitleText": "发布圈子",
+				"enablePullDownRefresh": false
+			}
+		},
 		{
 			"path": "pages/circle/circle",
 			"style": {

pages/circle/index.vue

@@ -24,8 +24,8 @@
 				<my-praise :tagNum="tagNum"></my-praise>
 			</scroll-view>
 		</view>
-		
-		<view class="circle-add sys-background-yellow">
+
+		<view class="circle-add sys-background-yellow" @click="publish">
 			<image class="circle-add-img" src="/static/img/circle/cancel-icon-2@2x.png"></image>
 		</view>
 	</view>
@@ -51,6 +51,11 @@
 				if (num !== this.tagNum) {
 					this.tagNum = num
 				}
+			},
+			publish() {
+				uni.navigateTo({
+					url: 'pages/circle/publishCircle'
+				});
 			}
 		},
 		created() {
@@ -61,7 +66,6 @@
 					//e.safeArea.bottom  底部安全距离
 				}
 			})
-
 		}
 	}
 </script>
@@ -208,4 +212,4 @@
 		}
 
 	}
-</style>
+</style>

pages/circle/publishCircle.vue

@@ -0,0 +1,157 @@
+<template>
+	<view class="publish-circle-box flex-common-css">
+		<Nav :titleColor="'#000'" :title="''" :rightShow="true" :rightType="2">
+			<template slot="right">
+				<view @click="publishBut" class="nav-right sys-background-black sys-radius-8">
+					<view class="publish sys-color-white sys-weight-500 sys-size-28">
+						发布
+					</view>
+					<uni-icons class="publish-icons" type="paperplane-filled" size="20" color="#fff"></uni-icons>
+				</view>
+			</template>
+		</Nav>
+		<scroll-view :scroll-y="true" class="list-scroll" @scroll="scroll" @scrolltolower="scrolltolower">
+			<textarea @input="bindTextAreaBlur" auto-height placeholder="这一刻的想法..." />
+			<view class="publish-img-box">
+				<view class="publish-img" v-for="item in 5">
+					<image class="img sys-radius-16" src="../../static/img/login/2.jpg" mode=""></image>
+					<view class="delete sys-radius-round sys-background-transparent" @click="deleteImg">
+						<uni-icons type="closeempty" size="20" color="#fff"></uni-icons>
+					</view>
+				</view>
+				<view @click="addImg" class="add-img sys-radius-16 sys-background-F1">
+					<image class="circle-add-img" src="/static/img/circle/cancel-icon-2@2x.png"></image>
+				</view>
+			</view>
+			<view class="tag-box">
+				<view class="tag sys-radius-200" v-for="(item,index) in 3">
+				<uni-icons type="location-filled" size="12" color="#2F80ED"></uni-icons>
+				<view class="tag-name sys-color-2F80ED sys-size-24">
+					重庆渝北区
+				</view>
+					<uni-icons @click="deleteTag" type="closeempty" size="14" color="#2F80ED"></uni-icons>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		components: {},
+		data() {
+			return {
+				publishContent: '',
+			};
+		},
+		mounted() {},
+		methods: {
+			scroll() {},
+			scrolltolower() {},
+			bindTextAreaBlur(e) {
+				this.publishContent = e.detail.value
+				console.log(e.detail.value)
+			},
+			publishBut(){
+				//发布
+			},
+			deleteImg(){
+				// 删除图片
+			},
+			addImg(){
+				//添加图片
+			},
+			deleteTag(){
+				//删除标签
+			},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.publish-circle-box {
+		.nav-right {
+			padding: 8rpx 18rpx 8rpx 16rpx;
+			display: flex;
+			align-items: center;
+
+			.publish-icons {
+				margin: 0 0 0 4rpx;
+			}
+		}
+
+		.list-scroll {
+			width: 100%;
+			flex: 1;
+			overflow: auto;
+			padding: 24rpx 30rpx;
+			box-sizing: border-box;
+			display: flex;
+			flex-direction: column;
+
+			.publish-img-box {
+				padding: 160rpx 0 20rpx 0;
+				display: flex;
+				align-items: center;
+				flex-wrap: wrap;
+
+				.publish-img {
+					width: 220rpx;
+					height: 220rpx;
+					margin: 0 12rpx 12rpx 0;
+					position: relative;
+
+					.img {
+						width: 100%;
+						height: 100%;
+						display: block;
+					}
+
+					.delete {
+						position: absolute;
+						right: 10rpx;
+						top: 10rpx;
+						width: 44rpx;
+						height: 44rpx;
+						border: 1rpx solid rgba(255, 255, 255, 0.7);
+						display: flex;
+						align-items: center;
+						justify-content: center;
+					}
+				}
+
+				.add-img {
+					width: 220rpx;
+					height: 220rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+
+					.circle-add-img {
+						width: 56rpx;
+						height: 50rpx;
+					}
+				}
+			}
+
+			.tag-box {
+				width: 100%;
+				height: auto;
+				display: flex;
+				align-items: center;
+				flex-wrap: wrap;
+
+				.tag {
+					display: flex;
+					align-items: center;
+					padding: 12rpx 16rpx 10rpx;
+					background: rgba(47, 128, 237, 0.1);
+					margin: 0 12rpx 12rpx 0;
+					.tag-name{
+						margin: 0 28rpx 0 12rpx;
+					}
+				}
+			}
+		}
+	}
+</style>

static/css/sys.css

@@ -84,6 +84,9 @@
 .sys-color-00E7EA{
   color: #00E7EA;
 }
+.sys-color-2F80ED{
+  color: #2F80ED;
+}
 .sys-color-green{
   color: #12CE87;
 }
@@ -129,9 +132,6 @@
 .sys-color-5B{
   color: #5B5B5B;
 }
-.sys-color-4BC285{
-  color: #4BC285;
-}
 
 
 
@@ -164,6 +164,7 @@
 .sys-background-41AAEE{
   background-color: #41AAEE;
 }
+
 .sys-background-6DCF06{
   background-color: #6DCF06;
 }
@@ -184,10 +185,16 @@
 .sys-background-BF{
   background-color: #BFBFBF;
 }
+.sys-background-F1{
+  background-color: #F1F1F1;
+}
 
 .sys-background-222{
   background-color: #222222;
 }
+.sys-background-transparent{
+  background-color: transparent;
+}