<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">10378 </div> <div class="detail-data-item flexacenter"> <img class="detail-data-comment" src="@/assets/img/detail/comment.png">16 </div> </div> </div> <div class="detail-title-box"> <div class="detail-title-item detail-title-jinghua flexcenter">精华</div> <div class="detail-title-item detail-title-label flexcenter">生活贴士</div> 香港永久居民的申请步骤和过程 </div> <!-- --> <div class="card flexcenter"> <div class="card-item shadow" v-for="(item, index) in 5" :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"> <!-- 回复引用 --> <div class="quotation flexflex"> <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> </div> </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> <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", } }, info: { avatar: "https://oss.gter.net/avatar/97KwEWANd_4DHWiY6VbnSUFSCKroYWFjYQ~~/middle", likenum: 1 }, islogin: true, prepareLiskeState: false, prepareLiskeAnimateState: false, stat: { like: 0 }, iscollect: 0, ispostOfferLike: null, // 点击点赞提交状态 offerLikesumTimer: 0, // offer点赞累加定时器 offerLikesumAnimateTimer: 0, // offer点赞动画定时器 }; }, mounted() { }, methods: { // 点击点赞 // 点击点赞 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"); // let urll = '//offer.gter.net/image/gter/offer/imgdetails' let urll = './img' d.style.backgroundImage = `url('${urll}/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.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() { }, 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; .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; .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; } } } } } } } .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; } } } } .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>