1139 lines
34 KiB
Vue
Executable File
1139 lines
34 KiB
Vue
Executable File
<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" v-if="">精华</div>
|
||
<div class="detail-title-item detail-title-label flexcenter">生活贴士</div>
|
||
香港永久居民的申请步骤和过程
|
||
</div>
|
||
|
||
<!-- -->
|
||
<div class="card flexcenter">
|
||
<!-- 总结开始 -->
|
||
<div class="card-item shadow">
|
||
<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>
|
||
<div class="card-head-time">2022-7-6 14:56</div>
|
||
</div>
|
||
<div class="card-head-fool">楼主</div>
|
||
</div>
|
||
<div class="summary-content">
|
||
<div class="summary-content-item">
|
||
<div class="summary-offer-head flexacenter">
|
||
<span class="summary-offer-head-title">Offer 1</span>
|
||
<span class="flexacenter">详情<svg-icon icon-class="arrowsBlackLeft"
|
||
class-name="summary-offer-head-icon"></svg-icon></span>
|
||
</div>
|
||
<div class="summary-offer-box">
|
||
<div class="summary-offer-item flexacenter">
|
||
<div class="summary-offer-key flexacenter">
|
||
申请学校
|
||
</div>
|
||
<div class="summary-offer-value flexacenter">
|
||
韦仕敦大学
|
||
</div>
|
||
</div>
|
||
<div class="summary-offer-item flexacenter">
|
||
<div class="summary-offer-key flexacenter">
|
||
学位
|
||
</div>
|
||
<div class="summary-offer-value flexacenter">
|
||
MA
|
||
</div>
|
||
</div>
|
||
<div class="summary-offer-item flexacenter">
|
||
<div class="summary-offer-key flexacenter">
|
||
专业
|
||
</div>
|
||
<div class="summary-offer-value flexacenter">
|
||
Curriculum study
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="summary-content-item">
|
||
<div class="summary-offer-head flexacenter">
|
||
<span class="summary-offer-head-title">总结</span>
|
||
<span class="flexacenter">详情<svg-icon icon-class="arrowsBlackLeft"
|
||
class-name="summary-offer-head-icon"></svg-icon></span>
|
||
</div>
|
||
<div class="summary-wenzi">
|
||
guelph教授很好一直在帮忙催offer，现在uvic也出了口头offer，可能要纠结一下...
|
||
|
||
mcgill拒了算是意料之中吧
|
||
|
||
ottawa没搞懂申请的thesis下来了course...
|
||
|
||
calgary突然就来了offer，又陷入纠结了..
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="examine-btn flexcenter">
|
||
查看当前总结详情
|
||
<div class="examine-btn-outside flexcenter">
|
||
<svg-icon icon-class="arrowsRoundBlackLeft" class-name="examine-btn-icon"></svg-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 总结结束 -->
|
||
|
||
<!-- offer -->
|
||
<div class="card-item shadow">
|
||
<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>
|
||
<div class="card-head-time">2022-7-6 14:56</div>
|
||
</div>
|
||
<div class="card-head-fool">楼主</div>
|
||
</div>
|
||
<div class="offer-content">
|
||
<div class="offer-content-box">
|
||
|
||
<div class="offer-content-item flexacenter" v-for="item in 7" :key="item">
|
||
<div class="offer-content-key">申请专业</div>
|
||
<div class="offer-content-value">韦仕敦大学</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="examine-btn flexcenter">
|
||
查看当前捷报详情
|
||
<div class="examine-btn-outside flexcenter">
|
||
<svg-icon icon-class="arrowsRoundBlackLeft" class-name="examine-btn-icon"></svg-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- offer结束 -->
|
||
|
||
<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>
|
||
|
||
|
||
</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",
|
||
}
|
||
},
|
||
|
||
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点赞动画定时器
|
||
listlist: [],
|
||
|
||
tid: 0, // 帖子id
|
||
info: {},
|
||
type: 0, // 定位帖 1 面经 2 租房帖 3 总结 5 捷报 6
|
||
token: "",
|
||
|
||
|
||
|
||
|
||
|
||
};
|
||
},
|
||
|
||
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");
|
||
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;
|
||
|
||
.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 {
|
||
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> |