658 lines
24 KiB
Vue
658 lines
24 KiB
Vue
|
<template>
|
|||
|
|
|
|||
|
|
<view>
|
|||
|
|
|
|||
|
|
<!-- Main Start -->
|
|||
|
|
<view class="content-box">
|
|||
|
|
<!-- 审核失败 -->
|
|||
|
|
<view class="audit flex" v-if="communityInfo.status == 2">
|
|||
|
|
<image src="/bundle_b/static/icon_audit_fail.png"></image>
|
|||
|
|
<view class="m-l-16 primary">
|
|||
|
|
<view class="bold md ">审核失败</view>
|
|||
|
|
<view class="xs m-t-6">{{ communityInfo.audit_remark_desc }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 审核中 -->
|
|||
|
|
<view class="audit flex" v-if="communityInfo.status == 0">
|
|||
|
|
<image src="/bundle_b/static/icon_under_review.png"></image>
|
|||
|
|
<view class="m-l-16 primary">
|
|||
|
|
<view class="bold md ">审核中</view>
|
|||
|
|
<view class="xs m-t-6">{{ communityInfo.audit_remark_desc }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 内容头部信息 -->
|
|||
|
|
<view class="header flex row-between">
|
|||
|
|
<router-link :to="'/bundle_b/pages/community_user/community_user?id=' + communityInfo.user.id">
|
|||
|
|
<view class="flex">
|
|||
|
|
<!-- 头像 -->
|
|||
|
|
<u-image width="70" height="70" :src="communityInfo.user.avatar" borderRadius="50%"></u-image>
|
|||
|
|
<!-- 昵称 -->
|
|||
|
|
<text class="normal bold m-l-16">{{ communityInfo.user.nickname }}</text>
|
|||
|
|
</view>
|
|||
|
|
</router-link>
|
|||
|
|
<view class="flex">
|
|||
|
|
<!-- 关注 -->
|
|||
|
|
<button class="follow-btn br60" size="mini" @click="handleFollow(1)"
|
|||
|
|
v-if="communityInfo.is_author==0 && communityInfo.is_follow==0">
|
|||
|
|
<image src="/bundle_b/static/icon_follow.png"></image>
|
|||
|
|
<text class="m-l-6 xs">关注</text>
|
|||
|
|
</button>
|
|||
|
|
<!-- 已关注 -->
|
|||
|
|
<button class="followed-btn br60 sm" size="mini" @click="showFollowTips=true"
|
|||
|
|
v-if="communityInfo.is_author==0 && communityInfo.is_follow==1">已关注</button>
|
|||
|
|
<!-- 管理 -->
|
|||
|
|
<button class="manage-btn br60" size="mini" @click="showManage=true"
|
|||
|
|
v-if="communityInfo.is_author">管理</button>
|
|||
|
|
|
|||
|
|
<!-- 转发 -->
|
|||
|
|
<button open-type="share" @click="handleShare" class="flex-col col--center" hover-class="none">
|
|||
|
|
<image src="/bundle_b/static/icon_forward.png" class="share-img m-l-12"></image>
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 内容媒体信息 -->
|
|||
|
|
<view class="swiper-container">
|
|||
|
|
<product-swiper :imgUrls="communityInfo.images" :autoplay="false" borderRadius="14"></product-swiper>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 提到的宝贝( 商品 ) -->
|
|||
|
|
<view class="goods-box bb flex row-between" @click="showGoodsPopup=true"
|
|||
|
|
v-if="communityInfo.goods_data.length">
|
|||
|
|
<text class="nr lighter">查看TA提到的宝贝({{communityInfo.goods_data.length}})</text>
|
|||
|
|
<!-- <text class="tips xs">300+人评价</text> -->
|
|||
|
|
<view class="goods flex">
|
|||
|
|
<block v-for="(goodsItem, goodsIndex) in communityInfo.goods_data" :key="goodsIndex">
|
|||
|
|
<u-image v-if="goodsIndex<=2" :src="goodsItem.image" width="58" height="58" class="m-l-6">
|
|||
|
|
</u-image>
|
|||
|
|
</block>
|
|||
|
|
<u-icon name="arrow-right" class="m-l-10"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 提到的店铺( 店铺 ) -->
|
|||
|
|
<view class="goods-box bb flex row-between" @click="showShopPopup=true"
|
|||
|
|
v-if="communityInfo.shop_data.length">
|
|||
|
|
<text class="nr lighter">查看TA提到的店铺({{communityInfo.shop_data.length}})</text>
|
|||
|
|
<!-- <text class="tips xs">300+人评价</text> -->
|
|||
|
|
<view class="goods flex">
|
|||
|
|
<block v-for="(shopItem, shopIndex) in communityInfo.shop_data" :key="shopIndex">
|
|||
|
|
<u-image v-if="shopIndex<=2" :src="shopItem.logo" width="58" height="58" class="m-l-6">
|
|||
|
|
</u-image>
|
|||
|
|
</block>
|
|||
|
|
<u-icon name="arrow-right" class="m-l-10"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 内容文字 -->
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="text">
|
|||
|
|
{{ communityInfo.content }}
|
|||
|
|
</view>
|
|||
|
|
<view class="tags" v-if="communityInfo.topic">
|
|||
|
|
<navigator hover-class="none"
|
|||
|
|
:url="'/bundle_b/pages/community_topic/community_topic?id=' + communityInfo.topic.id +'&name=' + communityInfo.topic.name">
|
|||
|
|
<text># {{ communityInfo.topic.name }}</text>
|
|||
|
|
</navigator>
|
|||
|
|
</view>
|
|||
|
|
<view class="xs muted">
|
|||
|
|
{{ communityInfo.create_time || '2022-05-20 05:13:14' }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- Main End -->
|
|||
|
|
|
|||
|
|
<!-- Comment Start -->
|
|||
|
|
<view class="comment-box m-t-20 bg-white">
|
|||
|
|
<view class="comment-title bb" id="comment">
|
|||
|
|
评价 ({{ communityInfo.total_comment || '0' }}条)
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<template v-if="isCommentLoading">
|
|||
|
|
<view class="text-center flex row-center p-50">
|
|||
|
|
<u-loading :color="colorConfig.primary" :size="40" mode="circle"></u-loading>
|
|||
|
|
<text class="m-l-20">加载中</text>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<template v-else>
|
|||
|
|
<view class="text-center p-50" v-if="!commentData.length">
|
|||
|
|
<view class="flex row-center">
|
|||
|
|
<u-image :src="'/static/images/news_null.png'" width="300" height="300"></u-image>
|
|||
|
|
</view>
|
|||
|
|
<view class="muted m-t-40">
|
|||
|
|
还没有人评论呢, 快来抢沙发～
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<template v-else>
|
|||
|
|
<block v-for="(commentItem, commentIndex) in commentData" :key="commentItem.id">
|
|||
|
|
<community-comment-list :comment="commentItem" @reply="onReply">
|
|||
|
|
</community-comment-list>
|
|||
|
|
</block>
|
|||
|
|
<!-- 加载 -->
|
|||
|
|
<view class="flex row-center primary nd p-50" v-if="more === 1 && loading">
|
|||
|
|
<u-loading :color="colorConfig.primary" :size="40" mode="circle"></u-loading>
|
|||
|
|
<text class="m-l-20">加载中</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- 加载底部 -->
|
|||
|
|
<view class="text-center muted nd p-50" v-else>
|
|||
|
|
<text>没有更多了~</text>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
</template>
|
|||
|
|
</view>
|
|||
|
|
<!-- Comment End -->
|
|||
|
|
|
|||
|
|
<!-- Footer Start -->
|
|||
|
|
<view class="footer flex bg-white">
|
|||
|
|
<view class="content-wrapper flex row-between">
|
|||
|
|
<view class="flex-1 flex" @click="handleComment">
|
|||
|
|
<view class="input nr muted">发表你的想法吧</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex likes-box">
|
|||
|
|
<view class="likes" :class="communityInfo.is_like ? 'entry':'leave'"
|
|||
|
|
@click="handleLike(communityInfo.is_like)"></view>
|
|||
|
|
<image class="m-l-30"></image>
|
|||
|
|
<text>{{ communityInfo.like || '0' }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex" @click="toComment">
|
|||
|
|
<image src="/static/images/icon_evaluate.png" class="m-l-30"></image>
|
|||
|
|
<text>{{ communityInfo.total_comment || '0' }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- Footer End -->
|
|||
|
|
|
|||
|
|
<!-- 管理 -->
|
|||
|
|
<u-action-sheet :list="manageList" v-model="showManage" @click="handleManage" safe-area-inset-bottom>
|
|||
|
|
</u-action-sheet>
|
|||
|
|
|
|||
|
|
<!-- 取消关注 -->
|
|||
|
|
<u-modal v-model="showFollowTips" :show-cancel-button="true" comfirm-text="取消关注" cancelText="再想想"
|
|||
|
|
:confirm-color="colorConfig.primary" :show-title="false" @confirm="handleFollow(0)">
|
|||
|
|
<view class="flex-col col-center tips-dialog" style="padding-top: 40rpx">
|
|||
|
|
<image class="icon-lg" src="/static/images/icon_warning.png" />
|
|||
|
|
<view style="margin:30rpx 0;">确认取消关注？</view>
|
|||
|
|
</view>
|
|||
|
|
</u-modal>
|
|||
|
|
|
|||
|
|
<!-- 提到的商品 -->
|
|||
|
|
<community-goods v-model="showGoodsPopup" :communityId="communityInfo.id"></community-goods>
|
|||
|
|
|
|||
|
|
<!-- 提到的店铺 -->
|
|||
|
|
<community-shop v-model="showShopPopup" :communityId="communityInfo.id"></community-shop>
|
|||
|
|
|
|||
|
|
<!-- 一级回复评论 -->
|
|||
|
|
<community-comment v-model="showCommentPopup" :communityId="communityId" @change="changeComment">
|
|||
|
|
</community-comment>
|
|||
|
|
|
|||
|
|
<!-- 二级回复评论 -->
|
|||
|
|
<community-comment v-model="showCommentChildPopup" :communityId="communityId" :pid="childPid"
|
|||
|
|
@change="changeCommentChild" :placeholder="childPlaceholder">
|
|||
|
|
</community-comment>
|
|||
|
|
|
|||
|
|
<!-- 加载 -->
|
|||
|
|
<loading-view v-if="isFirstLoading"></loading-view>
|
|||
|
|
|
|||
|
|
<!-- #ifdef H5 -->
|
|||
|
|
<u-popup :custom-style="{'background': 'none'}" class="share-tips" v-model="showTips" mode="top">
|
|||
|
|
<view style="overflow: hidden;">
|
|||
|
|
<image src="/static/images/share_arrow.png" class="share-arrow" />
|
|||
|
|
<view class="white" style="text-align: center;margin-top: 280rpx;">
|
|||
|
|
<view class="bold lg">立即分享给好友吧</view>
|
|||
|
|
<view class="sm m-t-10">点击屏幕右上角将本页面分享给好友</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</u-popup>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
apiCommunityDel,
|
|||
|
|
getCommunityDetail,
|
|||
|
|
apiCommunityFollow,
|
|||
|
|
getCommunityCommentLists,
|
|||
|
|
apiCommunityCommentLike
|
|||
|
|
} from '@/api/community.js';
|
|||
|
|
import {
|
|||
|
|
getRect
|
|||
|
|
} from '@/utils/tools'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
globalLike: false,
|
|||
|
|
|
|||
|
|
communityId: '',
|
|||
|
|
communityInfo: {
|
|||
|
|
user: {
|
|||
|
|
avatar: '',
|
|||
|
|
nickname: '',
|
|||
|
|
id: null
|
|||
|
|
},
|
|||
|
|
goods_data: [],
|
|||
|
|
shop_data: [],
|
|||
|
|
topic: {
|
|||
|
|
id: false,
|
|||
|
|
name: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
isFirstLoading: true, // 详情加载
|
|||
|
|
isCommentLoading: true, // 评论加载
|
|||
|
|
|
|||
|
|
showManage: false, // 管理操作
|
|||
|
|
manageList: [{ // 管理操作列表
|
|||
|
|
text: '编辑',
|
|||
|
|
color: '#333333',
|
|||
|
|
fontSize: 32
|
|||
|
|
}, {
|
|||
|
|
text: '删除',
|
|||
|
|
color: '#333333',
|
|||
|
|
fontSize: 32
|
|||
|
|
}],
|
|||
|
|
showFollowTips: false, // 取消关注
|
|||
|
|
showGoodsPopup: false, // 商品推荐弹窗
|
|||
|
|
showShopPopup: false, // 店铺推荐弹窗
|
|||
|
|
showTips: false, // 分享弹窗H5
|
|||
|
|
|
|||
|
|
showCommentPopup: false, // 评论弹窗
|
|||
|
|
showCommentChildPopup: false, // 二级评论
|
|||
|
|
childPid: '', // 选择二级评论回复ID
|
|||
|
|
childIndex: '', // 选择的二级评论第几条
|
|||
|
|
childPlaceholder: '', // 选择的二级评论回复人名字: 回复@xxx
|
|||
|
|
|
|||
|
|
toScrollArr: [], // 存储需要跳转到的滚动条高度 0-评论
|
|||
|
|
commentData: [], // 评论数据
|
|||
|
|
page: 1, // 评论分页页数
|
|||
|
|
pageSize: 10, // 评论分页数量
|
|||
|
|
more: 0, // 是否有下一页分页
|
|||
|
|
loading: false, // 加载动画
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
// 滚动到顶部，防止h5端出现问题
|
|||
|
|
uni.pageScrollTo({
|
|||
|
|
scrollTop: 0,
|
|||
|
|
duration: 0,
|
|||
|
|
});
|
|||
|
|
getRect('#comment').then((res) => {
|
|||
|
|
this.toScrollArr[0] = res.top
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
const options = this.$Route.query;
|
|||
|
|
if (options && options.scene) {
|
|||
|
|
const scene = strToParams(decodeURIComponent(options.scene));
|
|||
|
|
options.id = scene.id;
|
|||
|
|
}
|
|||
|
|
this.communityId = options.id || '';
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.initCommunityDetail()
|
|||
|
|
},
|
|||
|
|
// 触底加载
|
|||
|
|
onReachBottom() {
|
|||
|
|
console.log('触底')
|
|||
|
|
if (this.more) {
|
|||
|
|
this.loading = true
|
|||
|
|
this.getCommentData()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 分享朋友
|
|||
|
|
onShareAppMessage() {
|
|||
|
|
return {
|
|||
|
|
title: `${this.communityInfo.user.nickname}，TA的内容超级棒`,
|
|||
|
|
path: '/bundle_b/pages/community_detail/community_detail?id=' + this.communityId,
|
|||
|
|
imageUrl: this.communityInfo.image
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 初始化详情
|
|||
|
|
initCommunityDetail() {
|
|||
|
|
getCommunityDetail({
|
|||
|
|
id: this.communityId
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.code == 1) {
|
|||
|
|
this.communityInfo = res.data;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.isFirstLoading && this.getCommentData()
|
|||
|
|
this.isFirstLoading = false;
|
|||
|
|
}, 600)
|
|||
|
|
} else {
|
|||
|
|
this.$toast({
|
|||
|
|
title: res.msg
|
|||
|
|
})
|
|||
|
|
setTimeout(() => this.$Router.back(), 2000)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 分享处理
|
|||
|
|
handleShare() {
|
|||
|
|
// #ifdef H5
|
|||
|
|
this.showTips = true
|
|||
|
|
// #endif
|
|||
|
|
// #ifndef MP
|
|||
|
|
this.$store.commit('setCommunity', {
|
|||
|
|
...this.communityInfo,
|
|||
|
|
url: 'bundle_b/pages/community_detail/community_detail'
|
|||
|
|
})
|
|||
|
|
this.$store.dispatch('communityShare')
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
// 刷新评论 event 是子组件传参是否评论
|
|||
|
|
changeComment(event) {
|
|||
|
|
this.communityInfo.total_comment += 1
|
|||
|
|
if (!event.hasOwnProperty('child')) {
|
|||
|
|
event.child = []
|
|||
|
|
}
|
|||
|
|
this.commentData.unshift(event)
|
|||
|
|
},
|
|||
|
|
// 回复评论
|
|||
|
|
onReply(event) {
|
|||
|
|
this.childIndex = this.commentData.findIndex(item => item.id == event.parentId)
|
|||
|
|
this.childPid = event.commentId
|
|||
|
|
this.childPlaceholder = '回复@' + event.commentUserName;
|
|||
|
|
this.showCommentChildPopup = true
|
|||
|
|
},
|
|||
|
|
// 改变添加子评论
|
|||
|
|
changeCommentChild(event) {
|
|||
|
|
this.commentData[this.childIndex].child.push(event)
|
|||
|
|
},
|
|||
|
|
// 获取评论
|
|||
|
|
getCommentData() {
|
|||
|
|
getCommunityCommentLists({
|
|||
|
|
article_id: this.communityId,
|
|||
|
|
page_no: this.page,
|
|||
|
|
page_size: this.pageSize,
|
|||
|
|
}).then(res => {
|
|||
|
|
setTimeout(() => this.isCommentLoading = false, 500)
|
|||
|
|
if (res.code == 1) {
|
|||
|
|
res.data.list.forEach(item => {
|
|||
|
|
item.loading = false
|
|||
|
|
this.commentData.push(item)
|
|||
|
|
})
|
|||
|
|
if (res.data.more === 1) {
|
|||
|
|
this.page += 1
|
|||
|
|
}
|
|||
|
|
this.more = res.data.more
|
|||
|
|
this.loading = false
|
|||
|
|
} else {
|
|||
|
|
this.$toast({ title: res.msg })
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 处理需要回复的评论
|
|||
|
|
handleComment() {
|
|||
|
|
this.showCommentPopup = true;
|
|||
|
|
},
|
|||
|
|
// 管理文章
|
|||
|
|
handleManage(index) {
|
|||
|
|
// 编辑
|
|||
|
|
switch (index) {
|
|||
|
|
case 0:
|
|||
|
|
this.$Router.push({
|
|||
|
|
path: '/bundle_b/pages/published_works/published_works',
|
|||
|
|
query: {
|
|||
|
|
id: this.communityId
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
break;
|
|||
|
|
case 1:
|
|||
|
|
apiCommunityDel({
|
|||
|
|
id: this.communityId
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.code == 1) {
|
|||
|
|
this.$toast({
|
|||
|
|
title: '删除成功'
|
|||
|
|
})
|
|||
|
|
setTimeout(() => this.$Router.back(), 1000)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 关注 ｜ 取消关注
|
|||
|
|
handleFollow(event) {
|
|||
|
|
if (!this.isLogin) return this.$Router.push('/pages/login/login')
|
|||
|
|
apiCommunityFollow({
|
|||
|
|
follow_id: this.communityInfo.user.id,
|
|||
|
|
status: event
|
|||
|
|
}).then(res => {
|
|||
|
|
this.$toast({
|
|||
|
|
title: res.msg
|
|||
|
|
})
|
|||
|
|
this.initCommunityDetail()
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 点赞
|
|||
|
|
handleLike(status) {
|
|||
|
|
if (!this.isLogin) return this.$Router.push('/pages/login/login')
|
|||
|
|
this.communityInfo.is_like = !status
|
|||
|
|
apiCommunityCommentLike({
|
|||
|
|
id: this.communityId,
|
|||
|
|
status: status ? 0 : 1,
|
|||
|
|
type: 1
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.code === 1) {
|
|||
|
|
if (status) this.communityInfo.like -= 1
|
|||
|
|
else this.communityInfo.like += 1
|
|||
|
|
// 点赞文章时 其他页面的状态也需要更改
|
|||
|
|
uni.$emit('changeItem', {
|
|||
|
|
like: this.communityInfo.like,
|
|||
|
|
is_like: this.communityInfo.is_like,
|
|||
|
|
id: this.communityId
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
this.communityInfo.is_like = status
|
|||
|
|
this.$toast({
|
|||
|
|
title: res.msg
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 跳转到评论
|
|||
|
|
toComment() {
|
|||
|
|
uni.pageScrollTo({
|
|||
|
|
scrollTop: this.toScrollArr[0],
|
|||
|
|
duration: 200
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.bb {
|
|||
|
|
border-bottom: 1px solid $-color-border;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-box {
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
background-color: $-color-white;
|
|||
|
|
|
|||
|
|
// 审核
|
|||
|
|
.audit {
|
|||
|
|
padding: 20rpx 24rpx;
|
|||
|
|
background-color: rgba($-color-primary, .1);
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 头部-作者
|
|||
|
|
.header {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
padding: 20rpx 24rpx;
|
|||
|
|
|
|||
|
|
// 更多
|
|||
|
|
.share-img {
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 关注-按钮
|
|||
|
|
.follow-btn {
|
|||
|
|
width: 118rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
line-height: 44rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
padding: 0;
|
|||
|
|
background: linear-gradient(90.00deg, #f95f2f 0%, #ff2c3c 100%);
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 30rpx;
|
|||
|
|
height: 30rpx;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 已关注-按钮
|
|||
|
|
.followed-btn {
|
|||
|
|
width: 118rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
line-height: 44rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
padding: 0;
|
|||
|
|
background-color: #CCCCCC;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 管理-按钮
|
|||
|
|
.manage-btn {
|
|||
|
|
width: 92rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
line-height: 44rpx;
|
|||
|
|
padding: 0;
|
|||
|
|
border: 1px solid $-color-primary;
|
|||
|
|
color: $-color-primary;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper-container {
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 推荐的商品或店铺
|
|||
|
|
.goods-box {
|
|||
|
|
padding: 15rpx 24rpx;
|
|||
|
|
|
|||
|
|
.tips {
|
|||
|
|
padding: 0 10rpx;
|
|||
|
|
color: $-color-primary;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
border: 1px solid $-color-primary;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
padding: 24rpx;
|
|||
|
|
|
|||
|
|
// 内容文字
|
|||
|
|
.text {
|
|||
|
|
white-space: pre-line;
|
|||
|
|
line-height: 48rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: $-color-normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 标签
|
|||
|
|
.tags {
|
|||
|
|
padding: 24rpx 0;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
border-radius: 26rpx;
|
|||
|
|
padding: 8rpx 24rpx;
|
|||
|
|
color: $-color-primary;
|
|||
|
|
background: rgba($-color-primary, .1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comment-box {
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding-bottom: 140rpx;
|
|||
|
|
|
|||
|
|
.comment-title {
|
|||
|
|
color: $-color-black;
|
|||
|
|
padding: 28rpx 24rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 底部
|
|||
|
|
.footer {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 92rpx;
|
|||
|
|
z-index: 99;
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
box-sizing: content-box;
|
|||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|||
|
|
box-shadow: 0 -4rpx 10rpx rgba(#000000, .1);
|
|||
|
|
|
|||
|
|
.content-wrapper {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
color: $-color-lighter;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
|
|||
|
|
.input {
|
|||
|
|
width: 100%;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
background: #f8f8f8;
|
|||
|
|
padding: 10rpx 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 44rpx;
|
|||
|
|
height: 44rpx;
|
|||
|
|
margin-right: 6rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 点赞动画
|
|||
|
|
.likes-box {
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.likes {
|
|||
|
|
z-index: 999;
|
|||
|
|
left: -10rpx;
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
margin-right: 6rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
background: url('@/static/images/likes.png') no-repeat;
|
|||
|
|
background-position: left;
|
|||
|
|
background-size: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 没点赞
|
|||
|
|
.leave {
|
|||
|
|
background-position: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 点赞
|
|||
|
|
.entry {
|
|||
|
|
background-position: right;
|
|||
|
|
transition: background .6s steps(28);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.share-tips .share-arrow {
|
|||
|
|
width: 140rpx;
|
|||
|
|
height: 250rpx;
|
|||
|
|
float: right;
|
|||
|
|
margin: 15rpx 31rpx 0 0;
|
|||
|
|
}
|
|||
|
|
</style>
|