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

a1300399510@qq.com 提交于 2023/03/31 -23:20:02

Browse Source
This commit is contained in:
XiaoMo 2023-03-31 23:20:11 +08:00
parent b4795856c5
commit a98b955b90
1 changed files with 267 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

267
src/views/search/searchResult/SearchResult_DESKTOP-6MA514B_3月-31-231138-2023_Conflict.vue Executable file
View File

@ -0,0 +1,267 @@
<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>