|
@@ -1,7 +1,7 @@
|
|
<template>
|
|
<template>
|
|
- <view class="my-praise-box">
|
|
|
|
|
|
+ <view class="my-praise-box">
|
|
<view class="" v-show="false">
|
|
<view class="" v-show="false">
|
|
- <view class="publish-box" v-show="publishBoxOff">
|
|
|
|
|
|
+ <view class="publish-box" v-show="publishBoxOff">
|
|
<image class="publish-img sys-radius-12" src="/static/img/circle/1.png" mode=""></image>
|
|
<image class="publish-img sys-radius-12" src="/static/img/circle/1.png" mode=""></image>
|
|
<view class="publish-text">
|
|
<view class="publish-text">
|
|
<view class="publish-title sys-color-black-0 sys-weight-400 sys-size-34">
|
|
<view class="publish-title sys-color-black-0 sys-weight-400 sys-size-34">
|
|
@@ -21,398 +21,446 @@
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<scroll-view class="recommended-box" scroll-x="true" v-show="false">
|
|
<scroll-view class="recommended-box" scroll-x="true" v-show="false">
|
|
- <view class="recommended-list" v-for="(item,i) in listTwo" :key="i" @click="goRecommended">
|
|
|
|
- <image class="recommended-list-img sys-radius-16" :src="item.img" mode=""></image>
|
|
|
|
- <view class="recommended-list-name">
|
|
|
|
- <image class="list-name-img" src="/static/dgex-tantan/like.png" mode=""></image>
|
|
|
|
- <view class="sys-color-white sys-size-28">
|
|
|
|
- {{item.text}}
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="recommended-list-text">
|
|
|
|
- <view class="recommended-list-text-left">
|
|
|
|
- <!-- <image v-for="imgs in item.icon" class="list-text-left-img sys-radius-8" :src="imgs" mode=""></image> -->
|
|
|
|
- <image v-for="imgs in item.icon" class="list-text-left-img sys-radius-8" src="/static/img/temporary/1.png" mode=""></image>
|
|
|
|
- </view>
|
|
|
|
- <view class="recommended-list-text-right">
|
|
|
|
- <view class="sys-size-24 sys-color-white">
|
|
|
|
- {{item.num}}人在这里
|
|
|
|
|
|
+ <view class="recommended-list" v-for="(item,i) in listTwo" :key="i" @click="goRecommended">
|
|
|
|
+ <image class="recommended-list-img sys-radius-16" :src="item.img" mode=""></image>
|
|
|
|
+ <view class="recommended-list-name">
|
|
|
|
+ <image class="list-name-img" src="/static/dgex-tantan/like.png" mode=""></image>
|
|
|
|
+ <view class="sys-color-white sys-size-28">
|
|
|
|
+ {{item.text}}
|
|
</view>
|
|
</view>
|
|
- <uni-icons type="forward" size="12" color="#fff"></uni-icons>
|
|
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <view class="recommended-list-text">
|
|
|
|
+ <view class="recommended-list-text-left">
|
|
|
|
+ <!-- <image v-for="imgs in item.icon" class="list-text-left-img sys-radius-8" :src="imgs" mode=""></image> -->
|
|
|
|
+ <image v-for="imgs in item.icon" class="list-text-left-img sys-radius-8" src="/static/img/temporary/1.png"
|
|
|
|
+ mode=""></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="recommended-list-text-right">
|
|
|
|
+ <view class="sys-size-24 sys-color-white">
|
|
|
|
+ {{item.num}}人在这里
|
|
|
|
+ </view>
|
|
|
|
+ <uni-icons type="forward" size="12" color="#fff"></uni-icons>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
</scroll-view>
|
|
</scroll-view>
|
|
|
|
|
|
- <view class="praise-item" @click="goToDetails" v-for="(item,itemIndex) in list">
|
|
|
|
- <view class="praise-left">
|
|
|
|
- <image class="praise-head" :src="item.avatar" mode="aspectFill"></image>
|
|
|
|
- </view>
|
|
|
|
- <view class="praise-right">
|
|
|
|
- <view class="praise-top-data">
|
|
|
|
- <view class="praise-top-left">
|
|
|
|
- <view class="praise-top-left-title">
|
|
|
|
- <view class="left-title-text sys-height-44 sys-color-black sys-weight-600">{{item.nickname}}</view>
|
|
|
|
- <view class="left-title-vip">
|
|
|
|
- <image class="left-title-vip-img" src="/static/img/my/vip.png" mode="heightFix"></image>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- </view>
|
|
|
|
- <view class="left-title-time sys-color-gray-9">{{item.createdAt}}发布</view>
|
|
|
|
- </view>
|
|
|
|
- <view class="praise-top-right">
|
|
|
|
- <call :user-id="item.userId"></call>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- <view class="right-text sys-color-black sys-weight-400">
|
|
|
|
- {{item.content}}
|
|
|
|
- </view>
|
|
|
|
- <view class="right-img">
|
|
|
|
- <view class="one-img" v-if="item.galleryUrls.length===1">
|
|
|
|
- <img-one :file-list="item.galleryUrls"></img-one>
|
|
|
|
- </view>
|
|
|
|
- <view class="two-img" v-else-if="item.galleryUrls.length===2 || item.galleryUrls.length===4">
|
|
|
|
- <img-two :file-list="item.galleryUrls"></img-two>
|
|
|
|
- </view>
|
|
|
|
- <view class="three-img" v-else>
|
|
|
|
- <img-three :type="2" :file-list="item.galleryUrls"></img-three>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="right-tag-list" v-if="false" >
|
|
|
|
- <dynamic-tag :list="item.tag" :tag-bg="tagBg" :tag-color="tagColor"></dynamic-tag>
|
|
|
|
- </view>
|
|
|
|
- <view class="right-operation-list">
|
|
|
|
- <view class="operation-share">
|
|
|
|
- <view class="operation-item">
|
|
|
|
- <view class="operation-icon"><text class="iconfont" :style="{'color':operateColor}"></text></view>
|
|
|
|
- <view class="operation-text sys-weight-400" :style="{'color':operateColor}">分享</view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="operation-items">
|
|
|
|
- <view class="operation-item">
|
|
|
|
- <view class="operation-icon" @click="setLike(itemIndex)">
|
|
|
|
- <text class="iconfont icon-dianzan" v-if="!item.liked" :style="{'color':operateColor}"> </text>
|
|
|
|
- <text class="iconfont icon-dianzan1" v-else :style="{'color':'#ED301D'}"> </text>
|
|
|
|
- </view>
|
|
|
|
- <view class="operation-text sys-weight-400" :style="{'color':operateColor}">{{item.likeCount>0?item.likeCount:'点赞'}}</view>
|
|
|
|
- </view>
|
|
|
|
- <view class="operation-item">
|
|
|
|
- <view class="operation-icon"><text class="iconfont icon-pinglun" :style="{'color':operateColor}"></text></view>
|
|
|
|
- <view class="operation-text sys-weight-400" :style="{'color':operateColor}">{{item.commentCount>0?item.commentCount:'评论'}}</view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- </view>
|
|
|
|
|
|
+ <view class="praise-item" @click="goToDetails" v-for="(item,itemIndex) in list">
|
|
|
|
+ <view class="praise-left">
|
|
|
|
+ <image class="praise-head" :src="item.avatar" mode="aspectFill"></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="praise-right">
|
|
|
|
+ <view class="praise-top-data">
|
|
|
|
+ <view class="praise-top-left">
|
|
|
|
+ <view class="praise-top-left-title">
|
|
|
|
+ <view class="left-title-text sys-height-44 sys-color-black sys-weight-600">{{item.nickname}}</view>
|
|
|
|
+ <view class="left-title-vip">
|
|
|
|
+ <image class="left-title-vip-img" src="/static/img/my/vip.png" mode="heightFix"></image>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+ <view class="left-title-time sys-color-gray-9">{{item.createdAt}}发布</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="praise-top-right">
|
|
|
|
+ <call :user-id="item.userId"></call>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view class="right-text sys-color-black sys-weight-400">
|
|
|
|
+ {{item.content}}
|
|
|
|
+ </view>
|
|
|
|
+ <view class="right-img">
|
|
|
|
+ <view class="one-img" v-if="item.galleryUrls.length===1">
|
|
|
|
+ <img-one :file-list="item.galleryUrls"></img-one>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="two-img" v-else-if="item.galleryUrls.length===2 || item.galleryUrls.length===4">
|
|
|
|
+ <img-two :file-list="item.galleryUrls"></img-two>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="three-img" v-else>
|
|
|
|
+ <img-three :type="2" :file-list="item.galleryUrls"></img-three>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="right-tag-list" v-if="false">
|
|
|
|
+ <dynamic-tag :list="item.tag" :tag-bg="tagBg" :tag-color="tagColor"></dynamic-tag>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="right-operation-list">
|
|
|
|
+ <view class="operation-share">
|
|
|
|
+ <view class="operation-item">
|
|
|
|
+ <view class="operation-icon"><text class="iconfont" :style="{'color':operateColor}"></text></view>
|
|
|
|
+ <view class="operation-text sys-weight-400" :style="{'color':operateColor}">分享</view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="operation-items">
|
|
|
|
+ <view class="operation-item">
|
|
|
|
+ <view class="operation-icon" @click="setLike(itemIndex)">
|
|
|
|
+ <text class="iconfont icon-dianzan" v-if="!item.liked" :style="{'color':operateColor}"> </text>
|
|
|
|
+ <text class="iconfont icon-dianzan1" v-else :style="{'color':'#ED301D'}"> </text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="operation-text sys-weight-400" :style="{'color':operateColor}">
|
|
|
|
+ {{item.likeCount>0?item.likeCount:'点赞'}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="operation-item">
|
|
|
|
+ <view class="operation-icon"><text class="iconfont icon-pinglun"
|
|
|
|
+ :style="{'color':operateColor}"></text></view>
|
|
|
|
+ <view class="operation-text sys-weight-400" :style="{'color':operateColor}">
|
|
|
|
+ {{item.commentCount>0?item.commentCount:'评论'}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import ImgOne from "@/pages/common/img/img-one";
|
|
|
|
-import ImgTwo from "@/pages/common/img/img-two";
|
|
|
|
-import ImgThree from "@/pages/common/img/img-three";
|
|
|
|
-import DynamicTag from "@/pages/common/tag/dynamic-tag";
|
|
|
|
-import Call from "@/pages/common/call/call";
|
|
|
|
-import {setLike, setUnLike} from "@/api/community";
|
|
|
|
-import {getMyLikeMoments, getMyMoments} from "@/api/my";
|
|
|
|
-import tools from "@/service/tools";
|
|
|
|
-export default {
|
|
|
|
- name: "my-praise",
|
|
|
|
- components: {Call, DynamicTag, ImgThree, ImgTwo, ImgOne},
|
|
|
|
- props: {
|
|
|
|
- tagNum:{},
|
|
|
|
- },
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- tagBg:'#F2F2F2',
|
|
|
|
- tagColor:'#999999',
|
|
|
|
- operateColor:'#999999',
|
|
|
|
- list:[
|
|
|
|
-
|
|
|
|
- ],
|
|
|
|
- listTwo:[
|
|
|
|
-
|
|
|
|
- ],
|
|
|
|
- publishBoxOff:true,
|
|
|
|
- isAjax:false,
|
|
|
|
- total:undefined,
|
|
|
|
- page:1,
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- watch: {},
|
|
|
|
- mounted() {
|
|
|
|
- this.startList()
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- startList(){
|
|
|
|
- if(this.userId<=0){
|
|
|
|
- // return false
|
|
|
|
- }
|
|
|
|
- this.list=[]
|
|
|
|
- this.isAjax=false
|
|
|
|
- this.total=undefined
|
|
|
|
- this.page=1
|
|
|
|
- this.getMyLikeMoments()
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- getMyLikeMoments(){
|
|
|
|
- if(this.isAjax){
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- this.isAjax=true
|
|
|
|
- let that=this
|
|
|
|
- getMyLikeMoments({'userId':this.userId,'pageNo':this.page,'pageSize':20}).then((res)=>{
|
|
|
|
- this.isAjax=false
|
|
|
|
- if(res.code===0){
|
|
|
|
- res.data.data.forEach((item)=>{
|
|
|
|
- item.dateArr=tools.getDateArr(item.createdAt)
|
|
|
|
- that.list.push(item )
|
|
|
|
- })
|
|
|
|
- ++that.page
|
|
|
|
- that.total=res.data.total
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- setLike(index){
|
|
|
|
- this.list[index].liked=!this.list[index].liked
|
|
|
|
- if(this.list[index].liked){
|
|
|
|
- ++this.list[index].likeCount
|
|
|
|
- setLike( this.list[index].id).then((res)=>{})
|
|
|
|
- }else {
|
|
|
|
- --this.list[index].likeCount
|
|
|
|
- setUnLike( this.list[index].id).then((res)=>{})
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- goToDetails(){
|
|
|
|
- uni.navigateTo({
|
|
|
|
- 'url':'/pages/circle/circle'
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- goRecommended(){
|
|
|
|
- uni.navigateTo({
|
|
|
|
- 'url':'/pages/circle/recommended'
|
|
|
|
- })
|
|
|
|
|
|
+ import ImgOne from "@/pages/common/img/img-one";
|
|
|
|
+ import ImgTwo from "@/pages/common/img/img-two";
|
|
|
|
+ import ImgThree from "@/pages/common/img/img-three";
|
|
|
|
+ import DynamicTag from "@/pages/common/tag/dynamic-tag";
|
|
|
|
+ import Call from "@/pages/common/call/call";
|
|
|
|
+ import {
|
|
|
|
+ setLike,
|
|
|
|
+ setUnLike
|
|
|
|
+ } from "@/api/community";
|
|
|
|
+ import {
|
|
|
|
+ getMyLikeMoments,
|
|
|
|
+ getMyMoments
|
|
|
|
+ } from "@/api/my";
|
|
|
|
+ import tools from "@/service/tools";
|
|
|
|
+ export default {
|
|
|
|
+ name: "my-praise",
|
|
|
|
+ components: {
|
|
|
|
+ Call,
|
|
|
|
+ DynamicTag,
|
|
|
|
+ ImgThree,
|
|
|
|
+ ImgTwo,
|
|
|
|
+ ImgOne
|
|
},
|
|
},
|
|
- publishOff(){
|
|
|
|
- this.publishBoxOff = false
|
|
|
|
- console.log(this.publishBoxOff);
|
|
|
|
|
|
+ props: {
|
|
|
|
+ tagNum: {},
|
|
},
|
|
},
|
|
- }
|
|
|
|
-}
|
|
|
|
-</script>
|
|
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ tagBg: '#F2F2F2',
|
|
|
|
+ tagColor: '#999999',
|
|
|
|
+ operateColor: '#999999',
|
|
|
|
+ list: [
|
|
|
|
|
|
-<style scoped lang="scss">
|
|
|
|
-.my-praise-box{
|
|
|
|
- .publish-box {
|
|
|
|
- width: 100%;
|
|
|
|
- // height: 100%;
|
|
|
|
- display: flex;
|
|
|
|
- border-top: 20rpx solid #FAFAFA;
|
|
|
|
- border-bottom: 20rpx solid #FAFAFA;
|
|
|
|
- padding: 32rpx;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- position: relative;
|
|
|
|
- align-items: center;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
-
|
|
|
|
- .publish-img {
|
|
|
|
- width: 120rpx;
|
|
|
|
- height: 120rpx;
|
|
|
|
- flex-shrink: 0;
|
|
|
|
- }
|
|
|
|
|
|
+ ],
|
|
|
|
+ listTwo: [
|
|
|
|
|
|
- .publish-text {
|
|
|
|
- .publish-title {
|
|
|
|
- margin: 0 0 8rpx 0;
|
|
|
|
|
|
+ ],
|
|
|
|
+ publishBoxOff: true,
|
|
|
|
+ isAjax: false,
|
|
|
|
+ total: undefined,
|
|
|
|
+ page: 1,
|
|
}
|
|
}
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+ watch: {},
|
|
|
|
+ mounted() {
|
|
|
|
+ this.startList()
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ startList() {
|
|
|
|
+ if (this.userId <= 0) {
|
|
|
|
+ // return false
|
|
|
|
+ }
|
|
|
|
+ this.list = []
|
|
|
|
+ this.isAjax = false
|
|
|
|
+ this.total = undefined
|
|
|
|
+ this.page = 1
|
|
|
|
+ this.getMyLikeMoments()
|
|
|
|
|
|
- .publish-button {
|
|
|
|
- flex-shrink: 0;
|
|
|
|
- padding: 6rpx 32rpx;
|
|
|
|
|
|
+ },
|
|
|
|
+ getMyLikeMoments() {
|
|
|
|
+ if (this.isAjax) {
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ this.isAjax = true
|
|
|
|
+ let that = this
|
|
|
|
+ getMyLikeMoments({
|
|
|
|
+ 'userId': this.userId,
|
|
|
|
+ 'pageNo': this.page,
|
|
|
|
+ 'pageSize': 20
|
|
|
|
+ }).then((res) => {
|
|
|
|
+ this.isAjax = false
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
+ res.data.data.forEach((item) => {
|
|
|
|
+ item.dateArr = tools.getDateArr(item.createdAt)
|
|
|
|
+ that.list.push(item)
|
|
|
|
+ })
|
|
|
|
+ ++that.page
|
|
|
|
+ that.total = res.data.total
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ setLike(index) {
|
|
|
|
+ this.list[index].liked = !this.list[index].liked
|
|
|
|
+ if (this.list[index].liked) {
|
|
|
|
+ ++this.list[index].likeCount
|
|
|
|
+ setLike(this.list[index].id).then((res) => {})
|
|
|
|
+ } else {
|
|
|
|
+ --this.list[index].likeCount
|
|
|
|
+ setUnLike(this.list[index].id).then((res) => {})
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ goToDetails() {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ 'url': '/pages/circle/circle'
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ goRecommended() {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ 'url': '/pages/circle/recommended'
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ publishOff() {
|
|
|
|
+ this.publishBoxOff = false
|
|
|
|
+ console.log(this.publishBoxOff);
|
|
|
|
+ },
|
|
}
|
|
}
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
|
|
- .off-button {
|
|
|
|
- position: absolute;
|
|
|
|
- right: 0;
|
|
|
|
- top: 0;
|
|
|
|
- padding: 0rpx 2rpx 6rpx 12rpx;
|
|
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
+ .my-praise-box {
|
|
|
|
+ .publish-box {
|
|
|
|
+ width: 100%;
|
|
|
|
+ // height: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ border-top: 20rpx solid #FAFAFA;
|
|
|
|
+ border-bottom: 20rpx solid #FAFAFA;
|
|
|
|
+ padding: 32rpx;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ position: relative;
|
|
|
|
+ align-items: center;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .off-img {
|
|
|
|
- width: 24rpx;
|
|
|
|
- height: 24rpx;
|
|
|
|
|
|
+ .publish-img {
|
|
|
|
+ width: 120rpx;
|
|
|
|
+ height: 120rpx;
|
|
|
|
+ flex-shrink: 0;
|
|
}
|
|
}
|
|
- }
|
|
|
|
- }
|
|
|
|
- .recommended-box{
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- width: 100%;
|
|
|
|
- padding: 0 24rpx;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- white-space: nowrap;
|
|
|
|
- .recommended-list{
|
|
|
|
- display: inline-block;
|
|
|
|
- width: 320rpx;
|
|
|
|
- height: 160rpx;
|
|
|
|
- margin: 0 8rpx;
|
|
|
|
- padding: 16rpx 4rpx 16rpx 12rpx;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- position: relative;
|
|
|
|
- // flex-shrink: 0;
|
|
|
|
- .recommended-list-img{
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
|
|
+
|
|
|
|
+ .publish-text {
|
|
|
|
+ .publish-title {
|
|
|
|
+ margin: 0 0 8rpx 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .publish-button {
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+ padding: 6rpx 32rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .off-button {
|
|
position: absolute;
|
|
position: absolute;
|
|
- left: 0;
|
|
|
|
|
|
+ right: 0;
|
|
top: 0;
|
|
top: 0;
|
|
- z-index: -1;
|
|
|
|
- }
|
|
|
|
- .recommended-list-name{
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- .list-name-img{
|
|
|
|
- width: 28rpx;
|
|
|
|
- height: 28rpx;
|
|
|
|
- margin: 0 10rpx 0 0;
|
|
|
|
|
|
+ padding: 0rpx 2rpx 6rpx 12rpx;
|
|
|
|
+
|
|
|
|
+ .off-img {
|
|
|
|
+ width: 24rpx;
|
|
|
|
+ height: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .recommended-list-text{
|
|
|
|
- width: 100%;
|
|
|
|
- padding: 0 4rpx 0 16rpx;
|
|
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .recommended-box {
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding: 0 24rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+
|
|
|
|
+ .recommended-list {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 320rpx;
|
|
|
|
+ height: 160rpx;
|
|
|
|
+ margin: 0 8rpx;
|
|
|
|
+ padding: 16rpx 4rpx 16rpx 12rpx;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
- position: absolute;
|
|
|
|
- bottom: 16rpx;
|
|
|
|
- left: 0;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- .recommended-list-text-left{
|
|
|
|
|
|
+ position: relative;
|
|
|
|
+
|
|
|
|
+ // flex-shrink: 0;
|
|
|
|
+ .recommended-list-img {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 0;
|
|
|
|
+ top: 0;
|
|
|
|
+ z-index: -1;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .recommended-list-name {
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
- .list-text-left-img{
|
|
|
|
- width: 40rpx;
|
|
|
|
- height: 40rpx;
|
|
|
|
- margin: 0 4rpx 0 0;
|
|
|
|
|
|
+
|
|
|
|
+ .list-name-img {
|
|
|
|
+ width: 28rpx;
|
|
|
|
+ height: 28rpx;
|
|
|
|
+ margin: 0 10rpx 0 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .recommended-list-text-right{
|
|
|
|
|
|
+
|
|
|
|
+ .recommended-list-text {
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding: 0 4rpx 0 16rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 16rpx;
|
|
|
|
+ left: 0;
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+
|
|
|
|
+ .recommended-list-text-left {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+
|
|
|
|
+ .list-text-left-img {
|
|
|
|
+ width: 40rpx;
|
|
|
|
+ height: 40rpx;
|
|
|
|
+ margin: 0 4rpx 0 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .recommended-list-text-right {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .praise-item {
|
|
|
|
+ padding: 0 32rpx;
|
|
|
|
+ margin: 40rpx 0 4rpx 0;
|
|
|
|
+ border-bottom: 1rpx solid #F2F2F2;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+
|
|
|
|
+ .praise-left {
|
|
|
|
+ width: 80rpx;
|
|
|
|
+
|
|
|
|
+ .praise-head {
|
|
|
|
+ width: 80rpx;
|
|
|
|
+ height: 80rpx;
|
|
|
|
+ border-radius: 60rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .praise-right {
|
|
|
|
+ width: calc(100% - 80rpx);
|
|
|
|
+ padding-left: 22rpx;
|
|
|
|
+
|
|
|
|
+ .praise-top-data {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+
|
|
|
|
+ .praise-top-left {
|
|
|
|
+ .praise-top-left-title {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ align-items: center;
|
|
|
|
+
|
|
|
|
+ .left-title-text {
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ margin-right: 8rpx;
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .left-title-vip-img {
|
|
|
|
+ height: 28rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .left-title-time {
|
|
|
|
+ margin-top: 8rpx;
|
|
|
|
+ line-height: 34rpx;
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .right-text {
|
|
|
|
+ margin-top: 24rpx;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ height: 40rpx;
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .right-img {
|
|
|
|
+ margin-top: 16rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .right-tag-list {
|
|
|
|
+ margin-top: 8rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .right-operation-list {
|
|
|
|
+ margin-top: 44rpx;
|
|
|
|
+ padding-bottom: 42rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+
|
|
|
|
+ .operation-share {
|
|
|
|
+ .operation-item:first-child {
|
|
|
|
+ .operation-icon {
|
|
|
|
+ text {
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .operation-items {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+
|
|
|
|
+ .operation-item:first-child {
|
|
|
|
+ .operation-text {
|
|
|
|
+ width: 100rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .operation-item:last-child {
|
|
|
|
+ .operation-text {
|
|
|
|
+ width: 80rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .operation-item {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+
|
|
|
|
+ .operation-icon {
|
|
|
|
+ width: 40rpx;
|
|
|
|
+ height: 40rpx;
|
|
|
|
+ margin-right: 8rpx;
|
|
|
|
+
|
|
|
|
+ text {
|
|
|
|
+ font-size: 40rpx;
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .operation-text {
|
|
|
|
+ height: 40rpx;
|
|
|
|
+ line-height: 41rpx;
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .praise-item{
|
|
|
|
- padding: 0 32rpx;
|
|
|
|
- margin : 40rpx 0 4rpx 0;
|
|
|
|
- border-bottom: 1rpx solid #F2F2F2;
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- .praise-left{
|
|
|
|
- width: 80rpx;
|
|
|
|
- .praise-head{
|
|
|
|
- width: 80rpx;
|
|
|
|
- height: 80rpx;
|
|
|
|
- border-radius: 60rpx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .praise-right{
|
|
|
|
- width: calc(100% - 80rpx);
|
|
|
|
- padding-left: 22rpx;
|
|
|
|
- .praise-top-data{
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- .praise-top-left{
|
|
|
|
- .praise-top-left-title{
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: flex-start;
|
|
|
|
- align-items: center;
|
|
|
|
- .left-title-text{
|
|
|
|
- font-size: 32rpx;
|
|
|
|
- margin-right: 8rpx;
|
|
|
|
- }
|
|
|
|
- .left-title-vip-img{
|
|
|
|
- height: 28rpx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .left-title-time{
|
|
|
|
- margin-top: 8rpx;
|
|
|
|
- line-height: 34rpx;
|
|
|
|
- font-size: 24rpx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- .right-text{
|
|
|
|
- margin-top: 24rpx;
|
|
|
|
- font-size: 28rpx;
|
|
|
|
- height: 40rpx;
|
|
|
|
- line-height: 40rpx;
|
|
|
|
- }
|
|
|
|
- .right-img{
|
|
|
|
- margin-top: 16rpx;
|
|
|
|
- }
|
|
|
|
- .right-tag-list{
|
|
|
|
- margin-top: 8rpx;
|
|
|
|
- }
|
|
|
|
- .right-operation-list{
|
|
|
|
- margin-top: 44rpx;
|
|
|
|
- padding-bottom: 42rpx;
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- .operation-share{
|
|
|
|
- .operation-item:first-child{
|
|
|
|
- .operation-icon{
|
|
|
|
- text{
|
|
|
|
- font-size: 30rpx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .operation-items{
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: flex-start;
|
|
|
|
- .operation-item:first-child{
|
|
|
|
- .operation-text{
|
|
|
|
- width: 100rpx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .operation-item:last-child{
|
|
|
|
- .operation-text{
|
|
|
|
- width: 80rpx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- .operation-item{
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: flex-start;
|
|
|
|
- .operation-icon{
|
|
|
|
- width: 40rpx;
|
|
|
|
- height: 40rpx;
|
|
|
|
- margin-right: 8rpx;
|
|
|
|
- text{
|
|
|
|
- font-size: 40rpx;
|
|
|
|
- line-height: 40rpx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .operation-text{
|
|
|
|
- height: 40rpx;
|
|
|
|
- line-height: 41rpx;
|
|
|
|
- font-size: 26rpx;
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-</style>
|
|
|
|
|
|
+</style>
|