|
@@ -0,0 +1,1180 @@
|
|
|
+<template>
|
|
|
+ <view class="crowdfunding-details">
|
|
|
+ <view class="custom-navbar" :style="navBgStyle">
|
|
|
+ <view class="navbar-left scale-tap" @click="goBack">
|
|
|
+ <image src="@/static/crowdFunding/back.png" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view class="navbar-center one-omit" style="max-width: 70vw; " :style="{ opacity: navBgOpacity }">
|
|
|
+ {{ detail.title }}
|
|
|
+ </view>
|
|
|
+ <view class="navbar-right scale-tap" @click="showShare = true">
|
|
|
+ <image src="@/static/crowdFunding/share.png" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 顶部视频图片混合轮播 -->
|
|
|
+ <view class="swiper-container">
|
|
|
+ <swiper class="top-swiper" :indicator-dots="false" circular :current="currentMediaIndex"
|
|
|
+ @change="handleSwiperChange" :duration="300">
|
|
|
+ <swiper-item v-for="(item, idx) in mediaList" :key="idx" class="swiper-item">
|
|
|
+ <view v-if="item.type === 'video'" class="media-wrapper">
|
|
|
+ <video class="swiper-video" :src="item.src" :poster="item.poster" :id="'video-' + idx" controls
|
|
|
+ object-fit="contain" enable-progress-gesture="false" :loop="false"
|
|
|
+ :show-fullscreen-btn="false" :show-play-btn="true" :enable-play-gesture="false"
|
|
|
+ @ended="onVideoEnded" @play="onVideoPlay(idx)" @pause="onVideoPause"></video>
|
|
|
+ </view>
|
|
|
+ <image v-else class="swiper-img" :src="item.src" mode="aspectFill" />
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <!-- 自定义指示点 -->
|
|
|
+ <view class="custom-dots">
|
|
|
+ <view v-for="(item, index) in mediaList" :key="index"
|
|
|
+ :class="['dot', currentMediaIndex === index ? 'active' : '']" @click="switchMedia(index)"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="content">
|
|
|
+ <!-- 项目信息 -->
|
|
|
+ <view class="section project-card">
|
|
|
+ <view class="project-title">{{ detail.title }}</view>
|
|
|
+ <view class="progress-bar-wrap">
|
|
|
+ <uv-line-progress height="8rpx" :showText="false"
|
|
|
+ :percentage="(detail.current_amount / detail.goal_amount * 100).toFixed(2)"
|
|
|
+ inactiveColor="#F0F0F0" activeColor="#ACF934"></uv-line-progress>
|
|
|
+ <view class="progress-percent">{{ (detail.current_amount / detail.goal_amount * 100).toFixed(2) +
|
|
|
+ '%'
|
|
|
+ }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="project-stats">
|
|
|
+ <view class="stat-block">
|
|
|
+ <view class="stat-main amountOfMoney">¥{{ detail.current_amount }}</view>
|
|
|
+ <view class="stat-sub">{{ detail.supporter_count }}人支持</view>
|
|
|
+ </view>
|
|
|
+ <view class="stat-block">
|
|
|
+ <!-- <view class="stat-main">{{ detail.daysRemaining }}天</view>
|
|
|
+ <view class="stat-sub">剩余时间</view> -->
|
|
|
+ </view>
|
|
|
+ <view class="stat-block">
|
|
|
+ <view class="stat-main">¥{{ detail.goal_amount }}</view>
|
|
|
+ <view class="stat-sub">众筹目标</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 项目更新 -->
|
|
|
+ <view class="section project-update" v-if="projectUpdate && projectUpdate.numb">
|
|
|
+ <view class="project-update-left scale-tap"
|
|
|
+ @click="goPage('/pages/crowdFunding/projectUpdateDetails?id=' + projectUpdate.id)">
|
|
|
+ <view class="project-update-left-title">
|
|
|
+ <view>·第{{ projectUpdate.numb }}次更新</view>
|
|
|
+ <view style="color: #999;">{{ projectUpdate.create_time }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="project-update-left-content">
|
|
|
+ <view class="two-omit">{{ projectUpdate.title }}</view>
|
|
|
+ <view class="image">
|
|
|
+ <image :src="projectUpdate.image" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="project-update-right scale-tap"
|
|
|
+ @click="goPage('/pages/crowdFunding/discussionArea?tags=update&id=' + projectId)">
|
|
|
+ <view>历史更新</view>
|
|
|
+ <image src="@/static/crowdFunding/updateDetails.png"></image>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="section comment scale-tap"
|
|
|
+ @click="goPage('/pages/crowdFunding/discussionArea?tags=comment&id=' + projectId)">
|
|
|
+ <view class="comment-title">
|
|
|
+ <view>项目讨论({{ totalNumberOfComments }})</view>
|
|
|
+ <view class="comment-more">查看更多
|
|
|
+ <image src=" @/static/crowdFunding/right.png">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="comment-content">
|
|
|
+ <block v-for="(item, idx) in commentList" :key="idx">
|
|
|
+ <view class="comment-item">
|
|
|
+ <image class="comment-avatar" :src="item.avatar"></image>
|
|
|
+ <view class="comment-item-main">
|
|
|
+ <view class="comment-item-content">{{ item.content }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="comment-item-like">
|
|
|
+ <image class="like-icon"
|
|
|
+ :src="item.liked ? '/static/icon/icon-18.png' : '/static/icon/icon-19.png'"></image>
|
|
|
+ <text class="like-num">{{ item.likeNum }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 塔罗牌介绍 -->
|
|
|
+ <view class="section poster">
|
|
|
+ <view class="initiator-bar">
|
|
|
+ <image class="initiator-avatar" :src="detail.creator_avatar" />
|
|
|
+ <view class="initiator-info">
|
|
|
+ <text class="initiator-name">{{ detail.creator_nickname }}</text>
|
|
|
+ <text class="initiator-tag">发起人</text>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="initiator-service-btn blick-btn-animation"
|
|
|
+ @click="goPage('/pages/crowdFunding/customerService?id=' + detail.creator_id + '&zc_id=' + detail.id)">
|
|
|
+ <image class="service-icon" src="@/static/crowdFunding/service.png" />
|
|
|
+ <text>客服</text>
|
|
|
+ </view> -->
|
|
|
+ <text class="followTheAuthor followTheAuthor1" v-if="detail.is_attention == 0"
|
|
|
+ @click="followTheAuthor(1)">+关注</text>
|
|
|
+ <text class="followTheAuthor followTheAuthor0" v-if="detail.is_attention == 1"
|
|
|
+ @click="followTheAuthor(0)">已关注</text>
|
|
|
+ </view>
|
|
|
+ <block v-for="(item, idx) in detail.content_images" :key="idx">
|
|
|
+ <image class="intro-img" :src="item" mode="widthFix" />
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 风险说明 -->
|
|
|
+ <view class="section risk-section">
|
|
|
+ <view class="risk-row" @click="goWeb('https://e.zhichao.art/web/refund.php', '退款说明')">
|
|
|
+ <view class="risk-title">退款政策</view>
|
|
|
+ <view class="risk-more ">查看更多
|
|
|
+ <image src="@/static/crowdFunding/right.png" class="risk-more-icon" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="risk-desc">众筹结束前最后1个小时无法申请退款</view>
|
|
|
+ <view class="risk-row risk-row-border"
|
|
|
+ @click="goWeb('https://e.zhichao.art/web/crowdtips.php', '风险提示')">
|
|
|
+ <view class="risk-title">风险提示</view>
|
|
|
+ <view class="risk-more ">查看更多
|
|
|
+ <image src="@/static/crowdFunding/right.png" class="risk-more-icon" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="risk-content">
|
|
|
+ <view>1. 您参与众筹是支持将创意变为现实的过程,而不是直接的商品交易,因此存在一定风险。请您根据自己的判断选择,支持众筹项目。</view>
|
|
|
+ <view>2. 众筹存在于发起人与支持者之间,摩点作为第三方平台,提供网络空间、技术支持等服务。众筹的回报产品和承诺由发起人负责。</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom-bar-reserveASeat"></view>
|
|
|
+ <view class="bottom-bar">
|
|
|
+
|
|
|
+ <button class="buy-btn blick-btn-animation followTheAuthor0"
|
|
|
+ v-if="detail.is_like == 1 || detail.is_like == '1'" @click="specificationsOpen()">不看好取消支持</button>
|
|
|
+ <button class="buy-btn blick-btn-animation followTheAuthor1" v-else @click="specificationsOpen()">
|
|
|
+ 看好并支持</button>
|
|
|
+ </view>
|
|
|
+ <image src="@/static/crowdFunding/backToTop.png" class="back-top scale-tap" v-show="navBgOpacity > 0.9"
|
|
|
+ @click="scrollToTop"></image>
|
|
|
+
|
|
|
+ <!-- 分享弹窗 -->
|
|
|
+ <SharePopup :visible="showShare" :userId="0" :share-title="shareTitle" :share-desc="shareDesc"
|
|
|
+ :share-img="shareImg" view="crowdfundingDetails" :link="shareLink" @close="showShare = false" :isReportContent="true" />
|
|
|
+
|
|
|
+ <!-- <productSpecifications ref="specSheet" :rewards="rewards" :title="detail.title" @confirm="onSpecConfirm" /> -->
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import VideoPlayer from "@/components/VideoPlayer/VideoPlayer.vue";
|
|
|
+import SharePopup from "@/components/SharePopup/SharePopup.vue";
|
|
|
+import productSpecifications from "./components/productSpecifications/productSpecifications.vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ VideoPlayer,
|
|
|
+ SharePopup,
|
|
|
+ productSpecifications
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ mediaList: [],
|
|
|
+ videoPlaying: false,
|
|
|
+ currentMediaIndex: 0,
|
|
|
+ commentList: [
|
|
|
+ ],
|
|
|
+ navBgOpacity: 0,
|
|
|
+ swiperHeight: 0,
|
|
|
+ showShare: false,
|
|
|
+ shareTitle: '',
|
|
|
+ shareDesc: '',
|
|
|
+ shareImg: '',
|
|
|
+ shareLink:"https://e.zhichao.art/site/#/mobile-download",
|
|
|
+ userId: 0, // 可根据实际登录用户赋值
|
|
|
+ isFavorite: false, // 是否已收藏
|
|
|
+ projectId: null, // 当前项目id
|
|
|
+ detail: {}, // 众筹详情
|
|
|
+ projectUpdate: '',
|
|
|
+ rewards: [],
|
|
|
+ totalNumberOfComments: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ navBgStyle() {
|
|
|
+ return {
|
|
|
+ background: `rgba(255,255,255,${this.navBgOpacity})`,
|
|
|
+ transition: 'background 0.3s'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 返回上一页
|
|
|
+ goBack() {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ scrollToTop() {
|
|
|
+ uni.pageScrollTo({
|
|
|
+ scrollTop: 0,
|
|
|
+ duration: 300
|
|
|
+ });
|
|
|
+ },
|
|
|
+ switchMedia(index) {
|
|
|
+ if (this.currentMediaIndex === index) return;
|
|
|
+
|
|
|
+ // 如果当前在播放视频,先暂停
|
|
|
+ if (this.mediaList[this.currentMediaIndex]?.type === 'video') {
|
|
|
+ const videoContext = uni.createVideoContext('video-' + this.currentMediaIndex, this);
|
|
|
+ if (videoContext) {
|
|
|
+ videoContext.pause();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.currentMediaIndex = index;
|
|
|
+ },
|
|
|
+ handleSwiperChange(e) {
|
|
|
+ const lastIndex = this.currentMediaIndex;
|
|
|
+ this.currentMediaIndex = e.detail.current;
|
|
|
+
|
|
|
+ // 如果上一个是视频,暂停它
|
|
|
+ if (this.mediaList[lastIndex]?.type === 'video') {
|
|
|
+ const videoContext = uni.createVideoContext('video-' + lastIndex, this);
|
|
|
+ if (videoContext) {
|
|
|
+ videoContext.pause();
|
|
|
+ this.videoPlaying = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onVideoPlay(idx) {
|
|
|
+ // 更新当前播放的视频索引
|
|
|
+ this.videoPlaying = true;
|
|
|
+ if (this.currentMediaIndex !== idx) {
|
|
|
+ this.currentMediaIndex = idx;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onVideoPause() {
|
|
|
+ this.videoPlaying = false;
|
|
|
+ },
|
|
|
+ onVideoEnded() {
|
|
|
+ this.videoPlaying = false;
|
|
|
+ },
|
|
|
+ goPage(url) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: url
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onSpecConfirm(selectedSpec) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/crowdFunding/orderConfirm',
|
|
|
+ success: function (res) {
|
|
|
+ // 通过 eventChannel 向被打开页面传送数据
|
|
|
+ res.eventChannel.emit('acceptDataFromOpener', { selectedSpec: selectedSpec, detail: this.detail });
|
|
|
+ }.bind(this)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ specificationsOpen() {
|
|
|
+ uni.request({
|
|
|
+ url: this.$apiHost + '/Article/like',
|
|
|
+ data: {
|
|
|
+ uuid: getApp().globalData.uuid,
|
|
|
+ id: this.projectId
|
|
|
+ },
|
|
|
+ header: {
|
|
|
+ "content-type": "application/json",
|
|
|
+ 'sign': getApp().globalData.headerSign
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ if (res.data.str == "点赞成功") {
|
|
|
+ uni.showToast({
|
|
|
+ title: "支持成功",
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ // 动态修改页面数据
|
|
|
+ this.detail.is_like = 1;
|
|
|
+ this.detail.like_count += 1;
|
|
|
+ // 强制更新视图
|
|
|
+ this.$forceUpdate();
|
|
|
+ }else if (res.data.str == "取消点赞") {
|
|
|
+ uni.showToast({
|
|
|
+ title: '取消支持',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ // 动态修改页面数据
|
|
|
+ this.detail.is_like = 0;
|
|
|
+ this.detail.like_count -= 1;
|
|
|
+ // 强制更新视图
|
|
|
+ this.$forceUpdate();
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ title: res.data.str,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ toggleFavorite() {
|
|
|
+ if (!this.projectId) {
|
|
|
+
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const action = this.isFavorite ? 'remove' : 'add';
|
|
|
+ uni.request({
|
|
|
+ url: this.$apiHost + '/crowdfund/favorite',
|
|
|
+ method: 'POST',
|
|
|
+ header: {
|
|
|
+ "content-type": "application/x-www-form-urlencoded",
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ uuid: getApp().globalData.uuid,
|
|
|
+ skey: getApp().globalData.skey,
|
|
|
+ crowdfund_id: this.projectId,
|
|
|
+ action
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ console.log(res.data, "收藏");
|
|
|
+
|
|
|
+ if (res.data && res.data.success && res.data.success == 'yes') {
|
|
|
+ this.isFavorite = !this.isFavorite;
|
|
|
+ uni.showToast({ title: this.isFavorite ? '已收藏' : '已取消收藏', icon: 'none' });
|
|
|
+ } else {
|
|
|
+ uni.showToast({ title: res.data.msg || '操作失败', icon: 'none' });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ uni.showToast({ title: '网络错误', icon: 'none' });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ getDetail() {
|
|
|
+ if (!this.projectId) return;
|
|
|
+ uni.request({
|
|
|
+ url: this.$apiHost + '/Article/getinfo',
|
|
|
+ method: 'GET',
|
|
|
+ data: {
|
|
|
+ id: this.projectId,
|
|
|
+ uuid: getApp().globalData.uuid,
|
|
|
+ skey: getApp().globalData.skey
|
|
|
+
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ console.log(res.data.article, 9999);
|
|
|
+
|
|
|
+ if (res.data && res.data.article) {
|
|
|
+ this.processingDataDetails(res.data.article, res.data);
|
|
|
+ // 可根据接口返回字段设置isFavorite等
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ uni.request({
|
|
|
+ url: this.$apiHost + '/crowdfund/favorite/status',
|
|
|
+ method: 'GET',
|
|
|
+ data: {
|
|
|
+ crowdfund_id: this.projectId,
|
|
|
+ uuid: getApp().globalData.uuid,
|
|
|
+ skey: getApp().globalData.skey
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ if (res.data && res.data.success === 'yes' && res.data.data) {
|
|
|
+ console.log(res.data.data, "收藏");
|
|
|
+ this.isFavorite = res.data.data.is_favorited;
|
|
|
+ // 可根据接口返回字段设置isFavorite等
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ uni.request({
|
|
|
+ url: this.$apiHost + '/crowdfund/articles',
|
|
|
+ method: 'GET',
|
|
|
+ data: {
|
|
|
+ crowdfund_id: this.projectId,
|
|
|
+ page: 1,
|
|
|
+ pageSize: 1,
|
|
|
+ uuid: getApp().globalData.uuid,
|
|
|
+ skey: getApp().globalData.skey
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ if (res.data && res.data.success === 'yes' && res.data.data) {
|
|
|
+ if (Array.isArray(res.data.data.list)) {
|
|
|
+ this.projectUpdate = res.data.data.list[0]
|
|
|
+ this.projectUpdate.create_time = this.projectUpdate.create_time.replace(/-/g, '.').slice(0, 16)
|
|
|
+ console.log(this.projectUpdate, 8888);
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ uni.request({
|
|
|
+ url: this.$apiHost + '/Article/getcomments',
|
|
|
+ data: {
|
|
|
+ uuid: getApp().globalData.uuid,
|
|
|
+ type: 'crowdfund',
|
|
|
+ id: this.projectId,
|
|
|
+ page: 1,
|
|
|
+ limit: 2,
|
|
|
+ },
|
|
|
+ header: {
|
|
|
+ "content-type": "application/json",
|
|
|
+ 'sign': getApp().globalData.headerSign
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ console.log("评论列表:", res.data);
|
|
|
+ if (res.data.success == "yes") {
|
|
|
+ this.totalNumberOfComments = res.data.total
|
|
|
+ // 确保数据存在且是数组,然后只取前两条
|
|
|
+ this.commentList = (res.data.list || []).slice(0, 2).map(item => ({
|
|
|
+ avatar: item.user_avatar || '',
|
|
|
+ content: item.user_content || '',
|
|
|
+ likeNum: item.like_count || 0,
|
|
|
+ liked: item.is_like || false
|
|
|
+ }));
|
|
|
+
|
|
|
+ } else {
|
|
|
+ // 如果请求失败,使用默认空数组
|
|
|
+ this.commentList = [];
|
|
|
+ uni.showToast({
|
|
|
+ title: '获取评论列表失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (e) => {
|
|
|
+ console.log("----e:", e);
|
|
|
+ // 请求失败时使用默认空数组
|
|
|
+ this.commentList = [];
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ goWeb(url, title) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/webview/index?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ processingDataDetails(data, datas) {
|
|
|
+ this.detail = data;
|
|
|
+ this.detail.creator_avatar = datas.author.avator
|
|
|
+ this.detail.creator_nickname = datas.author.nickname
|
|
|
+ this.detail.is_attention = datas.author.is_attention
|
|
|
+ this.detail.creator_id = datas.author.id
|
|
|
+ // 确保 image_list 始终是一个数组
|
|
|
+ data.content_images = data.content_images.split('|') || [];
|
|
|
+ data.images = data.images.split('|') || [];
|
|
|
+
|
|
|
+ const videoItem = data.video_url ? [{
|
|
|
+ type: 'video',
|
|
|
+ poster: data.main_image,
|
|
|
+ src: data.video_url,
|
|
|
+ }] : [];
|
|
|
+
|
|
|
+ const imageItems = data.images.map(v => ({
|
|
|
+ type: 'image',
|
|
|
+ src: v
|
|
|
+ }));
|
|
|
+ // 计算进度
|
|
|
+ data.goal_amount = data.num_crowd_people
|
|
|
+ data.current_amount = data.like_count
|
|
|
+ this.detail.progress = (data.current_amount / data.goal_amount * 100).toFixed(2)
|
|
|
+ console.log(this.detail.progress, "进度");
|
|
|
+
|
|
|
+ if (Number.isNaN) this.detail.progress = 0
|
|
|
+ this.mediaList = [...videoItem, ...imageItems];
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ this.shareTitle = data.title;
|
|
|
+ this.shareDesc = data.content;
|
|
|
+ this.shareImg = data.image;
|
|
|
+ // this.rewards = data.rewards
|
|
|
+
|
|
|
+ // console.log("回报数据", this.rewards);
|
|
|
+ console.log("顶部轮播数据", this.mediaList, "mediaList");
|
|
|
+ console.log("详情", this.detail, "detail");
|
|
|
+ console.log(this.detail.is_like, "is_like");
|
|
|
+
|
|
|
+ },
|
|
|
+ followTheAuthor(n) {
|
|
|
+ uni.$emit('check_login', () => {
|
|
|
+ uni.request({
|
|
|
+ url: this.$apiHost + "/Member/attention",
|
|
|
+ data: {
|
|
|
+ uuid: getApp().globalData.uuid,
|
|
|
+ id: this.detail.creator_id,
|
|
|
+ },
|
|
|
+ header: {
|
|
|
+ "content-type": "application/json",
|
|
|
+ sign: getApp().globalData.headerSign,
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ console.log("点赞结果:", res.data);
|
|
|
+ uni.showToast({
|
|
|
+ title: res.data.str,
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+
|
|
|
+ if (res.data.success === "yes") {
|
|
|
+ // 动态修改页面数据
|
|
|
+ if (res.data.str == "关注成功") {
|
|
|
+ console.log(1);
|
|
|
+ this.detail.is_attention = 1;
|
|
|
+ } else {
|
|
|
+ console.log(2);
|
|
|
+ this.detail.is_attention = 0;
|
|
|
+ }
|
|
|
+ // 强制更新视图
|
|
|
+ this.$forceUpdate();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (e) => {
|
|
|
+ console.log("关注失败:", e);
|
|
|
+ uni.showToast({
|
|
|
+ title: "网络请求失败",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 动态获取轮播图高度
|
|
|
+ uni.createSelectorQuery().in(this).select('.top-swiper').boundingClientRect(rect => {
|
|
|
+ if (rect) {
|
|
|
+ this.swiperHeight = rect.height;
|
|
|
+ }
|
|
|
+ }).exec();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onPageScroll(e) {
|
|
|
+ const threshold = this.swiperHeight || uni.upx2px(400); // 优先用实际高度
|
|
|
+ let opacity = 0;
|
|
|
+ if (e.scrollTop > 0) {
|
|
|
+ opacity = Math.min(e.scrollTop / threshold, 1);
|
|
|
+ }
|
|
|
+ this.navBgOpacity = opacity;
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ // 获取id
|
|
|
+ this.projectId = options.id || null;
|
|
|
+ this.getDetail();
|
|
|
+ },
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.crowdfunding-details {
|
|
|
+
|
|
|
+ /* 自定义导航栏样式 */
|
|
|
+ .custom-navbar {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(90rpx + var(--status-bar-height));
|
|
|
+ padding: 0 20rpx;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ z-index: 100;
|
|
|
+ padding: 12rpx 24rpx;
|
|
|
+ padding-top: calc(var(--status-bar-height) + 12rpx);
|
|
|
+ background: transparent;
|
|
|
+ transition: background 0.3s;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-container {
|
|
|
+ position: relative;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vw;
|
|
|
+ background: #000;
|
|
|
+
|
|
|
+ .top-swiper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .swiper-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .media-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-video {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .custom-dots {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ display: flex;
|
|
|
+ gap: 16rpx;
|
|
|
+
|
|
|
+ .dot {
|
|
|
+ width: 12rpx;
|
|
|
+ height: 12rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ width: 24rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ background: #f2f6f2;
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ .section {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ padding: 16rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ margin: 12rpx 0;
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: 'PingFang SC-Medium';
|
|
|
+ margin-bottom: 6rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-content {
|
|
|
+ color: #333;
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 1.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .intro-img {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ margin-bottom: -10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .project-card {
|
|
|
+ padding-bottom: 15rpx;
|
|
|
+
|
|
|
+ .project-title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: 1f1f1f;
|
|
|
+ font-family: "PingFang SC-Bold";
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-bar-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #1F1F1F;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ padding-bottom: 14rpx;
|
|
|
+
|
|
|
+ .progress-percent {
|
|
|
+ padding-left: 12rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .project-stats {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-top: 0;
|
|
|
+
|
|
|
+ .stat-block {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #1F1F1F;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #1F1F1F;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ align-items: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-main {
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ &.amountOfMoney {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: "PingFang SC-Bold";
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-sub {
|
|
|
+ font-size: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .project-update {
|
|
|
+ background: transparent;
|
|
|
+ height: 166rpx;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0;
|
|
|
+
|
|
|
+ >view {
|
|
|
+ border-radius: 12rpx;
|
|
|
+ background: #fff;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .project-update-left {
|
|
|
+ width: 590rpx;
|
|
|
+ height: 100%;
|
|
|
+ padding: 16rpx;
|
|
|
+
|
|
|
+ .project-update-left-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 22rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .project-update-left-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 8rpx;
|
|
|
+
|
|
|
+ >view {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ font-family: "PingFang SC-Bold";
|
|
|
+ }
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 180rpx;
|
|
|
+ height: 78rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-left: 26rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ overflow: hidden;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .project-update-right {
|
|
|
+ width: 108rpx;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 22rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ image {
|
|
|
+ margin-top: 12rpx;
|
|
|
+ width: 28rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .poster {
|
|
|
+ padding: 0;
|
|
|
+ padding-top: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .comment {
|
|
|
+ border-radius: 12rpx;
|
|
|
+ background: #fff;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ padding: 0 0 16rpx 0;
|
|
|
+
|
|
|
+ .comment-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333;
|
|
|
+ padding: 18rpx 20rpx 0 20rpx;
|
|
|
+
|
|
|
+ .comment-more {
|
|
|
+ color: #999;
|
|
|
+ font-size: 22rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 20rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ margin-left: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .comment-content {
|
|
|
+ padding: 0 20rpx;
|
|
|
+
|
|
|
+ .comment-item {
|
|
|
+ display: flex;
|
|
|
+ //align-items: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ padding: 18rpx 0 0 0;
|
|
|
+ border-bottom: 1rpx solid #f5f5f5;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .comment-avatar {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .comment-item-main {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .comment-item-content {
|
|
|
+ color: #1f1f1f;
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 1.7;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .comment-item-like {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 36rpx;
|
|
|
+
|
|
|
+ .like-icon {
|
|
|
+ width: 28rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ margin-right: 4rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .like-num {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #888;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-bar-reserveASeat {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(12rpx + 88rpx + var(--window-bottom) + 30rpx);
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-bar {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 999;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: #fff;
|
|
|
+ padding: 14rpx 40rpx;
|
|
|
+ padding-bottom: calc(14rpx + var(--window-bottom));
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .bottom-bar-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 32rpx;
|
|
|
+
|
|
|
+ .bar-btn {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+
|
|
|
+ .bar-icon {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ margin-bottom: 4rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bar-text {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #1f1f1f;
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .buy-btn {
|
|
|
+ width: 588rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ background: #1f1f1f;
|
|
|
+ color: #ACF934;
|
|
|
+ font-size: 32rpx;
|
|
|
+ border-radius: 80rpx;
|
|
|
+ border: none;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80rpx;
|
|
|
+
|
|
|
+ &.followTheAuthor1 {
|
|
|
+ color: #acf934;
|
|
|
+ background: #1f1f1f;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.followTheAuthor0 {
|
|
|
+ border: 2rpx solid #1f1f1f;
|
|
|
+ background: #fff;
|
|
|
+ color: #1f1f1f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.back-top {
|
|
|
+ position: fixed;
|
|
|
+ bottom: calc(126rpx + var(--window-bottom));
|
|
|
+ right: 16rpx;
|
|
|
+ width: 82rpx;
|
|
|
+ height: 82rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.initiator-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 18rpx 24rpx 18rpx 18rpx;
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+ .initiator-avatar {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 18rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .initiator-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .initiator-name {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #222;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-right: 12rpx;
|
|
|
+ max-width: 260rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .initiator-tag {
|
|
|
+ background: #1a1a1a;
|
|
|
+ color: #b6ff4b;
|
|
|
+ font-size: 20rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ padding: 2rpx 12rpx;
|
|
|
+ margin-left: 2rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .initiator-service-btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: #1a1a1a;
|
|
|
+ color: #b6ff4b;
|
|
|
+ font-size: 28rpx;
|
|
|
+ border-radius: 128rpx;
|
|
|
+ padding: 0 24rpx 0 12rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ margin-left: 18rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .service-icon {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.scale-tap {
|
|
|
+ transition: transform 0.15s;
|
|
|
+}
|
|
|
+
|
|
|
+.scale-tap:active {
|
|
|
+ transform: scale(0.92);
|
|
|
+}
|
|
|
+
|
|
|
+.risk-section {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ margin: 24rpx 0 0 0;
|
|
|
+ padding: 0 0 18rpx 0;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .risk-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 18rpx 24rpx 0 0rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #1f1f1f;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ &.risk-row-border {
|
|
|
+ border-top: 1rpx solid #f2f2f2;
|
|
|
+ margin-top: 18rpx;
|
|
|
+ padding-top: 18rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .risk-title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #1f1f1f;
|
|
|
+ font-family: 'PingFang SC-Bold';
|
|
|
+ font-weight: 400;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .risk-more {
|
|
|
+ color: #1f1f1f;
|
|
|
+ font-size: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 400;
|
|
|
+ font-family: 'PingFang SC-Bold';
|
|
|
+
|
|
|
+ .risk-more-icon {
|
|
|
+ width: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ margin-left: 4rpx;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .risk-desc {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ padding: 8rpx 24rpx 0 0;
|
|
|
+ font-family: 'PingFang SC-Regular';
|
|
|
+ }
|
|
|
+
|
|
|
+ .risk-content {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ padding: 12rpx 24rpx 0 0;
|
|
|
+ font-family: 'PingFang SC-Regular';
|
|
|
+ line-height: 1.7;
|
|
|
+
|
|
|
+ >view {
|
|
|
+ margin-bottom: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.followTheAuthor {
|
|
|
+ padding: 6rpx 20rpx 8rpx 15rpx;
|
|
|
+ border-radius: 26rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ transition: all 0.6s;
|
|
|
+ border: 2rpx solid transparent;
|
|
|
+
|
|
|
+ &.followTheAuthor1 {
|
|
|
+ color: #acf934;
|
|
|
+ background: #1f1f1f;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.followTheAuthor0 {
|
|
|
+ border: 2rpx solid #1f1f1f;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|