256 lines
8.2 KiB
Vue
Executable File
256 lines
8.2 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-wenzi flex1 three-lines">
|
||
这个离开香港是否超过180天，应该是居籍的判断，而非物理空间变化的判断。简单来说，只要你在香港纳税，你在香港有工作，有现金流，有房子…这个离开香港是否超过180天，应该是居籍的判断，而非物理空间变化的判断。简单来说，只要你在香港纳税，你在香港有工作，有现金流，有房子…这个离开香港是否超过180天，应该是居籍的判断，而非物理空间变化的判断。简单来说，只要你在香港纳税，你在香港有工作，有现金流，有房子…
|
||
</div>
|
||
|
||
|
||
<div class="quotation-bottom"></div>
|
||
</div>
|
||
<!-- 之前申请永久居民，参考了不少寄托的帖子和经验，现在回馈给大家，积攒RP。 -->
|
||
</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: "coinNo",
|
||
coinConfig: {
|
||
strategy: {
|
||
button: "攒币指南",
|
||
tips: "你的寄托币不够，快去发帖挣币吧",
|
||
url: "https://bbs.gter.net/thread-2543548-1-1.html",
|
||
}
|
||
},
|
||
};
|
||
},
|
||
|
||
mounted() {
|
||
|
||
},
|
||
|
||
methods: {
|
||
|
||
},
|
||
|
||
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;
|
||
|
||
.quotation-icon {
|
||
width: .32rem;
|
||
height: .26rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style> |