From 2e35f219e72d23fafc8b8d0ee2b85cde09c2b0cb Mon Sep 17 00:00:00 2001
From: yahaozhang <zhangyahao530@163.com>
Date: Mon, 3 Nov 2025 21:20:52 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=A1=B5=E9=9D=A2=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=92=8C=E7=BB=93=E6=9E=84=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E3=80=81=E9=94=99=E8=AF=AF=E5=92=8C=E5=88=B7?=
 =?UTF-8?q?=E6=96=B0=E9=A1=B5=E9=9D=A2=E7=9A=84=E7=94=A8=E6=88=B7=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C=EF=BC=8C=E8=B0=83=E6=95=B4Vite=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E4=BB=A5=E4=BD=BF=E7=94=A8=E7=94=9F=E4=BA=A7=E7=8E=AF=E5=A2=83?=
 =?UTF-8?q?API=EF=BC=8C=E6=96=B0=E5=A2=9E=E8=AE=A2=E5=8D=95=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E5=B1=95=E7=A4=BA=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=8F=90?=
 =?UTF-8?q?=E5=8D=87=E6=95=B4=E4=BD=93=E7=95=8C=E9=9D=A2=E4=B8=80=E8=87=B4?=
 =?UTF-8?q?=E6=80=A7=E5=92=8C=E5=8F=AF=E8=AF=BB=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/play/ErrorPage.vue       | 114 ++++++--
 src/components/play/LoadingOverlay.vue  | 147 +++++++++-
 src/components/play/RefreshWaitPage.vue | 169 ++++++++---
 src/components/play/ScanPage.vue        | 200 +++++++++----
 src/components/play/SelectRegion.vue    | 363 +++++++++++++++++-------
 src/views/Play.vue                      |   3 +-
 src/views/links/LinkGenerate.vue        |   4 +-
 src/views/oldplay.vue                   |  12 +-
 vite.config.js                          |   4 +-
 9 files changed, 781 insertions(+), 235 deletions(-)

diff --git a/src/components/play/ErrorPage.vue b/src/components/play/ErrorPage.vue
index 1e6c94b..8cd837d 100644
--- a/src/components/play/ErrorPage.vue
+++ b/src/components/play/ErrorPage.vue
@@ -1,11 +1,25 @@
 <template>
   <div class="error-page">
+    <div class="page-header">
+      <h1 class="title">出现错误</h1>
+    </div>
+
     <div class="error-container">
-      <div class="error-icon">❌</div>
+      <div class="icon-wrapper">
+        <svg class="error-svg" viewBox="0 0 24 24" width="80" height="80">
+          <circle cx="12" cy="12" r="11" fill="#f44336" opacity="0.1"/>
+          <path fill="#f44336" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+        </svg>
+      </div>
       <h2 class="error-title">{{ errorTitle }}</h2>
       <p class="error-message">{{ errorMessage }}</p>
       <button @click="$emit('retry')" class="retry-btn">重新尝试</button>
     </div>
+
+    <div class="notice-text">
+      <p>遇到问题？请联系客服</p>
+      <p>我们会尽快为您解决</p>
+    </div>
   </div>
 </template>
 
@@ -30,54 +44,110 @@ export default {
 .error-page {
   flex: 1;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 40px 20px;
+  flex-direction: column;
+  background: white;
+  min-height: 100vh;
+}
+
+.page-header {
+  text-align: center;
+  padding: 20px;
+  background: white;
+  border-bottom: 3px solid #f44336;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0;
+  color: #333;
+  background: linear-gradient(135deg, #f44336 0%, #e91e63 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
 .error-container {
-  background: white;
-  padding: 40px;
-  border-radius: 20px;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 40px 20px;
   text-align: center;
-  max-width: 400px;
-  width: 100%;
 }
 
-.error-icon {
-  font-size: 48px;
-  margin-bottom: 16px;
+.icon-wrapper {
+  margin-bottom: 24px;
+  animation: shake 0.5s ease-in-out;
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+  20%, 40%, 60%, 80% { transform: translateX(5px); }
+}
+
+.error-svg {
+  filter: drop-shadow(0 4px 8px rgba(244, 67, 54, 0.3));
 }
 
 .error-title {
-  font-size: 20px;
+  font-size: 22px;
   font-weight: 600;
   margin: 0 0 12px 0;
   color: #333;
 }
 
 .error-message {
-  font-size: 16px;
+  font-size: 14px;
   color: #666;
-  margin: 0 0 24px 0;
-  line-height: 1.5;
+  margin: 0 0 32px 0;
+  line-height: 1.6;
+  max-width: 320px;
 }
 
 .retry-btn {
-  background: #667eea;
+  background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
   color: white;
   border: none;
   padding: 12px 32px;
-  border-radius: 25px;
-  font-size: 16px;
+  border-radius: 8px;
+  font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
+  min-width: 140px;
 }
 
 .retry-btn:hover {
-  background: #5a6fd8;
-  transform: translateY(-2px);
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+.notice-text {
+  text-align: center;
+  padding: 20px;
+  background: #f8f9fa;
+  border-top: 2px solid #e9ecef;
+  margin-top: auto;
+}
+
+.notice-text p {
+  margin: 4px 0;
+  font-size: 12px;
+  color: #666;
+}
+
+@media (max-width: 768px) {
+  .error-svg {
+    width: 64px;
+    height: 64px;
+  }
+
+  .error-title {
+    font-size: 18px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/play/LoadingOverlay.vue b/src/components/play/LoadingOverlay.vue
index cea63bc..3a36018 100644
--- a/src/components/play/LoadingOverlay.vue
+++ b/src/components/play/LoadingOverlay.vue
@@ -1,7 +1,22 @@
 <template>
   <div class="loading-overlay">
-    <div class="loading-spinner"></div>
-    <p>加载中...</p>
+    <div class="page-header">
+      <h1 class="title">加载中</h1>
+    </div>
+
+    <div class="loading-container">
+      <div class="spinner-wrapper">
+        <div class="loading-spinner"></div>
+        <div class="loading-pulse"></div>
+      </div>
+      <p class="loading-text">正在加载订单信息...</p>
+      <p class="loading-subtext">请稍候</p>
+    </div>
+
+    <div class="notice-text">
+      <p>代理技术代练平台</p>
+      <p>安全 · 专业 · 高效</p>
+    </div>
   </div>
 </template>
 
@@ -18,26 +33,140 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(255, 255, 255, 0.9);
+  background: white;
+  display: flex;
+  flex-direction: column;
+  z-index: 1000;
+}
+
+.page-header {
+  text-align: center;
+  padding: 20px;
+  background: white;
+  border-bottom: 3px solid #4776e6;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0;
+  color: #333;
+  background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.loading-container {
+  flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  padding: 40px 20px;
+}
+
+.spinner-wrapper {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  margin-bottom: 32px;
 }
 
 .loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid #f3f3f3;
-  border-top: 4px solid #667eea;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 60px;
+  height: 60px;
+  margin-top: -30px;
+  margin-left: -30px;
+  border: 4px solid #e9ecef;
+  border-top: 4px solid #4776e6;
   border-radius: 50%;
   animation: spin 1s linear infinite;
-  margin-bottom: 16px;
+}
+
+.loading-pulse {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 80px;
+  height: 80px;
+  margin-top: -40px;
+  margin-left: -40px;
+  border: 2px solid #4776e6;
+  border-radius: 50%;
+  opacity: 0.3;
+  animation: pulse 2s ease-in-out infinite;
 }
 
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(0.8);
+    opacity: 0.3;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.6;
+  }
+}
+
+.loading-text {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0 0 8px 0;
+  color: #333;
+}
+
+.loading-subtext {
+  font-size: 14px;
+  margin: 0;
+  color: #666;
+}
+
+.notice-text {
+  text-align: center;
+  padding: 20px;
+  background: #f8f9fa;
+  border-top: 2px solid #e9ecef;
+  margin-top: auto;
+}
+
+.notice-text p {
+  margin: 4px 0;
+  font-size: 12px;
+  color: #666;
+}
+
+@media (max-width: 768px) {
+  .spinner-wrapper {
+    width: 64px;
+    height: 64px;
+  }
+
+  .loading-spinner {
+    width: 48px;
+    height: 48px;
+    margin-top: -24px;
+    margin-left: -24px;
+  }
+
+  .loading-pulse {
+    width: 64px;
+    height: 64px;
+    margin-top: -32px;
+    margin-left: -32px;
+  }
+
+  .loading-text {
+    font-size: 16px;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/play/RefreshWaitPage.vue b/src/components/play/RefreshWaitPage.vue
index 75b3020..0c9e929 100644
--- a/src/components/play/RefreshWaitPage.vue
+++ b/src/components/play/RefreshWaitPage.vue
@@ -1,26 +1,54 @@
 <template>
   <div class="refresh-wait-page">
     <div class="page-header">
-      <h1 class="title">请选择您的账号类型</h1>
+      <h1 class="title">需要刷新</h1>
     </div>
     
     <div class="refresh-container">
-      <div class="warning-icon">⚠️</div>
+      <div class="icon-wrapper">
+        <svg class="warning-svg" viewBox="0 0 24 24" width="80" height="80">
+          <path fill="#ff9800" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
+        </svg>
+      </div>
       <p class="refresh-text">页面需要刷新</p>
-      <p class="refresh-desc">请等待后重新选择区域</p>
+      <p class="refresh-desc">请等待冷却时间后重新选择区域</p>
+      
+      <div v-if="refreshCooldown > 0" class="cooldown-info">
+        <div class="cooldown-circle">
+          <svg class="cooldown-svg" viewBox="0 0 100 100" width="120" height="120">
+            <circle cx="50" cy="50" r="45" fill="none" stroke="#e9ecef" stroke-width="8"/>
+            <circle 
+              cx="50" 
+              cy="50" 
+              r="45" 
+              fill="none" 
+              stroke="#4776e6" 
+              stroke-width="8"
+              :stroke-dasharray="circumference"
+              :stroke-dashoffset="dashOffset"
+              transform="rotate(-90 50 50)"
+              style="transition: stroke-dashoffset 1s linear;"
+            />
+            <text x="50" y="50" text-anchor="middle" dy="0.3em" font-size="24" font-weight="bold" fill="#4776e6">
+              {{ refreshCooldown }}s
+            </text>
+          </svg>
+        </div>
+      </div>
+
       <button 
         @click="$emit('refresh')" 
         class="refresh-btn"
         :disabled="refreshCooldown > 0"
       >
-        {{ refreshCooldown > 0 ? `请等待 ${refreshCooldown}s` : '确定' }}
+        {{ refreshCooldown > 0 ? `请等待 ${refreshCooldown}秒` : '立即刷新' }}
       </button>
     </div>
 
     <div class="notice-text">
       <p>代理技术代练平台操作中</p>
       <p>绝对安全保障！请耐心等待</p>
-      <p>温馨提示: 请选择正确区域</p>
+      <p>温馨提示: 刷新后需重新选择区域</p>
       <p v-if="mecmachineId" class="machine-id-info">ID: {{ mecmachineId }}</p>
     </div>
   </div>
@@ -39,7 +67,27 @@ export default {
       default: null
     }
   },
-  emits: ['refresh']
+  emits: ['refresh'],
+  data() {
+    return {
+      maxCooldown: 60
+    }
+  },
+  computed: {
+    circumference() {
+      return 2 * Math.PI * 45
+    },
+    dashOffset() {
+      if (this.refreshCooldown === 0) return this.circumference
+      const progress = this.refreshCooldown / this.maxCooldown
+      return this.circumference * (1 - progress)
+    }
+  },
+  mounted() {
+    if (this.refreshCooldown > 0) {
+      this.maxCooldown = this.refreshCooldown
+    }
+  }
 }
 </script>
 
@@ -48,20 +96,27 @@ export default {
   flex: 1;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  background: white;
+  min-height: 100vh;
 }
 
 .page-header {
   text-align: center;
-  padding: 40px 20px 20px;
-  color: white;
+  padding: 20px;
+  background: white;
+  border-bottom: 3px solid #4776e6;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 .title {
-  font-size: 24px;
+  font-size: 20px;
   font-weight: 600;
-  margin: 0 0 16px 0;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  margin: 0;
+  color: #333;
+  background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
 .refresh-container {
@@ -70,63 +125,93 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 0 20px;
-  color: white;
+  padding: 40px 20px;
   text-align: center;
 }
 
-.warning-icon {
-  font-size: 48px;
-  margin-bottom: 16px;
+.icon-wrapper {
+  margin-bottom: 24px;
+  animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-10px);
+  }
+  60% {
+    transform: translateY(-5px);
+  }
+}
+
+.warning-svg {
+  filter: drop-shadow(0 4px 8px rgba(255, 152, 0, 0.3));
 }
 
 .refresh-text {
-  font-size: 20px;
+  font-size: 22px;
   font-weight: 600;
   margin: 0 0 8px 0;
+  color: #333;
 }
 
 .refresh-desc {
-  font-size: 16px;
-  margin: 0 0 24px 0;
-  opacity: 0.8;
+  font-size: 14px;
+  margin: 0 0 32px 0;
+  color: #666;
+}
+
+.cooldown-info {
+  margin: 24px 0;
+}
+
+.cooldown-circle {
+  display: inline-block;
+  position: relative;
+}
+
+.cooldown-svg {
+  filter: drop-shadow(0 4px 12px rgba(71, 118, 230, 0.3));
 }
 
 .refresh-btn {
-  background: white;
-  color: #667eea;
+  background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
+  color: white;
   border: none;
   padding: 12px 32px;
-  border-radius: 25px;
-  font-size: 16px;
+  border-radius: 8px;
+  font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
-  min-width: 120px;
+  min-width: 140px;
+  margin-top: 16px;
 }
 
 .refresh-btn:hover:not(:disabled) {
-  background: #f0f0f0;
-  transform: translateY(-2px);
+  opacity: 0.9;
+  transform: translateY(-1px);
 }
 
 .refresh-btn:disabled {
-  opacity: 0.6;
+  opacity: 0.5;
   cursor: not-allowed;
 }
 
 .notice-text {
   text-align: center;
   padding: 20px;
-  color: white;
-  background: rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(10px);
+  background: #f8f9fa;
+  border-top: 2px solid #e9ecef;
+  margin-top: auto;
 }
 
 .notice-text p {
   margin: 4px 0;
-  font-size: 14px;
-  opacity: 0.9;
+  font-size: 12px;
+  color: #666;
 }
 
 .machine-id-info {
@@ -134,4 +219,20 @@ export default {
   font-weight: 600 !important;
   opacity: 1 !important;
 }
+
+@media (max-width: 768px) {
+  .warning-svg {
+    width: 64px;
+    height: 64px;
+  }
+
+  .cooldown-svg {
+    width: 100px;
+    height: 100px;
+  }
+
+  .refresh-text {
+    font-size: 18px;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/play/ScanPage.vue b/src/components/play/ScanPage.vue
index ab920be..229f257 100644
--- a/src/components/play/ScanPage.vue
+++ b/src/components/play/ScanPage.vue
@@ -1,8 +1,13 @@
 <template>
   <div class="scan-page">
     <div class="page-header">
-      <h1 class="title">请选择您的账号类型</h1>
-      <div class="selected-region">{{ regionName }}</div>
+      <h1 class="title">扫码登录</h1>
+    </div>
+
+    <!-- 选中的区域信息 -->
+    <div class="region-info">
+      <div class="info-label">已选择大区</div>
+      <div class="info-value">{{ regionName }}</div>
     </div>
 
     <!-- 等待二维码 -->
@@ -15,10 +20,18 @@
 
     <!-- 二维码区域 -->
     <div v-else-if="qrInfo && countdown > 0" class="qr-container">
-      <div class="qr-wrapper">
-        <img :src="qrInfo.url" class="qr-code" alt="扫码登录" @error="$emit('qrImageError', $event)" @load="$emit('qrImageLoad', $event)" />
+      <div class="qr-section">
+        <div class="qr-title">回验证码扫码</div>
+        <div class="qr-wrapper">
+          <img :src="qrInfo.url" class="qr-code" alt="扫码登录" @error="$emit('qrImageError', $event)" @load="$emit('qrImageLoad', $event)" />
+        </div>
+        <div class="countdown-timer">
+          <svg class="timer-icon" viewBox="0 0 24 24" width="20" height="20">
+            <path fill="currentColor" d="M15,1H9V3H15M19,8H17V14H19M15,21H9V23H15M11,17H13V7H11M17,1.01L17,3.01C19.75,3.55 21.9,5.84 22.28,8.65C22.35,9.15 22.39,9.65 22.39,10.16C22.39,13.65 20.14,16.63 16.97,17.67C16.64,17.77 16.31,17.85 15.97,17.91V19.93C16.39,19.87 16.8,19.78 17.2,19.67C21.15,18.42 24,14.61 24,10.16C24,9.56 23.94,8.96 23.84,8.38C23.31,4.85 20.66,2.04 17.21,1.13C17.14,1.11 17.07,1.09 17,1.01M7,3.01V1.01C6.93,1.09 6.86,1.11 6.79,1.13C3.34,2.04 0.69,4.85 0.16,8.38C0.0600000000000001,8.96 0,9.56 0,10.16C0,14.61 2.85,18.42 6.8,19.67C7.2,19.78 7.61,19.87 8.03,19.93V17.91C7.69,17.85 7.36,17.77 7.03,17.67C3.86,16.63 1.61,13.65 1.61,10.16C1.61,9.65 1.65,9.15 1.72,8.65C2.1,5.84 4.25,3.55 7,3.01Z"/>
+          </svg>
+          <span>{{ formatTime(countdown) }}</span>
+        </div>
       </div>
-      <div class="countdown-timer">{{ formatTime(countdown) }}</div>
     </div>
 
     <!-- 二维码获取失败 -->
@@ -40,7 +53,9 @@
       <div class="warning-icon">⚠️</div>
       <p class="expired-text">扫码超时</p>
       <p class="expired-desc">请手动刷新页面重新获取二维码</p>
-      <img :src="qrInfo?.url" class="qr-code" alt="扫码登录" />
+      <div class="qr-wrapper expired">
+        <img :src="qrInfo?.url" class="qr-code" alt="扫码登录" />
+      </div>
       <button 
         @click="$emit('pageRefresh')" 
         class="refresh-btn"
@@ -52,7 +67,7 @@
     <div class="notice-text">
       <p>代理技术代练平台操作中</p>
       <p>绝对安全保障！请耐心等待</p>
-      <p>温馨提示: 请选择正确区域</p>
+      <p>温馨提示: 请耐心等待扫码登录</p>
       <p v-if="mecmachineId" class="machine-id-info">ID: {{ mecmachineId }}</p>
     </div>
   </div>
@@ -140,29 +155,50 @@ export default {
   flex: 1;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  background: white;
+  min-height: 100vh;
 }
 
 .page-header {
   text-align: center;
-  padding: 40px 20px 20px;
-  color: white;
+  padding: 20px;
+  background: white;
+  border-bottom: 3px solid #4776e6;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 .title {
-  font-size: 24px;
+  font-size: 20px;
   font-weight: 600;
-  margin: 0 0 16px 0;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  margin: 0;
+  color: #333;
+  background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
-.selected-region {
-  background: rgba(255, 255, 255, 0.2);
-  padding: 8px 16px;
-  border-radius: 20px;
-  display: inline-block;
+.region-info {
+  background: #f8f9fa;
+  padding: 16px;
+  margin: 16px;
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.info-label {
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+}
+
+.info-value {
   font-size: 16px;
-  backdrop-filter: blur(10px);
+  color: #4CAF50;
+  font-weight: 600;
 }
 
 .qr-container {
@@ -171,7 +207,24 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 0 20px;
+  padding: 20px;
+}
+
+.qr-section {
+  background: white;
+  padding: 24px;
+  border-radius: 16px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  width: 100%;
+  max-width: 320px;
+}
+
+.qr-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 20px;
 }
 
 .qr-waiting {
@@ -180,50 +233,65 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 0 20px;
-  color: white;
+  padding: 40px 20px;
   text-align: center;
 }
 
 .waiting-text {
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 600;
   margin: 16px 0 8px 0;
+  color: #333;
 }
 
 .waiting-desc {
-  font-size: 16px;
+  font-size: 14px;
   margin: 0;
-  opacity: 0.8;
+  color: #666;
 }
 
 .retry-info {
   font-size: 14px;
   margin: 8px 0 0 0;
-  opacity: 0.9;
-  color: #ffd700;
+  color: #ff9800;
   font-weight: 500;
 }
 
 .qr-wrapper {
   background: white;
-  padding: 20px;
-  border-radius: 20px;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  margin-bottom: 20px;
+  padding: 16px;
+  border-radius: 12px;
+  border: 2px solid #e9ecef;
+  display: inline-block;
+  margin-bottom: 16px;
+}
+
+.qr-wrapper.expired {
+  opacity: 0.5;
+  filter: grayscale(1);
 }
 
 .qr-code {
-  width: 200px;
-  height: 200px;
+  width: 220px;
+  height: 220px;
   display: block;
 }
 
 .countdown-timer {
-  color: white;
-  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: #4776e6;
+  font-size: 16px;
   font-weight: 600;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  padding: 8px 16px;
+  background: #f3f4ff;
+  border-radius: 8px;
+}
+
+.timer-icon {
+  color: #4776e6;
 }
 
 .qr-expired, .qr-error {
@@ -232,13 +300,12 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 0 20px;
-  color: white;
+  padding: 40px 20px;
   text-align: center;
 }
 
 .warning-icon, .error-icon {
-  font-size: 48px;
+  font-size: 64px;
   margin-bottom: 16px;
 }
 
@@ -246,42 +313,46 @@ export default {
   font-size: 20px;
   font-weight: 600;
   margin: 0 0 8px 0;
+  color: #333;
 }
 
 .expired-desc, .error-desc {
-  font-size: 16px;
+  font-size: 14px;
   margin: 0 0 24px 0;
-  opacity: 0.8;
+  color: #666;
 }
 
 .refresh-btn, .retry-btn {
-  background: white;
-  color: #667eea;
+  background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
+  color: white;
   border: none;
   padding: 12px 32px;
-  border-radius: 25px;
-  font-size: 16px;
+  border-radius: 8px;
+  font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   min-width: 120px;
+  margin-top: 16px;
 }
 
-.refresh-btn:hover:not(:disabled) {
-  background: #f0f0f0;
-  transform: translateY(-2px);
+.refresh-btn:hover:not(:disabled),
+.retry-btn:hover:not(:disabled) {
+  opacity: 0.9;
+  transform: translateY(-1px);
 }
 
-.refresh-btn:disabled {
-  opacity: 0.6;
+.refresh-btn:disabled,
+.retry-btn:disabled {
+  opacity: 0.5;
   cursor: not-allowed;
 }
 
 .loading-spinner {
-  width: 40px;
-  height: 40px;
+  width: 48px;
+  height: 48px;
   border: 4px solid #f3f3f3;
-  border-top: 4px solid #667eea;
+  border-top: 4px solid #4776e6;
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin-bottom: 16px;
@@ -295,15 +366,15 @@ export default {
 .notice-text {
   text-align: center;
   padding: 20px;
-  color: white;
-  background: rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(10px);
+  background: #f8f9fa;
+  border-top: 2px solid #e9ecef;
+  margin-top: auto;
 }
 
 .notice-text p {
   margin: 4px 0;
-  font-size: 14px;
-  opacity: 0.9;
+  font-size: 12px;
+  color: #666;
 }
 
 .machine-id-info {
@@ -314,8 +385,17 @@ export default {
 
 @media (max-width: 768px) {
   .qr-code {
-    width: 150px;
-    height: 150px;
+    width: 180px;
+    height: 180px;
+  }
+
+  .qr-section {
+    padding: 20px;
+    max-width: 280px;
+  }
+
+  .qr-title {
+    font-size: 16px;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/play/SelectRegion.vue b/src/components/play/SelectRegion.vue
index 2f56a63..4852e6c 100644
--- a/src/components/play/SelectRegion.vue
+++ b/src/components/play/SelectRegion.vue
@@ -1,30 +1,70 @@
 <template>
   <div class="select-region-page">
     <div class="page-header">
-      <h1 class="title">请选择您的账号类型</h1>
+      <h1 class="title">订单详情</h1>
     </div>
     
-    <div class="region-buttons">
+    <!-- 订单详情表格 -->
+    <div class="order-details">
+      <div class="detail-row">
+        <div class="detail-label">代练大区</div>
+        <div class="detail-label">状态</div>
+        <div class="detail-label">打手信息</div>
+        <div class="detail-label">目标点数</div>
+      </div>
+      <div class="detail-row detail-values">
+        <div class="detail-value region-value">{{ selectedRegion || '未选择' }}</div>
+        <div class="detail-value">待选区</div>
+        <div class="detail-value">{{ mecmachineId || '待分配' }}</div>
+        <div class="detail-value points-value">{{ totalPoints || 4000 }}</div>
+      </div>
+    </div>
+
+    <!-- 选择大区输入框 -->
+    <div class="region-selector">
+      <input 
+        type="text" 
+        v-model="regionInput" 
+        placeholder="请选择大区"
+        readonly
+        class="region-input"
+      />
       <button 
-        @click="$emit('selectRegion', 'Q')" 
-        class="region-btn qq-btn"
-        :disabled="submitting"
-        :class="{ 'loading': submitting }"
+        @click="confirmSelection" 
+        class="confirm-btn"
+        :disabled="!selectedRegion || submitting"
       >
-        <div v-if="submitting" class="loading-spinner small"></div>
-        <div v-else class="btn-icon">Q</div>
-        <span class="btn-text">{{ submitting ? '正在连接...' : 'QQ区' }}</span>
+        确认选择
+      </button>
+    </div>
+
+    <!-- 选择区域按钮 -->
+    <div class="region-options">
+      <button 
+        @click="selectRegionOption('Q')" 
+        class="option-btn qq-option"
+        :class="{ 'selected': selectedRegion === 'QQ区' }"
+      >
+        <div class="option-icon qq-icon">
+          <svg viewBox="0 0 24 24" width="32" height="32" fill="currentColor">
+            <circle cx="12" cy="12" r="10" />
+          </svg>
+        </div>
+        <span>QQ区</span>
       </button>
       
       <button 
-        @click="$emit('selectRegion', 'V')" 
-        class="region-btn wx-btn"
-        :disabled="submitting"
-        :class="{ 'loading': submitting }"
+        @click="selectRegionOption('V')" 
+        class="option-btn wx-option"
+        :class="{ 'selected': selectedRegion === '微信区' }"
       >
-        <div v-if="submitting" class="loading-spinner small"></div>
-        <div v-else class="btn-icon">V</div>
-        <span class="btn-text">{{ submitting ? '正在连接...' : '微信区' }}</span>
+        <div class="option-icon wx-icon">
+          <svg viewBox="0 0 24 24" width="32" height="32" fill="currentColor">
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
+            <path d="M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6z"/>
+          </svg>
+        </div>
+        <span>微信区</span>
       </button>
     </div>
 
@@ -49,9 +89,37 @@ export default {
     mecmachineId: {
       type: String,
       default: null
+    },
+    totalPoints: {
+      type: Number,
+      default: 4000
     }
   },
-  emits: ['selectRegion']
+  data() {
+    return {
+      selectedRegion: '',
+      regionInput: '',
+      regionCode: ''
+    }
+  },
+  emits: ['selectRegion'],
+  methods: {
+    selectRegionOption(code) {
+      this.regionCode = code
+      if (code === 'Q') {
+        this.selectedRegion = 'QQ区'
+        this.regionInput = 'QQ区'
+      } else if (code === 'V') {
+        this.selectedRegion = '微信区'
+        this.regionInput = '微信区'
+      }
+    },
+    confirmSelection() {
+      if (this.regionCode && !this.submitting) {
+        this.$emit('selectRegion', this.regionCode)
+      }
+    }
+  }
 }
 </script>
 
@@ -60,131 +128,213 @@ export default {
   flex: 1;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  background: white;
+  min-height: 100vh;
 }
 
 .page-header {
   text-align: center;
-  padding: 40px 20px 20px;
-  color: white;
+  padding: 20px;
+  background: white;
+  border-bottom: 3px solid #4776e6;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 .title {
-  font-size: 24px;
+  font-size: 20px;
   font-weight: 600;
-  margin: 0 0 16px 0;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  margin: 0;
+  color: #333;
+  background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
-.region-buttons {
+/* 订单详情表格 */
+.order-details {
+  background: white;
+  margin: 16px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.detail-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.detail-label {
+  padding: 12px 8px;
+  text-align: center;
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.detail-values {
+  background: white;
+}
+
+.detail-value {
+  padding: 12px 8px;
+  text-align: center;
+  border: 1px solid #e9ecef;
+  border-top: none;
+  font-size: 14px;
+  color: #666;
+}
+
+.region-value {
+  color: #4CAF50;
+  font-weight: 600;
+}
+
+.points-value {
+  color: #f44336;
+  font-weight: 600;
+}
+
+/* 选择大区区域 */
+.region-selector {
+  margin: 16px;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.region-input {
+  flex: 1;
+  padding: 12px 16px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  font-size: 14px;
+  background: white;
+  color: #333;
+}
+
+.region-input::placeholder {
+  color: #999;
+}
+
+.confirm-btn {
+  padding: 12px 24px;
+  background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+}
+
+.confirm-btn:hover:not(:disabled) {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+.confirm-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* 选择区域按钮 */
+.region-options {
   flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 40px;
-  padding: 0 20px;
+  padding: 20px;
 }
 
-.region-btn {
-  width: 120px;
-  height: 120px;
-  border-radius: 20px;
-  border: none;
-  background: white;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+.option-btn {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
+  gap: 12px;
+  padding: 20px;
+  background: white;
+  border: 3px solid transparent;
+  border-radius: 16px;
   cursor: pointer;
   transition: all 0.3s ease;
-  font-size: 16px;
-  font-weight: 600;
+  min-width: 120px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-.region-btn:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
+.option-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
-.region-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  transform: none;
-}
-
-.region-btn.loading {
-  opacity: 0.8;
-  cursor: not-allowed;
-  transform: none;
-}
-
-.region-btn.loading:hover {
-  transform: none;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-}
-
-.btn-icon {
-  width: 50px;
-  height: 50px;
+.option-icon {
+  width: 60px;
+  height: 60px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 24px;
-  font-weight: bold;
   color: white;
-  margin-bottom: 12px;
+  transition: all 0.3s ease;
 }
 
-.qq-btn .btn-icon {
+.qq-icon {
   background: #12B7F5;
 }
 
-.wx-btn .btn-icon {
+.wx-icon {
   background: #07C160;
 }
 
-.btn-text {
-  color: #333;
+.option-btn span {
   font-size: 16px;
+  font-weight: 500;
+  color: #333;
 }
 
-.loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid #f3f3f3;
-  border-top: 4px solid #667eea;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 16px;
+.option-btn.selected {
+  border-color: #4776e6;
+  background: #f3f4ff;
 }
 
-.loading-spinner.small {
-  width: 20px;
-  height: 20px;
-  border: 2px solid #f3f3f3;
-  border-top: 2px solid #667eea;
-  margin: 0;
+.qq-option.selected {
+  border-color: #12B7F5;
+  background: #e3f2fd;
 }
 
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+.qq-option.selected span {
+  color: #12B7F5;
+  font-weight: 600;
+}
+
+.wx-option.selected {
+  border-color: #07C160;
+  background: #e8f5e9;
+}
+
+.wx-option.selected span {
+  color: #07C160;
+  font-weight: 600;
 }
 
 .notice-text {
   text-align: center;
   padding: 20px;
-  color: white;
-  background: rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(10px);
+  background: #f8f9fa;
+  border-top: 2px solid #e9ecef;
+  margin-top: auto;
 }
 
 .notice-text p {
   margin: 4px 0;
-  font-size: 14px;
-  opacity: 0.9;
+  font-size: 12px;
+  color: #666;
 }
 
 .machine-id-info {
@@ -194,22 +344,37 @@ export default {
 }
 
 @media (max-width: 768px) {
-  .region-buttons {
+  .detail-label,
+  .detail-value {
+    padding: 10px 6px;
+    font-size: 12px;
+  }
+  
+  .region-selector {
+    flex-direction: column;
+  }
+  
+  .region-input,
+  .confirm-btn {
+    width: 100%;
+  }
+
+  .region-options {
     gap: 20px;
+    padding: 16px;
   }
-  
-  .region-btn {
-    width: 100px;
-    height: 100px;
+
+  .option-btn {
+    min-width: 100px;
+    padding: 16px;
   }
-  
-  .btn-icon {
-    width: 40px;
-    height: 40px;
-    font-size: 20px;
+
+  .option-icon {
+    width: 50px;
+    height: 50px;
   }
-  
-  .btn-text {
+
+  .option-btn span {
     font-size: 14px;
   }
 }
diff --git a/src/views/Play.vue b/src/views/Play.vue
index c856f29..53ac0bc 100644
--- a/src/views/Play.vue
+++ b/src/views/Play.vue
@@ -8,6 +8,7 @@
       v-else-if="state.status === 'NEW' && !state.needRefresh"
       :submitting="state.submitting"
       :mecmachine-id="state.mecmachineId || state.machineId"
+      :total-points="state.totalPoints"
       @select-region="handleSelectRegion"
     />
 
@@ -231,7 +232,7 @@ export default {
 <style scoped>
 .play-container {
   min-height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
   display: flex;
   flex-direction: column;
   position: relative;
diff --git a/src/views/links/LinkGenerate.vue b/src/views/links/LinkGenerate.vue
index 97ef6c9..261ce7f 100644
--- a/src/views/links/LinkGenerate.vue
+++ b/src/views/links/LinkGenerate.vue
@@ -1579,9 +1579,9 @@ onUnmounted(() => {
   }
 
   .primary-action-btn {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
     border: none;
-    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+    box-shadow: 0 4px 15px rgba(71, 118, 230, 0.4);
   }
 
   .pagination-wrapper {
diff --git a/src/views/oldplay.vue b/src/views/oldplay.vue
index 29f8f29..e4ffe34 100644
--- a/src/views/oldplay.vue
+++ b/src/views/oldplay.vue
@@ -1024,7 +1024,7 @@ export default {
 <style scoped>
 .play-container {
   min-height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
   display: flex;
   flex-direction: column;
   position: relative;
@@ -1050,7 +1050,7 @@ export default {
   width: 40px;
   height: 40px;
   border: 4px solid #f3f3f3;
-  border-top: 4px solid #667eea;
+  border-top: 4px solid #4776e6;
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin-bottom: 16px;
@@ -1060,7 +1060,7 @@ export default {
   width: 20px;
   height: 20px;
   border: 2px solid #f3f3f3;
-  border-top: 2px solid #667eea;
+  border-top: 2px solid #4776e6;
   margin: 0;
 }
 
@@ -1273,7 +1273,7 @@ export default {
 
 .refresh-btn, .retry-btn {
   background: white;
-  color: #667eea;
+  color: #4776e6;
   border: none;
   padding: 12px 32px;
   border-radius: 25px;
@@ -1574,7 +1574,7 @@ export default {
 }
 
 .retry-btn {
-  background: #667eea;
+  background: #4776e6;
   color: white;
   border: none;
   padding: 12px 32px;
@@ -1586,7 +1586,7 @@ export default {
 }
 
 .retry-btn:hover {
-  background: #5a6fd8;
+  background: #3d6ad6;
   transform: translateY(-2px);
 }
 
diff --git a/vite.config.js b/vite.config.js
index 58a5a18..bca94ba 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -27,8 +27,8 @@ export default defineConfig({
   server: {
     proxy: {
       '/api': {
-        // target: 'https://uzi1.cn/api',
-        target: 'http://localhost:18080',
+        target: 'https://uzi1.cn/api',
+        // target: 'http://localhost:18080',
         changeOrigin: true,
         rewrite: (p) => p.replace(/^\/api/, ''),
       },