A1300399510/GterForumWeB
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

a1300399510@qq.com 提交于 2023/03/31 -11:00:01

Browse Source
This commit is contained in:
XiaoMo 2023-03-31 11:00:10 +08:00
parent 0094922096
commit 82ee4d4e13
3 changed files with 244 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.vue
View File

@ -95,4 +95,18 @@ export default {
-webkit-box-shadow: 0 0 .3rem rgba(0, 0, 0, .1);
box-shadow: 0 0 .3rem rgba(0, 0, 0, .1);
}
// 弹窗公共类 蒙版
.pop-box {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.64);
z-index: 100;
align-items: center;
justify-content: flex-end;
overflow: auto;
}
</style>

218
src/components/DetailReply.vue Executable file
View File

@ -0,0 +1,218 @@
<template>
<div>
<!-- 弹窗-讨论-单行 -->
<div class="pop-box flexflex flexcolumn" v-if="popState == 'discussionSingle'"
bindtap="{{ openDiscussionSingleState ? 'handlePopCancel' : '' }}">
<div class="discussion-box pop-box-box flexflex flexcolumn" style="border-radius: .4rem .4rem 0 0;"
catchtap="return false">
<div class="discussion-header flexacenter" v-if="twoCommentData">
<image class="discussion-avatar" mode="widthFix" src="{{ twoCommentData.avatar }}"></image>
<div class="discussion-text">{{ twoCommentData.content }}</div>
<image class="discussion-icom" catchtap="clearTwoCommentData"
style="height:13px;transform: translate(0);top:0;" mode="widthFix" src="../../img/u1428.png">
</image>
</div>
<div class="discussion-single-box flexflex flex1">
<div class="discussion-single-content flexacenter flex1">
<input class="discussion-single-input flex1" cursor-spacing="5" type="text" focus="{{ true }}"
placeholder="{{ twoCommentData ? '写回复…' : '想问啥，大胆问…' }}" model:value="{{ commentContent }}" />
<image class="discussion-single-input-icom" bindtap="setValue" data-key="popState"
data-value="discussionMulti" mode="widthFix" src="../../img/u1448.png"></image>
</div>
<div class="discussion-single-btn flexcenter" bindtap="postComment" data-content="{{ commentContent }}">
发布
</div>
</div>
</div>
</div>
<!-- 弹窗-讨论-多行 -->
<div class="pop-box flexflex flexcolumn" wx:if="{{ popState == 'discussionMulti' }}" bindtap="handlePopCancel"
catchtouchmove="return false">
<div class="discussion-multi-box pop-box-box flexflex flexcolumn" style="border-radius: 30rpx 30rpx 0 0;"
catchtap="return false">
<div class="discussion-header flexacenter" v-if="twoCommentData">
<image class="discussion-avatar":src="twoCommentData.avatar"></image>
<div class="discussion-text">{{ twoCommentData.content }}</div>
<image class="discussion-icom" catchtap="clearTwoCommentData" mode="widthFix" src="../../img/u1428.png">
</image>
</div>
<div class="discussion-multi-content flexflex flex1">
<textarea v-if="discussionMultiState" class="discussion-multi-textarea flex1" type="text"
maxlength="500" v-model="commentContent" @blur="setValue('discussionMultiState', false, 'boolean')"
:placeholder="twoCommentData ? '写回复…' : '想问啥，大胆问…'"></textarea>
<div v-else @click="setValue('discussionMultiState', true, 'boolean')"
class="discussion-multi-textarea flex1"
:style="{ color: !commentContent ? 'rgba(118,118,118,1)' : '' }">{{ commentContent ?
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"
src="../../img/u1431.png"></image>
<div class="discussion-multi-sum">{{ 500 - commentContent.length }}</div>
</div>
<div class="discussion-multi-bottom flexflex flexacenter">
<div class="discussion-multi-btn flexcenter" @click="postComment(commentContent)">
发布</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'DetailReply',
data() {
return {
commentContent: ""
};
},
mounted() {
console.log("gjklgjklg");
},
methods: {
},
};
</script>
<style lang="scss" scoped>
.discussion-single-box {
height: 72rpx;
justify-content: space-between;
padding: 26rpx 0;
}
.discussion-single-btn {
width: 105rpx;
height: 72rpx;
font-size: 27rpx;
color: #000;
border-radius: 12rpx;
margin-right: 24rpx;
background-color: rgba(80, 227, 194, 1);
}
.discussion-single-content {
height: 72rpx;
font-size: 27rpx;
border-radius: 12rpx;
background-color: rgba(242, 242, 242, 1);
margin-left: 24rpx;
margin-right: 24rpx;
padding-left: 18rpx;
}
.discussion-single-input-icom {
width: 42rpx;
height: 42rpx;
padding: 15rpx;
}
.discussion-single-input {
height: 100%;
}
.discussion-header {
padding-top: 24rpx;
padding-left: 24rpx;
position: relative;
.discussion-icom {
width: 27rpx;
height: 27rpx;
padding: 24rpx;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 5;
}
.discussion-text {
font-size: 24rpx;
color: #7f7f7f;
margin-left: 18rpx;
width: 615rpx;
overflow: hidden;
text-overflow: ellipsis;
/* 文字超出部分省略号显示 */
white-space: nowrap;
/* 不换行 */
}
.discussion-avatar {
width: 36rpx;
height: 36rpx;
border-radius: 50%;
}
}
.discussion-multi-box {
.discussion-header {
padding-bottom: 24rpx;
border-bottom: 1rpx solid #dbdcdd;
}
.discussion-multi-content {
position: relative;
height: 663rpx;
box-sizing: border-box;
}
.discussion-multi-textarea {
font-size: 30rpx;
padding: 24rpx;
/* height: 663rpx; */
box-sizing: border-box;
height: 50vh;
overflow: auto;
word-break: break-word;
line-height: 36rpx;
}
.discussion-multi-icom {
width: 36rpx;
height: 36rpx;
padding: 24rpx;
position: absolute;
top: 0;
right: 0;
z-index: 88;
}
.discussion-multi-sum {
position: absolute;
bottom: 0;
right: 0;
padding: 24rpx;
font-size: 21rpx;
color: #aaaaaa;
}
.discussion-multi-bottom {
height: 96rpx;
border-top: 1rpx solid #dbdcdd;
justify-content: flex-end;
padding-right: 24rpx;
}
.discussion-multi-btn {
background-color: rgba(80, 227, 194, 1);
border-radius: 12rpx;
width: 105rpx;
height: 66rpx;
margin: 15rpx 0;
font-size: 27rpx;
}
}
</style>

14
src/views/detail/detailIndex.vue
View File

@ -37,8 +37,10 @@
<!-- 回复引用 -->
<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-wenzi flex1 three-lines">
这个离开香港是否超过180天，应该是居籍的判断，而非物理空间变化的判断。简单来说，只要你在香港纳税，你在香港有工作，有现金流，有房子…这个离开香港是否超过180天，应该是居籍的判断，而非物理空间变化的判断。简单来说，只要你在香港纳税，你在香港有工作，有现金流，有房子…这个离开香港是否超过180天，应该是居籍的判断，而非物理空间变化的判断。简单来说，只要你在香港纳税，你在香港有工作，有现金流，有房子…
</div>
<div class="quotation-bottom"></div>
</div>
@ -52,10 +54,12 @@
<!-- 分页 -->
<detail-reply></detail-reply>
</div>
</template>
<script>
import DetailReply from '@/components/DetailReply'
export default {
name: 'detailIndex',
@ -72,6 +76,10 @@ export default {
methods: {
},
components: {
DetailReply
}
};
</script>
@ -220,6 +228,8 @@ export default {
font-size: .32rem;
border-radius: .16rem;
background: rgb(246, 246, 246);
padding: .36rem .24rem;
box-sizing: border-box;
.quotation-icon {
width: .32rem;