GterForumWeB/src/views/detail/detailIndex.vue

<template>
    <div class="container">
        <div class="detail-head flexacenter">
            <div class="detail-section">版块：<span class="section-name">香港澳门台湾留学申请</span></div>
            <div class="detail-data flexacenter">
                <div class="detail-data-item flexacenter">
                    <img class="detail-data-eye" src="@/assets/img/detail/eye.png">{{ info.views }}
                </div>
                <div class="detail-data-item flexacenter">
                    <img class="detail-data-comment" src="@/assets/img/detail/comment.png">{{ info.replies }}
                </div>
            </div>
        </div>

        <div class="detail-title-box">
            <div class="detail-title-item detail-title-jinghua flexcenter" v-if="info.digest > 0">精华</div>
            <div class="detail-title-item detail-title-label flexcenter" v-if="info.typename">{{ info.typename }}</div>
            {{ info.subject }}
        </div>

        <!--  -->
        <div class="card flexcenter">

            <div class="card-item shadow">
                <div class="card-head flexacenter">
                    <img class="card-head-icon" :src="info.avatar" />
                    <div class="card-head-content flex1 flexflex">
                        <div class="card-head-name flexflex">{{ info.author }}</div>
                        <div class="card-head-time">{{ $formattedDate(info.dateline) }}</div>
                    </div>
                    <div class="card-head-fool">楼主</div>
                </div>
                <template v-if="type == 5">
                    <div class="summary-content">
                        <div class="summary-content-item" v-for="(item, index) in  collegelist" :key="index">
                            <div class="summary-offer-head flexacenter">
                                <span class="summary-offer-head-title">Offer {{ index + 1 }}</span>
                                <a class="flexacenter" :href="item.url">详情<svg-icon icon-class="arrowsBlackLeft"
                                        class-name="summary-offer-head-icon"></svg-icon></a>
                            </div>
                            <div class="summary-offer-box">
                                <template v-for="(it, i) in offerinfoKey">
                                    <div class="summary-offer-item flexacenter" :key="i" v-if="item[it.key]">
                                        <div class="summary-offer-key flexacenter">{{ it.name }}</div>
                                        <div class="summary-offer-value flexacenter">{{ item[it.key] }}</div>
                                    </div>
                                </template>
                            </div>

                        </div>
                        <div class="summary-content-item">
                            <div class="summary-offer-head flexacenter">
                                <span class="summary-offer-head-title">总结</span>
                                <a class="flexacenter" :href="info.url">详情<svg-icon icon-class="arrowsBlackLeft"
                                        class-name="summary-offer-head-icon"></svg-icon></a>
                            </div>
                            <div class="summary-wenzi" v-html="info.message"></div>
                        </div>

                        <a class="examine-btn flexcenter" :href="info.url">
                            查看当前总结详情
                            <div class="examine-btn-outside flexcenter">
                                <svg-icon icon-class="arrowsRoundBlackLeft" class-name="examine-btn-icon"></svg-icon>
                            </div>
                        </a>
                    </div>
                </template>
                <template v-else-if="type == 6">
                    <div class="offer-content">
                        <div class="offer-content-box">
                            <template v-for="(item, index) in offerinfoKey">
                                <div class="offer-content-item flexacenter" :key="index" v-if="offerinfo[item.key]">
                                    <div class="offer-content-key" v-if="offerinfo[item.key]">{{ item.name }}</div>
                                    <div class="offer-content-value">{{ offerinfo[item.key] }}</div>
                                </div>
                            </template>
                        </div>

                        <a class="examine-btn flexcenter" :href="shareurl">
                            查看当前捷报详情
                            <div class="examine-btn-outside flexcenter">
                                <svg-icon icon-class="arrowsRoundBlackLeft" class-name="examine-btn-icon"></svg-icon>
                            </div>
                        </a>
                    </div>
                </template>
                <template v-else>
                    <!-- <div class="card-content" v-html="info.message"></div> -->
                    <div class="offer-content">
                        <div class="offer-content-box">
                            <template v-for="(item, index) in tenementKey">
                                <div class="offer-content-item flexacenter" :key="index" v-if="info[item.key]">
                                    <div class="offer-content-key" v-if="info[item.key]">{{ item.name }}</div>
                                    <div class="offer-content-value" v-if="item.key != 'school'">{{ info[item.key] }}</div>
                                    <div class="offer-content-value" v-else>{{ info[item.key] }}</div>
                                </div>
                            </template>
                        </div>

                    </div>
                </template>
            </div>

            <template v-if="false">
                <div class="card-item shadow" v-for="(item, index) in 7" :key="index">
                    <div class="card-head flexacenter">
                        <img class="card-head-icon"
                            src="https://axure-file.lanhuapp.com/md516b251fb-9cfa-46fc-a9b6-2a41a7b4dc37__3ad73406ff4bc8b138dafc6dcbf1a635.svg" />
                        <div class="card-head-content flex1 flexflex">
                            <div class="card-head-name flexflex">闫旭Mike <div class="landlord flexcenter" v-if="index == 0">
                                    楼主
                                </div>
                            </div>
                            <div class="card-head-time">2022-7-6 14:56</div>
                        </div>
                        <div class="card-head-fool">{{ index == 0 ? '楼主' : `${index}楼` }}</div>
                    </div>

                    <div class="card-content flex1">
                        <!-- 回复引用 -->
                        <div class="quotation flexflex" v-if="index == 1">
                            <svg-icon icon-class="quotation-left" class-name="quotation-icon"></svg-icon>
                            <div class="quotation-right flex1 flexflex">
                                <div class="quotation-wenzi flex1 three-lines">
                                    这个离开香港是否超过180天，应该是居籍的判断，而非物理空间变化的判断。简单来说，只要你在香港纳税，你在香港有工作，有现金流，有房子…这个离开香港是否超过180天，应该是居籍的判断，而非物理空间变化的判断。简单来说，只要你在香港纳税，你在香港有工作，有现金流，有房子…这个离开香港是否超过180天，应该是居籍的判断，而非物理空间变化的判断。简单来说，只要你在香港纳税，你在香港有工作，有现金流，有房子…
                                </div>

                                <div class="quotation-bottom flexacenter">zhangsd 发表于 2022-7-6 14:56
                                    <svg-icon icon-class="quotation-right" class-name="quotation-icon"></svg-icon>
                                </div>
                            </div>
                        </div>
                        之前申请永久居民，参考了不少寄托的帖子和经验，现在回馈给大家，积攒RP。
                        <!-- 未解锁区域 -->
                        <div class="flexcenter content-unlock content-unlock-no" v-if="index == 3 || index == 4">
                            <img class="unlock-icom" src="@/assets/img/detail/unlock.png">
                            {{ index == 3 ? '作者设置了回复可见' : '' }}
                            {{ index == 4 ? '作者设置了投币可见' : '' }}
                        </div>
                        <!-- 已经解锁区域 -->
                        <div class="content-unlock content-already" v-if="index == 5 || index == 6">
                            <div class="content-already-header flexflex">
                                - 本内容投币可见 -
                            </div>

                            <div class="content-unlock-wenzi">

                                香港身份证件和IANG Visa label；

                                香港购买的保险和MPF的缴费账单；

                                电话账单和当时香港上台的合约文件；

                            </div>

                        </div>

                        之前申请永久居民，参考了不少寄托的帖子和经验，现在回馈给大家，积攒RP。
                        之前申请永久居民，参考了不少寄托的帖子和经验，现在回馈给大家，积攒RP。
                    </div>
                </div>
            </template>


        </div>

        <!-- 分页 -->
        <div class="paging flexcenter">
            <el-pagination small background layout="prev, pager, next" :total="1000">
            </el-pagination>
        </div>

        <!-- 底部 -->
        <div class="discuss-bottom flexflex flexacenter">
            <!-- 底部的轮播 -->
            <div class="swiper">
                <div class="bottom-item flexacenter">
                    <div class="bottom-comment flexacenter" @click="setValue('popState', 'discussionSingle')">
                        <svg-icon icon-class="pen" class-name="bottom-comment-icom"></svg-icon>
                        想问啥，大胆问
                        <div class="loginBtn" v-if="!islogin" @click.stop="setValue('isloginBtnState', true, 'boolean')">
                        </div>
                    </div>
                </div>
            </div>

            <div class="bottom-item flex1 flexacenter">
                <div class="bottom-operation-box flex1 flexacenter">
                    <div class="bottom-operation-item flex1 flexcolumn flexcenter" @click="tapLike">
                        <div class="praise_bubble" id="praise_bubble" @click.stop=""
                            :style="{ height: prepareLiskeState ? '' : '.5333rem' }">
                            <div class="bubble" v-for="(item, index) in listlist" :key="index"></div>
                        </div>

                        <div class="loginBtn" v-if="!islogin" @click.stop="setValue('isloginBtnState', true, 'boolean')">
                        </div>
                        <img class="bottom-operation-icom" :class="{ 'prepareLiskeAnimateState': prepareLiskeAnimateState }"
                            src="@/assets/img/detail/like.png" />
                        <div class="bottom-operation-text">{{ stat.like == 0 ? '' : stat.like }}赞</div>
                    </div>
                    <div class="bottom-operation-item flex1 flexcolumn flexcenter" @click="postcollect()">
                        <div class="loginBtn" v-if="!islogin" @click.stop="setValue('isloginBtnState', true, 'boolean')">
                        </div>
                        <img v-if="iscollect == 0" class="bottom-operation-icom" src="@/assets/img/detail/collect.png">
                        <img v-else class="bottom-operation-icom" src="@/assets/img/detail/collect-c.png">
                        <div class="bottom-operation-text">收藏</div>
                    </div>
                    <div class="bottom-operation-item flex1 flexcolumn flexcenter" @click="transmit()">
                        <img class="bottom-operation-icom bottom-transmit-icom" src="@/assets/img/detail/share.png" />
                        <div class="bottom-operation-text">转发</div>
                        <button class="bottom-operation-button flexcolumn flexcenter" open-type="share"></button>
                    </div>
                </div>
            </div>
        </div>

        <detail-reply :two-comment-data="twoCommentData" :pop-state="popState"></detail-reply>
        <coins :coin-config="coinConfig" :pop-state="popState"></coins>
    </div>
</template>

<script>
import DetailReply from '@/components/DetailReply'
import Coins from '@/components/unlock/Coins'
export default {
    name: 'detailIndex',
    data() {
        return {
            twoCommentData: {
                avatar: "https://oss.gter.net/avatar/97KwEWANd_4DHWiY6VbnSUFSCKroYWFjYQ~~/middle",
                content: "评论回复",
            },
            popState: "",
            coinConfig: {
                strategy: {
                    button: "攒币指南",
                    tips: "你的寄托币不够，快去发帖挣币吧",
                    url: "https://bbs.gter.net/thread-2543548-1-1.html",
                }
            },

            islogin: true,
            prepareLiskeState: false,
            prepareLiskeAnimateState: false,
            stat: {
                like: 0
            },
            iscollect: 0,

            ispostOfferLike: null, // 点击点赞提交状态
            offerLikesumTimer: 0, // offer点赞累加定时器
            offerLikesumAnimateTimer: 0, // offer点赞动画定时器
            listlist: [],

            tid: 0, // 帖子id
            info: {},
            type: 0, // 定位帖 1  面经 2   租房帖 3  总结 5  捷报 6
            token: "",
            offerinfo: {}, // offer捷报详情
            offerinfoKey: [{  // offer 字段汇总
                key: "schoolname",
                name: "申请学校"
            }, {
                key: "degree",
                name: "学位"
            }, {
                key: "professional",
                name: "专业"
            }, {
                key: "project",
                name: "项目"
            }, {
                key: "apply_results",
                name: "申请结果"
            }, {
                key: "semester",
                name: "入学学期"
            }, {
                key: "noticedate",
                name: "通知时间"
            }, {
                key: "useperformanceStr",
                name: "使用成绩"
            }],
            shareurl: "", // 分享链接
            collegelist: [],// 总结里的 offer 列表数据
            tenementKey: [{  // 租房 字段汇总
                key: "type",
                name: "出租方式"
            }, {
                key: "rent",
                name: "月租/"
            }, {
                key: "property",
                name: "房屋类型"
            }, {
                key: "floor",
                name: "所在楼层"
            }, {
                key: "acreage",
                name: "面积（平方呎）"
            }, {
                key: "locationText",
                name: "所在区域"
            }, {
                key: "addressText",
                name: "地段/地址"
            }, {
                key: "school",
                name: "附近学校"
            }, {
                key: "gender",
                name: "性别要求"
            }, {
                key: "rentaldurationText",
                name: "出租时长"
            }, {
                key: "introduction",
                name: "房东或合租人介绍"
            }, {
                key: "intermediary_text",
                name: "发布者身份"
            }, {
                key: "telText",
                name: "电话"
            }, {
                key: "wechatText",
                name: "微信"
            }


            ]

        };
    },

    mounted() {
        this.tid = this.$route.query['tid']
        this.getDetail()

    },

    methods: {

        // 获取详细信息
        getDetail() {
            this.$http.post("/api/thread", {
                tid: this.tid
            }).then(res => {
                if (res.code != 200) return

                let data = res.data
                console.log("data", data);
                this.info = data.info
                this.type = data.type
                this.token = data.token

                if (this.type == 6) this.getOfferDetail()
                else if (this.type == 5) this.getsummaryDetails()
                else if (this.type == 0) this.getTenementDetails()

            })
        },

        // 获取offer详情
        getOfferDetail() {
            this.$http.get("/api/forum/detail", {
                id: this.token
            }, 'offer').then(res => {
                let data = res.data
                let offerinfo = data.offerinfo
                let useperformanceStr = ""
                offerinfo.useperformance && offerinfo.useperformance.forEach((el, index) => {
                    useperformanceStr += el + (offerinfo.useperformance.length - 1 == index ? '' : '、')
                })

                offerinfo['useperformanceStr'] = useperformanceStr
                offerinfo['schoolname'] = offerinfo.school.name

                this.offerinfo = offerinfo
                this.shareurl = data.shareurl
            })
        },

        // 获取总结详情
        getsummaryDetails() {
            this.$http.get(`/api/forum/details`, {
                id: this.token
            }, 'offer').then(res => {
                let data = res.data
                let collegelist = data.collegelist

                collegelist.forEach((el, index) => {
                    let useperformanceStr = ""
                    el.useperformance && el.useperformance.forEach((element, i) => {
                        useperformanceStr += element + (el.useperformance.length - 1 == i ? '' : '、')
                    })
                    el['useperformanceStr'] = useperformanceStr
                })


                this.info = { ...this.info, ...data.info }
                console.log(this.info);
                this.collegelist = collegelist
                this.shareurl = data.shareurl
            })
        },

        // 获取租房详情  https://app.gter.net/tenement/forum/show
        getTenementDetails() {
            console.log("ggjlgjkgj");
            this.$http.post("/tenement/forum/show", {
                // tid: 2540476
                token: this.token
            }, "tenement").then(res => {
                console.log(res, "res");

                let tenementKey = this.tenementKey
                let info = { ...this.info, ...res.info }

                tenementKey[1].name += info['currency'] ? info['currency'] : '敢于'

                if (info.cityid == 1) info['locationText'] = info.location
                else info['locationText'] = info.country + '>>' + info.city

                info['addressText'] = info['address'] || '-'

                info['rentaldurationText'] = info.rentalduration || '不限'

                info['telText'] = info.tel || '-'

                info['wechatText'] = info.wechat || '-'


                this.info = info
                console.log(this.info);
            })
        },


        // 点击点赞
        tapLike() {
            this.isState = true
            this.prepareLiskeState = true
            this.prepareLiskeAnimateState = true

            clearTimeout(this.offerLikesumTimer)
            clearTimeout(this.offerLikesumAnimateTimer)

            let praiseBubble = document.getElementById("praise_bubble");
            console.log("praiseBubble", praiseBubble);
            let last = 0;
            let b = Math.floor(Math.random() * 8) + 1; // 1 到 7的 图片
            // b = 1; // 测试写固定的
            const bl = Math.floor(Math.random() * 11) + 1; // bl1~bl11
            let d = document.createElement("div");
            d.style.backgroundImage = `url('./img/bg${b}.png')`
            d.style.backgroundSize = 'contain'
            d.className = `bubble`;
            // d.style.animation = `bubble_${bl} 1.5s linear 1 forwards, bubble_big_${Math.floor(Math.random() * 3) + 1} 0.8s linear 1 forwards, bubble_y 1.5s linear 1 forwards`

            d.dataset.t = String(Date.now());
            praiseBubble.appendChild(d);

            // this.$forceUpdate()

            this.stat.like++
            this.prepareLiskeNum++
            this.offerLikesumAnimateTimer = setTimeout(() => {
                this.prepareLiskeAnimateState = false
            }, 500)
            this.offerLikesumTimer = setTimeout(() => {
                this.ispostOfferLike = false
                this.postOfferLike()
            }, 2000)
        },

        postOfferLike() {
            if (this.ispostOfferLike) return
            this.ispostOfferLike = true

            this.offerLikesum = 0

            this.prepareLiskeState = false
            let key = new Date().getTime() + ''
            // let num = util.base64_encode(key + util.base64_encode(this.data.prepareLiskeNum + ''))



            // util.wxpost("/miniprogramApi/offer/behaviour/like", {
            //     token: this.data.token,
            //     num,
            //     key
            // }).then(res => {
            //     if (res.code != 200) return
            //     let data = res.data
            //     this.offerLikesum = 0
            // }).finally(() => {
            //     this.setData({
            //         prepareLiskeState: false
            //     })
            // })

        },


        // 点击转发
        transmit() {
            let value = location.href
            this.$copy(value, "已经复制链接，欢迎分享！")
        },

        setValue(key, value) {
            this[key] = value
        },

        // 收藏
        postcollect() {
            console.log("点击收藏");
        }

    },

    components: {
        DetailReply, Coins

    }
};
</script>

<style lang="scss" scoped>
.container {
    margin-top: 1.3rem;
    padding-bottom: 2.8rem;

    .aaa {
        color: red;
    }

    .detail-head {
        color: #7F7F7F;
        padding: .191rem 0.2933rem 0;
        justify-content: space-between;

        .detail-section {
            justify-content: space-between;
            font-size: .32rem;

            .section-name {
                color: #333;
            }
        }

        .detail-data {
            color: rgb(127, 127, 127);

            .detail-data-item {
                color: rgb(127, 127, 127);
                font-size: .28rem;

                img {
                    margin-right: .12rem;
                }

                .detail-data-eye {
                    width: .36rem;
                    height: .36rem;
                }

                .detail-data-comment {
                    width: .32rem;
                    height: .32rem;
                }

                &:last-of-type {
                    margin-left: .32rem;
                }
            }
        }
    }

    .detail-title-box {
        padding: .72rem 0.2933rem 0;
        color: #000;
        font-size: .56rem;
        font-weight: 650;

        .detail-title-item {
            font-size: .32rem;
            color: #fff;
            height: .64rem;
            display: inline-flex;
            margin-right: .16rem;
            font-weight: 400;

            &.detail-title-jinghua {
                width: 1rem;
                border-radius: .5rem .5rem 0;
                background: linear-gradient(-57.3808deg, rgb(178, 152, 232) 0%, rgb(88, 70, 195) 100%);
            }

            &.detail-title-label {
                background: rgb(51, 51, 51);
                padding: 0 .16rem;
                display: inline-flex;
                border-radius: .16rem;


            }

        }

    }

    .card {
        margin-top: .48rem;
        flex-direction: column;

        .card-item {
            width: 9.4rem;
            border-radius: .4rem;
            background: #fff;
            margin-bottom: .4rem;

            .card-head {
                padding: .48rem .32rem;
                border-bottom: .0133rem solid #ebebeb;

                .card-head-icon {
                    width: .96rem;
                    height: .96rem;
                    border-radius: 50%;
                    margin-right: .28rem;
                }

                .card-head-content {
                    flex-direction: column;

                    .card-head-name {
                        color: #333;
                        font-size: .32rem;
                        margin-bottom: .08rem;

                        .landlord {
                            color: rgb(127, 127, 127);
                            font-size: .26rem;
                            width: .64rem;
                            height: .44rem;
                            border: rgb(215, 215, 215) .0133rem solid;
                            background: rgb(240, 242, 245);
                            border-radius: .1rem;
                            margin-left: .16rem;
                        }
                    }

                    .card-head-time {
                        color: rgb(127, 127, 127);
                        font-size: .28rem;
                    }
                }

                .card-head-fool {
                    color: rgb(127, 127, 127);
                    font-size: .32rem;
                }
            }

            .card-content {
                color: #333;
                font-size: .36rem;
                line-height: .6rem;
                padding: .5rem .32rem;
                word-break: break-word;

                .quotation {
                    width: 100%;
                    color: #333;
                    font-size: .32rem;
                    border-radius: .16rem;
                    background: rgb(246, 246, 246);
                    padding: .36rem .24rem;
                    box-sizing: border-box;
                    margin-bottom: .48rem;

                    .quotation-wenzi {
                        line-height: .52rem;
                    }

                    .quotation-icon {
                        width: .32rem;
                        height: .26rem;
                    }

                    .quotation-right {
                        flex-direction: column;
                        margin-left: .28rem;

                        .quotation-bottom {
                            color: #7F7F7F;
                            font-size: .28rem;
                            margin-top: .258rem;

                            .quotation-icon {
                                margin-left: .2rem;
                            }
                        }
                    }
                }

                .content-unlock {
                    &.content-unlock-no {
                        height: 3.2rem;

                        .unlock-icom {
                            width: .64rem;
                            height: .64rem;
                            margin-right: 0.2rem;
                        }
                    }

                    background: rgba(242, 242, 242, 0.7);
                    margin: .48rem 0;
                    color: #555555;
                    font-size: .32rem;
                    border-radius: .16rem;

                    &.content-already {
                        background: rgba(242, 242, 242, 0.7);
                        margin: .48rem 0;
                        padding: .32rem;
                        color: #555555;
                        font-size: .32rem;
                        border-radius: .16rem;

                        .content-already-header {
                            color: #7f7f7f;
                            font-size: .28rem;
                            justify-content: center;
                        }

                        .content-unlock-wenzi {
                            color: #333;
                            font-size: .36rem;
                            line-height: .6rem;
                            margin-top: .3rem;
                        }
                    }

                }



            }

            .offer-content {
                padding: .56rem .32rem;

                .offer-content-box {


                    .offer-content-item {
                        line-height: .6rem;

                        &:not(:last-of-type) {
                            margin-bottom: .52rem;
                        }

                        .offer-content-key {
                            font-size: .32rem;
                            color: #7f7f7f;
                            width: 2.04rem;

                        }

                        .offer-content-value {
                            font-size: .36rem;
                            color: #333;
                        }



                    }
                }

            }

            .examine-btn {
                color: #333;
                font-size: .3rem;
                background: rgba(242, 242, 242, 1);
                height: .96rem;
                border-radius: 4.1rem;
                margin-top: .52rem;

                .examine-btn-outside {
                    width: .4rem;
                    height: .4rem;
                    margin-left: .24rem;
                    background: #fddf6d;
                    border-radius: 50%;

                    .examine-btn-icon {
                        width: .22rem;
                        height: .24rem;
                    }
                }
            }

            .summary-content {
                padding: .56rem .32rem;

                .summary-content-item {
                    border-radius: .16rem;
                    border: .0133rem solid rgba(235, 235, 235, 1);
                    margin-bottom: .32rem;

                    .summary-offer-head {
                        justify-content: space-between;
                        height: .8rem;
                        background: rgba(246, 246, 246, 1);
                        color: #333;
                        padding: 0 .24rem;

                        span,
                        a {
                            font-size: .32rem;
                            color: #333;
                        }

                        .summary-offer-head-title {
                            color: #000;
                            font-size: .4rem;
                            font-weight: 650;
                        }

                        .summary-offer-head-icon {
                            width: .14rem;
                            height: .36rem;
                            margin-left: .16rem;
                        }

                    }

                    .summary-offer-box {
                        padding-top: .28rem;
                        flex-direction: column;
                        justify-items: center;

                        .summary-offer-item {
                            line-height: .6rem;
                            padding: 0 .24rem;
                            box-sizing: border-box;
                            margin-bottom: .2rem;

                            .summary-offer-key {
                                width: 1.3rem;
                                color: #7f7f7f;
                                font-size: .32rem;
                                margin-right: .74rem;
                            }

                            .summary-offer-value {
                                font-size: .36rem;
                                color: #333;
                            }
                        }
                    }

                    .summary-wenzi {
                        color: #333;
                        font-size: .32rem;
                        line-height: .6rem;
                        padding: .28rem .24rem;
                    }

                }
            }



        }
    }

    .paging {
        margin-top: .48rem;

        ::v-deep {
            .el-pagination.is-background .el-pager li:not(.disabled).active {
                background: rgba(98, 177, 255, 1);
                border-radius: 50%;
            }

            .el-pagination .btn-next .el-icon,
            .el-pagination .btn-prev .el-icon {
                font-size: .4rem;
            }
        }
    }

    .discuss-bottom {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        background-color: #fff;
        padding: 0 0.4rem;
        box-sizing: border-box;
        z-index: 99;
        border-top: 0.0133rem solid #dbdcdd;
        padding-right: 0;
        height: 2rem;
        width: 10rem;
        justify-content: space-between;


        .swiper {
            height: 2rem;
        }


        .bottom-item {
            justify-content: space-between;
            height: 100%;

            .bottom-comment {
                width: 4.6rem;
                height: 0.8rem;
                border-radius: 1rem;
                padding: 0 0.28rem;
                font-size: 0.32rem;
                color: #aaaaaa;
                background-color: #f2f2f2;
                border: 0.0133rem solid #ebebeb;
                box-sizing: border-box;
                position: relative;

                .bottom-comment-icom {
                    width: 0.4rem;
                    height: 0.4rem;
                    margin-right: 0.16rem;
                }

            }

            .bottom-operation-box {
                width: 3.8667rem;
                justify-content: space-between;
            }

            .bottom-operation-icom {
                width: 0.48rem;
                height: 0.48rem;
                margin-bottom: 0.1333rem;
            }

            .bottom-operation-item {
                position: relative;
                padding: 0 0.4rem;
            }

            .bottom-operation-button {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: transparent;
                padding: 0;
                margin: 0;
                border: none;
                outline: none;

                &::after {
                    border: none;
                }
            }

            .bottom-transmit-icom {
                width: 0.4rem;
                height: 0.4rem;
            }

            .bottom-operation-text {
                font-size: 0.32rem;
                color: #555555;
            }

            .bottom-information {
                position: relative;
                min-width: 4.6667rem;
                max-width: 53.3333rem;
                height: 0.8rem;
                border-radius: 1rem;
                background: linear-gradient(to right, #fff, #50e3c2, #50e3c2, #50e3c2);
            }

            .bottom-information-avatar {
                width: 0.8rem;
                height: 0.8rem;
                border-radius: 50%;
            }

            .bottom-information-content {
                color: #fff;
                font-size: 0.2933rem;
                display: flex;
                align-items: center;
                justify-content: space-around;
                padding: 0 0.1333rem;

                .vertical {
                    height: 0.2933rem;
                    background-color: #fff;
                    width: 0.0133rem;
                }
            }



            .bottom-information-item:not(:last-of-type) {
                justify-content: center;
            }

        }

        .praise_bubble {
            width: 50px;
            height: 200px;
            position: absolute;
            bottom: 1.2rem;
            background-color: transparent;

            .bubble {
                position: absolute;
                width: 40px;
                height: 40px;
                left: 0;
                bottom: 0px;
                background-repeat: no-repeat;
                background-size: 100%;
                transform-origin: bottom;
            }


        }

    }

}

@keyframes bubble_11 {
    25% {
        margin-left: -10px;
    }

    50% {
        margin-left: -10px;
    }

    100% {
        margin-left: -18px;
    }
}

@keyframes bubble_10 {
    25% {
        margin-left: -20px;
    }

    50% {
        margin-left: -20px;
    }

    100% {
        margin-left: -20px;
    }
}

@keyframes bubble_9 {
    25% {
        margin-left: 10px;
    }

    50% {
        margin-left: 10px;
    }

    100% {
        margin-left: 10px;
    }
}

@keyframes bubble_8 {
    25% {
        margin-left: 20px;
    }

    50% {
        margin-left: 20px;
    }

    100% {
        margin-left: 20px;
    }
}

@keyframes bubble_7 {
    25% {
        margin-left: 3px;
    }

    50% {
        margin-left: 1px;
    }

    75% {
        margin-left: 2px;
    }

    100% {
        margin-left: 3px;
    }
}

@keyframes bubble_6 {
    25% {
        margin-left: -3px;
    }

    50% {
        margin-left: -1px;
    }

    75% {
        margin-left: -2px;
    }

    100% {
        margin-left: -3px;
    }
}

@keyframes bubble_5 {
    25% {
        margin-left: 5px;
    }

    50% {
        margin-left: -5px;
    }

    75% {
        margin-left: -10px;
    }

    100% {
        margin-left: -20px;
    }
}

@keyframes bubble_4 {
    25% {
        margin-left: -5px;
    }

    50% {
        margin-left: -5px;
    }

    75% {
        margin-left: 20px;
    }

    100% {
        margin-left: 10px;
    }
}

@keyframes bubble_3 {
    25% {
        margin-left: -20px;
    }

    50% {
        margin-left: 10px;
    }

    75% {
        margin-left: 20px;
    }

    100% {
        margin-left: -10px;
    }
}

@keyframes bubble_2 {
    25% {
        margin-left: 20px;
    }

    50% {
        margin-left: 25px;
    }

    75% {
        margin-left: 10px;
    }

    100% {
        margin-left: 5px;
    }
}

@keyframes bubble_1 {
    25% {
        margin-left: -8px;
    }

    50% {
        margin-left: 8px;
    }

    75% {
        margin-left: -15px;
    }

    100% {
        margin-left: 15px;
    }
}

@keyframes bubble_big_1 {
    0% {
        transform: scale(0.3);
    }

    100% {
        transform: scale(1.2);
    }
}

@keyframes bubble_big_2 {
    0% {
        transform: scale(0.3);
    }

    100% {
        transform: scale(0.9);
    }
}

@keyframes bubble_big_3 {
    0% {
        transform: scale(0.3);
    }

    100% {
        transform: scale(0.6);
    }
}

@keyframes bubble_y {
    0% {
        margin-bottom: 0;
    }

    10% {
        margin-bottom: 0;
    }

    75% {
        opacity: 1;
    }

    100% {
        margin-bottom: 200px;
        opacity: 0;
    }
}
</style>