a1300399510@qq.com 提交于 2023/03/31 -11:20:01
This commit is contained in:
parent
82ee4d4e13
commit
b5ace38481
BIN
src/assets/img/detail/u1428.png
Executable file
BIN
src/assets/img/detail/u1428.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/img/detail/u1431.png
Executable file
BIN
src/assets/img/detail/u1431.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1011 B |
BIN
src/assets/img/detail/u1448.png
Executable file
BIN
src/assets/img/detail/u1448.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 961 B |
@ -2,24 +2,23 @@
|
|||||||
<div>
|
<div>
|
||||||
<!-- 弹窗-讨论-单行 -->
|
<!-- 弹窗-讨论-单行 -->
|
||||||
<div class="pop-box flexflex flexcolumn" v-if="popState == 'discussionSingle'"
|
<div class="pop-box flexflex flexcolumn" v-if="popState == 'discussionSingle'"
|
||||||
bindtap="{{ openDiscussionSingleState ? 'handlePopCancel' : '' }}">
|
@click="openDiscussionSingleState ? 'handlePopCancel' : ''">
|
||||||
<div class="discussion-box pop-box-box flexflex flexcolumn" style="border-radius: .4rem .4rem 0 0;"
|
<div class="discussion-box pop-box-box flexflex flexcolumn" style="border-radius: .4rem .4rem 0 0;"
|
||||||
catchtap="return false">
|
catchtap="return false">
|
||||||
<div class="discussion-header flexacenter" v-if="twoCommentData">
|
<div class="discussion-header flexacenter" v-if="twoCommentData">
|
||||||
<image class="discussion-avatar" mode="widthFix" src="{{ twoCommentData.avatar }}"></image>
|
<img class="discussion-avatar" :src="twoCommentData.avatar" />
|
||||||
<div class="discussion-text">{{ twoCommentData.content }}</div>
|
<div class="discussion-text one-line">{{ twoCommentData.content }}</div>
|
||||||
<image class="discussion-icom" catchtap="clearTwoCommentData"
|
<img class="discussion-icom" catchtap="clearTwoCommentData"
|
||||||
style="height:13px;transform: translate(0);top:0;" mode="widthFix" src="../../img/u1428.png">
|
style="height:13px;transform: translate(0);top:0;" src="@/assets/img/detail/u1428.png">
|
||||||
</image>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="discussion-single-box flexflex flex1">
|
<div class="discussion-single-box flexflex flex1">
|
||||||
<div class="discussion-single-content flexacenter flex1">
|
<div class="discussion-single-content flexacenter flex1">
|
||||||
<input class="discussion-single-input flex1" cursor-spacing="5" type="text" focus="{{ true }}"
|
<input class="discussion-single-input flex1" cursor-spacing="5" type="text"
|
||||||
placeholder="{{ twoCommentData ? '写回复…' : '想问啥，大胆问…' }}" model:value="{{ commentContent }}" />
|
:placeholder="twoCommentData ? '写回复…' : '想问啥，大胆问…'" v-model="commentContent" />
|
||||||
<image class="discussion-single-input-icom" bindtap="setValue" data-key="popState"
|
<img class="discussion-single-input-icom" @click="setValue('popState', 'discussionMulti',)"
|
||||||
data-value="discussionMulti" mode="widthFix" src="../../img/u1448.png"></image>
|
src="@/assets/img/detail/u1448.png" />
|
||||||
</div>
|
</div>
|
||||||
<div class="discussion-single-btn flexcenter" bindtap="postComment" data-content="{{ commentContent }}">
|
<div class="discussion-single-btn flexcenter" @click="postComment(commentContent)">
|
||||||
发布
|
发布
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -28,15 +27,13 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 弹窗-讨论-多行 -->
|
<!-- 弹窗-讨论-多行 -->
|
||||||
<div class="pop-box flexflex flexcolumn" wx:if="{{ popState == 'discussionMulti' }}" bindtap="handlePopCancel"
|
<div class="pop-box flexflex flexcolumn" v-if="popState == 'discussionMulti'" @click="handlePopCancel()">
|
||||||
catchtouchmove="return false">
|
<div class="discussion-multi-box pop-box-box flexflex flexcolumn" style="border-radius: .4rem .4rem 0 0;"
|
||||||
<div class="discussion-multi-box pop-box-box flexflex flexcolumn" style="border-radius: 30rpx 30rpx 0 0;"
|
@click.stop="">
|
||||||
catchtap="return false">
|
|
||||||
<div class="discussion-header flexacenter" v-if="twoCommentData">
|
<div class="discussion-header flexacenter" v-if="twoCommentData">
|
||||||
<image class="discussion-avatar":src="twoCommentData.avatar"></image>
|
<image class="discussion-avatar" :src="twoCommentData.avatar"></image>
|
||||||
<div class="discussion-text">{{ twoCommentData.content }}</div>
|
<div class="discussion-text one-line">{{ twoCommentData.content }}</div>
|
||||||
<image class="discussion-icom" catchtap="clearTwoCommentData" mode="widthFix" src="../../img/u1428.png">
|
<img class="discussion-icom" @click.stop="clearTwoCommentData()" src="@/assets/img/detail/u1428.png">
|
||||||
</image>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="discussion-multi-content flexflex flex1">
|
<div class="discussion-multi-content flexflex flex1">
|
||||||
<textarea v-if="discussionMultiState" class="discussion-multi-textarea flex1" type="text"
|
<textarea v-if="discussionMultiState" class="discussion-multi-textarea flex1" type="text"
|
||||||
@ -46,9 +43,8 @@
|
|||||||
class="discussion-multi-textarea flex1"
|
class="discussion-multi-textarea flex1"
|
||||||
:style="{ color: !commentContent ? 'rgba(118,118,118,1)' : '' }">{{ commentContent ?
|
:style="{ color: !commentContent ? 'rgba(118,118,118,1)' : '' }">{{ commentContent ?
|
||||||
commentContent : (twoCommentData ? '写回复…' : '想问啥，大胆问…') }}</div>
|
commentContent : (twoCommentData ? '写回复…' : '想问啥，大胆问…') }}</div>
|
||||||
<!-- <editor id="discussion-multi-textarea" class="discussion-multi-textarea flex1" bindinput="onDiscussionTextareaChange" bindready="onDiscussionTextareaReady" placeholder="{{ twoCommentData ? '写回复…' : '想问啥，大胆问…' }}"></editor> -->
|
|
||||||
<image class="discussion-multi-icom" catchtap="openDiscussionSingle" mode="widthFix"
|
<image class="discussion-multi-icom" catchtap="openDiscussionSingle" mode="widthFix"
|
||||||
src="../../img/u1431.png"></image>
|
src="@/assets/img/detail/u1431.png"></image>
|
||||||
<div class="discussion-multi-sum">{{ 500 - commentContent.length }}</div>
|
<div class="discussion-multi-sum">{{ 500 - commentContent.length }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="discussion-multi-bottom flexflex flexacenter">
|
<div class="discussion-multi-bottom flexflex flexacenter">
|
||||||
@ -65,7 +61,15 @@ export default {
|
|||||||
name: 'DetailReply',
|
name: 'DetailReply',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
commentContent: ""
|
commentContent: "",
|
||||||
|
twoCommentData: {
|
||||||
|
avatar: "https://oss.gter.net/avatar/97KwEWANd_4DHWiY6VbnSUFSCKroYWFjYQ~~/middle",
|
||||||
|
content: "评论回复",
|
||||||
|
|
||||||
|
},
|
||||||
|
popState: "discussionSingle",
|
||||||
|
|
||||||
|
openDiscussionSingleState: ""
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -75,57 +79,71 @@ export default {
|
|||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
|
// 提交回复
|
||||||
|
postComment() {
|
||||||
|
console.log("dffgkgfk");
|
||||||
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.pop-box-box {
|
||||||
|
width: 100vw;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: .64rem .64rem 0 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
.discussion-single-box {
|
.discussion-single-box {
|
||||||
height: 72rpx;
|
height: .96rem;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 26rpx 0;
|
padding: .3467rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discussion-single-btn {
|
.discussion-single-btn {
|
||||||
width: 105rpx;
|
width: 1.4rem;
|
||||||
height: 72rpx;
|
height: .96rem;
|
||||||
font-size: 27rpx;
|
font-size: .36rem;
|
||||||
color: #000;
|
color: #000;
|
||||||
border-radius: 12rpx;
|
border-radius: .16rem;
|
||||||
margin-right: 24rpx;
|
margin-right: .32rem;
|
||||||
background-color: rgba(80, 227, 194, 1);
|
background-color: rgba(80, 227, 194, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.discussion-single-content {
|
.discussion-single-content {
|
||||||
height: 72rpx;
|
height: .96rem;
|
||||||
font-size: 27rpx;
|
font-size: .36rem;
|
||||||
border-radius: 12rpx;
|
border-radius: .16rem;
|
||||||
background-color: rgba(242, 242, 242, 1);
|
background-color: rgba(242, 242, 242, 1);
|
||||||
margin-left: 24rpx;
|
margin-left: .32rem;
|
||||||
margin-right: 24rpx;
|
margin-right: .32rem;
|
||||||
padding-left: 18rpx;
|
padding-left: .24rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discussion-single-input-icom {
|
.discussion-single-input-icom {
|
||||||
width: 42rpx;
|
width: .56rem;
|
||||||
height: 42rpx;
|
height: .56rem;
|
||||||
padding: 15rpx;
|
padding: .2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discussion-single-input {
|
.discussion-single-input {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discussion-header {
|
.discussion-header {
|
||||||
padding-top: 24rpx;
|
padding-top: .32rem;
|
||||||
padding-left: 24rpx;
|
padding-left: .32rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|
||||||
.discussion-icom {
|
.discussion-icom {
|
||||||
width: 27rpx;
|
width: .36rem;
|
||||||
height: 27rpx;
|
height: .36rem;
|
||||||
padding: 24rpx;
|
padding: .32rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
right: 0;
|
right: 0;
|
||||||
@ -134,20 +152,15 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.discussion-text {
|
.discussion-text {
|
||||||
font-size: 24rpx;
|
font-size: .32rem;
|
||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
margin-left: 18rpx;
|
margin-left: .24rem;
|
||||||
width: 615rpx;
|
width: 8.2rem;
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
/* 文字超出部分省略号显示 */
|
|
||||||
white-space: nowrap;
|
|
||||||
/* 不换行 */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.discussion-avatar {
|
.discussion-avatar {
|
||||||
width: 36rpx;
|
width: .48rem;
|
||||||
height: 36rpx;
|
height: .48rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user