|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="collectpage">
|
|
|
<!-- 搜索页面 -->
|
|
|
- <div v-if="showSearchPage" class="search-page">
|
|
|
+ <!-- <div v-if="showSearchPage" class="search-page">
|
|
|
<SearchPageComponent
|
|
|
:initialSearch="searchParams"
|
|
|
:categoryOptions="categoryOptions"
|
|
|
@@ -12,7 +12,7 @@
|
|
|
@search="handleSearch"
|
|
|
@close="closeSearchPage"
|
|
|
/>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
|
|
|
<!-- 主要内容 -->
|
|
|
<div v-if="!showSearchPage" class="main-content">
|
|
|
@@ -28,34 +28,96 @@
|
|
|
</el-button>
|
|
|
</template>
|
|
|
</el-input>
|
|
|
- <button @click="openSearchPage" class="search-btn">
|
|
|
- <img src="@/assets/img/icon_select.png" alt="检索" class="search-icon" />
|
|
|
- <span>检索</span>
|
|
|
- </button>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 复选框区域 -->
|
|
|
- <div class="checkbox-group">
|
|
|
- <el-checkbox @change="quickSearch" v-model="filters.hasImage" label="二维文物" />
|
|
|
- <el-checkbox @change="quickSearch" v-model="filters.hasModel" label="三维文物" />
|
|
|
+ <!-- 搜索筛选（拆分自搜索页组件，放到输入框下方） -->
|
|
|
+ <div class="filter-row">
|
|
|
+ <!-- 类别 -->
|
|
|
+ <el-select v-model="searchParams.category" class="cut-corner-select" placeholder="类别" clearable @change="quickSearch">
|
|
|
+ <el-option
|
|
|
+ v-for="item in categoryOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <!-- 级别 -->
|
|
|
+ <el-select v-model="searchParams.level" class="cut-corner-select" placeholder="级别" clearable @change="quickSearch">
|
|
|
+ <el-option
|
|
|
+ v-for="item in levelOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <!-- 年代 -->
|
|
|
+ <el-select v-model="searchParams.era" class="cut-corner-select" placeholder="年代" clearable @change="quickSearch">
|
|
|
+ <el-option
|
|
|
+ v-for="item in eraOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <!-- 排序 -->
|
|
|
+ <el-select v-model="searchParams.orderBy" class="cut-corner-select" placeholder="排序" clearable @change="quickSearch">
|
|
|
+ <el-option
|
|
|
+ v-for="item in orderByOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <!-- 全部文物（维度） -->
|
|
|
+ <el-select v-model="selectedDim" class="cut-corner-select cut-corner-select-dim" placeholder="全部文物" @change="quickSearch">
|
|
|
+ <el-option :label="'全部文物'" :value="3" />
|
|
|
+ <el-option :label="'二维文物'" :value="1" />
|
|
|
+ <el-option :label="'三维文物'" :value="2" />
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <!-- 重置按钮 -->
|
|
|
+ <button class="reset-inline-btn" @click="resetInline">
|
|
|
+ <img src="@/assets/img/icon_restart.png" alt="重置" />
|
|
|
+ </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 搜索结果列表 -->
|
|
|
<div v-loading="loading" class="search-results" @scroll="handleScroll">
|
|
|
- <div
|
|
|
- v-for="item in searchResults"
|
|
|
- :key="item.id"
|
|
|
- class="result-item"
|
|
|
- :class="{ 'loading-waterfall': item.isLoading }"
|
|
|
- @click="viewDetails(item)"
|
|
|
- >
|
|
|
- <div class="waterfall-mask" v-if="item.isLoading"></div>
|
|
|
- <img :src="getImageUrl(item)" :alt="item.name" class="result-image" />
|
|
|
- <div class="result-info">
|
|
|
- <div class="result-name">{{ item.name }}</div>
|
|
|
- <div class="more-info"><img src="@/assets/img/icon_collect_more.png" alt="更多" class="more-icon" /></div>
|
|
|
+ <div class="results-columns">
|
|
|
+ <div class="column left">
|
|
|
+ <div
|
|
|
+ v-for="item in leftResult"
|
|
|
+ :key="item.id"
|
|
|
+ class="result-item"
|
|
|
+ :class="{ 'loading-waterfall': item.isLoading }"
|
|
|
+ @click="viewDetails(item)"
|
|
|
+ >
|
|
|
+ <div class="waterfall-mask" v-if="item.isLoading"></div>
|
|
|
+ <img :src="getImageUrl(item)" :alt="item.name" class="result-image" />
|
|
|
+ <div class="result-info">
|
|
|
+ <div class="result-name">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="column right">
|
|
|
+ <div
|
|
|
+ v-for="item in rightResult"
|
|
|
+ :key="item.id"
|
|
|
+ class="result-item"
|
|
|
+ :class="{ 'loading-waterfall': item.isLoading }"
|
|
|
+ @click="viewDetails(item)"
|
|
|
+ >
|
|
|
+ <div class="waterfall-mask" v-if="item.isLoading"></div>
|
|
|
+ <img :src="getImageUrl(item)" :alt="item.name" class="result-image" />
|
|
|
+ <div class="result-info">
|
|
|
+ <div class="result-name">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -74,7 +136,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, onMounted, computed } from 'vue'
|
|
|
+import { ref, computed, onMounted } from 'vue'
|
|
|
import { useRouter } from 'vue-router'
|
|
|
import SearchPageComponent from './components/SearchPageComponent.vue'
|
|
|
import getBookCountApi from '@/api'
|
|
|
@@ -92,19 +154,20 @@ const router = useRouter()
|
|
|
// 响应式数据
|
|
|
const showSearchPage = ref(false)
|
|
|
const searchParams = ref({searchText: '', dim: 3, orderBy: 'grade', level: '', category: '', material: '', era: ''})
|
|
|
-const searchResults = ref([]) // 当前显示的搜索结果（分页显示）
|
|
|
+const searchResults = ref([]) // 当前显示的搜索结果（服务端分页）
|
|
|
+// 将搜索结果拆分为左右两列：左列为索引为双数（0,2,4...），右列为索引为单数（1,3,5...）
|
|
|
+const leftResult = computed(() => searchResults.value.filter((_, index) => index % 2 === 0))
|
|
|
+const rightResult = computed(() => searchResults.value.filter((_, index) => index % 2 === 1))
|
|
|
const searched = ref(false)
|
|
|
const loading = ref(false)
|
|
|
|
|
|
-// 前端分页相关数据
|
|
|
-const allSearchResults = ref([]) // 所有搜索结果数据（API返回的完整数据集）
|
|
|
+// 服务端分页相关数据
|
|
|
const currentPage = ref(1)
|
|
|
-const pageSize = 20 // 每页显示20条
|
|
|
+const pageSize = 40 // 默认每页40条
|
|
|
+const hasMoreData = ref(true)
|
|
|
|
|
|
-const filters = ref({
|
|
|
- hasImage: false,
|
|
|
- hasModel: false
|
|
|
-})
|
|
|
+// 维度选择（全部文物/二维/三维）
|
|
|
+const selectedDim = ref(3)
|
|
|
|
|
|
// 所有选项列表 - 从接口获取
|
|
|
const levelOptions = ref([])
|
|
|
@@ -113,10 +176,7 @@ const materialOptions = ref([])
|
|
|
const eraOptions = ref([])
|
|
|
const orderByOptions = ref([])
|
|
|
|
|
|
-// 计算总页数
|
|
|
-const totalPages = computed(() => {
|
|
|
- return Math.ceil(allSearchResults.value.length / pageSize);
|
|
|
-})
|
|
|
+// 移除前端总页数计算，依赖服务端分页
|
|
|
|
|
|
// 构建orderbyList的通用方法
|
|
|
const buildOrderbyList = (orderByValue = searchParams.value.orderBy) => {
|
|
|
@@ -130,10 +190,6 @@ const buildOrderbyList = (orderByValue = searchParams.value.orderBy) => {
|
|
|
categoryOptions.value.forEach(item => {
|
|
|
orderbyList.push(item.value);
|
|
|
});
|
|
|
- } else if (orderByValue === 'material') {
|
|
|
- materialOptions.value.forEach(item => {
|
|
|
- orderbyList.push(item.value);
|
|
|
- });
|
|
|
} else if (orderByValue === 'era') {
|
|
|
eraOptions.value.forEach(item => {
|
|
|
orderbyList.push(item.value);
|
|
|
@@ -164,42 +220,14 @@ const quickSearch = () => {
|
|
|
|
|
|
// 计算dim参数值
|
|
|
const getSelectedDim = () => {
|
|
|
- const { hasImage, hasModel } = filters.value
|
|
|
-
|
|
|
- // 都选中或都不选中时传3-全部
|
|
|
- if ((hasImage && hasModel) || (!hasImage && !hasModel)) {
|
|
|
- return 3;
|
|
|
- }
|
|
|
- // 只选hasImage时传1-二维
|
|
|
- if (hasImage && !hasModel) {
|
|
|
- return 1;
|
|
|
- }
|
|
|
- // 只选hasModel时传2-三维
|
|
|
- if (!hasImage && hasModel) {
|
|
|
- return 2;
|
|
|
- }
|
|
|
-
|
|
|
- return 3; // 默认全部
|
|
|
+ // 从下拉框直接返回维度值
|
|
|
+ return Number(selectedDim.value) || 3;
|
|
|
}
|
|
|
|
|
|
-// 加载显示的数据（分页）
|
|
|
-const loadDisplayedData = () => {
|
|
|
- const startIndex = (currentPage.value - 1) * pageSize;
|
|
|
- const endIndex = startIndex + pageSize;
|
|
|
- const newData = allSearchResults.value.slice(startIndex, endIndex);
|
|
|
-
|
|
|
- if (currentPage.value === 1) {
|
|
|
- // 第一页，直接替换
|
|
|
- searchResults.value = newData.map(item => ({ ...item, isLoading: true }));
|
|
|
- } else {
|
|
|
- // 后续页，追加数据
|
|
|
- const newItems = newData.map(item => ({ ...item, isLoading: true }));
|
|
|
- searchResults.value.push(...newItems);
|
|
|
- }
|
|
|
-
|
|
|
- // 延迟触发瀑布效果
|
|
|
+// 追加瀑布加载效果的统一方法
|
|
|
+const applyWaterfallEffect = (items) => {
|
|
|
setTimeout(() => {
|
|
|
- newData.forEach((item, index) => {
|
|
|
+ items.forEach((item, index) => {
|
|
|
setTimeout(() => {
|
|
|
const foundItem = searchResults.value.find(listItem => listItem.id === item.id && listItem.isLoading);
|
|
|
if (foundItem) {
|
|
|
@@ -242,17 +270,20 @@ const handleSearch = async (searchFilters = {}) => {
|
|
|
texture: searchParams.value.material,
|
|
|
agetype: searchParams.value.era,
|
|
|
orderBy: searchParams.value.orderBy,
|
|
|
- orderbyList: searchFilters.orderbyList || []
|
|
|
+ orderbyList: searchFilters.orderbyList || [],
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize
|
|
|
}
|
|
|
// 重置分页数据
|
|
|
currentPage.value = 1;
|
|
|
+ hasMoreData.value = true;
|
|
|
searchResults.value = []; // 清空当前显示的数据
|
|
|
|
|
|
// 调用实际的搜索API，使用与CollectionContent相同的API
|
|
|
const response = await getBookCountApi.getArtifactListApi(searchObj)
|
|
|
|
|
|
// 处理返回的数据
|
|
|
- const artifacts = response.list || response.records || response || [];
|
|
|
+ const artifacts = response.pageData || response.list || response.records || [];
|
|
|
|
|
|
// console.log('获取到搜索结果:', artifacts.length, '条');
|
|
|
|
|
|
@@ -269,20 +300,22 @@ const handleSearch = async (searchFilters = {}) => {
|
|
|
originalImage: `${imgUrl}${item.thumbnail}`,
|
|
|
hasImage: item.hasImage !== false,
|
|
|
hasModel: item.hasModel !== false,
|
|
|
- isLoading: false
|
|
|
+ isLoading: true
|
|
|
}))
|
|
|
|
|
|
- // 存储所有结果数据
|
|
|
- allSearchResults.value = processedArtifacts;
|
|
|
+ // 第一页直接替换
|
|
|
+ searchResults.value = processedArtifacts;
|
|
|
+ applyWaterfallEffect(processedArtifacts);
|
|
|
|
|
|
- // 加载第一页数据
|
|
|
- loadDisplayedData();
|
|
|
+ // 检查是否还有更多数据
|
|
|
+ if (artifacts.length < pageSize) {
|
|
|
+ hasMoreData.value = false;
|
|
|
+ }
|
|
|
|
|
|
searched.value = true
|
|
|
|
|
|
} catch (error) {
|
|
|
console.error('搜索失败:', error)
|
|
|
- allSearchResults.value = []
|
|
|
searchResults.value = []
|
|
|
searched.value = true
|
|
|
} finally {
|
|
|
@@ -300,6 +333,56 @@ const viewDetails = (item) => {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+// 加载更多（服务端分页）
|
|
|
+const loadMoreData = async () => {
|
|
|
+ if (loading.value || !hasMoreData.value) return;
|
|
|
+ loading.value = true;
|
|
|
+ try {
|
|
|
+ const searchObj = {
|
|
|
+ dim: searchParams.value.dim,
|
|
|
+ searchText: searchParams.value.searchText,
|
|
|
+ grade: searchParams.value.level,
|
|
|
+ category: searchParams.value.category,
|
|
|
+ texture: searchParams.value.material,
|
|
|
+ agetype: searchParams.value.era,
|
|
|
+ orderBy: searchParams.value.orderBy,
|
|
|
+ orderbyList: buildOrderbyList(),
|
|
|
+ pageNo: currentPage.value,
|
|
|
+ pageSize
|
|
|
+ };
|
|
|
+
|
|
|
+ const response = await getBookCountApi.getArtifactListApi(searchObj);
|
|
|
+ const artifacts = response.pageData || response.list || response.records || [];
|
|
|
+
|
|
|
+ const processedArtifacts = artifacts.map(item => ({
|
|
|
+ id: item.id,
|
|
|
+ name: item.name || item.title,
|
|
|
+ description: item.description || item.desc || '暂无描述',
|
|
|
+ era: item.era || item.agetype || '近现代',
|
|
|
+ category: item.category || '其他',
|
|
|
+ level: item.level || item.grade || '未定级',
|
|
|
+ material: item.texture || '其他',
|
|
|
+ image: `${imgUrl}${item.thumbnail}`,
|
|
|
+ originalImage: `${imgUrl}${item.thumbnail}`,
|
|
|
+ hasImage: item.hasImage !== false,
|
|
|
+ hasModel: item.hasModel !== false,
|
|
|
+ isLoading: true
|
|
|
+ }));
|
|
|
+
|
|
|
+ searchResults.value.push(...processedArtifacts);
|
|
|
+ applyWaterfallEffect(processedArtifacts);
|
|
|
+
|
|
|
+ if (artifacts.length < pageSize) {
|
|
|
+ hasMoreData.value = false;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载更多失败:', error);
|
|
|
+ hasMoreData.value = false; // 防止重复触发
|
|
|
+ } finally {
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
// 滚动处理 - 加载更多
|
|
|
const handleScroll = async (event) => {
|
|
|
const container = event.target;
|
|
|
@@ -308,10 +391,10 @@ const handleScroll = async (event) => {
|
|
|
// 检查是否滚动到底部
|
|
|
const isScrolledToBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 50;
|
|
|
|
|
|
- if (isScrolledToBottom && currentPage.value < totalPages.value) {
|
|
|
+ if (isScrolledToBottom && hasMoreData.value) {
|
|
|
console.log('加载下一页数据...');
|
|
|
currentPage.value++;
|
|
|
- loadDisplayedData();
|
|
|
+ await loadMoreData();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
@@ -353,11 +436,10 @@ const loadDictionaryData = async () => {
|
|
|
}));
|
|
|
}
|
|
|
|
|
|
- // 处理排序数据
|
|
|
+ // 处理排序数据（去掉材质）
|
|
|
orderByOptions.value = [
|
|
|
{ label: '等级', value: 'grade' },
|
|
|
{ label: '类别', value: 'category' },
|
|
|
- { label: '材质', value: 'material' },
|
|
|
{ label: '年代', value: 'era' }
|
|
|
];
|
|
|
|
|
|
@@ -391,7 +473,6 @@ const loadDictionaryData = async () => {
|
|
|
orderByOptions.value = [
|
|
|
{ label: '等级', value: 'grade' },
|
|
|
{ label: '类别', value: 'category' },
|
|
|
- { label: '材质', value: 'material' },
|
|
|
{ label: '年代', value: 'era' }
|
|
|
];
|
|
|
|
|
|
@@ -442,7 +523,7 @@ const processImageWithWatermark = async (item) => {
|
|
|
const watermarkedImageUrl = await addWatermarkToCollectionImage(item.originalImage, {
|
|
|
position: 'center',
|
|
|
opacity: 1,
|
|
|
- scale: 0.9,
|
|
|
+ scale: 0.5,
|
|
|
margin: 15
|
|
|
});
|
|
|
// console.log('水印处理成功，结果URL:', watermarkedImageUrl);
|
|
|
@@ -452,8 +533,9 @@ const processImageWithWatermark = async (item) => {
|
|
|
item.image = watermarkedImageUrl;
|
|
|
return watermarkedImageUrl;
|
|
|
} catch (error) {
|
|
|
- console.error('水印处理失败:', error);
|
|
|
- // 失败时使用原图
|
|
|
+ // 加载失败时，直接使用并缓存原图，避免重复尝试引发报错
|
|
|
+ watermarkedImages.value.set(item.id, item.originalImage);
|
|
|
+ item.image = item.originalImage;
|
|
|
return item.originalImage;
|
|
|
} finally {
|
|
|
// 标记处理完成
|
|
|
@@ -477,6 +559,18 @@ onMounted(() => {
|
|
|
// 加载字典数据，字典数据加载完成后会自动进行初始化搜索
|
|
|
loadDictionaryData();
|
|
|
})
|
|
|
+
|
|
|
+// 内联重置：清空除排序外的筛选，同时维度恢复全部
|
|
|
+const resetInline = () => {
|
|
|
+ searchParams.value.searchText = ''
|
|
|
+ searchParams.value.level = ''
|
|
|
+ searchParams.value.category = ''
|
|
|
+ searchParams.value.material = ''
|
|
|
+ searchParams.value.era = ''
|
|
|
+ searchParams.value.orderBy = 'grade'
|
|
|
+ selectedDim.value = 3
|
|
|
+ quickSearch()
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -505,14 +599,14 @@ onMounted(() => {
|
|
|
|
|
|
.top-title {
|
|
|
position: absolute;
|
|
|
- top: 20px;
|
|
|
+ top: 0.5333rem;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
z-index: 10;
|
|
|
|
|
|
img {
|
|
|
- max-width: 300px;
|
|
|
+ max-width: 8rem;
|
|
|
height: auto;
|
|
|
}
|
|
|
}
|
|
|
@@ -534,30 +628,57 @@ onMounted(() => {
|
|
|
|
|
|
.search-container {
|
|
|
position: absolute;
|
|
|
- top: 20px;
|
|
|
+ top: 0.5333rem;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
z-index: 10;
|
|
|
- width: calc(100% - 40px);
|
|
|
- max-width: 600px;
|
|
|
+ width: calc(100% - 0.5867rem);
|
|
|
+ max-width: 16rem;
|
|
|
}
|
|
|
|
|
|
.search-wrapper {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- border-bottom: 1px dotted #d3bfa2;
|
|
|
- border-radius: 6px;
|
|
|
- gap: 2px;
|
|
|
+ border-bottom: 0.0267rem dotted #d3bfa2;
|
|
|
+ border-radius: 0.16rem;
|
|
|
+ gap: 0.0533rem;
|
|
|
+}
|
|
|
+
|
|
|
+// 内联筛选行
|
|
|
+.filter-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 0.1067rem;
|
|
|
+ margin: 0.2667rem 0;
|
|
|
+}
|
|
|
+
|
|
|
+.reset-inline-btn {
|
|
|
+ position: relative;
|
|
|
+ width: 0.8rem;
|
|
|
+ height: 0.8rem;
|
|
|
+ border: none;
|
|
|
+ background: url('@/assets/img/btn_active.png') no-repeat;
|
|
|
+ background-size: 0.8rem 0.8rem;
|
|
|
+ img{
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 0.5333rem;
|
|
|
+ height: 0.5333rem;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.checkbox-group {
|
|
|
display: flex;
|
|
|
- gap: 6px;
|
|
|
+ gap: 0.16rem;
|
|
|
white-space: nowrap;
|
|
|
|
|
|
:deep(.el-checkbox) {
|
|
|
.el-checkbox__label {
|
|
|
- font-size: 14px;
|
|
|
+ font-size: 0.3733rem;
|
|
|
color: #666;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
@@ -584,21 +705,21 @@ onMounted(() => {
|
|
|
.search-input-wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- gap: 2px;
|
|
|
+ gap: 0.0533rem;
|
|
|
.quick-search-btn {
|
|
|
position: relative;
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
+ width: 0.8rem;
|
|
|
+ height: 0.8rem;
|
|
|
border: none;
|
|
|
background: url('@/assets/img/btn_active.png') no-repeat;
|
|
|
- background-size: 30px 30px;
|
|
|
+ background-size: 0.8rem 0.8rem;
|
|
|
.search-icon{
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
+ width: 0.5333rem;
|
|
|
+ height: 0.5333rem;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
}
|
|
|
@@ -606,15 +727,15 @@ onMounted(() => {
|
|
|
|
|
|
.search-input {
|
|
|
flex: 1;
|
|
|
- width: 288px;
|
|
|
+ width: 7.68rem;
|
|
|
|
|
|
:deep(.el-input__wrapper) {
|
|
|
- height: 40px;
|
|
|
- border-radius: 4px;
|
|
|
+ height: 1.0667rem;
|
|
|
+ border-radius: 0.1067rem;
|
|
|
}
|
|
|
|
|
|
:deep(.el-input__inner) {
|
|
|
- font-size: 14px;
|
|
|
+ font-size: 0.3733rem;
|
|
|
color: #333;
|
|
|
|
|
|
&::placeholder {
|
|
|
@@ -627,29 +748,29 @@ onMounted(() => {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- gap: 2px;
|
|
|
+ gap: 0.0533rem;
|
|
|
border: none;
|
|
|
- border-radius: 4px;
|
|
|
+ border-radius: 0.1067rem;
|
|
|
color: #B49D7E;
|
|
|
- font-size: 16px;
|
|
|
+ font-size: 0.4267rem;
|
|
|
font-weight: 500;
|
|
|
cursor: pointer;
|
|
|
white-space: nowrap;
|
|
|
transition: all 0.3s ease;
|
|
|
- height: 40px;
|
|
|
- min-width: 80px;
|
|
|
+ height: 1.0667rem;
|
|
|
+ min-width: 2.1333rem;
|
|
|
background: transparent;
|
|
|
|
|
|
.search-icon {
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
+ width: 0.8rem;
|
|
|
+ height: 0.8rem;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
|
|
|
&:hover {
|
|
|
background: #6a5a36;
|
|
|
- transform: translateY(-1px);
|
|
|
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
|
+ transform: translateY(-0.0267rem);
|
|
|
+ box-shadow: 0 0.0533rem 0.1067rem rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
@@ -659,22 +780,48 @@ onMounted(() => {
|
|
|
|
|
|
.search-results {
|
|
|
position: absolute;
|
|
|
- top: 110px;
|
|
|
+ top: 3.68rem;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
- height: calc(100% - 130px);
|
|
|
+ height: calc(100% - 3.8933rem);
|
|
|
overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
z-index: 10;
|
|
|
- padding: 0 20px;
|
|
|
+ padding: 0 0.2667rem;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
-.result-item {
|
|
|
+.results-columns {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.column {
|
|
|
+ width: 50%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+}
|
|
|
+.left{
|
|
|
+ .result-image{
|
|
|
+ height: 4.4267rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+.right {
|
|
|
+ margin-left: 3%;
|
|
|
+ .result-item:first-child{
|
|
|
+ .result-image{
|
|
|
+ height: 3.2rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.result-item {
|
|
|
+ display: inline-flex;
|
|
|
+ flex-direction: column;
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
- margin-bottom: 15px;
|
|
|
- padding: 10px;
|
|
|
+ margin-bottom: 0.4rem;
|
|
|
+ padding: 0.2667rem;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.3s ease;
|
|
|
position: relative;
|
|
|
@@ -682,8 +829,8 @@ onMounted(() => {
|
|
|
|
|
|
&:hover {
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
|
+ transform: translateY(-0.0533rem);
|
|
|
+ box-shadow: 0 0.1067rem 0.4rem rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
// 瀑布加载状态
|
|
|
@@ -707,7 +854,7 @@ onMounted(() => {
|
|
|
rgba(0, 0, 0, 0.9) 100%);
|
|
|
z-index: 10;
|
|
|
transform: translateY(-100%);
|
|
|
- border-radius: 8px;
|
|
|
+ border-radius: 0.2133rem;
|
|
|
animation: waterfallDown 1.0s ease-out forwards, waterfallUp 1.0s ease-in 1.0s forwards;
|
|
|
will-change: transform, opacity;
|
|
|
}
|
|
|
@@ -715,9 +862,9 @@ onMounted(() => {
|
|
|
|
|
|
.result-image {
|
|
|
width: 100%;
|
|
|
- height: 181px;
|
|
|
- object-fit: cover;
|
|
|
- margin-right: 15px;
|
|
|
+ height: 4.4267rem;
|
|
|
+ display: block;
|
|
|
+ margin-right: 0.4rem;
|
|
|
transition: opacity 0.3s ease, filter 0.3s ease;
|
|
|
}
|
|
|
|
|
|
@@ -729,11 +876,16 @@ onMounted(() => {
|
|
|
transition: opacity 0.3s ease, filter 0.3s ease;
|
|
|
|
|
|
.result-name {
|
|
|
- width: 85%;
|
|
|
- font-size: 16px;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 0.4267rem;
|
|
|
color: #464646;
|
|
|
font-weight: 400;
|
|
|
- padding-top: 6px;
|
|
|
+ padding-top: 0.16rem;
|
|
|
}
|
|
|
|
|
|
.more-info {
|
|
|
@@ -744,8 +896,8 @@ onMounted(() => {
|
|
|
|
|
|
.result-category,
|
|
|
.result-era {
|
|
|
- margin: 4px 0;
|
|
|
- font-size: 14px;
|
|
|
+ margin: 0.1067rem 0;
|
|
|
+ font-size: 0.3733rem;
|
|
|
color: #666;
|
|
|
}
|
|
|
}
|
|
|
@@ -759,7 +911,7 @@ onMounted(() => {
|
|
|
z-index: 10;
|
|
|
|
|
|
p {
|
|
|
- font-size: 16px;
|
|
|
+ font-size: 0.4267rem;
|
|
|
color: #999;
|
|
|
}
|
|
|
}
|
|
|
@@ -767,7 +919,7 @@ onMounted(() => {
|
|
|
.loading-more {
|
|
|
grid-column: 1 / -1;
|
|
|
text-align: center;
|
|
|
- padding: 20px;
|
|
|
+ padding: 0.5333rem;
|
|
|
color: #666;
|
|
|
}
|
|
|
|
|
|
@@ -800,3 +952,15 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
+<style lang="scss">
|
|
|
+.el-select-dropdown__wrap{
|
|
|
+ max-height: 10.6667rem;
|
|
|
+}
|
|
|
+.el-select-dropdown__item{
|
|
|
+ min-width: 7.3867rem!important;
|
|
|
+ height: 0.9067rem;
|
|
|
+ line-height: 0.9067rem;
|
|
|
+ padding: 0 0.8533rem 0 0.5333rem;
|
|
|
+ font-size: 0.4267rem;
|
|
|
+}
|
|
|
+</style>
|
