a1300399510@qq.com 提交于 2023/03/31 -11:40:02
This commit is contained in:
parent
b5ace38481
commit
bab8eda21f
@ -109,4 +109,13 @@ export default {
|
|||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 清除 input 和 textarea 的默认样式
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
background: transparent;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -15,7 +15,7 @@
|
|||||||
<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"
|
<input class="discussion-single-input flex1" cursor-spacing="5" type="text"
|
||||||
:placeholder="twoCommentData ? '写回复…' : '想问啥，大胆问…'" v-model="commentContent" />
|
:placeholder="twoCommentData ? '写回复…' : '想问啥，大胆问…'" v-model="commentContent" />
|
||||||
<img class="discussion-single-input-icom" @click="setValue('popState', 'discussionMulti',)"
|
<img class="discussion-single-input-icom" @click="setValue('popState', 'discussionMulti')"
|
||||||
src="@/assets/img/detail/u1448.png" />
|
src="@/assets/img/detail/u1448.png" />
|
||||||
</div>
|
</div>
|
||||||
<div class="discussion-single-btn flexcenter" @click="postComment(commentContent)">
|
<div class="discussion-single-btn flexcenter" @click="postComment(commentContent)">
|
||||||
@ -23,7 +23,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 弹窗-讨论-多行 -->
|
<!-- 弹窗-讨论-多行 -->
|
||||||
@ -31,20 +30,15 @@
|
|||||||
<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: .4rem .4rem 0 0;"
|
||||||
@click.stop="">
|
@click.stop="">
|
||||||
<div class="discussion-header flexacenter" v-if="twoCommentData">
|
<div class="discussion-header flexacenter" v-if="twoCommentData">
|
||||||
<image class="discussion-avatar" :src="twoCommentData.avatar"></image>
|
<img class="discussion-avatar" :src="twoCommentData.avatar" />
|
||||||
<div class="discussion-text one-line">{{ twoCommentData.content }}</div>
|
<div class="discussion-text one-line">{{ twoCommentData.content }}</div>
|
||||||
<img class="discussion-icom" @click.stop="clearTwoCommentData()" src="@/assets/img/detail/u1428.png">
|
<img class="discussion-icom" @click.stop="clearTwoCommentData()" src="@/assets/img/detail/u1428.png">
|
||||||
</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 class="discussion-multi-textarea flex1" type="text"
|
||||||
maxlength="500" v-model="commentContent" @blur="setValue('discussionMultiState', false, 'boolean')"
|
maxlength="500" v-model="commentContent" :placeholder="twoCommentData ? '写回复…' : '想问啥，大胆问…'"></textarea>
|
||||||
:placeholder="twoCommentData ? '写回复…' : '想问啥，大胆问…'"></textarea>
|
<img class="discussion-multi-icom" @click.stop="openDiscussionSingle()"
|
||||||
<div v-else @click="setValue('discussionMultiState', true, 'boolean')"
|
src="@/assets/img/detail/u1431.png" />
|
||||||
class="discussion-multi-textarea flex1"
|
|
||||||
:style="{ color: !commentContent ? 'rgba(118,118,118,1)' : '' }">{{ commentContent ?
|
|
||||||
commentContent : (twoCommentData ? '写回复…' : '想问啥，大胆问…') }}</div>
|
|
||||||
<image class="discussion-multi-icom" catchtap="openDiscussionSingle" mode="widthFix"
|
|
||||||
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">
|
||||||
@ -69,10 +63,13 @@ export default {
|
|||||||
},
|
},
|
||||||
popState: "discussionSingle",
|
popState: "discussionSingle",
|
||||||
|
|
||||||
openDiscussionSingleState: ""
|
openDiscussionSingleState: false, // 弹出键盘动画
|
||||||
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
props: ["twoCommentData"],
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
console.log("gjklgjklg");
|
console.log("gjklgjklg");
|
||||||
},
|
},
|
||||||
@ -84,6 +81,16 @@ export default {
|
|||||||
console.log("dffgkgfk");
|
console.log("dffgkgfk");
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 关闭弹窗
|
||||||
|
handlePopCancel(){
|
||||||
|
this.twoCommentData = null
|
||||||
|
},
|
||||||
|
|
||||||
|
// 切换简单的切换数据
|
||||||
|
setValue(key, value) {
|
||||||
|
this[key] = value
|
||||||
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@ -130,9 +137,6 @@ export default {
|
|||||||
|
|
||||||
.discussion-single-input {
|
.discussion-single-input {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.discussion-header {
|
.discussion-header {
|
||||||
@ -168,34 +172,33 @@ export default {
|
|||||||
|
|
||||||
.discussion-multi-box {
|
.discussion-multi-box {
|
||||||
.discussion-header {
|
.discussion-header {
|
||||||
padding-bottom: 24rpx;
|
padding-bottom: .32rem;
|
||||||
border-bottom: 1rpx solid #dbdcdd;
|
border-bottom: .0133rem solid #dbdcdd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discussion-multi-content {
|
.discussion-multi-content {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 663rpx;
|
height: 8.84rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.discussion-multi-textarea {
|
.discussion-multi-textarea {
|
||||||
font-size: 30rpx;
|
font-size: .4rem;
|
||||||
padding: 24rpx;
|
padding: .32rem;
|
||||||
/* height: 663rpx; */
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 50vh;
|
height: 50vh;
|
||||||
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
line-height: 36rpx;
|
line-height: .48rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discussion-multi-icom {
|
.discussion-multi-icom {
|
||||||
width: 36rpx;
|
width: .48rem;
|
||||||
height: 36rpx;
|
height: .48rem;
|
||||||
padding: 24rpx;
|
padding: .32rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
@ -206,25 +209,25 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
padding: 24rpx;
|
padding: .32rem;
|
||||||
font-size: 21rpx;
|
font-size: .28rem;
|
||||||
color: #aaaaaa;
|
color: #aaaaaa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discussion-multi-bottom {
|
.discussion-multi-bottom {
|
||||||
height: 96rpx;
|
height: 1.28rem;
|
||||||
border-top: 1rpx solid #dbdcdd;
|
border-top: .0133rem solid #dbdcdd;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
padding-right: 24rpx;
|
padding-right: .32rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discussion-multi-btn {
|
.discussion-multi-btn {
|
||||||
background-color: rgba(80, 227, 194, 1);
|
background-color: rgba(80, 227, 194, 1);
|
||||||
border-radius: 12rpx;
|
border-radius: .16rem;
|
||||||
width: 105rpx;
|
width: 1.4rem;
|
||||||
height: 66rpx;
|
height: .88rem;
|
||||||
margin: 15rpx 0;
|
margin: .2rem 0;
|
||||||
font-size: 27rpx;
|
font-size: .36rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,267 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="container">
|
|
||||||
<!-- 搜索框 -->
|
|
||||||
<div class="search-input-box flexacenter">
|
|
||||||
<div class="search-input flexacenter">
|
|
||||||
<img class="search-input-icon" src="@/assets/img/headerNav/search.png">
|
|
||||||
<input class="search-input-input flex1" placeholder="请输入搜索关键词" />
|
|
||||||
<img class="search-input-cross" src="@/assets/img/icon/clear.png">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="search-input-cancel" @click.stop="handCancel">取消</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 结果数量 -->
|
|
||||||
<div class="numberResults flexacenter">大约找到 <div class="number">{{ 800 }}</div> 条结果</div>
|
|
||||||
|
|
||||||
<div class="result-box flexacenter">
|
|
||||||
<div class="result-item flexflex" v-for="item in 3" :key="item">
|
|
||||||
<div class="result-header one-line">
|
|
||||||
<div class="result-label">租房租房租房</div>
|
|
||||||
<div class="result-title">诚招室友一起合租香港大学附近房子 女生</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="result-content two-lines flex1">
|
|
||||||
<template v-if="item == 1">
|
|
||||||
香港理工大学附近求租房，红磡何文田或黄埔附近最好
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<div v-else class="reply-visible flexcenter">
|
|
||||||
回复可见
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="result-info flexacenter">
|
|
||||||
<div class="user-info flexacenter">
|
|
||||||
<svg-icon icon-class="test-head" class-name="icon-head"></svg-icon>
|
|
||||||
<div class="user-name">匿名用户</div>
|
|
||||||
</div>
|
|
||||||
<div class="item-data flexacenter">
|
|
||||||
<div class="item-data-item flexacenter">
|
|
||||||
<svg-icon icon-class="look" class-name="icon-look"></svg-icon>
|
|
||||||
<div>1552</div>
|
|
||||||
</div>
|
|
||||||
<div class="item-data-item flexacenter">
|
|
||||||
<svg-icon icon-class="msg" class-name="icon-msg"></svg-icon>
|
|
||||||
<div>12</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 精华 -->
|
|
||||||
<div class="rightTop">
|
|
||||||
<img class="rightTop-img" src="@/assets/img/icon/topRight .png">
|
|
||||||
<span>精华</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="paging flexcenter">
|
|
||||||
<el-pagination small background layout="prev, pager, next" :total="1000">
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "SearchResult",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
// 处理点击取消的返回上一页
|
|
||||||
handCancel() {
|
|
||||||
if (this.$route.fullPath != "/") this.$router.go(-1)
|
|
||||||
else this.$router.push('/recommend')
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.container {
|
|
||||||
padding-top: 1.3rem;
|
|
||||||
|
|
||||||
.search-input-box {
|
|
||||||
margin-left: .32rem;
|
|
||||||
|
|
||||||
.search-input {
|
|
||||||
width: 8.2rem;
|
|
||||||
height: .96rem;
|
|
||||||
border-radius: 2.56rem;
|
|
||||||
background: rgba(235, 235, 235, 1);
|
|
||||||
|
|
||||||
.search-input-icon,
|
|
||||||
.search-input-cross {
|
|
||||||
width: .4rem;
|
|
||||||
height: .4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input-icon {
|
|
||||||
padding: 0 .4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input-cross {
|
|
||||||
padding-right: .4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input-input {
|
|
||||||
height: 100%;
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input-cancel {
|
|
||||||
color: #000;
|
|
||||||
font-size: .36rem;
|
|
||||||
padding-left: .46rem;
|
|
||||||
width: .74rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.numberResults {
|
|
||||||
font-size: .32rem;
|
|
||||||
color: #555;
|
|
||||||
// margin-top: .64rem;
|
|
||||||
margin: .64rem .32rem .48rem;
|
|
||||||
|
|
||||||
.number {
|
|
||||||
color: #000;
|
|
||||||
font-weight: 650;
|
|
||||||
margin: 0 .1667rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-box {
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.result-item {
|
|
||||||
margin-bottom: .32rem;
|
|
||||||
width: 9.36rem;
|
|
||||||
height: 3.96rem;
|
|
||||||
background-color: rgba(255, 255, 255, 1);
|
|
||||||
border: none;
|
|
||||||
border-radius: .32rem;
|
|
||||||
-moz-box-shadow: 0 0 .16rem rgba(0, 0, 0, 0.0784313725490196);
|
|
||||||
-webkit-box-shadow: 0 0 .16rem rgba(0, 0, 0, 0.08);
|
|
||||||
box-shadow: 0 0 .16rem rgba(0, 0, 0, .08);
|
|
||||||
padding: 0.4rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.result-header {
|
|
||||||
margin-bottom: .32rem;
|
|
||||||
|
|
||||||
.result-label {
|
|
||||||
font-size: .28rem;
|
|
||||||
height: .52rem;
|
|
||||||
line-height: .52rem;
|
|
||||||
background: rgb(51, 51, 51);
|
|
||||||
color: #fff;
|
|
||||||
display: inline-block;
|
|
||||||
border-radius: .16rem;
|
|
||||||
padding: 0 .12rem;
|
|
||||||
margin-right: .12rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-title {
|
|
||||||
color: #000;
|
|
||||||
font-size: 0.37333rem;
|
|
||||||
line-height: 0.65rem;
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-content {
|
|
||||||
line-height: .52rem;
|
|
||||||
font-size: .3rem;
|
|
||||||
color: #7f7f7f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-visible {
|
|
||||||
font-size: .32rem;
|
|
||||||
height: 1.04rem;
|
|
||||||
background: rgba(242, 242, 242, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-info {
|
|
||||||
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.user-info {
|
|
||||||
.icon-head {
|
|
||||||
width: .64rem;
|
|
||||||
height: .64rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-name {
|
|
||||||
font-size: .32rem;
|
|
||||||
color: #333;
|
|
||||||
margin-left: .2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-data {
|
|
||||||
|
|
||||||
font-size: .28rem;
|
|
||||||
|
|
||||||
.item-data-item {
|
|
||||||
|
|
||||||
&:last-of-type {
|
|
||||||
margin-left: .4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-look {
|
|
||||||
width: .4267rem;
|
|
||||||
height: .18rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-msg {
|
|
||||||
width: .32rem;
|
|
||||||
height: .28rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.paging {
|
|
||||||
// width: 6.44rem;
|
|
||||||
margin-top: .48rem;
|
|
||||||
|
|
||||||
::v-deep {
|
|
||||||
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
|
||||||
background: rgba(98, 177, 255, 1);
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-pagination .btn-next .el-icon,
|
|
||||||
.el-pagination .btn-prev .el-icon {
|
|
||||||
font-size: .4rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -120,9 +120,6 @@ export default {
|
|||||||
|
|
||||||
.search-input-input {
|
.search-input-input {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user