|
|
@@ -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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
