|
|
|
@ -1,71 +1,24 @@ |
|
|
|
<template> |
|
|
|
<view> |
|
|
|
<view class="top"> |
|
|
|
<view class="top_1">发现</view> |
|
|
|
<view class="top_2" @click="publishing"><fui-icon name="plussign" size="80" fontWeight="Number"></fui-icon></view> |
|
|
|
<view class="section_1"> |
|
|
|
<view class="text_box"> |
|
|
|
<text>月授课数</text> |
|
|
|
<text>12</text> |
|
|
|
<text>节,月负责学员</text> |
|
|
|
<text>188</text> |
|
|
|
<text>名</text> |
|
|
|
</view> |
|
|
|
<view style="position: relative;" class="middle" v-for="(item, index) in list" :key="index" v-if="list.length > 0"> |
|
|
|
<view class="middles"> |
|
|
|
<view class="middles_1" v-if="item.headimg"> |
|
|
|
<image class="middles_1_img" :src="item.headimg"></image> |
|
|
|
</view> |
|
|
|
<view class="middles_1" v-else> |
|
|
|
<image class="middles_1_img" src="/static/images/home/tixing.png"></image> |
|
|
|
</view> |
|
|
|
<view class="middles_2"> |
|
|
|
<view class="middles_info1">{{item.user}}</view> |
|
|
|
<view class="middles_info2">{{item.timedifference}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="shoucang" style="border: 5rpx #f8627f solid;color: #f8627f;" v-if="item.collections == 1" @click="collection(item.id,um_id)">收藏</view> |
|
|
|
<view class="shoucang" style="border: 5rpx #ccc solid;" v-else @click="collection(item.id,um_id)">收藏</view> |
|
|
|
<view @click="coninfo(item)" style="height: 300rpx;width: 100%;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;"> |
|
|
|
<view class="middles_con"> |
|
|
|
{{item.activity}} |
|
|
|
</view> |
|
|
|
<view class="middles_con" v-if="item.imagesnum!=0"> |
|
|
|
<view> |
|
|
|
<view style="width: 32%;height: 200rpx;display: inline-block;margin:2rpx;" v-for="(item1, index) in item.images" :key="index"> |
|
|
|
<image :src="item1" style="width: 100%;height: 100%;"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="middles_con"> |
|
|
|
{{item.content}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="middles_con" style="font-size: 20rpx;color: #ccc;" @click="coninfo(item)"> |
|
|
|
点击内容查看详情 |
|
|
|
</view> |
|
|
|
<view class="middles_bom"> |
|
|
|
<view class="middles_bom_1 middles_boms" v-if="item.area">{{item.area}}</view> |
|
|
|
<view class="middles_bom_2 middles_boms"> |
|
|
|
<fui-icon name="fabulous-fill" color="#f8627f" size="45" @click="like(item.id,item.um_id)"></fui-icon> |
|
|
|
{{item.likes}} |
|
|
|
</view> |
|
|
|
<view class="middles_bom_3 middles_boms" @click="Comment(item.id)"> |
|
|
|
<fui-icon name="comment-fill" color="#6281a6" size="45"></fui-icon> |
|
|
|
{{item.comment}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view style="width: 100%;height: 20rpx;"></view> |
|
|
|
</view> |
|
|
|
<view class="empty" v-if="!list.length"> |
|
|
|
<view style="width: 200rpx;"> |
|
|
|
<img src="@/static/icon-img/kkry.png" alt="" style="width: 180rpx;height: 180rpx;"> |
|
|
|
<view style="font-size: 28rpx;font-weight: 800;color: #00be8c;"> |
|
|
|
还没有任何提醒 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view style="width: 100%;height: 20rpx;"></view> |
|
|
|
<view class="section_2"></view> |
|
|
|
<view class="section_3"></view> |
|
|
|
<view class="section_3"></view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import user from '@/api/user.js'; |
|
|
|
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue" |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { |
|
|
|
fuiIcon |
|
|
|
@ -180,102 +133,16 @@ |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
.empty { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
justify-content: center; |
|
|
|
height: 85vh; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.top{ |
|
|
|
background-color: #fff; |
|
|
|
height: 100rpx; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.top_1{ |
|
|
|
display: inline-block; |
|
|
|
font-size: 55rpx; |
|
|
|
font-weight: bold; |
|
|
|
margin-left: 30rpx; |
|
|
|
line-height: 100rpx; |
|
|
|
} |
|
|
|
.top_2{ |
|
|
|
margin-left: 600rpx; |
|
|
|
position: absolute; |
|
|
|
top: 15rpx; |
|
|
|
} |
|
|
|
.middle{ |
|
|
|
width: 95%; |
|
|
|
background-color: #fff; |
|
|
|
margin: auto; |
|
|
|
margin-top: 20rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
} |
|
|
|
.middles{ |
|
|
|
height: 150rpx; |
|
|
|
/* background-color: aqua; */ |
|
|
|
margin-top: 20rpx; |
|
|
|
} |
|
|
|
.middles_1{ |
|
|
|
height: 100%; |
|
|
|
width: 24%; |
|
|
|
/* background-color: red; */ |
|
|
|
display: inline-block; |
|
|
|
} |
|
|
|
.middles_2{ |
|
|
|
width: 70%; |
|
|
|
/* background-color: green; */ |
|
|
|
display: inline-block; |
|
|
|
position: relative; |
|
|
|
top: -15%; |
|
|
|
left: 2%; |
|
|
|
} |
|
|
|
.middles_1_img{ |
|
|
|
width: 130rpx; |
|
|
|
height: 130rpx; |
|
|
|
margin-left: 12%; |
|
|
|
border-radius: 100rpx; |
|
|
|
margin-top: 6%; |
|
|
|
} |
|
|
|
.middles_info1{ |
|
|
|
font-size: 40rpx; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
.middles_info2{ |
|
|
|
color: #5e5e5e; |
|
|
|
} |
|
|
|
.middles_con{ |
|
|
|
width: 92%; |
|
|
|
margin: 20rpx auto; |
|
|
|
font-size: 30rpx; |
|
|
|
} |
|
|
|
.middles_bom{ |
|
|
|
padding: 30rpx 0 40rpx 25rpx; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.middles_boms{ |
|
|
|
display: inline-block; |
|
|
|
color: #9297b2; |
|
|
|
} |
|
|
|
.middles_bom_2{ |
|
|
|
position: absolute; |
|
|
|
right: 30%; |
|
|
|
} |
|
|
|
.middles_bom_3{ |
|
|
|
position: absolute; |
|
|
|
right: 10%; |
|
|
|
<style lang="less" scoped> |
|
|
|
|
|
|
|
.section_1{ |
|
|
|
border: 1px solid red; |
|
|
|
width: 700rpx; |
|
|
|
height: 264rpx; |
|
|
|
border-radius: 14rpx; |
|
|
|
.text_box{ |
|
|
|
|
|
|
|
} |
|
|
|
.shoucang{ |
|
|
|
position: absolute; |
|
|
|
right: 10%; |
|
|
|
top: 10%; |
|
|
|
height: 60rpx; |
|
|
|
width: 140rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
line-height: 54rpx; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |