diff --git a/src/static/css/cyber-design.less b/src/static/css/cyber-design.less
new file mode 100644
index 0000000..228e97d
--- /dev/null
+++ b/src/static/css/cyber-design.less
@@ -0,0 +1,653 @@
+/**
+ * Cyber Design System - 现代科技感设计系统
+ * 基于 test.html 的设计规范
+ */
+
+// ============================================
+// 设计变量 Design Tokens
+// ============================================
+
+// 主色调
+@primary-color: #0052CC;
+@cyber-blue: #00D2FF;
+@cyber-blue-dark: #0052CC;
+
+// 灰度色阶
+@tech-gray-50: #F8FAFC;
+@tech-gray-100: #F1F5F9;
+@tech-gray-200: #E2E8F0;
+@tech-gray-300: #CBD5E1;
+@tech-gray-400: #94A3B8;
+@tech-gray-500: #64748B;
+@tech-gray-600: #475569;
+@tech-gray-700: #334155;
+@tech-gray-800: #1E293B;
+@tech-gray-900: #0F172A;
+
+// 功能色
+@success-color: #10B981;
+@warning-color: #F59E0B;
+@error-color: #EF4444;
+
+// 渐变
+@cyber-gradient: linear-gradient(135deg, @cyber-blue 0%, @cyber-blue-dark 100%);
+@page-gradient: radial-gradient(circle at top right, #f8fafc, #eff6ff);
+
+// 圆角
+@radius-sm: 8px;
+@radius-md: 12px;
+@radius-lg: 16px;
+@radius-xl: 20px;
+@radius-2xl: 24px;
+@radius-3xl: 32px;
+
+// 阴影
+@shadow-soft-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.03);
+@shadow-cyber-glow: 0 0 20px rgba(0, 210, 255, 0.3);
+@shadow-premium: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
+@shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
+@shadow-button: 0 4px 12px rgba(0, 82, 204, 0.25);
+
+// ============================================
+// 全局基础样式
+// ============================================
+
+// 页面背景
+.cyber-page-bg {
+  background: @page-gradient;
+  min-height: 100vh;
+}
+
+// 内容容器
+.cyber-container {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 24px 32px;
+}
+
+// ============================================
+// 玻璃态组件 Glass Components
+// ============================================
+
+// 玻璃态头部卡片
+.glass-header {
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  border-radius: @radius-3xl;
+  padding: 28px 32px;
+  box-shadow: @shadow-glass;
+}
+
+// 玻璃态内容卡片
+.glass-card {
+  background: #ffffff;
+  border-radius: @radius-3xl;
+  box-shadow: @shadow-premium;
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  overflow: hidden;
+}
+
+// ============================================
+// 按钮系统 Button System
+// ============================================
+
+// 主渐变按钮
+.cyber-button {
+  background: @cyber-gradient;
+  color: #ffffff;
+  border: none;
+  border-radius: @radius-xl;
+  padding: 12px 24px;
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: @shadow-button;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+
+  &:hover {
+    filter: brightness(1.1);
+    box-shadow: @shadow-cyber-glow;
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    filter: none;
+    transform: none;
+  }
+}
+
+// 幽灵按钮
+.ghost-button {
+  background: #ffffff;
+  color: @tech-gray-600;
+  border: 1px solid @tech-gray-200;
+  border-radius: @radius-xl;
+  padding: 10px 20px;
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+
+  &:hover {
+    background: @tech-gray-50;
+    border-color: @tech-gray-300;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+// ============================================
+// 输入框系统 Input System
+// ============================================
+
+.input-tech {
+  background: #ffffff;
+  border: 1px solid rgba(226, 232, 240, 0.6);
+  border-radius: @radius-xl;
+  padding: 12px 16px;
+  font-size: 14px;
+  color: @tech-gray-800;
+  transition: all 0.2s ease;
+  box-shadow: @shadow-soft-inner;
+  outline: none;
+
+  &::placeholder {
+    color: @tech-gray-400;
+  }
+
+  &:focus {
+    border-color: rgba(0, 82, 204, 0.3);
+    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.08);
+  }
+}
+
+// ============================================
+// 标签系统 Label System
+// ============================================
+
+.label-tech {
+  font-size: 11px;
+  font-weight: 700;
+  color: @tech-gray-400;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding-left: 4px;
+  margin-bottom: 8px;
+}
+
+// 徽章标签
+.badge-level {
+  display: inline-block;
+  padding: 4px 10px;
+  background: rgba(245, 158, 11, 0.1);
+  color: #D97706;
+  font-size: 10px;
+  font-weight: 700;
+  border-radius: 8px;
+  border: 1px solid rgba(245, 158, 11, 0.2);
+}
+
+.badge-primary {
+  display: inline-block;
+  padding: 4px 12px;
+  background: rgba(0, 82, 204, 0.08);
+  color: @primary-color;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 20px;
+}
+
+// ============================================
+// 表格系统 Table System  
+// ============================================
+
+.table-tech {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  thead tr {
+    th {
+      padding: 16px 16px 20px;
+      font-size: 11px;
+      font-weight: 700;
+      color: @tech-gray-400;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      border-bottom: 1px solid @tech-gray-100;
+      text-align: left;
+    }
+  }
+
+  tbody tr {
+    transition: background 0.15s ease;
+
+    &:hover {
+      background: @tech-gray-50;
+    }
+
+    td {
+      padding: 18px 16px;
+      font-size: 14px;
+      color: @tech-gray-600;
+      border-bottom: 1px solid transparent;
+    }
+  }
+}
+
+// ============================================
+// 分页系统 Pagination System
+// ============================================
+
+.pagination-tech {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .page-btn {
+    width: 36px;
+    height: 36px;
+    border-radius: @radius-xl;
+    border: none;
+    background: transparent;
+    color: @tech-gray-600;
+    font-size: 12px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: #ffffff;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    }
+
+    &.active {
+      background: @tech-gray-900;
+      color: #ffffff;
+      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
+    }
+  }
+}
+
+// ============================================
+// 信息区块 Info Block
+// ============================================
+
+.info-pill {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  background: rgba(255, 255, 255, 0.5);
+  padding: 8px 16px;
+  border-radius: 9999px;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  font-size: 12px;
+  font-weight: 500;
+
+  .info-label {
+    color: @tech-gray-400;
+  }
+
+  .info-value {
+    color: @tech-gray-700;
+    font-family: 'SF Mono', Monaco, monospace;
+  }
+
+  .info-divider {
+    width: 1px;
+    height: 12px;
+    background: @tech-gray-200;
+  }
+}
+
+// ============================================
+// 页脚区块 Footer Section
+// ============================================
+
+.footer-section {
+  padding: 20px 32px;
+  background: rgba(248, 250, 252, 0.5);
+  border-top: 1px solid @tech-gray-100;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+.stat-group {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+
+  .stat-item {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+
+    .stat-label {
+      font-size: 12px;
+      color: @tech-gray-400;
+      font-weight: 500;
+    }
+
+    .stat-value {
+      font-size: 14px;
+      font-weight: 700;
+      color: @tech-gray-900;
+
+      &.primary {
+        color: @primary-color;
+      }
+    }
+  }
+}
+
+// ============================================
+// 滚动条美化 Scrollbar
+// ============================================
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: @tech-gray-300;
+  border-radius: 10px;
+
+  &:hover {
+    background: @tech-gray-400;
+  }
+}
+
+// ============================================
+// Element Plus 组件覆盖 - 输入框
+// ============================================
+
+.cyber-form {
+  // 输入框
+  .el-input__wrapper {
+    background: #ffffff !important;
+    border: 1px solid rgba(226, 232, 240, 0.6) !important;
+    border-radius: @radius-xl !important;
+    box-shadow: @shadow-soft-inner !important;
+    padding: 4px 16px !important;
+    transition: all 0.2s ease !important;
+
+    &:hover {
+      border-color: @tech-gray-300 !important;
+    }
+
+    &.is-focus {
+      border-color: rgba(0, 82, 204, 0.3) !important;
+      box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.08) !important;
+    }
+  }
+
+  .el-input--large .el-input__wrapper {
+    height: 44px !important;
+  }
+
+  // 选择器
+  .el-select__wrapper {
+    background: #ffffff !important;
+    border: 1px solid rgba(226, 232, 240, 0.6) !important;
+    border-radius: @radius-xl !important;
+    box-shadow: @shadow-soft-inner !important;
+    padding: 4px 16px !important;
+    min-height: 44px !important;
+    transition: all 0.2s ease !important;
+
+    &:hover {
+      border-color: @tech-gray-300 !important;
+    }
+
+    &.is-focus {
+      border-color: rgba(0, 82, 204, 0.3) !important;
+      box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.08) !important;
+    }
+  }
+
+  // 复选框
+  .el-checkbox {
+    height: 44px;
+    padding: 0 16px;
+    background: #ffffff;
+    border: 1px solid rgba(226, 232, 240, 0.6);
+    border-radius: @radius-xl;
+    transition: all 0.2s ease;
+
+    &:hover {
+      border-color: @tech-gray-300;
+    }
+
+    .el-checkbox__input.is-checked .el-checkbox__inner {
+      background-color: @primary-color;
+      border-color: @primary-color;
+    }
+
+    .el-checkbox__label {
+      font-weight: 600;
+      color: @tech-gray-600;
+    }
+  }
+
+  // 按钮 - 主要
+  .el-button--primary {
+    background: @cyber-gradient !important;
+    border: none !important;
+    border-radius: @radius-xl !important;
+    font-weight: 600 !important;
+    box-shadow: @shadow-button !important;
+    transition: all 0.3s ease !important;
+    height: 44px !important;
+    padding: 0 24px !important;
+
+    &:hover {
+      filter: brightness(1.1);
+      box-shadow: @shadow-cyber-glow !important;
+      transform: translateY(-1px);
+    }
+
+    &:active {
+      transform: translateY(0);
+    }
+
+    &:disabled,
+    &.is-disabled {
+      opacity: 0.6 !important;
+      filter: none !important;
+      transform: none !important;
+      cursor: not-allowed !important;
+    }
+  }
+
+  // 按钮 - 默认
+  .el-button--default {
+    background: #ffffff !important;
+    border: 1px solid @tech-gray-200 !important;
+    border-radius: @radius-xl !important;
+    color: @tech-gray-600 !important;
+    font-weight: 600 !important;
+    transition: all 0.2s ease !important;
+    height: 44px !important;
+    padding: 0 20px !important;
+
+    &:hover {
+      background: @tech-gray-50 !important;
+      border-color: @tech-gray-300 !important;
+      transform: translateY(-1px);
+    }
+  }
+}
+
+// ============================================
+// Element Plus 组件覆盖 - 表格
+// ============================================
+
+.cyber-table {
+  .el-table {
+    background: transparent !important;
+    --el-table-border-color: transparent;
+    --el-table-header-bg-color: transparent;
+    --el-table-row-hover-bg-color: rgba(248, 250, 252, 0.8);
+
+    th.el-table__cell {
+      background: transparent !important;
+      font-size: 11px !important;
+      font-weight: 700 !important;
+      color: @tech-gray-400 !important;
+      text-transform: uppercase !important;
+      letter-spacing: 0.05em !important;
+      padding: 16px 12px 20px !important;
+      border-bottom: 1px solid @tech-gray-100 !important;
+    }
+
+    td.el-table__cell {
+      padding: 16px 12px !important;
+      font-size: 14px !important;
+      color: @tech-gray-600 !important;
+      border-bottom: 1px solid transparent !important;
+    }
+
+    .el-table__row:hover > td.el-table__cell {
+      background: @tech-gray-50 !important;
+    }
+  }
+}
+
+// ============================================
+// Element Plus 组件覆盖 - 分页
+// ============================================
+
+.cyber-pagination {
+  .el-pagination {
+    --el-pagination-bg-color: transparent;
+    --el-pagination-hover-color: @primary-color;
+
+    .el-pager li {
+      min-width: 36px;
+      height: 36px;
+      line-height: 36px;
+      border-radius: @radius-xl;
+      font-weight: 700;
+      font-size: 12px;
+      margin: 0 2px;
+      background: transparent;
+      transition: all 0.2s ease;
+
+      &:hover {
+        background: #ffffff;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      }
+
+      &.is-active {
+        background: @tech-gray-900 !important;
+        color: #ffffff !important;
+        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
+      }
+    }
+
+    .btn-prev,
+    .btn-next {
+      background: transparent;
+      border-radius: @radius-xl;
+      transition: all 0.2s ease;
+
+      &:hover {
+        background: #ffffff;
+        color: @primary-color;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      }
+    }
+
+    .el-select__wrapper {
+      background: #ffffff !important;
+      border: 1px solid @tech-gray-200 !important;
+      border-radius: @radius-xl !important;
+    }
+  }
+}
+
+// ============================================
+// 布局辅助类 Layout Utilities
+// ============================================
+
+.flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-start {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.gap-2 { gap: 8px; }
+.gap-3 { gap: 12px; }
+.gap-4 { gap: 16px; }
+.gap-6 { gap: 24px; }
+.gap-8 { gap: 32px; }
+
+.mt-4 { margin-top: 16px; }
+.mt-6 { margin-top: 24px; }
+.mt-8 { margin-top: 32px; }
+
+.mb-4 { margin-bottom: 16px; }
+.mb-6 { margin-bottom: 24px; }
+.mb-8 { margin-bottom: 32px; }
+
+.p-4 { padding: 16px; }
+.p-6 { padding: 24px; }
+.p-8 { padding: 32px; }
+
+// 分割线
+.divider-line {
+  width: 100%;
+  height: 1px;
+  background: linear-gradient(to right, transparent, @tech-gray-200, transparent);
+  margin: 24px 0;
+}
+
+.divider-vertical {
+  width: 1px;
+  height: 24px;
+  background: @tech-gray-200;
+}
diff --git a/src/views/hosts/hostsList.vue b/src/views/hosts/hostsList.vue
index 0b5f04a..0ef36eb 100644
--- a/src/views/hosts/hostsList.vue
+++ b/src/views/hosts/hostsList.vue
@@ -1,212 +1,207 @@
 <template>
-  <div class="hostList">
-    <div>
-      <!-- 顶部条件 -->
-      <div style="display: flex">
-        <el-checkbox
-          class="isFilter"
-          v-model="queryFormData.isFilter"
-          :label="t('hostsList.filterPrivateUsers')"
-          size="large"
-          border
-        />
+  <div class="hostList cyber-form">
+    <!-- 顶部筛选区域 - 玻璃态设计 -->
+    <div class="filter-header glass-header">
+      <!-- 第一行：主要筛选条件 -->
+      <div class="filter-row primary-filters">
+        <!-- 左侧筛选控件 -->
+        <div class="filter-group flex-start gap-4">
+          <el-checkbox
+            class="cyber-checkbox"
+            v-model="queryFormData.isFilter"
+            :label="t('hostsList.filterPrivateUsers')"
+            size="large"
+          />
+          
+          <div class="input-group">
+            <label class="input-label">
+              <span class="label-icon">💰</span>
+              {{ t('hostsList.coins') }}
+            </label>
+            <div class="input-pair">
+              <el-input
+                v-model="queryFormData.coinMin"
+                :placeholder="t('hostsList.minCoins')"
+                size="large"
+                type="number"
+                :disabled="streamdialogVisibletext || isRunnings"
+              />
+              <span class="input-divider">/</span>
+              <el-input
+                v-model="queryFormData.coinMax"
+                :placeholder="t('hostsList.maxCoins')"
+                size="large"
+                type="number"
+                :disabled="streamdialogVisibletext || isRunnings"
+              />
+            </div>
+          </div>
 
-        <el-input
-          v-model="queryFormData.coinMin"
-          :placeholder="t('hostsList.minCoins')"
-          size="large"
-          style="width: 180px"
-          type="number"
-          :disabled="streamdialogVisibletext || isRunnings"
-        />
+          <div class="input-group">
+            <label class="input-label">
+              <span class="label-icon">📊</span>
+              {{ t('hostsList.level') }}
+            </label>
+            <div class="input-pair">
+              <el-input
+                v-model="queryFormData.levelMin"
+                :placeholder="t('hostsList.minLevel')"
+                size="large"
+                type="number"
+                :disabled="streamdialogVisibletext || isRunnings"
+              />
+              <span class="input-divider">/</span>
+              <el-input
+                v-model="queryFormData.levelMax"
+                :placeholder="t('hostsList.maxLevel')"
+                size="large"
+                type="number"
+                :disabled="streamdialogVisibletext || isRunnings"
+              />
+            </div>
+          </div>
+        </div>
 
-        <el-input
-          v-model="queryFormData.coinMax"
-          :placeholder="t('hostsList.maxCoins')"
-          size="large"
-          style="width: 180px"
-          class="right-input"
-          type="number"
-          :disabled="streamdialogVisibletext || isRunnings"
-        />
-
-        <el-input
-          v-model="queryFormData.levelMin"
-          :placeholder="t('hostsList.minLevel')"
-          size="large"
-          style="width: 180px"
-          class="right-input"
-          type="number"
-          :disabled="streamdialogVisibletext || isRunnings"
-        />
-
-        <el-input
-          v-model="queryFormData.levelMax"
-          :placeholder="t('hostsList.maxLevel')"
-          size="large"
-          style="width: 180px"
-          class="right-input"
-          type="number"
-          :disabled="streamdialogVisibletext || isRunnings"
-        />
-
-        <el-button
-          @click="streamdialogVisible = true"
-          :disabled="isRunnings"
-          class="put-button buttoMore-filters Specify"
-          type="primary"
-        >
-          <div>
+        <!-- 右侧操作按钮 -->
+        <div class="action-group flex-start gap-3">
+          <el-button
+            @click="streamdialogVisible = true"
+            :disabled="isRunnings"
+            class="cyber-btn-primary"
+            type="primary"
+          >
+            <span class="btn-icon">📍</span>
             {{
               streamdialogVisibletext
                 ? t('hostsList.specifiedRooms')
                 : t('hostsList.specifyRooms')
             }}
-          </div>
-        </el-button>
+          </el-button>
 
-        <div
-          class="right-input right-text"
-          style="width: 160px; height: 50px; line-height: 50px"
-        >
-          {{ t('hostsList.total') }}：{{ getBrotherInfodata.total }}
+          <el-button
+            v-show="queryFormData.isRunning"
+            class="cyber-btn-success"
+            type="primary"
+            @click="getBigBrother"
+          >
+            {{ t('hostsList.start') }}
+          </el-button>
+
+          <el-button
+            v-show="!queryFormData.isRunning"
+            class="cyber-btn-danger"
+            type="primary"
+            @click="BigBrotherstop"
+          >
+            {{ t('hostsList.end') }}
+          </el-button>
         </div>
-        <div
-          class="right-input right-text"
-          style="width: 160px; height: 50px; line-height: 50px"
-        >
-          {{ t('hostsList.valid') }}：{{ getBrotherInfodata.valid }}
-        </div>
-
-        <el-button
-          class="serch-button right-input"
-          type="primary"
-          @click="Resetss"
-        >
-          {{ t('hostsList.reset') }}
-        </el-button>
-
-        <el-button
-          v-show="queryFormData.isRunning"
-          class="serch-button right-input"
-          type="primary"
-          @click="getBigBrother"
-        >
-          {{ t('hostsList.start') }}
-        </el-button>
-
-        <el-button
-          v-show="!queryFormData.isRunning"
-          class="serch-button right-input"
-          type="primary"
-          @click="BigBrotherstop"
-        >
-          {{ t('hostsList.end') }}
-        </el-button>
       </div>
 
-      <div
-        style="width: 100%; border-bottom: 1px solid #e9e9e9; margin-top: 30px"
-      ></div>
+      <!-- 分割线 -->
+      <div class="filter-divider"></div>
 
-      <!-- 第二行筛选 -->
-      <div style="display: flex; margin-top: 30px; flex-wrap: wrap">
-        <el-select
-          v-model="searchForm.region"
-          filterable
-          :placeholder="t('hostsList.selectCountry')"
-          size="large"
-          style="width: 160px"
-        >
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
+      <!-- 第二行：搜索和操作 -->
+      <div class="filter-row secondary-filters">
+        <div class="filter-group flex-start gap-4">
+          <el-select
+            v-model="searchForm.region"
+            filterable
+            :placeholder="t('hostsList.selectCountry')"
+            size="large"
+            class="cyber-select"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
 
-        <el-input
-          v-model="searchForm.displayId"
-          :placeholder="t('hostsList.bigBrotherId')"
-          size="large"
-          style="width: 160px"
-          class="right-input"
-          clearable
-        />
+          <el-input
+            v-model="searchForm.displayId"
+            :placeholder="t('hostsList.bigBrotherId')"
+            size="large"
+            class="cyber-input-search"
+            clearable
+          >
+            <template #prefix>
+              <span class="input-prefix-icon">@</span>
+            </template>
+          </el-input>
 
-        <el-button
-          class="serch-button right-input"
-          type="primary"
-          @click="serch"
-        >
-          {{ t('hostsList.search') }}
-        </el-button>
+          <el-button class="ghost-btn" @click="serch">
+            <span class="btn-icon">🔍</span>
+            {{ t('hostsList.search') }}
+          </el-button>
 
-        <el-button class="serch-button" type="primary" @click="reset">
-          {{ t('hostsList.reset') }}
-        </el-button>
+          <el-button class="ghost-btn" @click="reset">
+            <span class="btn-icon">🔄</span>
+            {{ t('hostsList.reset') }}
+          </el-button>
 
-        <el-button
-          class="put-button"
-          :disabled="tableData.length == 0"
-          type="primary"
-          @click="exportList"
-        >
-          {{ t('hostsList.exportExcel') }}
-        </el-button>
+          <el-button
+            class="ghost-btn"
+            :disabled="tableData.length == 0"
+            @click="exportList"
+          >
+            <span class="btn-icon">📥</span>
+            {{ t('hostsList.exportExcel') }}
+          </el-button>
 
-        <el-button
-          @click="filterdialogVisible = true"
-          class="put-button buttoMore-filters"
-          type="primary"
-        >
-          <img class="filters-img" src="@/assets/filter.png" />
-          <div style="margin-left: 10px">
+          <el-button
+            @click="filterdialogVisible = true"
+            class="ghost-btn"
+          >
+            <span class="btn-icon">⚙️</span>
             {{ t('hostsList.moreFilters') }}
-          </div>
-        </el-button>
+          </el-button>
 
-        <el-button
-          class="serch-button right-input"
-          style="width: 150px"
-          type="primary"
-          @click="openTikTok"
-        >
-          {{ t('hostsList.openTikTok') }}
-        </el-button>
-
-        <div
-          class="right-input right-text"
-          style="width: auto; height: 50px; line-height: 50px"
-        >
-          {{ t('hostsList.currentNetwork') }}：{{ countryData }}
+          <el-button
+            class="ghost-btn"
+            @click="openTikTok"
+          >
+            <span class="btn-icon">🎵</span>
+            {{ t('hostsList.openTikTok') }}
+          </el-button>
         </div>
 
-        <div
-          class="right-input right-text"
-          style="width: auto; height: 50px; line-height: 50px"
-        >
-          {{ t('hostsList.runningTime') }}：
-          {{ String(hourstuo).padStart(2, '0') }}:{{
-            String(minutestuo).padStart(2, '0')
-          }}:{{ String(secondstuo).padStart(2, '0') }}
+        <!-- 状态信息 -->
+        <div class="status-info">
+          <div class="info-pill">
+            <span class="info-label">{{ t('hostsList.currentNetwork') }}:</span>
+            <span class="info-value highlight">{{ countryData }}</span>
+            <span class="info-divider"></span>
+            <span class="info-label">{{ t('hostsList.runningTime') }}:</span>
+            <span class="info-value mono">
+              {{ String(hourstuo).padStart(2, '0') }}:{{
+                String(minutestuo).padStart(2, '0')
+              }}:{{ String(secondstuo).padStart(2, '0') }}
+            </span>
+            <span class="info-divider"></span>
+            <span class="info-label">{{ t('hostsList.total') }}:</span>
+            <span class="info-value">{{ getBrotherInfodata.total }}</span>
+            <span class="info-divider"></span>
+            <span class="info-label">{{ t('hostsList.valid') }}:</span>
+            <span class="info-value primary">{{ getBrotherInfodata.valid }}</span>
+          </div>
         </div>
       </div>
+    </div>
 
-      <!-- 表格 -->
-      <div class="hostTable center-justify">
+    <!-- 表格区域 - 卡片设计 -->
+    <div class="table-container glass-card cyber-table">
+      <div class="table-wrapper">
         <el-table
           ref="multipleTableRef"
           :data="tableData"
           stripe
           v-loading="loading"
-          max-height="500"
+          max-height="420"
           @cell-dblclick="handleCellDbClick"
           @selection-change="handleSelectionChange"
         >
-          <!-- <el-table-column type="selection" width="35" /> -->
-
           <el-table-column
             fixed
             prop="displayId"
@@ -215,7 +210,7 @@
           >
             <template #default="scope">
               <div
-                class="hostIdText"
+                class="link-text"
                 @click="openHTML(scope.row.displayId)"
               >
                 {{ scope.row.displayId }}
@@ -230,7 +225,7 @@
           >
             <template #default="scope">
               <div
-                class="hostIdText"
+                class="link-text"
                 @click.ctrl.exact="handleLongPress(scope.row.hostDisplayId)"
               >
                 {{ scope.row.hostDisplayId }}
@@ -254,8 +249,14 @@
         </el-table>
       </div>
 
-      <!-- 分页 -->
-      <div class="center-justify" style="margin-top: 30px">
+      <!-- 分页区域 -->
+      <div class="table-footer cyber-pagination">
+        <div class="footer-left">
+          <!-- <el-button class="ghost-btn-sm" @click="Resetss">
+            <span class="btn-icon">🗑️</span>
+            {{ t('hostsList.reset') }}
+          </el-button> -->
+        </div>
         <el-pagination
           v-model:current-page="page"
           v-model:page-size="pageSize"
@@ -267,198 +268,198 @@
           @current-change="handleCurrentChange"
         />
       </div>
+    </div>
 
-      <!-- 更多筛选弹窗 -->
-      <el-dialog
-        v-model="filterdialogVisible"
-        width="800px"
-        :before-close="handleClose"
-      >
-        <el-row :gutter="20">
-          <el-col :span="4">
-            <div
-              style="height: 100%; padding-top: 10px"
-              class="center-justify"
-            >
-              {{ t('hostsList.time') }}
-            </div>
-          </el-col>
-          <el-col :span="10">
-            <div>
-              <label>
-                {{ t('hostsList.startTime') }}/{{ t('hostsList.endTime') }}
-              </label>
-            </div>
-
-            <el-date-picker
-              v-model="createTimes"
-              type="datetimerange"
-              value-format="YYYY-MM-DD HH:mm:ss"
-              :placeholder="t('hostsList.selectTime')"
-              size="large"
-              style="width: 600px; margin-top: 10px"
-            />
-          </el-col>
-        </el-row>
-
-        <el-row
-          v-for="(field, index) in fields"
-          :key="index"
-          :gutter="20"
-          style="margin-bottom: 10px"
-        >
-          <el-col :span="4">
-            <div style="height: 100%" class="center-justify">
-              {{ field.label }}
-            </div>
-          </el-col>
-          <el-col :span="10">
-            <div>
-              <label>{{ t('hostsList.minValue') }}</label>
-            </div>
-            <el-input
-              type="number"
-              :oninput="'if(value.length>9)value=value.slice(0,9)'"
-              v-model.number="searchForm[field.minModel]"
-              :placeholder="t('hostsList.enterMinValue')"
-            />
-          </el-col>
-          <el-col :span="10">
-            <div>
-              <label>{{ t('hostsList.maxValue') }}</label>
-            </div>
-            <el-input
-              type="number"
-              :oninput="'if(value.length>9)value=value.slice(0,9)'"
-              v-model.number="searchForm[field.maxModel]"
-              :placeholder="t('hostsList.enterMaxValue')"
-            />
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="20">
-          <el-col :span="4">
-            <div
-              style="height: 100%; padding-top: 10px"
-              class="center-justify"
-            >
-              {{ t('hostsList.sort') }}
-            </div>
-          </el-col>
-          <el-col :span="10">
-            <div>
-              <label>{{ t('hostsList.sortType') }}</label>
-            </div>
-
-            <el-select
-              v-model="sortData.sortName"
-              filterable
-              :placeholder="t('hostsList.pleaseSelect')"
-              style="width: 240px"
-            >
-              <el-option
-                v-for="item in sortNameOptions"
-                :key="item.type"
-                :label="item.label"
-                :value="item.type"
-              />
-            </el-select>
-          </el-col>
-          <el-col :span="10">
-            <div>
-              <label>{{ t('hostsList.sortOrder') }}</label>
-            </div>
-
-            <el-select
-              v-model="sortData.sort"
-              filterable
-              :placeholder="t('hostsList.pleaseSelect')"
-              style="width: 240px"
-            >
-              <el-option
-                v-for="item in [
-                  { label: t('hostsList.ascending'), value: 'asc' },
-                  { label: t('hostsList.descending'), value: 'desc' },
-                ]"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-col>
-        </el-row>
-
-        <template #footer>
-          <span class="dialog-footer">
-            <el-button type="primary" @click="reset">
-              {{ t('hostsList.reset') }}
-            </el-button>
-            <el-button type="primary" @click="handelClick">
-              {{ t('hostsList.confirm') }}
-            </el-button>
-          </span>
-        </template>
-      </el-dialog>
-
-      <!-- 指定直播间弹窗 -->
-      <el-dialog
-        v-model="streamdialogVisible"
-        width="800px"
-        :before-close="handleClose"
-      >
-        <div class="specify-dialog">
-          <el-input
-            v-model="textarea"
-            style="width: 100%"
-            :rows="15"
-            type="textarea"
-            :placeholder="t('hostsList.enterRoomIds')"
-            @input="handleInput"
-          />
-          <div class="specify-footer">
-            <el-button class="specify-button" @click="specifyCancel">
-              {{ t('hostsList.cancelSpecify') }}
-            </el-button>
-            <el-button
-              class="specify-button"
-              type="primary"
-              @click="specifyreset"
-            >
-              {{ t('hostsList.specifyReset') }}
-            </el-button>
-            <el-button
-              class="specify-button"
-              type="primary"
-              @click="specifyClick"
-            >
-              {{ t('hostsList.specifyConfirm') }}
-            </el-button>
-            <el-button
-              class="specify-button"
-              type="primary"
-              @click="specifyClickStart"
-            >
-              {{ t('hostsList.specifyStart') }}
-            </el-button>
+    <!-- 更多筛选弹窗 -->
+    <el-dialog
+      v-model="filterdialogVisible"
+      width="800px"
+      :before-close="handleClose"
+      class="cyber-dialog"
+    >
+      <el-row :gutter="20">
+        <el-col :span="4">
+          <div
+            style="height: 100%; padding-top: 10px"
+            class="center-justify"
+          >
+            {{ t('hostsList.time') }}
+          </div>
+        </el-col>
+        <el-col :span="10">
+          <div>
+            <label>
+              {{ t('hostsList.startTime') }}/{{ t('hostsList.endTime') }}
+            </label>
           </div>
-        </div>
-      </el-dialog>
-    </div>
-  </div>
 
-  <!-- 网络不可访问弹窗 -->
-  <el-dialog
-    v-model="Inaccessible"
-    width="800px"
-    :before-close="handleClose"
-  >
-    <div class="inaccessible-dialog">
-      <img class="inaccessible-img" src="@/assets/wifi.png" />
-    </div>
-    <div class="inaccessible-dialog">
-      {{ t('hostsList.networkFailed') }}
-    </div>
-  </el-dialog>
+          <el-date-picker
+            v-model="createTimes"
+            type="datetimerange"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            :placeholder="t('hostsList.selectTime')"
+            size="large"
+            style="width: 600px; margin-top: 10px"
+          />
+        </el-col>
+      </el-row>
+
+      <el-row
+        v-for="(field, index) in fields"
+        :key="index"
+        :gutter="20"
+        style="margin-bottom: 10px"
+      >
+        <el-col :span="4">
+          <div style="height: 100%" class="center-justify">
+            {{ field.label }}
+          </div>
+        </el-col>
+        <el-col :span="10">
+          <div>
+            <label>{{ t('hostsList.minValue') }}</label>
+          </div>
+          <el-input
+            type="number"
+            :oninput="'if(value.length>9)value=value.slice(0,9)'"
+            v-model.number="searchForm[field.minModel]"
+            :placeholder="t('hostsList.enterMinValue')"
+          />
+        </el-col>
+        <el-col :span="10">
+          <div>
+            <label>{{ t('hostsList.maxValue') }}</label>
+          </div>
+          <el-input
+            type="number"
+            :oninput="'if(value.length>9)value=value.slice(0,9)'"
+            v-model.number="searchForm[field.maxModel]"
+            :placeholder="t('hostsList.enterMaxValue')"
+          />
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="4">
+          <div
+            style="height: 100%; padding-top: 10px"
+            class="center-justify"
+          >
+            {{ t('hostsList.sort') }}
+          </div>
+        </el-col>
+        <el-col :span="10">
+          <div>
+            <label>{{ t('hostsList.sortType') }}</label>
+          </div>
+
+          <el-select
+            v-model="sortData.sortName"
+            filterable
+            :placeholder="t('hostsList.pleaseSelect')"
+            style="width: 240px"
+          >
+            <el-option
+              v-for="item in sortNameOptions"
+              :key="item.type"
+              :label="item.label"
+              :value="item.type"
+            />
+          </el-select>
+        </el-col>
+        <el-col :span="10">
+          <div>
+            <label>{{ t('hostsList.sortOrder') }}</label>
+          </div>
+
+          <el-select
+            v-model="sortData.sort"
+            filterable
+            :placeholder="t('hostsList.pleaseSelect')"
+            style="width: 240px"
+          >
+            <el-option
+              v-for="item in [
+                { label: t('hostsList.ascending'), value: 'asc' },
+                { label: t('hostsList.descending'), value: 'desc' },
+              ]"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-col>
+      </el-row>
+
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="reset">
+            {{ t('hostsList.reset') }}
+          </el-button>
+          <el-button type="primary" @click="handelClick">
+            {{ t('hostsList.confirm') }}
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 指定直播间弹窗 -->
+    <el-dialog
+      v-model="streamdialogVisible"
+      width="800px"
+      :before-close="handleClose"
+      class="cyber-dialog"
+    >
+      <div class="specify-dialog">
+        <el-input
+          v-model="textarea"
+          style="width: 100%"
+          :rows="15"
+          type="textarea"
+          :placeholder="t('hostsList.enterRoomIds')"
+          @input="handleInput"
+        />
+        <div class="specify-footer">
+          <el-button class="ghost-btn" @click="specifyCancel">
+            {{ t('hostsList.cancelSpecify') }}
+          </el-button>
+          <el-button
+            class="ghost-btn"
+            @click="specifyreset"
+          >
+            {{ t('hostsList.specifyReset') }}
+          </el-button>
+          <el-button
+            type="primary"
+            @click="specifyClick"
+          >
+            {{ t('hostsList.specifyConfirm') }}
+          </el-button>
+          <el-button
+            type="primary"
+            @click="specifyClickStart"
+          >
+            {{ t('hostsList.specifyStart') }}
+          </el-button>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 网络不可访问弹窗 -->
+    <el-dialog
+      v-model="Inaccessible"
+      width="800px"
+      :before-close="handleClose"
+      class="cyber-dialog"
+    >
+      <div class="inaccessible-dialog">
+        <img class="inaccessible-img" src="@/assets/wifi.png" />
+      </div>
+      <div class="inaccessible-dialog">
+        {{ t('hostsList.networkFailed') }}
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 
@@ -1059,138 +1060,554 @@ function openhostDisplayId(hostDisplayId) {
 
 
 <style lang="less">
+@import "@/static/css/cyber-design.less";
+
 .hostList {
   box-sizing: border-box;
-  // height: 100vh;
-  padding: 40px;
+  padding: 24px 28px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 
   /* 页面无法选中 */
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+}
 
-  .hostTable {
-    width: 100%;
-    padding: 30px 0;
+// ================================
+// 玻璃态头部区域
+// ================================
+.filter-header.glass-header {
+  background: rgba(255, 255, 255, 0.75);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  border-radius: 24px;
+  padding: 24px 28px;
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.06);
+}
 
-    .hostIdText {
-      text-decoration: underline;
-      cursor: pointer;
+.filter-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.filter-group {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.filter-divider {
+  width: 100%;
+  height: 1px;
+  background: linear-gradient(to right, transparent, rgba(226, 232, 240, 0.6), transparent);
+  margin: 20px 0;
+}
+
+// ================================
+// 输入框组样式
+// ================================
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.input-label {
+  font-size: 11px;
+  font-weight: 700;
+  color: #94a3b8;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+
+  .label-icon {
+    font-size: 12px;
+  }
+}
+
+.input-pair {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .el-input {
+    width: 120px;
+  }
+}
+
+.input-divider {
+  color: #cbd5e1;
+  font-weight: 300;
+}
+
+.input-prefix-icon {
+  color: #94a3b8;
+  font-weight: 600;
+}
+
+// ================================
+// 按钮样式
+// ================================
+.cyber-btn-primary {
+  background: linear-gradient(135deg, #00D2FF 0%, #0052CC 100%) !important;
+  border: none !important;
+  border-radius: 16px !important;
+  font-weight: 600 !important;
+  padding: 0 20px !important;
+  height: 42px !important;
+  box-shadow: 0 4px 12px rgba(0, 82, 204, 0.25) !important;
+  transition: all 0.3s ease !important;
+
+  .btn-icon {
+    margin-right: 6px;
+  }
+
+  &:hover {
+    filter: brightness(1.1);
+    box-shadow: 0 0 20px rgba(0, 210, 255, 0.4) !important;
+    transform: translateY(-1px);
+  }
+}
+
+.cyber-btn-success {
+  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
+  border: none !important;
+  border-radius: 16px !important;
+  font-weight: 600 !important;
+  padding: 0 24px !important;
+  height: 42px !important;
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
+}
+
+.cyber-btn-danger {
+  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
+  border: none !important;
+  border-radius: 16px !important;
+  font-weight: 600 !important;
+  padding: 0 24px !important;
+  height: 42px !important;
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
+}
+
+.ghost-btn {
+  background: #ffffff !important;
+  border: 1px solid #e2e8f0 !important;
+  border-radius: 14px !important;
+  color: #475569 !important;
+  font-weight: 600 !important;
+  padding: 0 16px !important;
+  height: 40px !important;
+  transition: all 0.2s ease !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: 6px !important;
+
+  .btn-icon {
+    font-size: 14px;
+  }
+
+  &:hover {
+    background: #f8fafc !important;
+    border-color: #cbd5e1 !important;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.ghost-btn-sm {
+  background: transparent !important;
+  border: 1px solid #e2e8f0 !important;
+  border-radius: 12px !important;
+  color: #64748b !important;
+  font-weight: 500 !important;
+  font-size: 12px !important;
+  padding: 0 12px !important;
+  height: 32px !important;
+
+  .btn-icon {
+    font-size: 12px;
+  }
+
+  &:hover {
+    background: #f1f5f9 !important;
+  }
+}
+
+// ================================
+// 状态信息胶囊
+// ================================
+.status-info {
+  .info-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 16px;
+    background: rgba(255, 255, 255, 0.6);
+    padding: 10px 20px;
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.8);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    font-size: 13px;
+
+    .info-label {
+      color: #94a3b8;
+      font-weight: 500;
+    }
+
+    .info-value {
+      color: #334155;
+      font-weight: 600;
+
+      &.highlight {
+        color: #0052CC;
+        background: rgba(0, 82, 204, 0.08);
+        padding: 2px 10px;
+        border-radius: 12px;
+      }
+
+      &.mono {
+        font-family: 'SF Mono', Monaco, monospace;
+      }
+
+      &.primary {
+        color: #0052CC;
+      }
+    }
+
+    .info-divider {
+      width: 1px;
+      height: 16px;
+      background: #e2e8f0;
+    }
+  }
+}
+
+// ================================
+// 表格容器
+// ================================
+.table-container.glass-card {
+  flex: 1;
+  background: #ffffff;
+  border-radius: 24px;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.table-wrapper {
+  flex: 1;
+  padding: 20px 24px 0;
+  overflow: hidden;
+}
+
+.table-footer {
+  padding: 16px 24px;
+  background: rgba(248, 250, 252, 0.5);
+  border-top: 1px solid #f1f5f9;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .footer-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+}
+
+// ================================
+// 表格样式覆盖
+// ================================
+.cyber-table {
+  .el-table {
+    background: transparent !important;
+    --el-table-border-color: transparent;
+    --el-table-header-bg-color: transparent;
+    --el-table-row-hover-bg-color: rgba(248, 250, 252, 0.8);
+
+    &::before {
+      display: none;
+    }
+
+    th.el-table__cell {
+      background: transparent !important;
+      font-size: 11px !important;
+      font-weight: 700 !important;
+      color: #94a3b8 !important;
+      text-transform: uppercase !important;
+      letter-spacing: 0.05em !important;
+      padding: 14px 12px 18px !important;
+      border-bottom: 1px solid #f1f5f9 !important;
+
+      .cell {
+        padding: 0 8px;
+      }
+    }
+
+    td.el-table__cell {
+      padding: 14px 12px !important;
+      font-size: 14px !important;
+      color: #475569 !important;
+      border-bottom: 1px solid transparent !important;
+
+      .cell {
+        padding: 0 8px;
+      }
+    }
+
+    .el-table__row {
+      transition: background 0.15s ease;
+
+      &:hover > td.el-table__cell {
+        background: #f8fafc !important;
+      }
+    }
+
+    // 斑马纹
+    .el-table__row--striped td.el-table__cell {
+      background: rgba(248, 250, 252, 0.4) !important;
     }
   }
 
-  .serch-button {
-    width: 80px;
-    height: 47px;
-    background: @btn-bg-color;
-    border-radius: 10px;
-    border: none;
-  }
+  .link-text {
+    color: #0052CC;
+    font-weight: 600;
+    text-decoration: underline;
+    text-decoration-color: rgba(0, 82, 204, 0.2);
+    text-underline-offset: 3px;
+    cursor: pointer;
+    transition: all 0.2s ease;
 
-  .put-button {
-    width: 132px;
-    height: 47px;
-    background: @btn-bg-color;
-    border-radius: 10px;
-    border: none;
-  }
-  .Specify {
-    margin-left: 20px;
+    &:hover {
+      text-decoration-color: #0052CC;
+    }
   }
 }
-.buttoMore-filters {
-  width: 150px;
-}
-.filters-img {
-  width: 30px;
-}
-.el-dialog {
-  --el-dialog-font-line-height: 50px;
-  --el-dialog-width: 600px;
-  --el-dialog-border-radius: 8px;
 
-  // border: 10px solid @bg-color-light;
+// ================================
+// 分页样式覆盖
+// ================================
+.cyber-pagination {
+  .el-pagination {
+    --el-pagination-bg-color: transparent;
+    --el-pagination-hover-color: #0052CC;
+
+    .el-pager li {
+      min-width: 34px;
+      height: 34px;
+      line-height: 34px;
+      border-radius: 10px;
+      font-weight: 600;
+      font-size: 12px;
+      margin: 0 2px;
+      background: transparent;
+      transition: all 0.2s ease;
+
+      &:hover {
+        background: #ffffff;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      }
+
+      &.is-active {
+        background: #0f172a !important;
+        color: #ffffff !important;
+        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
+      }
+    }
+
+    .btn-prev,
+    .btn-next {
+      background: transparent;
+      border-radius: 10px;
+      transition: all 0.2s ease;
+
+      &:hover {
+        background: #ffffff;
+        color: #0052CC;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      }
+    }
+
+    .el-select__wrapper {
+      background: #ffffff !important;
+      border: 1px solid #e2e8f0 !important;
+      border-radius: 10px !important;
+    }
+  }
 }
 
-.center-line {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  // justify-content: center;
+// ================================
+// 复选框样式
+// ================================
+.cyber-checkbox {
+  height: 40px;
+  padding: 0 16px;
+  background: #ffffff;
+  border: 1px solid rgba(226, 232, 240, 0.6);
+  border-radius: 14px;
+  transition: all 0.2s ease;
+  margin-right: 0 !important;
+  margin-top: 22px !important;
+  &:hover {
+    border-color: #cbd5e1;
+  }
+
+  .el-checkbox__input.is-checked .el-checkbox__inner {
+    background-color: #0052CC;
+    border-color: #0052CC;
+  }
+
+  .el-checkbox__label {
+    font-weight: 600;
+    color: #475569;
+    font-size: 13px;
+  }
 }
 
-.center-justify {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
+// ================================
+// 选择器样式
+// ================================
+.cyber-select {
+  width: 160px;
+
+  .el-select__wrapper {
+    background: #ffffff !important;
+    border: 1px solid rgba(226, 232, 240, 0.6) !important;
+    border-radius: 14px !important;
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.03) !important;
+    height: 40px !important;
+  }
 }
 
-.center-align {
-  display: flex;
-  justify-content: space-between;
+.cyber-input-search {
+  width: 180px;
+
+  .el-input__wrapper {
+    background: #ffffff !important;
+    border: 1px solid rgba(226, 232, 240, 0.6) !important;
+    border-radius: 14px !important;
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.03) !important;
+    height: 40px !important;
+  }
 }
 
-.center-flex {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>
+// ================================
+// 弹窗样式
+// ================================
+.cyber-dialog {
+  .el-dialog {
+    border-radius: 24px !important;
+    overflow: hidden;
+  }
 
-<style scoped lang="less">
-::v-deep(.el-input__wrapper) {
-  background-color: #f2faf9;
-  border: 1px solid @bg-color;
-  height: 44px;
+  .el-dialog__header {
+    padding: 20px 24px;
+    border-bottom: 1px solid #f1f5f9;
+  }
+
+  .el-dialog__body {
+    padding: 24px;
+  }
+
+  .el-dialog__footer {
+    padding: 16px 24px;
+    border-top: 1px solid #f1f5f9;
+  }
 }
 
-::v-deep(.el-select__wrapper) {
-  background-color: #f2faf9;
-  border: 1px solid @bg-color;
-  height: 48px;
-}
-
-::v-deep(.el-pagination.is-background .el-pager li.is-active) {
-  background-color: @bg-color;
-}
-.right-input {
-  margin-left: 20px;
-}
-.isFilter {
-  margin-right: 20px;
-  height: 47px;
-}
-.right-text {
-  color: #666;
-  font-size: 16px;
-}
 .specify-dialog {
-  height: 400px;
+  min-height: 350px;
 }
+
 .specify-footer {
   width: 100%;
   display: flex;
-  justify-content: space-around;
+  justify-content: flex-end;
+  gap: 12px;
   margin-top: 20px;
 }
-.specify-button {
-  width: 200px;
-  height: 50px;
-}
 
 .inaccessible-dialog {
   width: 100%;
-  height: 200px;
+  min-height: 150px;
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 20px;
-  color: #666;
+  font-size: 18px;
+  color: #64748b;
   text-align: center;
 }
+
 .inaccessible-img {
-  width: 200px;
-  height: 200px;
+  width: 120px;
+  height: 120px;
+  opacity: 0.6;
+}
+
+// ================================
+// Element Plus 输入框覆盖
+// ================================
+.el-input__wrapper {
+  background: #ffffff !important;
+  border: 1px solid rgba(226, 232, 240, 0.6) !important;
+  border-radius: 12px !important;
+  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.03) !important;
+  transition: all 0.2s ease !important;
+
+  &:hover {
+    border-color: #cbd5e1 !important;
+  }
+
+  &.is-focus {
+    border-color: rgba(0, 82, 204, 0.3) !important;
+    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.08) !important;
+  }
+}
+
+.el-input--large .el-input__wrapper {
+  height: 40px !important;
+  padding: 0 12px !important;
+}
+
+.el-select__wrapper {
+  background: #ffffff !important;
+  border: 1px solid rgba(226, 232, 240, 0.6) !important;
+  border-radius: 12px !important;
+  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.03) !important;
+  min-height: 40px !important;
+}
+
+// ================================
+// 工具类
+// ================================
+.flex-start {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.gap-3 { gap: 12px; }
+.gap-4 { gap: 16px; }
+
+.center-justify {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 </style>
diff --git a/src/views/nav.vue b/src/views/nav.vue
index 1846448..b957bf8 100644
--- a/src/views/nav.vue
+++ b/src/views/nav.vue
@@ -1,43 +1,43 @@
 <template>
-  <div class="app-container">
-    <!-- <Sidebar class="noneText" @activeIndex="activeIndexFn" /> -->
-    <div class="content ">
-      <!-- <div v-show="activeIndexA == 1">
-        <workbenches />
-      </div> -->
-      <div>
+  <div class="app-container cyber-page">
+    <div class="cyber-main-container">
+      <!-- 主内容区域 -->
+      <div class="content-wrapper glass-content">
         <hostsList />
       </div>
-      <!-- <div style="position: absolute; bottom: 0; right: 0;">{{ version }}</div> -->
-    </div>
-    <div class="footer">
-      {{ $t('common.expirationtime') }}{{ time }}
+      
+      <!-- 底部状态栏 -->
+      <div class="footer-bar">
+        <div class="footer-content">
+          <span class="footer-icon">⏱️</span>
+          <span class="footer-label">{{ $t('common.expirationtime') }}</span>
+          <span class="footer-value">{{ time }}</span>
+        </div>
       </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { ref, reactive, onMounted } from "vue";
-// import Sidebar from '../components/Sidebar.vue';
 import { RouterLink, RouterView } from 'vue-router'
 import hostsList from '@/views/hosts/hostsList.vue'
 import { ElMessage } from 'element-plus';
 import { getUser } from "@/utils/storage";
-// import workbenches from '@/views/hosts/workbenches.vue'
-import { tokenStore,UserStore } from '@/stores/notice'
+import { tokenStore, UserStore } from '@/stores/notice'
+
 const userCache = UserStore()
 const { t } = useI18n();
 const time = ref(formatTimestamp(userCache.user.brotherExpireTime))
+
 // 时间格式化方法 - 将12位时间戳转为YYYY-MM-DD HH:mm:ss格式
 function formatTimestamp(timestamp) {
   try {
-    // 转换为数字
     const ts = Number(timestamp);
     if (isNaN(ts)) {
       return '--';
     }
-    // 处理13位时间戳（毫秒级）
     const date = new Date(ts > 999999999999 ? ts : ts * 1000);
     const year = date.getFullYear();
     const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -51,57 +51,120 @@ function formatTimestamp(timestamp) {
     return '--';
   }
 }
-
-
 </script>
 
 <style lang="less">
+@import "@/static/css/cyber-design.less";
+
+* {
+  box-sizing: border-box;
+}
+
 body,
 html {
   margin: 0;
   padding: 0;
   height: 100%;
-    /* 页面无法选中 */
-    -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.app-container {
-  display: flex;
-  width: 1600px;
-  height: 900px;
-  background-color: @bg-color;
-  position: relative;
-
-
-}
-
-.noneText {
-  /* 页面无法选中 */
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.sidebar {
-  width: 200px;
-  background-color: @bg-color;
-  padding: 20px;
-  /* box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); */
+.app-container.cyber-page {
+  width: 1600px;
+  height: 900px;
+  background: radial-gradient(ellipse at top right, #f0f9ff 0%, #e0f2fe 30%, #f1f5f9 100%);
+  position: relative;
+  overflow: hidden;
+
+  // 背景装饰
+  &::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -20%;
+    width: 800px;
+    height: 800px;
+    background: radial-gradient(circle, rgba(0, 210, 255, 0.08) 0%, transparent 70%);
+    pointer-events: none;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -30%;
+    left: -10%;
+    width: 600px;
+    height: 600px;
+    background: radial-gradient(circle, rgba(0, 82, 204, 0.06) 0%, transparent 70%);
+    pointer-events: none;
+  }
 }
 
-.content {
-  // margin-left: 280px;
-  margin-left: 25px;
-  margin-right: 25px;
-  width: 1540px;
-  height: 848px;
-  background: #FFFFFF;
-  border-radius: 36px;
-  margin-top: 16px;
+.cyber-main-container {
+  width: 100%;
+  height: 100%;
+  padding: 20px 24px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 1;
+}
+
+.content-wrapper.glass-content {
+  flex: 1;
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 28px;
+  border: 1px solid rgba(255, 255, 255, 0.95);
+  box-shadow: 
+    0 20px 60px -10px rgba(0, 0, 0, 0.08),
+    0 10px 30px -5px rgba(0, 0, 0, 0.04),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  overflow: hidden;
+  position: relative;
+}
+
+.footer-bar {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 12px;
+}
+
+.footer-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 24px;
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(10px);
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+
+  .footer-icon {
+    font-size: 14px;
+  }
+
+  .footer-label {
+    font-size: 13px;
+    color: #64748b;
+    font-weight: 500;
+  }
+
+  .footer-value {
+    font-size: 13px;
+    color: #0052CC;
+    font-weight: 600;
+    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+  }
 }
 
 .center-justify {
@@ -109,11 +172,4 @@ html {
   justify-content: space-around;
   align-items: center;
 }
-.footer{
-  position: absolute;
-  bottom: 10px;
-  left: calc(50% - 150px);  
-  color: aqua;
-  font-size: 16px;
-}
 </style>
\ No newline at end of file