+
- {{ $L(loadIng > 0 ? '正在拼命搜索...' : '请输入关键字搜索') }}
+ {{ $L((loadIng + loadPre) > 0 ? '正在拼命搜索...' : '请输入关键字搜索') }}
@@ -96,7 +96,9 @@ export default {
data() {
return {
+ loadPre: 0,
loadIng: 0,
+
searchKey: '',
searchResults: [],
searchTimer: null,
@@ -156,7 +158,7 @@ export default {
return groups
},
- listLength({searchKey, searchResults, action}) {
+ total({searchKey, searchResults, action}) {
const items = searchResults.filter(item => item.key === searchKey && (!action || item.type === action))
return items.length
},
@@ -275,15 +277,15 @@ export default {
if (this.searchTimer) {
clearTimeout(this.searchTimer)
this.searchTimer = null;
- this.loadIng--;
+ this.loadPre--;
}
- this.loadIng++;
+ this.loadPre++;
this.searchTimer = setTimeout(() => {
if (this.searchKey.trim()) {
this.onSearch()
}
this.searchTimer = null;
- this.loadIng--;
+ this.loadPre--;
}, 500)
},
diff --git a/resources/assets/sass/components/search-box.scss b/resources/assets/sass/components/search-box.scss
index 32de14184..7994ba668 100755
--- a/resources/assets/sass/components/search-box.scss
+++ b/resources/assets/sass/components/search-box.scss
@@ -105,34 +105,41 @@
.search-tags {
flex-shrink: 0;
display: flex;
- gap: 12px;
+ gap: 16px;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
- padding: 16px 20px 0;
+ padding: 14px 20px 0;
&::-webkit-scrollbar {
display: none;
}
+ @media (max-width: 768px) {
+ gap: 12px;
+ }
+
+ @media (max-width: 576px) {
+ gap: 8px;
+ }
+
.tag-item {
flex-shrink: 0;
border: 1px solid #e4e4e4;
- border-radius: 8px;
+ border-radius: 18px;
padding: 4px 12px;
line-height: 24px;
display: flex;
align-items: center;
justify-content: center;
- gap: 8px;
+ gap: 6px;
cursor: pointer;
transition: all 0.2s ease;
.tag-close {
- font-size: 13px;
- margin-left: -3px;
- margin-right: -5px;
+ margin-left: -1px;
+ margin-right: -3px;
}
&.action {
@@ -149,7 +156,7 @@
align-items: center;
justify-content: center;
flex-direction: column;
- padding: 16px 24px 48px;
+ padding: 14px 24px 48px;
> i {
font-size: 44px;
@@ -173,11 +180,11 @@
.search-list {
overflow: auto;
- max-height: calc(100vh - 306px);
+ max-height: calc(100vh - 305px);
overscroll-behavior: contain;
@media (max-height: 900px) {
- max-height: calc(100vh - 176px);
+ max-height: calc(100vh - 175px);
}
> ul {