addnews
This commit is contained in:
WanP
@@ -30,8 +30,8 @@
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<!-- 外部指示点 -->
|
||||
<view v-if="post.imgs && post.imgs.length" class="dots-bar">
|
||||
<!-- 外部指示点:2个及以上才显示 -->
|
||||
<view v-if="post.imgs && post.imgs.length > 1" class="dots-bar">
|
||||
<view v-for="(dot, i) in post.imgs" :key="i" class="dot" :class="{ active: i === current }" />
|
||||
</view>
|
||||
|
||||
@@ -47,12 +47,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 评论区域 + 互动区域 -->
|
||||
<Comments
|
||||
:comments="post.comments"
|
||||
:showInteraction="true"
|
||||
:collectsum="post.collectsum"
|
||||
:likesum="post.likesum"
|
||||
/>
|
||||
<Comments :comments="post.comments" :showInteraction="true" :collectsum="post.collectsum" :likesum="post.likesum" />
|
||||
|
||||
|
||||
</view>
|
||||
@@ -99,7 +94,7 @@ const fetchPostData = async () => {
|
||||
likesum: 114514,
|
||||
imgs: [
|
||||
{ type: 'img', src: '/static/logo.png' },
|
||||
{ type: 'video', src: '/static/videos/啊米诺斯.mp4' },
|
||||
{ type: 'video', src: '/static/videos/beauty.mp4' },
|
||||
{ type: 'img', src: '/static/imgs/comment.webp' },
|
||||
{ type: 'img', src: '/static/imgs/image-138.webp' }
|
||||
],
|
||||
@@ -322,310 +317,11 @@ swiper-item {
|
||||
}
|
||||
|
||||
.date-text {
|
||||
color: #b1aeb2;
|
||||
}
|
||||
|
||||
.comment {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.commenthead {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 29px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.commentcount {
|
||||
width: fit-content;
|
||||
height: 100%;
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.headswitch {
|
||||
width: 102px;
|
||||
height: 100%;
|
||||
flex-grow: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
border-radius: 24px;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
background-color: #f0eef1;
|
||||
}
|
||||
|
||||
.headswitch .inact,
|
||||
.act {
|
||||
width: 48px;
|
||||
height: 23px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: PingFangSC;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
color: #110c13;
|
||||
}
|
||||
|
||||
.headswitch .inact {
|
||||
border-radius: 24px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.commentdetail {
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.commentdetailleft {
|
||||
width: 31.7px;
|
||||
height: 31.7px;
|
||||
margin-right: 12.2px;
|
||||
}
|
||||
|
||||
.commentdetailleft image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.commentdetailright {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.maincomment {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.commentdetailcontent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.commentusername {
|
||||
width: fit-content;
|
||||
height: 18px;
|
||||
font-family: PingFangSC;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: #b1aeb2;
|
||||
}
|
||||
|
||||
.commentusercontent {
|
||||
font-family: PingFangSC;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
margin: 4px 0 10px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.date-reply {
|
||||
height: 17px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.date-text,
|
||||
.replytext {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 17px;
|
||||
line-height: 17px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
color: #b1aeb2;
|
||||
}
|
||||
|
||||
.replytext {
|
||||
color: #918e93;
|
||||
}
|
||||
|
||||
.commentlike {
|
||||
height: 43px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6.7px;
|
||||
padding: 2px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.commentlikecount {
|
||||
min-width: 40px;
|
||||
height: 17px;
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 17px;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
padding: 0 4px;
|
||||
color: #918e93;
|
||||
}
|
||||
|
||||
.commentchildcontainer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 14px 0 0;
|
||||
}
|
||||
|
||||
.commentchild {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.commentchildleft {
|
||||
width: 23.5px;
|
||||
height: 23.5px;
|
||||
margin-right: 8.2px;
|
||||
}
|
||||
|
||||
.commentchildleft image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.commentchildright {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.expandcomment {
|
||||
width: 96px;
|
||||
height: 17px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.expandcommenttext {
|
||||
flex: 1;
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: #110c13;
|
||||
}
|
||||
|
||||
.interaction {
|
||||
width: 100%;
|
||||
border: solid 1px #faf9fb;
|
||||
background-color: #faf9fb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 11.5px 16px;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.editarea {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
border-radius: 24px;
|
||||
gap: 12px;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.editicon {
|
||||
width: 13.3px;
|
||||
height: 14.6px;
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.edittext {
|
||||
flex: 1;
|
||||
flex-grow: 0;
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 40px;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: #918e93;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.collection,
|
||||
.like {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.collectionicon,
|
||||
.likeicon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.collectioncount,
|
||||
.likecount {
|
||||
height: 17px;
|
||||
font-family: SFPro;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user