1194 lines
42 KiB
Vue
Executable File
1194 lines
42 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">{{ 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="offerinfo.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 == 2">
|
||
<div class="offer-content">
|
||
<div class="offer-content-box">
|
||
<template v-for="(item, index) in interviewKey">
|
||
<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-html="info[item.key]"></div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<template v-else-if="type == 3">
|
||
<div class="offer-content">
|
||
<div class="offer-content-box" v-if="tenementInfoState">
|
||
<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'" v-html="info[item.key]">
|
||
</div>
|
||
<div class="offer-content-value" v-else>
|
||
<template v-for="(it) in info[item.key]">{{ it.name }}</template>
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
</div>
|
||
|
||
|
||
<div v-html="info.message" class="vHtmlMessage" style="">
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template v-else>
|
||
<div class="offer-content">
|
||
<div v-html="info.message" style="line-height: normal;" class="vHtmlMessage" >
|
||
</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: null,
|
||
// 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: "typeText",
|
||
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: "微信"
|
||
}],
|
||
|
||
interviewKey: [{ // 面经 字段汇总
|
||
name: "学校",
|
||
key: "school"
|
||
}, {
|
||
name: "专业",
|
||
key: "profession"
|
||
}, {
|
||
name: "项目",
|
||
key: "project"
|
||
}, {
|
||
name: "毕业时间",
|
||
key: "interviewtime"
|
||
}, {
|
||
name: "面试过程及内容",
|
||
key: "message"
|
||
}],
|
||
|
||
};
|
||
},
|
||
|
||
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
|
||
|
||
let info = data.info
|
||
|
||
const reg = new RegExp("\r\n", "g")
|
||
info['message'] = info['message'].replaceAll(reg, '<br/>')
|
||
info['message'] = info['message'].replace(/<img[^>]*>/g, (match) => {
|
||
return match.replace(/width="[^"]*"/g, '').replace(/height="[^"]*"/g, '');
|
||
});
|
||
|
||
this.info = 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 == 3) this.getTenementDetails()
|
||
else if (this.type == 2) this.getInterviewDetails()
|
||
this.getPostList()
|
||
|
||
})
|
||
},
|
||
|
||
// 获取offer详情
|
||
getOfferDetail() {
|
||
this.$http.get("/api/forum/details", {
|
||
id: this.token
|
||
}, 'offer').then(res => {
|
||
let data = res.data
|
||
// let offerinfo = data.offerinfo
|
||
let offerinfo = data.collegelist[0]
|
||
console.log("offerinfo", 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 => {
|
||
|
||
if (res.code == 201) this.tenementInfoState = true
|
||
|
||
let tenementKey = this.tenementKey
|
||
let info = { ...this.info, ...res.info }
|
||
|
||
|
||
|
||
info['typeText'] = info.gptype + '>>' + info.type
|
||
|
||
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 || '-'
|
||
|
||
|
||
const reg = new RegExp("\r\n", "g")
|
||
info['message'] = info['message'].replaceAll(reg, '<br/>')
|
||
info['message'] = info['message'].replace(/<img[^>]*>/g, (match) => {
|
||
console.log("match", match);
|
||
return match.replace(/width="[^"]*"/g, '').replace(/height="[^"]*"/g, '');
|
||
});
|
||
|
||
this.info = info
|
||
|
||
})
|
||
},
|
||
|
||
// 获取面经详情
|
||
getInterviewDetails() {
|
||
// https://app.gter.net/InterviewExperience/thread
|
||
|
||
this.$http.post("/InterviewExperience/thread", {
|
||
// token: this.token,
|
||
// tid: this.tid
|
||
tid: 2322145,
|
||
uniqid: "--G1tS2SCTOQyoOMiedlLKxTnFvHWjBwQezsJjvVJFwgqOtOFeYr4_LAAG5RV37ETvMl2Zd4tSCc-_dqeKpERxXsx-tPfXrUs0kUysTGLzgxYzU~",
|
||
token: "5e3c42209eebfbab66e6f0d6c70a53c7",
|
||
}, "tenement").then(res => {
|
||
console.log(res);
|
||
if (res.code != 200) return
|
||
let data = res.data
|
||
this.info = { ...this.info, ...data }
|
||
})
|
||
},
|
||
|
||
// 获取回复列表
|
||
getPostList() {
|
||
this.$http.post("/api/thread/postList", {
|
||
token: this.token,
|
||
page: 1,
|
||
limit: 20
|
||
}).then(res => {
|
||
console.log(res);
|
||
})
|
||
},
|
||
|
||
|
||
// 集中处理回复帖子
|
||
postComment(message) {
|
||
this.$http.post("/api/operation/reply", {
|
||
token: this.token,
|
||
message
|
||
}).then(res => {
|
||
console.log(res);
|
||
})
|
||
},
|
||
|
||
|
||
// 点击点赞
|
||
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_1 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.style.animation = `bubble_1 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;
|
||
|
||
.vHtmlMessage {
|
||
font-size: .36rem;
|
||
line-height: .6rem;
|
||
|
||
/deep/ strong {
|
||
font-weight: bold;
|
||
}
|
||
|
||
/deep/ img {
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
.offer-content-box {
|
||
|
||
.offer-content-item {
|
||
line-height: .6rem;
|
||
|
||
align-items: flex-start;
|
||
|
||
&: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;
|
||
width: 7.32rem;
|
||
white-space: break-spaces;
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.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;
|
||
|
||
/deep/ {
|
||
.bubble {
|
||
position: absolute;
|
||
width: 40px;
|
||
height: 40px;
|
||
left: 50%;
|
||
bottom: 0px;
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
transform-origin: bottom;
|
||
animation: like 1.8s ease-out forwards;
|
||
// animation-fill-mode: forwards;
|
||
}
|
||
|
||
@keyframes like {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translate(-50%, 0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translate(-50%, -200px);
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
</style> |