From 08e9a67dd679f311e79a27b04cd0c53a30b4bccf Mon Sep 17 00:00:00 2001
From: doum <doum>
Date: 星期四, 04 六月 2026 18:33:22 +0800
Subject: [PATCH] aaa
---
h5/components/search.vue | 742 +++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 538 insertions(+), 204 deletions(-)
diff --git a/h5/components/search.vue b/h5/components/search.vue
index 5d6613b..70a9ea2 100644
--- a/h5/components/search.vue
+++ b/h5/components/search.vue
@@ -1,57 +1,99 @@
<template>
- <view class="search" v-if="show" @click="close">
+ <view class="search_root">
+ <!-- 棣栭〉鎼滅储锛堜繚鐣欏師閫昏緫锛� -->
+ <view class="search search--legacy" v-if="show && status === 0" @click="close">
<view class="search_box" @click.stop="test">
- <view class="search_box_item" :style="{background: !search ? 'rgba(13, 30, 65, 0.70)' : search.bgType === 1 ? percentage(search.bgColor, search.bgAlpha) : 'rgba(13, 30, 65, 0.70)'}" v-if="status === 0">
+ <view class="search_box_item" :style="searchBarBgStyle">
<view class="icon">
<image src="@/static/ic_search@2x.png" mode="widthFix"></image>
</view>
<view class="search_box_item_right">
- <text v-if="name1">{{name1}}</text>
+ <text v-if="name1">{{ name1 }}</text>
<input type="text" class="search_box_item_right_ipt" :focus="focus" v-model="category" @input="inputCategory(name1 ? 2 : 1)" placeholder-class="placeholder" placeholder="鎼滅储" />
- </view>
- </view>
- <view class="search_box_item" :style="{background: !search ? 'rgba(13, 30, 65, 0.70)' : search.bgType === 1 ? percentage(search.bgColor, search.bgAlpha) : 'rgba(13, 30, 65, 0.70)'}" v-else>
- <view class="icon">
- <image src="@/static/ic_search@2x.png" mode="widthFix"></image>
- </view>
- <view class="search_box_item_right">
- <text>{{categoryName}}</text>
- <input type="text" focus v-model="category" @input="inputCategory(name1 ? 2 : 1)" placeholder-class="placeholder" placeholder="鎼滅储" />
</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>
+ <span :style="{ color: fontColorIndex === i ? fontColor : '' }">{{ item.name }}</span>
</view>
<span v-if="item.price">锟{ item.price }}</span>
</view>
</view>
-
- <!-- <view class="search_box_item" v-if="status == 0">
- <view class="icon">
- <image src="@/static/ic_search@2x.png" mode="widthFix"></image>
- </view>
- <input type="text" :focus="status === 0" v-model="category" @input="inputCategory" placeholder-class="placeholder" placeholder="鎼滅储" />
- </view>
- <view class="search_box_item">
- <view class="icon">
- <image src="@/static/ic_search@2x.png" mode="widthFix"></image>
- </view>
- <input type="text" :focus="status !== 0" v-model="name" @input="inputName" placeholder-class="placeholder" placeholder="鎼滅储" />
- </view>
- <view class="search_box_item_xl" v-if="searchData && searchData.length > 0">
- <view class="search_box_item_xl_item" v-for="(item, index) in searchData" :key="index">
- <view class="search_box_item_xl_item_name" @click="clickItem(item, index)">{{ item.name }}</view><span v-if="item.price">锟{ item.price }}</span>
- </view>
- </view> -->
</view>
+ </view>
+
+ <!-- PK / 鍟嗗搧鍒楄〃 閫夋嫨鍟嗗搧 -->
+ <view class="pk_search" v-if="show && status !== 0" @click="close">
+ <view class="pk_search_panel" @click.stop="test">
+ <view class="pk_search_head" :style="pkSearchHeadStyle">
+ <view class="pk_search_head_left">
+ <text class="pk_search_title">閫夋嫨鍟嗗搧</text>
+ <text class="pk_search_badge" v-if="pkSideText">{{ pkSideText }}</text>
+ </view>
+ <view class="pk_search_close" @click.stop="close">
+ <image src="@/static/ic_close@2x.png" mode="widthFix"></image>
+ </view>
+ </view>
+
+ <view class="pk_search_body">
+ <view class="pk_search_cat" v-if="categoryName">
+ <text class="pk_search_cat_label">鍝佺被</text>
+ <text class="pk_search_cat_name">{{ categoryName }}</text>
+ </view>
+
+ <view class="pk_search_bar" :style="searchBarBgStyle">
+ <image class="pk_search_bar_icon" src="@/static/ic_search@2x.png" mode="widthFix"></image>
+ <view class="pk_search_bar_divider"></view>
+ <input
+ type="text"
+ class="pk_search_bar_input"
+ :focus="focus"
+ v-model="category"
+ @input="inputCategory(1)"
+ placeholder-class="pk_search_placeholder"
+ placeholder="鎼滅储鍨嬪彿" />
+ </view>
+
+ <view class="pk_search_table_head" v-if="searchData.length">
+ <text class="col col_name">鍟嗗搧鍨嬪彿</text>
+ <text class="col col_price">鎸囧浠�</text>
+ </view>
+
+ <view class="pk_search_list" v-if="searchData.length">
+ <view
+ class="pk_search_item"
+ v-for="(item, i) in searchData"
+ :key="i"
+ :class="{ 'pk_search_item--active': index === i }"
+ @click="clickItem(item, i)"
+ @mouseenter="aaa(i)"
+ @mouseleave="bbb">
+ <text class="pk_search_item_name">{{ item.name }}</text>
+ <text class="pk_search_item_price" v-if="item.price">楼{{ item.price }}</text>
+ </view>
+ </view>
+
+ <view class="pk_search_empty" v-else>
+ <text>{{ category ? '鏈壘鍒板尮閰嶅晢鍝�' : '璇ュ搧绫讳笅鏆傛棤鍟嗗搧' }}</text>
+ </view>
+
+ <view class="pk_search_footer" v-if="searchData.length">
+ <text>鍏� {{ searchData.length }} 浠跺晢鍝�</text>
+ </view>
+ </view>
+ </view>
+ </view>
</view>
</template>
<script>
import { listForH5 } from '@/apis/index.js'
+ import { filterGoods } from '@/utils/goodsFilter.js'
+
+ const DEFAULT_THEME_BG = '#4A3728'
+ const DEFAULT_THEME_COLOR = '#FFFFFF'
+
export default {
data() {
return {
@@ -60,11 +102,10 @@
name: '',
show: false,
type: '',
- typeName: '', // left right
+ typeName: '',
searchData: [],
name1: '',
name2: '',
-
index: 0,
focus: true,
fontColorIndex: ''
@@ -73,39 +114,73 @@
props: {
categoryList: {
type: Array,
- default: []
+ default: () => []
},
shopList: {
type: Array,
- default: []
+ default: () => []
+ },
+ allGoods: {
+ type: Array,
+ default: () => []
},
status: {
type: Number
},
search: {
- type: Object | null
+ type: Object,
+ default: null
+ },
+ conMark: {
+ type: Object,
+ default: null
},
categoryName: {
- type: Number | String
+ type: [Number, String]
},
categoryid: {
- type: Number | String
+ type: [Number, String]
},
-
- fontColor:{
- type: Number | String
+ fontColor: {
+ type: [Number, String]
+ },
+ excludeGoodsId: {
+ type: [Number, String],
+ default: ''
+ }
+ },
+ computed: {
+ pkSideText() {
+ if (this.typeName === 'left') return 'PK 宸︿晶'
+ if (this.typeName === 'right') return 'PK 鍙充晶'
+ return ''
+ },
+ searchBarBgStyle() {
+ const s = this.search || {}
+ const defaultBg = 'rgba(255, 255, 255, 0.92)'
+ if (!s || Number(s.bgType) !== 1) {
+ return { background: defaultBg }
+ }
+ return {
+ background: this.percentage(s.bgColor || '#FFFFFF', s.bgAlpha || 100)
+ }
+ },
+ pkSearchHeadStyle() {
+ const theme = this.resolveThemeConfig()
+ return {
+ background: Number(theme.bgType) === 1 ? (theme.bgColor || DEFAULT_THEME_BG) : DEFAULT_THEME_BG,
+ color: Number(theme.colorType) === 1 ? (theme.color || DEFAULT_THEME_COLOR) : DEFAULT_THEME_COLOR
+ }
}
},
watch: {
- show: {
- handler(news, old) {
- if (news) {
- this.category = ''
- this.name = ''
- this.searchData = []
- this.name1 = ''
- this.name2 = ''
- }
+ show(val) {
+ if (val) {
+ this.category = ''
+ this.name = ''
+ this.searchData = []
+ this.name1 = ''
+ this.name2 = ''
}
}
},
@@ -117,38 +192,50 @@
this.fontColorIndex = ''
},
percentage(bgColor, alpha) {
- let res = +(alpha * 2.55).toFixed(0)
+ const res = +(alpha * 2.55).toFixed(0)
return bgColor + res.toString(16)
+ },
+ resolveThemeConfig() {
+ const cfg = this.conMark
+ if (!cfg) {
+ return { bgType: 0, bgColor: DEFAULT_THEME_BG, colorType: 0, color: DEFAULT_THEME_COLOR }
+ }
+ if (cfg.theme) return cfg.theme
+ const t = cfg.table || {}
+ const h = cfg.header || {}
+ return {
+ bgType: Number(t.headerBgType) === 1 ? 1 : (Number(h.bgType) === 1 ? 1 : 0),
+ bgColor: t.headerBg || h.bgColor || DEFAULT_THEME_BG,
+ colorType: Number(t.headerColorType) === 1 ? 1 : (Number(h.colorType) === 1 ? 1 : 0),
+ color: t.headerColor || h.color || DEFAULT_THEME_COLOR
+ }
},
confirm() {
if (this.type === 2) {
- console.log('type')
this.name = this.searchData[this.index].name
this.$emit('result', this.searchData[this.index])
this.show = false
this.index = 0
return
- } else if (this.categoryName) {
- console.log('categoryName')
- this.name = this.searchData[this.index].name
- this.$emit('result', this.searchData[this.index])
- this.show = false
- this.index = 0
- return
- } else {
- this.focus = false
- console.log('else')
- this.name1 = this.searchData[this.index].name
- this.category = ''
- this.categoryId = this.searchData[this.index].id
- this.searchData = [];
- this.$nextTick(() => {
- setTimeout(() =>{
- this.focus = true
- }, 500)
- })
- this.index = 0
}
+ if (this.categoryName) {
+ this.name = this.searchData[this.index].name
+ this.$emit('result', this.searchData[this.index])
+ this.show = false
+ this.index = 0
+ return
+ }
+ this.focus = false
+ this.name1 = this.searchData[this.index].name
+ this.category = ''
+ this.categoryId = this.searchData[this.index].id
+ this.searchData = []
+ this.$nextTick(() => {
+ setTimeout(() => {
+ this.focus = true
+ }, 500)
+ })
+ this.index = 0
},
changeTop() {
if (this.index === 0) return
@@ -159,12 +246,22 @@
this.index += 1
},
getShop(keyword) {
- listForH5({
- categoryId: this.categoryid || this.categoryId,
- keyword
- }).then(res => {
- this.searchData = res.data
- })
+ const categoryId = this.categoryid || this.categoryId
+ let list = []
+ if (this.allGoods && this.allGoods.length) {
+ list = filterGoods(this.allGoods, { categoryId, keyword })
+ } else {
+ listForH5({ categoryId, keyword }).then(res => {
+ this.searchData = this.filterExcludedGoods(res.data || [])
+ })
+ return
+ }
+ this.searchData = this.filterExcludedGoods(list)
+ },
+ filterExcludedGoods(list) {
+ const arr = Array.isArray(list) ? list : []
+ if (this.excludeGoodsId == null || this.excludeGoodsId === '') return arr
+ return arr.filter(item => String(item.id) !== String(this.excludeGoodsId))
},
inputName() {
if (this.status === 1 || this.status === 2) {
@@ -177,33 +274,31 @@
return item
}
})
- arr = arr.filter(Boolean);
- return arr;
- } else if (this.category && this.name) {
+ arr = arr.filter(Boolean)
+ return arr
+ }
+ 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);
+ 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;
+ arrOne = arrOne.filter(Boolean)
+ this.searchData = arrOne
} else {
- this.searchData = [];
+ this.searchData = []
}
},
inputCategory(type) {
- // this.name = ''
- // this.type = 1
if (this.status === 0) {
this.type = type
- // 鍝佺被鎼滅储
if (type === 1) {
if (!this.category) {
this.searchData = []
@@ -214,101 +309,72 @@
return item
}
})
- arr = arr.filter(Boolean);
- this.searchData = arr;
+ arr = arr.filter(Boolean)
+ this.searchData = arr
} else if (type === 2) {
if (!this.category) {
this.searchData = []
return
}
this.getShop(this.category)
- // let arr = this.shopList.map(item => {
- // if (item.categoryName == this.name1) {
- // return item
- // }
- // })
- // arr = arr.filter(Boolean);
- // let arrOne = arr.map(item => {
- // if (item.name.indexOf(this.category) != -1 || item.pinyin.indexOf(this.category) != -1 || item.shortPinyin.indexOf(this.category) != -1) {
- // return item
- // }
- // })
- // arrOne = arrOne.filter(Boolean);
- // this.searchData = arrOne;
} else {
this.searchData = []
}
} else {
- if (!this.category) {
- this.searchData = []
- return
- }
-
- this.getShop(this.category)
-
- // let arr = this.shopList.map(item => {
- // if (item.categoryName == this.categoryName) {
- // return item
- // }
- // })
- // arr = arr.filter(Boolean);
- // let arrOne = arr.map(item => {
- // if (item.name.indexOf(this.category) != -1 || item.pinyin.indexOf(this.category) != -1 || item.shortPinyin.indexOf(this.category) != -1) {
- // return item
- // }
- // })
- // arrOne = arrOne.filter(Boolean);
- // this.searchData = arrOne;
+ this.getShop(this.category || '')
}
-
-
- // if (this.category && !this.name) {
- // 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;
- // } else {
- // this.searchData = [];
- // }
- // console.log(this.searchData)
},
clickItem(item, index) {
if (this.type === 2) {
- console.log('type')
this.name = item.name
this.$emit('result', item)
this.show = false
this.index = 0
return
- } else if (this.categoryName) {
- console.log('categoryName')
- this.name = item.name
- this.$emit('result', item)
- this.show = false
- this.index = 0
- return
- } else {
- console.log('else')
- this.focus = false
- this.name1 = item.name
- this.category = ''
- this.categoryId = item.id
- // this.category = item.name
- this.searchData = [];
- this.$nextTick(() => {
- setTimeout(() => {
- this.focus = true
- }, 800)
- })
- this.index = 0
}
+ if (this.categoryName || this.status !== 0) {
+ this.name = item.name
+ this.$emit('result', item)
+ this.show = false
+ this.index = 0
+ return
+ }
+ this.focus = false
+ this.name1 = item.name
+ this.category = ''
+ this.categoryId = item.id
+ this.searchData = []
+ this.$nextTick(() => {
+ setTimeout(() => {
+ this.focus = true
+ }, 800)
+ })
+ this.index = 0
},
open(type) {
this.typeName = type
+ this.category = ''
+ this.name = ''
+ this.searchData = []
+ this.name1 = ''
+ this.name2 = ''
+ this.index = 0
this.show = true
+ this.focus = false
+ this.$nextTick(() => {
+ this.focus = true
+ if (this.status !== 0) {
+ this.loadCategoryGoods('')
+ }
+ })
+ },
+ loadCategoryGoods(keyword) {
+ const categoryId = this.categoryid || this.categoryId
+ if (!categoryId) {
+ this.searchData = []
+ return
+ }
+ this.getShop(keyword || '')
},
close() {
this.show = false
@@ -321,9 +387,285 @@
</script>
<style lang="scss" scoped>
- .search {
+ $brown: #4A3728;
+ $brown-dark: #3D2E22;
+ $cream: #E8DCC8;
+ $panel-bg: #F7F0E6;
+ $orange: #FF8C42;
+ $gold: #FFD88A;
+ $search-icon-filter: brightness(0) saturate(100%) invert(23%) sepia(14%) saturate(1067%) hue-rotate(349deg) brightness(95%) contrast(91%);
+
+ /* ===== 鏍瑰鍣� ===== */
+ .search_root {
+ display: contents;
+ }
+
+ /* ===== PK 閫夋嫨鍟嗗搧寮规 ===== */
+ .pk_search {
position: fixed;
- z-index: 4;
+ z-index: 1000;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 24px 16px;
+ box-sizing: border-box;
+ background: rgba(61, 46, 34, 0.48);
+ backdrop-filter: blur(4px);
+ }
+
+ .pk_search_panel {
+ width: 100%;
+ max-width: 640px;
+ max-height: min(78vh, 680px);
+ 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);
+ }
+
+ .pk_search_head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 18px;
+ flex-shrink: 0;
+ }
+
+ .pk_search_head_left {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ min-width: 0;
+ }
+
+ .pk_search_title {
+ font-size: 17px;
+ font-weight: 600;
+ line-height: 1.2;
+ }
+
+ .pk_search_badge {
+ padding: 3px 10px;
+ border-radius: 999px;
+ font-size: 11px;
+ font-weight: 600;
+ color: $brown;
+ background: $gold;
+ line-height: 1.3;
+ flex-shrink: 0;
+ }
+
+ .pk_search_close {
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.12);
+ cursor: pointer;
+ flex-shrink: 0;
+ transition: background 0.15s;
+
+ &:hover {
+ background: rgba(255, 255, 255, 0.22);
+ }
+
+ image {
+ width: 18px;
+ height: 18px;
+ opacity: 0.92;
+ }
+ }
+
+ .pk_search_body {
+ flex: 1;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
+ padding: 16px 16px 14px;
+ background: linear-gradient(180deg, #FFF9EC 0%, $panel-bg 100%);
+ }
+
+ .pk_search_cat {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 12px;
+ padding: 8px 12px;
+ border-radius: 10px;
+ background: rgba(255, 255, 255, 0.72);
+ border: 1px solid rgba(74, 55, 40, 0.08);
+ }
+
+ .pk_search_cat_label {
+ font-size: 12px;
+ color: rgba(74, 55, 40, 0.55);
+ flex-shrink: 0;
+ }
+
+ .pk_search_cat_name {
+ font-size: 14px;
+ font-weight: 600;
+ color: $brown;
+ line-height: 1.3;
+ }
+
+ .pk_search_bar {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 10px 14px;
+ margin-bottom: 12px;
+ border-radius: 24px;
+ box-shadow: 0 2px 10px rgba(74, 55, 40, 0.08);
+ border: 1px solid rgba(74, 55, 40, 0.08);
+ flex-shrink: 0;
+ }
+
+ .pk_search_bar_icon {
+ width: 15px;
+ height: 15px;
+ flex-shrink: 0;
+ filter: $search-icon-filter;
+ }
+
+ .pk_search_bar_divider {
+ width: 1px;
+ height: 16px;
+ background: rgba(74, 55, 40, 0.15);
+ flex-shrink: 0;
+ }
+
+ .pk_search_bar_input {
+ flex: 1;
+ min-width: 0;
+ height: 24px;
+ font-size: 14px;
+ color: $brown;
+ background: transparent;
+ border: none;
+ outline: none;
+ }
+
+ .pk_search_placeholder {
+ color: rgba(74, 55, 40, 0.38);
+ font-size: 14px;
+ }
+
+ .pk_search_table_head {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ gap: 12px;
+ padding: 8px 14px;
+ margin-bottom: 6px;
+ border-radius: 10px;
+ background: rgba(74, 55, 40, 0.08);
+ flex-shrink: 0;
+
+ .col {
+ font-size: 12px;
+ font-weight: 600;
+ color: $brown;
+ opacity: 0.85;
+ }
+
+ .col_price {
+ text-align: right;
+ min-width: 72px;
+ }
+ }
+
+ .pk_search_list {
+ flex: 1;
+ min-height: 0;
+ max-height: 320px;
+ overflow-y: auto;
+ border-radius: 12px;
+ background: #fff;
+ border: 1px solid rgba(74, 55, 40, 0.08);
+ box-shadow: 0 6px 18px rgba(74, 55, 40, 0.08);
+
+ &::-webkit-scrollbar {
+ width: 5px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: rgba(74, 55, 40, 0.28);
+ border-radius: 999px;
+ }
+ }
+
+ .pk_search_item {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ gap: 12px;
+ align-items: center;
+ padding: 12px 14px;
+ cursor: pointer;
+ border-bottom: 1px solid rgba(74, 55, 40, 0.06);
+ transition: background 0.12s;
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ &:hover,
+ &--active {
+ background: rgba(255, 216, 138, 0.22);
+ }
+ }
+
+ .pk_search_item_name {
+ font-size: 14px;
+ color: $brown;
+ line-height: 1.35;
+ word-break: break-all;
+ }
+
+ .pk_search_item_price {
+ font-size: 13px;
+ font-weight: 600;
+ color: $orange;
+ min-width: 72px;
+ text-align: right;
+ flex-shrink: 0;
+ }
+
+ .pk_search_empty {
+ flex: 1;
+ min-height: 180px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 12px;
+ background: rgba(255, 255, 255, 0.72);
+ border: 1px dashed rgba(74, 55, 40, 0.14);
+
+ text {
+ font-size: 14px;
+ color: rgba(74, 55, 40, 0.45);
+ }
+ }
+
+ .pk_search_footer {
+ margin-top: 10px;
+ text-align: center;
+ flex-shrink: 0;
+
+ text {
+ font-size: 12px;
+ color: rgba(74, 55, 40, 0.5);
+ }
+ }
+
+ /* ===== 棣栭〉 legacy 鎼滅储 ===== */
+ .search--legacy {
+ position: fixed;
+ z-index: 1000;
top: 0;
left: 0;
width: 100vw;
@@ -331,50 +673,45 @@
display: flex;
align-items: center;
justify-content: center;
+
.search_box {
width: 660px;
height: auto;
display: flex;
flex-direction: column;
+
.search_box_item_xl::-webkit-scrollbar {
- width: 6px;
- background: rgba(255,255,255,0.5);
- border-radius: 4px;
+ width: 5px;
+ background: rgba(232, 220, 200, 0.35);
+ border-radius: 999px;
}
+
.search_box_item_xl::-webkit-scrollbar-thumb {
- box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
- background: rgba(255,255,255,0.8);
+ background: linear-gradient(180deg, rgba(74, 55, 40, 0.42) 0%, rgba(74, 55, 40, 0.28) 100%);
+ 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);
+ background: rgba(5, 35, 102, 0.7);
border-radius: 8px;
- // display: flex;
- // flex-direction: column;
+
.search_box_item_xl_item {
width: 100%;
height: 40px;
- // line-height: 52px;
- // font-size: 28px;
- // font-family: PingFangSC-Regular, PingFang SC;
- // font-weight: 400;
- // color: #FFFFFF;
padding: 0 24px;
cursor: pointer;
box-sizing: border-box;
display: flex;
align-items: center;
- // &:hover {
- // span {
- // color: #FFF200;
- // }
- // }
- .active {
+
+ .active {
color: #FFF200 !important;
- }
+ }
+
.search_box_item_xl_item_name {
flex: 1;
height: 100%;
@@ -384,75 +721,72 @@
white-space: nowrap;
text-overflow: ellipsis;
font-size: 16px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
color: #FFFFFF;
- // &:hover {
- // color: #FFF200;
- // }
}
+
span {
flex-shrink: 0;
font-size: 16px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
color: #FFFFFF;
margin-left: 10px;
}
}
}
+
.search_box_item {
width: 100%;
height: 72px;
- background: rgba(5,35,102,0.7);
+ background: rgba(5, 35, 102, 0.7);
border-radius: 32px;
display: flex;
align-items: center;
padding: 0 30px;
box-sizing: border-box;
margin-bottom: 16px;
- &:last-child {
- margin-bottom: 0 !important;
- }
+
.search_box_item_right {
display: flex;
align-items: center;
+ flex: 1;
+ min-width: 0;
+
text {
flex-shrink: 0;
font-size: 16px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
color: #FFFFFF;
margin-right: 10px;
}
- input {
+
+ input,
+ .search_box_item_right_ipt {
flex: 1;
+ min-width: 0;
height: 100%;
font-size: 16px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
color: #FFFFFF;
+ background: transparent;
+ border: none;
+ outline: none;
}
}
+
.icon {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-right: 18px;
+
image {
width: 100%;
height: 100%;
}
}
+
.placeholder {
- height: 62px;
- line-height: 62px;
+ color: rgba(255, 255, 255, 0.5);
font-size: 16px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: rgba(255,255,255,0.5);
}
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3