kubbo/dvcp_v2_wechat_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

话题

Browse Source
This commit is contained in:
yanran200730
2023-03-16 17:41:40 +08:00
parent 4c052eee8c
commit e7c2ab3ff8
3 changed files with 239 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
src/project/fengdu/AppCircle/Detail.vue
View File

@@ -1,5 +1,52 @@
<template>
<div class="Detail">
<div class="top">
<div class="item-top">
<image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fangwuchuzu.png" />
<div class="right">
<h3>李在地</h3>
<span>清风街道</span>
</div>
</div>
<div class="item-content">
<span @click="$linkTo('./TopicDetail')">#【闲置物品交易】</span>
<text>社家用闲置柜子自用，原价212，现价80要的联系</text>
</div>
<div class="item-imgs">
<image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" />
<image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" />
<image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" />
</div>
<p>2020-12-11 10:10</p>
<div class="item-bottom">
<div>
<image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-zhuanfa.png" />
<i>10</i>
</div>
<div>
<image src="https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png" />
<i>10</i>
</div>
<div>
<image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-pinglun.png" />
<i>10</i>
</div>
</div>
</div>
<div class="comment">
<h2>评论</h2>
<div class="comment-item" v-for="(item, index) in 10" :key="index">
<image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fangwuchuzu.png" />
<div class="right">
<h3>清风</h3>
<p>联系方式呢</p>
<div class="bottom">
<span>2020-12-11 10:10</span>
<div>回复</div>
</div>
</div>
</div>
</div>
<AiLogin ref="login"/>
</div>
</template>
@@ -23,8 +70,167 @@
<style scoped lang="scss">
.Detail {
padding-top: 24px;
div {
box-sizing: border-box;
}
.comment {
margin-top: 24px;
padding: 32px 32px 0;
background: #fff;
.comment-item {
display: flex;
padding: 26px 0;
&:first-child {
padding-top: 0;
}
& > image {
width: 72px;
height: 72px;
margin-right: 16px;
border-radius: 50%;
}
.right {
flex: 1;
padding-bottom: 32px;
border-bottom: 1px solid #EEEEEE;
h3 {
line-height: 40px;
margin-bottom: 8px;
color: #666666;
font-size: 28px;
}
p {
line-height: 42px;
margin-bottom: 24px;
color: #333;
font-size: 28px;
}
.bottom {
display: flex;
align-items: center;
justify-content: space-between;
span {
color: #999999;
font-size: 24px;
}
div {
color: #687DA6;
font-size: 24px;
}
}
}
}
& > h2 {
margin-bottom: 32px;
color: #3d3d3d;
font-size: 38px;
font-weight: 600;
}
}
.top {
padding: 24px 24px 0;
background: #ffffff;
.item-top {
display: flex;
align-items: center;
image {
width: 96px;
height: 96px;
margin-right: 16px;
border-radius: 50%;
}
h3 {
margin-bottom: 12px;
color: #333333;
text-align: left;
font-size: 34px;
font-weight: 500;
}
span {
color: #999999;
font-size: 28px;
}
}
.item-imgs {
display: flex;
align-items: center;
image {
flex: 1;
height: 202px;
margin-right: 12px;
&:nth-of-type(3n) {
margin-right: 0;
}
}
}
& > p {
margin: 24px 0;
font-size: 28px;
color: #333333;
}
.item-bottom {
display: flex;
align-items: center;
height: 88px;
border-top: 1px solid #eeeeee;
div {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
image {
width: 40px;
height: 40px;
margin: 16px;
}
i {
color: #687DA6;
font-size: 28px;
}
}
}
.item-content {
margin: 16px;
line-height: 1.3;
// text-align: justify;
span {
font-size: 28px;
color: #4181FF;
}
text {
font-size: 28px;
color: #333333;
}
}
}
}
</style>