From 8631daf6d47993dcb217078d8a1ec9786a0f727d Mon Sep 17 00:00:00 2001
From: yml <yml@yml.com>
Date: Sat, 23 May 2026 02:11:18 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E5=81=9A=E4=BA=86=20PC=20=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/styles/base.css           |  60 +-
 frontend/src/views/public/HomeView.vue | 885 ++++++++++++++++++++++---
 2 files changed, 821 insertions(+), 124 deletions(-)

diff --git a/frontend/src/styles/base.css b/frontend/src/styles/base.css
index 0828008..88ec32d 100644
--- a/frontend/src/styles/base.css
+++ b/frontend/src/styles/base.css
@@ -651,12 +651,7 @@ h1 {
 /* PC public marketplace */
 .pc-app-shell {
   min-height: 100vh;
-  background: radial-gradient(
-      circle at 12% 0%,
-      rgba(255, 200, 87, 0.24),
-      transparent 32%
-    ),
-    linear-gradient(180deg, #fff9e8 0, #f6f8fb 300px, #f6f8fb 100%);
+  background: #f5f7fa;
 }
 
 .pc-topbar {
@@ -664,14 +659,14 @@ h1 {
   top: 0;
   z-index: 20;
   display: grid;
-  grid-template-columns: auto auto minmax(280px, 440px) auto;
+  grid-template-columns: auto auto minmax(260px, 420px) auto;
   align-items: center;
-  gap: 24px;
-  min-height: 72px;
-  border-bottom: 1px solid rgba(231, 183, 69, 0.32);
-  background: rgba(255, 255, 255, 0.92);
-  padding: 0 clamp(24px, 5vw, 72px);
-  backdrop-filter: blur(14px);
+  gap: 18px;
+  min-height: 66px;
+  border-bottom: 1px solid #e8edf3;
+  background: rgba(255, 255, 255, 0.94);
+  padding: 0 clamp(20px, 4vw, 56px);
+  backdrop-filter: blur(12px);
 }
 
 .pc-brand,
@@ -694,19 +689,18 @@ h1 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 44px;
-  height: 44px;
-  border-radius: 14px;
-  background: linear-gradient(135deg, #f59e0b, #111827);
-  color: #ffffff;
+  width: 38px;
+  height: 38px;
+  border-radius: 12px;
+  background: #fff3e8;
+  color: #ff6a00;
   font-size: 13px;
-  letter-spacing: 0.5px;
-  box-shadow: 0 14px 28px rgba(245, 158, 11, 0.26);
+  font-weight: 900;
 }
 
 .pc-brand-text {
   color: #111827;
-  font-size: 18px;
+  font-size: 17px;
 }
 
 .pc-nav {
@@ -727,18 +721,18 @@ h1 {
 
 .pc-nav-link.router-link-active,
 .pc-nav-link:hover {
-  background: #fff3c4;
-  color: #92400e;
+  background: #fff3e8;
+  color: #ff6a00;
 }
 
 .pc-search {
   gap: 10px;
-  height: 42px;
-  border: 1px solid #f1d38b;
+  height: 40px;
+  border: 1px solid #edf1f6;
   border-radius: 999px;
-  background: #fffaf0;
+  background: #f7f9fc;
   padding: 0 16px;
-  color: #b45309;
+  color: #7b8798;
 }
 
 .pc-search input {
@@ -766,14 +760,14 @@ h1 {
 
 .pc-icon-link {
   width: 40px;
-  border: 1px solid #e5e7eb;
+  border: 1px solid #e8edf3;
   background: #ffffff;
   color: #4b5563;
 }
 
 .pc-login-link {
   gap: 6px;
-  border: 1px solid #e5e7eb;
+  border: 1px solid #e8edf3;
   background: #ffffff;
   padding: 0 14px;
   color: #111827;
@@ -781,10 +775,10 @@ h1 {
 
 .pc-post-link {
   gap: 6px;
-  background: linear-gradient(135deg, #f59e0b, #f97316);
+  background: #ff6a00;
   padding: 0 16px;
   color: #ffffff;
-  box-shadow: 0 12px 24px rgba(249, 115, 22, 0.22);
+  box-shadow: 0 10px 22px rgba(255, 106, 0, 0.18);
 }
 
 .pc-post-link.large {
@@ -793,9 +787,9 @@ h1 {
 }
 
 .pc-main {
-  width: min(1240px, calc(100% - 48px));
+  width: min(1280px, calc(100% - 40px));
   margin: 0 auto;
-  padding: 28px 0 56px;
+  padding: 18px 0 56px;
 }
 
 .anti-fraud-strip {
diff --git a/frontend/src/views/public/HomeView.vue b/frontend/src/views/public/HomeView.vue
index 8993cae..7177089 100644
--- a/frontend/src/views/public/HomeView.vue
+++ b/frontend/src/views/public/HomeView.vue
@@ -1,110 +1,813 @@
 <script setup lang="ts">
+import { computed, onMounted, reactive, ref } from "vue";
 import {
-  ArrowRight,
-  CircleCheck,
-  Coin,
-  Iphone,
-  Lock,
-  Pointer,
-  Trophy,
+  Bell,
+  CirclePlus,
+  Filter,
+  Headset,
+  Refresh,
+  Search,
 } from "@element-plus/icons-vue";
 
-const quickStats = [
-  { label: "在线账号", value: "128+", desc: "覆盖热门区服" },
-  { label: "最快交接", value: "3分钟", desc: "号主在线响应" },
-  { label: "押金托管", value: "平台担保", desc: "归还后释放" },
-];
+import {
+  defaultHomeAnnouncements,
+  defaultHomeBanners,
+  fetchMobileHomeConfig,
+  type HomeBannerSlide,
+} from "@/api/homeConfig";
+import {
+  defaultListingPublishOptions,
+  type ListingPublishOptions,
+} from "@/api/listingOptions";
+import { fetchListings, type Listing } from "@/api/listings";
+import { buildFallbackListings } from "@/views/mobile/mobileHomeFallback";
+import {
+  formatHafCoinM,
+  getCoinM,
+  getCoinWan,
+  getListingChips,
+  getListingDisplayPrice,
+  getListingSubtitle,
+  getListingTitle,
+  getLoginMethod,
+  getServerRegion,
+  hasGiftResources,
+  normalizeLoginMethod,
+  normalizeServerRegion,
+} from "@/views/mobile/listingDisplay";
 
-const categories = [
-  "烽火地带",
-  "全面战场",
-  "高哈夫币",
-  "高段位",
-  "低押金",
-  "可包夜",
-];
+const loading = ref(false);
+const loadFailed = ref(false);
+const listings = ref<Listing[]>([]);
+const announcements = ref<string[]>(defaultHomeAnnouncements);
+const banners = ref<HomeBannerSlide[]>(defaultHomeBanners);
+const publishOptions = ref<ListingPublishOptions>(defaultListingPublishOptions);
+const filters = reactive({
+  keyword: "",
+  server: "",
+  loginMethod: "",
+  rank: "",
+  minCoin: undefined as number | undefined,
+  maxPrice: undefined as number | undefined,
+});
+const sortBy = ref("recommended");
+
+const fallbackListings = computed(() => buildFallbackListings(publishOptions.value));
+const sourceListings = computed(() =>
+  loadFailed.value ? fallbackListings.value : listings.value
+);
+
+const serverOptions = computed(() =>
+  uniqueOptions(
+    publishOptions.value.server_options
+      .map((item) => normalizeServerRegion(item))
+      .filter(Boolean)
+  )
+);
+const loginMethodOptions = computed(() =>
+  uniqueOptions(
+    publishOptions.value.login_method_options
+      .map((item) => normalizeLoginMethod(item))
+      .filter(Boolean)
+  )
+);
+
+const visibleListings = computed(() => {
+  const keyword = filters.keyword.trim().toLowerCase();
+  const filtered = sourceListings.value.filter((item) => {
+    const text = [
+      item.title,
+      item.description,
+      item.rank_level,
+      getServerRegion(item),
+      getLoginMethod(item),
+      getListingTitle(item),
+    ]
+      .join(" ")
+      .toLowerCase();
+    if (keyword && !text.includes(keyword)) return false;
+    if (filters.server && getServerRegion(item) !== filters.server) return false;
+    if (filters.loginMethod && getLoginMethod(item) !== filters.loginMethod) return false;
+    if (filters.rank && item.rank_level !== filters.rank) return false;
+    if (filters.minCoin && getCoinM(item) < filters.minCoin) return false;
+    if (filters.maxPrice && getListingDisplayPrice(item) > filters.maxPrice) return false;
+    return true;
+  });
+
+  return [...filtered].sort((a, b) => {
+    if (sortBy.value === "priceAsc") {
+      return getListingDisplayPrice(a) - getListingDisplayPrice(b);
+    }
+    if (sortBy.value === "priceDesc") {
+      return getListingDisplayPrice(b) - getListingDisplayPrice(a);
+    }
+    if (sortBy.value === "coinDesc") {
+      return getCoinWan(b) - getCoinWan(a);
+    }
+    const bTime = Date.parse(b.published_at || b.created_at || "") || 0;
+    const aTime = Date.parse(a.published_at || a.created_at || "") || 0;
+    return getCoinWan(b) - getCoinWan(a) || bTime - aTime;
+  });
+});
+
+const statCards = computed(() => [
+  { label: "可租账号", value: `${visibleListings.value.length}`, hint: "当前筛选结果" },
+  {
+    label: "高哈夫币",
+    value: `${sourceListings.value.filter((item) => getCoinM(item) >= 100).length}`,
+    hint: "100M 以上",
+  },
+  {
+    label: "账密登录",
+    value: `${sourceListings.value.filter((item) => getLoginMethod(item) === "账号密码").length}`,
+    hint: "交接更快",
+  },
+]);
+
+onMounted(loadHome);
+
+async function loadHome() {
+  loading.value = true;
+  loadFailed.value = false;
+  try {
+    const [nextListings, config] = await Promise.all([
+      fetchListings(),
+      fetchMobileHomeConfig(),
+    ]);
+    listings.value = nextListings;
+    announcements.value = config.announcements;
+    banners.value = config.banners;
+    publishOptions.value = config.publish_options;
+  } catch {
+    loadFailed.value = true;
+    announcements.value = defaultHomeAnnouncements;
+    banners.value = defaultHomeBanners;
+    publishOptions.value = defaultListingPublishOptions;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function resetFilters() {
+  filters.keyword = "";
+  filters.server = "";
+  filters.loginMethod = "";
+  filters.rank = "";
+  filters.minCoin = undefined;
+  filters.maxPrice = undefined;
+  sortBy.value = "recommended";
+}
+
+function uniqueOptions(values: string[]) {
+  return [...new Set(values.map((item) => item.trim()).filter(Boolean))];
+}
 </script>
 
 <template>
-  <section class="pc-home page">
-    <div class="anti-fraud-strip">
-      <el-icon><Lock /></el-icon>
-      <span
-        >防骗提示：哈夫币租号仅通过平台下单与托管押金，切勿私下转账、共享验证码或点击陌生链接。</span
+  <section class="pc-home-redesign">
+    <div class="home-head">
+      <div class="brand-block">
+        <span class="brand-mark-large">锤</span>
+        <div>
+          <strong>大锤商行</strong>
+          <small>三角洲行动哈夫币租号</small>
+        </div>
+      </div>
+      <div class="home-searchbar">
+        <el-icon><Search /></el-icon>
+        <input v-model="filters.keyword" placeholder="搜区服 / 段位 / 哈夫币 / 皮肤" />
+      </div>
+      <RouterLink class="home-service" to="/notifications">
+        <el-icon><Headset /></el-icon>
+        <span>客服</span>
+      </RouterLink>
+      <RouterLink class="home-publish" to="/seller/listings/create">
+        <el-icon><CirclePlus /></el-icon>
+        <span>发布账号</span>
+      </RouterLink>
+    </div>
+
+    <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>
 
-    <section class="pc-hero">
-      <div class="pc-hero-content">
-        <p class="eyebrow">Delta Force Account Rental</p>
-        <h1>三角洲行动账号租赁大厅</h1>
-        <p class="pc-hero-desc">
-          按区服、段位、哈夫币、价格快速筛选，平台担保交接，找号更省心。
-        </p>
-        <div class="pc-hero-actions">
-          <RouterLink class="primary-cta" to="/listings">
-            立即找号
-            <el-icon><ArrowRight /></el-icon>
-          </RouterLink>
-          <RouterLink class="secondary-cta" to="/seller/listings/create"
-            >我要发布账号</RouterLink
-          >
+    <section class="home-grid">
+      <aside class="filter-panel-pc">
+        <div class="panel-title">
+          <div>
+            <strong>筛选</strong>
+            <span>{{ visibleListings.length }} 个结果</span>
+          </div>
+          <el-button :icon="Refresh" link @click="resetFilters">重置</el-button>
         </div>
-        <div class="hero-tags">
-          <span v-for="item in categories" :key="item">{{ item }}</span>
-        </div>
-      </div>
 
-      <aside class="pc-action-card">
-        <h2>快捷入口</h2>
-        <RouterLink class="action-row" to="/orders">
-          <el-icon><Pointer /></el-icon>
-          <div>
-            <strong>我租到的</strong>
-            <span>查看交接、租赁中与归还订单</span>
-          </div>
-        </RouterLink>
-        <RouterLink class="action-row" to="/seller/listings">
-          <el-icon><Trophy /></el-icon>
-          <div>
-            <strong>我租出的</strong>
-            <span>管理已发布账号与租客交接</span>
-          </div>
-        </RouterLink>
-        <RouterLink class="action-row highlight" to="/seller/listings/create">
-          <el-icon><Coin /></el-icon>
-          <div>
-            <strong>账号发布</strong>
-            <span>实名认证后即可上架出租</span>
-          </div>
-        </RouterLink>
+        <label>
+          <span>区服</span>
+          <el-select v-model="filters.server" clearable placeholder="全部区服">
+            <el-option v-for="item in serverOptions" :key="item" :label="item" :value="item" />
+          </el-select>
+        </label>
+        <label>
+          <span>上号方式</span>
+          <el-select v-model="filters.loginMethod" clearable placeholder="全部方式">
+            <el-option v-for="item in loginMethodOptions" :key="item" :label="item" :value="item" />
+          </el-select>
+        </label>
+        <label>
+          <span>段位</span>
+          <el-select v-model="filters.rank" clearable placeholder="全部段位">
+            <el-option
+              v-for="item in publishOptions.rank_options"
+              :key="item"
+              :label="item"
+              :value="item"
+            />
+          </el-select>
+        </label>
+        <label>
+          <span>最低哈夫币</span>
+          <el-input-number
+            v-model="filters.minCoin"
+            :min="0"
+            :step="50"
+            class="full-control"
+            placeholder="单位 M"
+          />
+        </label>
+        <label>
+          <span>最高价格</span>
+          <el-input-number
+            v-model="filters.maxPrice"
+            :min="0"
+            :step="50"
+            class="full-control"
+            placeholder="单位 元"
+          />
+        </label>
+
+        <div class="quick-chip-group">
+          <button type="button" @click="filters.minCoin = 100">100M+</button>
+          <button type="button" @click="filters.minCoin = 300">300M+</button>
+          <button type="button" @click="filters.loginMethod = '账号密码'">账密优先</button>
+          <button type="button" @click="filters.server = 'QQ'">QQ 区服</button>
+        </div>
       </aside>
-    </section>
 
-    <div class="pc-stat-grid">
-      <div v-for="item in quickStats" :key="item.label" class="pc-stat-card">
-        <span>{{ item.label }}</span>
-        <strong>{{ item.value }}</strong>
-        <p>{{ item.desc }}</p>
-      </div>
-    </div>
+      <main class="home-main">
+        <section class="hero-board">
+          <el-carousel height="210px" 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>
 
-    <section class="pc-feature-row">
-      <div class="feature-card">
-        <el-icon><CircleCheck /></el-icon>
-        <strong>平台审核上架</strong>
-        <span>账号信息、截图与价格经过审核后展示</span>
-      </div>
-      <div class="feature-card">
-        <el-icon><Lock /></el-icon>
-        <strong>押金账务留痕</strong>
-        <span>订单、押金、仲裁记录全链路可追踪</span>
-      </div>
-      <div class="feature-card">
-        <el-icon><Iphone /></el-icon>
-        <strong>交接流程清晰</strong>
-        <span>号主提交说明，租客确认收号与归还</span>
-      </div>
+        <div class="home-stats">
+          <div v-for="item in statCards" :key="item.label">
+            <strong>{{ item.value }}</strong>
+            <span>{{ item.label }}</span>
+            <small>{{ item.hint }}</small>
+          </div>
+        </div>
+
+        <div class="list-head">
+          <div>
+            <p class="eyebrow">Account Market</p>
+            <h2>可租账号</h2>
+          </div>
+          <div class="list-actions">
+            <el-radio-group v-model="sortBy" size="small">
+              <el-radio-button label="recommended">综合</el-radio-button>
+              <el-radio-button label="coinDesc">哈夫币</el-radio-button>
+              <el-radio-button label="priceAsc">低价</el-radio-button>
+              <el-radio-button label="priceDesc">高价</el-radio-button>
+            </el-radio-group>
+            <RouterLink class="all-link" to="/listings">
+              <el-icon><Filter /></el-icon>
+              全部账号
+            </RouterLink>
+          </div>
+        </div>
+
+        <el-empty
+          v-if="!loading && visibleListings.length === 0"
+          description="没有符合条件的账号"
+        />
+        <div v-else v-loading="loading" class="desktop-list">
+          <RouterLink
+            v-for="item in visibleListings.slice(0, 8)"
+            :key="item.id"
+            class="desktop-card"
+            :to="`/listings/${item.id}`"
+          >
+            <div class="desktop-cover">
+              <img
+                v-if="item.screenshot_urls?.[0]"
+                :src="item.screenshot_urls[0]"
+                :alt="getListingTitle(item)"
+              />
+              <span v-else>HFB</span>
+              <em v-if="hasGiftResources(item)">有赠送</em>
+            </div>
+            <div class="desktop-info">
+              <div class="desktop-title">
+                <strong>{{ getListingTitle(item) }}</strong>
+              </div>
+              <p>{{ getListingSubtitle(item) || item.description || "平台担保交接，资料以截图为准。" }}</p>
+              <div class="desktop-tags">
+                <span>{{ getServerRegion(item) }}</span>
+                <span>{{ getLoginMethod(item) }}</span>
+                <span>{{ item.rank_level || "未填写段位" }}</span>
+                <span
+                  v-for="chip in getListingChips(item).slice(0, 4)"
+                  :key="`${item.id}-${chip.label}`"
+                >
+                  {{ chip.label }}:{{ chip.value }}
+                </span>
+              </div>
+            </div>
+            <div class="desktop-price">
+              <strong>¥{{ getListingDisplayPrice(item) }}</strong>
+              <span>押金 ¥{{ item.deposit_amount }}</span>
+              <small>{{ formatHafCoinM(getCoinWan(item)) }}</small>
+            </div>
+          </RouterLink>
+        </div>
+      </main>
     </section>
   </section>
 </template>
+
+<style scoped>
+.pc-home-redesign {
+  display: grid;
+  gap: 16px;
+}
+
+.home-head,
+.home-announcement,
+.filter-panel-pc,
+.hero-board,
+.home-stats > div,
+.desktop-card {
+  border: 1px solid #e8edf3;
+  border-radius: 12px;
+  background: #ffffff;
+  box-shadow: 0 10px 28px rgba(23, 35, 61, 0.05);
+}
+
+.home-head {
+  display: grid;
+  grid-template-columns: auto minmax(260px, 1fr) auto auto;
+  gap: 12px;
+  align-items: center;
+  padding: 14px;
+}
+
+.brand-block,
+.home-searchbar,
+.home-service,
+.home-publish,
+.home-announcement,
+.panel-title,
+.list-head,
+.list-actions,
+.desktop-tags {
+  display: flex;
+  align-items: center;
+}
+
+.brand-block {
+  gap: 10px;
+}
+
+.brand-mark-large {
+  display: grid;
+  width: 40px;
+  height: 40px;
+  place-items: center;
+  border-radius: 12px;
+  background: #fff3e8;
+  color: #ff6a00;
+  font-weight: 900;
+}
+
+.brand-block strong,
+.brand-block small {
+  display: block;
+}
+
+.brand-block strong {
+  color: #17233d;
+  font-size: 16px;
+}
+
+.brand-block small {
+  margin-top: 2px;
+  color: #7b8798;
+  font-size: 12px;
+}
+
+.home-searchbar {
+  gap: 9px;
+  height: 42px;
+  border: 1px solid #edf1f6;
+  border-radius: 999px;
+  background: #f7f9fc;
+  padding: 0 14px;
+  color: #7b8798;
+}
+
+.home-searchbar input {
+  width: 100%;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: #17233d;
+  font-size: 14px;
+}
+
+.home-service,
+.home-publish,
+.all-link {
+  justify-content: center;
+  gap: 6px;
+  min-height: 40px;
+  border-radius: 999px;
+  padding: 0 14px;
+  font-weight: 800;
+}
+
+.home-service,
+.all-link {
+  border: 1px solid #e8edf3;
+  color: #1477ff;
+}
+
+.home-publish {
+  background: #ff6a00;
+  color: #ffffff;
+}
+
+.home-announcement {
+  gap: 10px;
+  padding: 10px 14px;
+  color: #7a4b00;
+}
+
+.home-announcement :deep(.el-carousel) {
+  flex: 1;
+  min-width: 0;
+}
+
+.home-announcement span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.home-grid {
+  display: grid;
+  grid-template-columns: 248px minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.filter-panel-pc {
+  position: sticky;
+  top: 92px;
+  display: grid;
+  gap: 14px;
+  padding: 16px;
+}
+
+.panel-title {
+  justify-content: space-between;
+}
+
+.panel-title strong,
+.panel-title span,
+.filter-panel-pc label > span {
+  display: block;
+}
+
+.panel-title strong {
+  color: #17233d;
+  font-size: 18px;
+}
+
+.panel-title span {
+  margin-top: 3px;
+  color: #7b8798;
+  font-size: 12px;
+}
+
+.filter-panel-pc label > span {
+  margin-bottom: 7px;
+  color: #536173;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.quick-chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.quick-chip-group button {
+  border: 0;
+  border-radius: 999px;
+  background: #f3f6fa;
+  color: #536173;
+  padding: 7px 10px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.home-main {
+  display: grid;
+  gap: 14px;
+}
+
+.hero-board {
+  overflow: hidden;
+  padding: 0;
+}
+
+.hero-board :deep(.el-carousel__indicators--outside) {
+  margin-top: 4px;
+}
+
+.hero-slide {
+  position: relative;
+  display: flex;
+  min-height: 210px;
+  overflow: hidden;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #ffffff 0%, #eef6ff 100%);
+  padding: 26px;
+}
+
+.hero-slide.tone-green {
+  background: linear-gradient(135deg, #ffffff 0%, #effcf4 100%);
+}
+
+.hero-slide.tone-orange {
+  background: linear-gradient(135deg, #ffffff 0%, #fff4e8 100%);
+}
+
+.hero-slide.has-image {
+  align-items: flex-end;
+  color: #ffffff;
+}
+
+.hero-slide img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.hero-slide.has-image::after {
+  position: absolute;
+  inset: 0;
+  content: "";
+  background: linear-gradient(90deg, rgba(10, 18, 32, 0.68), rgba(10, 18, 32, 0.12));
+}
+
+.hero-copy {
+  position: relative;
+  z-index: 1;
+  max-width: 680px;
+}
+
+.hero-copy span {
+  color: #1477ff;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.hero-slide.has-image .hero-copy span,
+.hero-slide.has-image .hero-copy h1,
+.hero-slide.has-image .hero-copy p {
+  color: #ffffff;
+}
+
+.hero-copy h1 {
+  margin: 8px 0 0;
+  color: #17233d;
+  font-size: 34px;
+  line-height: 1.18;
+}
+
+.hero-copy p {
+  display: inline-flex;
+  margin: 16px 0 0;
+  border-radius: 999px;
+  background: #ffefb5;
+  color: #7a4b00;
+  padding: 7px 12px;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.hero-slide > em {
+  position: absolute;
+  top: 20px;
+  right: 22px;
+  z-index: 1;
+  border-radius: 12px;
+  background: #ff6a00;
+  color: #ffffff;
+  padding: 8px 10px;
+  font-style: normal;
+  font-weight: 900;
+}
+
+.home-stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.home-stats > div {
+  display: grid;
+  gap: 4px;
+  padding: 16px;
+}
+
+.home-stats strong {
+  color: #1477ff;
+  font-size: 26px;
+}
+
+.home-stats span {
+  color: #17233d;
+  font-weight: 800;
+}
+
+.home-stats small {
+  color: #7b8798;
+}
+
+.list-head {
+  justify-content: space-between;
+  margin-top: 4px;
+}
+
+.list-head h2,
+.list-head p {
+  margin: 0;
+}
+
+.list-actions {
+  gap: 10px;
+}
+
+.desktop-list {
+  display: grid;
+  gap: 12px;
+}
+
+.desktop-card {
+  display: grid;
+  grid-template-columns: 146px minmax(0, 1fr) 132px;
+  gap: 16px;
+  align-items: stretch;
+  padding: 12px;
+  transition: transform 0.18s ease, box-shadow 0.18s ease;
+}
+
+.desktop-card:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 16px 36px rgba(23, 35, 61, 0.1);
+}
+
+.desktop-cover {
+  position: relative;
+  display: grid;
+  min-height: 112px;
+  place-items: center;
+  overflow: hidden;
+  border-radius: 10px;
+  background: #17233d;
+  color: #ffffff;
+  font-weight: 900;
+}
+
+.desktop-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.desktop-cover em {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  border-radius: 999px;
+  background: #ff6a00;
+  color: #ffffff;
+  padding: 4px 7px;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.desktop-info {
+  min-width: 0;
+  padding: 4px 0;
+}
+
+.desktop-title strong {
+  display: block;
+  overflow: hidden;
+  color: #17233d;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 17px;
+}
+
+.desktop-info p {
+  margin: 8px 0 0;
+  color: #64748b;
+  font-size: 13px;
+}
+
+.desktop-tags {
+  flex-wrap: wrap;
+  gap: 7px;
+  margin-top: 13px;
+}
+
+.desktop-tags span {
+  border-radius: 999px;
+  background: #f3f6fa;
+  color: #536173;
+  padding: 5px 9px;
+  font-size: 12px;
+}
+
+.desktop-price {
+  display: grid;
+  align-content: center;
+  justify-items: end;
+  border-left: 1px solid #edf1f6;
+  color: #7b8798;
+  padding-left: 14px;
+}
+
+.desktop-price strong {
+  color: #ef4444;
+  font-size: 26px;
+}
+
+.desktop-price span,
+.desktop-price small {
+  margin-top: 4px;
+}
+
+@media (max-width: 1120px) {
+  .home-head {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .home-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .filter-panel-pc {
+    position: static;
+  }
+}
+</style>