优化maps页面
This commit is contained in:
parent
117dd2d233
commit
1d74f16b33
@ -2,34 +2,78 @@
|
||||
<div class="maps">
|
||||
<div class="page-header">
|
||||
<h1>最近地图上传</h1>
|
||||
</div>
|
||||
<div class="filters">
|
||||
搜索：
|
||||
<div class="search-box">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="搜索地图..."
|
||||
v-model="searchValue"
|
||||
@input="handleSearchInput"
|
||||
@blur="handleSearchBlur"
|
||||
<div class="view-toggle-group icon-group header-toggle-group">
|
||||
<button
|
||||
class="view-toggle-btn icon-btn"
|
||||
:class="{ active: viewMode === 'table' }"
|
||||
@click="viewMode = 'table'"
|
||||
title="表格视图"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="2" y="2" width="16" height="16" rx="3" stroke="currentColor" stroke-width="1.5"/><line x1="2" y1="7" x2="18" y2="7" stroke="currentColor" stroke-width="1.5"/><line x1="2" y1="13" x2="18" y2="13" stroke="currentColor" stroke-width="1.5"/></svg>
|
||||
</button>
|
||||
<button
|
||||
class="view-toggle-btn icon-btn"
|
||||
:class="{ active: viewMode === 'card' }"
|
||||
@click="viewMode = 'card'"
|
||||
title="卡片视图"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="2" y="2" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="12" y="2" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="2" y="12" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="12" y="12" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
玩家数：
|
||||
<select v-model="playerCountFilter" class="filter-select" @change="handleFilterChange">
|
||||
<option value="">全部</option>
|
||||
<option v-for="n in [2,3,4,5,6,7,8]" :key="n" :value="n">{{ n }}人</option>
|
||||
</select>
|
||||
分类：
|
||||
<select v-model="tagFilter" class="filter-select" @change="handleFilterChange">
|
||||
<option value="">全部</option>
|
||||
<option v-for="tag in tagOptions" :key="tag" :value="tag">{{ tag }}</option>
|
||||
</select>
|
||||
排序：
|
||||
<select v-model="selectedOrder" class="filter-select" @change="handleFilterChange">
|
||||
<option v-for="opt in orderOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<div class="filters-row">
|
||||
<div class="filters">
|
||||
<div class="search-box">
|
||||
<span class="search-label">搜索：</span>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="搜索地图..."
|
||||
v-model="searchValue"
|
||||
@keyup.enter="handleSearch"
|
||||
class="search-input"
|
||||
>
|
||||
<button v-if="searchValue" class="clear-btn" @click="clearSearch" title="清空">
|
||||
<svg width="14" height="14" viewBox="0 0 20 20" fill="none"><line x1="5" y1="5" x2="15" y2="15" stroke="#bbb" stroke-width="2" stroke-linecap="round"/><line x1="15" y1="5" x2="5" y2="15" stroke="#bbb" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
<button class="search-btn-icon" @click="handleSearch" title="搜索">
|
||||
<svg width="18" height="18" viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="7" stroke="#2563eb" stroke-width="2"/><line x1="14.4142" y1="14" x2="18" y2="17.5858" stroke="#2563eb" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<label>玩家数：</label>
|
||||
<select v-model="playerCountFilter" class="filter-select" @change="handleFilterChange">
|
||||
<option value="">全部</option>
|
||||
<option v-for="n in [2,3,4,5,6,7,8]" :key="n" :value="n">{{ n }}人</option>
|
||||
</select>
|
||||
<label>分类：</label>
|
||||
<select v-model="tagFilter" class="filter-select" @change="handleFilterChange">
|
||||
<option value="">全部</option>
|
||||
<option v-for="tag in tagOptions" :key="tag" :value="tag">{{ tag }}</option>
|
||||
</select>
|
||||
<label>排序：</label>
|
||||
<select v-model="selectedOrder" class="filter-select" @change="handleFilterChange">
|
||||
<option v-for="opt in orderOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="view-toggle-group icon-group filters-toggle-group">
|
||||
<button
|
||||
class="view-toggle-btn icon-btn"
|
||||
:class="{ active: viewMode === 'table' }"
|
||||
@click="viewMode = 'table'"
|
||||
title="表格视图"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="2" y="2" width="16" height="16" rx="3" stroke="currentColor" stroke-width="1.5"/><line x1="2" y1="7" x2="18" y2="7" stroke="currentColor" stroke-width="1.5"/><line x1="2" y1="13" x2="18" y2="13" stroke="currentColor" stroke-width="1.5"/></svg>
|
||||
</button>
|
||||
<button
|
||||
class="view-toggle-btn icon-btn"
|
||||
:class="{ active: viewMode === 'card' }"
|
||||
@click="viewMode = 'card'"
|
||||
title="卡片视图"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="2" y="2" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="12" y="2" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="2" y="12" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="12" y="12" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-container" v-if="viewMode === 'table'">
|
||||
<table class="maps-table">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -62,6 +106,28 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div v-if="maps.length === 0" class="empty-tip">暂无此地图</div>
|
||||
</div>
|
||||
<div v-else class="card-list-container">
|
||||
<div class="card-list">
|
||||
<div class="map-card" v-for="map in maps" :key="map.id" @click="goToMapDetail(map.id)">
|
||||
<img :src="map.thumbnail" :alt="map.chinese_name" class="card-image" />
|
||||
<div class="card-content">
|
||||
<div class="card-title">{{ map.chinese_name }}</div>
|
||||
<div class="card-author">作者：{{ map.user }}</div>
|
||||
<div class="card-info">
|
||||
<span>下载：{{ map.download_count }}</span>
|
||||
<span>收藏：{{ map.favourite_count }}</span>
|
||||
<span>玩家：{{ map.player_count }}</span>
|
||||
</div>
|
||||
<div class="card-date">{{ formatDate(map.create_time) }}</div>
|
||||
<div class="tags">
|
||||
<span v-for="tag in map.tags" :key="tag" class="tag">{{ tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="maps.length === 0" class="empty-tip">暂无此地图</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页控件 -->
|
||||
@ -71,7 +137,8 @@
|
||||
:disabled="currentPage === 1"
|
||||
@click="changePage(currentPage - 1)"
|
||||
>
|
||||
上一页
|
||||
<span class="page-btn-text desktop-only">上一页</span>
|
||||
<span class="page-btn-arrow mobile-only">←</span>
|
||||
</button>
|
||||
|
||||
<div class="page-numbers">
|
||||
@ -81,9 +148,7 @@
|
||||
class="page-number"
|
||||
:class="{ active: page === currentPage }"
|
||||
@click="changePage(page)"
|
||||
>
|
||||
{{ page }}
|
||||
</button>
|
||||
>{{ page }}</button>
|
||||
<span v-else class="page-ellipsis">{{ page }}</span>
|
||||
</template>
|
||||
</div>
|
||||
@ -93,7 +158,8 @@
|
||||
:disabled="!hasNextPage"
|
||||
@click="changePage(currentPage + 1)"
|
||||
>
|
||||
下一页
|
||||
<span class="page-btn-text desktop-only">下一页</span>
|
||||
<span class="page-btn-arrow mobile-only">→</span>
|
||||
</button>
|
||||
|
||||
<div class="page-jump">
|
||||
@ -108,11 +174,14 @@
|
||||
<button class="jump-btn" @click="handleJumpPage">跳转</button>
|
||||
</div>
|
||||
</div>
|
||||
<button v-if="showBackTop" class="back-to-top-btn" @click="scrollToTop">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 19V5" stroke="#2563eb" stroke-width="2" stroke-linecap="round"/><path d="M6 11L12 5L18 11" stroke="#2563eb" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { ref, computed, onMounted, watch, onUnmounted } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { getMaps, getAllTags } from '../../api/maps.js'
|
||||
import '../../assets/styles/common.css'
|
||||
@ -124,6 +193,8 @@ const currentPage = ref(1)
|
||||
const totalPages = ref(1)
|
||||
const hasNextPage = ref(false)
|
||||
const jumpPage = ref('')
|
||||
const viewMode = ref('table')
|
||||
const showBackTop = ref(false)
|
||||
|
||||
// 排序和筛选相关
|
||||
const orderOptions = [
|
||||
@ -190,18 +261,9 @@ const fetchMaps = async (page = 1) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 处理搜索输入
|
||||
const handleSearchInput = () => {
|
||||
if (!searchValue.value) {
|
||||
fetchMaps(1)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理搜索框失去焦点
|
||||
const handleSearchBlur = () => {
|
||||
if (searchValue.value) {
|
||||
fetchMaps(1)
|
||||
}
|
||||
// 搜索按钮和回车触发搜索
|
||||
const handleSearch = () => {
|
||||
fetchMaps(1)
|
||||
}
|
||||
|
||||
// 处理筛选条件变化
|
||||
@ -238,6 +300,7 @@ const changePage = (page) => {
|
||||
|
||||
// 跳转到地图详情
|
||||
const goToMapDetail = (id) => {
|
||||
sessionStorage.setItem('maps_view_mode', viewMode.value)
|
||||
router.push(`/map/${id}`)
|
||||
}
|
||||
|
||||
@ -246,12 +309,34 @@ const formatDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleDateString('zh-CN')
|
||||
}
|
||||
|
||||
// 清除搜索内容
|
||||
const clearSearch = () => {
|
||||
searchValue.value = ''
|
||||
fetchMaps(1)
|
||||
}
|
||||
|
||||
const handleScroll = () => {
|
||||
showBackTop.value = window.scrollY > 200
|
||||
}
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log('组件挂载')
|
||||
const savedMode = sessionStorage.getItem('maps_view_mode')
|
||||
if (savedMode) {
|
||||
viewMode.value = savedMode
|
||||
} else if (window.innerWidth <= 700) {
|
||||
viewMode.value = 'card'
|
||||
}
|
||||
fetchMaps(1)
|
||||
getAllTags().then(tags => {
|
||||
tagOptions.value = tags
|
||||
})
|
||||
window.addEventListener('scroll', handleScroll)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('scroll', handleScroll)
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -326,4 +411,467 @@ onMounted(() => {
|
||||
.jump-btn:hover {
|
||||
background: #1a237e;
|
||||
}
|
||||
.page-header {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.page-header h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.view-toggle-group {
|
||||
display: flex;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
}
|
||||
.view-toggle-btn {
|
||||
background: #f5f7fa;
|
||||
color: #2563eb;
|
||||
border: none;
|
||||
padding: 6px 22px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
outline: none;
|
||||
}
|
||||
.view-toggle-btn.active {
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
z-index: 1;
|
||||
}
|
||||
.view-toggle-btn:not(.active):hover {
|
||||
background: #e3f0ff;
|
||||
color: #1a237e;
|
||||
}
|
||||
.view-toggle-btn:first-child {
|
||||
border-right: 1px solid #2563eb22;
|
||||
}
|
||||
.view-toggle-btn:last-child {
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
.card-list-container {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.card-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
.map-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.2s, transform 0.2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 280px;
|
||||
max-height: 280px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.map-card:hover {
|
||||
box-shadow: 0 4px 16px rgba(37,99,235,0.15);
|
||||
transform: translateY(-2px) scale(1.03);
|
||||
}
|
||||
.card-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
object-fit: contain;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
background: #f5f5f5;
|
||||
display: block;
|
||||
}
|
||||
.card-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #1a237e;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.card-author {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 2px;
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: initial;
|
||||
}
|
||||
.card-info {
|
||||
font-size: 13px;
|
||||
color: #2563eb;
|
||||
margin-bottom: 2px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: initial;
|
||||
}
|
||||
.card-date {
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
margin-bottom: 2px;
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: initial;
|
||||
}
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.tag {
|
||||
padding: 2px 8px;
|
||||
background: #f5f7fa;
|
||||
color: #2563eb;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.card-list {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.filters-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
}
|
||||
.filters {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
.search-box {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.search-input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
.filter-select {
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.view-toggle-group.icon-group {
|
||||
margin-top: 4px;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
.icon-btn {
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.filters label {
|
||||
margin-bottom: 2px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.search-label {
|
||||
display: none !important;
|
||||
}
|
||||
.header-toggle-group {
|
||||
display: flex !important;
|
||||
position: static;
|
||||
justify-content: flex-end;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.filters-toggle-group {
|
||||
display: none !important;
|
||||
}
|
||||
.page-header {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.card-list {
|
||||
grid-template-columns: 1fr;
|
||||
width: 100%;
|
||||
}
|
||||
.map-card {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
max-height: none;
|
||||
padding: 16px 16px 24px 16px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.card-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-bottom: 12px;
|
||||
object-fit: contain;
|
||||
border-radius: 8px;
|
||||
background: #f5f5f5;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.card-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #1a237e;
|
||||
margin-bottom: 4px;
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: initial;
|
||||
text-align: left;
|
||||
word-break: break-all;
|
||||
}
|
||||
.card-author {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 6px;
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: initial;
|
||||
text-align: left;
|
||||
}
|
||||
.card-info {
|
||||
font-size: 13px;
|
||||
color: #2563eb;
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: initial;
|
||||
text-align: left;
|
||||
}
|
||||
.card-date {
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
margin-bottom: 6px;
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: initial;
|
||||
text-align: left;
|
||||
}
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin-top: 2px;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tag {
|
||||
padding: 4px 8px;
|
||||
background: #f5f7fa;
|
||||
color: #2563eb;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.page-jump {
|
||||
display: none !important;
|
||||
}
|
||||
.page-btn-text.desktop-only {
|
||||
display: none !important;
|
||||
}
|
||||
.page-btn-arrow.mobile-only {
|
||||
display: inline !important;
|
||||
font-size: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.back-to-top-btn {
|
||||
position: fixed;
|
||||
right: 18px;
|
||||
bottom: 18px;
|
||||
z-index: 999;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(37,99,235,0.12);
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.back-to-top-btn:hover {
|
||||
background: #e3f0ff;
|
||||
}
|
||||
.back-to-top-btn svg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media (min-width: 701px) {
|
||||
.header-toggle-group {
|
||||
display: none !important;
|
||||
}
|
||||
.filters-toggle-group {
|
||||
display: flex !important;
|
||||
}
|
||||
.page-btn-text.desktop-only {
|
||||
display: inline !important;
|
||||
}
|
||||
.page-btn-arrow.mobile-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.filters-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.icon-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.icon-btn {
|
||||
padding: 4px 8px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f7fa;
|
||||
color: #2563eb;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
font-size: 16px;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
outline: none;
|
||||
}
|
||||
.icon-btn.active {
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
}
|
||||
.icon-btn:not(.active):hover {
|
||||
background: #e3f0ff;
|
||||
color: #1a237e;
|
||||
}
|
||||
.icon-btn:first-child {
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
border-right: 1px solid #2563eb22;
|
||||
}
|
||||
.icon-btn:last-child {
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
.search-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.search-input {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
padding: 0 36px 0 12px;
|
||||
font-size: 15px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #ddd;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
}
|
||||
.search-btn-icon {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: #fff;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.search-btn-icon:hover {
|
||||
background: #e3f0ff;
|
||||
}
|
||||
.search-btn-icon svg {
|
||||
display: block;
|
||||
}
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
color: #aaa;
|
||||
font-size: 18px;
|
||||
margin: 32px 0 24px 0;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.clear-btn {
|
||||
position: absolute;
|
||||
right: 38px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: background 0.2s;
|
||||
z-index: 2;
|
||||
}
|
||||
.clear-btn:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.clear-btn svg {
|
||||
display: block;
|
||||
}
|
||||
.search-label {
|
||||
font-size: 15px;
|
||||
color: #222;
|
||||
margin-right: 6px;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user