|
|
@@ -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>
|
