consumer模块完成95%，在和商家端对接聊天购物闭环

pages/user/boot.uvue

@@ -62,8 +62,9 @@
 
 <style>
 	.page {
-		min-height: 100vh;
-		background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
+		/* min-height: 100vh; UVUE不支持vh */
+    flex: 1;
+		background-color: #f5f7fa; /* UVUE不支持渐变 */
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -73,33 +74,42 @@
 	.splash {
 		width: 100%;
 		max-width: 640rpx;
-		background: #ffffff;
+		background-color: #ffffff;
 		border-radius: 24rpx;
-		box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.08);
+		box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.08); /* 可能也不支持box-shadow, 视版本而定 */
 		padding: 48rpx 40rpx;
 		display: flex;
+    flex-direction: column; /* 添加 flex-direction: column 以兼容 gap polyfill */
+
 		flex-direction: column;
-		gap: 32rpx;
+		/* gap: 32rpx; UVUE 不支持 gap */
+    justify-content: space-between;
 	}
 
 	.brand {
 		display: flex;
+    flex-direction: row;
 		align-items: center;
-		gap: 20rpx;
+		/* gap: 20rpx; */
 	}
 
 	.brand-mark {
 		width: 80rpx;
 		height: 80rpx;
 		border-radius: 24rpx;
-		background: linear-gradient(135deg, #ff6b6b, #ff9f43);
+		background-color: #ff6b6b; /* UVUE不支持CSS线性渐变 */
+    margin-right: 20rpx; /* 替代 gap */
 	}
 
 	.brand-text {
 		display: flex;
 		flex-direction: column;
-		gap: 8rpx;
+		/* gap: 8rpx; */
 	}
+  /* 替代 gap: 8rpx */
+  .brand-name {
+    margin-bottom: 8rpx;
+  }
 
 	.brand-name {
 		font-size: 36rpx;
@@ -116,23 +126,35 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: 12rpx;
+		/* gap: 12rpx; */
 		text-align: center;
+    margin-top: 32rpx; /* 替代父级 gap */
+    margin-bottom: 32rpx;
 	}
+  /* 替代 gap: 12rpx */
+  .status-text {
+    margin-top: 12rpx;
+  }
 
 	.spinner {
 		width: 88rpx;
 		height: 88rpx;
-		border-radius: 50%;
-		border: 8rpx solid #f3f4f6;
+		border-radius: 50%; /* 如果不支持 50%，可以用 44rpx */
+		border-width: 8rpx;
+    border-style: solid;
+    border-color: #f3f4f6;
 		border-top-color: #ff6b6b;
-		animation: spin 1s linear infinite;
+		/* animation: spin 1s linear infinite; UVUE CSS动画需要特定写法或 transform */
+    transform: rotate(360deg);
+    transition-duration: 1000ms; 
+    /* 简单的无限旋转在原生 CSS 中可能需要写关键帧但 App-UVUE 支持有限，
+       这里暂时保留样式但不指望它自动动起来，或者应该用 loading 组件 */
 	}
 
 	.status-text {
 		font-size: 30rpx;
 		color: #111827;
-		font-weight: 600;
+		font-weight: 700; /* 600不支持 -> 700 */
 	}
 
 	.status-sub {
@@ -143,8 +165,12 @@
 	.actions {
 		display: flex;
 		flex-direction: column;
-		gap: 16rpx;
+		/* gap: 16rpx; */
 	}
+  /* 替代 gap */
+  .action {
+    margin-bottom: 16rpx;
+  }
 
 	.action {
 		width: 100%;

pages/user/login.uvue

@@ -347,7 +347,7 @@ const handleLogin = async () => {
     }
 
     uni.showToast({ title: '登录成功', icon: 'success' })
-    if (!IS_TEST_MODE) {
+    // if (!IS_TEST_MODE) {
       setTimeout(() => {
         const pages = getCurrentPages() as any[]
         const currentPage = pages.length > 0 ? pages[pages.length - 1] : null
@@ -359,7 +359,7 @@ const handleLogin = async () => {
         uni.switchTab({ url: '/pages/mall/consumer/index' })
         }
       }, 500)
-    }
+    // }
   } catch (err) {
     console.error('登录错误:', err)
     let msg = '登录失败，请重试'
@@ -398,10 +398,11 @@ const handleQQLogin = () => uni.showToast({ title: 'QQ登录开发中', icon: 'n
 <style scoped>
 /* Base */
 .page{
-  min-height: 100vh;
+  /* min-height: 100vh; */ /* UVUE 不支持 vh */
+  flex: 1;
   display: flex;
   flex-direction: column;
-  background: var(--bg);
+  background-color: #f5f6f8; /* UVUE 暂不支持 cssVars 在 style 标签中的变量引用 */
 }
 
 /* Header */
@@ -410,11 +411,11 @@ const handleQQLogin = () => uni.showToast({ title: 'QQ登录开发中', icon: 'n
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
-  padding: 30px 72px;
+  padding: 30px 40px; /* 调整边距 */
 }
 .logo{
-  width: 300px;
-  height: 80px;
+  width: 240px;
+  height: 64px;
 }
 
 /* Main */
@@ -424,46 +425,50 @@ const handleQQLogin = () => uni.showToast({ title: 'QQ登录开发中', icon: 'n
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  padding: 28px 18px;
+  padding: 20px 10px;
 }
 
 /* Card */
 .card{
-  width: min(980px, 92vw);
-  min-height: 460px;
-  background: var(--card);
+  /* width: min(980px, 92vw); UVUE 不支持 min/vw */
+  /* min-height: 460px; */
+  width: 90%;
+  background-color: #ffffff;
   border-radius: 16px;
-  box-shadow: var(--shadow);
-  padding: 40px;
+  /* box-shadow: var(--shadow); */
+  padding: 30px;
   display: flex;
-  flex-direction: row;
-  gap: 32px;
+  flex-direction: column; /* App端改为列式布局兼容性更好，或者用 row 需注意 */
+  /* gap: 32px; UVUE 不支持 gap */
 }
 
-/* Left */
+/* Left - 暂隐藏或简化 */
+/* .left{ display: none; } */
+
 .left{
-  flex: 0 0 52%;
-  display: flex;
+  /* flex: 0 0 52%; UVUE flex 简写支持不全，建议用 flex-grow/basis */
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  padding-left: 18px;
+  /* padding-left: 18px; */
+  display: none; /* 移动端 App 暂时隐藏扫码区 */
 }
 .left-title{
   font-size: 18px;
-  font-weight: 600;
-  color: var(--text);
+  font-weight: 700; /* 600 -> 700 */
+  color: #333333;
   margin-bottom: 10px;
 }
 .left-hint{
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 14px;
+  /* gap: 14px; */
   margin-bottom: 18px;
 }
-.hint-text{ font-size: 13px; color: var(--muted); }
-.hint-link{ font-size: 13px; color: var(--brand); }
+/* 替代 gap */
+.hint-text{ font-size: 13px; color: #666666; margin-right: 14px; }
+.hint-link{ font-size: 13px; color: #e1251b; }
 
 .qr-wrap{
   width: 100%;
@@ -484,21 +489,20 @@ const handleQQLogin = () => uni.showToast({ title: 'QQ登录开发中', icon: 'n
   height: 220px;
   border: 1px solid #e6e6e6;
   border-radius: 8px;
-  background: #fff;
+  background-color: #fff;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  /* gap: 8px; */
 }
-.qr-text{ font-size: 14px; color: var(--muted); }
-.qr-sub{ font-size: 12px; color: var(--muted2); }
+/* 替代 gap */
+.qr-text{ font-size: 14px; color: #666666; margin-bottom: 8px; }
+.qr-sub{ font-size: 12px; color: #999999; }
 
 /* Divider */
 .divider{
-  width: 1px;
-  background: var(--border);
-  flex-shrink: 0;
+  display: none; /* 移动端隐藏分割线 */
 }
 
 /* Right */
@@ -509,9 +513,10 @@ const handleQQLogin = () => uni.showToast({ title: 'QQ登录开发中', icon: 'n
   justify-content: center;
 }
 .right-inner{
-  width: 360px;        /* 京东右侧“窄列”观感 */
-  max-width: 100%;
-  margin-left: auto;   /* 靠右 */
+  /* width: 360px; */
+  /* max-width: 100%; UVUE 不支持百分比 max-width */
+  width: 100%;
+  margin-left: auto;
 }
 
 /* Tabs */
@@ -519,21 +524,22 @@ const handleQQLogin = () => uni.showToast({ title: 'QQ登录开发中', icon: 'n
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: flex-end;
-  gap: 24px;
+  justify-content: center; /* 移动端居中 */
+  /* gap: 24px; */
   margin-bottom: 18px;
 }
 .tab{
   position: relative;
-  padding: 8px 2px;
+  padding: 8px 12px; /* 增加内边距替代 gap */
+  margin: 0 12px;
 }
 .tab-text{
   font-size: 16px;
-  color: var(--muted);
+  color: #666666;
 }
 .tab.active .tab-text{
-  color: var(--brand);
-  font-weight: 600;
+  color: #e1251b;
+  font-weight: 700; /* 600 -> 700 */
 }
 .tab-line{
   position: absolute;
@@ -541,7 +547,7 @@ const handleQQLogin = () => uni.showToast({ title: 'QQ登录开发中', icon: 'n
   right: 0;
   bottom: -6px;
   height: 2px;
-  background: var(--brand);
+  background-color: #e1251b;
   border-radius: 2px;
 }
 
@@ -552,11 +558,11 @@ const handleQQLogin = () => uni.showToast({ title: 'QQ登录开发中', icon: 'n
   width: 100%;
   height: 44px;
   border-radius: 10px;
-  background: var(--inputbg);
+  background-color: #f6f7f9;
   padding: 0 14px;
   font-size: 14px;
-  color: var(--text);
-  box-sizing: border-box;
+  color: #333333;
+  /* box-sizing: border-box; */ /* App-UVUE 默认就是 border-box */
 }
 
 /* Code row */
@@ -564,14 +570,14 @@ const handleQQLogin = () => uni.showToast({ title: 'QQ登录开发中', icon: 'n
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 10px;
+  /* gap: 10px; */
 }
-.code-input{ flex: 1; }
+.code-input{ flex: 1; margin-right: 10px; }
 .code-btn{
   height: 44px;
   padding: 0 12px;
   border-radius: 10px;
-  background: #fff;
+  background-color: #fff;
   border: 1px solid #eee;
   display: flex;
   flex-direction: row;
@@ -579,24 +585,24 @@ const handleQQLogin = () => uni.showToast({ title: 'QQ登录开发中', icon: 'n
   justify-content: center;
 }
 .code-btn.disabled{ opacity: 0.5; }
-.code-text{ font-size: 13px; color: var(--brand); }
+.code-text{ font-size: 13px; color: #e1251b; }
 
 /* Button */
 .btn{
   margin-top: 16px;
   height: 46px;
   border-radius: 10px;
-  background: rgba(225, 37, 27, 0.45);
+  background-color: rgba(225, 37, 27, 0.45); /* 注意 rgba 兼容性，建议用 hex 或 view opacity */
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
 }
-.btn.disabled{ background: #d9d9d9; }
+.btn.disabled{ background-color: #d9d9d9; }
 .btn-text{
   color: #fff;
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 700; /* 600 -> 700 */
 }
 
 /* Actions：一行横排 */
@@ -605,27 +611,29 @@ const handleQQLogin = () => uni.showToast({ title: 'QQ登录开发中', icon: 'n
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: flex-start;
-  gap: 12px;
-  flex-wrap: nowrap;
+  justify-content: center;
+  /* gap: 12px; */
+  flex-wrap: wrap; /* 允许换行 */
 }
 .action-item{
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 8px;
+  /* gap: 8px; */
+  margin: 0 6px;
 }
 .dot{
   width: 16px;
   height: 16px;
-  border-radius: 50%;
+  border-radius: 8px; /* 50% -> 8px (一半) */
+  margin-right: 8px;
 }
-.dot.wechat{ background: #19be6b; }
-.dot.qq{ background: #2d8cf0; }
+.dot.wechat{ background-color: #19be6b; }
+.dot.qq{ background-color: #2d8cf0; }
 
-.action-text{ font-size: 13px; color: var(--muted); }
-.action-link{ font-size: 13px; color: var(--muted); }
-.sep{ font-size: 13px; color: #e0e0e0; }
+.action-text{ font-size: 13px; color: #666666; }
+.action-link{ font-size: 13px; color: #666666; margin: 0 6px; }
+.sep{ font-size: 13px; color: #e0e0e0; margin: 0 6px; }
 
 /* Footer */
 .footer{
@@ -634,9 +642,10 @@ const handleQQLogin = () => uni.showToast({ title: 'QQ登录开发中', icon: 'n
   flex-direction: row;
   justify-content: center;
 }
-.footer-text{ font-size: 12px; color: var(--muted2); }
+.footer-text{ font-size: 12px; color: #999999; }
 
-/* ===== 自适应：断点全部用 px（避免 rpx 在宽屏放大） ===== */
+/* ===== 自适应：移除复杂 Media Query，使用简单流式布局 ===== */
+/*
 @media screen and (max-width: 1024px){
   .header{ padding: 24px 20px; }
   .logo{ width: 240px; height: 68px; }
@@ -653,4 +662,5 @@ const handleQQLogin = () => uni.showToast({ title: 'QQ登录开发中', icon: 'n
 @media screen and (max-width: 520px){
   .sep{ display: none; }
 }
+*/
 </style>