拆分 HomeView.vue 巨型文件
This commit is contained in:
yml
@@ -0,0 +1,51 @@
|
||||
export const coinRangeOptions = [
|
||||
{ label: '全部区间', min: undefined, max: undefined },
|
||||
{ label: '0-100', min: 0, max: 100 },
|
||||
{ label: '100-300', min: 100, max: 300 },
|
||||
{ label: '300-500', min: 300, max: 500 },
|
||||
{ label: '500+', min: 500, max: undefined },
|
||||
]
|
||||
|
||||
export const moneyRangeOptions = [
|
||||
{ label: '全部区间', min: undefined, max: undefined },
|
||||
{ label: '0-50', min: 0, max: 50 },
|
||||
{ label: '50-100', min: 50, max: 100 },
|
||||
{ label: '100-200', min: 100, max: 200 },
|
||||
{ label: '200+', min: 200, max: undefined },
|
||||
]
|
||||
|
||||
export const totalRangeOptions = [
|
||||
{ label: '全部区间', min: undefined, max: undefined },
|
||||
{ label: '0-500', min: 0, max: 500 },
|
||||
{ label: '500-1000', min: 500, max: 1000 },
|
||||
{ label: '1000-2000', min: 1000, max: 2000 },
|
||||
{ label: '2000-5000', min: 2000, max: 5000 },
|
||||
]
|
||||
|
||||
export const fireLevelRangeOptions = [
|
||||
{ label: '全部等级', min: undefined, max: undefined },
|
||||
{ label: '38-50', min: 38, max: 50 },
|
||||
{ label: '50-60', min: 50, max: 60 },
|
||||
{ label: '60-70', min: 60, max: 70 },
|
||||
{ label: '70+', min: 70, max: undefined },
|
||||
]
|
||||
|
||||
export function rangeLabel(
|
||||
min: number | undefined,
|
||||
max: number | undefined,
|
||||
fallback: string
|
||||
) {
|
||||
if (min !== undefined && max !== undefined) return `${min}-${max}`
|
||||
if (min !== undefined) return `${min}+`
|
||||
if (max !== undefined) return `≤${max}`
|
||||
return fallback
|
||||
}
|
||||
|
||||
export function isRangeSelected(
|
||||
currentMin: number | undefined,
|
||||
currentMax: number | undefined,
|
||||
min: number | undefined,
|
||||
max: number | undefined
|
||||
) {
|
||||
return currentMin === min && currentMax === max
|
||||
}
|
||||
@@ -0,0 +1,208 @@
|
||||
import { reactive, ref, computed, type Ref } from 'vue'
|
||||
import type { ListingPublishOptions } from '@/api/listingOptions'
|
||||
import type { Listing } from '@/api/listings'
|
||||
import { assetRegions } from '@/utils/listingDisplay'
|
||||
|
||||
export type FilterPopoverKey =
|
||||
| 'insurance'
|
||||
| 'stamina'
|
||||
| 'load'
|
||||
| 'region'
|
||||
| 'coin'
|
||||
| 'price'
|
||||
| 'deposit'
|
||||
| 'total'
|
||||
| 'skin'
|
||||
| 'rank'
|
||||
| 'fireLevel'
|
||||
| 'loginMethod'
|
||||
|
||||
export type StringFilterKey =
|
||||
| 'insurance'
|
||||
| 'stamina'
|
||||
| 'load'
|
||||
| 'region'
|
||||
| 'rank'
|
||||
| 'loginMethod'
|
||||
|
||||
export interface HomeFilters {
|
||||
keyword: string
|
||||
server: string
|
||||
region: string
|
||||
loginMethod: string
|
||||
rank: string
|
||||
insurance: string
|
||||
stamina: string
|
||||
load: string
|
||||
skinGroup: string
|
||||
skinName: string
|
||||
minCoin: number | undefined
|
||||
maxCoin: number | undefined
|
||||
minPrice: number | undefined
|
||||
maxPrice: number | undefined
|
||||
minDeposit: number | undefined
|
||||
maxDeposit: number | undefined
|
||||
minTotal: number | undefined
|
||||
maxTotal: number | undefined
|
||||
minFireLevel: number | undefined
|
||||
maxFireLevel: number | undefined
|
||||
}
|
||||
|
||||
export function useHomeFilters(
|
||||
publishOptions: Ref<ListingPublishOptions>,
|
||||
listings: Ref<Listing[]>
|
||||
) {
|
||||
const filters = reactive<HomeFilters>({
|
||||
keyword: '',
|
||||
server: '',
|
||||
region: '',
|
||||
loginMethod: '',
|
||||
rank: '',
|
||||
insurance: '',
|
||||
stamina: '',
|
||||
load: '',
|
||||
skinGroup: '',
|
||||
skinName: '',
|
||||
minCoin: undefined,
|
||||
maxCoin: undefined,
|
||||
minPrice: undefined,
|
||||
maxPrice: undefined,
|
||||
minDeposit: undefined,
|
||||
maxDeposit: undefined,
|
||||
minTotal: undefined,
|
||||
maxTotal: undefined,
|
||||
minFireLevel: undefined,
|
||||
maxFireLevel: undefined,
|
||||
})
|
||||
|
||||
const activeFilterPopover = ref<FilterPopoverKey | ''>('')
|
||||
|
||||
const regionOptions = computed(() =>
|
||||
uniqueOptions([
|
||||
...publishOptions.value.region_options,
|
||||
...listings.value.flatMap((item) => assetRegions(item)),
|
||||
])
|
||||
)
|
||||
|
||||
const loginMethodOptions = computed(() =>
|
||||
uniqueOptions(
|
||||
publishOptions.value.login_method_options
|
||||
.map((item) => item.trim())
|
||||
.filter(Boolean)
|
||||
)
|
||||
)
|
||||
|
||||
const skinFilterGroups = computed(() => {
|
||||
const preferred = ['operatorRed', 'operatorGold']
|
||||
return preferred
|
||||
.map((key) => publishOptions.value.skin_groups.find((group) => group.key === key))
|
||||
.filter((group): group is ListingPublishOptions['skin_groups'][number] => Boolean(group))
|
||||
})
|
||||
|
||||
const skinChipLabel = computed(() => {
|
||||
if (filters.skinName) return filters.skinName
|
||||
if (filters.skinGroup) {
|
||||
return skinFilterGroups.value.find((group) => group.key === filters.skinGroup)?.title || '皮肤'
|
||||
}
|
||||
return '皮肤'
|
||||
})
|
||||
|
||||
function uniqueOptions(values: string[]) {
|
||||
return [...new Set(values.map((item) => item.trim()).filter(Boolean))]
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
filters.keyword = ''
|
||||
filters.server = ''
|
||||
filters.region = ''
|
||||
filters.loginMethod = ''
|
||||
filters.rank = ''
|
||||
filters.insurance = ''
|
||||
filters.stamina = ''
|
||||
filters.load = ''
|
||||
filters.skinGroup = ''
|
||||
filters.skinName = ''
|
||||
filters.minCoin = undefined
|
||||
filters.maxCoin = undefined
|
||||
filters.minPrice = undefined
|
||||
filters.maxPrice = undefined
|
||||
filters.minDeposit = undefined
|
||||
filters.maxDeposit = undefined
|
||||
filters.minTotal = undefined
|
||||
filters.maxTotal = undefined
|
||||
filters.minFireLevel = undefined
|
||||
filters.maxFireLevel = undefined
|
||||
}
|
||||
|
||||
function setStringFilter(key: StringFilterKey, value: string) {
|
||||
filters[key] = value
|
||||
closeFilterPopover()
|
||||
}
|
||||
|
||||
function setCoinRange(min: number | undefined, max: number | undefined) {
|
||||
filters.minCoin = min
|
||||
filters.maxCoin = max
|
||||
}
|
||||
|
||||
function setPriceRange(min: number | undefined, max: number | undefined) {
|
||||
filters.minPrice = min
|
||||
filters.maxPrice = max
|
||||
}
|
||||
|
||||
function setDepositRange(min: number | undefined, max: number | undefined) {
|
||||
filters.minDeposit = min
|
||||
filters.maxDeposit = max
|
||||
}
|
||||
|
||||
function setTotalRange(min: number | undefined, max: number | undefined) {
|
||||
filters.minTotal = min
|
||||
filters.maxTotal = max
|
||||
}
|
||||
|
||||
function setFireLevelRange(min: number | undefined, max: number | undefined) {
|
||||
filters.minFireLevel = min
|
||||
filters.maxFireLevel = max
|
||||
}
|
||||
|
||||
function setSkinFilter(group: string, name = '') {
|
||||
filters.skinGroup = group
|
||||
filters.skinName = name
|
||||
}
|
||||
|
||||
function resetSkinFilter() {
|
||||
filters.skinGroup = ''
|
||||
filters.skinName = ''
|
||||
}
|
||||
|
||||
function setFilterPopover(key: FilterPopoverKey, visible: boolean) {
|
||||
if (visible) {
|
||||
activeFilterPopover.value = key
|
||||
return
|
||||
}
|
||||
if (activeFilterPopover.value === key) activeFilterPopover.value = ''
|
||||
}
|
||||
|
||||
function closeFilterPopover() {
|
||||
activeFilterPopover.value = ''
|
||||
}
|
||||
|
||||
return {
|
||||
filters,
|
||||
activeFilterPopover,
|
||||
regionOptions,
|
||||
loginMethodOptions,
|
||||
skinFilterGroups,
|
||||
skinChipLabel,
|
||||
resetFilters,
|
||||
setStringFilter,
|
||||
setCoinRange,
|
||||
setPriceRange,
|
||||
setDepositRange,
|
||||
setTotalRange,
|
||||
setFireLevelRange,
|
||||
setSkinFilter,
|
||||
resetSkinFilter,
|
||||
setFilterPopover,
|
||||
closeFilterPopover,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
import { ref, onMounted, onBeforeUnmount, watch, type Ref } from 'vue'
|
||||
import { fetchListingsPage, type Listing, type PublicListingQuery } from '@/api/listings'
|
||||
import type { HomeFilters } from './useHomeFilters'
|
||||
|
||||
const homePageSize = 12
|
||||
|
||||
export function useListingQuery(
|
||||
filters: HomeFilters,
|
||||
sortBy: Ref<string>,
|
||||
activeZone: Ref<string>
|
||||
) {
|
||||
const loading = ref(false)
|
||||
const loadingMore = ref(false)
|
||||
const listings = ref<Listing[]>([])
|
||||
const totalListings = ref(0)
|
||||
const zoneCounts = ref<Record<string, number>>({})
|
||||
const currentPage = ref(1)
|
||||
const hasMoreListings = ref(true)
|
||||
let listingRequestSeq = 0
|
||||
|
||||
function buildListingQuery(page: number): PublicListingQuery {
|
||||
return {
|
||||
page,
|
||||
page_size: homePageSize,
|
||||
keyword: filters.keyword.trim(),
|
||||
sort: sortBy.value,
|
||||
zone: activeZone.value,
|
||||
server: filters.server,
|
||||
region: filters.region,
|
||||
login_method: filters.loginMethod,
|
||||
rank: filters.rank,
|
||||
insurance: filters.insurance,
|
||||
stamina: filters.stamina,
|
||||
load: filters.load,
|
||||
skin_group: filters.skinGroup,
|
||||
skin_name: filters.skinName,
|
||||
min_coin: filters.minCoin,
|
||||
max_coin: filters.maxCoin,
|
||||
min_price: filters.minPrice,
|
||||
max_price: filters.maxPrice,
|
||||
min_deposit: filters.minDeposit,
|
||||
max_deposit: filters.maxDeposit,
|
||||
min_total: filters.minTotal,
|
||||
max_total: filters.maxTotal,
|
||||
min_fire_level: filters.minFireLevel,
|
||||
max_fire_level: filters.maxFireLevel,
|
||||
}
|
||||
}
|
||||
|
||||
function listingQuerySignature() {
|
||||
return JSON.stringify(buildListingQuery(1))
|
||||
}
|
||||
|
||||
async function loadListingsPage(reset = false) {
|
||||
if ((loadingMore.value && !reset) || (!hasMoreListings.value && !reset)) return
|
||||
const requestSeq = ++listingRequestSeq
|
||||
if (reset) {
|
||||
currentPage.value = 1
|
||||
hasMoreListings.value = true
|
||||
}
|
||||
loadingMore.value = true
|
||||
try {
|
||||
const page = await fetchListingsPage(buildListingQuery(currentPage.value))
|
||||
if (requestSeq !== listingRequestSeq) return
|
||||
listings.value = reset ? page.items : [...listings.value, ...page.items]
|
||||
totalListings.value = page.total
|
||||
zoneCounts.value = page.zone_counts
|
||||
hasMoreListings.value = listings.value.length < page.total
|
||||
currentPage.value = page.page + 1
|
||||
requestAnimationFrame(handleWindowScroll)
|
||||
} catch {
|
||||
if (reset) {
|
||||
listings.value = []
|
||||
totalListings.value = 0
|
||||
zoneCounts.value = {}
|
||||
hasMoreListings.value = false
|
||||
}
|
||||
} finally {
|
||||
if (requestSeq === listingRequestSeq) {
|
||||
loadingMore.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleWindowScroll() {
|
||||
if (window.innerHeight + window.scrollY < document.documentElement.scrollHeight - 480) return
|
||||
loadListingsPage(false)
|
||||
}
|
||||
|
||||
function zoneCount(key: string) {
|
||||
if (key === 'all') return zoneCounts.value.all ?? totalListings.value
|
||||
return zoneCounts.value[key] ?? 0
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', handleWindowScroll, { passive: true })
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('scroll', handleWindowScroll)
|
||||
})
|
||||
|
||||
watch(() => listingQuerySignature(), () => {
|
||||
loadListingsPage(true)
|
||||
})
|
||||
|
||||
return {
|
||||
loading,
|
||||
loadingMore,
|
||||
listings,
|
||||
totalListings,
|
||||
zoneCounts,
|
||||
hasMoreListings,
|
||||
loadListingsPage,
|
||||
zoneCount,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,230 @@
|
||||
/* 筛选器相关样式 */
|
||||
.horizontal-filter-card {
|
||||
padding: 24px;
|
||||
border: 1px solid #eef1f5;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 12px rgba(23, 35, 61, 0.03);
|
||||
}
|
||||
|
||||
.filter-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filter-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.filter-title strong {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: #17233d;
|
||||
}
|
||||
|
||||
.filter-title span {
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
background: #f1f5f9;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.filter-chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.filter-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 14px;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.filter-chip:hover {
|
||||
border-color: #ff6a00;
|
||||
background: #fff7ed;
|
||||
}
|
||||
|
||||
.filter-chip.active {
|
||||
border-color: #ff6a00;
|
||||
background: #fff7ed;
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.filter-chip.wide {
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
/* 筛选器弹窗样式 */
|
||||
:global(.home-filter-popover) {
|
||||
padding: 8px !important;
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
.filter-menu,
|
||||
.range-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.filter-menu button,
|
||||
.range-menu button {
|
||||
padding: 10px 14px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.filter-menu button:hover,
|
||||
.range-menu button:hover {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.filter-menu button.active,
|
||||
.range-menu button.active {
|
||||
background: #fff7ed;
|
||||
color: #ff6a00;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.range-manual {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.range-manual :deep(.el-input-number) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.range-manual span {
|
||||
color: #94a3b8;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 皮肤筛选器 */
|
||||
.skin-filter-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.skin-reset {
|
||||
padding: 10px 14px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.skin-reset:hover {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.skin-reset.active {
|
||||
background: #fff7ed;
|
||||
color: #ff6a00;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.skin-filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.skin-filter-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.skin-filter-title strong {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #17233d;
|
||||
}
|
||||
|
||||
.skin-filter-title button {
|
||||
padding: 4px 8px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.skin-filter-title button:hover {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.skin-filter-title button.active {
|
||||
background: #fff7ed;
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.skin-filter-options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.skin-filter-options button {
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.skin-filter-options button:hover {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.skin-filter-options button.active {
|
||||
background: #fff7ed;
|
||||
color: #ff6a00;
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -177,7 +177,7 @@ function getCountdownMinutes(order: Order) {
|
||||
<template #label>
|
||||
<span class="tab-label">
|
||||
{{ tab.label }}
|
||||
<span v-if="tabCounts[tab.key] > 0" class="tab-count">{{ tabCounts[tab.key] }}</span>
|
||||
<span v-if="(tabCounts?.[tab.key] ?? 0) > 0" class="tab-count">{{ tabCounts?.[tab.key] }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
|
||||
+129
-1945
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
import { Bell } from '@element-plus/icons-vue'
|
||||
import { ElCarousel, ElCarouselItem, ElIcon } from 'element-plus'
|
||||
|
||||
interface Props {
|
||||
announcements: string[]
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="home-announcement">
|
||||
<el-icon><Bell /></el-icon>
|
||||
<el-carousel
|
||||
height="22px"
|
||||
direction="vertical"
|
||||
indicator-position="none"
|
||||
:autoplay="true"
|
||||
:interval="3200"
|
||||
>
|
||||
<el-carousel-item v-for="item in announcements" :key="item">
|
||||
<span>{{ item }}</span>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.home-announcement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 20px;
|
||||
color: #854d0e;
|
||||
background: #fefce8;
|
||||
border: 1px solid #fef08a;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 12px rgba(23, 35, 61, 0.03);
|
||||
}
|
||||
|
||||
.home-announcement :deep(.el-carousel) {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,107 @@
|
||||
<script setup lang="ts">
|
||||
import { ElCarousel, ElCarouselItem } from 'element-plus'
|
||||
|
||||
interface HomeBannerSlide {
|
||||
title?: string
|
||||
eyebrow?: string
|
||||
pill?: string
|
||||
badge?: string
|
||||
tone?: string
|
||||
image_url?: string
|
||||
}
|
||||
|
||||
interface Props {
|
||||
banners: HomeBannerSlide[]
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="hero-board">
|
||||
<el-carousel height="240px" indicator-position="outside" :interval="3600">
|
||||
<el-carousel-item v-for="slide in banners" :key="slide.title || slide.image_url">
|
||||
<div
|
||||
class="hero-slide"
|
||||
:class="[`tone-${slide.tone}`, { 'has-image': slide.image_url }]"
|
||||
>
|
||||
<img
|
||||
v-if="slide.image_url"
|
||||
:src="slide.image_url"
|
||||
:alt="slide.title || slide.eyebrow || '首页轮播'"
|
||||
/>
|
||||
<div class="hero-copy">
|
||||
<span v-if="slide.eyebrow">{{ slide.eyebrow }}</span>
|
||||
<h1 v-if="slide.title">{{ slide.title }}</h1>
|
||||
<p v-if="slide.pill">{{ slide.pill }}</p>
|
||||
</div>
|
||||
<em v-if="slide.badge">{{ slide.badge }}</em>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.hero-board {
|
||||
min-width: 0;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-slide {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 40px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.hero-slide.tone-orange {
|
||||
background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
|
||||
}
|
||||
.hero-slide.tone-green {
|
||||
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
|
||||
}
|
||||
|
||||
.hero-slide img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.hero-slide.has-image::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, transparent 60%);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.hero-slide.has-image .hero-copy {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.hero-copy h1 {
|
||||
margin: 12px 0;
|
||||
font-size: 32px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hero-copy p {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(4px);
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,207 @@
|
||||
<script setup lang="ts">
|
||||
import { Filter, Refresh, ArrowDown } from '@element-plus/icons-vue'
|
||||
import { ElButton, ElIcon } from 'element-plus'
|
||||
import RangeFilter from './RangeFilter.vue'
|
||||
import StringFilter from './StringFilter.vue'
|
||||
import SkinFilter from './SkinFilter.vue'
|
||||
import {
|
||||
coinRangeOptions,
|
||||
moneyRangeOptions,
|
||||
totalRangeOptions,
|
||||
fireLevelRangeOptions,
|
||||
} from '@/composables/home/useFilterOptions'
|
||||
import type { ListingPublishOptions } from '@/api/listingOptions'
|
||||
import type { FilterPopoverKey, HomeFilters } from '@/composables/home/useHomeFilters'
|
||||
|
||||
interface Props {
|
||||
filters: HomeFilters
|
||||
totalListings: number
|
||||
publishOptions: ListingPublishOptions
|
||||
regionOptions: string[]
|
||||
loginMethodOptions: string[]
|
||||
skinFilterGroups: Array<{ key: string; title: string; options: string[] }>
|
||||
skinChipLabel: string
|
||||
activeFilterPopover: FilterPopoverKey | ''
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:filters': [filters: Partial<HomeFilters>]
|
||||
'reset': []
|
||||
'setFilterPopover': [key: FilterPopoverKey, visible: boolean]
|
||||
'closeFilterPopover': []
|
||||
}>()
|
||||
|
||||
const filterPopoverBaseProps = {
|
||||
placement: 'bottom-start',
|
||||
popperClass: 'home-filter-popover',
|
||||
trigger: 'click',
|
||||
showAfter: 0,
|
||||
hideAfter: 0,
|
||||
transition: 'none',
|
||||
} as const
|
||||
|
||||
function filterPopoverProps(key: FilterPopoverKey) {
|
||||
return {
|
||||
...filterPopoverBaseProps,
|
||||
visible: props.activeFilterPopover === key,
|
||||
'onUpdate:visible': (visible: boolean) => emit('setFilterPopover', key, visible),
|
||||
}
|
||||
}
|
||||
|
||||
function updateFilter(key: keyof HomeFilters, value: any) {
|
||||
emit('update:filters', { [key]: value })
|
||||
}
|
||||
|
||||
function closePopover() {
|
||||
emit('closeFilterPopover')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="horizontal-filter-card">
|
||||
<div class="filter-header">
|
||||
<div class="filter-title">
|
||||
<el-icon><Filter /></el-icon>
|
||||
<strong>筛选大厅</strong>
|
||||
<span>{{ totalListings }} 个结果</span>
|
||||
</div>
|
||||
<el-button :icon="Refresh" link @click="emit('reset')">
|
||||
重置全部条件
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="filter-chip-row">
|
||||
<StringFilter
|
||||
label="保险"
|
||||
placeholder="保险"
|
||||
:model-value="filters.insurance"
|
||||
:options="publishOptions.insurance_options"
|
||||
:popover-props="filterPopoverProps('insurance')"
|
||||
@update:model-value="updateFilter('insurance', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<StringFilter
|
||||
label="体力"
|
||||
placeholder="体力"
|
||||
:model-value="filters.stamina"
|
||||
:options="publishOptions.level_options"
|
||||
:popover-props="filterPopoverProps('stamina')"
|
||||
@update:model-value="updateFilter('stamina', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<StringFilter
|
||||
label="负载"
|
||||
placeholder="负载"
|
||||
:model-value="filters.load"
|
||||
:options="publishOptions.level_options"
|
||||
:popover-props="filterPopoverProps('load')"
|
||||
@update:model-value="updateFilter('load', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<StringFilter
|
||||
label="登录方式"
|
||||
placeholder="登录方式"
|
||||
:model-value="filters.loginMethod"
|
||||
:options="loginMethodOptions"
|
||||
:popover-props="filterPopoverProps('loginMethod')"
|
||||
@update:model-value="updateFilter('loginMethod', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<StringFilter
|
||||
label="地区"
|
||||
placeholder="地区选择"
|
||||
:model-value="filters.region"
|
||||
:options="regionOptions"
|
||||
:popover-props="filterPopoverProps('region')"
|
||||
:wide="true"
|
||||
@update:model-value="updateFilter('region', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<RangeFilter
|
||||
label="哈夫币(M)"
|
||||
:model-min="filters.minCoin"
|
||||
:model-max="filters.maxCoin"
|
||||
:options="coinRangeOptions"
|
||||
:popover-props="filterPopoverProps('coin')"
|
||||
:wide="true"
|
||||
@update:model-min="updateFilter('minCoin', $event)"
|
||||
@update:model-max="updateFilter('maxCoin', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<RangeFilter
|
||||
label="租金"
|
||||
:model-min="filters.minPrice"
|
||||
:model-max="filters.maxPrice"
|
||||
:options="moneyRangeOptions"
|
||||
:popover-props="filterPopoverProps('price')"
|
||||
@update:model-min="updateFilter('minPrice', $event)"
|
||||
@update:model-max="updateFilter('maxPrice', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<RangeFilter
|
||||
label="押金"
|
||||
:model-min="filters.minDeposit"
|
||||
:model-max="filters.maxDeposit"
|
||||
:options="moneyRangeOptions"
|
||||
:popover-props="filterPopoverProps('deposit')"
|
||||
@update:model-min="updateFilter('minDeposit', $event)"
|
||||
@update:model-max="updateFilter('maxDeposit', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<RangeFilter
|
||||
label="合计金额"
|
||||
:model-min="filters.minTotal"
|
||||
:model-max="filters.maxTotal"
|
||||
:options="totalRangeOptions"
|
||||
:popover-props="filterPopoverProps('total')"
|
||||
:wide="true"
|
||||
@update:model-min="updateFilter('minTotal', $event)"
|
||||
@update:model-max="updateFilter('maxTotal', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<SkinFilter
|
||||
:skin-group="filters.skinGroup"
|
||||
:skin-name="filters.skinName"
|
||||
:groups="skinFilterGroups"
|
||||
:popover-props="filterPopoverProps('skin')"
|
||||
@update:skin-group="updateFilter('skinGroup', $event)"
|
||||
@update:skin-name="updateFilter('skinName', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<StringFilter
|
||||
label="段位"
|
||||
placeholder="段位"
|
||||
:model-value="filters.rank"
|
||||
:options="publishOptions.rank_options"
|
||||
:popover-props="filterPopoverProps('rank')"
|
||||
@update:model-value="updateFilter('rank', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<RangeFilter
|
||||
label="等级"
|
||||
:model-min="filters.minFireLevel"
|
||||
:model-max="filters.maxFireLevel"
|
||||
:options="fireLevelRangeOptions"
|
||||
:popover-props="filterPopoverProps('fireLevel')"
|
||||
@update:model-min="updateFilter('minFireLevel', $event)"
|
||||
@update:model-max="updateFilter('maxFireLevel', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style src="@/styles/home-filters.css"></style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<script setup lang="ts">
|
||||
interface StatCard {
|
||||
label: string
|
||||
value: string
|
||||
hint: string
|
||||
}
|
||||
|
||||
interface Props {
|
||||
stats: StatCard[]
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="home-stats-v2">
|
||||
<div v-for="item in stats" :key="item.label" class="stat-item">
|
||||
<div class="stat-main">
|
||||
<strong>{{ item.value }}</strong>
|
||||
<span>{{ item.label }}</span>
|
||||
</div>
|
||||
<small>{{ item.hint }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.home-stats-v2 {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
border: 1px solid #eef1f5;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.stat-main {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stat-item strong {
|
||||
font-size: 24px;
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.stat-item span {
|
||||
font-weight: 700;
|
||||
color: #17233d;
|
||||
}
|
||||
|
||||
.stat-item small {
|
||||
margin-top: 4px;
|
||||
color: #7b8798;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<script setup lang="ts">
|
||||
import { ElRadioGroup, ElRadioButton } from 'element-plus'
|
||||
|
||||
interface ZoneOption {
|
||||
key: string
|
||||
label: string
|
||||
hint: string
|
||||
count: number
|
||||
}
|
||||
|
||||
interface Props {
|
||||
zones: ZoneOption[]
|
||||
activeZone: string
|
||||
sortBy: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:activeZone': [value: string]
|
||||
'update:sortBy': [value: string]
|
||||
}>()
|
||||
|
||||
function selectZone(key: string) {
|
||||
emit('update:activeZone', key)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="zones-and-sort">
|
||||
<div class="zone-tabs">
|
||||
<button
|
||||
v-for="zone in zones"
|
||||
:key="zone.key"
|
||||
type="button"
|
||||
class="zone-tab"
|
||||
:class="{ active: activeZone === zone.key }"
|
||||
@click="selectZone(zone.key)"
|
||||
>
|
||||
<div class="zone-main">
|
||||
<strong>{{ zone.label }}</strong>
|
||||
<span class="zone-count">{{ zone.count }}</span>
|
||||
</div>
|
||||
<small>{{ zone.hint }}</small>
|
||||
</button>
|
||||
</div>
|
||||
<div class="list-actions">
|
||||
<el-radio-group :model-value="sortBy" size="small" @update:model-value="(val) => emit('update:sortBy', val as string)">
|
||||
<el-radio-button label="recommended">综合推荐</el-radio-button>
|
||||
<el-radio-button label="coinDesc">哈夫币</el-radio-button>
|
||||
<el-radio-button label="awmDesc">AWM数量</el-radio-button>
|
||||
<el-radio-button label="priceAsc">价格最低</el-radio-button>
|
||||
<el-radio-button label="priceDesc">价格最高</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.zones-and-sort {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.zone-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.zone-tab {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 14px;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.zone-tab:hover {
|
||||
border-color: #ff6a00;
|
||||
background: #fff7ed;
|
||||
}
|
||||
|
||||
.zone-tab.active {
|
||||
border-color: #ff6a00;
|
||||
background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
|
||||
}
|
||||
|
||||
.zone-main {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.zone-tab strong {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #17233d;
|
||||
}
|
||||
|
||||
.zone-count {
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.zone-tab small {
|
||||
font-size: 11px;
|
||||
color: #7b8798;
|
||||
}
|
||||
|
||||
.list-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,343 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterLink } from 'vue-router'
|
||||
import type { Listing } from '@/api/listings'
|
||||
import {
|
||||
formatHafCoinM,
|
||||
getCoinWan,
|
||||
getListingDisplayPrice,
|
||||
getListingTitle,
|
||||
getLoginMethod,
|
||||
getServerRegion,
|
||||
hasAcceleratedSaleRatio,
|
||||
hasGiftResources,
|
||||
readAssetNumber,
|
||||
readAssetString,
|
||||
getResourceQuantity,
|
||||
getOnlineTimeText,
|
||||
getSkinNames,
|
||||
getRatioValue,
|
||||
getDailyLoss,
|
||||
} from '@/utils/listingDisplay'
|
||||
|
||||
interface Props {
|
||||
listing: Listing
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RouterLink class="listing-card-v2" :to="`/listings/${listing.id}`">
|
||||
<div class="card-cover">
|
||||
<img
|
||||
v-if="listing.cover_url"
|
||||
:src="listing.cover_url"
|
||||
:alt="getListingTitle(listing)"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
<div v-else class="empty-cover">HFB</div>
|
||||
<div class="cover-badges">
|
||||
<span v-if="hasAcceleratedSaleRatio(listing)" class="badge sale">特惠</span>
|
||||
<span v-if="hasGiftResources(listing)" class="badge gift">有赠送</span>
|
||||
</div>
|
||||
<div class="ratio-tag">比例 1:{{ getRatioValue(listing).toFixed(1) }}</div>
|
||||
</div>
|
||||
|
||||
<div class="card-details">
|
||||
<div class="card-title-row">
|
||||
<h3>{{ getListingTitle(listing) }}</h3>
|
||||
<span class="daily-loss">日耗 {{ getDailyLoss(listing) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="stats-grid">
|
||||
<div class="stats-col">
|
||||
<div class="stat-row">
|
||||
<label>哈夫币</label>
|
||||
<strong>{{ formatHafCoinM(getCoinWan(listing)) }}</strong>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<label>保险格数</label>
|
||||
<span>{{ readAssetString(listing, 'season_insurance') || '--' }}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<label>体力/负重</label>
|
||||
<span>{{ readAssetString(listing, 'stamina_level') }}/{{ readAssetString(listing, 'load_level') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-col">
|
||||
<div class="stat-row">
|
||||
<label>AWM子弹</label>
|
||||
<span :class="{ highlight: getResourceQuantity(listing, 'awmAmmo') > 0 }">
|
||||
{{ getResourceQuantity(listing, 'awmAmmo') }}发
|
||||
</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<label>六级头甲</label>
|
||||
<span>
|
||||
{{ getResourceQuantity(listing, 'helmet6') }}头 / {{ getResourceQuantity(listing, 'armor6') }}甲
|
||||
</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<label>其他重器</label>
|
||||
<span>巴雷特 {{ getResourceQuantity(listing, 'barrett') }} / 喷子 {{ getResourceQuantity(listing, 'shotgun') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-col">
|
||||
<div class="stat-row">
|
||||
<label>绝密KD</label>
|
||||
<strong>{{ readAssetNumber(listing, 'secret_kd') || '--' }}</strong>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<label>游戏段位</label>
|
||||
<span>{{ listing.rank_level || '未公开' }}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<label>所属区服</label>
|
||||
<span>{{ getServerRegion(listing) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-col">
|
||||
<div class="stat-row">
|
||||
<label>上号方式</label>
|
||||
<span>{{ getLoginMethod(listing) }}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<label>方便上号</label>
|
||||
<span class="time-text">{{ getOnlineTimeText(listing) || '全天候' }}</span>
|
||||
</div>
|
||||
<div class="stat-row skins-row">
|
||||
<label>持有皮肤</label>
|
||||
<span class="skins-text" :title="getSkinNames(listing).join(', ')">
|
||||
{{ getSkinNames(listing).slice(0, 2).join(', ') || '暂无皮肤' }}
|
||||
<em v-if="getSkinNames(listing).length > 2">...</em>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-price">
|
||||
<div class="price-item total">
|
||||
<small>总租金</small>
|
||||
<strong>¥{{ getListingDisplayPrice(listing) }}</strong>
|
||||
</div>
|
||||
<div class="price-item deposit">
|
||||
<small>押金</small>
|
||||
<span>¥{{ listing.deposit_amount }}</span>
|
||||
</div>
|
||||
<div class="price-action">
|
||||
<button class="rent-btn">立即租用</button>
|
||||
</div>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.listing-card-v2 {
|
||||
display: grid;
|
||||
grid-template-columns: 180px minmax(0, 1fr) 160px;
|
||||
gap: 24px;
|
||||
padding: 20px;
|
||||
border: 1px solid #eef1f5;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 12px rgba(23, 35, 61, 0.03);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.listing-card-v2:hover {
|
||||
border-color: #ff6a00;
|
||||
box-shadow: 0 8px 24px rgba(255, 106, 0, 0.12);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card-cover {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.card-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.empty-cover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.cover-badges {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.badge.sale {
|
||||
background: #ef4444;
|
||||
}
|
||||
.badge.gift {
|
||||
background: #10b981;
|
||||
}
|
||||
|
||||
.ratio-tag {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 4px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: #fbbf24;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-title-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-title-row h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: #1e293b;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.daily-loss {
|
||||
padding: 4px 10px;
|
||||
background: #f1f5f9;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stats-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stat-row label {
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-row span,
|
||||
.stat-row strong {
|
||||
font-size: 13px;
|
||||
color: #334155;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-row strong {
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.stat-row .highlight {
|
||||
color: #10b981;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.card-price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.price-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.price-item small {
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.price-item.total strong {
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.price-item.deposit span {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.rent-btn {
|
||||
width: 100%;
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #ff6a00 0%, #ff8533 100%);
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.rent-btn:hover {
|
||||
background: linear-gradient(135deg, #ff7a1a 0%, #ff9544 100%);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,100 @@
|
||||
<script setup lang="ts">
|
||||
import { ArrowDown } from '@element-plus/icons-vue'
|
||||
import { ElInputNumber, ElPopover } from 'element-plus'
|
||||
import { computed } from 'vue'
|
||||
import { rangeLabel, isRangeSelected } from '@/composables/home/useFilterOptions'
|
||||
|
||||
interface RangeOption {
|
||||
label: string
|
||||
min: number | undefined
|
||||
max: number | undefined
|
||||
}
|
||||
|
||||
interface Props {
|
||||
label: string
|
||||
modelMin: number | undefined
|
||||
modelMax: number | undefined
|
||||
options: RangeOption[]
|
||||
popoverProps: Record<string, any>
|
||||
wide?: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelMin': [value: number | undefined]
|
||||
'update:modelMax': [value: number | undefined]
|
||||
close: []
|
||||
}>()
|
||||
|
||||
const minValue = computed({
|
||||
get: () => props.modelMin,
|
||||
set: (val) => emit('update:modelMin', val),
|
||||
})
|
||||
|
||||
const maxValue = computed({
|
||||
get: () => props.modelMax,
|
||||
set: (val) => emit('update:modelMax', val),
|
||||
})
|
||||
|
||||
const isActive = computed(() => {
|
||||
return props.modelMin !== undefined || props.modelMax !== undefined
|
||||
})
|
||||
|
||||
const chipLabel = computed(() => {
|
||||
return rangeLabel(props.modelMin, props.modelMax, props.label)
|
||||
})
|
||||
|
||||
function selectRange(min: number | undefined, max: number | undefined) {
|
||||
emit('update:modelMin', min)
|
||||
emit('update:modelMax', max)
|
||||
emit('close')
|
||||
}
|
||||
|
||||
function isSelected(item: RangeOption) {
|
||||
return isRangeSelected(props.modelMin, props.modelMax, item.min, item.max)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-popover v-bind="popoverProps" :width="350">
|
||||
<template #reference>
|
||||
<button
|
||||
class="filter-chip"
|
||||
:class="{ active: isActive, wide }"
|
||||
type="button"
|
||||
>
|
||||
<span>{{ chipLabel }}</span>
|
||||
<el-icon><ArrowDown /></el-icon>
|
||||
</button>
|
||||
</template>
|
||||
<div class="range-menu">
|
||||
<button
|
||||
v-for="item in options"
|
||||
:key="item.label"
|
||||
type="button"
|
||||
:class="{ active: isSelected(item) }"
|
||||
@click="selectRange(item.min, item.max)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</button>
|
||||
<div class="range-manual">
|
||||
<el-input-number
|
||||
v-model="minValue"
|
||||
:controls="false"
|
||||
:min="0"
|
||||
placeholder="最小值"
|
||||
/>
|
||||
<span>-</span>
|
||||
<el-input-number
|
||||
v-model="maxValue"
|
||||
:controls="false"
|
||||
:min="0"
|
||||
placeholder="最大值"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<style src="@/styles/home-filters.css"></style>
|
||||
@@ -0,0 +1,96 @@
|
||||
<script setup lang="ts">
|
||||
import { ArrowDown } from '@element-plus/icons-vue'
|
||||
import { ElPopover } from 'element-plus'
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface SkinGroup {
|
||||
key: string
|
||||
title: string
|
||||
options: string[]
|
||||
}
|
||||
|
||||
interface Props {
|
||||
skinGroup: string
|
||||
skinName: string
|
||||
groups: SkinGroup[]
|
||||
popoverProps: Record<string, any>
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:skinGroup': [value: string]
|
||||
'update:skinName': [value: string]
|
||||
close: []
|
||||
}>()
|
||||
|
||||
const isActive = computed(() => {
|
||||
return !!props.skinGroup || !!props.skinName
|
||||
})
|
||||
|
||||
const chipLabel = computed(() => {
|
||||
if (props.skinName) return props.skinName
|
||||
if (props.skinGroup) {
|
||||
return props.groups.find((g) => g.key === props.skinGroup)?.title || '皮肤'
|
||||
}
|
||||
return '皮肤'
|
||||
})
|
||||
|
||||
function selectSkin(group: string, name = '') {
|
||||
emit('update:skinGroup', group)
|
||||
emit('update:skinName', name)
|
||||
emit('close')
|
||||
}
|
||||
|
||||
function resetSkin() {
|
||||
emit('update:skinGroup', '')
|
||||
emit('update:skinName', '')
|
||||
emit('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-popover v-bind="popoverProps" :width="320">
|
||||
<template #reference>
|
||||
<button class="filter-chip" :class="{ active: isActive }" type="button">
|
||||
<span>{{ chipLabel }}</span>
|
||||
<el-icon><ArrowDown /></el-icon>
|
||||
</button>
|
||||
</template>
|
||||
<div class="skin-filter-menu">
|
||||
<button
|
||||
class="skin-reset"
|
||||
type="button"
|
||||
:class="{ active: !skinGroup && !skinName }"
|
||||
@click="resetSkin"
|
||||
>
|
||||
全部皮肤
|
||||
</button>
|
||||
<div v-for="group in groups" :key="group.key" class="skin-filter-group">
|
||||
<div class="skin-filter-title">
|
||||
<strong>{{ group.title }}</strong>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: skinGroup === group.key && !skinName }"
|
||||
@click="selectSkin(group.key)"
|
||||
>
|
||||
全部{{ group.title.replace('干员', '') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="skin-filter-options">
|
||||
<button
|
||||
v-for="skin in group.options"
|
||||
:key="skin"
|
||||
type="button"
|
||||
:class="{ active: skinGroup === group.key && skinName === skin }"
|
||||
@click="selectSkin(group.key, skin)"
|
||||
>
|
||||
{{ skin }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<style src="@/styles/home-filters.css"></style>
|
||||
@@ -0,0 +1,69 @@
|
||||
<script setup lang="ts">
|
||||
import { ArrowDown } from '@element-plus/icons-vue'
|
||||
import { ElPopover } from 'element-plus'
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
label: string
|
||||
placeholder: string
|
||||
modelValue: string
|
||||
options: string[]
|
||||
popoverProps: Record<string, any>
|
||||
wide?: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string]
|
||||
close: []
|
||||
}>()
|
||||
|
||||
const isActive = computed(() => {
|
||||
return !!props.modelValue
|
||||
})
|
||||
|
||||
const displayLabel = computed(() => {
|
||||
return props.modelValue || props.placeholder
|
||||
})
|
||||
|
||||
function selectOption(value: string) {
|
||||
emit('update:modelValue', value)
|
||||
emit('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-popover v-bind="popoverProps" :width="220">
|
||||
<template #reference>
|
||||
<button
|
||||
class="filter-chip"
|
||||
:class="{ active: isActive, wide }"
|
||||
type="button"
|
||||
>
|
||||
<span>{{ displayLabel }}</span>
|
||||
<el-icon><ArrowDown /></el-icon>
|
||||
</button>
|
||||
</template>
|
||||
<div class="filter-menu">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: !modelValue }"
|
||||
@click="selectOption('')"
|
||||
>
|
||||
{{ placeholder }}
|
||||
</button>
|
||||
<button
|
||||
v-for="item in options"
|
||||
:key="item"
|
||||
type="button"
|
||||
:class="{ active: modelValue === item }"
|
||||
@click="selectOption(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</button>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<style src="@/styles/home-filters.css"></style>
|
||||
Reference in New Issue
Block a user