no message

pages.json

@@ -151,6 +151,13 @@
         "enablePullDownRefresh": false
       }
     },
+		{
+		  "path": "pages/circle/recommended",
+		  "style": {
+		    "navigationBarTitleText": "",
+		    "enablePullDownRefresh": false
+		  }
+		},
     {
       "path": "pages/msg/index",
       "style": {

pages/circle/index.vue

@@ -1,184 +1,211 @@
 <template>
-  <view class="circle-box">
-    <view class="circle-title"  :style="[{ 'margin-top': statusBarH + 'px'}]">
-      <view class="title-left">
-        <view class="title-text sys-height-44 sys-color-gray-9 sys-weight-400" @click="setTitleTag(0)" :class="{'title-text-default':tagNum===0}">好友</view>
-        <view class="title-text sys-height-44 sys-color-gray-9 sys-weight-400" @click="setTitleTag(1)"  :class="{'title-text-default':tagNum===1}">附近</view>
-        <view class="title-text sys-height-44 sys-color-gray-9 sys-weight-400" @click="setTitleTag(2)"  :class="{'title-text-default':tagNum===2}">推荐</view>
-      </view>
-      <view class="title-right">
-        <view class="title-icon">
-          <image class="title-img" src="/static/img/circle/Group-100345@2x.png"></image>
-        </view>
-        <view class="title-icon">
-          <image class="title-img" src="/static/img/circle/Group-100344@2x.png"></image>
-        </view>
-      </view>
-
-    </view>
-
-    <view class="circle-content" >
-      <scroll-view :scroll-y="true" :style="{'height':'calc(100vh - '+navHeight+'rpx - var(--window-bottom))'}">
-        <my-praise></my-praise>
-      </scroll-view>
-    </view>
-    <view class="circle-add sys-background-yellow">
-      <image class="circle-add-img" src="/static/img/circle/cancel-icon-2@2x.png"></image>
-    </view>
-  </view>
+	<view class="circle-box">
+		<view class="circle-title" :style="[{ 'margin-top': statusBarH + 'px'}]">
+			<view class="title-left">
+				<view class="title-text sys-height-44 sys-color-gray-9 sys-weight-400" @click="setTitleTag(0)"
+					:class="{'title-text-default':tagNum===0}">好友</view>
+				<view class="title-text sys-height-44 sys-color-gray-9 sys-weight-400" @click="setTitleTag(1)"
+					:class="{'title-text-default':tagNum===1}">附近</view>
+				<view class="title-text sys-height-44 sys-color-gray-9 sys-weight-400" @click="setTitleTag(2)"
+					:class="{'title-text-default':tagNum===2}">推荐</view>
+			</view>
+			<view class="title-right">
+				<view class="title-icon">
+					<image class="title-img" src="/static/img/circle/Group-100345@2x.png"></image>
+				</view>
+				<view class="title-icon">
+					<image class="title-img" src="/static/img/circle/Group-100344@2x.png"></image>
+				</view>
+			</view>
+		</view>
+
+		<view class="circle-content">
+			<scroll-view :scroll-y="true" :style="{'height':'calc(100vh - '+navHeight+'rpx - var(--window-bottom))'}">
+				<my-praise :tagNum="tagNum"></my-praise>
+			</scroll-view>
+		</view>
+		
+		<view class="circle-add sys-background-yellow">
+			<image class="circle-add-img" src="/static/img/circle/cancel-icon-2@2x.png"></image>
+		</view>
+	</view>
 </template>
 
 <script>
-import EnNav from "@/components/en-utils/en-nav/en-nav";
-import MyPraise from "@/pages/my/model/my-praise";
-export default {
-  components: {MyPraise, EnNav},
-  data() {
-    return {
-      statusBarH:0,
-      tagNum:0,
-      navHeight:44
-    }
-  },
-  methods: {
-    setTitleTag(num){
-      if(num!==this.tagNum){
-        this.tagNum=num
-      }
-    }
-  },
-  created() {
-    uni.getSystemInfo({
-      success: (e) =>{
-        this.statusBarH = e.statusBarHeight
-        this.navHeight=(50+this.statusBarH)*2
-        //e.safeArea.bottom  底部安全距离
-      }
-    })
-
-  }
-}
+	import EnNav from "@/components/en-utils/en-nav/en-nav";
+	import MyPraise from "@/pages/my/model/my-praise";
+	export default {
+		components: {
+			MyPraise,
+			EnNav
+		},
+		data() {
+			return {
+				statusBarH: 0,
+				tagNum: 0,
+				navHeight: 44
+			}
+		},
+		methods: {
+			setTitleTag(num) {
+				if (num !== this.tagNum) {
+					this.tagNum = num
+				}
+			}
+		},
+		created() {
+			uni.getSystemInfo({
+				success: (e) => {
+					this.statusBarH = e.statusBarHeight
+					this.navHeight = (50 + this.statusBarH) * 2
+					//e.safeArea.bottom  底部安全距离
+				}
+			})
+
+		}
+	}
 </script>
 
 <style scoped lang="scss">
-.circle-box{
-  .circle-title{
-    display: flex;
-    justify-content: space-between;
-    padding:22rpx 36rpx;
-    .title-left{
-      display: flex;
-      justify-content: flex-start;
-      .title-text{
-        font-size: 32rpx;
-        margin-right: 56rpx;
-      }
-      .title-text-default{
-        font-weight: 600;
-        color: #141414;
-      }
-
-    }
-    .title-right{
-      display: flex;
-      justify-content: flex-end;
-      .title-img{
-        width: 44rpx;
-        height: 44rpx;
-        margin-left: 40rpx;
-      }
-    }
-
-  }
-  .circle-content{
-    padding: 0 32rpx;
-    .circle-item{
-      margin-top: 32rpx;
-      margin-bottom: 8rpx;
-      display: flex;
-      justify-content: space-between;
-      .item-left{
-        width: 80rpx;
-        height: 80rpx;
-        position: relative;
-        .item-head{
-          width: 80rpx;
-          height: 80rpx;
-          border-radius: 50%;
-        }
-        .item-auth{
-          width: 18rpx;
-          height: 18rpx;
-          position: absolute;
-          bottom: 0;
-          right: 8rpx;
-          z-index: 10;
-        }
-
-      }
-      .item-right{
-        padding-left: 20rpx;
-        width: calc(100vw - 144rpx);
-        .circle-top-data{
-          display: flex;
-          justify-content: space-between;
-          .circle-top-left{
-            .circle-top-left-title{
-              display: flex;
-              justify-content: flex-start;
-              align-items: center;
-              .left-title-text{
-                  font-size: 32rpx;
-                margin-right: 8rpx;
-              }
-              .left-title-vip-img{
-                height: 28rpx;
-              }
-            }
-            .left-title-time{
-              margin-top: 8rpx;
-              line-height: 34rpx;
-              font-size: 24rpx;
-            }
-          }
-          .circle-top-right{
-            height: 40rpx;
-            border-radius: 200rpx;
-            border: 2rpx solid #141414;
-            padding: 8rpx 16rpx;
-            display: flex;
-            justify-content: space-between;
-            .circle-top-right-img{
-              width: 40rpx;
-              height: 40rpx;
-              margin-right: 8rpx;
-            }
-            .circle-top-right-text{
-              font-size: 28rpx;
-              line-height: 40rpx;
-            }
-          }
-        }
-      }
-
-    }
-  }
-  .circle-add{
-    position: absolute;
-    bottom: 70rpx;
-    right: 22rpx;
-    border-radius: 50%;
-    width: 88rpx;
-    height: 88rpx;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .circle-add-img{
-      width: 40rpx;
-      height: 40rpx;
-    }
-  }
-
-}
+	.circle-box {
+		.circle-title {
+			display: flex;
+			justify-content: space-between;
+			padding: 22rpx 36rpx;
+
+			.title-left {
+				display: flex;
+				justify-content: flex-start;
+
+				.title-text {
+					font-size: 32rpx;
+					margin-right: 56rpx;
+				}
+
+				.title-text-default {
+					font-weight: 600;
+					color: #141414;
+				}
+
+			}
+
+			.title-right {
+				display: flex;
+				justify-content: flex-end;
+
+				.title-img {
+					width: 44rpx;
+					height: 44rpx;
+					margin-left: 40rpx;
+				}
+			}
+
+		}
+
+		.circle-content {
+			// padding: 0 32rpx;
+
+			.circle-item {
+				margin-top: 32rpx;
+				margin-bottom: 8rpx;
+				display: flex;
+				justify-content: space-between;
+
+				.item-left {
+					width: 80rpx;
+					height: 80rpx;
+					position: relative;
+
+					.item-head {
+						width: 80rpx;
+						height: 80rpx;
+						border-radius: 50%;
+					}
+
+					.item-auth {
+						width: 18rpx;
+						height: 18rpx;
+						position: absolute;
+						bottom: 0;
+						right: 8rpx;
+						z-index: 10;
+					}
+
+				}
+
+				.item-right {
+					padding-left: 20rpx;
+					width: calc(100vw - 144rpx);
+
+					.circle-top-data {
+						display: flex;
+						justify-content: space-between;
+
+						.circle-top-left {
+							.circle-top-left-title {
+								display: flex;
+								justify-content: flex-start;
+								align-items: center;
+
+								.left-title-text {
+									font-size: 32rpx;
+									margin-right: 8rpx;
+								}
+
+								.left-title-vip-img {
+									height: 28rpx;
+								}
+							}
+
+							.left-title-time {
+								margin-top: 8rpx;
+								line-height: 34rpx;
+								font-size: 24rpx;
+							}
+						}
+
+						.circle-top-right {
+							height: 40rpx;
+							border-radius: 200rpx;
+							border: 2rpx solid #141414;
+							padding: 8rpx 16rpx;
+							display: flex;
+							justify-content: space-between;
+
+							.circle-top-right-img {
+								width: 40rpx;
+								height: 40rpx;
+								margin-right: 8rpx;
+							}
+
+							.circle-top-right-text {
+								font-size: 28rpx;
+								line-height: 40rpx;
+							}
+						}
+					}
+				}
+
+			}
+		}
+
+		.circle-add {
+			position: fixed;
+			bottom: 162rpx;
+			// bottom: 64rpx;
+			right: 28rpx;
+			border-radius: 50%;
+			width: 88rpx;
+			height: 88rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			.circle-add-img {
+				width: 40rpx;
+				height: 40rpx;
+			}
+		}
 
+	}
 </style>

pages/circle/recommended.vue

@@ -0,0 +1,22 @@
+<template>
+	<view class="flex-common-css ">
+		<Nav ></Nav>
+		<view class="recommended-content">
+			
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		components: {},
+		data() {
+			return {};
+		},
+		mounted() {},
+		methods: {},
+	}
+</script>
+
+<style lang="scss" scoped>
+</style>

pages/my/model/my-praise.vue

@@ -1,8 +1,52 @@
 <template>
   <view class="my-praise-box">
+		<view class="" v-show="tagNum == 0">
+				<view class="publish-box" v-show="publishBoxOff">
+				<image class="publish-img sys-radius-12" src="/static/img/circle/1.png" mode=""></image>
+				<view class="publish-text">
+					<view class="publish-title sys-color-black-0 sys-weight-400 sys-size-34">
+						不太正经的机车照片
+					</view>
+					<view class="sys-size-28 sys-weight-400 sys-color-gray-9">
+						记录在自由路.上的轰鸣瞬间
+					</view>
+				</view>
+				<view class="publish-button sys-background-FF9F14 sys-radius-200 sys-size-28 sys-color-white">
+					去发布
+				</view>
+				<view class="off-button sys-background-F2F2F2 sys-radius-round-left-80" @click="publishOff">
+					<image class="off-img" src="/static/img/circle/off.png" mode=""></image>
+				</view>
+			</view>
+		</view>
+	
+		<scroll-view class="recommended-box" scroll-x="true" v-show="tagNum == 2">
+		 <view class="recommended-list" v-for="(item,i) in listTwo" :key="i" @click="goRecommended">
+		 	<image class="recommended-list-img sys-radius-16" :src="item.img" mode=""></image>
+		 	<view class="recommended-list-name">
+		 		<image class="list-name-img" src="../../../static/dgex-tantan/like.png" mode=""></image>
+		 		<view class="sys-color-white sys-size-28">
+		 			{{item.text}}
+		 		</view>
+		 	</view>
+		 	<view class="recommended-list-text">
+		 		<view class="recommended-list-text-left">
+		 			<!-- <image v-for="imgs in item.icon" class="list-text-left-img sys-radius-8" :src="imgs" mode=""></image> -->
+					<image v-for="imgs in item.icon" class="list-text-left-img sys-radius-8" src="/static/img/temporary/1.png" mode=""></image>
+		 		</view>
+				<view class="recommended-list-text-right">
+					<view class="sys-size-24 sys-color-white">
+						{{item.num}}人在这里
+					</view>
+					<uni-icons type="forward" size="12" color="#fff"></uni-icons>
+				</view>
+		 	</view>
+		 </view>
+		</scroll-view>
+		
     <view class="praise-item" @click="goToDetails" v-for="(item,itemIndex) in list">
       <view class="praise-left">
-        <image class="praise-head" src="/static/img/temporary/3.png" mode="aspectFill"></image>
+        <image class="praise-head" src="/static/img/temporary/3.png" mode="aspectFill"></image>    
       </view>
       <view class="praise-right">
         <view class="praise-top-data">
@@ -76,7 +120,9 @@ import Call from "@/pages/common/call/call";
 export default {
   name: "my-praise",
   components: {Call, DynamicTag, ImgThree, ImgTwo, ImgOne},
-  props: {},
+  props: {
+		tagNum:{},
+	},
   data() {
     return {
       tagBg:'#F2F2F2',
@@ -93,7 +139,12 @@ export default {
             '/static/img/temporary/3.png',
             '/static/img/temporary/2.png',
           ],'tag':[{'text':'南亭新都会商场','icon':'1'},{'text':'你好认识一哈','icon':'2'}],'likeNum':10,'evaluateNum':20,'isLike':true},
-      ]
+      ],
+			listTwo:[
+				{'text':'24h照片营业馆','img':'/static/img/temporary/1.png','icon':['/static/img/temporary/1.png','/static/img/temporary/1.png'],'num':'815.4w'},
+				{'text':'24h照片营业馆','img':'/static/img/temporary/1.png'},{'img':'/static/img/login/2.jpg','text':'24h照片营业馆'},{'img':'/static/img/login/2.jpg','text':'24h照片营业馆'},
+			],
+			publishBoxOff:true
     }
   },
   watch: {},
@@ -113,14 +164,124 @@ export default {
       uni.navigateTo({
         'url':'/pages/circle/circle'
       })
-    }
+    },
+		goRecommended(){
+			uni.navigateTo({
+			  'url':'/pages/circle/recommended'
+			})
+		},
+		publishOff(){
+			this.publishBoxOff = false
+			console.log(this.publishBoxOff);
+		},
   }
 }
 </script>
 
 <style scoped lang="scss">
 .my-praise-box{
+	.publish-box {
+		width: 100%;
+		height: auto;
+		display: flex;
+		border-top: 20rpx solid #FAFAFA;
+		border-bottom: 20rpx solid #FAFAFA;
+		padding: 32rpx;
+		justify-content: space-between;
+		position: relative;
+		align-items: center;
+		box-sizing: border-box;
+	
+		.publish-img {
+			width: 120rpx;
+			height: 120rpx;
+			flex-shrink: 0;
+		}
+	
+		.publish-text {
+			.publish-title {
+				margin: 0 0 8rpx 0;
+			}
+		}
+	
+		.publish-button {
+			flex-shrink: 0;
+			padding: 6rpx 32rpx;
+		}
+	
+		.off-button {
+			position: absolute;
+			right: 0;
+			top: 0;
+			padding: 0rpx 2rpx 6rpx 12rpx;
+	
+			.off-img {
+				width: 24rpx;
+				height: 24rpx;
+			}
+		}
+	}
+	.recommended-box{
+		box-sizing: border-box;
+		width: 100%;
+		padding: 0 24rpx;
+		display: flex;
+		align-items: center;
+		white-space: nowrap;
+		.recommended-list{
+			display: inline-block;
+			width: 320rpx;
+			height: 160rpx;
+			margin: 0 8rpx;
+			padding: 16rpx 4rpx 16rpx 12rpx;
+			box-sizing: border-box;
+			position: relative;
+			// flex-shrink: 0;
+			.recommended-list-img{
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				left: 0;
+				top: 0;
+				z-index: -1;
+			}
+			.recommended-list-name{
+				display: flex;
+				align-items: center;
+				.list-name-img{
+					width: 28rpx;
+					height: 28rpx;
+					margin: 0 10rpx 0 0;
+				}
+			}
+			.recommended-list-text{
+				width: 100%;
+				padding: 0 4rpx 0 16rpx;
+				box-sizing: border-box;
+				position: absolute;
+				bottom: 16rpx;
+				left: 0;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				.recommended-list-text-left{
+					display: flex;
+					align-items: center;
+					.list-text-left-img{
+						width: 40rpx;
+						height: 40rpx;
+						margin: 0 4rpx 0 0;
+					}
+				}
+				.recommended-list-text-right{
+					display: flex;
+					align-items: center;
+				}
+			}
+		}
+	}
   .praise-item{
+		padding: 0 	32rpx;
     margin : 40rpx 0 4rpx 0;
     border-bottom: 1rpx solid #F2F2F2;
     display: flex;

static/css/sys.css

@@ -44,6 +44,7 @@
 .sys-size-34{
   font-size: 34rpx;
 }
+
 .sys-size-36{
   font-size: 36rpx;
 }
@@ -113,6 +114,12 @@
 .sys-background-yellow{
   background-color: #FFC107;
 }
+.sys-background-FF9F14{
+  background-color: #FF9F14;
+}
+.sys-background-F2F2F2{
+  background-color: #F2F2F2;
+}
 
 
 /* 圆角 */
@@ -122,12 +129,21 @@
 .sys-radius-16{
   border-radius: 16rpx;
 }
+.sys-radius-12{
+  border-radius: 12rpx;
+}
+.sys-radius-8{
+  border-radius: 8rpx;
+}
 .sys-radius-6{
   border-radius: 6rpx;
 }
 .sys-radius-round{
   border-radius: 50%;
 }
+.sys-radius-round-left-80{
+  border-radius: 0 0 0 80%;
+}
 
 
 /*未选中按钮*/