519 lines
17 KiB
Vue
Executable File
519 lines
17 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">精华</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" @touchstart="touchstartt()" @touchend="touchendd()" ref="swiper">
|
||
<div class="bottom-item flexacenter">
|
||
<div class="bottom-comment flexacenter" @click="setValue('popState', 'discussionSingle')">
|
||
<!-- <img class="bottom-comment-icom" mode="widthFix" src="{~offer/mobile/img/u1605.svg}" /> -->
|
||
<svg-icon icon-class="pen" class-name="bottom-comment"></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="{~offer/mobile/img/u1152.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 class="bottom-operation-icom" mode="widthFix"
|
||
:src="iscollect == 0 ? '{~offer/mobile/img/u1610.png}' : '{~offer/mobile/img/icon-star-o.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" mode="widthFix"
|
||
src="{~offer/mobile/img/u1613.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",
|
||
|
||
},
|
||
|
||
islogin: true,
|
||
prepareLiskeState: false,
|
||
prepareLiskeAnimateState: false,
|
||
stat: {},
|
||
iscollect: 0,
|
||
|
||
};
|
||
},
|
||
|
||
mounted() {
|
||
},
|
||
|
||
methods: {
|
||
tapLike() { },
|
||
|
||
|
||
// 点击转发
|
||
transmit(){
|
||
|
||
}
|
||
|
||
},
|
||
|
||
components: {
|
||
DetailReply, Coins
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
margin-top: 1.3rem;
|
||
|
||
.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 {
|
||
width: 4.6667rem;
|
||
height: 2rem;
|
||
position: relative;
|
||
overflow: auto;
|
||
-ms-overflow-style: none;
|
||
overflow: -moz-scrollbars-none;
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 0 !important;
|
||
}
|
||
}
|
||
|
||
|
||
.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;
|
||
}
|
||
|
||
.praise_bubble .bubble {
|
||
position: absolute;
|
||
width: 40px;
|
||
height: 40px;
|
||
left: 0;
|
||
bottom: 0px;
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
transform-origin: bottom;
|
||
}
|
||
}
|
||
|
||
}
|
||
</style> |