929 lines
21 KiB
Vue
929 lines
21 KiB
Vue
<template>
|
||
<view class="explain-list">
|
||
<!-- 顶部筛选器 -->
|
||
<view class="explain-header">
|
||
<!-- 搜索栏触发按钮 -->
|
||
<view class="search-bar-trigger" @tap="handleOpenSearch">
|
||
<view class="search-input-wrapper">
|
||
<svg class="search-icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
<circle cx="8.5" cy="8.5" r="5.5" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M12.5 12.5L17 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
<text class="search-placeholder">{{ searchKeyword || '搜索展品、展厅、设施...' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 筛选按钮 -->
|
||
<view class="filter-buttons">
|
||
<view
|
||
class="filter-btn"
|
||
:class="{ active: activeFilter === 'hall' }"
|
||
@tap="handleFilterChange('hall')"
|
||
>
|
||
<text class="filter-text">按展厅</text>
|
||
</view>
|
||
<view
|
||
class="filter-btn"
|
||
:class="{ active: activeFilter === 'theme' }"
|
||
@tap="handleFilterChange('theme')"
|
||
>
|
||
<text class="filter-text">按主题</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 抽屉遮罩层 -->
|
||
<view
|
||
v-if="drawerVisible && !searchPanelOpen"
|
||
class="drawer-overlay"
|
||
@tap="handleCloseDrawer"
|
||
></view>
|
||
|
||
<!-- 底部可拖拽抽屉 -->
|
||
<view
|
||
class="drawer-container"
|
||
:class="{
|
||
'search-mode': searchPanelOpen,
|
||
'drawer-visible': drawerVisible,
|
||
'drawer-collapsed': !drawerVisible && !searchPanelOpen
|
||
}"
|
||
:style="drawerStyle"
|
||
@touchstart="handleTouchStart"
|
||
@touchmove="handleTouchMove"
|
||
@touchend="handleTouchEnd"
|
||
>
|
||
<!-- 抽屉把手 -->
|
||
<view class="drawer-handle" @tap="handleToggleDrawer">
|
||
<view class="handle-bar"></view>
|
||
</view>
|
||
|
||
<!-- 抽屉内容 -->
|
||
<scroll-view
|
||
class="drawer-content"
|
||
:scroll-y="true"
|
||
:scroll-top="searchScrollTop"
|
||
:show-scrollbar="false"
|
||
>
|
||
<!-- 搜索模式内容 -->
|
||
<view v-if="searchPanelOpen" class="search-content">
|
||
<!-- 搜索框 -->
|
||
<view class="search-box">
|
||
<svg class="search-box-icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
<circle cx="8.5" cy="8.5" r="5.5" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M12.5 12.5L17 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
<input
|
||
class="search-box-input"
|
||
type="text"
|
||
placeholder="搜索展品、展厅、设施..."
|
||
v-model="searchInputValue"
|
||
@input="handleSearchInput"
|
||
@confirm="handleSearchConfirm"
|
||
/>
|
||
<view v-if="searchInputValue" class="clear-btn" @tap="handleClearSearch">
|
||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||
<circle cx="7" cy="7" r="6" fill="#999"/>
|
||
<path d="M4.5 4.5L9.5 9.5M9.5 4.5L4.5 9.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 搜索结果 -->
|
||
<view v-if="searchInputValue" class="results-section">
|
||
<view v-if="searchResults.length" class="results-list">
|
||
<view
|
||
v-for="item in searchResults"
|
||
:key="item.id"
|
||
class="result-item"
|
||
@tap="handleResultClick(item)"
|
||
>
|
||
<view class="result-icon" :class="item.type">
|
||
<text>{{ getResultIcon(item.type) }}</text>
|
||
</view>
|
||
<view class="result-info">
|
||
<text class="result-name">{{ item.name }}</text>
|
||
<text class="result-desc">{{ item.desc }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else class="no-results">
|
||
<text>未找到 "{{ searchInputValue }}" 相关结果</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 热门搜索 (无关键词时显示) -->
|
||
<view v-if="!searchInputValue" class="hot-section">
|
||
<view class="section-header">
|
||
<text class="section-title">热门搜索</text>
|
||
</view>
|
||
<view class="hot-tags">
|
||
<view
|
||
v-for="tag in hotSearches"
|
||
:key="tag"
|
||
class="hot-tag"
|
||
@tap="handleHotTagClick(tag)"
|
||
>
|
||
<text class="hot-tag-text">{{ tag }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 搜索历史 (无关键词时显示) -->
|
||
<view v-if="!searchInputValue && searchHistory.length" class="history-section">
|
||
<view class="section-header">
|
||
<text class="section-title">搜索历史</text>
|
||
<text class="clear-history" @tap="handleClearHistory">清除</text>
|
||
</view>
|
||
<view class="history-list">
|
||
<view
|
||
v-for="(item, index) in searchHistory"
|
||
:key="index"
|
||
class="history-item"
|
||
@tap="handleHistoryClick(item)"
|
||
>
|
||
<text class="history-text">{{ item }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 关闭搜索按钮 -->
|
||
<view class="close-search" @tap="handleCloseSearch">
|
||
<text>关闭</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 正常模式内容 - 展品列表 -->
|
||
<view v-else class="exhibits-list">
|
||
<view
|
||
v-for="exhibit in filteredExhibits"
|
||
:key="exhibit.id"
|
||
class="exhibit-card"
|
||
@tap="handleExhibitClick(exhibit)"
|
||
>
|
||
<!-- 左侧展品图片 -->
|
||
<view class="exhibit-image">
|
||
<image
|
||
v-if="exhibit.image"
|
||
class="image"
|
||
:src="exhibit.image"
|
||
mode="aspectFill"
|
||
/>
|
||
<view v-else class="image-placeholder">
|
||
<svg class="placeholder-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||
<rect x="3" y="3" width="18" height="18" rx="3" stroke="currentColor" stroke-width="1.5"/>
|
||
<circle cx="8.5" cy="8.5" r="2" fill="currentColor"/>
|
||
<path d="M3 16L7 12L10 15L14 11L21 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 中间展品信息 -->
|
||
<view class="exhibit-info">
|
||
<text class="exhibit-name">{{ exhibit.name }}</text>
|
||
<text class="exhibit-floor">{{ exhibit.hall || exhibit.floor }}</text>
|
||
</view>
|
||
|
||
<!-- 右侧音频指示器 -->
|
||
<view v-if="exhibit.hasAudio" class="audio-indicator" @tap.stop="handleAudioClick(exhibit)">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||
<path d="M12 3C12 3 14 5 14 9C14 13 12 15 12 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
<path d="M12 15C12 15 14 17 14 21C14 21 10 21 10 21C10 21 10 17 12 15Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M8 9C6.5 9 5 10.5 5 12C5 13.5 6.5 15 8 15C9 15 9.5 14.5 9.5 14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
<path d="M16 7C13.5 7 11.5 9 11.5 11.5C11.5 14 13.5 16 16 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部加载完毕提示 -->
|
||
<view class="loading-end">
|
||
<text class="end-text">— 已加载全部 —</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed } from 'vue'
|
||
import type {
|
||
ExplainExhibitViewModel
|
||
} from '@/view-models/explainViewModels'
|
||
|
||
export interface Exhibit extends ExplainExhibitViewModel {
|
||
audioUrl?: string
|
||
}
|
||
|
||
interface SearchResult {
|
||
id: string
|
||
name: string
|
||
desc: string
|
||
type: 'exhibit' | 'hall' | 'facility'
|
||
}
|
||
|
||
const props = withDefaults(defineProps<{
|
||
exhibits?: Exhibit[]
|
||
hotSearches?: string[]
|
||
initialSearchHistory?: string[]
|
||
}>(), {
|
||
exhibits: () => [],
|
||
hotSearches: () => ['恐龙化石', '银杏', '海洋生物', '霸王龙', '古植物', '矿石标本', '恐龙', '化石'],
|
||
initialSearchHistory: () => ['霸王龙', '化石', '恐龙']
|
||
})
|
||
|
||
const emit = defineEmits<{
|
||
exhibitClick: [exhibit: Exhibit]
|
||
audioClick: [exhibit: Exhibit]
|
||
filterChange: [filter: 'hall' | 'theme']
|
||
search: [keyword: string]
|
||
}>()
|
||
|
||
// 状态
|
||
const searchKeyword = ref('')
|
||
const searchPanelOpen = ref(false)
|
||
const searchInputValue = ref('')
|
||
const searchScrollTop = ref(0)
|
||
const activeFilter = ref<'hall' | 'theme'>('hall') // 默认选中"按展厅"
|
||
const drawerVisible = ref(false) // 抽屉默认收起
|
||
const drawerOffset = ref(0)
|
||
|
||
// 抽屉拖拽样式 - 将 drawerOffset 绑定到 transform
|
||
const drawerStyle = computed(() => {
|
||
if (!drawerVisible.value && !searchPanelOpen.value) {
|
||
return {} // 收起状态不需要 transform
|
||
}
|
||
return {
|
||
transform: `translateY(${drawerOffset.value}px)`
|
||
}
|
||
})
|
||
|
||
// 抽屉拖拽相关
|
||
const DRAWER_MIN_OFFSET = 0
|
||
const DRAWER_MAX_OFFSET = 200
|
||
const DRAWER_SNAP_THRESHOLD = 100
|
||
let touchStartY = 0
|
||
let touchCurrentY = 0
|
||
|
||
// 热门搜索
|
||
const hotSearches = computed(() => props.hotSearches)
|
||
|
||
// 搜索历史
|
||
const searchHistory = ref<string[]>([...props.initialSearchHistory])
|
||
|
||
// 搜索数据
|
||
const allData = computed<SearchResult[]>(() => props.exhibits.map((exhibit) => ({
|
||
id: exhibit.id,
|
||
name: exhibit.name,
|
||
desc: exhibit.hall || exhibit.floor || '展项内容',
|
||
type: 'exhibit'
|
||
})))
|
||
|
||
// 搜索结果计算
|
||
const searchResults = computed(() => {
|
||
if (!searchInputValue.value.trim()) return []
|
||
const kw = searchInputValue.value.toLowerCase()
|
||
return allData.value.filter(item =>
|
||
item.name.toLowerCase().includes(kw) ||
|
||
item.desc.toLowerCase().includes(kw)
|
||
)
|
||
})
|
||
|
||
// 展品列表
|
||
const exhibits = computed(() => props.exhibits)
|
||
|
||
// 过滤展品
|
||
const filteredExhibits = computed(() => {
|
||
if (!searchKeyword.value.trim()) {
|
||
return exhibits.value
|
||
}
|
||
const keyword = searchKeyword.value.toLowerCase()
|
||
return exhibits.value.filter(exhibit =>
|
||
exhibit.name.toLowerCase().includes(keyword) ||
|
||
(exhibit.hall && exhibit.hall.toLowerCase().includes(keyword))
|
||
)
|
||
})
|
||
|
||
// 事件处理
|
||
const handleExhibitClick = (exhibit: Exhibit) => {
|
||
emit('exhibitClick', exhibit)
|
||
}
|
||
|
||
const handleAudioClick = (exhibit: Exhibit) => {
|
||
emit('audioClick', exhibit)
|
||
}
|
||
|
||
// 搜索相关方法
|
||
const handleOpenSearch = () => {
|
||
searchPanelOpen.value = true
|
||
searchScrollTop.value = 0
|
||
}
|
||
|
||
const handleCloseSearch = () => {
|
||
searchPanelOpen.value = false
|
||
searchInputValue.value = ''
|
||
}
|
||
|
||
const handleSearchInput = () => {
|
||
// 实时搜索
|
||
}
|
||
|
||
const handleSearchConfirm = () => {
|
||
if (searchInputValue.value.trim()) {
|
||
addToHistory(searchInputValue.value)
|
||
searchKeyword.value = searchInputValue.value
|
||
emit('search', searchInputValue.value)
|
||
}
|
||
}
|
||
|
||
const handleClearSearch = () => {
|
||
searchInputValue.value = ''
|
||
}
|
||
|
||
const handleHotTagClick = (tag: string) => {
|
||
searchInputValue.value = tag
|
||
handleSearchConfirm()
|
||
}
|
||
|
||
const handleHistoryClick = (history: string) => {
|
||
searchInputValue.value = history
|
||
handleSearchConfirm()
|
||
}
|
||
|
||
const handleClearHistory = () => {
|
||
searchHistory.value = []
|
||
}
|
||
|
||
const handleResultClick = (item: SearchResult) => {
|
||
if (item.type === 'exhibit') {
|
||
const exhibit = exhibits.value.find(e => e.id === item.id)
|
||
if (exhibit) {
|
||
emit('exhibitClick', exhibit)
|
||
}
|
||
}
|
||
searchPanelOpen.value = false
|
||
searchInputValue.value = ''
|
||
}
|
||
|
||
const addToHistory = (keyword: string) => {
|
||
if (!searchHistory.value.includes(keyword)) {
|
||
searchHistory.value.unshift(keyword)
|
||
if (searchHistory.value.length > 10) {
|
||
searchHistory.value.pop()
|
||
}
|
||
}
|
||
}
|
||
|
||
const getResultIcon = (type: string): string => {
|
||
const icons: Record<string, string> = {
|
||
exhibit: '🖼️',
|
||
hall: '🏛️',
|
||
facility: '📍'
|
||
}
|
||
return icons[type] || '📍'
|
||
}
|
||
|
||
const handleFilterChange = (filter: 'hall' | 'theme') => {
|
||
if (activeFilter.value === filter && drawerVisible.value) {
|
||
// 再次点击同一筛选项，收起抽屉
|
||
handleCloseDrawer()
|
||
} else {
|
||
// 切换筛选项或展开抽屉
|
||
activeFilter.value = filter
|
||
drawerVisible.value = true
|
||
drawerOffset.value = 0
|
||
emit('filterChange', filter)
|
||
}
|
||
}
|
||
|
||
// 收起抽屉
|
||
const handleCloseDrawer = () => {
|
||
drawerVisible.value = false
|
||
drawerOffset.value = 0
|
||
}
|
||
|
||
// 切换抽屉展开/收起
|
||
const handleToggleDrawer = () => {
|
||
if (drawerVisible.value) {
|
||
handleCloseDrawer()
|
||
} else {
|
||
drawerVisible.value = true
|
||
drawerOffset.value = 0
|
||
emit('filterChange', activeFilter.value)
|
||
}
|
||
}
|
||
|
||
// 抽屉拖拽处理
|
||
const handleTouchStart = (e: TouchEvent) => {
|
||
// 搜索模式下或收起状态禁用抽屉拖拽
|
||
if (searchPanelOpen.value || !drawerVisible.value) return
|
||
touchStartY = e.touches[0].clientY
|
||
touchCurrentY = touchStartY
|
||
}
|
||
|
||
const handleTouchMove = (e: TouchEvent) => {
|
||
// 搜索模式下或收起状态禁用抽屉拖拽
|
||
if (searchPanelOpen.value || !drawerVisible.value) return
|
||
touchCurrentY = e.touches[0].clientY
|
||
const deltaY = touchCurrentY - touchStartY
|
||
|
||
let newOffset = drawerOffset.value + deltaY
|
||
newOffset = Math.max(DRAWER_MIN_OFFSET, Math.min(DRAWER_MAX_OFFSET, newOffset))
|
||
|
||
drawerOffset.value = newOffset
|
||
touchStartY = touchCurrentY
|
||
}
|
||
|
||
const handleTouchEnd = () => {
|
||
// 搜索模式下或收起状态禁用抽屉拖拽
|
||
if (searchPanelOpen.value || !drawerVisible.value) return
|
||
|
||
if (drawerOffset.value < DRAWER_SNAP_THRESHOLD) {
|
||
drawerOffset.value = DRAWER_MIN_OFFSET
|
||
} else {
|
||
// 向下拖拽超过阈值，收起抽屉
|
||
handleCloseDrawer()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.explain-list {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
background: transparent;
|
||
// 非交互区域不透光穿透，让触摸事件落到地图上
|
||
pointer-events: none;
|
||
}
|
||
|
||
.explain-header {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 56px 16px 12px;
|
||
background-color: transparent;
|
||
position: relative;
|
||
z-index: 10;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.search-bar-trigger {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.search-input-wrapper {
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
background: var(--museum-bg-cream);
|
||
border: 1px solid white;
|
||
border-radius: var(--radius-mini);
|
||
padding: 9px 12px;
|
||
}
|
||
|
||
.search-icon {
|
||
flex-shrink: 0;
|
||
margin-right: 8px;
|
||
color: #333333;
|
||
}
|
||
|
||
.search-placeholder {
|
||
font-size: 14px;
|
||
color: var(--museum-text-disabled);
|
||
}
|
||
|
||
.filter-buttons {
|
||
display: flex;
|
||
gap: 8px;
|
||
position: relative;
|
||
z-index: 11;
|
||
width: 100%;
|
||
}
|
||
|
||
.filter-btn {
|
||
flex: 1;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 34px;
|
||
padding: 0;
|
||
border-radius: 6px;
|
||
background-color: rgba(0, 0, 0, 0.06);
|
||
border: 1px solid transparent;
|
||
transition: all 0.2s;
|
||
|
||
&:active {
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
|
||
.filter-btn.active {
|
||
background-color: #1a1a1a;
|
||
border-color: #1a1a1a;
|
||
}
|
||
|
||
.filter-text {
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
line-height: 1;
|
||
}
|
||
|
||
.filter-btn.active .filter-text {
|
||
color: #E0E100;
|
||
font-weight: 500;
|
||
}
|
||
|
||
// 抽屉遮罩层
|
||
.drawer-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
z-index: 99;
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
// 抽屉容器
|
||
.drawer-container {
|
||
position: absolute;
|
||
// 默认展开高度：屏幕一半
|
||
top: 50vh;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: #FFFFFF;
|
||
border-radius: 24px 24px 0 0;
|
||
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
|
||
transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
|
||
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||
opacity 0.3s ease;
|
||
z-index: 100;
|
||
}
|
||
|
||
// 收起状态：隐藏到屏幕底部
|
||
.drawer-container.drawer-collapsed {
|
||
top: 100vh;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
// 展开状态
|
||
.drawer-container.drawer-visible {
|
||
top: 50vh;
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.drawer-container.search-mode {
|
||
top: 44px;
|
||
border-radius: 0;
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.drawer-handle {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.handle-bar {
|
||
width: 66px;
|
||
height: 5px;
|
||
background-color: #E5E5E5;
|
||
border-radius: 2.5px;
|
||
}
|
||
|
||
.drawer-content {
|
||
flex: 1;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
// 移除 overflow-y: auto，避免与 scroll-view 自身滚动机制冲突
|
||
padding: 12px 16px 0;
|
||
height: 0;
|
||
|
||
::-webkit-scrollbar {
|
||
display: none;
|
||
width: 0;
|
||
height: 0;
|
||
color: transparent;
|
||
}
|
||
}
|
||
|
||
// 搜索内容样式
|
||
.search-content {
|
||
padding-bottom: calc(20px + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
.search-box {
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
background: var(--museum-bg-cream);
|
||
border: 1px solid white;
|
||
border-radius: var(--radius-mini);
|
||
padding: 9px 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.search-box-icon {
|
||
flex-shrink: 0;
|
||
margin-right: 8px;
|
||
color: #333333;
|
||
}
|
||
|
||
.search-box-input {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
color: var(--museum-text-primary);
|
||
background: transparent;
|
||
border: none;
|
||
outline: none;
|
||
|
||
&::placeholder {
|
||
color: var(--museum-text-disabled);
|
||
}
|
||
}
|
||
|
||
.clear-btn {
|
||
flex-shrink: 0;
|
||
width: 18px;
|
||
height: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.results-section {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.results-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.result-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 12px;
|
||
border-radius: 12px;
|
||
|
||
&:active {
|
||
background-color: rgba(0, 0, 0, 0.04);
|
||
}
|
||
}
|
||
|
||
.result-icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: rgba(0, 0, 0, 0.04);
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.result-icon.exhibit {
|
||
background-color: rgba(224, 225, 0, 0.15);
|
||
}
|
||
|
||
.result-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.result-name {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
color: #1A1A1A;
|
||
display: block;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.result-desc {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
display: block;
|
||
}
|
||
|
||
.no-results {
|
||
padding: 40px 20px;
|
||
text-align: center;
|
||
color: #999999;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.hot-section {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.clear-history {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.hot-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.hot-tag {
|
||
padding: 8px 14px;
|
||
background-color: rgba(0, 0, 0, 0.04);
|
||
border-radius: 18px;
|
||
|
||
&:active {
|
||
background-color: rgba(224, 225, 0, 0.3);
|
||
}
|
||
}
|
||
|
||
.hot-tag-text {
|
||
font-size: 13px;
|
||
color: #333333;
|
||
}
|
||
|
||
.history-section {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.history-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.history-item {
|
||
padding: 8px 14px;
|
||
background-color: rgba(0, 0, 0, 0.04);
|
||
border-radius: 18px;
|
||
|
||
&:active {
|
||
background-color: rgba(224, 225, 0, 0.3);
|
||
}
|
||
}
|
||
|
||
.history-text {
|
||
font-size: 13px;
|
||
color: #333333;
|
||
}
|
||
|
||
.close-search {
|
||
text-align: center;
|
||
padding: 12px;
|
||
margin-top: 8px;
|
||
|
||
text {
|
||
font-size: 14px;
|
||
color: #666666;
|
||
}
|
||
|
||
&:active {
|
||
text {
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 展品列表样式
|
||
.exhibits-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.exhibit-card {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 64px;
|
||
background-color: #F3F3F3;
|
||
border-radius: 12px;
|
||
padding: 0 12px;
|
||
box-sizing: border-box;
|
||
transition: all 0.2s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
.exhibit-image {
|
||
flex-shrink: 0;
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
background-color: #F0F0F0;
|
||
}
|
||
|
||
.image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.image-placeholder {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #F0F0F0;
|
||
}
|
||
|
||
.placeholder-icon {
|
||
color: #CCCCCC;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.exhibit-info {
|
||
flex: 1;
|
||
margin-left: 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.exhibit-name {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
color: #1A1A1A;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.exhibit-floor {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.audio-indicator {
|
||
flex-shrink: 0;
|
||
width: 36px;
|
||
height: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #E0E100;
|
||
border-radius: 50%;
|
||
margin-left: 12px;
|
||
|
||
&:active {
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
color: #1A1A1A;
|
||
}
|
||
}
|
||
|
||
.loading-end {
|
||
padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
|
||
text-align: center;
|
||
}
|
||
|
||
.end-text {
|
||
font-size: 12px;
|
||
color: #CCCCCC;
|
||
}
|
||
</style>
|