no message

pages.json

@@ -175,10 +175,17 @@
 				"enablePullDownRefresh": false
 			}
 		},
+		{
+			"path": "pages/circle/topicPlaza",
+			"style": {
+				"navigationBarTitleText": "话题广场",
+				"enablePullDownRefresh": false
+			}
+		},
 		{
 			"path": "pages/circle/topic",
 			"style": {
-				"navigationBarTitleText": "关注的话题",
+				"navigationBarTitleText": "话题",
 				"enablePullDownRefresh": false
 			}
 		},

pages/circle/topicPlaza.vue

@@ -1,20 +1,64 @@
 <template>
 	<view class="topic-plaza flex-common-css">
-		<Nav class="nav-class" :bgckgroundBox="!isScroll?'#141414':'#fff'" :titleColor="isScroll?'#000':'#fff'">
+		<Nav class="nav-class" :title="'话题广场'" :bgckgroundBox="!isScroll?'#141414':'#fff'"
+			:titleColor="isScroll?'#000':'#fff'">
 		</Nav>
 		<scroll-view :scroll-y="true" class="list-scroll" @scroll="scroll" @scrolltolower="scrolltolower">
-			<view class="swiper-box">
+			<view class="sys-background-black">
+				<view class="follow-box sys-size-32 sys-weight-500 sys-color-5B">
+					大家都在聊
+				</view>
 				<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current"
-					:mode="mode" :dots-styles="dotsStyles" field="content">
-					<swiper class="swiper-box">
-						<swiper-item v-for="(item, index) in 3" :key="index">
-							<view class="swiper-item" :class="'swiper-item'">
-								<!-- <text style="color: #fff; font-size: 32px;">{{index+1}}</text> -->
+					mode="round" :dots-styles="dotsStyles">
+					<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
+						<swiper-item v-for="(item, index) in info" :key="index">
+							<view @click="goPlaza(itemTwo.id)" v-for="(itemTwo,indexTwo) in item.data" :key="indexTwo"
+								class="swiper-item">
+								<image class="swiper-img sys-radius-8" :src="itemTwo.url" mode=""></image>
+								<view class="swiper-right">
+									<view class="swiper-right-name">
+										<view class="sys-size-28 sys-color-white">
+											# {{itemTwo.name}}
+										</view>
+										<view class="tp sys-color-4BC285 sys-size-28">
+											投票
+										</view>
+									</view>
+									<view class="sys-size-24 sys-color-5B">
+										{{itemTwo.num}}w人参与了投票
+									</view>
+								</view>
 							</view>
 						</swiper-item>
 					</swiper>
 				</uni-swiper-dot>
 			</view>
+			<view class="list-box flex-index-css">
+				<view class="list">
+					<view class="list-title sys-size-32 sys-weight-600 sys-color-black">
+						# 嘿，我在
+					</view>
+					<view class="list-num sys-color-gray-9 sys-size-28">
+						{{839}}条动态
+					</view>
+					<view class="list-data">
+						<view class="list-left">
+							<view class="list-left-text">
+								来了不想走
+							</view>
+							<view class="list-left-time">
+								<view class="list-left-time-text sys-color-gray-9 sys-size-24">
+									你会唱晴天吗？
+								</view>
+								<view class="list-time sys-color-gray-9 sys-size-24">
+									13分钟前发布
+								</view>
+							</view>
+						</view>
+						<image class="list-right sys-radius-12" src="/static/img/login/2.jpg" mode=""></image>
+					</view>
+				</view>
+			</view>
 		</scroll-view>
 	</view>
 </template>
@@ -25,6 +69,75 @@
 		data() {
 			return {
 				isScroll: false,
+				info: [{
+						data: [{
+							name: '能接受姐弟恋吗?',
+							url: '/static/img/login/2.jpg',
+							num: '1.6w',
+							id: 1,
+						}, {
+							name: '分手后还能不能做朋友投票?',
+							url: '/static/img/temporary/1.png',
+							num: '1.6w'
+						}, {
+							name: '相亲要不要AA制投票?',
+							url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
+							num: '1.6w'
+						}]
+					},
+					{
+						data: [{
+							name: '分手后还能不能做朋友投票',
+							url: '/static/img/login/2.jpg',
+							num: '1.6w'
+						}, {
+							name: '分手后还能不能做朋友投票?',
+							url: '/static/img/login/2.jpg',
+							num: '1.6w'
+						}, {
+							name: '分手后还能不能做朋友投票?',
+							url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
+							num: '1.6w'
+						}]
+					},
+					{
+						data: [{
+							name: '相亲要不要AA制投票?',
+							url: '/static/img/login/2.jpg',
+							num: '1.6w'
+						}, {
+							name: '相亲要不要AA制投票?',
+							url: '/static/img/temporary/1.png',
+							num: '1.6w'
+						}, {
+							name: '相亲要不要AA制投票?',
+							url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
+							num: '1.6w'
+						}]
+					}
+				],
+				listData: [{
+					name: '相亲要不要AA制投票?',
+					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
+					num: '1.6w'
+				}, {
+					name: '相亲要不要AA制投票?',
+					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
+					num: '1.6w'
+				}, {
+					name: '相亲要不要AA制投票?',
+					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
+					num: '1.6w'
+				}],
+				current: 0,
+				dotsStyles: {
+					backgroundColor: 'rgba(255,255,255,0.4)',
+					border: 'rgba(255,255,255,0.4)',
+					color: '#fff',
+					selectedBackgroundColor: '#fff',
+					selectedBorder: '#fff',
+				},
+				swiperDotIndex: 0,
 			};
 		},
 		mounted() {},
@@ -39,20 +152,123 @@
 			scrolltolower() {
 				console.log('触底');
 			},
+			change(e) {
+				this.current = e.detail.current
+			},
+			clickItem(e) {
+				this.swiperDotIndex = e
+			},
+			goPlaza(id) {}
 		},
 	}
 </script>
 
 <style lang="scss" scoped>
+	::v-deep .uni-swiper__dots-box[data-v-77b53eff] {
+		position: fixed;
+		bottom: 10px;
+		left: 77%;
+		top: -77%;
+		right: 0;
+		display: flex;
+		flex: 1;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		z-index: 9999;
+	}
+
 	.topic-plaza {
 		.list-scroll {
 			width: 100%;
 			flex: 1;
 			overflow: auto;
 
+			.follow-box {
+				padding: 40rpx 0 0 32rpx;
+				width: 100%;
+				height: auto;
+			}
+
 			.swiper-box {
 				width: 100%;
 				height: 436rpx;
+				padding: 42rpx 32rpx 0;
+				box-sizing: border-box;
+
+				.swiper-item {
+					display: flex;
+					align-items: center;
+					margin: 0 0 42rpx 0;
+
+					.swiper-img {
+						width: 88rpx;
+						height: 88rpx;
+						margin: 0 20rpx 0 0;
+					}
+
+					.swiper-right {
+						.swiper-right-name {
+							display: flex;
+							align-items: center;
+							margin: 0 0 4rpx 0;
+						}
+
+						.tp {
+							margin: 0 0 0 8rpx;
+							font-family: PangMenZhengDao-3-Regular, PangMenZhengDao-3;
+						}
+					}
+				}
+			}
+
+			.list-box {
+				padding: 40rpx 32rpx 0;
+				box-sizing: border-box;
+
+				.list {
+					width: 100%;
+					height: auto;
+					margin: 0 0 60rpx 0;
+					padding: 0 0 40rpx 0;
+					border-bottom: 1rpx solid #F2F2F2;
+
+					.list-title {
+						margin: 0 0 16rpx 0;
+					}
+
+					.list-num {
+						margin: 0 0 30rpx 0;
+					}
+
+					.list-data {
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+
+						.list-left {
+							width: 100%;
+
+							.list-left-text {
+								margin: 0 0 50rpx 0;
+							}
+
+							.list-left-time {
+								width: 100%;
+								display: flex;
+								align-items: center;
+								justify-content: space-between;
+							}
+						}
+
+						.list-right {
+							width: 140rpx;
+							height: 140rpx;
+							margin: 0 0 0 40rpx;
+							flex-shrink: 0;
+						}
+					}
+				}
 			}
 		}
 	}

static/css/sys.css

@@ -120,6 +120,13 @@
 .sys-color-4BC285{
   color: #4BC285;
 }
+.sys-color-5B{
+  color: #5B5B5B;
+}
+.sys-color-4BC285{
+  color: #4BC285;
+}
+