diff --git a/bidding/control.html b/bidding/control.html
index b40c403..ab14d7d 100644
--- a/bidding/control.html
+++ b/bidding/control.html
@@ -1,202 +1,594 @@
 <!DOCTYPE html>
 <html lang="zh">
-<head>
-  <meta charset="UTF-8">
-  <title>Auction Control</title>
-  <style>
-    body {
-      font-family: sans-serif;
-      margin: 20px;
-      background: #f5f5f5;
-    }
-    h1 { margin-bottom: 10px; }
-    .section {
-      background: #fff;
-      padding: 15px;
-      margin-bottom: 15px;
-      border-radius: 8px;
-      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-    }
-    input, select, button, textarea {
-      margin: 5px 0;
-      padding: 6px;
-      border-radius: 4px;
-      border: 1px solid #ccc;
-    }
-    button {
-      cursor: pointer;
-      background: #007bff;
-      color: #fff;
-      border: none;
-    }
-    button:hover {
-      background: #0056b3;
-    }
-    table {
-      width: 100%;
-      border-collapse: collapse;
-      margin-top: 10px;
-    }
-    th, td {
-      border: 1px solid #ccc;
-      padding: 6px;
-      text-align: center;
-    }
-    th {
-      background: #eee;
-    }
-    .history {
-      max-height: 200px;
-      overflow-y: auto;
-    }
-  </style>
-</head>
-<body>
-  <h1>🎛 拍卖控制台</h1>
-  <div>当前频道 ID: <b id="displayId"></b></div>
-
-  <!-- 上传 CSV -->
-  <div class="section">
-    <h2>上传标品列表 (Items.csv)</h2>
-    <input type="file" id="csvUpload" accept=".csv">
-    <select id="itemSelect"></select>
-  </div>
-
-  <!-- 自定义输入 -->
-  <div class="section">
-    <h2>标品信息</h2>
-    <label>名称: <input type="text" id="itemName"></label><br>
-    <label>底价: <input type="number" id="itemBasePrice" value="0"></label><br>
-    <label>备注: <input type="text" id="itemRemark"></label><br>
-    <label>图片/影片链接: <input type="text" id="itemMedia"></label><br>
-    <button id="startAuction">开始竞拍</button>
-  </div>
-
-  <!-- 出价 -->
-  <div class="section">
-    <h2>竞价控制</h2>
-    <label>当前价格: <input type="number" id="currentPrice" value="0"></label><br>
-    <button id="updatePrice">更新价格</button>
-    <button id="dealItem">成交</button><br>
-    <label>得标者: <input type="text" id="winnerName" placeholder="留空则显示 兴 旺 发"></label>
-  </div>
-
-  <!-- 成交历史 -->
-  <div class="section">
-    <h2>成交历史</h2>
-    <div>总金额: <span id="totalAmount">0</span> 元</div>
-    <div class="history">
-      <table id="historyTable">
-        <thead>
-          <tr>
-            <th>标品名称</th>
-            <th>成交价</th>
-            <th>得标者</th>
-          </tr>
-        </thead>
-        <tbody></tbody>
-      </table>
-    </div>
-  </div>
-
-  <script>
-    // 获取 displayId
-    const urlParams = new URLSearchParams(location.search);
-    const displayId = urlParams.get("display");
-    if (!displayId) {
-      alert("缺少 display 参数！请从 display.html 获取正确链接");
-    }
-    document.getElementById("displayId").textContent = displayId;
-
-    const channel = new BroadcastChannel("auction-" + displayId);
-
-    const itemSelect = document.getElementById("itemSelect");
-    const itemName = document.getElementById("itemName");
-    const itemBasePrice = document.getElementById("itemBasePrice");
-    const itemRemark = document.getElementById("itemRemark");
-    const itemMedia = document.getElementById("itemMedia");
-    const currentPrice = document.getElementById("currentPrice");
-    const winnerName = document.getElementById("winnerName");
-    const totalAmountEl = document.getElementById("totalAmount");
-    const historyTable = document.getElementById("historyTable").querySelector("tbody");
-
-    let totalAmount = 0;
-    let csvItems = [];
-
-    // 解析 CSV
-    document.getElementById("csvUpload").addEventListener("change", (e) => {
-      const file = e.target.files[0];
-      if (!file) return;
-      const reader = new FileReader();
-      reader.onload = (ev) => {
-        const lines = ev.target.result.split(/\r?\n/).filter(l => l.trim());
-        csvItems = lines.map(l => {
-          const [name, basePrice, remark, media] = l.split(",");
-          return { name, basePrice: Number(basePrice), remark, media };
-        });
-        refreshItemSelect();
-      };
-      reader.readAsText(file);
-    });
-
-    function refreshItemSelect() {
-      itemSelect.innerHTML = "";
-      csvItems.forEach((it, idx) => {
-        const opt = document.createElement("option");
-        opt.value = idx;
-        opt.textContent = it.name;
-        itemSelect.appendChild(opt);
-      });
-    }
-
-    itemSelect.addEventListener("change", () => {
-      const idx = itemSelect.value;
-      if (csvItems[idx]) {
-        const it = csvItems[idx];
-        itemName.value = it.name;
-        itemBasePrice.value = it.basePrice;
-        itemRemark.value = it.remark;
-        itemMedia.value = it.media;
+  <head>
+    <meta charset="UTF-8" />
+    <title>Auction Control</title>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+    />
+    <link
+      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;
       }
-    });
 
-    // 开始竞拍
-    document.getElementById("startAuction").addEventListener("click", () => {
-      const msg = {
-        type: "showItem",
-        name: itemName.value,
-        basePrice: Number(itemBasePrice.value),
-        remark: itemRemark.value,
-        media: itemMedia.value
-      };
-      channel.postMessage(msg);
-      currentPrice.value = itemBasePrice.value;
-    });
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
 
-    // 更新价格
-    document.getElementById("updatePrice").addEventListener("click", () => {
-      const msg = {
-        type: "updatePrice",
-        price: Number(currentPrice.value)
-      };
-      channel.postMessage(msg);
-    });
+      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;
+      }
 
-    // 成交
-    document.getElementById("dealItem").addEventListener("click", () => {
-      const price = Number(currentPrice.value);
-      const winner = winnerName.value || "";
-      const msg = { type: "deal", price, winner };
-      channel.postMessage(msg);
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+      }
 
-      // 保存历史
-      const tr = document.createElement("tr");
-      tr.innerHTML = `<td>${itemName.value}</td><td>${price}</td><td>${winner || "兴 旺 发"}</td>`;
-      historyTable.appendChild(tr);
+      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);
+      }
 
-      totalAmount += price;
-      totalAmountEl.textContent = totalAmount;
-    });
-  </script>
-</body>
+      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>
+  </head>
+  <body>
+    <div class="container">
+      <header>
+        <h1><i class="fas fa-sliders-h"></i> 拍卖控制台</h1>
+        <div class="channel-info">
+          当前频道 ID: <span class="channel-id" id="displayId"></span>
+        </div>
+      </header>
+
+      <div class="grid">
+        <!-- 上传 CSV -->
+        <div class="card">
+          <div class="card-title">
+            <i class="fas fa-file-csv"></i>
+            <span>上传标品列表</span>
+          </div>
+          <div class="form-group">
+            <div class="file-upload">
+              <div class="file-upload-btn">
+                <i class="fas fa-cloud-upload-alt"></i> 选择 CSV 文件
+              </div>
+              <input type="file" id="csvUpload" accept=".csv" />
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="itemSelect">选择标品</label>
+            <select id="itemSelect">
+              <option value="">请先上传CSV文件</option>
+            </select>
+          </div>
+        </div>
+
+        <!-- 标品信息 -->
+        <div class="card">
+          <div class="card-title">
+            <i class="fas fa-info-circle"></i>
+            <span>标品信息</span>
+          </div>
+          <div class="form-group">
+            <label for="itemName">名称</label>
+            <input type="text" id="itemName" placeholder="输入标品名称" />
+          </div>
+          <div class="form-group">
+            <label for="itemBasePrice">底价</label>
+            <input type="number" id="itemBasePrice" value="0" min="0" />
+          </div>
+          <div class="form-group">
+            <label for="itemRemark">备注</label>
+            <input type="text" id="itemRemark" placeholder="输入标品备注信息" />
+          </div>
+          <div class="form-group">
+            <label for="itemMedia">图片/影片链接</label>
+            <input type="text" id="itemMedia" placeholder="输入媒体文件URL" />
+          </div>
+          <button id="startAuction" class="success">
+            <i class="fas fa-gavel"></i> 开始竞拍
+          </button>
+        </div>
+
+        <!-- 竞价控制 -->
+        <div class="card">
+          <div class="card-title">
+            <i class="fas fa-exchange-alt"></i>
+            <span>竞价控制</span>
+          </div>
+          <div class="form-group">
+            <label for="currentPrice">当前价格</label>
+            <input type="number" id="currentPrice" value="0" min="0" />
+          </div>
+          <div class="form-group">
+            <label for="winnerName">得标者</label>
+            <input
+              type="text"
+              id="winnerName"
+              placeholder="留空则显示 兴 旺 发"
+            />
+          </div>
+          <div class="btn-group">
+            <button id="updatePrice">
+              <i class="fas fa-sync-alt"></i> 更新价格
+            </button>
+            <button id="dealItem" class="success">
+              <i class="fas fa-handshake"></i> 成交
+            </button>
+          </div>
+        </div>
+
+        <!-- 成交历史 -->
+        <div class="card">
+          <div class="card-title">
+            <i class="fas fa-history"></i>
+            <span>成交历史</span>
+          </div>
+          <div class="total-amount">
+            <span>总金额:</span>
+            <span class="amount"><span id="totalAmount">0</span> 元</span>
+          </div>
+          <div class="history-container">
+            <table id="historyTable">
+              <thead>
+                <tr>
+                  <th>标品名称</th>
+                  <th>成交价</th>
+                  <th>得标者</th>
+                </tr>
+              </thead>
+              <tbody></tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // 获取 displayId
+      const urlParams = new URLSearchParams(location.search);
+      const displayId = urlParams.get("display");
+      if (!displayId) {
+        alert("缺少 display 参数！请从 display.html 获取正确链接");
+      }
+      document.getElementById("displayId").textContent = displayId;
+
+      const channel = new BroadcastChannel("auction-" + displayId);
+
+      const itemSelect = document.getElementById("itemSelect");
+      const itemName = document.getElementById("itemName");
+      const itemBasePrice = document.getElementById("itemBasePrice");
+      const itemRemark = document.getElementById("itemRemark");
+      const itemMedia = document.getElementById("itemMedia");
+      const currentPrice = document.getElementById("currentPrice");
+      const winnerName = document.getElementById("winnerName");
+      const totalAmountEl = document.getElementById("totalAmount");
+      const historyTable = document
+        .getElementById("historyTable")
+        .querySelector("tbody");
+
+      let totalAmount = 0;
+      let csvItems = [];
+
+      // 解析 CSV
+      document.getElementById("csvUpload").addEventListener("change", (e) => {
+        const file = e.target.files[0];
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.onload = (ev) => {
+          const lines = ev.target.result.split(/\r?\n/).filter((l) => l.trim());
+          csvItems = lines.map((l) => {
+            const [name, basePrice, remark, media] = l.split(",");
+            return { name, basePrice: Number(basePrice), remark, media };
+          });
+          refreshItemSelect();
+
+          // 更新文件上传按钮文本
+          const uploadBtn = document.querySelector(".file-upload-btn");
+          uploadBtn.innerHTML = `<i class="fas fa-check-circle"></i> ${file.name}`;
+          uploadBtn.style.borderColor = "var(--accent-green)";
+          uploadBtn.style.background = "rgba(0, 200, 83, 0.1)";
+        };
+        reader.readAsText(file);
+      });
+
+      function refreshItemSelect() {
+        itemSelect.innerHTML = "";
+        csvItems.forEach((it, idx) => {
+          const opt = document.createElement("option");
+          opt.value = idx;
+          opt.textContent = it.name;
+          itemSelect.appendChild(opt);
+        });
+      }
+
+      itemSelect.addEventListener("change", () => {
+        const idx = itemSelect.value;
+        if (csvItems[idx]) {
+          const it = csvItems[idx];
+          itemName.value = it.name;
+          itemBasePrice.value = it.basePrice;
+          itemRemark.value = it.remark;
+          itemMedia.value = it.media;
+          currentPrice.value = it.basePrice;
+        }
+      });
+
+      // 开始竞拍
+      document.getElementById("startAuction").addEventListener("click", () => {
+        if (!itemName.value) {
+          alert("请输入标品名称");
+          return;
+        }
+
+        const msg = {
+          type: "showItem",
+          name: itemName.value,
+          basePrice: Number(itemBasePrice.value),
+          remark: itemRemark.value,
+          media: itemMedia.value,
+        };
+        channel.postMessage(msg);
+        currentPrice.value = itemBasePrice.value;
+
+        // 添加视觉反馈
+        const btn = document.getElementById("startAuction");
+        btn.innerHTML = '<i class="fas fa-check"></i> 已开始';
+        btn.style.background = "var(--accent-green)";
+        setTimeout(() => {
+          btn.innerHTML = '<i class="fas fa-gavel"></i> 开始竞拍';
+          btn.style.background = "var(--primary)";
+        }, 2000);
+      });
+
+      // 更新价格
+      document.getElementById("updatePrice").addEventListener("click", () => {
+        const msg = {
+          type: "updatePrice",
+          price: Number(currentPrice.value),
+        };
+        channel.postMessage(msg);
+
+        // 添加视觉反馈
+        const btn = document.getElementById("updatePrice");
+        btn.innerHTML = '<i class="fas fa-check"></i> 已更新';
+        setTimeout(() => {
+          btn.innerHTML = '<i class="fas fa-sync-alt"></i> 更新价格';
+        }, 1000);
+      });
+
+      // 成交
+      document.getElementById("dealItem").addEventListener("click", () => {
+        const price = Number(currentPrice.value);
+        const winner = winnerName.value || "";
+        const msg = { type: "deal", price, winner };
+        channel.postMessage(msg);
+
+        // 保存历史
+        const tr = document.createElement("tr");
+        tr.innerHTML = `
+        <td>${itemName.value}</td>
+        <td>￥${price}</td>
+        <td>${winner || "兴 旺 发"}</td>
+      `;
+        historyTable.appendChild(tr);
+
+        totalAmount += price;
+        totalAmountEl.textContent = totalAmount;
+
+        // 添加视觉反馈
+        const btn = document.getElementById("dealItem");
+        btn.innerHTML = '<i class="fas fa-check"></i> 已成交';
+        setTimeout(() => {
+          btn.innerHTML = '<i class="fas fa-handshake"></i> 成交';
+        }, 2000);
+
+        // 清空当前标品信息
+        itemName.value = "";
+        itemBasePrice.value = "0";
+        itemRemark.value = "";
+        itemMedia.value = "";
+        currentPrice.value = "0";
+        winnerName.value = "";
+      });
+    </script>
+  </body>
 </html>
diff --git a/bidding/display.html b/bidding/display.html
index 589abd7..e675407 100644
--- a/bidding/display.html
+++ b/bidding/display.html
@@ -3,85 +3,462 @@
   <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>
-      body {
+      :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;
-        font-family: sans-serif;
-        background: #111;
-        color: #fff;
+        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;
-        height: 100vh;
+        min-height: 100vh;
         overflow: hidden;
+        padding: 20px;
       }
-      .hidden {
-        display: none;
+
+      .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;
       }
-      .splash {
-        font-size: 2rem;
+
+      .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 {
-        max-width: 60vw;
-        max-height: 40vh;
-        margin-bottom: 1rem;
-        border-radius: 12px;
-        box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
-      }
-      .price {
-        font-size: 3rem;
-        color: #ffd700;
-        margin: 1rem 0;
-        transition: color 0.3s;
-      }
-      .deal {
-        font-size: 2.5rem;
-        color: #00ff88;
-      }
-      .footer {
-        position: absolute;
-        bottom: 10px;
         width: 100%;
-        text-align: center;
+        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: #aaa;
+        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 id="guide" class="center">
-      <p>请将此窗口拖曳到大屏幕并按下 <b>F11</b> 进行展示</p>
-      <p>控制端链接: <span id="controlLink"></span></p>
-    </div>
+    <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="center hidden">
-      <div class="splash">🚀 Studio Name</div>
-      <div><img src="logo.png" alt="Logo" style="max-width: 200px" /></div>
-    </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="center hidden">
-      <div class="itemMedia"></div>
-      <div class="name"></div>
-      <div class="remark"></div>
-      <div class="price">￥0</div>
-    </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="center hidden">
-      <div class="deal">🎉 成交！</div>
-      <div class="finalPrice"></div>
-      <div class="winner"></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">总金额: <span id="totalAmount">0</span> 元</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
@@ -110,7 +487,7 @@
       const itemMedia = itemView.querySelector(".itemMedia");
       const itemName = itemView.querySelector(".name");
       const itemRemark = itemView.querySelector(".remark");
-      const itemPrice = itemView.querySelector(".price");
+      const itemPrice = itemView.querySelector(".price-value");
 
       const dealPrice = dealView.querySelector(".finalPrice");
       const dealWinner = dealView.querySelector(".winner");
@@ -122,13 +499,30 @@
       // 设置控制端链接
       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(() => {
-        guide.classList.add("hidden");
-        splash.classList.remove("hidden");
+        showView(splash);
         setTimeout(() => {
-          splash.classList.add("hidden");
+          // splash 展示后不自动隐藏，等待消息
         }, 2000);
       }, 3000);
 
@@ -136,11 +530,11 @@
       function animatePrice() {
         if (Math.abs(targetPrice - currentPrice) > 1) {
           currentPrice += (targetPrice - currentPrice) * 0.1;
-          itemPrice.textContent = "￥" + Math.round(currentPrice);
+          itemPrice.textContent = Math.round(currentPrice);
           requestAnimationFrame(animatePrice);
         } else {
           currentPrice = targetPrice;
-          itemPrice.textContent = "￥" + currentPrice;
+          itemPrice.textContent = currentPrice;
         }
       }
 
@@ -148,18 +542,16 @@
       channel.onmessage = (ev) => {
         const msg = ev.data;
         if (msg.type === "showItem") {
-          splash.classList.add("hidden");
-          dealView.classList.add("hidden");
-          itemView.classList.remove("hidden");
+          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></video>`;
+              itemMedia.innerHTML = `<video src="${msg.media}" autoplay loop muted></video>`;
             } else {
-              itemMedia.innerHTML = `<img src="${msg.media}" alt="">`;
+              itemMedia.innerHTML = `<img src="${msg.media}" alt="${msg.name}">`;
             }
           } else {
             itemMedia.innerHTML = "";
@@ -167,21 +559,32 @@
 
           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") {
-          itemView.classList.add("hidden");
-          dealView.classList.remove("hidden");
+          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>
