重构(扫码唤起页): 重新设计页面并更新UI和文案

调整页面结构，更新配色方案和排版，添加响应式布局，优化用户提示文本

src/pages/ScanOpen.vue

@@ -82,19 +82,27 @@ onMounted(() => {
 
 <template>
   <div class="scan-page">
-    <div class="panel">
+    <div class="content">
+      <p class="eyebrow">BookHi · 扫码唤起</p>
       <h1>正在打开小程序</h1>
-      <p class="desc">扫码编号：{{ bianhao || '-' }}</p>
+      <p class="desc">请在当前页面停留几秒，系统会自动尝试唤起微信小程序。</p>
+
+      <p class="meta">
+        <span class="meta-label">扫码编号</span>
+        <span class="meta-value">{{ bianhao || '-' }}</span>
+      </p>
+
       <p v-if="!isWeChat" class="warn">当前不是微信内置浏览器，可能无法直接拉起小程序。</p>
 
-      <p v-if="loading" class="status">正在获取打开链接...</p>
-      <p v-else-if="message" class="status" :class="messageType">{{ message }}</p>
+      <p class="status" :class="[loading ? 'is-loading' : '', messageType ? `is-${messageType}` : '']">
+        {{ loading ? '正在获取打开链接...' : (message || '正在初始化打开流程...') }}
+      </p>
 
       <button class="btn" :disabled="!openLink" @click="tryOpenMiniProgram">
-        {{ hasTriedAutoOpen ? '点击重试打开小程序' : '点击打开小程序' }}
+        {{ hasTriedAutoOpen ? '重试打开小程序' : '重新打开小程序' }}
       </button>
 
-      <p v-if="openLink" class="tip">若未自动跳转，请点击按钮手动打开。</p>
+      <p class="tip">若未自动跳转，请点击上方按钮手动打开。</p>
     </div>
   </div>
 </template>
@@ -106,66 +114,139 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
   padding: 20px;
-  background: linear-gradient(180deg, #f4fbf6 0%, #eef7f1 100%);
+  background:
+    radial-gradient(circle at 50% 0%, rgba(7, 193, 96, 0.1), transparent 40%),
+    linear-gradient(180deg, #f7fbf9 0%, #edf5f0 100%);
 }
 
-.panel {
+.content {
   width: 100%;
-  max-width: 520px;
-  background: #fff;
-  border-radius: 16px;
-  padding: 24px;
-  box-shadow: 0 12px 24px rgba(15, 76, 35, 0.08);
+  max-width: 620px;
   text-align: center;
 }
 
+.eyebrow {
+  margin: 0;
+  color: #216942;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
 h1 {
-  margin: 0 0 8px;
-  color: #1f6b35;
-  font-size: 24px;
+  margin: 14px 0 0;
+  color: #123423;
+  font-size: 46px;
+  line-height: 1.12;
+  letter-spacing: -0.04em;
 }
 
 .desc {
-  margin: 0 0 8px;
-  color: #444;
+  margin: 16px auto 0;
+  max-width: 34ch;
+  color: #4f675a;
+  font-size: 16px;
+  line-height: 1.75;
+}
+
+.meta {
+  margin: 20px 0 0;
+  color: #5c7568;
+  font-size: 15px;
+  line-height: 1.7;
+}
+
+.meta-label {
+  margin-right: 8px;
+}
+
+.meta-value {
+  color: #1a402c;
+  font-weight: 600;
+  word-break: break-all;
 }
 
 .warn {
-  margin: 0 0 12px;
-  color: #d46b08;
+  margin: 14px 0 0;
+  color: #ad5c00;
   font-size: 14px;
+  line-height: 1.6;
 }
 
 .status {
-  margin: 12px 0 16px;
-  color: #444;
+  margin: 18px 0 0;
+  min-height: 1.6em;
+  color: #345444;
+  font-size: 18px;
+  line-height: 1.65;
+  transition: color 0.2s ease;
 }
 
-.status.ok {
+.status.is-loading {
+  color: #1f7a3e;
+}
+
+.status.is-ok {
   color: #237804;
 }
 
-.status.error {
-  color: #cf1322;
+.status.is-error {
+  color: #b42318;
 }
 
 .btn {
-  width: 100%;
-  height: 44px;
-  background: #07c160;
+  margin-top: 26px;
+  min-width: 280px;
+  padding: 0 30px;
+  height: 52px;
+  background: linear-gradient(180deg, #1ac86a 0%, #07c160 100%);
   color: #fff;
   font-size: 16px;
-  border-radius: 10px;
+  font-weight: 600;
+  border-radius: 999px;
+  box-shadow: 0 14px 24px rgba(7, 193, 96, 0.2);
+}
+
+.btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 18px 28px rgba(7, 193, 96, 0.24);
 }
 
 .btn:disabled {
-  background: #b7ebc3;
+  background: #cbe8d6;
+  color: rgba(24, 58, 38, 0.42);
+  box-shadow: none;
   cursor: not-allowed;
 }
 
 .tip {
-  margin: 10px 0 0;
-  color: #666;
+  margin: 14px 0 0;
+  color: #6e8478;
   font-size: 14px;
+  line-height: 1.6;
+}
+
+@media (max-width: 640px) {
+  .scan-page {
+    padding: 14px;
+  }
+
+  h1 {
+    font-size: 34px;
+  }
+
+  .desc {
+    font-size: 15px;
+  }
+
+  .status {
+    font-size: 16px;
+  }
+
+  .btn {
+    min-width: 240px;
+    height: 50px;
+  }
 }
 </style>