diff --git a/src/assets/css/public.scss b/src/assets/css/public.scss index 04183b9..8ad1ded 100755 --- a/src/assets/css/public.scss +++ b/src/assets/css/public.scss @@ -160,7 +160,8 @@ section { left: 0; transform: rotate(45deg); transform-origin: bottom; - margin-top: 0.01rem; + margin-top: 0.05rem; + // margin-top: 0.01rem; margin-left: 0.25rem; width: 0.9rem; font-size: 0.3rem; diff --git a/src/views/search/searchResult/SearchResult.vue b/src/views/search/searchResult/SearchResult.vue index f40530e..aa12a41 100755 --- a/src/views/search/searchResult/SearchResult.vue +++ b/src/views/search/searchResult/SearchResult.vue @@ -13,28 +13,30 @@ <!-- 结果数量 --> <div class="numberResults flexacenter">大约找到 <div class="number">{{ count }}</div> 条结果</div> + <el-loading-spinner></el-loading-spinner> <div class="result-box flexacenter"> <div class="result-item flexflex" v-for="(item, index) in list" :key="index"> <div class="result-header one-line"> - <div class="result-label">租房租房租房</div> + <div class="result-label">{{ item.forum }}</div> <div class="result-title">诚招室友一起合租香港大学附近房子 女生</div> </div> <div class="result-content two-lines"> - <template v-if="index != 0"> - {{ item.message }} - </template> + <!-- <template v-if="index != 0"> --> + {{ item.message }} + <!-- </template> --> - <div v-else class="reply-visible flexcenter"> + <!-- <div v-else class="reply-visible flexcenter"> 回复可见 - </div> + </div> --> </div> <div class="result-info flexacenter flex1"> <div class="user-info flexacenter"> - <svg-icon icon-class="test-head" class-name="icon-head"></svg-icon> + <img class="icon-head" :src="item.avatar"> + <!-- <svg-icon icon-class="test-head" class-name="icon-head"></svg-icon> --> <div class="user-name">{{ item.author }}</div> </div> <div class="item-data flexacenter"> @@ -51,7 +53,7 @@ <!-- 精华 --> - <div class="rightTop"> + <div class="rightTop" v-if="item.digest > 0"> <img class="rightTop-img" src="@/assets/img/icon/topRight .png"> <span>精华</span> </div> @@ -61,7 +63,8 @@ </div> <div class="paging flexcenter"> - <el-pagination small background layout="prev, pager, next" @current-change="currentXhange" :current-page.sync="page" :page-size="limit" :total="count"> + <el-pagination small background layout="prev, pager, next" @current-change="currentChange" + :current-page.sync="page" :page-size="limit" :total="count"> </el-pagination> </div> @@ -75,11 +78,12 @@ export default { return { kw: "", count: 0, - limit: 20, + limit: 4, nextpage: true, - page: 20, - list: [] - + page: 1, + list: [], + searchResultState: false, + loading: null } }, components: { @@ -103,10 +107,11 @@ export default { // 获取搜索结果数据 getSearchResult() { - this.page = this.page + 1 + this.startupUnderLoading() + if (this.searchResultState) return + this.searchResultState = true this.$http.post("/api/search", { keyword: this.kw, - // keyword: "helsinki", page: this.page, limit: this.limit }).then(res => { @@ -115,8 +120,32 @@ export default { this.list = data.data this.count = data.count + document.documentElement.scrollTop = 0; + document.body.scrollTop = 0; + this.searchResultState = false }) }, + + // 点击改变页数 + currentChange() { + console.log("dfgdf", this.page); + this.getSearchResult() + }, + + // 启动加载中 + startupUnderLoading() { + this.loading = this.$loading({ + lock: true, + text: '加载中...', + background: 'rgba(0, 0, 0, 0.7)' + }); + }, + + // 关闭加载中 + closeUnderLoading() { + this.loading.close(); + }, + }, } </script> @@ -241,6 +270,7 @@ export default { .icon-head { width: .64rem; height: .64rem; + border-radius: 50%; } .user-name {