From 71b2dcf0a5a6c72352e127eae7431b3a2f5d523d Mon Sep 17 00:00:00 2001
From: xiaomai <xiaomai@ramatex.com.my>
Date: Mon, 15 Sep 2025 22:58:44 +0800
Subject: [PATCH] refactor(bidding): extract CSS and reorganize file structure

Refactored the bidding application by reorganizing the file structure and extracting CSS into separate files.

- The monolithic `control.html` and `display.html` files have been moved into dedicated `controls/` and `display/`
directories.
- All inline CSS has been extracted into component-specific `style.css` files.
- A new `common/style.css` has been created to hold shared styles, promoting reusability and reducing duplication.

These changes improve the project's modularity, separation of concerns (HTML/CSS), and long-term maintainability without
affecting external behavior.
---
 bidding/common/style.css                      |  48 ++
 bidding/{control.html => controls/index.html} | 318 +---------
 bidding/controls/style.css                    | 266 ++++++++
 bidding/display.html                          | 592 ------------------
 bidding/display/index.html                    | 229 +++++++
 bidding/display/style.css                     | 320 ++++++++++
 6 files changed, 865 insertions(+), 908 deletions(-)
 create mode 100644 bidding/common/style.css
 rename bidding/{control.html => controls/index.html} (57%)
 create mode 100644 bidding/controls/style.css
 delete mode 100644 bidding/display.html
 create mode 100644 bidding/display/index.html
 create mode 100644 bidding/display/style.css

diff --git a/bidding/common/style.css b/bidding/common/style.css
new file mode 100644
index 0000000..5952b87
--- /dev/null
+++ b/bidding/common/style.css
@@ -0,0 +1,48 @@
+:root {
+  --primary: #2563eb;
+  --primary-dark: #1d4ed8;
+  --accent: #ffd700;
+  --accent-green: #00c853;
+  --dark-1: #111827;
+  --dark-2: #1f2937;
+  --dark-3: #374151;
+  --light: #f9fafb;
+  --text-primary: #f3f4f6;
+  --text-secondary: #d1d5db;
+  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
+  --radius: 16px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Inter", sans-serif;
+  background: linear-gradient(135deg, var(--dark-1) 0%, var(--dark-2) 100%);
+  color: var(--text-primary);
+  padding: 20px;
+  min-height: 100vh;
+}
+
+.container {
+  max-width: 1200px;
+}
+
+.card {
+  background: rgba(31, 41, 55, 0.8);
+  backdrop-filter: blur(10px);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: var(--transition);
+}
+
+h1 {
+  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
diff --git a/bidding/control.html b/bidding/controls/index.html
similarity index 57%
rename from bidding/control.html
rename to bidding/controls/index.html
index ab14d7d..fa44eac 100644
--- a/bidding/control.html
+++ b/bidding/controls/index.html
@@ -11,322 +11,8 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
     />
-    <style>
-      :root {
-        --primary: #2563eb;
-        --primary-dark: #1d4ed8;
-        --accent: #ffd700;
-        --accent-green: #00c853;
-        --dark-1: #111827;
-        --dark-2: #1f2937;
-        --dark-3: #374151;
-        --light: #f9fafb;
-        --text-primary: #f3f4f6;
-        --text-secondary: #d1d5db;
-        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
-        --radius: 12px;
-      }
-
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-
-      body {
-        font-family: "Inter", sans-serif;
-        background: linear-gradient(
-          135deg,
-          var(--dark-1) 0%,
-          var(--dark-2) 100%
-        );
-        color: var(--text-primary);
-        padding: 20px;
-        min-height: 100vh;
-      }
-
-      .container {
-        max-width: 1200px;
-        margin: 0 auto;
-      }
-
-      header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 2rem;
-        padding-bottom: 1rem;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-      }
-
-      h1 {
-        font-size: 2.2rem;
-        font-weight: 700;
-        background: linear-gradient(
-          90deg,
-          var(--primary) 0%,
-          var(--accent) 100%
-        );
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-      }
-
-      .channel-info {
-        background: var(--dark-3);
-        padding: 0.5rem 1rem;
-        border-radius: var(--radius);
-        font-size: 0.9rem;
-      }
-
-      .channel-id {
-        color: var(--accent);
-        font-weight: 600;
-      }
-
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-        gap: 1.5rem;
-        margin-bottom: 2rem;
-      }
-
-      .card {
-        background: rgba(31, 41, 55, 0.8);
-        backdrop-filter: blur(10px);
-        border-radius: var(--radius);
-        padding: 1.5rem;
-        box-shadow: var(--shadow);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        transition: var(--transition);
-      }
-
-      .card:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.4);
-      }
-
-      .card-title {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        font-size: 1.2rem;
-        font-weight: 600;
-        margin-bottom: 1.5rem;
-        color: var(--text-primary);
-      }
-
-      .card-title i {
-        color: var(--primary);
-      }
-
-      .form-group {
-        margin-bottom: 1.2rem;
-      }
-
-      label {
-        display: block;
-        margin-bottom: 0.5rem;
-        font-weight: 500;
-        color: var(--text-secondary);
-      }
-
-      input,
-      select,
-      textarea,
-      button {
-        width: 100%;
-        padding: 0.75rem 1rem;
-        border-radius: var(--radius);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        background: var(--dark-3);
-        color: var(--text-primary);
-        font-family: "Inter", sans-serif;
-        transition: var(--transition);
-      }
-
-      input:focus,
-      select:focus,
-      textarea:focus {
-        outline: none;
-        border-color: var(--primary);
-        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
-      }
-
-      button {
-        background: var(--primary);
-        color: white;
-        border: none;
-        font-weight: 600;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 0.5rem;
-        padding: 0.9rem 1.5rem;
-      }
-
-      button:hover {
-        background: var(--primary-dark);
-        transform: translateY(-2px);
-      }
-
-      button.secondary {
-        background: var(--dark-3);
-      }
-
-      button.secondary:hover {
-        background: var(--dark-2);
-      }
-
-      button.success {
-        background: var(--accent-green);
-      }
-
-      button.success:hover {
-        background: #00b34d;
-      }
-
-      .btn-group {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 0.8rem;
-        margin-top: 1.5rem;
-      }
-
-      .file-upload {
-        position: relative;
-        overflow: hidden;
-        display: inline-block;
-        width: 100%;
-      }
-
-      .file-upload-btn {
-        background: var(--dark-3);
-        color: var(--text-primary);
-        padding: 0.75rem 1rem;
-        border-radius: var(--radius);
-        border: 1px dashed rgba(255, 255, 255, 0.2);
-        text-align: center;
-        cursor: pointer;
-        transition: var(--transition);
-      }
-
-      .file-upload-btn:hover {
-        border-color: var(--primary);
-        background: rgba(37, 99, 235, 0.1);
-      }
-
-      .file-upload input[type="file"] {
-        position: absolute;
-        left: 0;
-        top: 0;
-        opacity: 0;
-        width: 100%;
-        height: 100%;
-        cursor: pointer;
-      }
-
-      .history-container {
-        max-height: 300px;
-        overflow-y: auto;
-        margin-top: 1rem;
-        border-radius: var(--radius);
-        background: var(--dark-3);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-      }
-
-      table {
-        width: 100%;
-        border-collapse: collapse;
-      }
-
-      th,
-      td {
-        padding: 0.75rem 1rem;
-        text-align: left;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-      }
-
-      th {
-        background: rgba(0, 0, 0, 0.2);
-        font-weight: 600;
-        color: var(--text-secondary);
-        position: sticky;
-        top: 0;
-      }
-
-      tr:last-child td {
-        border-bottom: none;
-      }
-
-      tr:hover {
-        background: rgba(255, 255, 255, 0.05);
-      }
-
-      .total-amount {
-        margin-top: 1.5rem;
-        padding: 1rem;
-        background: rgba(0, 200, 83, 0.1);
-        border-radius: var(--radius);
-        border: 1px solid rgba(0, 200, 83, 0.2);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-weight: 600;
-      }
-
-      .amount {
-        color: var(--accent);
-        font-size: 1.5rem;
-      }
-
-      /* 响应式设计 */
-      @media (max-width: 768px) {
-        .grid {
-          grid-template-columns: 1fr;
-        }
-
-        header {
-          flex-direction: column;
-          gap: 1rem;
-          align-items: flex-start;
-        }
-
-        .btn-group {
-          grid-template-columns: 1fr;
-        }
-      }
-
-      /* 动画 */
-      @keyframes fadeIn {
-        from {
-          opacity: 0;
-          transform: translateY(10px);
-        }
-        to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
-
-      .card {
-        animation: fadeIn 0.5s ease-out;
-      }
-
-      .card:nth-child(1) {
-        animation-delay: 0.1s;
-      }
-      .card:nth-child(2) {
-        animation-delay: 0.2s;
-      }
-      .card:nth-child(3) {
-        animation-delay: 0.3s;
-      }
-      .card:nth-child(4) {
-        animation-delay: 0.4s;
-      }
-    </style>
+    <link rel="stylesheet" href="../common/style.css" />
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <div class="container">
diff --git a/bidding/controls/style.css b/bidding/controls/style.css
new file mode 100644
index 0000000..79630a2
--- /dev/null
+++ b/bidding/controls/style.css
@@ -0,0 +1,266 @@
+.container {
+  margin: 0 auto;
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+h1 {
+  font-size: 2.2rem;
+  font-weight: 700;
+}
+
+.channel-info {
+  background: var(--dark-3);
+  padding: 0.5rem 1rem;
+  border-radius: var(--radius);
+  font-size: 0.9rem;
+}
+
+.channel-id {
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.card {
+  padding: 1.5rem;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.4);
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin-bottom: 1.5rem;
+  color: var(--text-primary);
+}
+
+.card-title i {
+  color: var(--primary);
+}
+
+.form-group {
+  margin-bottom: 1.2rem;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+input,
+select,
+textarea,
+button {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--dark-3);
+  color: var(--text-primary);
+  font-family: "Inter", sans-serif;
+  transition: var(--transition);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
+}
+
+button {
+  background: var(--primary);
+  color: white;
+  border: none;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.9rem 1.5rem;
+}
+
+button:hover {
+  background: var(--primary-dark);
+  transform: translateY(-2px);
+}
+
+button.secondary {
+  background: var(--dark-3);
+}
+
+button.secondary:hover {
+  background: var(--dark-2);
+}
+
+button.success {
+  background: var(--accent-green);
+}
+
+button.success:hover {
+  background: #00b34d;
+}
+
+.btn-group {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.8rem;
+  margin-top: 1.5rem;
+}
+
+.file-upload {
+  position: relative;
+  overflow: hidden;
+  display: inline-block;
+  width: 100%;
+}
+
+.file-upload-btn {
+  background: var(--dark-3);
+  color: var(--text-primary);
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius);
+  border: 1px dashed rgba(255, 255, 255, 0.2);
+  text-align: center;
+  cursor: pointer;
+  transition: var(--transition);
+}
+
+.file-upload-btn:hover {
+  border-color: var(--primary);
+  background: rgba(37, 99, 235, 0.1);
+}
+
+.file-upload input[type="file"] {
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.history-container {
+  max-height: 300px;
+  overflow-y: auto;
+  margin-top: 1rem;
+  border-radius: var(--radius);
+  background: var(--dark-3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+th {
+  background: rgba(0, 0, 0, 0.2);
+  font-weight: 600;
+  color: var(--text-secondary);
+  position: sticky;
+  top: 0;
+}
+
+tr:last-child td {
+  border-bottom: none;
+}
+
+tr:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.total-amount {
+  margin-top: 1.5rem;
+  padding: 1rem;
+  background: rgba(0, 200, 83, 0.1);
+  border-radius: var(--radius);
+  border: 1px solid rgba(0, 200, 83, 0.2);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+}
+
+.amount {
+  color: var(--accent);
+  font-size: 1.5rem;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+
+  header {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-start;
+  }
+
+  .btn-group {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* 动画 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.card {
+  animation: fadeIn 0.5s ease-out;
+}
+
+.card:nth-child(1) {
+  animation-delay: 0.1s;
+}
+.card:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.card:nth-child(3) {
+  animation-delay: 0.3s;
+}
+.card:nth-child(4) {
+  animation-delay: 0.4s;
+}
diff --git a/bidding/display.html b/bidding/display.html
deleted file mode 100644
index e675407..0000000
--- a/bidding/display.html
+++ /dev/null
@@ -1,592 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Auction Display</title>
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
-    />
-    <style>
-      :root {
-        --primary: #2563eb;
-        --primary-dark: #1d4ed8;
-        --accent: #ffd700;
-        --accent-green: #00c853;
-        --dark-1: #111827;
-        --dark-2: #1f2937;
-        --dark-3: #374151;
-        --light: #f9fafb;
-        --text-primary: #f3f4f6;
-        --text-secondary: #d1d5db;
-        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
-        --radius: 16px;
-      }
-
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-
-      body {
-        font-family: "Inter", sans-serif;
-        background: linear-gradient(
-          135deg,
-          var(--dark-1) 0%,
-          var(--dark-2) 100%
-        );
-        color: var(--text-primary);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-height: 100vh;
-        overflow: hidden;
-        padding: 20px;
-      }
-
-      .container {
-        width: 100%;
-        max-width: 1200px;
-        position: relative;
-      }
-
-      .card {
-        background: rgba(31, 41, 55, 0.8);
-        backdrop-filter: blur(10px);
-        border-radius: var(--radius);
-        padding: 2.5rem;
-        box-shadow: var(--shadow);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        transition: var(--transition);
-      }
-
-      .center {
-        text-align: center;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .hidden {
-        opacity: 0;
-        visibility: hidden;
-        pointer-events: none;
-        transform: translateY(20px);
-        transition: var(--transition);
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-      }
-
-      .visible {
-        opacity: 1;
-        visibility: visible;
-        pointer-events: all;
-        transform: translateY(0);
-      }
-
-      /* 引导页面样式 */
-      #guide {
-        padding: 3rem;
-      }
-
-      #guide h1 {
-        font-size: 2.5rem;
-        margin-bottom: 1.5rem;
-        background: linear-gradient(
-          90deg,
-          var(--primary) 0%,
-          var(--accent) 100%
-        );
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        font-weight: 700;
-      }
-
-      #guide p {
-        font-size: 1.2rem;
-        margin-bottom: 1rem;
-        color: var(--text-secondary);
-        line-height: 1.6;
-      }
-
-      .highlight {
-        background: rgba(255, 215, 0, 0.15);
-        padding: 0.25rem 0.75rem;
-        border-radius: 8px;
-        color: var(--accent);
-        font-weight: 600;
-      }
-
-      .control-link {
-        margin-top: 2rem;
-        padding: 1rem 2rem;
-        background: var(--primary);
-        color: white;
-        border-radius: 12px;
-        font-weight: 500;
-        transition: var(--transition);
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
-      }
-
-      .control-link:hover {
-        background: var(--primary-dark);
-        transform: translateY(-2px);
-      }
-
-      /* Splash 页面样式 */
-      #splash {
-        padding: 4rem;
-      }
-
-      .splash-logo {
-        width: 180px;
-        height: 180px;
-        margin-bottom: 2rem;
-        background: linear-gradient(
-          135deg,
-          var(--primary) 0%,
-          var(--primary-dark) 100%
-        );
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        box-shadow: 0 0 40px rgba(37, 99, 235, 0.4);
-        animation: pulse 2s infinite;
-      }
-
-      .splash-logo img {
-        max-width: 70%;
-      }
-
-      .splash-text {
-        font-size: 3.5rem;
-        font-weight: 700;
-        margin-bottom: 1rem;
-        background: linear-gradient(90deg, var(--accent) 0%, #ffed4e 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-      }
-
-      /* 标品展示样式 */
-      #itemView {
-        width: 100%;
-        padding: 3rem;
-      }
-
-      .itemMedia {
-        margin-bottom: 2rem;
-        border-radius: var(--radius);
-        overflow: hidden;
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
-        transition: var(--transition);
-        max-width: 800px;
-      }
-
-      .itemMedia:hover {
-        transform: scale(1.02);
-      }
-
-      .item img,
-      .item video {
-        width: 100%;
-        display: block;
-        border-radius: var(--radius);
-      }
-
-      .name {
-        font-size: 2.5rem;
-        font-weight: 700;
-        margin-bottom: 1rem;
-        color: var(--text-primary);
-      }
-
-      .remark {
-        font-size: 1.2rem;
-        color: var(--text-secondary);
-        margin-bottom: 2rem;
-        max-width: 600px;
-        line-height: 1.6;
-      }
-
-      .price-container {
-        position: relative;
-        margin: 2rem 0;
-      }
-
-      .price {
-        font-size: 4rem;
-        font-weight: 700;
-        color: var(--accent);
-        text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
-        transition: var(--transition);
-        position: relative;
-        display: inline-block;
-      }
-
-      .price-update {
-        animation: priceUpdate 0.5s ease-out;
-      }
-
-      .currency {
-        font-size: 2rem;
-        margin-right: 0.5rem;
-        vertical-align: super;
-      }
-
-      /* 成交界面样式 */
-      #dealView {
-        padding: 4rem 3rem;
-      }
-
-      .deal-icon {
-        font-size: 5rem;
-        margin-bottom: 2rem;
-        animation: celebrate 1s ease-out;
-      }
-
-      .deal {
-        font-size: 3.5rem;
-        font-weight: 700;
-        color: var(--accent-green);
-        margin-bottom: 2rem;
-        text-shadow: 0 0 20px rgba(0, 200, 83, 0.4);
-      }
-
-      .finalPrice {
-        font-size: 3rem;
-        font-weight: 600;
-        margin-bottom: 1.5rem;
-        color: var(--accent);
-      }
-
-      .winner {
-        font-size: 2rem;
-        font-weight: 500;
-        color: var(--text-primary);
-        padding: 1rem 2rem;
-        background: rgba(0, 200, 83, 0.1);
-        border-radius: 12px;
-        border: 1px solid rgba(0, 200, 83, 0.3);
-      }
-
-      /* 总金额样式 */
-      .footer {
-        position: fixed;
-        bottom: 20px;
-        right: 20px;
-        background: var(--dark-3);
-        padding: 1rem 1.5rem;
-        border-radius: 12px;
-        font-size: 1.2rem;
-        font-weight: 500;
-        box-shadow: var(--shadow);
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-      }
-
-      .footer span {
-        color: var(--accent);
-        font-weight: 700;
-        font-size: 1.4rem;
-      }
-
-      /* 动画 */
-      @keyframes pulse {
-        0% {
-          transform: scale(1);
-          box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
-        }
-        70% {
-          transform: scale(1.02);
-          box-shadow: 0 0 0 15px rgba(37, 99, 235, 0);
-        }
-        100% {
-          transform: scale(1);
-          box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
-        }
-      }
-
-      @keyframes priceUpdate {
-        0% {
-          transform: scale(1);
-        }
-        50% {
-          transform: scale(1.2);
-          text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
-        }
-        100% {
-          transform: scale(1);
-        }
-      }
-
-      @keyframes celebrate {
-        0% {
-          transform: scale(0);
-          opacity: 0;
-        }
-        70% {
-          transform: scale(1.2);
-          opacity: 1;
-        }
-        100% {
-          transform: scale(1);
-          opacity: 1;
-        }
-      }
-
-      /* 响应式设计 */
-      @media (max-width: 768px) {
-        .card {
-          padding: 1.5rem;
-        }
-
-        .splash-text {
-          font-size: 2.5rem;
-        }
-
-        .name {
-          font-size: 2rem;
-        }
-
-        .price {
-          font-size: 3rem;
-        }
-
-        .deal {
-          font-size: 2.5rem;
-        }
-
-        .finalPrice {
-          font-size: 2.5rem;
-        }
-
-        .winner {
-          font-size: 1.5rem;
-        }
-      }
-    </style>
-  </head>
-  <body>
-    <div class="container">
-      <!-- 初次加载提示 -->
-      <div id="guide" class="card center visible">
-        <h1>拍卖展示系统</h1>
-        <p>
-          请将此窗口拖曳到大屏幕并按下
-          <span class="highlight">F11</span> 进入全屏展示模式
-        </p>
-        <p>使用控制端链接进行远程操作：</p>
-        <a href="#" class="control-link">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
-            height="20"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path
-              d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
-            ></path>
-            <path
-              d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
-            ></path>
-          </svg>
-          <span id="controlLink"></span>
-        </a>
-      </div>
-
-      <!-- Splash Screen -->
-      <div id="splash" class="card center hidden">
-        <div class="splash-logo">
-          <img
-            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCI+PC9jaXJjbGU+PHBhdGggZD0iTTE2IDhsLTQgNC04LTgiPjwvcGF0aD48L3N2Zz4="
-            alt="Logo"
-          />
-        </div>
-        <div class="splash-text">Studio Name</div>
-        <p>拍卖即将开始</p>
-      </div>
-
-      <!-- 标品展示 -->
-      <div id="itemView" class="card center hidden">
-        <div class="itemMedia"></div>
-        <div class="name"></div>
-        <div class="remark"></div>
-        <div class="price-container">
-          <div class="price">
-            <span class="currency">￥</span><span class="price-value">0</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- 成交界面 -->
-      <div id="dealView" class="card center hidden">
-        <div class="deal-icon">🎉</div>
-        <div class="deal">成交！</div>
-        <div class="finalPrice"></div>
-        <div class="winner"></div>
-      </div>
-    </div>
-
-    <!-- 总金额 -->
-    <div class="footer">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <line x1="12" y1="1" x2="12" y2="23"></line>
-        <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
-      </svg>
-      总金额: <span id="totalAmount">0</span> 元
-    </div>
-
-    <script>
-      // 获取或生成频道 ID
-      function getOrCreateDisplayId() {
-        const urlParams = new URLSearchParams(location.search);
-        let id = urlParams.get("display");
-        if (!id) {
-          id =
-            Math.random().toString(36).slice(2, 12) + Date.now().toString(36);
-          location.href = location.pathname + "?display=" + id;
-        }
-        return id;
-      }
-
-      const displayId = getOrCreateDisplayId();
-      const channel = new BroadcastChannel("auction-" + displayId);
-
-      // DOM 元素
-      const guide = document.getElementById("guide");
-      const controlLink = document.getElementById("controlLink");
-      const splash = document.getElementById("splash");
-      const itemView = document.getElementById("itemView");
-      const dealView = document.getElementById("dealView");
-      const totalAmountEl = document.getElementById("totalAmount");
-
-      const itemMedia = itemView.querySelector(".itemMedia");
-      const itemName = itemView.querySelector(".name");
-      const itemRemark = itemView.querySelector(".remark");
-      const itemPrice = itemView.querySelector(".price-value");
-
-      const dealPrice = dealView.querySelector(".finalPrice");
-      const dealWinner = dealView.querySelector(".winner");
-
-      let currentPrice = 0;
-      let targetPrice = 0;
-      let totalAmount = 0;
-
-      // 设置控制端链接
-      controlLink.innerText =
-        location.origin + "/control.html?display=" + displayId;
-      controlLink.href = location.origin + "/control.html?display=" + displayId;
-
-      // 视图切换函数
-      function showView(view) {
-        // 隐藏所有视图
-        [guide, splash, itemView, dealView].forEach((v) => {
-          v.classList.remove("visible");
-          v.classList.add("hidden");
-        });
-
-        // 显示指定视图
-        setTimeout(() => {
-          view.classList.remove("hidden");
-          setTimeout(() => {
-            view.classList.add("visible");
-          }, 50);
-        }, 300);
-      }
-
-      // 展示 Splash
-      setTimeout(() => {
-        showView(splash);
-        setTimeout(() => {
-          // splash 展示后不自动隐藏，等待消息
-        }, 2000);
-      }, 3000);
-
-      // 动态价格更新 (Lerp)
-      function animatePrice() {
-        if (Math.abs(targetPrice - currentPrice) > 1) {
-          currentPrice += (targetPrice - currentPrice) * 0.1;
-          itemPrice.textContent = Math.round(currentPrice);
-          requestAnimationFrame(animatePrice);
-        } else {
-          currentPrice = targetPrice;
-          itemPrice.textContent = currentPrice;
-        }
-      }
-
-      // 监听消息
-      channel.onmessage = (ev) => {
-        const msg = ev.data;
-        if (msg.type === "showItem") {
-          showView(itemView);
-
-          // 更新标品信息
-          itemName.textContent = msg.name;
-          itemRemark.textContent = msg.remark || "";
-          if (msg.media) {
-            if (msg.media.endsWith(".mp4")) {
-              itemMedia.innerHTML = `<video src="${msg.media}" autoplay loop muted></video>`;
-            } else {
-              itemMedia.innerHTML = `<img src="${msg.media}" alt="${msg.name}">`;
-            }
-          } else {
-            itemMedia.innerHTML = "";
-          }
-
-          currentPrice = 0;
-          targetPrice = msg.basePrice || 0;
-          itemPrice.textContent = currentPrice;
-          animatePrice();
-        }
-
-        if (msg.type === "updatePrice") {
-          targetPrice = msg.price;
-          itemPrice.parentElement.classList.add("price-update");
-          setTimeout(() => {
-            itemPrice.parentElement.classList.remove("price-update");
-          }, 500);
-          animatePrice();
-        }
-
-        if (msg.type === "deal") {
-          showView(dealView);
-          dealPrice.textContent = "成交价: ￥" + msg.price;
-          dealWinner.textContent = "得标者: " + (msg.winner || "兴 旺 发");
-          totalAmount += msg.price;
-          totalAmountEl.textContent = totalAmount;
-
-          // 添加庆祝效果
-          const dealIcon = document.querySelector(".deal-icon");
-          dealIcon.style.animation = "none";
-          setTimeout(() => {
-            dealIcon.style.animation = "celebrate 1s ease-out";
-          }, 10);
-        }
-      };
-    </script>
-  </body>
-</html>
diff --git a/bidding/display/index.html b/bidding/display/index.html
new file mode 100644
index 0000000..55d57ee
--- /dev/null
+++ b/bidding/display/index.html
@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Auction Display</title>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+    />
+    <link rel="stylesheet" href="../common/style.css" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <!-- 初次加载提示 -->
+      <div id="guide" class="card center visible">
+        <h1>拍卖展示系统</h1>
+        <p>
+          请将此窗口拖曳到大屏幕并按下
+          <span class="highlight">F11</span> 进入全屏展示模式
+        </p>
+        <p>使用控制端链接进行远程操作：</p>
+        <a href="#" class="control-link">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path
+              d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+            ></path>
+            <path
+              d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+            ></path>
+          </svg>
+          <span id="controlLink"></span>
+        </a>
+      </div>
+
+      <!-- Splash Screen -->
+      <div id="splash" class="card center hidden">
+        <div class="splash-logo">
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCI+PC9jaXJjbGU+PHBhdGggZD0iTTE2IDhsLTQgNC04LTgiPjwvcGF0aD48L3N2Zz4="
+            alt="Logo"
+          />
+        </div>
+        <div class="splash-text">Studio Name</div>
+        <p>拍卖即将开始</p>
+      </div>
+
+      <!-- 标品展示 -->
+      <div id="itemView" class="card center hidden">
+        <div class="itemMedia"></div>
+        <div class="name"></div>
+        <div class="remark"></div>
+        <div class="price-container">
+          <div class="price">
+            <span class="currency">￥</span><span class="price-value">0</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 成交界面 -->
+      <div id="dealView" class="card center hidden">
+        <div class="deal-icon">🎉</div>
+        <div class="deal">成交！</div>
+        <div class="finalPrice"></div>
+        <div class="winner"></div>
+      </div>
+    </div>
+
+    <!-- 总金额 -->
+    <div class="footer">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <line x1="12" y1="1" x2="12" y2="23"></line>
+        <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
+      </svg>
+      总金额: <span id="totalAmount">0</span> 元
+    </div>
+
+    <script>
+      // 获取或生成频道 ID
+      function getOrCreateDisplayId() {
+        const urlParams = new URLSearchParams(location.search);
+        let id = urlParams.get("display");
+        if (!id) {
+          id =
+            Math.random().toString(36).slice(2, 12) + Date.now().toString(36);
+          location.href = location.pathname + "?display=" + id;
+        }
+        return id;
+      }
+
+      const displayId = getOrCreateDisplayId();
+      const channel = new BroadcastChannel("auction-" + displayId);
+
+      // DOM 元素
+      const guide = document.getElementById("guide")
+      const controlLinkA = document.getElementsByClassName("control-link")[0];
+      const controlLink = document.getElementById("controlLink");
+      const splash = document.getElementById("splash");
+      const itemView = document.getElementById("itemView");
+      const dealView = document.getElementById("dealView");
+      const totalAmountEl = document.getElementById("totalAmount");
+
+      const itemMedia = itemView.querySelector(".itemMedia");
+      const itemName = itemView.querySelector(".name");
+      const itemRemark = itemView.querySelector(".remark");
+      const itemPrice = itemView.querySelector(".price-value");
+
+      const dealPrice = dealView.querySelector(".finalPrice");
+      const dealWinner = dealView.querySelector(".winner");
+
+      let currentPrice = 0;
+      let targetPrice = 0;
+      let totalAmount = 0;
+
+      // 设置控制端链接
+      controlLink.innerText =
+        location.origin + "/bidding/controls/?display=" + displayId;
+      controlLinkA.href =
+        location.origin + "/bidding/controls/?display=" + displayId;
+
+      // 视图切换函数
+      function showView(view) {
+        // 隐藏所有视图
+        [guide, splash, itemView, dealView].forEach((v) => {
+          v.classList.remove("visible");
+          v.classList.add("hidden");
+        });
+
+        // 显示指定视图
+        setTimeout(() => {
+          view.classList.remove("hidden");
+          setTimeout(() => {
+            view.classList.add("visible");
+          }, 50);
+        }, 300);
+      }
+
+      // 展示 Splash
+      setTimeout(() => {
+        showView(splash);
+        setTimeout(() => {
+          // splash 展示后不自动隐藏，等待消息
+        }, 2000);
+      }, 3000);
+
+      // 动态价格更新 (Lerp)
+      function animatePrice() {
+        if (Math.abs(targetPrice - currentPrice) > 1) {
+          currentPrice += (targetPrice - currentPrice) * 0.1;
+          itemPrice.textContent = Math.round(currentPrice);
+          requestAnimationFrame(animatePrice);
+        } else {
+          currentPrice = targetPrice;
+          itemPrice.textContent = currentPrice;
+        }
+      }
+
+      // 监听消息
+      channel.onmessage = (ev) => {
+        const msg = ev.data;
+        if (msg.type === "showItem") {
+          showView(itemView);
+
+          // 更新标品信息
+          itemName.textContent = msg.name;
+          itemRemark.textContent = msg.remark || "";
+          if (msg.media) {
+            if (msg.media.endsWith(".mp4")) {
+              itemMedia.innerHTML = `<video src="${msg.media}" autoplay loop muted></video>`;
+            } else {
+              itemMedia.innerHTML = `<img src="${msg.media}" alt="${msg.name}">`;
+            }
+          } else {
+            itemMedia.innerHTML = "";
+          }
+
+          currentPrice = 0;
+          targetPrice = msg.basePrice || 0;
+          itemPrice.textContent = currentPrice;
+          animatePrice();
+        }
+
+        if (msg.type === "updatePrice") {
+          targetPrice = msg.price;
+          itemPrice.parentElement.classList.add("price-update");
+          setTimeout(() => {
+            itemPrice.parentElement.classList.remove("price-update");
+          }, 500);
+          animatePrice();
+        }
+
+        if (msg.type === "deal") {
+          showView(dealView);
+          dealPrice.textContent = "成交价: ￥" + msg.price;
+          dealWinner.textContent = "得标者: " + (msg.winner || "兴 旺 发");
+          totalAmount += msg.price;
+          totalAmountEl.textContent = totalAmount;
+
+          // 添加庆祝效果
+          const dealIcon = document.querySelector(".deal-icon");
+          dealIcon.style.animation = "none";
+          setTimeout(() => {
+            dealIcon.style.animation = "celebrate 1s ease-out";
+          }, 10);
+        }
+      };
+    </script>
+  </body>
+</html>
diff --git a/bidding/display/style.css b/bidding/display/style.css
new file mode 100644
index 0000000..a0d7eb4
--- /dev/null
+++ b/bidding/display/style.css
@@ -0,0 +1,320 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.container {
+  width: 100%;
+  position: relative;
+}
+
+.card {
+  padding: 2.5rem;
+}
+
+.center {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.hidden {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(20px);
+  transition: var(--transition);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.visible {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: all;
+  transform: translateY(0);
+}
+
+/* 引导页面样式 */
+#guide {
+  padding: 3rem;
+}
+
+#guide h1 {
+  font-size: 2.5rem;
+  margin-bottom: 1.5rem;
+  font-weight: 700;
+}
+
+#guide p {
+  font-size: 1.2rem;
+  margin-bottom: 1rem;
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+.highlight {
+  background: rgba(255, 215, 0, 0.15);
+  padding: 0.25rem 0.75rem;
+  border-radius: 8px;
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.control-link {
+  margin-top: 2rem;
+  padding: 1rem 2rem;
+  background: var(--primary);
+  color: white;
+  border-radius: 12px;
+  font-weight: 500;
+  transition: var(--transition);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.control-link:hover {
+  background: var(--primary-dark);
+  transform: translateY(-2px);
+}
+
+/* Splash 页面样式 */
+#splash {
+  padding: 4rem;
+}
+
+.splash-logo {
+  width: 180px;
+  height: 180px;
+  margin-bottom: 2rem;
+  background: linear-gradient(
+    135deg,
+    var(--primary) 0%,
+    var(--primary-dark) 100%
+  );
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 40px rgba(37, 99, 235, 0.4);
+  animation: pulse 2s infinite;
+}
+
+.splash-logo img {
+  max-width: 70%;
+}
+
+.splash-text {
+  font-size: 3.5rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  background: linear-gradient(90deg, var(--accent) 0%, #ffed4e 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* 标品展示样式 */
+#itemView {
+  width: 100%;
+  padding: 3rem;
+}
+
+.itemMedia {
+  margin-bottom: 2rem;
+  border-radius: var(--radius);
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+  transition: var(--transition);
+  max-width: 800px;
+}
+
+.itemMedia:hover {
+  transform: scale(1.02);
+}
+
+.item img,
+.item video {
+  width: 100%;
+  display: block;
+  border-radius: var(--radius);
+}
+
+.name {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  color: var(--text-primary);
+}
+
+.remark {
+  font-size: 1.2rem;
+  color: var(--text-secondary);
+  margin-bottom: 2rem;
+  max-width: 600px;
+  line-height: 1.6;
+}
+
+.price-container {
+  position: relative;
+  margin: 2rem 0;
+}
+
+.price {
+  font-size: 4rem;
+  font-weight: 700;
+  color: var(--accent);
+  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
+  transition: var(--transition);
+  position: relative;
+  display: inline-block;
+}
+
+.price-update {
+  animation: priceUpdate 0.5s ease-out;
+}
+
+.currency {
+  font-size: 2rem;
+  margin-right: 0.5rem;
+  vertical-align: super;
+}
+
+/* 成交界面样式 */
+#dealView {
+  padding: 4rem 3rem;
+}
+
+.deal-icon {
+  font-size: 5rem;
+  margin-bottom: 2rem;
+  animation: celebrate 1s ease-out;
+}
+
+.deal {
+  font-size: 3.5rem;
+  font-weight: 700;
+  color: var(--accent-green);
+  margin-bottom: 2rem;
+  text-shadow: 0 0 20px rgba(0, 200, 83, 0.4);
+}
+
+.finalPrice {
+  font-size: 3rem;
+  font-weight: 600;
+  margin-bottom: 1.5rem;
+  color: var(--accent);
+}
+
+.winner {
+  font-size: 2rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  padding: 1rem 2rem;
+  background: rgba(0, 200, 83, 0.1);
+  border-radius: 12px;
+  border: 1px solid rgba(0, 200, 83, 0.3);
+}
+
+/* 总金额样式 */
+.footer {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background: var(--dark-3);
+  padding: 1rem 1.5rem;
+  border-radius: 12px;
+  font-size: 1.2rem;
+  font-weight: 500;
+  box-shadow: var(--shadow);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.footer span {
+  color: var(--accent);
+  font-weight: 700;
+  font-size: 1.4rem;
+}
+
+/* 动画 */
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
+  }
+  70% {
+    transform: scale(1.02);
+    box-shadow: 0 0 0 15px rgba(37, 99, 235, 0);
+  }
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
+  }
+}
+
+@keyframes priceUpdate {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+    text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes celebrate {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  70% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .card {
+    padding: 1.5rem;
+  }
+
+  .splash-text {
+    font-size: 2.5rem;
+  }
+
+  .name {
+    font-size: 2rem;
+  }
+
+  .price {
+    font-size: 3rem;
+  }
+
+  .deal {
+    font-size: 2.5rem;
+  }
+
+  .finalPrice {
+    font-size: 2.5rem;
+  }
+
+  .winner {
+    font-size: 1.5rem;
+  }
+}