feat: 更新商城前后端代码

mengyastore-frontend/src/modules/maintenance/MaintenancePage.vue

@@ -1,93 +1,28 @@
 <template>
-  <div class="maintenance-wrap">
-    <div class="maintenance-card">
-      <div class="maintenance-icon">
+  <div class="flex items-center justify-center min-h-[60vh] px-[5vw] py-10">
+    <div class="max-w-[480px] w-full glass-strong rounded-[var(--radius-default)] px-10 py-12 text-center shadow-[var(--shadow-card)] max-md:px-6 max-md:py-8">
+      <!-- Icon -->
+      <div class="inline-flex items-center justify-center w-20 h-20 rounded-[20px] bg-gradient-to-br from-accent to-accent2 text-white mb-6">
         <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
           <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
         </svg>
       </div>
-      <h1>站点维护中</h1>
-      <p class="divider-line"></p>
-      <p class="reason" v-if="reason">{{ reason }}</p>
-      <p class="reason muted" v-else>暂无维护说明，请稍后再试。</p>
-      <p class="tip">如有紧急需求，请联系管理员。</p>
+
+      <h1 class="text-[28px] font-bold text-apptext mb-4 tracking-[1px]">站点维护中</h1>
+
+      <!-- Divider -->
+      <div class="w-12 h-[3px] rounded-full bg-gradient-to-r from-accent to-accent2 opacity-60 mx-auto mb-5"></div>
+
+      <p v-if="reason" class="text-[17px] text-apptext leading-[1.7] mb-4">{{ reason }}</p>
+      <p v-else class="text-[17px] text-muted leading-[1.7] mb-4">暂无维护说明，请稍后再试。</p>
+
+      <p class="text-[15px] text-muted mt-2">如有紧急需求，请联系管理员。</p>
     </div>
   </div>
 </template>
 
 <script setup>
-const props = defineProps({
-  reason: {
-    type: String,
-    default: ''
-  }
+defineProps({
+  reason: { type: String, default: '' }
 })
 </script>
-
-<style scoped>
-.maintenance-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 60vh;
-  padding: 40px 5vw;
-}
-
-.maintenance-card {
-  max-width: 480px;
-  width: 100%;
-  background: var(--glass-strong);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 48px 40px;
-  text-align: center;
-  box-shadow: var(--shadow);
-  backdrop-filter: blur(20px);
-}
-
-.maintenance-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 80px;
-  height: 80px;
-  border-radius: 20px;
-  background: linear-gradient(135deg, var(--accent), var(--accent-2));
-  color: white;
-  margin-bottom: 24px;
-}
-
-.maintenance-card h1 {
-  font-size: 28px;
-  font-weight: 700;
-  color: var(--text);
-  margin-bottom: 16px;
-  letter-spacing: 1px;
-}
-
-.divider-line {
-  width: 48px;
-  height: 3px;
-  border-radius: 2px;
-  background: linear-gradient(90deg, var(--accent), var(--accent-2));
-  margin: 0 auto 20px;
-  opacity: 0.6;
-}
-
-.reason {
-  font-size: 17px;
-  color: var(--text);
-  line-height: 1.7;
-  margin-bottom: 16px;
-}
-
-.reason.muted {
-  color: var(--muted);
-}
-
-.tip {
-  font-size: 15px;
-  color: var(--muted);
-  margin-top: 8px;
-}
-</style>