py 2 lat temu
rodzic
commit
97717a63b3
1 zmienionych plików z 59 dodań i 15 usunięć
  1. 59 15
      pages/circle/recommended.vue

+ 59 - 15
pages/circle/recommended.vue

@@ -34,24 +34,39 @@
 					热聊话题
 				</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 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 class="goto-img sys-background-gray-E0 sys-radius-round">
-								<uni-icons type="right" size="12" color="#666"></uni-icons>
 							</view>
 						</view>
+						<view class="goto-img sys-background-gray-E0 sys-radius-round">
+							<uni-icons type="right" size="12" color="#666" v></uni-icons>
+						</view>
+					</view>
 				</scroll-view>
+				<view class="list-type">
+					<view class="list-type-l">
+						<view class="type sys-size-28 sys-weight-600" @click="selectType(1)"
+							:class="typeNum == 1?'sys-color-black type-border':'sys-color-gray-9'">
+							最新
+						</view>
+						<view class="type sys-size-28 sys-weight-600" @click="selectType(2)"
+							:class="typeNum == 2?'sys-color-black type-border':'sys-color-gray-9'">
+							最热
+						</view>
+					</view>
+					<view class="list-type-r sys-size-24 sys-color-gray-9">
+						1573条动态
+					</view>
+				</view>
 			</view>
 			<my-praise class="my-praise" :tagNum="1"></my-praise>
 		</scroll-view>
@@ -84,6 +99,7 @@
 					'name': '今天最想吃什么',
 					'num': '10.6'
 				}],
+				typeNum: 1,
 			};
 		},
 		mounted() {},
@@ -97,7 +113,10 @@
 			},
 			scrolltolower() {
 				console.log('触底');
-			}
+			},
+			selectType(num) {
+				this.typeNum = num
+			},
 		},
 	}
 </script>
@@ -205,6 +224,7 @@
 			align-items: center;
 			white-space: nowrap;
 			box-sizing: border-box;
+			margin: 0 0 40rpx 0;
 
 			.list {
 				display: inline-block;
@@ -244,5 +264,29 @@
 				}
 			}
 		}
+
+		.list-type {
+			display: flex;
+			// align-items: center;
+			justify-content: space-between;
+			padding: 0 32rpx;
+			border-bottom: 1rpx solid #F2F2F2;
+
+			.list-type-l {
+				display: flex;
+				align-items: center;
+
+				.type {
+					padding: 0 0 26rpx 0;
+					margin: 0 60rpx 0 0;
+				}
+
+				.type-border {
+					border-bottom: 4rpx solid #000000;
+				}
+			}
+
+			.list-type-r {}
+		}
 	}
 </style>