From cf2da3b2a63840888815c6a81cbd7948faf93533 Mon Sep 17 00:00:00 2001
From: doum <doum>
Date: 星期一, 08 六月 2026 17:41:15 +0800
Subject: [PATCH] aaa
---
h5/components/search.vue | 198 +++++++++++++++++++++++++++++-------------------
1 files changed, 119 insertions(+), 79 deletions(-)
diff --git a/h5/components/search.vue b/h5/components/search.vue
index 70a9ea2..22e28d8 100644
--- a/h5/components/search.vue
+++ b/h5/components/search.vue
@@ -13,11 +13,17 @@
</view>
</view>
<view class="search_box_item_xl" v-if="searchData && searchData.length > 0">
- <view class="search_box_item_xl_item" v-for="(item, i) in searchData" :key="i">
- <view :class="index === i ? 'search_box_item_xl_item_name active' : 'search_box_item_xl_item_name'" @click="clickItem(item, i)" @mouseenter="aaa(i)" @mouseleave="bbb">
- <span :style="{ color: fontColorIndex === i ? fontColor : '' }">{{ item.name }}</span>
+ <view class="search_box_item_xl_head">
+ <text class="search_box_item_xl_head_label">鎼滅储缁撴灉</text>
+ <text class="search_box_item_xl_head_count">{{ searchData.length }} 鏉�</text>
+ </view>
+ <view class="search_box_item_xl_body">
+ <view class="search_box_item_xl_item" v-for="(item, i) in searchData" :key="i">
+ <view :class="index === i ? 'search_box_item_xl_item_name active' : 'search_box_item_xl_item_name'" @click="clickItem(item, i)" @mouseenter="aaa(i)" @mouseleave="bbb">
+ <span :style="{ color: fontColorIndex === i ? fontColor : '' }">{{ item.name }}</span>
+ </view>
+ <span class="search_box_item_xl_price" v-if="item.price">锟{ item.price }}</span>
</view>
- <span v-if="item.price">锟{ item.price }}</span>
</view>
</view>
</view>
@@ -89,7 +95,7 @@
<script>
import { listForH5 } from '@/apis/index.js'
- import { filterGoods } from '@/utils/goodsFilter.js'
+ import { filterGoods, matchKeyword } from '@/utils/goodsFilter.js'
const DEFAULT_THEME_BG = '#4A3728'
const DEFAULT_THEME_COLOR = '#FFFFFF'
@@ -269,29 +275,13 @@
}
if (!this.category && this.name) {
this.type = 1
- let arr = this.shopList.map(item => {
- if (item.name.indexOf(this.name) != -1 || item.pinyin.indexOf(this.name) != -1 || item.shortPinyin.indexOf(this.name) != -1) {
- return item
- }
- })
- arr = arr.filter(Boolean)
- return arr
+ this.searchData = this.shopList.filter(item => matchKeyword(item, this.name))
+ return this.searchData
}
if (this.category && this.name) {
this.type = 2
- let arr = this.shopList.map(item => {
- if (item.categoryName == this.category) {
- return item
- }
- })
- arr = arr.filter(Boolean)
- let arrOne = arr.map(item => {
- if (item.name.indexOf(this.name) != -1 || item.pinyin.indexOf(this.name) != -1 || item.shortPinyin.indexOf(this.name) != -1) {
- return item
- }
- })
- arrOne = arrOne.filter(Boolean)
- this.searchData = arrOne
+ const arr = this.shopList.filter(item => item.categoryName == this.category)
+ this.searchData = arr.filter(item => matchKeyword(item, this.name))
} else {
this.searchData = []
}
@@ -304,13 +294,7 @@
this.searchData = []
return
}
- let arr = this.categoryList.map(item => {
- if (item.name.indexOf(this.category) != -1 || item.pinyin.indexOf(this.category) != -1 || item.shortPinyin.indexOf(this.category) != -1) {
- return item
- }
- })
- arr = arr.filter(Boolean)
- this.searchData = arr
+ this.searchData = this.categoryList.filter(item => matchKeyword(item, this.category))
} else if (type === 2) {
if (!this.category) {
this.searchData = []
@@ -673,76 +657,129 @@
display: flex;
align-items: center;
justify-content: center;
+ background: rgba(61, 46, 34, 0.48);
+ backdrop-filter: blur(4px);
+ padding: 24px 16px;
+ box-sizing: border-box;
.search_box {
- width: 660px;
+ width: 100%;
+ max-width: 660px;
height: auto;
display: flex;
flex-direction: column;
+ border-radius: 18px;
+ overflow: hidden;
+ box-shadow: 0 20px 48px rgba(61, 46, 34, 0.28);
+ border: 1px solid rgba(255, 255, 255, 0.12);
.search_box_item_xl::-webkit-scrollbar {
width: 5px;
- background: rgba(232, 220, 200, 0.35);
- border-radius: 999px;
}
.search_box_item_xl::-webkit-scrollbar-thumb {
- background: linear-gradient(180deg, rgba(74, 55, 40, 0.42) 0%, rgba(74, 55, 40, 0.28) 100%);
+ background: rgba(74, 55, 40, 0.28);
border-radius: 999px;
}
.search_box_item_xl {
width: 100%;
- max-height: 60px;
- min-height: 240px;
- overflow-y: scroll;
- background: rgba(5, 35, 102, 0.7);
- border-radius: 8px;
+ max-height: min(52vh, 360px);
+ display: flex;
+ flex-direction: column;
+ background: linear-gradient(180deg, #FFFBF5 0%, $panel-bg 100%);
+ border-radius: 0 0 18px 18px;
+ overflow: hidden;
+ }
- .search_box_item_xl_item {
- width: 100%;
- height: 40px;
- padding: 0 24px;
- cursor: pointer;
- box-sizing: border-box;
+ .search_box_item_xl_head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 18px;
+ background: $brown;
+ color: #fff;
+ flex-shrink: 0;
+ }
+
+ .search_box_item_xl_head_label {
+ font-size: 12px;
+ font-weight: 600;
+ letter-spacing: 0.5px;
+ }
+
+ .search_box_item_xl_head_count {
+ font-size: 11px;
+ padding: 2px 8px;
+ border-radius: 999px;
+ background: rgba(255, 216, 138, 0.22);
+ color: $gold;
+ font-weight: 600;
+ }
+
+ .search_box_item_xl_body {
+ flex: 1;
+ min-height: 0;
+ overflow-y: auto;
+ }
+
+ .search_box_item_xl_item {
+ width: 100%;
+ min-height: 44px;
+ padding: 0 18px;
+ cursor: pointer;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ border-bottom: 1px solid rgba(74, 55, 40, 0.06);
+ transition: background 0.12s;
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ &:hover {
+ background: rgba(255, 216, 138, 0.22);
+ }
+
+ .active {
+ color: $orange !important;
+ font-weight: 600;
+ }
+
+ .search_box_item_xl_item_name {
+ flex: 1;
+ min-width: 0;
+ height: 100%;
display: flex;
align-items: center;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ font-size: 14px;
+ color: $brown;
+ }
- .active {
- color: #FFF200 !important;
- }
-
- .search_box_item_xl_item_name {
- flex: 1;
- height: 100%;
- display: flex;
- align-items: center;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- font-size: 16px;
- color: #FFFFFF;
- }
-
- span {
- flex-shrink: 0;
- font-size: 16px;
- color: #FFFFFF;
- margin-left: 10px;
- }
+ .search_box_item_xl_price {
+ flex-shrink: 0;
+ font-size: 13px;
+ font-weight: 600;
+ color: $orange;
}
}
.search_box_item {
width: 100%;
height: 72px;
- background: rgba(5, 35, 102, 0.7);
- border-radius: 32px;
+ background: $brown;
+ border-radius: 0;
display: flex;
align-items: center;
- padding: 0 30px;
+ padding: 0 24px;
box-sizing: border-box;
- margin-bottom: 16px;
+ margin-bottom: 0;
+ flex-shrink: 0;
.search_box_item_right {
display: flex;
@@ -752,9 +789,10 @@
text {
flex-shrink: 0;
- font-size: 16px;
- color: #FFFFFF;
+ font-size: 15px;
+ color: $gold;
margin-right: 10px;
+ font-weight: 500;
}
input,
@@ -762,7 +800,7 @@
flex: 1;
min-width: 0;
height: 100%;
- font-size: 16px;
+ font-size: 15px;
color: #FFFFFF;
background: transparent;
border: none;
@@ -774,7 +812,9 @@
width: 20px;
height: 20px;
flex-shrink: 0;
- margin-right: 18px;
+ margin-right: 14px;
+ filter: brightness(0) invert(1);
+ opacity: 0.9;
image {
width: 100%;
@@ -783,8 +823,8 @@
}
.placeholder {
- color: rgba(255, 255, 255, 0.5);
- font-size: 16px;
+ color: rgba(255, 255, 255, 0.45);
+ font-size: 15px;
}
}
}
--
Gitblit v1.9.3