no message

pages/circle/recommended.vue

@@ -1,22 +1,248 @@
 <template>
-	<view class="flex-common-css ">
-		<Nav ></Nav>
-		<view class="recommended-content">
-			
-		</view>
+	<view class="flex-common-css">
+		<Nav class="nav-class" :bgckgroundBox="!isScroll?'transparent':'#fff'" :titleColor="isScroll?'#000':'#fff'">
+		</Nav>
+		<scroll-view :scroll-y="true" class="list-scroll" @scroll="scroll" @scrolltolower="scrolltolower">
+			<view class="head-bg-img">
+				<image class="bg-img" src="@/static/img/circle/1.png" mode=""></image>
+				<view class="head-title">
+					<view class="head-title-l">
+						<image class="head-title-l-img sys-radius-12" src="@/static/img/circle/1.png" mode=""></image>
+						<view class="head-title-l-name">
+							<view class="head-title-l-name-one">
+								<image class="icon" src="@/static/img/circle/1.png" mode=""></image>
+								<view class="sys-size-36 sys-weight-600 sys-color-white">
+									圈子标题名称
+								</view>
+							</view>
+							<view class="sys-size-28 sys-color-white">
+								815.4w人在这里
+							</view>
+						</view>
+					</view>
+					<view
+						class="head-title-r sys-height-56 sys-color-black sys-size-28 sys-background-gray-f sys-radius-12">
+						加入
+					</view>
+				</view>
+				<view class="placeholder-box">
+					<view class="placeholder"></view>
+				</view>
+			</view>
+			<view class="topic-box">
+				<view class="topic-title sys-color-black sys-weight-600 sys-size-28">
+					热聊话题
+				</view>
+				<scroll-view scroll-x="true" class="topic-list">
+						<view class="list sys-background-gray-6f sys-radius-20" v-for="(item,index) in listData"
+							:key="index">
+							<view class="list-left">
+								<image class="list-img sys-radius-12" :src="item.img" mode=""></image>
+								<view class="list-text">
+									<view class="sys-size-32 sys-weight-600 sys-color-black">
+										{{item.name}}
+									</view>
+									<view class="sys-color-gray-9 sys-size-24">
+										{{item.num}}w人在看
+									</view>
+								</view>
+							</view>
+							<view class="goto-img sys-background-gray-E0 sys-radius-round">
+								<uni-icons type="right" size="12" color="#666"></uni-icons>
+							</view>
+						</view>
+				</scroll-view>
+			</view>
+			<my-praise class="my-praise" :tagNum="1"></my-praise>
+		</scroll-view>
 	</view>
 </template>
 
 <script>
+	import MyPraise from "@/pages/my/model/my-praise";
 	export default {
-		components: {},
+		components: {
+			MyPraise,
+		},
 		data() {
-			return {};
+			return {
+				isScroll: false,
+				listData: [{
+					'img': '/static/img/temporary/1.png',
+					'name': '今天最想吃什么',
+					'num': '10.6'
+				}, {
+					'img': '/static/img/temporary/1.png',
+					'name': '今天最想吃什么',
+					'num': '10.6'
+				}, {
+					'img': '/static/img/temporary/1.png',
+					'name': '今天最想吃什么',
+					'num': '10.6'
+				}, {
+					'img': '/static/img/temporary/1.png',
+					'name': '今天最想吃什么',
+					'num': '10.6'
+				}],
+			};
 		},
 		mounted() {},
-		methods: {},
+		methods: {
+			scroll(e) {
+				if (e.detail.scrollTop > 50) {
+					this.isScroll = true
+				} else {
+					this.isScroll = false
+				}
+			},
+			scrolltolower() {
+				console.log('触底');
+			}
+		},
 	}
 </script>
 
 <style lang="scss" scoped>
+	.nav-class {
+		position: absolute;
+		left: 0;
+		top: 0;
+	}
+
+	.list-scroll {
+		width: 100%;
+		flex: 1;
+		overflow: auto;
+	}
+
+	.head-bg-img {
+		width: 100%;
+		height: 380rpx;
+		position: relative;
+
+		.bg-img {
+			width: 100%;
+			height: 100%;
+		}
+
+		.head-title {
+			width: 100%;
+			height: auto;
+			position: absolute;
+			left: 0;
+			bottom: 40rpx;
+			display: flex;
+			justify-content: space-between;
+			box-sizing: border-box;
+			padding: 0 26rpx 0 32rpx;
+
+			.head-title-l {
+				display: flex;
+				align-items: center;
+
+				.head-title-l-img {
+					width: 120rpx;
+					height: 120rpx;
+					margin: 0 24rpx 0 0;
+				}
+
+				.head-title-l-name {
+					display: flex;
+					flex-direction: column;
+
+					.head-title-l-name-one {
+						display: flex;
+						align-items: center;
+						margin: 0 0 22rpx 0;
+
+						.icon {
+							width: 40rpx;
+							height: 40rpx;
+							margin: 0 8rpx 0 0;
+						}
+					}
+
+					.head-title-l-name-two {}
+				}
+			}
+
+			.head-title-r {
+				padding: 0 32rpx;
+				box-sizing: border-box;
+			}
+		}
+
+		.placeholder-box {
+			width: 100%;
+			height: 20rpx;
+			// background: #333;
+			position: absolute;
+			bottom: 0;
+
+			.placeholder {
+				width: 100%;
+				height: 100%;
+				border-radius: 32rpx 32rpx 0 0;
+				background: #fff;
+			}
+		}
+	}
+
+	.topic-box {
+		width: 100%;
+		height: auto;
+		display: flex;
+		flex-direction: column;
+
+		.topic-title {
+			margin: 0 0 24rpx 32rpx;
+		}
+
+		.topic-list {
+			width: 100%;
+			padding: 0 12rpx;
+			display: flex;
+			align-items: center;
+			white-space: nowrap;
+			box-sizing: border-box;
+
+			.list {
+				display: inline-block;
+				width: 476rpx;
+				height: 138rpx;
+				// display: flex;
+				margin: 0 12rpx;
+				padding: 18rpx;
+				box-sizing: border-box;
+				align-items: center;
+				justify-content: space-between;
+				position: relative;
+				flex: 1;
+
+				.list-left {
+					display: flex;
+					align-items: center;
+
+					.list-img {
+						width: 104rpx;
+						height: 104rpx;
+						margin: 0 20rpx 0 0;
+					}
+
+					.list-text {}
+				}
+
+				.goto-img {
+					width: 32rpx;
+					height: 32rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					position: absolute;
+					right: 32rpx;
+					top: 40%;
+				}
+			}
+		}
+	}
 </style>

pages/my/model/my-praise.vue

@@ -182,7 +182,7 @@ export default {
 .my-praise-box{
 	.publish-box {
 		width: 100%;
-		height: auto;
+		// height: 100%;
 		display: flex;
 		border-top: 20rpx solid #FAFAFA;
 		border-bottom: 20rpx solid #FAFAFA;

static/css/sys.css

@@ -124,6 +124,12 @@
 .sys-background-gray-9{
   background-color: #999999;
 }
+.sys-background-gray-6f{
+  background-color: #F6F6F6;
+}
+.sys-background-gray-E0{
+  background-color: #E0E0E0;
+}
 .sys-background-green{
   background-color: #12CE87;
 }
@@ -156,6 +162,9 @@
 .sys-radius-200{
   border-radius: 200rpx;
 }
+.sys-radius-20{
+  border-radius: 20rpx;
+}
 .sys-radius-16{
   border-radius: 16rpx;
 }
@@ -211,5 +220,9 @@ overflow: hidden;
   height: 34rpx;
   line-height: 34rpx;
 }
+.sys-height-56{
+  height: 56rpx;
+  line-height: 56rpx;
+}