diff --git a/yshop-drink-uniapp-vue3/App.vue b/yshop-drink-uniapp-vue3/App.vue
index d0d91fc..cc28843 100644
--- a/yshop-drink-uniapp-vue3/App.vue
+++ b/yshop-drink-uniapp-vue3/App.vue
@@ -1,21 +1,21 @@
 <script setup>
 import { onHide,onLaunch,onShow } from '@dcloudio/uni-app'
-import { storeToRefs } from 'pinia'
-import { useMainStore } from '@/store/store'
+import { storeToRefs } from 'pinia'
+import { useMainStore } from '@/store/store'
 const main = useMainStore()
 import { isWeixin,parseQuery } from '@/utils/util'
 import cookie from '@/utils/cookie'
 import {
   userAuthSession,
-  wechatAuth
+  wechatAuth
 } from '@/api/auth'
 import { APP_ID } from '@/config'
 
-onLaunch(() => {
-	console.log('App Launch')
+onLaunch(() => {
+	console.log('App Launch')
 })
 
-onShow(() => {
+onShow(() => {
     console.log('App Show')
    
 	// 检查用户登录情况
@@ -28,11 +28,11 @@ onShow(() => {
 	// #endif
 	// #ifdef MP-WEIXIN
 	wechatMiniLogin();
-	// #endif
+	// #endif
 })
 
-onHide(() => {
-   console.log('App Hide')
+onHide(() => {
+   console.log('App Hide')
 })
 
 
@@ -51,7 +51,7 @@ const wechatMiniLogin = () => {
 				main.SET_MEMBER(data.userInfo);
 				main.SET_TOKEN(data.accessToken);
 			}
-		}
+		}
 	});
 }
 
@@ -106,17 +106,9 @@ const auth = async(code) => {
 }
 
 
-
-</script>
-
+
+</script>
+
 <style lang="scss">
 @import '~@/static/style/app.scss';
-//@import 'static/iconfont/iconfont.scss';
-//@import url('./static/style/style.less');
-@import 'static/style/yshop.css';
-
-// /*每个页面公共css */
-// page {
-//   background-color: #f5f5f5;
-// }
-</style>
+</style>
diff --git a/yshop-drink-uniapp-vue3/package-lock.json b/yshop-drink-uniapp-vue3/package-lock.json
index f96cd2c..e7933a7 100644
--- a/yshop-drink-uniapp-vue3/package-lock.json
+++ b/yshop-drink-uniapp-vue3/package-lock.json
@@ -1,299 +1,412 @@
 {
   "name": "yshop-miniapp",
   "version": "1.2.0",
-  "lockfileVersion": 1,
+  "lockfileVersion": 3,
   "requires": true,
-  "dependencies": {
-    "@vant/area-data": {
+  "packages": {
+    "": {
+      "name": "yshop-miniapp",
+      "version": "1.2.0",
+      "license": "ISC",
+      "dependencies": {
+        "@vant/area-data": "^1.5.0",
+        "add": "^2.0.6",
+        "flyio": "^0.6.14",
+        "jweixin-module": "^1.6.0",
+        "openai": "^6.38.0",
+        "pinia": "^2.1.6",
+        "vant": "^4.6.2",
+        "weixin-js-sdk": "^1.6.3",
+        "yarn": "^1.22.19"
+      }
+    },
+    "node_modules/@vant/area-data": {
       "version": "1.5.0",
       "resolved": "https://registry.npmmirror.com/@vant/area-data/-/area-data-1.5.0.tgz",
       "integrity": "sha512-SWmDhYmWiOgtAgtJqcW7N4XyGgrg/7l6t1+XSgt8BkPp2oOKO1ZUn8+46brLpT/gzRe/v8BtyTLmdBwMamrmQw=="
     },
-    "@vant/popperjs": {
+    "node_modules/@vant/popperjs": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
       "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
     },
-    "@vant/use": {
+    "node_modules/@vant/use": {
       "version": "1.5.2",
       "resolved": "https://registry.npmmirror.com/@vant/use/-/use-1.5.2.tgz",
-      "integrity": "sha512-CBK61iT568dCHUwFFsErGbW6/5tmrPnZJKGtcSy7Tjcrmws8Ku+YZo7IUFD9Xkj9MfSJ4pfhQ7pU2KouP5Cojg=="
+      "integrity": "sha512-CBK61iT568dCHUwFFsErGbW6/5tmrPnZJKGtcSy7Tjcrmws8Ku+YZo7IUFD9Xkj9MfSJ4pfhQ7pU2KouP5Cojg==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
     },
-    "@vue/devtools-api": {
+    "node_modules/@vue/devtools-api": {
       "version": "6.5.0",
       "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
       "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
     },
-    "@vue/shared": {
+    "node_modules/@vue/shared": {
       "version": "3.3.4",
       "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.4.tgz",
       "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
     },
-    "add": {
+    "node_modules/add": {
       "version": "2.0.6",
       "resolved": "https://registry.npmmirror.com/add/-/add-2.0.6.tgz",
       "integrity": "sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q=="
     },
-    "ajv": {
+    "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "requires": {
+      "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
         "json-schema-traverse": "^0.4.1",
         "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "asn1": {
+    "node_modules/asn1": {
       "version": "0.2.6",
       "resolved": "https://registry.npmmirror.com/asn1/-/asn1-0.2.6.tgz",
       "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
-      "requires": {
+      "dependencies": {
         "safer-buffer": "~2.1.0"
       }
     },
-    "assert-plus": {
+    "node_modules/assert-plus": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/assert-plus/-/assert-plus-1.0.0.tgz",
-      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw=="
+      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
+      "engines": {
+        "node": ">=0.8"
+      }
     },
-    "asynckit": {
+    "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
-    "aws-sign2": {
+    "node_modules/aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmmirror.com/aws-sign2/-/aws-sign2-0.7.0.tgz",
-      "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA=="
+      "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
+      "engines": {
+        "node": "*"
+      }
     },
-    "aws4": {
+    "node_modules/aws4": {
       "version": "1.12.0",
       "resolved": "https://registry.npmmirror.com/aws4/-/aws4-1.12.0.tgz",
       "integrity": "sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg=="
     },
-    "bcrypt-pbkdf": {
+    "node_modules/bcrypt-pbkdf": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
       "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
-      "requires": {
+      "dependencies": {
         "tweetnacl": "^0.14.3"
       }
     },
-    "caseless": {
+    "node_modules/caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmmirror.com/caseless/-/caseless-0.12.0.tgz",
       "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw=="
     },
-    "combined-stream": {
+    "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "requires": {
+      "dependencies": {
         "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
       }
     },
-    "core-util-is": {
+    "node_modules/core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.2.tgz",
       "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="
     },
-    "dashdash": {
+    "node_modules/dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmmirror.com/dashdash/-/dashdash-1.14.1.tgz",
       "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
-      "requires": {
+      "dependencies": {
         "assert-plus": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10"
       }
     },
-    "delayed-stream": {
+    "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
     },
-    "ecc-jsbn": {
+    "node_modules/ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmmirror.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
       "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
-      "requires": {
+      "dependencies": {
         "jsbn": "~0.1.0",
         "safer-buffer": "^2.1.0"
       }
     },
-    "extend": {
+    "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/extend/-/extend-3.0.2.tgz",
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
     },
-    "extsprintf": {
+    "node_modules/extsprintf": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/extsprintf/-/extsprintf-1.3.0.tgz",
-      "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g=="
+      "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
+      "engines": [
+        "node >=0.6.0"
+      ]
     },
-    "fast-deep-equal": {
+    "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
-    "fast-json-stable-stringify": {
+    "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
-    "flyio": {
+    "node_modules/flyio": {
       "version": "0.6.14",
       "resolved": "https://registry.npmmirror.com/flyio/-/flyio-0.6.14.tgz",
       "integrity": "sha512-RE2OXE1ZZmcXOKb0jCtGyquHDxpAqHg17CZ8lmQKRfl3x1kP+NBpaQDx4WgN7DNpLJjFnspTzTEQpwRGg6/xaA==",
-      "requires": {
+      "dependencies": {
         "request": "^2.85.0"
       }
     },
-    "forever-agent": {
+    "node_modules/forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw=="
+      "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
+      "engines": {
+        "node": "*"
+      }
     },
-    "form-data": {
+    "node_modules/form-data": {
       "version": "2.3.3",
       "resolved": "https://registry.npmmirror.com/form-data/-/form-data-2.3.3.tgz",
       "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
-      "requires": {
+      "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.6",
         "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 0.12"
       }
     },
-    "getpass": {
+    "node_modules/getpass": {
       "version": "0.1.7",
       "resolved": "https://registry.npmmirror.com/getpass/-/getpass-0.1.7.tgz",
       "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
-      "requires": {
+      "dependencies": {
         "assert-plus": "^1.0.0"
       }
     },
-    "har-schema": {
+    "node_modules/har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q=="
+      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
+      "engines": {
+        "node": ">=4"
+      }
     },
-    "har-validator": {
+    "node_modules/har-validator": {
       "version": "5.1.5",
       "resolved": "https://registry.npmmirror.com/har-validator/-/har-validator-5.1.5.tgz",
       "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
-      "requires": {
+      "deprecated": "this library is no longer supported",
+      "dependencies": {
         "ajv": "^6.12.3",
         "har-schema": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
       }
     },
-    "http-signature": {
+    "node_modules/http-signature": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/http-signature/-/http-signature-1.2.0.tgz",
       "integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==",
-      "requires": {
+      "dependencies": {
         "assert-plus": "^1.0.0",
         "jsprim": "^1.2.2",
         "sshpk": "^1.7.0"
+      },
+      "engines": {
+        "node": ">=0.8",
+        "npm": ">=1.3.7"
       }
     },
-    "is-typedarray": {
+    "node_modules/is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
     },
-    "isstream": {
+    "node_modules/isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmmirror.com/isstream/-/isstream-0.1.2.tgz",
       "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g=="
     },
-    "jsbn": {
+    "node_modules/jsbn": {
       "version": "0.1.1",
       "resolved": "https://registry.npmmirror.com/jsbn/-/jsbn-0.1.1.tgz",
       "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg=="
     },
-    "json-schema": {
+    "node_modules/json-schema": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/json-schema/-/json-schema-0.4.0.tgz",
       "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
     },
-    "json-schema-traverse": {
+    "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
-    "json-stringify-safe": {
+    "node_modules/json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
     },
-    "jsprim": {
+    "node_modules/jsprim": {
       "version": "1.4.2",
       "resolved": "https://registry.npmmirror.com/jsprim/-/jsprim-1.4.2.tgz",
       "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
-      "requires": {
+      "dependencies": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
         "json-schema": "0.4.0",
         "verror": "1.10.0"
+      },
+      "engines": {
+        "node": ">=0.6.0"
       }
     },
-    "jweixin-module": {
+    "node_modules/jweixin-module": {
       "version": "1.6.0",
       "resolved": "https://registry.npmmirror.com/jweixin-module/-/jweixin-module-1.6.0.tgz",
       "integrity": "sha512-dGk9cf+ipipHmtzYmKZs5B2toX+p4hLyllGLF6xuC8t+B05oYxd8fYoaRz0T30U2n3RUv8a4iwvjhA+OcYz52w=="
     },
-    "mime-db": {
+    "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
     },
-    "mime-types": {
+    "node_modules/mime-types": {
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "requires": {
+      "dependencies": {
         "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
       }
     },
-    "oauth-sign": {
+    "node_modules/oauth-sign": {
       "version": "0.9.0",
       "resolved": "https://registry.npmmirror.com/oauth-sign/-/oauth-sign-0.9.0.tgz",
-      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ=="
+      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+      "engines": {
+        "node": "*"
+      }
     },
-    "performance-now": {
+    "node_modules/openai": {
+      "version": "6.38.0",
+      "resolved": "https://registry.npmmirror.com/openai/-/openai-6.38.0.tgz",
+      "integrity": "sha512-AoMplt2UalrpgUDMh3L09QWjNRlgJPipclQvA6sYAaeF6nHNBMgmikAZGmcYLn8on4d9sQY9Q8bOLfrBS7Lc8g==",
+      "bin": {
+        "openai": "bin/cli"
+      },
+      "peerDependencies": {
+        "ws": "^8.18.0",
+        "zod": "^3.25 || ^4.0"
+      },
+      "peerDependenciesMeta": {
+        "ws": {
+          "optional": true
+        },
+        "zod": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
     },
-    "pinia": {
+    "node_modules/pinia": {
       "version": "2.1.6",
       "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.1.6.tgz",
       "integrity": "sha512-bIU6QuE5qZviMmct5XwCesXelb5VavdOWKWaB17ggk++NUwQWWbP5YnsONTk3b752QkW9sACiR81rorpeOMSvQ==",
-      "requires": {
+      "dependencies": {
         "@vue/devtools-api": "^6.5.0",
         "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
       }
     },
-    "psl": {
+    "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmmirror.com/psl/-/psl-1.9.0.tgz",
       "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
     },
-    "punycode": {
+    "node_modules/punycode": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.0.tgz",
-      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA=="
+      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
+      "engines": {
+        "node": ">=6"
+      }
     },
-    "qs": {
+    "node_modules/qs": {
       "version": "6.5.3",
       "resolved": "https://registry.npmmirror.com/qs/-/qs-6.5.3.tgz",
-      "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA=="
+      "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
+      "engines": {
+        "node": ">=0.6"
+      }
     },
-    "request": {
+    "node_modules/request": {
       "version": "2.88.2",
       "resolved": "https://registry.npmmirror.com/request/-/request-2.88.2.tgz",
       "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
-      "requires": {
+      "deprecated": "request has been deprecated, see https://github.com/request/request/issues/3142",
+      "dependencies": {
         "aws-sign2": "~0.7.0",
         "aws4": "^1.8.0",
         "caseless": "~0.12.0",
@@ -314,23 +427,40 @@
         "tough-cookie": "~2.5.0",
         "tunnel-agent": "^0.6.0",
         "uuid": "^3.3.2"
+      },
+      "engines": {
+        "node": ">= 6"
       }
     },
-    "safe-buffer": {
+    "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
     },
-    "safer-buffer": {
+    "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
-    "sshpk": {
+    "node_modules/sshpk": {
       "version": "1.17.0",
       "resolved": "https://registry.npmmirror.com/sshpk/-/sshpk-1.17.0.tgz",
       "integrity": "sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==",
-      "requires": {
+      "dependencies": {
         "asn1": "~0.2.3",
         "assert-plus": "^1.0.0",
         "bcrypt-pbkdf": "^1.0.0",
@@ -340,84 +470,137 @@
         "jsbn": "~0.1.0",
         "safer-buffer": "^2.0.2",
         "tweetnacl": "~0.14.0"
+      },
+      "bin": {
+        "sshpk-conv": "bin/sshpk-conv",
+        "sshpk-sign": "bin/sshpk-sign",
+        "sshpk-verify": "bin/sshpk-verify"
+      },
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "tough-cookie": {
+    "node_modules/tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmmirror.com/tough-cookie/-/tough-cookie-2.5.0.tgz",
       "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-      "requires": {
+      "dependencies": {
         "psl": "^1.1.28",
         "punycode": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.8"
       }
     },
-    "tunnel-agent": {
+    "node_modules/tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmmirror.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
       "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
-      "requires": {
+      "dependencies": {
         "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
       }
     },
-    "tweetnacl": {
+    "node_modules/tweetnacl": {
       "version": "0.14.5",
       "resolved": "https://registry.npmmirror.com/tweetnacl/-/tweetnacl-0.14.5.tgz",
       "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA=="
     },
-    "uri-js": {
+    "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "requires": {
+      "dependencies": {
         "punycode": "^2.1.0"
       }
     },
-    "uuid": {
+    "node_modules/uuid": {
       "version": "3.4.0",
       "resolved": "https://registry.npmmirror.com/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+      "deprecated": "Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.",
+      "bin": {
+        "uuid": "bin/uuid"
+      }
     },
-    "vant": {
+    "node_modules/vant": {
       "version": "4.6.2",
       "resolved": "https://registry.npmmirror.com/vant/-/vant-4.6.2.tgz",
       "integrity": "sha512-6EHCCAGM5a9VVzpBg/wZNPDFmJ8T1a4k29DPNcEMW3X670awW3rnD7+/x3dw+bE17JhhSg49V/+fQwBP2iQkAg==",
-      "requires": {
+      "dependencies": {
         "@vant/popperjs": "^1.3.0",
         "@vant/use": "^1.5.1",
         "@vue/shared": "^3.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
       }
     },
-    "verror": {
+    "node_modules/verror": {
       "version": "1.10.0",
       "resolved": "https://registry.npmmirror.com/verror/-/verror-1.10.0.tgz",
       "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
-      "requires": {
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "dependencies": {
         "assert-plus": "^1.0.0",
         "core-util-is": "1.0.2",
         "extsprintf": "^1.2.0"
+      }
+    },
+    "node_modules/verror/node_modules/extsprintf": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/extsprintf/-/extsprintf-1.4.1.tgz",
+      "integrity": "sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==",
+      "engines": [
+        "node >=0.6.0"
+      ]
+    },
+    "node_modules/vue-demi": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.5.tgz",
+      "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
       },
-      "dependencies": {
-        "extsprintf": {
-          "version": "1.4.1",
-          "resolved": "https://registry.npmmirror.com/extsprintf/-/extsprintf-1.4.1.tgz",
-          "integrity": "sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA=="
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
         }
       }
     },
-    "vue-demi": {
-      "version": "0.14.5",
-      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.5.tgz",
-      "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA=="
-    },
-    "weixin-js-sdk": {
+    "node_modules/weixin-js-sdk": {
       "version": "1.6.3",
       "resolved": "https://registry.npmmirror.com/weixin-js-sdk/-/weixin-js-sdk-1.6.3.tgz",
       "integrity": "sha512-5jYNtVcxWmgHNqCLSPoX6vXab9G4RPDZx0klX8IsVwGjDTwx/UDmgfF7fkRMGguRpuFv0O7tk1jb+Oay2QiV1w=="
     },
-    "yarn": {
+    "node_modules/yarn": {
       "version": "1.22.19",
       "resolved": "https://registry.npmmirror.com/yarn/-/yarn-1.22.19.tgz",
-      "integrity": "sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ=="
+      "integrity": "sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==",
+      "hasInstallScript": true,
+      "bin": {
+        "yarn": "bin/yarn.js",
+        "yarnpkg": "bin/yarn.js"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
     }
   }
 }
diff --git a/yshop-drink-uniapp-vue3/package.json b/yshop-drink-uniapp-vue3/package.json
index aeb24c3..10fbaae 100644
--- a/yshop-drink-uniapp-vue3/package.json
+++ b/yshop-drink-uniapp-vue3/package.json
@@ -13,6 +13,7 @@
     "add": "^2.0.6",
     "flyio": "^0.6.14",
     "jweixin-module": "^1.6.0",
+    "openai": "^6.38.0",
     "pinia": "^2.1.6",
     "vant": "^4.6.2",
     "weixin-js-sdk": "^1.6.3",
diff --git a/yshop-drink-uniapp-vue3/pages/cart/cart.vue b/yshop-drink-uniapp-vue3/pages/cart/cart.vue
index 3599853..170f75c 100644
--- a/yshop-drink-uniapp-vue3/pages/cart/cart.vue
+++ b/yshop-drink-uniapp-vue3/pages/cart/cart.vue
@@ -5,40 +5,40 @@
 	  left-arrow
 	  @leftClick="$onClickLeft"
 	/>
-	<view  class="cart-popup">
-		 <view class="top flex justify-between">
+	<view class="cart-page">
+		 <view class="cart-page__header flex justify-between">
 		   <text>已点{{ getCartGoodsNumber }}份</text>
 		   <text @tap="handleCartClear">清空</text>
 		 </view>
-		 <scroll-view class="cart-list" scroll-y>
-		  <view class="wrapper">
+		 <scroll-view class="cart-page__list" scroll-y>
+		  <view class="cart-page__list-inner">
 		   <uv-empty mode="car" v-if="cart.length == 0"></uv-empty>
-		   <view class="item" v-for="(item, index) in cart" :key="index">
-			<view class="left">
-			 <view class="name">{{ item.name }}</view>
-			 <view class="props">{{ item.valueStr }}</view>
+		   <view class="cart-item" v-for="(item, index) in cart" :key="index">
+			<view class="cart-item__info">
+			 <view class="cart-item__name">{{ item.name }}</view>
+			 <view class="cart-item__props">{{ item.valueStr }}</view>
 			</view>
-			<view class="center">
+			<view class="cart-item__price">
 			 <text>￥{{ item.price }}</text>
 			</view>
-			<view class="right">
-			 <button type="default" plain size="mini" class="btn" hover-class="none"
+			<view class="cart-item__controls">
+			 <button type="default" plain size="mini" class="cart-item__btn" hover-class="none"
 			  @tap="handleCartItemReduce(index)">
 			  <view class="iconfont iconsami-select"></view>
 			 </button>
-			 <view class="number">{{ item.number }}</view>
-			 <button type="primary" class="btn" size="min" hover-class="none"
+			 <view class="cart-item__qty">{{ item.number }}</view>
+			 <button type="primary" class="cart-item__btn" size="min" hover-class="none"
 			  @tap="handleCartItemAdd(index)">
 			  <view class="iconfont iconadd-select"></view>
 			 </button>
 			</view>
-		   </view>		
+		   </view>
 		  </view>
 		 </scroll-view>
 	 </view>
-	 <view class="fixed-bottom flex justify-between align-center bg-white ">
-	 	<view class="mx-2 ont-weight-light">应付:<text class="text-danger">￥{{ getCartGoodsPrice }}</text></view>
-	 	<view><uv-button type="warning" color="#09b4f1" :customStyle="customStyle" size="large" text="去结算" @click="toPay"></uv-button></view>
+	 <view class="fixed-bottom flex justify-between align-center bg-white">
+	 	<view class="mx-2 font-weight-light">应付:<text class="text-danger">￥{{ getCartGoodsPrice }}</text></view>
+	 	<view><uv-button type="primary" :customStyle="customStyle" size="large" text="去结算" @click="toPay"></uv-button></view>
 	 </view>
 	 <uv-toast ref="uToast"></uv-toast>
 </template>
@@ -150,96 +150,111 @@ const toPay = () => {
 </script>
 
 <style lang="scss" scoped>
-.cart-popup {
-		.top {
-			background-color: $bg-color-primary;
-			//color: $color-primary;
-			color: #5A5B5C;
-			padding: 10rpx 30rpx;
-			font-size: 24rpx;
-			text-align: right;
-		}
-		.cart-list {
-			background-color: #ffffff;
-			width: 100%;
-			overflow: hidden;
-			min-height: 1vh;
-			max-height: 60vh;
-	
-			.wrapper {
-				height: 100%;
-				display: flex;
-				flex-direction: column;
-				padding: 0 30rpx;
-				margin-bottom: 156rpx;
-	
-				.item {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					padding: 30rpx 0;
-					position: relative;
-	
-					&::after {
-						content: ' ';
-						position: absolute;
-						bottom: 0;
-						left: 0;
-						width: 100%;
-						background-color: $border-color;
-						height: 2rpx;
-						transform: scaleY(0.6);
-					}
-	
-					.left {
-						flex: 1;
-						display: flex;
-						flex-direction: column;
-						overflow: hidden;
-						margin-right: 30rpx;
-	
-						.name {
-							font-size: $font-size-sm;
-							color: $text-color-base;
-						}
-						.props {
-							color: $text-color-assist;
-							font-size: 24rpx;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							white-space: nowrap;
-						}
-					}
-	
-					.center {
-						margin-right: 120rpx;
-						font-size: $font-size-base;
-					}
-	
-					.right {
-						display: flex;
-						align-items: center;
-						justify-content: space-between;
-	
-						.btn {
-							width: 46rpx;
-							height: 46rpx;
-							border-radius: 100%;
-							padding: 0;
-							text-align: center;
-							line-height: 46rpx;
-						}
-	
-						.number {
-							font-size: $font-size-base;
-							width: 46rpx;
-							height: 46rpx;
-							text-align: center;
-							line-height: 46rpx;
-						}
-					}
-				}
-			}
-		}
+// 购物车页局部 token（与 uni.scss 全局变量配合）
+$cart-list-max-height: 60vh;
+$cart-list-min-height: 1vh;
+$cart-list-bottom-space: 156rpx;
+$cart-price-offset: 120rpx;
+$cart-control-size: 46rpx;
+$cart-divider-height: 2rpx;
+$cart-header-color: #5a5b5c;
+$cart-gap-sm: 10rpx;
+
+.cart-page {
+	--cart-control-size: #{$cart-control-size};
+	--cart-list-max-height: #{$cart-list-max-height};
+
+	&__header {
+		padding: $cart-gap-sm $spacing-row-lg;
+		font-size: $font-size-sm;
+		text-align: right;
+		color: $cart-header-color;
+		background-color: $bg-color-primary;
 	}
+
+	&__list {
+		width: 100%;
+		overflow: hidden;
+		min-height: $cart-list-min-height;
+		max-height: var(--cart-list-max-height);
+		background-color: $text-color-white;
+	}
+
+	&__list-inner {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		padding: 0 $spacing-row-lg;
+		margin-bottom: $cart-list-bottom-space;
+	}
+
+}
+
+.cart-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: $spacing-row-lg 0;
+	position: relative;
+
+	&::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		height: $cart-divider-height;
+		background-color: $border-color;
+		transform: scaleY(0.6);
+	}
+
+	&__info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		margin-right: $spacing-row-lg;
+	}
+
+	&__name {
+		font-size: $font-size-sm;
+		color: $text-color-base;
+	}
+
+	&__props {
+		font-size: $font-size-sm;
+		color: $text-color-assist;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__price {
+		margin-right: $cart-price-offset;
+		font-size: $font-size-base;
+	}
+
+	&__controls {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	&__btn,
+	&__qty {
+		width: var(--cart-control-size);
+		height: var(--cart-control-size);
+		line-height: var(--cart-control-size);
+		text-align: center;
+	}
+
+	&__btn {
+		padding: 0;
+		border-radius: $border-radius-circle;
+	}
+
+	&__qty {
+		font-size: $font-size-base;
+	}
+}
 </style>
diff --git a/yshop-drink-uniapp-vue3/pages/components/pages/address/add.vue b/yshop-drink-uniapp-vue3/pages/components/pages/address/add.vue
index e762f8f..c0cf3ad 100644
--- a/yshop-drink-uniapp-vue3/pages/components/pages/address/add.vue
+++ b/yshop-drink-uniapp-vue3/pages/components/pages/address/add.vue
@@ -5,61 +5,57 @@
 	  left-arrow
 	  @leftClick="$onClickLeft"
 	/>
-	<view class="container">
-		<view class="form-box">
-			<view class="form">
-				<list-cell :hover="false">
-					<view class="form-input">
-						<view class="label">收货人</view>
-						<input class="input" placeholder="请输入收货人" v-model="form.realName" placeholder-class="text-color-assist" />
-					</view>
-				</list-cell>
-				<list-cell :hover="false">
-					<view class="form-input">
-						<view class="label">联系方式</view>
-						<input class="input" placeholder="请输入收货人联系方式" v-model="form.phone" placeholder-class="text-color-assist" />
-					</view>
-				</list-cell>
-				<list-cell :hover="false">
-					<view class="form-input">
-						<view class="label">收货地址</view>
-						<view class="input" @click="chooseLocation">{{form.address ? form.address : '请选择收货地址'}}</view>
-					</view>
-				</list-cell>
-				<list-cell :hover="false">
-					<view class="form-input">
-						<view class="label">详细地址</view>
-						<input class="input" placeholder="请输入收货人详细地址" v-model="form.detail" placeholder-class="text-color-assist" />
-					</view>
-				</list-cell>
-				<list-cell :hover="false">
-					<view class="form-input">
-						<view class="label">默认地址</view>
-						<view class="radio-group">
-							<view class="radio" :class="{'checked': !form.isDefault}" style="margin-right: 10rpx;" @tap="form.isDefault=0">否</view>
-							<view class="radio" :class="{'checked': form.isDefault}" @tap="form.isDefault=1">是</view>
-						</view>
-					</view>
-				</list-cell>
+	<view class="container address-form">
+		<list-cell :hover="false">
+			<view class="address-form__field">
+				<view class="address-form__label">收货人</view>
+				<input class="address-form__input" placeholder="请输入收货人" v-model="form.realName" placeholder-class="text-color-assist" />
 			</view>
-			<view class="btn-section">
-				<button type="primary" size="default" @tap="save">保存</button>
+		</list-cell>
+		<list-cell :hover="false">
+			<view class="address-form__field">
+				<view class="address-form__label">联系方式</view>
+				<input class="address-form__input" placeholder="请输入收货人联系方式" v-model="form.phone" placeholder-class="text-color-assist" />
 			</view>
+		</list-cell>
+		<list-cell :hover="false">
+			<view class="address-form__field">
+				<view class="address-form__label">收货地址</view>
+				<view class="address-form__input" @click="chooseLocation">{{ form.address ? form.address : '请选择收货地址' }}</view>
+			</view>
+		</list-cell>
+		<list-cell :hover="false">
+			<view class="address-form__field">
+				<view class="address-form__label">详细地址</view>
+				<input class="address-form__input" placeholder="请输入收货人详细地址" v-model="form.detail" placeholder-class="text-color-assist" />
+			</view>
+		</list-cell>
+		<list-cell :hover="false">
+			<view class="address-form__field">
+				<view class="address-form__label">默认地址</view>
+				<view class="address-form__radio-group">
+					<view class="address-form__radio" :class="{ 'address-form__radio--checked': !form.isDefault }" @tap="form.isDefault = 0">否</view>
+					<view class="address-form__radio" :class="{ 'address-form__radio--checked': form.isDefault }" @tap="form.isDefault = 1">是</view>
+				</view>
+			</view>
+		</list-cell>
+		<view class="address-form__actions">
+			<button type="primary" size="default" class="rounded-pill address-form__btn" @tap="save">保存</button>
 		</view>
 	</view>
 </template>
 
 <script setup>
-import {
+import {
   ref,
-  computed
+  computed
 } from 'vue'
 import { useMainStore } from '@/store/store'
 import { storeToRefs } from 'pinia'
 import { onLoad,onShow } from '@dcloudio/uni-app'
 import { formatDateTime,prePage } from '@/utils/util'
 import {
-  getAddressAddAndEdit
+  getAddressAddAndEdit
 } from '@/api/address'
 const main = useMainStore()
 const { isLogin,addresses } = storeToRefs(main)
@@ -116,67 +112,79 @@ const chooseLocation = async() => {
 </script>
 
 <style lang="scss" scoped>
-	.form-box {
-		width: 100%;
-		height: 100%;
-		padding: 30rpx;
+$address-form-padding: $spacing-row-lg;
+$address-form-label-width: 200rpx;
+$address-form-radio-padding-y: 10rpx;
+$address-form-radio-padding-x: $spacing-row-lg;
+$address-form-radio-gap: 10rpx;
+$address-form-radio-border-width: 2rpx;
+$address-form-btn-height: 90rpx;
+$address-form-btn-width: 85%;
+
+.address-form {
+	--address-form-label-width: #{$address-form-label-width};
+	--address-form-btn-height: #{$address-form-btn-height};
+	--address-form-btn-width: #{$address-form-btn-width};
+
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	padding: $address-form-padding;
+	color: $text-color-base;
+
+	&__field {
 		display: flex;
-		flex-direction: column;
-		color: $text-color-base;
+		align-items: center;
+		width: 100%;
+	}
 
-		.form-input {
-			display: flex;
-			align-items: center;
-			width: 100%;
-		}
+	&__label {
+		flex-shrink: 0;
+		width: var(--address-form-label-width);
+		font-size: $font-size-lg;
+		font-weight: 500;
+	}
 
-		.label {
-			width: 200rpx;
-			font-size: $font-size-lg;
-			color: $text-color-base;
-			font-weight: 500;
-		}
+	&__input {
+		flex: 1;
+		display: flex;
+		align-items: center;
+	}
 
-		.input {
-			flex: 1;
-			display: flex;
-			align-items: center;
-		}
+	&__radio-group {
+		display: flex;
+		gap: $address-form-radio-gap;
+	}
 
-		.radio-group {
-			display: flex;
-			justify-content: flex-start;
+	&__radio {
+		padding: $address-form-radio-padding-y $address-form-radio-padding-x;
+		border: $address-form-radio-border-width solid $text-color-assist;
+		border-radius: $border-radius-base;
+		color: $text-color-assist;
+		font-size: $font-size-base;
 
-			.radio {
-				padding: 10rpx 30rpx;
-				border-radius: 6rpx;
-				border: 2rpx solid $text-color-assist;
-				color: $text-color-assist;
-				font-size: $font-size-base;
-
-				&.checked {
-					background-color: $color-primary;
-					color: $text-color-white;
-					border: 2rpx solid $color-primary;
-				}
-			}
-		}
-
-		.btn-section {
-			flex: 1;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-
-			button {
-				font-size: $font-size-base;
-				height: 90rpx;
-				border-radius: 50rem !important;
-				width: 85%;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-			}
+		&--checked {
+			border-color: $color-primary;
+			background-color: $color-primary;
+			color: $text-color-white;
 		}
 	}
+
+	&__actions {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--address-form-btn-width);
+		height: var(--address-form-btn-height);
+		font-size: $font-size-base;
+	}
+}
 </style>
diff --git a/yshop-drink-uniapp-vue3/pages/components/pages/address/address.vue b/yshop-drink-uniapp-vue3/pages/components/pages/address/address.vue
index 20c5ee0..953992f 100644
--- a/yshop-drink-uniapp-vue3/pages/components/pages/address/address.vue
+++ b/yshop-drink-uniapp-vue3/pages/components/pages/address/address.vue
@@ -1,76 +1,74 @@
-<template>
-	<uv-navbar
-	  :fixed="false"
-	  :title="title"
-	  left-arrow
-	  @leftClick="$onClickLeft"
+<template>
+	<uv-navbar
+	  :fixed="false"
+	  :title="title"
+	  left-arrow
+	  @leftClick="$onClickLeft"
 	/>
-	<view class="container">
-		<view class="main">
+	<view class="container address-page">
+		<view class="address-page__main">
 			<uv-empty v-if="addresses.length == 0" mode="address"></uv-empty>
 			<template v-else>
 				<uv-swipe-action>
-					<uv-swipe-action-item class="address-wrapper" :options="swipeOption"
+					<uv-swipe-action-item class="address-page__item" :options="swipeOption"
 						@click="handleSwipeClick(address.id)" v-for="(address, index) in addresses" :key="index">
-						<view class="address" @tap="chooseAddress(address)">
-							<view class="left flex-fill overflow-hidden mr-20">
-								<view class="font-size-lg font-weight-bold text-truncate"
-									style="margin-bottom: 10rpx;white-space:normal;">
+						<view class="address-page__card" @tap="chooseAddress(address)">
+							<view class="flex-fill overflow-hidden mr-20">
+								<view class="address-page__detail font-size-lg font-weight-bold text-truncate">
 									{{ address.address + ' ' + address.detail }}
 								</view>
 								<view class="font-size-sm text-color-assist">
 									{{ address.realName }} {{ address.isDefault ? '默认' : '' }} {{ address.phone }}
 								</view>
 							</view>
-							<image src="/static/images/edit.png" class="edit-icon" @tap.stop="edit(address.id)"></image>
+							<image src="/static/images/edit.png" class="address-page__edit-icon" @tap.stop="edit(address.id)"></image>
 						</view>
 					</uv-swipe-action-item>
 				</uv-swipe-action>
 			</template>
 		</view>
-		<view class="btn-box">
-			<button type="primary" size="default" @tap="add">新增地址</button>
+		<view class="address-page__footer">
+			<button type="primary" size="default" class="rounded-pill address-page__btn" @tap="add">新增地址</button>
 		</view>
 	</view>
 </template>
 
-<script setup>
+<script setup>
 import {
-  ref,
+  ref,
   computed
-} from 'vue'
-import { useMainStore } from '@/store/store'
-import { storeToRefs } from 'pinia'
-import { onLoad,onShow } from '@dcloudio/uni-app'
-import { formatDateTime,prePage } from '@/utils/util'
-import {
-  addressAll,
-  addressDelete,
+} from 'vue'
+import { useMainStore } from '@/store/store'
+import { storeToRefs } from 'pinia'
+import { onLoad,onShow } from '@dcloudio/uni-app'
+import { formatDateTime,prePage } from '@/utils/util'
+import {
+  addressAll,
+  addressDelete,
   shopGetDistanceFromLocation
-} from '@/api/address'
-const main = useMainStore()
-const { isLogin,addresses,store } = storeToRefs(main)
-const title = ref('我的地址')
-
-const scene = ref('menu')
-const is_choose = ref(false)
-const swipeOption = ref(
-[{
+} from '@/api/address'
+const main = useMainStore()
+const { isLogin,addresses,store } = storeToRefs(main)
+const title = ref('我的地址')
+
+const scene = ref('menu')
+const is_choose = ref(false)
+const swipeOption = ref([{
 	text: '删除',
 	style: {
-		backgroundColor: '#D12E32'
+		backgroundColor: '#D12E32' // $color-error
 	}
-}])
-
-onLoad((option) => {
-	console.log('option:',option)
-	is_choose.value = option.is_choose || false
-	scene.value = option.scene || 'menu'
-})
-onShow(() => {
-	init();
-})
-
+}])
+
+onLoad((option) => {
+	console.log('option:',option)
+	is_choose.value = option.is_choose || false
+	scene.value = option.scene || 'menu'
+})
+onShow(() => {
+	init();
+})
+
 const init = async() => {
 	let data = await addressAll();
 	if (data) {
@@ -90,25 +88,25 @@ const edit = (id) => {
 const handleSwipeClick = async(id) => {
 	uni.showModal({
 		title: '提示',
-		content: '确定要删除？',
-		success: async function (res) {
-			if (res.confirm) {
-				let data = await addressDelete({
-					id: id
-				});
-				if (data) {
-					const index = addresses.value.findIndex(item => item.id == id)
-					const newaddresses = JSON.parse(JSON.stringify(addresses.value))
-					newaddresses.splice(index, 1)
-					main.SET_ADDRESSES(newaddresses)
-					uni.showToast({
-						title: '删除成功！',
-						icon: 'success'
-					})
-				}
-			} else if (res.cancel) {
-				console.log('用户点击取消');
-			}
+		content: '确定要删除？',
+		success: async function (res) {
+			if (res.confirm) {
+				let data = await addressDelete({
+					id: id
+				});
+				if (data) {
+					const index = addresses.value.findIndex(item => item.id == id)
+					const newaddresses = JSON.parse(JSON.stringify(addresses.value))
+					newaddresses.splice(index, 1)
+					main.SET_ADDRESSES(newaddresses)
+					uni.showToast({
+						title: '删除成功！',
+						icon: 'success'
+					})
+				}
+			} else if (res.cancel) {
+				console.log('用户点击取消');
+			}
 		}
 	});
 	// if (res && res.confirm) {
@@ -118,8 +116,8 @@ const handleSwipeClick = async(id) => {
 const chooseAddress = async(address) => {
 	if (!is_choose.value) {
 		return;
-	}
-	
+	}
+	
 	console.log('scene.value:',scene.value)
 
 	if (scene.value == 'menu' || scene.value == 'pay') {
@@ -133,10 +131,10 @@ const chooseAddress = async(address) => {
 			return;
 		}
 		
-		if (parseFloat(data) > store.value.distance) {
-			uni.showToast({
-				title: '不在配送范围！',
-				icon: 'error'
+		if (parseFloat(data) > store.value.distance) {
+			uni.showToast({
+				title: '不在配送范围！',
+				icon: 'error'
 			})
 			return;
 		}
@@ -161,70 +159,80 @@ const chooseAddress = async(address) => {
 		main.SET_ADDRESS(address)
 		uni.navigateBack()
 	}
-}
+}
 
 </script>
 
 <style lang="scss" scoped>
-	.container {
-		width: 100%;
-		height: 100%;
-	}
+$address-padding: $spacing-row-lg;
+$address-item-gap: $spacing-row-lg;
+$address-card-padding-y: 40rpx;
+$address-main-padding-bottom: 100rpx;
+$address-footer-height: 100rpx;
+$address-footer-padding-y: 10rpx;
+$address-btn-height: 80rpx;
+$address-btn-width: 80%;
+$address-edit-icon-size: 50rpx;
+$address-detail-gap: 10rpx;
+$address-footer-shadow: 0 0 20rpx rgba($text-color-assist, 0.1);
 
-	.main {
-		width: 100%;
-		padding: 30rpx;
+.address-page {
+	--address-edit-icon-size: #{$address-edit-icon-size};
+	--address-btn-height: #{$address-btn-height};
+	--address-btn-width: #{$address-btn-width};
+
+	&__main {
 		display: flex;
 		flex-direction: column;
-		padding-bottom: 100rpx;
-
-		.address-wrapper {
-			margin-bottom: 30rpx;
-		}
-
-		.address {
-			width: 100%;
-			padding: 40rpx 30rpx;
-			background-color: #FFFFFF;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-
-			.right {
-				flex: 1;
-				overflow: hidden;
-				display: flex;
-				flex-direction: column;
-			}
-
-			.edit-icon {
-				width: 50rpx;
-				height: 50rpx;
-				flex-shrink: 0;
-			}
-		}
+		width: 100%;
+		padding: $address-padding;
+		padding-bottom: $address-main-padding-bottom;
 	}
 
-	.btn-box {
-		height: 100rpx;
-		background-color: #FFFFFF;
-		box-shadow: 0 0 20rpx rgba($color: $text-color-assist, $alpha: 0.1);
+	&__item {
+		margin-bottom: $address-item-gap;
+	}
+
+	&__card {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		padding: $address-card-padding-y $address-padding;
+		background-color: $text-color-white;
+	}
+
+	&__detail {
+		margin-bottom: $address-detail-gap;
+		white-space: normal;
+	}
+
+	&__edit-icon {
+		flex-shrink: 0;
+		width: var(--address-edit-icon-size);
+		height: var(--address-edit-icon-size);
+	}
+
+	&__footer {
 		position: fixed;
+		right: 0;
 		bottom: 0;
 		left: 0;
-		right: 0;
-		padding: 10rpx 0;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-
-		button {
-			height: 80rpx;
-			width: 80%;
-			border-radius: 50rem !important;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
+		height: $address-footer-height;
+		padding: $address-footer-padding-y 0;
+		background-color: $text-color-white;
+		box-shadow: $address-footer-shadow;
 	}
+
+	&__btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--address-btn-width);
+		height: var(--address-btn-height);
+	}
+}
 </style>
diff --git a/yshop-drink-uniapp-vue3/pages/components/pages/balance/bill.vue b/yshop-drink-uniapp-vue3/pages/components/pages/balance/bill.vue
index 73bafd1..18481a6 100644
--- a/yshop-drink-uniapp-vue3/pages/components/pages/balance/bill.vue
+++ b/yshop-drink-uniapp-vue3/pages/components/pages/balance/bill.vue
@@ -5,49 +5,44 @@
 	  left-arrow
 	  @leftClick="$onClickLeft"
 	/>
-	<view>
-		<view class="wrap">
+	<view class="bill-page">
+		<view class="bill-page__body">
 			<view class="bg-white" v-if="cate == 0">
-				<uv-tabs activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change" :scrollable="false" swiperWidth="750"></uv-tabs>
+				<uv-tabs :activeColor="balanceTabActiveColor" ref="tabs" :list="list" :current="current" @change="change" :scrollable="false" swiperWidth="750"></uv-tabs>
 			</view>
 			<view class="bg-white" v-else>
-				<uv-tabs activeColor="#f29100" ref="tabs" :list="list1" :current="current" @change="change" :scrollable="false" swiperWidth="750"></uv-tabs>
+				<uv-tabs :activeColor="balanceTabActiveColor" ref="tabs" :list="list1" :current="current" @change="change" :scrollable="false" swiperWidth="750"></uv-tabs>
 			</view>
-			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
-				
-				<swiper-item class="swiper-item" v-for="(item, index) in orderList" :key="index">
-					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
-						<view class="page-box">
+			<swiper class="bill-page__swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
+				<swiper-item class="bill-page__swiper-item" v-for="(item, index) in orderList" :key="index">
+					<scroll-view scroll-y class="bill-page__scroll" @scrolltolower="reachBottom">
+						<view class="bill-page__content">
 							<view v-if="item.length == 0">
-								<view class="centre" v-if="loadStatus[index] != 'loading'">
-									<view class="explain">
+								<view class="bill-empty" v-if="loadStatus[index] != 'loading'">
+									<view class="bill-empty__text">
 										您还没有相关的账单
-										<view class="tips">可以去看看有那些想买的</view>
+										<view class="bill-empty__tips">可以去看看有那些想买的</view>
 									</view>
-									<view class="btn">
+									<view class="bill-empty__btn">
 										<navigator open-type="switchTab" url="/pages/menu/menu">随便逛逛</navigator>
 									</view>
 								</view>
 								<view v-else>
-									<u-loadmore :status="loadStatus[index]" bgColor="#f2f2f2"></u-loadmore>
+									<u-loadmore :status="loadStatus[index]" :bgColor="balancePageBg"></u-loadmore>
 								</view>
 							</view>
 							<view v-else>
-								<view class="order" v-for="(res, resIndex) in orderList[index]" :key="resIndex">
-									<view class="type">
+								<view class="bill-item" v-for="(res, resIndex) in orderList[index]" :key="resIndex">
+									<view class="bill-item__meta">
 										<view>{{res.title}}</view>
 										<view>{{res.mark}}</view>
 									</view>
-									<view class="total">
-										<view>
-												{{res.pm == 0 ? '-':'＋'}}￥{{res.number}}元
-										</view>
-										<view>
-											{{formatDateTime(res.createTime)}}
-										</view>
+									<view class="bill-item__amount">
+										<view>{{res.pm == 0 ? '-':'＋'}}￥{{res.number}}元</view>
+										<view>{{formatDateTime(res.createTime)}}</view>
 									</view>
 								</view>
-								<u-loadmore :status="loadStatus[index]" bgColor="#f2f2f2"></u-loadmore>
+								<u-loadmore :status="loadStatus[index]" :bgColor="balancePageBg"></u-loadmore>
 							</view>
 						</view>
 					</scroll-view>
@@ -58,16 +53,16 @@
 </template>
 
 <script setup>
-import {
+import {
   ref,
-  watch
+  watch
 } from 'vue'
 import { useMainStore } from '@/store/store'
 import { storeToRefs } from 'pinia'
 import { onLoad,onShow} from '@dcloudio/uni-app'
 import { formatDateTime } from '@/utils/util'
 import {
-  balanceGetBillList
+  balanceGetBillList
 } from '@/api/user'
 const main = useMainStore()
 const { isLogin } = storeToRefs(main)
@@ -107,6 +102,10 @@ const pageSize = ref(20)
 const tabs = ref()
 const cate = ref(0)
 
+// 与下方 SCSS token 保持一致，供模板组件颜色属性使用
+const balanceTabActiveColor = '#f29100'
+const balancePageBg = '#f2f2f2'
+
 onLoad((option) => {
 	console.log('cate:',option.cate)
 	cate.value = option.cate
@@ -154,76 +153,109 @@ const animationfinish = ({ detail }) => {
 
 </script>
 
-<style>
+<style lang="scss">
+$balance-page-bg: #f2f2f2;
+
 /* #ifndef H5 */
 page {
 	height: 100%;
-	background-color: #f2f2f2;
+	background-color: $balance-page-bg;
 }
 /* #endif */
 </style>
 
 <style lang="scss" scoped>
-.order {
-	width: 710rpx;
-	background-color: #ffffff;
-	margin: 20rpx auto;
-	border-radius: 20rpx;
-	box-sizing: border-box;
-	padding: 20rpx;
-	font-size: 28rpx;
-	
-	.total {
-		display: inline-block;
-		text-align: right;
-		
-		.total-price {
-			font-size: 36rpx;
-		}
-		float: right;
+// 账单页局部 token（与 uni.scss 全局变量配合；$balance-page-bg 与上方及 script 常量保持一致）
+$balance-page-bg: #f2f2f2;
+$balance-tab-active: #f29100;
+$balance-card-width: 710rpx;
+$balance-card-radius: 20rpx;
+$balance-card-padding: $spacing-row-base;
+$balance-card-gap: $spacing-row-base;
+$balance-empty-margin-top: 200rpx;
+$balance-empty-btn-width: 200rpx;
+$balance-empty-btn-radius: 32rpx;
+$balance-empty-btn-height: 64rpx;
+$balance-empty-image-size: 164rpx;
+$balance-gradient-start: #f9745a;
+$balance-gradient-end: #ff9e01;
+
+.bill-page {
+	--balance-page-bg: #{$balance-page-bg};
+	--balance-tab-active: #{$balance-tab-active};
+
+	&__body {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		height: calc(100vh - var(--window-top));
 	}
-	.type {
-		display: inline-block;
-		
+
+	&__swiper {
+		flex: 1;
 	}
-	
-}
-.centre {
-	text-align: center;
-	margin: 200rpx auto;
-	font-size: 32rpx;
-	image {
-		width: 164rpx;
-		height: 164rpx;
-		border-radius: 50%;
-		margin-bottom: 20rpx;
+
+	&__swiper-item {
+		height: 100%;
 	}
-	.tips {
-		font-size: 24rpx;
-		color: #999999;
-		margin-top: 20rpx;
-	}
-	.btn {
-		margin: 80rpx auto;
-		width: 200rpx;
-		border-radius: 32rpx;
-		line-height: 64rpx;
-		color: #ffffff;
-		font-size: 26rpx;
-		background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
+
+	&__scroll {
+		width: 100%;
+		height: 100%;
 	}
 }
-.wrap {
+
+.bill-item {
 	display: flex;
-	flex-direction: column;
-	height: calc(100vh - var(--window-top));
-	width: 100%;
+	align-items: flex-start;
+	justify-content: space-between;
+	box-sizing: border-box;
+	width: $balance-card-width;
+	margin: $balance-card-gap auto;
+	padding: $balance-card-padding;
+	font-size: $font-size-base;
+	background-color: $text-color-white;
+	border-radius: $balance-card-radius;
+
+	&__meta,
+	&__amount {
+		display: flex;
+		flex-direction: column;
+	}
+
+	&__amount {
+		flex-shrink: 0;
+		text-align: right;
+	}
 }
-.swiper-box {
-	flex: 1;
-}
-.swiper-item {
-	height: 100%;
+
+.bill-empty {
+	margin: $balance-empty-margin-top auto;
+	font-size: $font-size-lg;
+	text-align: center;
+
+	image {
+		width: $balance-empty-image-size;
+		height: $balance-empty-image-size;
+		margin-bottom: $balance-card-gap;
+		border-radius: $border-radius-circle;
+	}
+
+	&__tips {
+		margin-top: $balance-card-gap;
+		font-size: $font-size-sm;
+		color: $text-color-assist;
+	}
+
+	&__btn {
+		width: $balance-empty-btn-width;
+		margin: 80rpx auto;
+		font-size: 26rpx;
+		line-height: $balance-empty-btn-height;
+		color: $text-color-white;
+		border-radius: $balance-empty-btn-radius;
+		background: linear-gradient(270deg, $balance-gradient-start 0%, $balance-gradient-end 100%);
+	}
 }
 </style>
 
diff --git a/yshop-drink-uniapp-vue3/pages/components/pages/coupons/coupons.vue b/yshop-drink-uniapp-vue3/pages/components/pages/coupons/coupons.vue
index f0407c7..f9cf6df 100644
--- a/yshop-drink-uniapp-vue3/pages/components/pages/coupons/coupons.vue
+++ b/yshop-drink-uniapp-vue3/pages/components/pages/coupons/coupons.vue
@@ -5,85 +5,89 @@
 	  left-arrow
 	  @leftClick="$onClickLeft"
 	/>
-	<view class="container position-relative w-100 h-100 overflow-hidden">
-		<view class="exchange-box">
-			<view class="input-box">
+	<view class="container coupons-page position-relative w-100 h-100 overflow-hidden">
+		<view class="coupons-exchange">
+			<view class="coupons-exchange__input">
 				<uv-search placeholder="请输入兑换码" v-model="exchange_code" @click="exchange"></uv-search>
 			</view>
 		</view>
-		<view class="tabbar">
-			<view class="tab" :class="{active: activeTabIndex == index}" 
-				v-for="(item, index) in tabs" :key="index" @tap="handleTab(index)">
-				<view class="title">{{ item.title }}</view>
+		<view class="coupons-tabbar">
+			<view
+				class="coupons-tab"
+				:class="{ 'coupons-tab--active': activeTabIndex == index }"
+				v-for="(item, index) in tabs"
+				:key="index"
+				@tap="handleTab(index)"
+			>
+				<view class="coupons-tab__title">{{ item.title }}</view>
 			</view>
 		</view>
 		<view class="flex-fill">
-			<scroll-view scroll-y class="coupon-list" @scrolltolower="getCoupons(activeTabIndex)">
-				<view class="wrapper"  v-if="0 === activeTabIndex">
+			<scroll-view scroll-y class="coupons-list" @scrolltolower="getCoupons(activeTabIndex)">
+				<view class="coupons-list__wrapper" v-if="0 === activeTabIndex">
 					<uv-empty v-if="myCoupons.length == 0" mode="list"></uv-empty>
-					<view class="coupon" v-for="(item, index) in myCoupons" :key="index" @tap="openDetailModal(item,index)">
-						<view class="taobao">
-							<view class="ticket">
-								<view class="left">
+					<view class="coupons-item" v-for="(item, index) in myCoupons" :key="index" @tap="openDetailModal(item,index)">
+						<view class="coupons-ticket">
+							<view class="coupons-ticket__body">
+								<view class="coupons-ticket__left">
 									<image
-										class="picture"
+										class="coupons-ticket__picture"
 										:src="item.image"
 										mode="aspectFill"
 									></image>
-									<view class="introduce">
-										<view class="top">
+									<view class="coupons-ticket__intro">
+										<view class="coupons-ticket__value">
 											￥
-											<text class="big">{{item.value}}</text>
+											<text class="coupons-ticket__amount">{{item.value}}</text>
 											<view>
 												满{{item.least}}减{{item.value}}
 											</view>
 										</view>
-										<view class="type">{{ item.title }}</view>
-										<view class="date u-line-1">{{formatDateTime(item.startTime, 'yyyy-MM-dd')}}-{{formatDateTime(item.endTime, 'yyyy-MM-dd')}}</view>
+										<view class="coupons-ticket__type">{{ item.title }}</view>
+										<view class="coupons-ticket__date u-line-1">{{formatDateTime(item.startTime, 'yyyy-MM-dd')}}-{{formatDateTime(item.endTime, 'yyyy-MM-dd')}}</view>
 									</view>
 								</view>
-								<view class="right" @click.stop="" v-if="activeTabIndex == 1">
-									<view class="use immediate-use" :round="true" @tap="receive(item, index)" >立即领取</view>
+								<view class="coupons-ticket__right" @click.stop="" v-if="activeTabIndex == 1">
+									<view class="coupons-ticket__btn coupons-ticket__btn--use immediate-use" :round="true" @tap="receive(item, index)">立即领取</view>
 								</view>
-								<view class="right" @click.stop="" v-if="activeTabIndex == 0">
-									<view v-if="item.status == 0" class="use immediate-use" :round="true" @tap="useCouponWith(item)" >立即使用</view>
-									<view v-else class="used">已使用</view>
+								<view class="coupons-ticket__right" @click.stop="" v-if="activeTabIndex == 0">
+									<view v-if="item.status == 0" class="coupons-ticket__btn coupons-ticket__btn--use immediate-use" :round="true" @tap="useCouponWith(item)">立即使用</view>
+									<view v-else class="coupons-ticket__btn coupons-ticket__btn--used">已使用</view>
 								</view>
 							</view>
 						</view>
 					</view>
 				</view>
-				<view class="wrapper" v-if="1 === activeTabIndex">
+				<view class="coupons-list__wrapper" v-if="1 === activeTabIndex">
 					<uv-empty v-if="notCoupons.length == 0" mode="list"></uv-empty>
-					<view class="coupon" v-for="(item, index) in notCoupons" :key="index" @tap="openDetailModal(item,index)">
-						<view class="taobao">
-							<view class="">
-								<view class="left">
+					<view class="coupons-item" v-for="(item, index) in notCoupons" :key="index" @tap="openDetailModal(item,index)">
+						<view class="coupons-ticket">
+							<view class="coupons-ticket__body">
+								<view class="coupons-ticket__left">
 									<image
-										class="picture"
+										class="coupons-ticket__picture"
 										:src="item.image"
 										mode="aspectFill"
 									></image>
-									<view class="introduce">
-										<view class="top">
+									<view class="coupons-ticket__intro">
+										<view class="coupons-ticket__value">
 											￥
-											<text class="big">{{item.value}}</text>
+											<text class="coupons-ticket__amount">{{item.value}}</text>
 											<view>
 												满{{item.least}}减{{item.value}}
 											</view>
 										</view>
-										<view class="type">{{ item.title }}</view>
-										<view class="date u-line-1">{{formatDateTime(item.startTime, 'yyyy-MM-dd')}}-{{formatDateTime(item.endTime, 'yyyy-MM-dd')}}</view>
+										<view class="coupons-ticket__type">{{ item.title }}</view>
+										<view class="coupons-ticket__date u-line-1">{{formatDateTime(item.startTime, 'yyyy-MM-dd')}}-{{formatDateTime(item.endTime, 'yyyy-MM-dd')}}</view>
 									</view>
 								</view>
-								<view class="right" @click.stop="" v-if="activeTabIndex == 1">
-									<!-- <view class="use immediate-use" :round="true" @tap="receive(item, index)" >立即领取</view> -->
-									<view  class="use immediate-use" :round="true" v-if="item.isReceive == 0" @tap="receive(item, index)" >立即领取</view>
-									<view v-else class="used immediate-use">已领取</view>
+								<view class="coupons-ticket__right" @click.stop="" v-if="activeTabIndex == 1">
+									<view class="coupons-ticket__btn coupons-ticket__btn--use immediate-use" :round="true" v-if="item.isReceive == 0" @tap="receive(item, index)">立即领取</view>
+									<view v-else class="coupons-ticket__btn coupons-ticket__btn--used immediate-use">已领取</view>
 								</view>
-								<view class="right" @click.stop="" v-if="activeTabIndex == 0">
-									<view v-if="item.status == 0" class="use immediate-use" :round="true" @tap="useCouponWith(item)" >立即使用</view>
-									<view v-else class="used">已使用</view>
+								<view class="coupons-ticket__right" @click.stop="" v-if="activeTabIndex == 0">
+									<view v-if="item.status == 0" class="coupons-ticket__btn coupons-ticket__btn--use immediate-use" :round="true" @tap="useCouponWith(item)">立即使用</view>
+									<view v-else class="coupons-ticket__btn coupons-ticket__btn--used">已使用</view>
 								</view>
 							</view>
 						</view>
@@ -121,9 +125,9 @@
 </template>
 
 <script setup>
-import {
+import {
   ref,
-  watch
+  watch
 } from 'vue'
 import { useMainStore } from '@/store/store'
 import { storeToRefs } from 'pinia'
@@ -132,7 +136,7 @@ import { formatDateTime,kmUnit } from '@/utils/util'
 import {
   couponReceive,
   couponMine,
-  couponIndexApi
+  couponIndexApi
 } from '@/api/coupon'
 const main = useMainStore()
 const { isLogin } = storeToRefs(main)
@@ -269,216 +273,212 @@ const receive = async(coupon,index) => {
 </script>
 
 <style lang="scss" scoped>
+// 优惠券页局部 token（与 uni.scss 全局变量配合）
+$coupons-exchange-height: 100rpx;
+$coupons-exchange-input-width: 70%;
+$coupons-tabbar-height: 80rpx;
+$coupons-tab-indicator-height: 5rpx;
+$coupons-tab-title-padding-y: 15rpx;
+$coupons-list-offset-nav: 120rpx;
+$coupons-list-offset-header: 200rpx;
+$coupons-list-padding-x: $spacing-row-base;
+$coupons-item-gap: $spacing-row-lg;
+$coupons-item-radius: $border-radius-base;
+$coupons-notch-size: 30rpx;
+$coupons-notch-offset: 65rpx;
+$coupons-ticket-radius: 20rpx;
+$coupons-ticket-divider: $border-color-light;
+$coupons-ticket-left-width: 70%;
+$coupons-ticket-right-width: 30%;
+$coupons-ticket-padding: $spacing-row-base;
+$coupons-ticket-right-padding-y: 40rpx;
+$coupons-picture-size: 190rpx;
+$coupons-amount-font-size: 60rpx;
+$coupons-date-font-size: 20rpx;
+$coupons-intro-gap: 10rpx;
+$coupons-btn-radius: 40rpx;
+$coupons-btn-padding-x: 20rpx;
+$coupons-btn-line-height: 40rpx;
+$coupons-btn-margin-left: 20rpx;
+
 /* #ifdef H5 */
 page {
 	height: 100%;
 }
 /* #endif */
 
-.container {
+.coupons-page {
+	--coupons-picture-size: #{$coupons-picture-size};
+	--coupons-list-offset-nav: #{$coupons-list-offset-nav};
+	--coupons-list-offset-header: #{$coupons-list-offset-header};
+
 	display: flex;
 	flex-direction: column;
 }
 
-.exchange-box {
+.coupons-exchange {
 	flex-shrink: 0;
-	height: 100rpx;
-	background-color: #ffffff;
-	 display: flex;
+	display: flex;
 	align-items: center;
 	justify-content: center;
+	height: $coupons-exchange-height;
+	background-color: $text-color-white;
 
-	.input-box {
-		width: 70%;
+	&__input {
+		width: $coupons-exchange-input-width;
 	}
 }
 
-.tabbar {
+.coupons-tabbar {
 	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 	width: 100%;
-	height: 80rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	
-	.tab {
-		flex: 1;
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		font-size: $font-size-base;
-		color: $text-color-base;
-		position: relative;
-		
-		.title {
-			padding: 15rpx 0;
-		}
-		
-		&.active {
-			color: $color-primary;
-			
-			.title {
-				border-bottom: 5rpx solid $color-primary;
-			}
-		}
-	}
+	height: $coupons-tabbar-height;
 }
 
-
-.coupon-list {
-	height: calc(100vh - 120rpx - 200rpx);
-	/* #ifdef H5 */
-	height: calc(100vh - 120rpx - 200rpx - 44px);
-	/* #endif */
-}
-
-.wrapper {
-	padding: 0 20rpx;
+.coupons-tab {
+	flex: 1;
 	display: flex;
 	flex-direction: column;
-	
-	.coupon {
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	font-size: $font-size-base;
+	color: $text-color-base;
+	position: relative;
+
+	&__title {
+		padding: $coupons-tab-title-padding-y 0;
+	}
+
+	&--active {
+		color: $color-primary;
+
+		.coupons-tab__title {
+			border-bottom: $coupons-tab-indicator-height solid $color-primary;
+		}
+	}
+}
+
+.coupons-list {
+	height: calc(100vh - var(--coupons-list-offset-nav) - var(--coupons-list-offset-header));
+
+	/* #ifdef H5 */
+	height: calc(100vh - var(--coupons-list-offset-nav) - var(--coupons-list-offset-header) - 44px);
+	/* #endif */
+
+	&__wrapper {
 		display: flex;
 		flex-direction: column;
-		background-color: #FFFFFF;
-		margin-bottom: 30rpx;
-		//padding: 0 30rpx;
-		border-radius: 6rpx;
-		box-shadow: 0 10rpx 10rpx -10rpx rgba(15, 15, 15, 0.1);
-		position: relative;
-		
-		&::before {
-			content: "";
-			position: absolute;
-			background-color: $bg-color;
-			width: 30rpx;
-			height: 30rpx;
-			bottom: 65rpx;
-			left: -15rpx;
-			border-radius: 100%;
-		}
-		
-		&::after {
-			content: "";
-			position: absolute;
-			background-color: $bg-color;
-			width: 30rpx;
-			height: 30rpx;
-			bottom: 65rpx;
-			right: -15rpx;
-			border-radius: 100%;
-		}
-		
-		.detail {
-			padding: 20rpx 0;
-			position: relative;
-
-		    &::after {
-				content: '';
-				position: absolute;
-				left: 0;
-				right: 0;
-				bottom: 0;
-				border-bottom: 1rpx dashed #c6c6c6;
-				transform: scaleY(0.5);
-			}
-			
-			.coupon-img {
-				width: 150rpx;
-				height: 150rpx;
-				margin-right: 40rpx;
-			}
-		}
+		padding: 0 $coupons-list-padding-x;
 	}
 }
 
-.use-coupon-btn {
-	width: 95%;
-	border-radius: 50rem !important;
+.coupons-item {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	margin-bottom: $coupons-item-gap;
+	background-color: $text-color-white;
+	border-radius: $coupons-item-radius;
+	box-shadow: $box-shadow;
+
+	&::before,
+	&::after {
+		content: '';
+		position: absolute;
+		bottom: $coupons-notch-offset;
+		width: $coupons-notch-size;
+		height: $coupons-notch-size;
+		background-color: $bg-color;
+		border-radius: $border-radius-circle;
+	}
+
+	&::before {
+		left: calc(-1 * #{$coupons-notch-size} / 2);
+	}
+
+	&::after {
+		right: calc(-1 * #{$coupons-notch-size} / 2);
+	}
 }
 
+.coupons-ticket {
+	background-color: $text-color-white;
 
-.taobao {
-	background-color: white;
-	.title {
+	&__body {
+		display: flex;
+	}
+
+	&__left {
+		display: flex;
+		width: $coupons-ticket-left-width;
+		padding: $coupons-ticket-padding;
+		background-color: $text-color-white;
+		border-radius: $coupons-ticket-radius;
+		border-right: dashed 2rpx $coupons-ticket-divider;
+	}
+
+	&__picture {
+		flex-shrink: 0;
+		width: var(--coupons-picture-size);
+		height: var(--coupons-picture-size);
+		border-radius: $coupons-ticket-radius;
+	}
+
+	&__intro {
+		margin-left: $coupons-intro-gap;
+		min-width: 0;
+	}
+
+	&__value {
+		font-size: $font-size-base;
+		color: $uv-warning;
+
+		.coupons-ticket__amount {
+			margin-right: $coupons-intro-gap;
+			font-size: $coupons-amount-font-size;
+			font-weight: bold;
+		}
+	}
+
+	&__type {
+		font-size: $font-size-base;
+		color: $uv-info-dark;
+	}
+
+	&__date {
+		margin-top: $coupons-intro-gap;
+		font-size: $coupons-date-font-size;
+		color: $uv-info-dark;
+	}
+
+	&__right {
 		display: flex;
 		align-items: center;
-		justify-content: space-between;
-		margin-bottom: 20rpx;
-		font-size: 30rpx;
-		.left {
-			display: flex;
-			align-items: center;
-		}
+		width: $coupons-ticket-right-width;
+		padding: $coupons-ticket-right-padding-y $coupons-ticket-padding;
+		background-color: $text-color-white;
+		border-radius: $coupons-ticket-radius;
 	}
-	.ticket {
-		display: flex;
-		.left {
-			width: 70%;
-			padding: 20rpx;
-			background-color: white;//rgb(255, 245, 244);
-			border-radius: 20rpx;
-			border-right: dashed 2rpx rgb(224, 215, 211);
-			display: flex;
-			.picture {
-				//width: 172rpx;
-				border-radius: 20rpx;
-				width: 190rpx;
-				height: 190rpx;
-			}
-			.introduce {
-				margin-left: 10rpx;
-				.top{
-					color:$uv-warning;
-					font-size: 28rpx;
-					.big{
-						font-size: 60rpx;
-						font-weight: bold;
-						margin-right: 10rpx;
-					}
-				}
-				.type{
-					font-size: 28rpx;
-					color: $uv-info-dark;
-				}
-				.date{
-					margin-top: 10rpx;
-					font-size: 20rpx;
-					color: $uv-info-dark;
-				}
-			}
+
+	&__btn {
+		height: auto;
+		margin-left: $coupons-btn-margin-left;
+		padding: 0 $coupons-btn-padding-x;
+		font-size: $font-size-sm;
+		line-height: $coupons-btn-line-height;
+		border-radius: $coupons-btn-radius;
+		color: $text-color-white !important;
+
+		&--use {
+			background-color: $uv-warning !important;
 		}
-		.right {
-			width: 30%;
-			padding: 40rpx 20rpx;
-			background-color: white;//rgb(255, 245, 244);
-			border-radius: 20rpx;
-			display: flex;
-			align-items: center;
-			.use {
-				height: auto;
-				padding: 0 20rpx;
-				font-size: 24rpx;
-				border-radius: 40rpx;
-				color: #ffffff!important;
-				background-color: $uv-warning!important;
-				line-height: 40rpx;
-				color: rgb(117, 142, 165);
-				margin-left: 20rpx;
-			}
-			.used {
-				height: auto;
-				padding: 0 20rpx;
-				font-size: 24rpx;
-				border-radius: 40rpx;
-				color: #ffffff!important;
-				background-color: $uv-info-dark!important;
-				line-height: 40rpx;
-				color: rgb(117, 142, 165);
-				margin-left: 20rpx;
-			}
+
+		&--used {
+			background-color: $uv-info-dark !important;
 		}
 	}
 }
diff --git a/yshop-drink-uniapp-vue3/pages/components/pages/login/login.vue b/yshop-drink-uniapp-vue3/pages/components/pages/login/login.vue
index 367c03d..568a24a 100644
--- a/yshop-drink-uniapp-vue3/pages/components/pages/login/login.vue
+++ b/yshop-drink-uniapp-vue3/pages/components/pages/login/login.vue
@@ -6,49 +6,45 @@
 		  left-arrow
 		  @leftClick="$onClickLeft"
 		/>
-		<view class="wrap">
-		<view class="top"></view>
-		<view class="content">
-			<view class="title">欢迎登录</view>
+		<view class="login-page">
+		<view class="login-page__form">
+			<view class="login-page__title">欢迎登录</view>
 			
-			<input class="u-border-bottom" type="number" v-model="mobile" placeholder="请输入手机号" />
-			<view class="tips">未注册的手机号验证后自动创建账号</view>
+			<input class="login-page__input u-border-bottom" type="number" v-model="mobile" placeholder="请输入手机号" />
+			<view class="login-page__tips">未注册的手机号验证后自动创建账号</view>
 
-			
-			<view style="display: flex;">
-				<view style="width: 50%;">
-					<input style="height: 100rpx;"  class="u-border-bottom" type="number" v-model="captcha" placeholder="请输入验证码" />
+			<view class="login-page__captcha-row">
+				<view class="login-page__captcha-col">
+					<input class="login-page__input login-page__input--captcha u-border-bottom" type="number" v-model="captcha" placeholder="请输入验证码" />
 				</view>
-				<view style="width: 50%;">
-					<button style="height: 100rpx;" @tap="getCaptcha" :style="[captchaStyle]" class="getCaptcha">
+				<view class="login-page__captcha-col">
+					<button
+						class="login-page__btn login-page__btn--captcha"
+						:class="{ 'login-page__btn--active': isCaptchaBtnActive }"
+						@tap="getCaptcha"
+					>
 						{{captchaText}}
 						<uv-code :seconds="seconds" @end="endCaptcha" @start="startCaptcha" ref="uCode" @change="changeCapcha"></uv-code>
-					<!-- 	<u-verification-code :seconds="seconds" @end="endCaptcha" @change="changeCapcha" @start="startCaptcha" ref="uCode" >
-							
-						</u-verification-code> -->
 					</button>
 				</view>
 			</view>
 			
-			<button @tap="submit" style="color:#fff;background-color: #f9ae3d;" type="primary" class="login">登录</button>
+			<button @tap="submit" type="primary" class="login-page__btn login-page__btn--submit login-page__btn--active">登录</button>
 			
 		</view>
-		<view class="buttom">
-			<view class="loginType">
+		<view class="login-page__footer">
+			<view class="login-page__oauth">
 				<!-- #ifdef MP-WEIXIN -->
-				<button type="primary" size="default" class="login-btn" open-type="getPhoneNumber" @getphonenumber="loginForWechatMini">
-				<!-- 	<image src="/static/images/mine/wechat.png"></image> -->
+				<button type="primary" size="default" class="login-page__wechat-btn" open-type="getPhoneNumber" @getphonenumber="loginForWechatMini">
 					手机号快捷登录
 				</button>
 				<!-- #endif -->
 			</view>
-			<view class="hint">
-			<!-- 	<label class="label"> -->
+			<view class="login-page__agreement">
 					<radio value="isChecked" @tap.stop="onChange" />
 					我已经阅读并遵守
-					<text class="link" @tap="serv(29,'用户协议')">《用户协议》</text>与
-						<text class="link"  @tap="serv(30,'隐私政策')">《隐私政策》</text>
-			<!-- 	</label> -->
+					<text class="login-page__link" @tap="serv(29,'用户协议')">《用户协议》</text>与
+						<text class="login-page__link" @tap="serv(30,'隐私政策')">《隐私政策》</text>
 			</view>
 		</view>
 		<uv-toast ref="uToast"></uv-toast>
@@ -57,10 +53,10 @@
 </template>
 
 <script setup>
-import {
+import {
   ref,
-  computed
-} from 'vue'
+  computed
+} from 'vue'
 import { onLoad,onShow } from '@dcloudio/uni-app'
 import { useMainStore } from '@/store/store'
 import {
@@ -73,7 +69,7 @@ import * as util  from '@/utils/util'
 import { mobile as testMobible } from '@/uni_modules/uv-ui-tools/libs/function/test'
 const main = useMainStore()
 const title = ref('登录')
-const mobile = ref('')
+const mobile = ref('')
 const captcha = ref('')
 const captchaText = ref('获取验证码')	
 const password = ref('')
@@ -83,13 +79,8 @@ const openid = ref(main.openid)
 const uToast = ref()
 const uCode = ref()
 
-const captchaStyle = computed(() => {
-  let style = {};
-  if(mobile.value && captchaText.value == '获取验证码') {
-  	style.color = "#fff";
-  	style.backgroundColor = '#f9ae3d';
-  }
-  return style;
+const isCaptchaBtnActive = computed(() => {
+	return Boolean(mobile.value) && captchaText.value === '获取验证码';
 });
 
 onShow(() => {
@@ -99,7 +90,7 @@ onShow(() => {
 		wechatMiniLogin();
 	}
 	
-	// #endif
+	// #endif
 })
 
 
@@ -115,7 +106,7 @@ const wechatMiniLogin = () => {
 			console.log('data.openId001:',data.openId)
 			main.SET_OPENID(data.openId)
 			openid.value = data.openId
-		}
+		}
 	});
 }
 
@@ -255,101 +246,125 @@ const onChange = () => {
 </script>
 
 <style lang="scss" scoped>
-.wrap {
-	background-color: #ffffff;
-	font-size: 28rpx;
+$login-content-width: 600rpx;
+$login-title-size: 60rpx;
+$login-title-margin-bottom: 100rpx;
+$login-input-height: 100rpx;
+$login-btn-font-size: 30rpx;
+$login-btn-padding-y: 12rpx;
+$login-submit-margin-top: 40rpx;
+$login-oauth-padding: 80rpx;
+$login-wechat-btn-bg: #1aad19;
+$login-wechat-icon-width: 36rpx;
+$login-wechat-icon-height: 30rpx;
+$login-agreement-font-size: 20rpx;
+$login-agreement-padding-y: 20rpx;
+$login-agreement-padding-x: 40rpx;
+
+.login-page {
+	--login-content-width: #{$login-content-width};
+	--login-input-height: #{$login-input-height};
+	--login-btn-font-size: #{$login-btn-font-size};
+
+	background-color: $text-color-white;
+	font-size: $font-size-base;
 	position: relative;
 	height: 100%;
-	.content {
-		width: 600rpx;
-		margin: 0 auto;
 
-		.title {
-			text-align: left;
-			font-size: 60rpx;
-			font-weight: 500;
-			margin-bottom: 100rpx;
-		}
-		input {
-			text-align: left;
-			margin-bottom: 10rpx;
-			padding-bottom: 6rpx;
-		}
-		.tips {
-			color: $uv-info;
-			margin-bottom: 60rpx;
-			margin-top: 8rpx;
-		}
-		.getCaptcha {
-			background-color: rgb(253, 243, 208);
-			color: $uv-tips-color;
-			border: none;
-			font-size: 30rpx;
-			padding: 12rpx 0;
-			
-			&::after {
-				border: none;
-			}
-		}
-		.login {
-			background-color: rgb(253, 243, 208);
-			color: $uv-tips-color;
-			border: none;
-			font-size: 30rpx;
-			padding: 12rpx 0;
-			margin-top: 40rpx;
-			&::after {
-				border: none;
-			}
-		}
-		.alternative {
-			color: $uv-tips-color;
-			display: flex;
-			justify-content: space-between;
-			margin-top: 30rpx;
+	&__form {
+		width: var(--login-content-width);
+		margin: 0 auto;
+	}
+
+	&__title {
+		text-align: left;
+		font-size: $login-title-size;
+		font-weight: 500;
+		margin-bottom: $login-title-margin-bottom;
+	}
+
+	&__input {
+		text-align: left;
+		margin-bottom: 10rpx;
+		padding-bottom: 6rpx;
+
+		&--captcha {
+			height: var(--login-input-height);
 		}
 	}
-	.buttom {
-		//position: absolute;
+
+	&__tips {
+		color: $uv-info;
+		margin: 8rpx 0 60rpx;
+	}
+
+	&__captcha-row {
+		display: flex;
+	}
+
+	&__captcha-col {
+		width: 50%;
+	}
+
+	&__btn {
+		height: var(--login-input-height);
+		border: none;
+		font-size: var(--login-btn-font-size);
+		padding: $login-btn-padding-y 0;
+		background-color: $uv-warning-light;
+		color: $uv-tips-color;
+
+		&::after {
+			border: none;
+		}
+
+		&--active {
+			background-color: $uv-warning;
+			color: $text-color-white;
+		}
+
+		&--submit {
+			margin-top: $login-submit-margin-top;
+		}
+	}
+
+	&__footer {
 		bottom: 0;
-		//display: flex;
-		//flex-direction: column;
-		//align-items: center;
-		//justify-content: center;
-		.loginType {
-			padding: 80rpx;
-			//justify-content:space-between;
-			
-			.login-btn {
-				background-color: #1aad19!important;
-				width: 100%;
-				border-radius: 50rem !important;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				padding: 10rpx 0;
-				text-align: center;
-				image {
-					width: 36rpx;
-					height: 30rpx;
-					margin-right: 10rpx;
-					vertical-align: middle;
-				}
-			}
-		}
-		
-		.hint {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			padding: 20rpx 40rpx;
-			font-size: 20rpx;
-			color: $uv-tips-color;
-			
-			.link {
-				color: $uv-warning;
-			}
+	}
+
+	&__oauth {
+		padding: $login-oauth-padding;
+	}
+
+	&__wechat-btn {
+		width: 100%;
+		border-radius: 50rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 10rpx 0;
+		text-align: center;
+		background-color: $login-wechat-btn-bg !important;
+
+		image {
+			width: $login-wechat-icon-width;
+			height: $login-wechat-icon-height;
+			margin-right: 10rpx;
+			vertical-align: middle;
 		}
 	}
+
+	&__agreement {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: $login-agreement-padding-y $login-agreement-padding-x;
+		font-size: $login-agreement-font-size;
+		color: $uv-tips-color;
+	}
+
+	&__link {
+		color: $uv-warning;
+	}
 }
 </style>
diff --git a/yshop-drink-uniapp-vue3/pages/components/pages/login/logout.vue b/yshop-drink-uniapp-vue3/pages/components/pages/login/logout.vue
index 722d91a..e8afe2a 100644
--- a/yshop-drink-uniapp-vue3/pages/components/pages/login/logout.vue
+++ b/yshop-drink-uniapp-vue3/pages/components/pages/login/logout.vue
@@ -6,8 +6,8 @@
 		  left-arrow
 		  @leftClick="$onClickLeft"
 		/>
-		<view class="top">
-			<button type="primary" size="default" class="login-btn" @click="logout">
+		<view class="logout-page">
+			<button type="primary" size="default" class="logout-page__btn" @click="logout">
 				确定退出登录
 			</button>
 			<uv-toast ref="uToast"></uv-toast>
@@ -45,12 +45,12 @@ const logout = () => {
 </script>
 
 <style lang="scss" scoped>
-	
-	.top {
-		display: flex; 
-		height: 100%;
-	}
-	button{
-		 margin: auto;
+.logout-page {
+	display: flex;
+	height: 100%;
+
+	&__btn {
+		margin: auto;
 	}
+}
 </style>
diff --git a/yshop-drink-uniapp-vue3/pages/components/pages/mine/content.vue b/yshop-drink-uniapp-vue3/pages/components/pages/mine/content.vue
index 5ee00cc..ec43e3e 100644
--- a/yshop-drink-uniapp-vue3/pages/components/pages/mine/content.vue
+++ b/yshop-drink-uniapp-vue3/pages/components/pages/mine/content.vue
@@ -1,48 +1,53 @@
-<template>
-	<layout>
-		<uv-navbar
-		  :fixed="false"
-		  :title="title"
-		  left-arrow
-		  @leftClick="$onClickLeft"
-		/>
-		<view class="bg-white p-2">
-			<rich-text :nodes="content"></rich-text>
-		</view>
-	</layout>
-</template>
-
-<script setup>
+<template>
+	<layout>
+		<uv-navbar
+		  :fixed="false"
+		  :title="title"
+		  left-arrow
+		  @leftClick="$onClickLeft"
+		/>
+		<view class="mine-content">
+			<rich-text :nodes="content"></rich-text>
+		</view>
+	</layout>
+</template>
+
+<script setup>
 import {
   ref
-} from 'vue'
-import { onLoad,onShow} from '@dcloudio/uni-app'
-import {
+} from 'vue'
+import { onLoad,onShow} from '@dcloudio/uni-app'
+import {
   mineServiceContent
-} from '@/api/user'
-
-
-const title = ref('内容')
-const content = ref('')
-
-onLoad((option) => {
-	if (option.name) {
-		title.value = option.name
-	}
-	if (option.id) {
-		getContent(option.id);
-	}
-})	
-const getContent = async(id) => {
-	let data = await mineServiceContent({id:id});
-	if (data) {
-		content.value = data.content;
-	}
-}
-
-
-</script>
-
-<style lang="scss" scoped>
-	
-</style>
+} from '@/api/user'
+
+
+const title = ref('内容')
+const content = ref('')
+
+onLoad((option) => {
+	if (option.name) {
+		title.value = option.name
+	}
+	if (option.id) {
+		getContent(option.id);
+	}
+})	
+const getContent = async(id) => {
+	let data = await mineServiceContent({id:id});
+	if (data) {
+		content.value = data.content;
+	}
+}
+
+
+</script>
+
+<style lang="scss" scoped>
+$mine-content-padding: $spacing-row-base;
+
+.mine-content {
+	padding: $mine-content-padding;
+	background-color: $text-color-white;
+}
+</style>
diff --git a/yshop-drink-uniapp-vue3/pages/components/pages/mine/userinfo.vue b/yshop-drink-uniapp-vue3/pages/components/pages/mine/userinfo.vue
index 277d1ad..8890221 100644
--- a/yshop-drink-uniapp-vue3/pages/components/pages/mine/userinfo.vue
+++ b/yshop-drink-uniapp-vue3/pages/components/pages/mine/userinfo.vue
@@ -5,19 +5,19 @@
 	  left-arrow
 	  @leftClick="$onClickLeft"
 	/>
-	<view class="container d-flex flex-column">
-		<view class="flex-fill form">
+	<view class="userinfo-page d-flex flex-column">
+		<view class="flex-fill userinfo-page__form">
 			<list-cell :hover="false">
-				<view class="form-input w-100 d-flex align-items-center">
-					<view class="label">头像</view>
-					<view class="input flex-fill">
-						<view class="form-input w-100 d-flex align-items-center"  style="position: relative;">
-							<view class="flex user-box align-items-center">
+				<view class="userinfo-page__field w-100 d-flex align-items-center">
+					<view class="userinfo-page__label">头像</view>
+					<view class="userinfo-page__input flex-fill">
+						<view class="userinfo-page__field userinfo-page__field--relative w-100 d-flex align-items-center">
+							<view class="userinfo-page__avatar-row d-flex align-items-center">
 								<view class="mr-1">
 									<uv-avatar :src="member.avatar" size="60"></uv-avatar>
 								</view>
-								<view v-if="!member.avatar" class="flex-1" style="right:0;height: 60rpx;">
-									<button style="background-color: #09b4f1;color:#fff;" size='mini' open-type="chooseAvatar" @chooseavatar="chooseavatar" type="success">更改头像</button>
+								<view v-if="!member.avatar" class="flex-1 userinfo-page__change-avatar">
+									<button size='mini' open-type="chooseAvatar" @chooseavatar="chooseavatar" type="success">更改头像</button>
 								</view>
 							</view>
 						</view>
@@ -26,37 +26,45 @@
 				
 			</list-cell>
 			<list-cell :hover="false">
-				<view class="form-input w-100 d-flex align-items-center">
-					<view class="label">昵称</view>
-					<view class="input flex-fill">
+				<view class="userinfo-page__field w-100 d-flex align-items-center">
+					<view class="userinfo-page__label">昵称</view>
+					<view class="userinfo-page__input flex-fill">
 						<input type="nickname" placeholder="请填写昵称" placeholder-class="text-color-assist font-size-base" 
 						v-model="member.nickname">
 					</view>
 				</view>
 			</list-cell>
 			<list-cell :hover="false">
-				<view class="form-input w-100 d-flex align-items-center" style="position: relative;">
-					<view class="label">手机号码</view>
-					<view class="input flex-fill">
+				<view class="userinfo-page__field userinfo-page__field--relative w-100 d-flex align-items-center">
+					<view class="userinfo-page__label">手机号码</view>
+					<view class="userinfo-page__input flex-fill">
 						<input type="text" v-model="member.mobile" disabled>
 					</view>
 				</view>
 			</list-cell>
 			<list-cell :hover="false">
-				<view class="form-input w-100 d-flex align-items-center">
-					<view class="label">性别</view>
-					<view class="input flex-fill">
-						<view class="radio-group">
-							<view class="radio" :class="{'checked': member.gender == '0'}" style="margin-right: 10rpx;" @tap="member.gender=0">先生</view>
-							<view class="radio" :class="{'checked': member.gender == '1'}" @tap="member.gender=1">女士</view>
+				<view class="userinfo-page__field w-100 d-flex align-items-center">
+					<view class="userinfo-page__label">性别</view>
+					<view class="userinfo-page__input flex-fill">
+						<view class="userinfo-page__radio-group">
+							<view
+								class="userinfo-page__radio"
+								:class="{ 'userinfo-page__radio--checked': member.gender == '0' }"
+								@tap="member.gender=0"
+							>先生</view>
+							<view
+								class="userinfo-page__radio"
+								:class="{ 'userinfo-page__radio--checked': member.gender == '1' }"
+								@tap="member.gender=1"
+							>女士</view>
 						</view>
 					</view>
 				</view>
 			</list-cell>
 			<list-cell :hover="false" :arrow="!member.birthday">
-				<view class="form-input w-100 d-flex align-items-center">
-					<view class="label">生日</view>
-					<view class="input flex-fill">
+				<view class="userinfo-page__field w-100 d-flex align-items-center">
+					<view class="userinfo-page__label">生日</view>
+					<view class="userinfo-page__input flex-fill">
 						<picker mode="date" :value="member.birthday" :start="startDate" :end="endDate" @change="handleDateChange">
 							{{member.birthday ? member.birthday : '无'}}
 						</picker>
@@ -64,16 +72,16 @@
 				</view>
 			</list-cell>
 			<list-cell :hover="false" last>
-				<view class="form-input w-100 d-flex align-items-center">
-					<view class="label">加入时间</view>
-					<view class="input flex-fill">
+				<view class="userinfo-page__field w-100 d-flex align-items-center">
+					<view class="userinfo-page__label">加入时间</view>
+					<view class="userinfo-page__input flex-fill">
 						<input type="text" v-model="member.createTime" disabled>
 					</view>
 				</view>
 			</list-cell>
 		</view>
-		<view class="btn-box d-flex align-items-center  just-content-center">
-			<button type="primary" class="save-btn" @tap="save">保存</button>
+		<view class="userinfo-page__actions d-flex align-items-center just-content-center">
+			<button type="primary" class="userinfo-page__save-btn" @tap="save">保存</button>
 		</view>
 
 	</view>
@@ -177,55 +185,87 @@ const save = async() => {
 </script>
 
 <style lang="scss" scoped>
+// 用户设置页局部 token（与 uni.scss 全局变量配合）
+$userinfo-padding-y: 20rpx;
+$userinfo-padding-x: $spacing-row-lg;
+$userinfo-form-radius: 8rpx;
+$userinfo-label-width: 160rpx;
+$userinfo-radio-gap: 10rpx;
+$userinfo-radio-padding-y: 10rpx;
+$userinfo-radio-padding-x: 30rpx;
+$userinfo-radio-border-width: 2rpx;
+$userinfo-avatar-btn-height: 60rpx;
+$userinfo-save-btn-width: 90%;
+$userinfo-save-btn-radius: 50rem;
+
 page {
 	height: 100%;
 }
 
-.container {
-	padding: 20rpx 30rpx;
-}
+.userinfo-page {
+	--userinfo-padding-y: #{$userinfo-padding-y};
+	--userinfo-padding-x: #{$userinfo-padding-x};
+	--userinfo-label-width: #{$userinfo-label-width};
+	--userinfo-radio-gap: #{$userinfo-radio-gap};
+	--userinfo-avatar-btn-height: #{$userinfo-avatar-btn-height};
+	--userinfo-save-btn-width: #{$userinfo-save-btn-width};
 
-.form {
-	border-radius: 8rpx;
-}
+	padding: var(--userinfo-padding-y) var(--userinfo-padding-x);
 
-.form-input {
-	.label {
-		width: 160rpx;
+	&__form {
+		border-radius: $userinfo-form-radius;
+	}
+
+	&__field {
+		&--relative {
+			position: relative;
+		}
+	}
+
+	&__label {
+		width: var(--userinfo-label-width);
 		font-size: $font-size-base;
 		color: $text-color-base;
 	}
-	
-	.input {
-	}
-	
-	.radio-group {
+
+	&__radio-group {
 		display: flex;
 		justify-content: flex-start;
-		
-		.radio {
-			padding: 10rpx 30rpx;
-			border-radius: 6rpx;
-			border: 2rpx solid $text-color-assist;
-			color: $text-color-assist;
-			font-size: $font-size-base;
-			
-			&.checked {
-				background-color: $color-primary;
-				color: $text-color-white;
-				border: 2rpx solid $color-primary;
-			}
+		gap: var(--userinfo-radio-gap);
+	}
+
+	&__radio {
+		padding: $userinfo-radio-padding-y $userinfo-radio-padding-x;
+		border-radius: $border-radius-base;
+		border: $userinfo-radio-border-width solid $text-color-assist;
+		color: $text-color-assist;
+		font-size: $font-size-base;
+
+		&--checked {
+			background-color: $color-primary;
+			color: $text-color-white;
+			border-color: $color-primary;
+		}
+	}
+
+	&__actions {
+		height: calc((100vh - var(--userinfo-padding-y) * 2) / 2);
+	}
+
+	&__save-btn {
+		width: var(--userinfo-save-btn-width);
+		border-radius: $userinfo-save-btn-radius !important;
+		font-size: $font-size-lg;
+	}
+
+	&__change-avatar {
+		right: 0;
+		height: var(--userinfo-avatar-btn-height);
+
+		button {
+			background-color: $color-primary;
+			color: $text-color-white;
 		}
 	}
 }
-
-.btn-box {
-	height: calc((100vh - 40rpx) / 2);
-}
-.save-btn {
-	width: 90%;
-	border-radius: 50rem !important;
-	font-size: $font-size-lg;
-}
-
 </style>
diff --git a/yshop-drink-uniapp-vue3/pages/components/pages/orders/detail.vue b/yshop-drink-uniapp-vue3/pages/components/pages/orders/detail.vue
index c0a469e..2f99466 100644
--- a/yshop-drink-uniapp-vue3/pages/components/pages/orders/detail.vue
+++ b/yshop-drink-uniapp-vue3/pages/components/pages/orders/detail.vue
@@ -5,10 +5,10 @@
 	  left-arrow
 	  @leftClick="$onClickLeft"
 	/>
-	<view class="container" style="padding:20rpx;">
-		<view style="padding-bottom: 100rpx;">
+	<view class="container order-detail-page">
+		<view class="order-detail-page__body">
 			<view class="bg-white">
-				<view class="section">
+				<view class="order-detail-section">
 					<!-- store info begin -->
 					<list-cell :hover="false">
 						<view class="w-100 d-flex align-items-center">
@@ -16,8 +16,8 @@
 								<view class="w-100 font-size-lg text-color-base text-truncate">{{ order.shop.name }}</view>
 							</view>
 							<view class="d-flex justify-content-end align-items-center w-40">
-								<view class="iconfont-yshop icon-mobile"  @click="makePhoneCall(order.shop)" style="font-size: 45rpx;margin-right: 40rpx;"></view>
-								<view class="iconfont-yshop icon-location"  @click="openLocation(order.shop)" style="font-size: 45rpx;"></view>
+								<view class="iconfont-yshop icon-mobile order-detail-page__shop-icon" @click="makePhoneCall(order.shop)"></view>
+								<view class="iconfont-yshop icon-location order-detail-page__shop-icon order-detail-page__shop-icon--last" @click="openLocation(order.shop)"></view>
 							</view>
 						</view>
 					</list-cell>
@@ -25,50 +25,50 @@
 					<list-cell :hover="false" padding="50rpx 30rpx">
 						<view class="w-100 d-flex flex-column">
 							<view class="d-flex align-items-center just-content-center">
-								<view class="sort-num">{{ order.paid == 1 ? order.numberId : '--' }}</view>
+								<view class="order-detail-page__sort-num">{{ order.paid == 1 ? order.numberId : '--' }}</view>
 							</view>
 							<!-- steps begin -->
 							<view class="d-flex just-content-center">
-								<view class="steps d-flex flex-column w-80">
-									<view class="steps__img-column">
-										<view class="steps__img-column-item">
+								<view class="order-detail-steps d-flex flex-column w-80">
+									<view class="order-detail-steps__icons">
+										<view class="order-detail-steps__icon-item">
 											<view class="iconfont-yshop icon-lamp"></view>
 										</view>
-										<view class="steps__img-column-item">
+										<view class="order-detail-steps__icon-item">
 											<view class="iconfont-yshop icon-daojishi" v-if="{active: order.paid == 1 && order.status == 0}"></view>
-											<view class="iconfont-yshop icon-daojishi unactive" v-else></view>
+											<view class="iconfont-yshop icon-daojishi order-detail-steps__icon--inactive" v-else></view>
 										</view>
-										<view class="steps__img-column-item" v-if="order.orderType == 'takeout'">
+										<view class="order-detail-steps__icon-item" v-if="order.orderType == 'takeout'">
 											<view class="iconfont-yshop icon-takeout" v-if="order.status == 1"></view>
-											<view class="iconfont-yshop icon-takeout unactive" v-else></view>
+											<view class="iconfont-yshop icon-takeout order-detail-steps__icon--inactive" v-else></view>
 										</view>
-										<view class="steps__img-column-item" >
+										<view class="order-detail-steps__icon-item">
 											<view class="iconfont-yshop icon-doorbell" v-if="order.status >= 2"></view>
-											<view class="iconfont-yshop icon-doorbell unactive" v-else></view>
+											<view class="iconfont-yshop icon-doorbell order-detail-steps__icon--inactive" v-else></view>
 										</view>
 									</view>
-									<view class="steps__text-column">
-										<view class="steps__text-column-item active">
-											<view class="steps__column-item-line bg-transparent"></view>
-											<view class="steps__text-column-item-text">已下单</view>
-											<view class="steps__column-item-line"></view>
+									<view class="order-detail-steps__labels">
+										<view class="order-detail-steps__label order-detail-steps__label--active">
+											<view class="order-detail-steps__line order-detail-steps__line--transparent"></view>
+											<view class="order-detail-steps__text">已下单</view>
+											<view class="order-detail-steps__line"></view>
 										</view>
-										<view class="steps__text-column-item activ"  :class="{active: order.paid == 1}">
-											<view class="steps__column-item-line"></view>
-											<view class="steps__text-column-item-text">制作中</view>
-											<view class="steps__column-item-line"></view>
+										<view class="order-detail-steps__label" :class="{'order-detail-steps__label--active': order.paid == 1}">
+											<view class="order-detail-steps__line"></view>
+											<view class="order-detail-steps__text">制作中</view>
+											<view class="order-detail-steps__line"></view>
 										</view>
-										<view class="steps__text-column-item" :class="{active: order.status == 1}" v-if="order.orderType == 'takeout'">
-											<view class="steps__column-item-line"></view>
-											<view class="steps__text-column-item-text">配送中</view>
-											<view class="steps__column-item-line bg-transparent"></view>
+										<view class="order-detail-steps__label" :class="{'order-detail-steps__label--active': order.status == 1}" v-if="order.orderType == 'takeout'">
+											<view class="order-detail-steps__line"></view>
+											<view class="order-detail-steps__text">配送中</view>
+											<view class="order-detail-steps__line order-detail-steps__line--transparent"></view>
 										</view>
-										<view class="steps__text-column-item" :class="{active: order.status >= 2}">
-											<view class="steps__column-item-line"></view>
-											<view class="steps__text-column-item-text">
+										<view class="order-detail-steps__label" :class="{'order-detail-steps__label--active': order.status >= 2}">
+											<view class="order-detail-steps__line"></view>
+											<view class="order-detail-steps__text">
 												{{ order.orderType == 'takeout' ? '已送达' : '请取餐' }}
 											</view>
-											<view class="steps__column-item-line bg-transparent"></view>
+											<view class="order-detail-steps__line order-detail-steps__line--transparent"></view>
 										</view>
 									</view>
 								</view>
@@ -78,7 +78,7 @@
 								您前面还有 <text class="text-color-primary mr-10 ml-10">{{order.preNum}}</text> 单待制作
 							</view>
 							<!-- goods begin -->
-							<view class="w-100 d-flex flex-column position-relative mt-30" style="margin-bottom: -40rpx;">
+							<view class="w-100 d-flex flex-column position-relative mt-30 order-detail-page__goods-preview">
 								<view class="w-100 d-flex align-items-center mb-40" v-for="(good, index) in order.products" :key="index">
 									<view class="d-flex flex-column w-60 overflow-hidden">
 										<view class="font-size-lg text-color-base mb-10 text-truncate">{{ good.title }}</view>
@@ -94,12 +94,12 @@
 						</view>
 					</list-cell>
 				</view>
-				<view class="section">
+				<view class="order-detail-section">
 					<!-- goods begin -->
 					<list-cell :hover="false" padding="30rpx 30rpx">
 						<view class="w-100 d-flex flex-column position-relative">
 							<view class="w-100 d-flex align-items-center mb-40" v-for="(good, index) in order.cartInfo" :key="index">
-								<image :src="good.image" mode="aspectFill" class="image"></image>
+								<image :src="good.image" mode="aspectFill" class="order-detail-page__thumb"></image>
 								<view class="d-flex flex-column w-60 overflow-hidden">
 									<view class="font-size-lg text-color-base mb-10 text-truncate">{{ good.title }}</view>
 									<view class="font-size-sm text-color-assist text-truncate">{{ good.spec }}</view>
@@ -115,23 +115,23 @@
 					<!-- payment and amount begin -->
 					<list-cell :hover="false" padding="50rpx 30rpx">
 						<view class="w-100 d-flex flex-column">
-							<view class="pay-cell">
+							<view class="order-detail-pay-cell">
 								<view>支付方式</view>
 								<view class="font-weight-bold">{{ order.statusDto.payType }}</view>
 							</view>
-							<view class="pay-cell">
+							<view class="order-detail-pay-cell">
 								<view>订单金额</view>
 								<view class="font-weight-bold">￥{{ order.totalPrice }}</view>
 							</view>
-							<view class="pay-cell" v-if="order.orderType == 'takeout'">
+							<view class="order-detail-pay-cell" v-if="order.orderType == 'takeout'">
 								<view>配送费</view>
 								<view class="font-weight-bold">￥{{ order.payPostage }}</view>
 							</view>
-							<view class="pay-cell">
+							<view class="order-detail-pay-cell">
 								<view>优惠金额</view>
 								<view class="font-weight-bold">￥{{ order.couponPrice }}</view>
 							</view>
-							<view class="pay-cell">
+							<view class="order-detail-pay-cell">
 								<view>实付金额</view>
 								<view class="font-weight-bold">￥{{ order.payPrice }}</view>
 							</view>
@@ -139,42 +139,42 @@
 					</list-cell>
 					<!-- payment and amount end -->
 				</view>
-				<view class="section">
+				<view class="order-detail-section">
 					<!-- order info begin -->
 					<list-cell :hover="false" padding="50rpx 30rpx">
 						<view class="w-100 d-flex flex-column">
-							<view class="pay-cell">
+							<view class="order-detail-pay-cell">
 								<view>下单时间</view>
 								<view class="font-weight-bold">{{ formatDateTime(order.createTime )}}</view>
 							</view>
-							<view class="pay-cell">
+							<view class="order-detail-pay-cell">
 								<view>下单门店</view>
 								<view class="font-weight-bold">{{ order.shop.name }}</view>
 							</view>
-							<view class="pay-cell">
+							<view class="order-detail-pay-cell">
 								<view>订单号</view>
 								<view class="font-weight-bold">{{ order.id }}</view>
 							</view>
 						</view>
 					</list-cell>
-					<!-- order info end --> 
+					<!-- order info end -->
 				</view>
 				<!-- order other info begin -->
 				<list-cell :hover="false" padding="50rpx 30rpx 20rpx" last>
 					<view class="w-100 d-flex flex-column">
-						<view class="pay-cell">
+						<view class="order-detail-pay-cell">
 							<view>享用方式</view>
 							<view class="font-weight-bold">{{order.orderType == 'takein' ? '自取' : '外卖'}}</view>
 						</view>
-						<view class="pay-cell">
+						<view class="order-detail-pay-cell">
 							<view>取餐时间</view>
 							<view class="font-weight-bold">{{order.getTime ? formatDateTime(order.getTime) : '立即取餐'}}</view>
 						</view>
-						<view class="pay-cell">
+						<view class="order-detail-pay-cell">
 							<view>制作完成时间</view>
 							<view class="font-weight-bold">{{ order.deliveryTime ? formatDateTime(order.deliveryTime) : '无' }}</view>
 						</view>
-						<view class="pay-cell">
+						<view class="order-detail-pay-cell">
 							<view>备注</view>
 							<view class="font-weight-bold">{{ order.remark ? order.remark : '无' }}</view>
 						</view>
@@ -255,158 +255,179 @@ const refund = (order) => {
 </script>
 
 <style lang="scss" scoped>
-	.image {
-		width: 120rpx;
-		height: 120rpx;
-		margin-right: 30rpx;
-		border-radius: 8rpx;
-	}
+$order-detail-padding: $spacing-row-base;
+$order-detail-body-padding-bottom: 100rpx;
+$order-detail-thumb-size: 120rpx;
+$order-detail-thumb-radius: 8rpx;
+$order-detail-pay-cell-gap: 40rpx;
+$order-detail-sort-num-size: 64rpx;
+$order-detail-section-notch: 30rpx;
+$order-detail-section-notch-offset: 15rpx;
+$order-detail-steps-icon-size: 60rpx;
+$order-detail-steps-img-size: 80rpx;
+$order-detail-steps-margin-y: 30rpx;
+$order-detail-steps-label-gap: $spacing-col-sm;
+$order-detail-shop-icon-size: 45rpx;
+$order-detail-shop-icon-gap: 40rpx;
+$order-detail-goods-offset: -40rpx;
+$order-detail-steps-line-height: 2rpx;
 
-
-.pay-cell {
-	width: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	font-size: $font-size-base;
-	color: $text-color-base;
-	margin-bottom: 40rpx;
-
-	&:nth-last-child(1) {
-		margin-bottom: 0;
-	}
+@mixin order-detail-section-notch {
+	content: '';
+	position: absolute;
+	bottom: calc(-1 * #{$order-detail-section-notch-offset});
+	z-index: 10;
+	width: $order-detail-section-notch;
+	height: $order-detail-section-notch;
+	background-color: $bg-color;
+	border-radius: $border-radius-circle;
 }
 
-
-
 /* #ifdef H5 */
-	page {
-		min-height: 100%;
-		background-color: $bg-color;
-	}
-	/* #endif */
-	.order-box {
-		padding: 20rpx;
-		/* #ifdef H5 */
-		margin-bottom: 100rpx;
-		/* #endif */
-	}
-	
-	.drinks-img {
-		width: 260rpx;
-		height: 260rpx;
-	}
-	
-	.tips {
-		margin: 60rpx 0 80rpx;
-		line-height: 48rpx;
+page {
+	min-height: 100%;
+	background-color: $bg-color;
+}
+/* #endif */
+
+.order-detail-page {
+	padding: $order-detail-padding;
+	--order-detail-thumb-size: #{$order-detail-thumb-size};
+
+	&__body {
+		padding-bottom: $order-detail-body-padding-bottom;
 	}
 
-	
-	@mixin arch {
-		content: "";
-		position: absolute;
-		background-color: $bg-color;
-		width: 30rpx;
-		height: 30rpx;
-		bottom: -15rpx;
-		z-index: 10;
-		border-radius: 100%;
+	&__thumb {
+		flex-shrink: 0;
+		width: var(--order-detail-thumb-size);
+		height: var(--order-detail-thumb-size);
+		margin-right: $spacing-row-lg;
+		border-radius: $order-detail-thumb-radius;
 	}
-	
-	.section {
-		position: relative;
-		
-		&::before {
-			@include arch;
-			left: -15rpx;
-		}
-		
-		&::after {
-			@include arch;
-			right: -15rpx;
-		}
-	}
-	
-	.pay-cell {
-		width: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		font-size: $font-size-base;
-		color: $text-color-base;
-		margin-bottom: 40rpx;
 
-		&:nth-last-child(1) {
-			margin-bottom: 0;
-		}
-	}
-	
-	.sort-num {
-		font-size: 64rpx;
+	&__sort-num {
+		font-size: $order-detail-sort-num-size;
 		font-weight: bold;
 		color: $text-color-base;
 		line-height: 2;
 	}
-	
-	.steps__img-column {
-		display: flex;
-		margin: 30rpx 0;
-		
-		.steps__img-column-item {
-			flex: 1;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			
-			image {
-				width: 80rpx;
-				height: 80rpx;
-			}
-			.unactive {
-				color: #919293;
-			}
+
+	&__shop-icon {
+		font-size: $order-detail-shop-icon-size;
+		color: $color-primary;
+
+		&--last {
+			margin-right: 0;
+		}
+
+		&:not(&--last) {
+			margin-right: $order-detail-shop-icon-gap;
 		}
 	}
-	
-	.steps__text-column {
-		display: flex;
-		margin-bottom: 40rpx;
-		
-		.steps__text-column-item {
-			flex: 1;
-			display: inline-flex;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			font-size: $font-size-base;
-			color: $text-color-assist;
-			
-			&.active {
-				color: $text-color-base;
-				font-weight: bold;
-				
-				.steps__column-item-line {
-					background-color: $text-color-base;
-				}
-			}
-			
-			.steps__column-item-line{
-				flex: 1;
-				height: 2rpx;
-				background-color: #919293;
-				transform: scaleY(0.5);
-			}
-			
-			.steps__text-column-item-text {
-				margin: 0 8px;
-			}
-		}
-	}
-	.icon-lamp, .icon-daojishi, .icon-takeout, .icon-doorbell{
-		font-size: 60rpx;
+
+	&__goods-preview {
+		margin-bottom: $order-detail-goods-offset;
 	}
+
 	.iconfont-yshop {
-		color: #09b4f1;
+		color: $color-primary;
 	}
+}
+
+.order-detail-section {
+	position: relative;
+
+	&::before {
+		@include order-detail-section-notch;
+		left: calc(-1 * #{$order-detail-section-notch-offset});
+	}
+
+	&::after {
+		@include order-detail-section-notch;
+		right: calc(-1 * #{$order-detail-section-notch-offset});
+	}
+}
+
+.order-detail-pay-cell {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	margin-bottom: $order-detail-pay-cell-gap;
+	font-size: $font-size-base;
+	color: $text-color-base;
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+.order-detail-steps {
+	&__icons {
+		display: flex;
+		margin: $order-detail-steps-margin-y 0;
+	}
+
+	&__icon-item {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		image {
+			width: $order-detail-steps-img-size;
+			height: $order-detail-steps-img-size;
+		}
+	}
+
+	&__icon--inactive {
+		color: $text-color-assist;
+	}
+
+	&__labels {
+		display: flex;
+		margin-bottom: $order-detail-pay-cell-gap;
+	}
+
+	&__label {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: $font-size-base;
+		color: $text-color-assist;
+
+		&--active {
+			font-weight: bold;
+			color: $text-color-base;
+
+			.order-detail-steps__line {
+				background-color: $text-color-base;
+			}
+		}
+	}
+
+	&__line {
+		flex: 1;
+		height: $order-detail-steps-line-height;
+		background-color: $text-color-assist;
+		transform: scaleY(0.5);
+
+		&--transparent {
+			background-color: transparent;
+		}
+	}
+
+	&__text {
+		margin: 0 $order-detail-steps-label-gap;
+	}
+
+	.icon-lamp,
+	.icon-daojishi,
+	.icon-takeout,
+	.icon-doorbell {
+		font-size: $order-detail-steps-icon-size;
+	}
+}
 </style>
diff --git a/yshop-drink-uniapp-vue3/pages/components/pages/orders/orders.vue b/yshop-drink-uniapp-vue3/pages/components/pages/orders/orders.vue
index 4427fa1..8a4cf29 100644
--- a/yshop-drink-uniapp-vue3/pages/components/pages/orders/orders.vue
+++ b/yshop-drink-uniapp-vue3/pages/components/pages/orders/orders.vue
@@ -5,16 +5,16 @@
 	  left-arrow
 	  @leftClick="$onClickLeft"
 	/>
-	<view class="container">
+	<view class="container orders-page">
 		<view class="bg-white">
 			<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
 		</view>
-		<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;">
-			<view class="order-item" v-for="(item, index) in orders" :key="index" style="margin-bottom: 30rpx;" @tap="detail(item.orderId)">
+		<view class="orders-page__list d-flex flex-column w-100">
+			<view class="orders-item" v-for="(item, index) in orders" :key="index" @tap="detail(item.orderId)">
 				<list-cell :hover="false">
 					<view class="w-100 d-flex align-items-center">
 						<view class="flex-fill d-flex flex-column">
-							<view class="font-size-lg text-color-base" style="margin-bottom: 20rpx;">
+							<view class="font-size-lg text-color-base orders-item__shop">
 								{{ item.shop.name }}
 							</view>
 							<view class="font-size-sm text-color-assist">取餐号：{{ item.numberId }}</view>
@@ -27,9 +27,9 @@
 				</list-cell>
 				<list-cell :hover="false" last>
 					<view class="w-100 d-flex flex-column">
-						<view class="w-100 text-truncate font-size-lg text-color-base" style="margin-bottom: 20rpx;">
-							<view class="flex mb-2" v-for="(good,index) in item.cartInfo" :key="index">  
-								<image :src="good.image" mode="aspectFill" class="image"></image>
+						<view class="w-100 text-truncate font-size-lg text-color-base orders-item__goods">
+							<view class="flex orders-item__goods-row mb-2" v-for="(good,index) in item.cartInfo" :key="index">
+								<image :src="good.image" mode="aspectFill" class="orders-item__thumb"></image>
 								<view class="flex flex-column">
 									<view class="font-size-medium mt-1 text-color-base">{{ good.title }}</view>
 									<view class="font-size-sm mt-1">{{ good.spec }}</view>
@@ -37,20 +37,24 @@
 								</view>
 							</view>
 						</view>
-						<view class="d-flex justify-content-between align-items-center" style="margin-bottom: 30rpx;">
+						<view class="d-flex justify-content-between align-items-center orders-item__meta">
 							<view class="font-size-sm text-color-assist">
 								{{formatDateTime(item.createTime) }}
 							</view>
 							<view class="d-flex font-size-sm text-color-base align-items-center">
-								<view style="margin-right: 10rpx;">共{{ goodsNum(item.cartInfo) }}件商品，实付</view>
+								<view class="orders-item__summary">共{{ goodsNum(item.cartInfo) }}件商品，实付</view>
 								<view class="font-size-lg">￥{{ item.payPrice }}</view>
 							</view>
 						</view>
-						<view class="d-flex align-items-center justify-content-end">
-							<view>
-								<button v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0" class="left-margin"  plain size="mini" @tap.stop="receive(item)">确认收到餐</button>
-								<button class="left-margin"  plain size="mini" @tap="detail(item.orderId)">订单详情</button>
-							</view>
+						<view class="d-flex align-items-center justify-content-end orders-item__actions">
+							<button
+								v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0"
+								class="orders-item__btn"
+								plain
+								size="mini"
+								@tap.stop="receive(item)"
+							>确认收到餐</button>
+							<button class="orders-item__btn" plain size="mini" @tap="detail(item.orderId)">订单详情</button>
 						</view>
 					</view>
 				</list-cell>
@@ -62,9 +66,9 @@
 
 
 <script setup>
-import {
+import {
   ref,
-  computed
+  computed
 } from 'vue'
 import { useMainStore } from '@/store/store'
 import { storeToRefs } from 'pinia'
@@ -72,7 +76,7 @@ import { onLoad,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
 import { formatDateTime,kmUnit } from '@/utils/util'
 import {
   orderGetOrders,
-  orderReceive
+  orderReceive
 } from '@/api/order'
 const main = useMainStore()
 const { isLogin } = storeToRefs(main)
@@ -161,13 +165,53 @@ const receive  = async(order) => {
 </script>
 
 <style lang="scss" scoped>
-	.left-margin {
-		margin-left: 10rpx;
+$orders-list-padding-x: $spacing-row-base;
+$orders-list-padding-bottom: 0;
+$orders-item-gap: $spacing-row-lg;
+$orders-section-gap: $spacing-row-base;
+$orders-btn-gap: $spacing-row-base;
+$orders-summary-gap: $spacing-row-base;
+$orders-thumb-size: 160rpx;
+$orders-thumb-radius: 8rpx;
+
+.orders-page {
+	--orders-thumb-size: #{$orders-thumb-size};
+
+	&__list {
+		padding: $orders-list-padding-x;
+		padding-bottom: $orders-list-padding-bottom;
 	}
-	.image {
-		width: 160rpx;
-		height: 160rpx;
-		margin-right: 30rpx;
-		border-radius: 8rpx;
+}
+
+.orders-item {
+	margin-bottom: $orders-item-gap;
+
+	&__shop {
+		margin-bottom: $orders-section-gap;
 	}
+
+	&__goods {
+		margin-bottom: $orders-section-gap;
+	}
+
+	&__thumb {
+		flex-shrink: 0;
+		width: var(--orders-thumb-size);
+		height: var(--orders-thumb-size);
+		margin-right: $spacing-row-lg;
+		border-radius: $orders-thumb-radius;
+	}
+
+	&__meta {
+		margin-bottom: $orders-item-gap;
+	}
+
+	&__summary {
+		margin-right: $orders-summary-gap;
+	}
+
+	&__btn + &__btn {
+		margin-left: $orders-btn-gap;
+	}
+}
 </style>
diff --git a/yshop-drink-uniapp-vue3/pages/components/pages/orders/refund.vue b/yshop-drink-uniapp-vue3/pages/components/pages/orders/refund.vue
index 8a683cb..2e32f88 100644
--- a/yshop-drink-uniapp-vue3/pages/components/pages/orders/refund.vue
+++ b/yshop-drink-uniapp-vue3/pages/components/pages/orders/refund.vue
@@ -1,59 +1,69 @@
-<template>
-	<uv-navbar
-	  :fixed="false"
-	  :title="title"
-	  left-arrow
-	  @leftClick="$onClickLeft"
-	/>
-	<view class="p-2">
-		<uv-list>
-			<uv-list-item title="订单金额"  :rightText="'¥'+totalPrice"></uv-list-item>
-			<uv-list-item title="退款金额"  :rightText="'¥'+payPrice"></uv-list-item>
-			<uv-list-item title="退款类型"  rightText="整个订单"></uv-list-item>
-			<uv-list-item title="退款原因"  rightText="协商一致"></uv-list-item>
-			<uv-list-item title="退款留言" >
-				<template #footer><uv-input placeholder="请输入内容" border="none" v-model="refundReasonWapExplain"></uv-input></template>
-			</uv-list-item>
-		</uv-list>
-		<view class="mt-2">
-			<uv-button shape="circle" type="warning" :plain="true" size="small" text="申请退款" @click="refund()"></uv-button>
-		</view>
-		<uv-toast ref="toast"></uv-toast>
-	</view>
-</template>
-
-<script setup>
+<template>
+	<uv-navbar
+	  :fixed="false"
+	  :title="title"
+	  left-arrow
+	  @leftClick="$onClickLeft"
+	/>
+	<view class="refund-page">
+		<uv-list>
+			<uv-list-item title="订单金额"  :rightText="'¥'+totalPrice"></uv-list-item>
+			<uv-list-item title="退款金额"  :rightText="'¥'+payPrice"></uv-list-item>
+			<uv-list-item title="退款类型"  rightText="整个订单"></uv-list-item>
+			<uv-list-item title="退款原因"  rightText="协商一致"></uv-list-item>
+			<uv-list-item title="退款留言" >
+				<template #footer><uv-input placeholder="请输入内容" border="none" v-model="refundReasonWapExplain"></uv-input></template>
+			</uv-list-item>
+		</uv-list>
+		<view class="refund-page__submit">
+			<uv-button shape="circle" type="warning" :plain="true" size="small" text="申请退款" @click="refund()"></uv-button>
+		</view>
+		<uv-toast ref="toast"></uv-toast>
+	</view>
+</template>
+
+<script setup>
 import {
   ref
-} from 'vue'
-import { onLoad} from '@dcloudio/uni-app'
-import {
+} from 'vue'
+import { onLoad} from '@dcloudio/uni-app'
+import {
   orderRefund
-} from '@/api/order'
-const title = ref('申请退款')
-const orderId = ref('')
-const payPrice = ref('')
-const totalPrice = ref('')
-const refundReasonWapExplain = ref('')
-const toast = ref()
-onLoad((option) => {
-	console.log('option:',option)
-	orderId.value = option.orderId
-	payPrice.value = option.payPrice
-	totalPrice.value = option.totalPrice
-})
-
-const refund  = async() => {
-	let data = await orderRefund({refundReasonWapExplain:refundReasonWapExplain.value,uni:orderId.value,text:'协商一致'});
-	if (data) {
-		uni.showToast({
-			title: '提交成功',
-			icon: 'success'
-		})
-	}
-}
-
-</script>
-
-<style>
-</style>
\ No newline at end of file
+} from '@/api/order'
+const title = ref('申请退款')
+const orderId = ref('')
+const payPrice = ref('')
+const totalPrice = ref('')
+const refundReasonWapExplain = ref('')
+const toast = ref()
+onLoad((option) => {
+	console.log('option:',option)
+	orderId.value = option.orderId
+	payPrice.value = option.payPrice
+	totalPrice.value = option.totalPrice
+})
+
+const refund  = async() => {
+	let data = await orderRefund({refundReasonWapExplain:refundReasonWapExplain.value,uni:orderId.value,text:'协商一致'});
+	if (data) {
+		uni.showToast({
+			title: '提交成功',
+			icon: 'success'
+		})
+	}
+}
+
+</script>
+
+<style lang="scss" scoped>
+$refund-padding: $spacing-row-base;
+$refund-submit-gap: $spacing-row-base;
+
+.refund-page {
+	padding: $refund-padding;
+
+	&__submit {
+		margin-top: $refund-submit-gap;
+	}
+}
+</style>
diff --git a/yshop-drink-uniapp-vue3/pages/components/pages/packages/index.vue b/yshop-drink-uniapp-vue3/pages/components/pages/packages/index.vue
index 0697768..6e997cd 100644
--- a/yshop-drink-uniapp-vue3/pages/components/pages/packages/index.vue
+++ b/yshop-drink-uniapp-vue3/pages/components/pages/packages/index.vue
@@ -5,38 +5,62 @@
 	  left-arrow
 	  @leftClick="$onClickLeft"
 	/>
-	<view class="container position-relative w-100 h-100 overflow-hidden">
+	<view class="container packages-page position-relative w-100 h-100 overflow-hidden">
 		<uv-empty v-if="coupons.length == 0" mode="coupon"></uv-empty>
-		
-		<scroll-view scroll-y class="coupon-list">
-			<view class="wrapper">
-				<view class="coupon" v-for="(item, index) in coupons" :key="index" @tap="openDetailModal(item, index)">
-					<view class="taobao">
-						<view class="ticket" :style="{border: item.id == coupon_id ? '1rpx solid red':''}">
-							<view class="left">
-								<image class="picture" :src="item.image" mode="aspectFill"></image>
-								<view class="introduce">
-									<view class="top">
+
+		<scroll-view scroll-y class="packages-list">
+			<view class="packages-list__wrapper">
+				<view
+					class="packages-item"
+					v-for="(item, index) in coupons"
+					:key="index"
+					@tap="openDetailModal(item, index)"
+				>
+					<view class="packages-ticket">
+						<view
+							class="packages-ticket__body"
+							:class="{ 'packages-ticket__body--selected': item.id == coupon_id }"
+						>
+							<view class="packages-ticket__left">
+								<image
+									class="packages-ticket__picture"
+									:src="item.image"
+									mode="aspectFill"
+								></image>
+								<view class="packages-ticket__intro">
+									<view class="packages-ticket__value">
 										￥
-										<text class="big">{{ item.value }}</text>
+										<text class="packages-ticket__amount">{{ item.value }}</text>
 										<view>满{{ item.least }}减{{ item.value }}</view>
 									</view>
-									<view class="type">{{ item.title }}</view>
-									<view class="date u-line-1">{{formatDateTime(item.startTime, 'yyyy-MM-dd')}}-{{formatDateTime(item.endTime, 'yyyy-MM-dd')}}</view>
+									<view class="packages-ticket__type">{{ item.title }}</view>
+									<view class="packages-ticket__date u-line-1">
+										{{ formatDateTime(item.startTime, 'yyyy-MM-dd') }}-{{ formatDateTime(item.endTime, 'yyyy-MM-dd') }}
+									</view>
 								</view>
 							</view>
-							<view class="right" @click.stop="" v-if="activeTabIndex == 0">
-								<view v-if="item.id != coupon_id" class="use immediate-use" :round="true" @tap="useCouponWith(item)">立即使用</view>
-								<view v-else class="use immediate-use" :round="true" @tap="cancelCoupon(item)">取消使用</view>
+							<view class="packages-ticket__right" @click.stop="" v-if="activeTabIndex == 0">
+								<view
+									v-if="item.id != coupon_id"
+									class="packages-ticket__btn packages-ticket__btn--use immediate-use"
+									:round="true"
+									@tap="useCouponWith(item)"
+								>立即使用</view>
+								<view
+									v-else
+									class="packages-ticket__btn packages-ticket__btn--use immediate-use"
+									:round="true"
+									@tap="cancelCoupon(item)"
+								>取消使用</view>
 							</view>
 						</view>
 					</view>
 				</view>
 			</view>
 		</scroll-view>
-		
+
 		<modal custom :show="detailModalVisible" @cancel="closeDetailModal" width="90%">
-			<view class="modal-content">
+			<view class="packages-modal">
 				<view class="d-flex font-size-extra-lg text-color-base just-content-center mb-20">{{ coupon.title }}</view>
 				<view class="d-flex font-size-sm text-color-base mb-20">有效期：{{formatDateTime(coupon.startTime, 'yyyy-MM-dd')}}至{{formatDateTime(coupon.endTime, 'yyyy-MM-dd')}}</view>
 				<view class="d-flex font-size-sm text-color-base mb-20">领取时间：{{ coupon.createtime_text }}</view>
@@ -44,7 +68,7 @@
 				<view class="d-flex font-size-sm text-color-base mb-20">适用范围：{{ typeInfo(coupon.type) }}</view>
 				<view class="d-flex font-size-sm text-color-base mb-20">适用店铺：{{ coupon.shopName }}</view>
 				<view class="d-flex align-items-center just-content-center" v-if="activeTabIndex == 0">
-					<button type="primary" @tap="useCoupon" class="use-coupon-btn">立即使用</button>
+					<button type="primary" @tap="useCoupon" class="packages-modal__btn">立即使用</button>
 				</view>
 			</view>
 		</modal>
@@ -55,17 +79,17 @@
 </template>
 
 <script setup>
-import {
+import {
   ref,
   watch,
-  toRaw
+  toRaw
 } from 'vue'
 import { useMainStore } from '@/store/store'
 import { storeToRefs } from 'pinia'
 import { onLoad,onShow ,onPullDownRefresh,onHide} from '@dcloudio/uni-app'
 import { formatDateTime,prePage } from '@/utils/util'
 import {
-  couponMine
+  couponMine
 } from '@/api/coupon'
 const main = useMainStore()
 const { isLogin } = storeToRefs(main)
@@ -82,7 +106,7 @@ const shop_id = ref(0)
 const type = ref(0)
 const uToast = ref()
 
-onLoad((options) => {
+onLoad((options) => {
 	if (options.amount) {
 		amount.value = options.amount;
 	}
@@ -176,198 +200,170 @@ const useCoupon = () => {
 </script>
 
 <style lang="scss" scoped>
+// 选券页局部 token（与 uni.scss 全局变量配合）
+$packages-list-offset-nav: 120rpx;
+$packages-list-margin-top: $spacing-row-lg;
+$packages-list-padding-x: $spacing-row-base;
+$packages-item-gap: $spacing-row-lg;
+$packages-item-radius: $border-radius-base;
+$packages-notch-size: 30rpx;
+$packages-notch-offset: 65rpx;
+$packages-ticket-radius: 20rpx;
+$packages-ticket-divider: $border-color-light;
+$packages-ticket-left-width: 70%;
+$packages-ticket-right-width: 30%;
+$packages-ticket-padding: $spacing-row-base;
+$packages-ticket-right-padding-y: 40rpx;
+$packages-picture-size: 190rpx;
+$packages-amount-font-size: 60rpx;
+$packages-date-font-size: 20rpx;
+$packages-intro-gap: 10rpx;
+$packages-btn-radius: 40rpx;
+$packages-btn-padding-x: 20rpx;
+$packages-btn-line-height: 40rpx;
+$packages-btn-margin-left: 20rpx;
+$packages-selected-border-width: 1rpx;
+$packages-modal-btn-width: 95%;
+
 /* #ifdef H5 */
 page {
 	height: 100%;
 }
 /* #endif */
 
-.container {
+.packages-page {
+	--packages-picture-size: #{$packages-picture-size};
+	--packages-list-offset-nav: #{$packages-list-offset-nav};
+
 	display: flex;
 	flex-direction: column;
 }
 
+.packages-list {
+	margin-top: $packages-list-margin-top;
+	height: calc(100vh - var(--packages-list-offset-nav));
 
-.coupon-list {
-	margin-top: 30rpx;
-	height:calc(100vh - 120rpx); 
-	// height: calc(100vh - 120rpx - 200rpx);
 	/* #ifdef H5 */
-	// height: calc(100vh - 120rpx - 200rpx - 44px);
+	height: calc(100vh - var(--packages-list-offset-nav) - 44px);
 	/* #endif */
-}
 
-.wrapper {
-	padding: 0 20rpx;
-	display: flex;
-	flex-direction: column;
-
-	.coupon {
+	&__wrapper {
 		display: flex;
 		flex-direction: column;
-		background-color: #ffffff;
-		margin-bottom: 30rpx;
-		//padding: 0 30rpx;
-		border-radius: 6rpx;
-		box-shadow: 0 10rpx 10rpx -10rpx rgba(15, 15, 15, 0.1);
-		position: relative;
-
-		&::before {
-			content: '';
-			position: absolute;
-			background-color: $bg-color;
-			width: 30rpx;
-			height: 30rpx;
-			bottom: 65rpx;
-			left: -15rpx;
-			border-radius: 100%;
-		}
-
-		&::after {
-			content: '';
-			position: absolute;
-			background-color: $bg-color;
-			width: 30rpx;
-			height: 30rpx;
-			bottom: 65rpx;
-			right: -15rpx;
-			border-radius: 100%;
-		}
-
-		.detail {
-			padding: 20rpx 0;
-			position: relative;
-
-			&::after {
-				content: '';
-				position: absolute;
-				left: 0;
-				right: 0;
-				bottom: 0;
-				border-bottom: 1rpx dashed #c6c6c6;
-				transform: scaleY(0.5);
-			}
-
-			.coupon-img {
-				width: 150rpx;
-				height: 150rpx;
-				margin-right: 40rpx;
-			}
-		}
+		padding: 0 $packages-list-padding-x;
 	}
 }
 
-.use-coupon-btn {
-	width: 95%;
-	border-radius: 50rem !important;
+.packages-item {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	margin-bottom: $packages-item-gap;
+	background-color: $text-color-white;
+	border-radius: $packages-item-radius;
+	box-shadow: $box-shadow;
+
+	&::before,
+	&::after {
+		content: '';
+		position: absolute;
+		bottom: $packages-notch-offset;
+		width: $packages-notch-size;
+		height: $packages-notch-size;
+		background-color: $bg-color;
+		border-radius: $border-radius-circle;
+	}
+
+	&::before {
+		left: calc(-1 * #{$packages-notch-size} / 2);
+	}
+
+	&::after {
+		right: calc(-1 * #{$packages-notch-size} / 2);
+	}
 }
 
-.taobao {
-	background-color: white;
-	.title {
+.packages-ticket {
+	background-color: $text-color-white;
+
+	&__body {
+		display: flex;
+
+		&--selected {
+			border: $packages-selected-border-width solid $color-error;
+			border-radius: $packages-ticket-radius;
+		}
+	}
+
+	&__left {
+		display: flex;
+		width: $packages-ticket-left-width;
+		padding: $packages-ticket-padding;
+		background-color: $text-color-white;
+		border-radius: $packages-ticket-radius;
+		border-right: dashed 2rpx $packages-ticket-divider;
+	}
+
+	&__picture {
+		flex-shrink: 0;
+		width: var(--packages-picture-size);
+		height: var(--packages-picture-size);
+		border-radius: $packages-ticket-radius;
+	}
+
+	&__intro {
+		margin-left: $packages-intro-gap;
+		min-width: 0;
+	}
+
+	&__value {
+		font-size: $font-size-base;
+		color: $uv-warning;
+
+		.packages-ticket__amount {
+			margin-right: $packages-intro-gap;
+			font-size: $packages-amount-font-size;
+			font-weight: bold;
+		}
+	}
+
+	&__type {
+		font-size: $font-size-base;
+		color: $uv-info-dark;
+	}
+
+	&__date {
+		margin-top: $packages-intro-gap;
+		font-size: $packages-date-font-size;
+		color: $uv-info-dark;
+	}
+
+	&__right {
 		display: flex;
 		align-items: center;
-		justify-content: space-between;
-		margin-bottom: 20rpx;
-		font-size: 30rpx;
-		.left {
-			display: flex;
-			align-items: center;
-		}
-		.store {
-			font-weight: 500;
-		}
-		.buddha {
-			width: 70rpx;
-			height: 70rpx;
-			border-radius: 10rpx;
-			margin-right: 10rpx;
-		}
-		.entrance {
-			color: $uv-info;
-			border: solid 2rpx $uv-info;
-			line-height: 48rpx;
-			padding: 0 30rpx;
-			background: none;
-			border-radius: 15px;
-		}
+		width: $packages-ticket-right-width;
+		padding: $packages-ticket-right-padding-y $packages-ticket-padding;
+		background-color: $text-color-white;
+		border-radius: $packages-ticket-radius;
 	}
-	.ticket {
-		display: flex;
-		.left {
-			width: 70%;
-			padding: 20rpx;
-			background-color: white; //rgb(255, 245, 244);
-			border-radius: 20rpx;
-			border-right: dashed 2rpx rgb(224, 215, 211);
-			display: flex;
-			.picture {
-				//width: 172rpx;
-				border-radius: 20rpx;
-				width: 190rpx;
-				height: 190rpx;
-			}
-			.introduce {
-				margin-left: 10rpx;
-				.top {
-					color: $uv-warning;
-					font-size: 28rpx;
-					.big {
-						font-size: 60rpx;
-						font-weight: bold;
-						margin-right: 10rpx;
-					}
-				}
-				.type {
-					font-size: 28rpx;
-					color: $uv-info-dark;
-				}
-				.date {
-					margin-top: 10rpx;
-					font-size: 20rpx;
-					color: $uv-info-dark;
-				}
-			}
-		}
-		.right {
-			width: 30%;
-			padding: 40rpx 20rpx;
-			background-color: white; //rgb(255, 245, 244);
-			border-radius: 20rpx;
-			display: flex;
-			align-items: center;
-			.use {
-				height: auto;
-				padding: 0 20rpx;
-				font-size: 24rpx;
-				border-radius: 40rpx;
-				color: #ffffff !important;
-				background-color: $uv-warning !important;
-				line-height: 40rpx;
-				color: rgb(117, 142, 165);
-				margin-left: 20rpx;
-			}
-			.used {
-				height: auto;
-				padding: 0 20rpx;
-				font-size: 24rpx;
-				border-radius: 40rpx;
-				//color: #ffffff!important;
-				//background-color: $u-type-warning!important;
-				line-height: 40rpx;
-				//color: rgb(117, 142, 165);
-				margin-left: 20rpx;
-			}
-		}
-		.right_log {
-			text-align: center;
-			width: 30%;
-			padding: 80rpx 0rpx;
-			background-color: white; //rgb(255, 245, 244);
-			border-radius: 20rpx;
 
-			align-items: center;
+	&__btn {
+		height: auto;
+		margin-left: $packages-btn-margin-left;
+		padding: 0 $packages-btn-padding-x;
+		font-size: $font-size-sm;
+		line-height: $packages-btn-line-height;
+		border-radius: $packages-btn-radius;
+		color: $text-color-white !important;
+
+		&--use {
+			background-color: $uv-warning !important;
 		}
 	}
 }
+
+.packages-modal__btn {
+	width: $packages-modal-btn-width;
+	border-radius: 50rem !important;
+}
 </style>
diff --git a/yshop-drink-uniapp-vue3/pages/components/pages/pay/pay.vue b/yshop-drink-uniapp-vue3/pages/components/pages/pay/pay.vue
index dfa1751..3f76505 100644
--- a/yshop-drink-uniapp-vue3/pages/components/pages/pay/pay.vue
+++ b/yshop-drink-uniapp-vue3/pages/components/pages/pay/pay.vue
@@ -5,11 +5,11 @@
 	  left-arrow
 	  @leftClick="$onClickLeft"
 	/>
-	<view class="container position-relative">
-		<view style="margin-bottom: 130rpx;">
-			<view class="section-1">
+	<view class="pay-page container position-relative">
+		<view class="pay-page__content">
+			<view class="pay-page__section">
 				<template v-if="store.distance > 0">
-					<list-cell class="location">
+					<list-cell class="pay-page__cell pay-page__cell--location">
 						<view class="flex-fill d-flex justify-content-between align-items-center">
 							<view class="store-name flex-fill">{{ orderType == 'takeout' ? '外卖配送' : '点餐自取' }}</view>
 							<uv-switch activeColor="#09b4f1" v-model="active" @change="takout">
@@ -25,7 +25,7 @@
 								<view class="font-size-lg text-color-base">
 									{{ address.address + ' ' + address.detail }}
 								</view>
-								<image src="/static/images/navigator-1.png" class="arrow"></image>
+								<image src="/static/images/navigator-1.png" class="pay-page__arrow"></image>
 							</view>
 							<view class="d-flex text-color-assist font-size-sm align-items-center">
 								<view class="mr-10">{{ address.realName }}</view>
@@ -34,24 +34,24 @@
 						</view>
 						<view v-else class="flex-fill d-flex justify-content-between align-items-center">
 							<view class="store-name flex-fill">选择收货地址</view>
-							<image src="/static/images/navigator-1.png" class="arrow"></image>
+							<image src="/static/images/navigator-1.png" class="pay-page__arrow"></image>
 						</view>
 					</list-cell>
 				</template>
 			</view>
 
-			<view class="section-1">
+			<view class="pay-page__section">
 				<template>
-					<list-cell class="location" @click="goToShop">
+					<list-cell class="pay-page__cell pay-page__cell--location" @click="goToShop">
 						<view class="flex-fill d-flex justify-content-between align-items-center">
 							<view class="store-name flex-fill">{{ store.name }}</view>
-							<image src="/static/images/navigator-1.png" class="arrow"></image>
+							<image src="/static/images/navigator-1.png" class="pay-page__arrow"></image>
 						</view>
 					</list-cell>
 				</template>
 
 				<template>
-					<list-cell arrow class="meal-time" v-if="orderType == 'takein'">
+					<list-cell arrow class="pay-page__cell pay-page__cell--meal-time" v-if="orderType == 'takein'">
 						<view class="flex-fill d-flex justify-content-between align-items-center"
 							@click="takeinTIme = !takeinTIme">
 							<view class="title">取餐时间</view>
@@ -63,12 +63,12 @@
 							</view>
 						</view>
 					</list-cell>
-					<list-cell class="contact" last :hover="false" v-if="orderType == 'takein'">
+					<list-cell class="pay-page__cell pay-page__cell--contact" last :hover="false" v-if="orderType == 'takein'">
 						<view class="flex-fill d-flex justify-content-between align-items-center">
 							<view class="title flex-fill">联系电话</view>
 							<view class="time"><input class="text-right" placeholder="请输入手机号码" :value="member.mobile" />
 							</view>
-							<button class="contact-tip font-size-sm">自动填写</button>
+							<button class="pay-page__contact-tip font-size-sm">自动填写</button>
 						</view>
 					</list-cell>
 				</template>
@@ -88,17 +88,17 @@
 				</template>
 			</view>
 			<!-- 购物车列表 begin -->
-			<view class="section-2">
-				<view class="cart d-flex flex-column">
+			<view class="pay-page__section pay-page__section--cart">
+				<view class="pay-page__cart d-flex flex-column">
 					<list-cell last v-for="(item, index) in cart" :key="index">
 						<view class="w-100 d-flex flex-column">
 							<view class="d-flex align-items-center mb-10">
 								<view
 									class="d-flex flex-fill justify-content-between align-items-center text-color-base font-size-lg">
-									<image style="width: 80rpx;height: 80rpx;" mode="aspectFill" :src="item.image">
+									<image class="pay-page__cart-thumb" mode="aspectFill" :src="item.image">
 									</image>
 								</view>
-								<view class="name-and-props overflow-hidden">
+								<view class="pay-page__cart-name overflow-hidden">
 									<view class="text-color-base font-size-lg">{{ item.name }}</view>
 								</view>
 								<view
@@ -134,47 +134,46 @@
 				</list-cell>
 			</view>
 			<!-- 购物车列表 end -->
-			<view class="d-flex align-items-center justify-content-start font-size-sm text-color-warning"
-				style="padding: 20rpx 0;">
+			<view class="pay-page__notice d-flex align-items-center justify-content-start font-size-sm text-color-warning">
 			</view>
 			<!-- 支付方式 begin -->
-			<view class="payment">
+			<view class="pay-page__payment">
 				<list-cell last :hover="false"><text>支付方式</text></list-cell>
 				<list-cell>
-					<view class="d-flex align-items-center justify-content-between w-100 disabled"
+					<view class="pay-page__payment-row pay-page__payment-row--disabled d-flex align-items-center justify-content-between w-100"
 						@click="setPayType('yue')">
-						<view class="iconfont iconbalance line-height-100 payment-icon"></view>
+						<view class="iconfont iconbalance line-height-100 pay-page__payment-icon"></view>
 						<view class="flex-fill">余额支付（余额￥{{ member.nowMoney }}）</view>
 						<view class="font-size-sm" v-if="member.nowMoney == 0">余额不足</view>
-						<view class="iconfont line-height-100 checkbox checked iconradio-button-on" v-if="payType == 'yue'">
+						<view class="iconfont line-height-100 pay-page__checkbox pay-page__checkbox--checked iconradio-button-on" v-if="payType == 'yue'">
 						</view>
-						<view class="iconfont line-height-100 checkbox iconradio-button-off" v-else></view>
+						<view class="iconfont line-height-100 pay-page__checkbox iconradio-button-off" v-else></view>
 					</view>
 				</list-cell>
 				<list-cell last>
-					<view class="d-flex align-items-center justify-content-between w-100" @click="setPayType('weixin')">
-						<view class="iconfont iconwxpay line-height-100 payment-icon" style="color: #7EB73A"></view>
+					<view class="pay-page__payment-row d-flex align-items-center justify-content-between w-100" @click="setPayType('weixin')">
+						<view class="iconfont iconwxpay line-height-100 pay-page__payment-icon pay-page__payment-icon--wechat"></view>
 						<view class="flex-fill">微信支付</view>
-						<view class="iconfont line-height-100 checkbox checked iconradio-button-on" v-if="payType == 'weixin'">
+						<view class="iconfont line-height-100 pay-page__checkbox pay-page__checkbox--checked iconradio-button-on" v-if="payType == 'weixin'">
 						</view>
-						<view class="iconfont line-height-100 checkbox iconradio-button-off" v-else></view>
+						<view class="iconfont line-height-100 pay-page__checkbox iconradio-button-off" v-else></view>
 					</view>
 				</list-cell>
 				<!-- #ifdef H5 -->
 				<list-cell>
-					<view class="d-flex align-items-center justify-content-between w-100" @click="setPayType('alipay')">
-						<view class="iconfont-yshop icon-alipay line-height-100 payment-icon" style="color:#07b4fd" ></view>
+					<view class="pay-page__payment-row d-flex align-items-center justify-content-between w-100" @click="setPayType('alipay')">
+						<view class="iconfont-yshop icon-alipay line-height-100 pay-page__payment-icon pay-page__payment-icon--alipay"></view>
 						<view class="flex-fill">支付宝</view>
-						<view class="iconfont line-height-100 checkbox checked iconradio-button-on" v-if="payType == 'alipay'" ></view>
-						<view class="iconfont line-height-100 checkbox iconradio-button-off" v-else ></view>     
+						<view class="iconfont line-height-100 pay-page__checkbox pay-page__checkbox--checked iconradio-button-on" v-if="payType == 'alipay'" ></view>
+						<view class="iconfont line-height-100 pay-page__checkbox iconradio-button-off" v-else ></view>     
 					</view>
 				</list-cell>
 				<!-- #endif -->
 			</view>
 			<!-- 支付方式 end -->
 			<!-- 备注 begin -->
-			<list-cell  last @click="goToRemark">
-				<view class="d-flex flex-fill align-items-center justify-content-between overflow-hidden" style="margin-bottom: 110rpx;">
+			<list-cell last @click="goToRemark">
+				<view class="pay-page__remark d-flex flex-fill align-items-center justify-content-between overflow-hidden">
 					<view class="flex-shrink-0 mr-20">备注</view>
 					<view class="text-color-primary flex-fill text-truncate text-right">{{ form.remark || '点击填写备注' }}
 					</view>
@@ -183,21 +182,20 @@
 			<!-- 备注 end -->
 		</view>
 		<!-- 付款栏 begin -->
-		<view style="z-index: 1;"
-			class="w-100 pay-box position-fixed fixed-bottom d-flex align-items-center justify-content-between bg-white">
-			<view class="font-size-sm" style="margin-left: 20rpx;">合计：</view>
-			<view class="font-size-lg flex-fill">￥{{ amount }}</view>
-			<view class="bg-primary h-100 d-flex align-items-center just-content-center text-color-white font-size-base"
-				style="padding: 0 60rpx;" @tap="debounce(submit, 500)">付款</view>
+		<view class="pay-page__footer w-100 position-fixed fixed-bottom d-flex align-items-center justify-content-between bg-white">
+			<view class="pay-page__footer-label font-size-sm">合计：</view>
+			<view class="pay-page__footer-amount font-size-lg flex-fill">￥{{ amount }}</view>
+			<view class="pay-page__footer-btn bg-primary h-100 d-flex align-items-center just-content-center text-color-white font-size-base"
+				@tap="debounce(submit, 500)">付款</view>
 		</view>
 		<!-- 付款栏 end -->
 		<modal :show="ensureAddressModalVisible" custom :mask-closable="false" :radius="'0rpx'" width="90%">
-			<view class="modal-content">
+			<view class="pay-page__modal">
 				<view class="d-flex justify-content-end">
-					<image src="/static/images/pay/close.png" style="width: 40rpx; height: 40rpx;"
+					<image src="/static/images/pay/close.png" class="pay-page__modal-close"
 						@tap="ensureAddressModalVisible = false"></image>
 				</view>
-				<view class="d-flex just-content-center align-items-center" style="margin-bottom: 40px;">
+				<view class="pay-page__modal-title d-flex just-content-center align-items-center">
 					<view class="font-size-extra-lg text-color-base">请再次确认下单地址</view>
 				</view>
 				<view
@@ -206,11 +204,11 @@
 					<view>{{ address.phone }}</view>
 				</view>
 				<view class="d-flex font-size-sm text-color-assist align-items-center justify-content-between mb-40">
-					<view style="max-width: 60%;">{{ address.address + address.detail }}</view>
-					<button type="primary" size="mini" plain class="change-address-btn" style="white-space: nowrap;"
+					<view class="pay-page__modal-address">{{ address.address + address.detail }}</view>
+					<button type="primary" size="mini" plain class="pay-page__modal-change-btn"
 						@click="chooseAddress">修改地址</button>
 				</view>
-				<button type="primary" class="pay_btn" @tap="debounce(pay, 500)">确认并付款</button>
+				<button type="primary" class="pay-page__modal-submit" @tap="debounce(pay, 500)">确认并付款</button>
 			</view>
 		</modal>
 		<uv-toast ref="uToast"></uv-toast>
@@ -706,125 +704,166 @@ const aliPay = async(order) => {
 </script>
 
 <style lang="scss" scoped>
-	.container {
-		padding: 30rpx;
+// 支付页局部 token（与 uni.scss 全局变量配合）
+$pay-page-padding: $spacing-row-lg;
+$pay-page-section-gap: $spacing-row-lg;
+$pay-page-content-offset: 130rpx;
+$pay-arrow-size: 50rpx;
+$pay-arrow-offset-right: -10rpx;
+$pay-cart-name-width: 65%;
+$pay-payment-icon-size: 44rpx;
+$pay-checkbox-size: 36rpx;
+$pay-checkbox-gap: 10rpx;
+$pay-payment-gap: 10rpx;
+$pay-footer-height: 100rpx;
+$pay-footer-shadow: 0 0 20rpx rgba($color: #000, $alpha: 0.1);
+$pay-footer-z-index: 1;
+$pay-footer-label-margin: $spacing-row-base;
+$pay-footer-btn-padding-x: 60rpx;
+$pay-remark-margin-bottom: 110rpx;
+$pay-notice-padding-y: $spacing-row-base;
+$pay-wechat-color: #7eb73a;
+$pay-alipay-color: #07b4fd;
+$pay-modal-close-size: 40rpx;
+$pay-modal-title-margin-bottom: 40px;
+$pay-modal-address-max-width: 60%;
+$pay-contact-tip-border-width: 2rpx;
+$pay-contact-tip-padding-y: 6rpx;
+$pay-contact-tip-padding-x: 10rpx;
+$pay-contact-tip-margin-left: 10rpx;
+$pay-modal-btn-radius: 50rem;
+$pay-modal-btn-line-height: 3;
+$pay-modal-change-btn-line-height: 2;
+
+.pay-page {
+	padding: $pay-page-padding;
+	--pay-cart-thumb-size: #{$img-size-lg};
+
+	&__content {
+		margin-bottom: $pay-page-content-offset;
 	}
 
-	.arrow {
-		width: 50rpx;
-		height: 50rpx;
+	&__section {
+		margin-bottom: $pay-page-section-gap;
+
+		&--cart {
+			margin-bottom: 0;
+		}
+	}
+
+	&__arrow {
 		position: relative;
-		margin-right: -10rpx;
+		width: $pay-arrow-size;
+		height: $pay-arrow-size;
+		margin-right: $pay-arrow-offset-right;
 	}
 
-	.location {
+	&__cell--location {
 		.store-name {
 			font-size: $font-size-lg;
 		}
 
 		.iconfont {
-			font-size: 50rpx;
+			font-size: $pay-arrow-size;
 			line-height: 100%;
 			color: $color-primary;
 		}
 	}
 
-	.section-1 {
-		margin-bottom: 30rpx;
-
-		.contact {
-			.contact-tip {
-				margin-left: 10rpx;
-				border: 2rpx solid $color-primary;
-				padding: 6rpx 10rpx;
-				color: $color-primary;
-			}
-		}
+	&__contact-tip {
+		margin-left: $pay-contact-tip-margin-left;
+		padding: $pay-contact-tip-padding-y $pay-contact-tip-padding-x;
+		border: $pay-contact-tip-border-width solid $color-primary;
+		color: $color-primary;
 	}
 
-	.section-2 {
-		.name-and-props {
-			width: 65%;
-		}
+	&__cart-name {
+		width: $pay-cart-name-width;
 	}
 
-	.payment {
-		margin-bottom: 30rpx;
+	&__cart-thumb {
+		flex-shrink: 0;
+		width: var(--pay-cart-thumb-size);
+		height: var(--pay-cart-thumb-size);
+	}
 
-		.disabled {
+	&__notice {
+		padding: $pay-notice-padding-y 0;
+	}
+
+	&__payment {
+		margin-bottom: $pay-page-section-gap;
+	}
+
+	&__payment-row {
+		&--disabled {
 			color: $text-color-grey;
 		}
+	}
 
-		.payment-icon {
-			font-size: 44rpx;
-			margin-right: 10rpx;
+	&__payment-icon {
+		margin-right: $pay-payment-gap;
+		font-size: $pay-payment-icon-size;
+
+		&--wechat {
+			color: $pay-wechat-color;
 		}
 
-		.checkbox {
-			font-size: 36rpx;
-			margin-left: 10rpx;
+		&--alipay {
+			color: $pay-alipay-color;
 		}
+	}
 
-		.checked {
+	&__checkbox {
+		margin-left: $pay-checkbox-gap;
+		font-size: $pay-checkbox-size;
+
+		&--checked {
 			color: $color-primary;
 		}
 	}
 
-	.pay-box {
-		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
-		height: 100rpx;
+	&__remark {
+		margin-bottom: $pay-remark-margin-bottom;
 	}
 
-	.modal-content {
-		.change-address-btn {
-			line-height: 2;
-			padding: 0 1em;
-		}
-
-		.pay_btn {
-			width: 100%;
-			border-radius: 50rem !important;
-			line-height: 3;
-		}
+	&__footer {
+		z-index: $pay-footer-z-index;
+		height: $pay-footer-height;
+		box-shadow: $pay-footer-shadow;
 	}
 
-	.choice {
-		background-color: $bg-color-grey;
-		border-radius: 38rpx;
-		display: flex;
-		align-items: center;
-		font-size: $font-size-sm;
-		padding: 0 38rpx;
-		color: $text-color-assist;
-
-		.dinein,
-		.takeout {
-			width: 50%;
-			position: relative;
-			display: flex;
-			align-items: center;
-
-			&.active {
-				padding: 14rpx 38rpx;
-				color: #ffffff;
-				background-color: $color-primary;
-				border-radius: 38rpx;
-			}
-		}
-
-		.takeout {
-			margin-left: 20rpx;
-			height: 100%;
-			flex: 1;
-			padding: 14rpx 0;
-		}
-
-		.dinein.active {
-			//margin-left: -38rpx;
-		}
-
-		.takeout.active {
-			//margin-right: -38rpx;
-		}
+	&__footer-label {
+		margin-left: $pay-footer-label-margin;
 	}
+
+	&__footer-btn {
+		padding: 0 $pay-footer-btn-padding-x;
+	}
+
+	&__modal-close {
+		width: $pay-modal-close-size;
+		height: $pay-modal-close-size;
+	}
+
+	&__modal-title {
+		margin-bottom: $pay-modal-title-margin-bottom;
+	}
+
+	&__modal-address {
+		max-width: $pay-modal-address-max-width;
+	}
+
+	&__modal-change-btn {
+		line-height: $pay-modal-change-btn-line-height;
+		padding: 0 1em;
+		white-space: nowrap;
+	}
+
+	&__modal-submit {
+		width: 100%;
+		line-height: $pay-modal-btn-line-height;
+		border-radius: $pay-modal-btn-radius !important;
+	}
+}
 </style>
diff --git a/yshop-drink-uniapp-vue3/pages/components/pages/remark/remark.vue b/yshop-drink-uniapp-vue3/pages/components/pages/remark/remark.vue
index 0d0fb27..4c4b65e 100644
--- a/yshop-drink-uniapp-vue3/pages/components/pages/remark/remark.vue
+++ b/yshop-drink-uniapp-vue3/pages/components/pages/remark/remark.vue
@@ -5,113 +5,184 @@
 	  left-arrow
 	  @leftClick="$onClickLeft"
 	/>
-	<view class="container w-100 h-100 overflow-hidden">
-		<view class="textarea">
-			<textarea placeholder-class="text-color-assist font-size-base" v-model="remark"
-				class="bg-white w-100 border-box font-size-base remark"
-				:class="{'text-color-danger': remarkLength > 50, 'text-color-assist' : remarkLength <=50}"
-				placeholder="请填写备注信息" focus/>
-			<view class="tips" :class="{'text-color-danger': remarkLength > 50, 'text-color-assist' : remarkLength <=50}">
+	<view class="remark-page w-100 h-100 overflow-hidden">
+		<view class="remark-page__textarea">
+			<textarea
+				placeholder-class="text-color-assist font-size-base"
+				v-model="remark"
+				class="remark-page__input w-100 border-box font-size-base"
+				:class="isDanger ? 'remark-page__input--danger' : 'remark-page__input--assist'"
+				placeholder="请填写备注信息"
+				focus
+			/>
+			<view
+				class="remark-page__counter"
+				:class="isDanger ? 'remark-page__counter--danger' : 'remark-page__counter--assist'"
+			>
 				{{ remarkLength }}/50
 			</view>
 		</view>
-		<view class="d-flex font-size-base text-color-assist" style="margin: 40rpx 0;">
+		<view class="remark-page__label font-size-base text-color-assist">
 			快捷输入
 		</view>
-		<view class="quick-inputs d-flex flex-wrap justify-content-start">
-			<view class="quick-input" v-for="(item, index) in quickInputs" :key="index" @tap="handleQuickInput(item)">
+		<view class="remark-page__quick-list">
+			<view
+				class="remark-page__quick-item"
+				v-for="(item, index) in quickInputs"
+				:key="index"
+				@tap="handleQuickInput(item)"
+			>
 				{{ item }}
 			</view>
 		</view>
-		<view class="d-flex just-content-center align-items-center" style="margin-top: 60rpx;">
-			<button type="primary" class="submit-btn font-size-base" @tap="submit">完成</button>
+		<view class="remark-page__actions">
+			<button type="primary" class="remark-page__submit-btn font-size-base" @tap="submit">完成</button>
 		</view>
-		<!--轻提示-->
 		<uv-toast ref="uToast"></uv-toast>
 	</view>
 </template>
 
 <script setup>
-import {
+import {
   ref,
-  computed
+  computed
 } from 'vue'
 import { onLoad} from '@dcloudio/uni-app'
 
+const title = ref('备注')
 const remark = ref('')
-const quickInputs = ref( ['请放门把手上', '请放门口', '请放前台桌上', '如地址封闭管理，请电话与我联系'])
+const quickInputs = ref(['请放门把手上', '请放门口', '请放前台桌上', '如地址封闭管理，请电话与我联系'])
 const uToast = ref()
-	
+
 onLoad((opt) => {
 	remark.value = opt.remark
-})	
+})
 
-const remarkLength = computed(() => { 
+const remarkLength = computed(() => {
 	return remark.value.length
 })
-const isDanger = computed(() => { 
+const isDanger = computed(() => {
 	return remark.value.length > 50
 })
 
 const handleQuickInput = (item) => {
-	remark.value = remark.value.concat(" ", item)
+	remark.value = remark.value.concat(' ', item)
 }
 const submit = () => {
 	if (remark.value.length > 50) {
 		uToast.value.show({
 			message: '不能超过50个字符',
 			type: 'error'
-		});
+		})
 		return
 	}
 	uni.navigateTo({
-		url: "/pages/components/pages/pay/pay?remark=" + remark.value
+		url: '/pages/components/pages/pay/pay?remark=' + remark.value
 	})
 }
-	
-
 </script>
 
 <style lang="scss" scoped>
-	.container {
-		padding: 30rpx 40rpx;
-		
-		.textarea {
-			position: relative;
-			
-			.remark {
-				border-radius: 8rpx;
-				padding: 30rpx 40rpx;
-				height: 320rpx;
-				color: $font-size-base;
-			}
-			
-			.tips {
-				position: absolute;
-				bottom: 30rpx;
-				right: 40rpx;
-			}
+$remark-page-padding-y: 30rpx;
+$remark-page-padding-x: 40rpx;
+$remark-textarea-radius: 8rpx;
+$remark-textarea-padding-y: 30rpx;
+$remark-textarea-padding-x: 40rpx;
+$remark-textarea-height: 320rpx;
+$remark-counter-offset-y: 30rpx;
+$remark-counter-offset-x: 40rpx;
+$remark-label-margin-y: 40rpx;
+$remark-quick-list-padding-right: 20rpx;
+$remark-quick-item-padding-y: 16rpx;
+$remark-quick-item-padding-x: 26rpx;
+$remark-quick-item-gap: 20rpx;
+$remark-quick-item-border-width: 2rpx;
+$remark-actions-margin-top: 60rpx;
+$remark-submit-btn-width: 90%;
+$remark-submit-btn-height: 80rpx;
+$remark-submit-btn-radius: 40rpx;
+
+.remark-page {
+	--remark-page-padding-y: #{$remark-page-padding-y};
+	--remark-page-padding-x: #{$remark-page-padding-x};
+	--remark-textarea-padding-y: #{$remark-textarea-padding-y};
+	--remark-textarea-padding-x: #{$remark-textarea-padding-x};
+	--remark-textarea-height: #{$remark-textarea-height};
+	--remark-counter-offset-y: #{$remark-counter-offset-y};
+	--remark-counter-offset-x: #{$remark-counter-offset-x};
+	--remark-submit-btn-width: #{$remark-submit-btn-width};
+	--remark-submit-btn-height: #{$remark-submit-btn-height};
+
+	padding: var(--remark-page-padding-y) var(--remark-page-padding-x);
+
+	&__textarea {
+		position: relative;
+	}
+
+	&__input {
+		border-radius: $remark-textarea-radius;
+		padding: var(--remark-textarea-padding-y) var(--remark-textarea-padding-x);
+		height: var(--remark-textarea-height);
+		background-color: $text-color-white;
+		color: $text-color-base;
+
+		&--danger {
+			color: $color-error;
 		}
-		
-		.quick-inputs {
-			padding-right: 20rpx;
-			
-			.quick-input {
-				background-color: #FFFFFF;
-				border: 2rpx solid $color-primary;
-				color: $color-primary;
-				font-size: $font-size-base;
-				padding: 16rpx 26rpx;
-				margin-right: 20rpx;
-				margin-bottom: 20rpx;
-			}
-		}
-		
-		.submit-btn {
-			width: 90%;
-			height: 80rpx;
-			border-radius: 40rpx;
-			line-height: 80rpx;
+
+		&--assist {
+			color: $text-color-assist;
 		}
 	}
+
+	&__counter {
+		position: absolute;
+		bottom: var(--remark-counter-offset-y);
+		right: var(--remark-counter-offset-x);
+		font-size: $font-size-base;
+
+		&--danger {
+			color: $color-error;
+		}
+
+		&--assist {
+			color: $text-color-assist;
+		}
+	}
+
+	&__label {
+		margin: $remark-label-margin-y 0;
+	}
+
+	&__quick-list {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-start;
+		padding-right: $remark-quick-list-padding-right;
+	}
+
+	&__quick-item {
+		background-color: $text-color-white;
+		border: $remark-quick-item-border-width solid $color-primary;
+		color: $color-primary;
+		font-size: $font-size-base;
+		padding: $remark-quick-item-padding-y $remark-quick-item-padding-x;
+		margin-right: $remark-quick-item-gap;
+		margin-bottom: $remark-quick-item-gap;
+	}
+
+	&__actions {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-top: $remark-actions-margin-top;
+	}
+
+	&__submit-btn {
+		width: var(--remark-submit-btn-width);
+		height: var(--remark-submit-btn-height);
+		border-radius: $remark-submit-btn-radius;
+		line-height: var(--remark-submit-btn-height);
+	}
+}
 </style>
diff --git a/yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/confirm.vue b/yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/confirm.vue
index 4dd8fc3..271f742 100644
--- a/yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/confirm.vue
+++ b/yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/confirm.vue
@@ -1,97 +1,99 @@
-<template>
-	<!-- #ifdef MP-WEIXIN -->
-	<uv-navbar
-	  :fixed="false"
-	  :title="title"
-	  left-arrow
-	  @leftClick="$onClickLeft"
-	/>
-	<!-- #endif -->
-	<view class="px-2 mt-2">
-		<view class="bg-white p-2" >
-			<uv-form :model="form" ref="uForm" >
-				<uv-form-item>
-						<view v-if="address.realName">
-							<view>{{ address.address }} {{ address.detail }}</view>
-							<text>{{ address.realName }} {{ address.phone }}</text>
-						</view>
-						<view v-else>请选择收货地址</view>
-						<template #right>
-							<uv-icon name="arrow-right" @click="chooseAddress"></uv-icon>
-						</template>
-				</uv-form-item>
-			</uv-form>
-		</view>
-		<view class="bg-white p-2 mt-2">
-			<view class="mb-5">积分商城</view>
-			<view class="flex justify-between">
-				<view class="flex">
-					<image :src="product.image" mode="aspectFill" class="image"></image>
-					<text class="font-size-medium">{{ product.title }}</text>
-				</view>
-				<view class="flex flex-column">
-					<text class="font-size-medium">{{ product.score }}积分</text>
-					<text class="font-size-medium text-color-assist mt-2 text-right">×1</text>
-				</view>
-			</view>
-			<view class="flex justify-between mt-5">
-				<text class="font-size-medium">积分抵扣</text>
-				<text class="font-size-medium">{{ product.score }}</text>
-			</view>
-			<view class="text-right font-size-lg mt-5 text-color-assist">合计:<text class="font-size-medium text-color-base ">¥{{ product.score }}</text></view>
-		</view>
-	</view>
-	<view class="fixed-bottom flex justify-between align-center bg-white ">
-		<view class="mx-2 ont-weight-light">合计:<text class="text-danger">￥{{ product.score }}积分</text></view>
-		<view><uv-button type="warning" color="#ffcc00" :customStyle="customStyle" size="large" text="立即兑换" @click="submit"></uv-button></view>
-	</view>
-	<uv-toast ref="uToast" />
-</template>
-
-<script setup>
+<template>
+	<!-- #ifdef MP-WEIXIN -->
+	<uv-navbar
+	  :fixed="false"
+	  :title="title"
+	  left-arrow
+	  @leftClick="$onClickLeft"
+	/>
+	<!-- #endif -->
+	<view class="px-2 mt-2 score-product-confirm">
+		<view class="bg-white p-2" >
+			<uv-form :model="form" ref="uForm" >
+				<uv-form-item>
+						<view v-if="address.realName">
+							<view>{{ address.address }} {{ address.detail }}</view>
+							<text>{{ address.realName }} {{ address.phone }}</text>
+						</view>
+						<view v-else>请选择收货地址</view>
+						<template #right>
+							<uv-icon name="arrow-right" @click="chooseAddress"></uv-icon>
+						</template>
+				</uv-form-item>
+			</uv-form>
+		</view>
+		<view class="bg-white p-2 mt-2">
+			<view class="mb-5">积分商城</view>
+			<view class="flex justify-between">
+				<view class="flex">
+					<image :src="product.image" mode="aspectFill" class="score-product-confirm__thumb"></image>
+					<text class="font-size-medium">{{ product.title }}</text>
+				</view>
+				<view class="flex flex-column">
+					<text class="font-size-medium">{{ product.score }}积分</text>
+					<text class="font-size-medium text-color-assist mt-2 text-right">×1</text>
+				</view>
+			</view>
+			<view class="flex justify-between mt-5">
+				<text class="font-size-medium">积分抵扣</text>
+				<text class="font-size-medium">{{ product.score }}</text>
+			</view>
+			<view class="text-right font-size-lg mt-5 text-color-assist">合计:<text class="font-size-medium text-color-base ">¥{{ product.score }}</text></view>
+		</view>
+	</view>
+	<view class="fixed-bottom flex justify-between align-center bg-white ">
+		<view class="mx-2 ont-weight-light">合计:<text class="text-danger">￥{{ product.score }}积分</text></view>
+		<view><uv-button type="warning" :color="scoreProductAccent" :customStyle="customStyle" size="large" text="立即兑换" @click="submit"></uv-button></view>
+	</view>
+	<uv-toast ref="uToast" />
+</template>
+
+<script setup>
 import {
-  ref,
-  computed,
+  ref,
+  computed,
   getCurrentInstance
-} from 'vue'
-import { onReachBottom,onLoad,onPullDownRefresh} from '@dcloudio/uni-app'
-import {
-  scoreShopExchange,
+} from 'vue'
+import { onReachBottom,onLoad,onPullDownRefresh} from '@dcloudio/uni-app'
+import {
+  scoreShopExchange,
   scoreShopDetail
-} from '@/api/score'
-import cookie from '@/utils/cookie'
-import { useMainStore } from '@/store/store'
-import { storeToRefs } from 'pinia'
-const { proxy } = getCurrentInstance();
-const main = useMainStore()
-const { address,isLogin} = storeToRefs(main)
-
-const title = ref("确认订单")
-const product = ref({})
-
-const customStyle = computed(() =>{
-	return {
-		  paddingLeft:'60rpx',
-		  paddingRight:'60rpx'
-		}
-})
-
-onLoad(() => {
-	console.log('address:',address.value)
-	if(!isLogin.value) {
-		uni.navigateTo({url: '/pages/components/pages/login/login'})
-	}
-	product.value = cookie.get('score_product')
-	
-})
-
+} from '@/api/score'
+import cookie from '@/utils/cookie'
+import { useMainStore } from '@/store/store'
+import { storeToRefs } from 'pinia'
+const { proxy } = getCurrentInstance();
+const main = useMainStore()
+const { address,isLogin} = storeToRefs(main)
+
+const title = ref("确认订单")
+const product = ref({})
+
+const scoreProductAccent = '#ffcc00'
+
+const customStyle = computed(() => {
+	return {
+		paddingLeft: '60rpx',
+		paddingRight: '60rpx'
+	}
+})
+
+onLoad(() => {
+	console.log('address:',address.value)
+	if(!isLogin.value) {
+		uni.navigateTo({url: '/pages/components/pages/login/login'})
+	}
+	product.value = cookie.get('score_product')
+	
+})
+
 // 选择地址
-const chooseAddress = () => {
-	uni.navigateTo({
-		url: '/pages/components/pages/address/address?is_choose=true&scene=scoreShop'
+const chooseAddress = () => {
+	uni.navigateTo({
+		url: '/pages/components/pages/address/address?is_choose=true&scene=scoreShop'
 	})
-}
-
+}
+
 // 提交
 const submit = async() => {
 	if (!address.value.id) {
@@ -105,25 +107,35 @@ const submit = async() => {
 		productId: product.value.id,
 		addressId: address.value.id,
 		num: 1
-	})
+	})
 
-	if (data) {
+	if (data) {
 		cookie.remove('score_product')
-		setTimeout(function() {
-			uni.navigateTo({
-				url: '/pages/components/pages/scoreproduct/order'
+		setTimeout(function() {
+			uni.navigateTo({
+				url: '/pages/components/pages/scoreproduct/order'
 			})
 		}, 1000)
 	}
-}
-
-</script>
-
-<style lang="scss" scoped>
-	.image {
-		width: 160rpx;
-		height: 160rpx;
-		margin-right: 30rpx;
-		border-radius: 8rpx;
-	}
+}
+
+</script>
+
+<style lang="scss" scoped>
+$score-product-accent: #ffcc00;
+$score-product-confirm-thumb-size: 160rpx;
+$score-product-confirm-thumb-radius: 8rpx;
+
+.score-product-confirm {
+	--score-product-accent: #{$score-product-accent};
+	--score-product-confirm-thumb-size: #{$score-product-confirm-thumb-size};
+
+	&__thumb {
+		flex-shrink: 0;
+		width: var(--score-product-confirm-thumb-size);
+		height: var(--score-product-confirm-thumb-size);
+		margin-right: $spacing-row-lg;
+		border-radius: $score-product-confirm-thumb-radius;
+	}
+}
 </style>
\ No newline at end of file
diff --git a/yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/detail.vue b/yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/detail.vue
index 04db433..e334f38 100644
--- a/yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/detail.vue
+++ b/yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/detail.vue
@@ -1,64 +1,64 @@
-<template>
-	<!-- #ifdef MP-WEIXIN -->
-	<uv-navbar
-	  :fixed="false"
-	  :title="title"
-	  left-arrow
-	  @leftClick="$onClickLeft"
-	/>
+<template>
+	<!-- #ifdef MP-WEIXIN -->
+	<uv-navbar
+	  :fixed="false"
+	  :title="title"
+	  left-arrow
+	  @leftClick="$onClickLeft"
+	/>
 	<!-- #endif -->
-	<view class="container">
-		<view class="carousel">
+	<view class="container score-product-detail">
+		<view class="score-product-detail__carousel">
 			<swiper indicator-dots circular=true duration="400">
-				<swiper-item class="swiper-item" v-for="(item,index) in product.images" :key="index">
-					<view class="image-wrapper">
+				<swiper-item class="score-product-detail__swiper-item" v-for="(item,index) in product.images" :key="index">
+					<view class="score-product-detail__image-wrapper">
 						<image :src="item" class="loaded" @click="previewImage(index)" mode="aspectFill"></image>
 					</view>
 				</swiper-item>
 			</swiper>
 		</view>
 
-		<view class="introduce-section" v-if="product.id">
-			<text class="title">{{product.title}}</text>
-			<view class="price-box bot-row">
+		<view class="score-product-detail__intro" v-if="product.id">
+			<text class="score-product-detail__title">{{product.title}}</text>
+			<view class="score-product-detail__meta">
 				<text>积分： {{product.score}}</text>
 				<text>销量: {{product.sales}}</text>
 				<text>库存: {{product.stock}}</text>
 			</view>
 		</view>
 
-		<view class="detail-desc" v-if="product.desc">
+		<view class="score-product-detail__desc" v-if="product.desc">
 			<rich-text :nodes="product.desc"></rich-text>
 		</view>
 
 		<!-- 底部操作菜单 -->
 		<view class="fixed-bottom px-2">
-			<button class="btn" @click="confirm">立即兑换</button>
+			<button class="score-product-detail__btn" @click="confirm">立即兑换</button>
 		</view>
 
 		<uv-toast ref="uToast" />
 	</view>
 </template>
 
-<script setup>
+<script setup>
 import {
-  ref,
-  computed,
+  ref,
+  computed,
   getCurrentInstance
-} from 'vue'
-import { onReachBottom,onLoad,onPullDownRefresh} from '@dcloudio/uni-app'
-import {
-  scoreShopExchange,
+} from 'vue'
+import { onReachBottom,onLoad,onPullDownRefresh} from '@dcloudio/uni-app'
+import {
+  scoreShopExchange,
   scoreShopDetail
-} from '@/api/score'
-import cookie from '@/utils/cookie'
-const { proxy } = getCurrentInstance();
-
-const buttonText = ref("立即兑换")
-const specClass = ref('none')
-const product = ref({})
-const id = ref(false)
-const form = ref( 
+} from '@/api/score'
+import cookie from '@/utils/cookie'
+const { proxy } = getCurrentInstance();
+
+const buttonText = ref("立即兑换")
+const specClass = ref('none')
+const product = ref({})
+const id = ref(false)
+const form = ref( 
 	{
 		address: {
 			id: 0,
@@ -68,32 +68,32 @@ const form = ref(
 			mobile: "",
 		},
 		num: 1 // 兑换数量
-	}
-)
-const lock = ref(false)
-
-onPullDownRefresh(() => {
-	getDetail(id.value);
-})
-
+	}
+)
+const lock = ref(false)
+
+onPullDownRefresh(() => {
+	getDetail(id.value);
+})
+
 onLoad((options) => {
-   id.value = options.id;
+   id.value = options.id;
    getDetail(options.id);
-})
-
+})
+
 
 // 选择地址
-const chooseAddress = () => {
-	uni.navigateTo({
-		url: '/pages/components/pages/address/address?is_choose=true&scene=scoreShop'
+const chooseAddress = () => {
+	uni.navigateTo({
+		url: '/pages/components/pages/address/address?is_choose=true&scene=scoreShop'
+	})
+}
+
+const confirm = () => {
+	cookie.set('score_product',product.value)
+	uni.navigateTo({
+		url: '/pages/components/pages/scoreproduct/confirm'
 	})
-}
-
-const confirm = () => {
-	cookie.set('score_product',product.value)
-	uni.navigateTo({
-		url: '/pages/components/pages/scoreproduct/confirm'
-	})
 }
 // 该表购买数量
 const valChange = (e) => {
@@ -127,101 +127,94 @@ const previewImage = (index) => {
 		indicator: "number",
 		loop: true
 	})
-}
-
+}
+
 
 
 </script>
 
-<style lang='scss'>
-	.icon-you {
-		color: #888;
-	}
+<style lang="scss">
+$score-product-accent: #ffcc00;
+$score-product-detail-carousel-height: 722rpx;
+$score-product-detail-swiper-height: 750rpx;
+$score-product-detail-intro-padding-y: 20rpx;
+$score-product-detail-intro-padding-x: 30rpx;
+$score-product-detail-title-height: 50rpx;
+$score-product-detail-meta-height: 64rpx;
+$score-product-detail-btn-height: 100rpx;
+$score-product-detail-btn-font-size: 40rpx;
+$score-product-detail-desc-margin-bottom: 200rpx;
 
-	.carousel {
-		height: 722upx;
+.score-product-detail {
+	--score-product-accent: #{$score-product-accent};
+
+	&__carousel {
 		position: relative;
+		height: $score-product-detail-carousel-height;
 
 		swiper {
 			height: 100%;
 		}
+	}
 
-		.image-wrapper {
+	&__image-wrapper {
+		width: 100%;
+		height: 100%;
+	}
+
+	&__swiper-item {
+		display: flex;
+		justify-content: center;
+		align-content: center;
+		height: $score-product-detail-swiper-height;
+		overflow: hidden;
+
+		image {
 			width: 100%;
 			height: 100%;
 		}
-
-		.swiper-item {
-			display: flex;
-			justify-content: center;
-			align-content: center;
-			height: 750upx;
-			overflow: hidden;
-
-			image {
-				width: 100%;
-				height: 100%;
-			}
-		}
-
 	}
 
-	/* 标题简介 */
-	.introduce-section {
-		background: #fff;
-		padding: 20upx 30upx;
-
-		.title {
-			font-size: 32upx;
-			color: #555555;
-			height: 50upx;
-			line-height: 50upx;
-		}
-
-		.price-box {
-			display: flex;
-			align-items: baseline;
-			height: 64upx;
-			padding: 10upx 0;
-			font-size: 30rpx;
-			color: #5A5B5C;
-		}
-
-		.price {
-			font-size: 35rpx;
-		}
-
-		.bot-row {
-			display: flex;
-			align-items: center;
-
-			text {
-				flex: 1;
-			}
-		}
-	}
-	
-	.btn {
-		height: 100rpx;
-		line-height: 100rpx;
-		border-radius: 100rpx;
-		background: #ffcc00;
-		font-size: 40rpx;
-		color: #fff;
-		margin: 30upx auto 20upx;
-		
-	
+	&__intro {
+		background-color: $text-color-white;
+		padding: $score-product-detail-intro-padding-y $score-product-detail-intro-padding-x;
 	}
 
-	/*  详情 */
-	.detail-desc {
-		background: #fff;
-		margin-top: 16upx;
-		margin-bottom: 200rpx;
-		padding: 20rpx;
+	&__title {
+		height: $score-product-detail-title-height;
+		line-height: $score-product-detail-title-height;
+		font-size: $font-size-lg;
+		color: $color-subtitle;
 	}
 
+	&__meta {
+		display: flex;
+		align-items: center;
+		height: $score-product-detail-meta-height;
+		padding: 10rpx 0;
+		font-size: $font-size-paragraph;
+		color: $text-color-black;
 
-	
-
-</style>
+		text {
+			flex: 1;
+		}
+	}
+
+	&__btn {
+		height: $score-product-detail-btn-height;
+		line-height: $score-product-detail-btn-height;
+		margin: 30rpx auto 20rpx;
+		border-radius: $score-product-detail-btn-height;
+		background-color: var(--score-product-accent);
+		font-size: $score-product-detail-btn-font-size;
+		color: $text-color-white;
+	}
+
+	&__desc {
+		margin-top: $spacing-col-base;
+		margin-bottom: $score-product-detail-desc-margin-bottom;
+		padding: $spacing-row-base;
+		background-color: $text-color-white;
+	}
+}
+</style>
diff --git a/yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/list.vue b/yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/list.vue
index d1fe5dc..a815317 100644
--- a/yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/list.vue
+++ b/yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/list.vue
@@ -1,35 +1,35 @@
-<template>
-	<!-- #ifdef MP-WEIXIN -->
-	<uv-navbar
-	  :fixed="false"
-	  :title="title"
-	  left-arrow
-	  @leftClick="$onClickLeft"
-	/>
+<template>
+	<!-- #ifdef MP-WEIXIN -->
+	<uv-navbar
+	  :fixed="false"
+	  :title="title"
+	  left-arrow
+	  @leftClick="$onClickLeft"
+	/>
 	<!-- #endif -->
 	<view>
 		<!--商品区-->
-		<uv-waterfall v-model="list" :add-time="0" ref="uWaterfall" @changeList="changeList" :left-gap="10"
-			:right-gap="10"
+		<uv-waterfall v-model="list" :add-time="0" ref="uWaterfall" @changeList="changeList" :left-gap="10"
+			:right-gap="10"
 			:column-gap="1">
 			<template v-slot:list1>
-				<view class="demo-warter" v-for="(item, index) in list1" :key="index" @click="goDetail(item)">
-					<image :src="item.image" mode="widthFix" style="width: 300rpx;"></image>
-					<view class="demo-title">
+				<view class="score-product-list__card" v-for="(item, index) in list1" :key="index" @click="goDetail(item)">
+					<image :src="item.image" mode="widthFix" class="score-product-list__image"></image>
+					<view class="score-product-list__title">
 						{{item.title}}
 					</view>
-					<view class="demo-price">
+					<view class="score-product-list__score">
 						消耗积分:{{item.score}}
 					</view>
 				</view>
 			</template>
 			<template v-slot:list2>
-				<view class="demo-warter" v-for="(item, index) in list2" :key="index" @click="goDetail(item)">
-					<image :src="item.image" mode="widthFix" style="width: 300rpx;"></image>
-					<view class="demo-title">
+				<view class="score-product-list__card" v-for="(item, index) in list2" :key="index" @click="goDetail(item)">
+					<image :src="item.image" mode="widthFix" class="score-product-list__image"></image>
+					<view class="score-product-list__title">
 						{{item.title}}
 					</view>
-					<view class="demo-price">
+					<view class="score-product-list__score">
 						消耗积分:{{item.score}}
 					</view>
 				</view>
@@ -40,176 +40,134 @@
 	</view>
 </template>
 
-<script setup>
+<script setup>
 import {
-  ref,
-  computed,
+  ref,
+  computed,
   getCurrentInstance
-} from 'vue'
-import { onReachBottom,onShow,onPullDownRefresh} from '@dcloudio/uni-app'
-import {
+} from 'vue'
+import { onReachBottom,onShow,onPullDownRefresh} from '@dcloudio/uni-app'
+import {
   scoreShopIndex
-} from '@/api/score'
-const { proxy } = getCurrentInstance();
-
-const title = ref('积分商品')
-const list = ref([])
-const page = ref(1)
-const pagesize = ref(10)
-const status = ref('loadmore')
-const list1 = ref([])
-const list2 = ref([])
-
-const uWaterfall = ref()
-
-let currentInstance = getCurrentInstance()
-
-onShow(() => {
-	getProduct()
-})
-
-onReachBottom(async() => {
-	if (status.value == 'loading') {
-		return;
-	}
-	page.value++
-	status.value = 'loading'; 
-	let data = await scoreShopIndex({
-		page: page.value,
-		pagesize: pagesize.value
-	});
-	if (data) {
-		list.value = list.value.concat(data);
-		if (data.length == 0) {
-			page.value--;
-			status.value = 'nomore';
-		} else if (data.length < pagesize.value) {
-			status.value = 'nomore';
-		} else {
-			status.value = 'loadmore';
-		}
-	} else {
-		status.value = 'loadmore';
-	}
-})
-
-onPullDownRefresh(() => {
+} from '@/api/score'
+const { proxy } = getCurrentInstance();
+
+const title = ref('积分商品')
+const list = ref([])
+const page = ref(1)
+const pagesize = ref(10)
+const status = ref('loadmore')
+const list1 = ref([])
+const list2 = ref([])
+
+const uWaterfall = ref()
+
+let currentInstance = getCurrentInstance()
+
+onShow(() => {
+	getProduct()
+})
+
+onReachBottom(async() => {
+	if (status.value == 'loading') {
+		return;
+	}
+	page.value++
+	status.value = 'loading'; 
+	let data = await scoreShopIndex({
+		page: page.value,
+		pagesize: pagesize.value
+	});
+	if (data) {
+		list.value = list.value.concat(data);
+		if (data.length == 0) {
+			page.value--;
+			status.value = 'nomore';
+		} else if (data.length < pagesize.value) {
+			status.value = 'nomore';
+		} else {
+			status.value = 'loadmore';
+		}
+	} else {
+		status.value = 'loadmore';
+	}
+})
+
+onPullDownRefresh(() => {
 	page.value = 1;
-	getProduct()
-})
-
-const changeList = (e) => {
-	console.log('e:',e)
-	if(e.name == 'list1'){
-		list1.value.push(e.value)
-	}else{
-		list2.value.push(e.value)
-	}
-	
-}
-const goDetail = (item) => {
-	uni.navigateTo({
-		url: '/pages/components/pages/scoreproduct/detail?id=' + item.id
+	getProduct()
+})
+
+const changeList = (e) => {
+	console.log('e:',e)
+	if(e.name == 'list1'){
+		list1.value.push(e.value)
+	}else{
+		list2.value.push(e.value)
+	}
+	
+}
+const goDetail = (item) => {
+	uni.navigateTo({
+		url: '/pages/components/pages/scoreproduct/detail?id=' + item.id
 	})
 }
-const  getProduct = async() => {
+const  getProduct = async() => {
 	status.value = 'loading';
-	//proxy.$refs.uWaterfall.clear();
+	//proxy.$refs.uWaterfall.clear();
 
 	let data = await scoreShopIndex({
-		page: page.value,
+		page: page.value,
 		pagesize: pagesize.value
-	});
+	});
 	console.log('data:',data)
 	uni.stopPullDownRefresh();
 	if (data) {
-		list.value = data;
-		console.log('data2:',list.value)
-		if (data.length < pagesize.value) {
-			status.value = 'nomore';
+		list.value = data;
+		console.log('data2:',list.value)
+		if (data.length < pagesize.value) {
+			status.value = 'nomore';
 		}
-	} else {
-		status.value = 'nomore';
+	} else {
+		status.value = 'nomore';
 	}
-}
+}
 
 
 </script>
 
 <style lang="scss">
-	.search {
-		margin: 10rpx !important;
-	}
+$score-product-accent: #ffcc00;
+$score-product-list-card-radius: 8px;
+$score-product-list-card-gap: 5px;
+$score-product-list-card-padding: 8px;
+$score-product-list-image-width: 300rpx;
+$score-product-list-title-gap: 5px;
 
-	.demo-warter {
-		border-radius: 8px;
-		margin: 5px;
-		background-color: #ffcc00;
-		padding: 8px;
-		position: relative;
-	}
+.score-product-list__card {
+	--score-product-accent: #{$score-product-accent};
+	--score-product-list-image-width: #{$score-product-list-image-width};
 
-	.demo-title {
-		font-size: 30rpx;
-		margin-top: 5px;
-		color: #ffffff;
-	}
+	position: relative;
+	margin: $score-product-list-card-gap;
+	padding: $score-product-list-card-padding;
+	border-radius: $score-product-list-card-radius;
+	background-color: var(--score-product-accent);
+}
 
-	.demo-tag {
-		display: flex;
-		margin-top: 5px;
-	}
+.score-product-list__image {
+	width: var(--score-product-list-image-width);
+}
 
-	.demo-tag-owner {
-		background-color: $uv-error;
-		color: #FFFFFF;
-		display: flex;
-		align-items: center;
-		padding: 4rpx 14rpx;
-		border-radius: 50rpx;
-		font-size: 20rpx;
-		line-height: 1;
-	}
+.score-product-list__title {
+	margin-top: $score-product-list-title-gap;
+	font-size: $font-size-paragraph;
+	color: $text-color-white;
+}
 
-	.demo-tag-text {
-		border: 1px solid $uv-primary;
-		color: $uv-primary;
-		margin-left: 10px;
-		border-radius: 50rpx;
-		line-height: 1;
-		padding: 4rpx 14rpx;
-		display: flex;
-		align-items: center;
-		border-radius: 50rpx;
-		font-size: 20rpx;
-	}
-
-	.demo-price {
-		font-size: 30rpx;
-		color: $bg-color;
-		margin-top: 5px;
-	}
-
-	.demo-shop {
-		font-size: 32rpx;
-		color: #cdad73;
-		margin-top: 5px;
-	}
-
-	.page {
-		padding: 10px 0;
-
-		.demo-layout {
-			text-align: center;
-			background-color: #c6caca;
-			border-radius: 20rpx;
-			margin: 5px 0;
-			padding: 3px;
-		}
-
-		.select {
-			background-color: #eea13c;
-			color: #ffffff;
-		}
-	}
-</style>
+.score-product-list__score {
+	margin-top: $score-product-list-title-gap;
+	font-size: $font-size-paragraph;
+	color: $bg-color;
+}
+</style>
diff --git a/yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/order.vue b/yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/order.vue
index 2039740..ab3e2ac 100644
--- a/yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/order.vue
+++ b/yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/order.vue
@@ -1,18 +1,18 @@
-<template>
-	<!-- #ifdef MP-WEIXIN -->
-	<uv-navbar
-	  :fixed="false"
-	  :title="title"
-	  left-arrow
-	  @leftClick="$onClickLeft"
-	/>
+<template>
+	<!-- #ifdef MP-WEIXIN -->
+	<uv-navbar
+	  :fixed="false"
+	  :title="title"
+	  left-arrow
+	  @leftClick="$onClickLeft"
+	/>
 	<!-- #endif -->
-	<view class="container">
-		<view class="bg-white">
-			<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
+	<view class="container score-product-orders">
+		<view class="bg-white">
+			<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
 		</view>
-		<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;">
-			<view class="order-item" v-for="(item, index) in orders" :key="index" style="margin-bottom: 30rpx;">
+		<view class="score-product-orders__list d-flex flex-column w-100">
+			<view class="score-product-orders-item" v-for="(item, index) in orders" :key="index">
 				<list-cell :hover="false">
 					<view class="w-100 d-flex align-items-center">
 						<view class="flex-fill d-flex flex-column">
@@ -24,101 +24,101 @@
 					</view>
 				</list-cell>
 				<list-cell :hover="false" last>
-					<view class="w-100 d-flex flex-column">
-						<view class="flex ">
-							<image :src="item.product.image" mode="aspectFill" class="image"></image>
+					<view class="w-100 d-flex flex-column">
+						<view class="flex ">
+							<image :src="item.product.image" mode="aspectFill" class="score-product-orders-item__thumb"></image>
 							<view>
-								<view class="w-100 text-truncate font-size-lg text-color-base" style="margin-bottom: 20rpx;">
+								<view class="w-100 text-truncate font-size-lg text-color-base score-product-orders-item__title">
 									{{ item.product.title }}
-								</view>
-								<view class="font-size-sm mt-2">×{{ item.product.number }}  {{ item.product.score }}积分</view>
-							</view>
+								</view>
+								<view class="font-size-sm mt-2">×{{ item.product.number }}  {{ item.product.score }}积分</view>
+							</view>
 						</view>
-						<view class="d-flex justify-content-between align-items-center mt-3" >
+						<view class="d-flex justify-content-between align-items-center score-product-orders-item__meta">
 							<view class="font-size-sm text-color-assist">
 								{{formatDateTime(item.createTime) }}
 							</view>
 							<view class="d-flex font-size-sm text-color-base align-items-center">
-								<view style="margin-right: 10rpx;">共{{item.number }}件商品，消耗积分</view>
+								<view class="score-product-orders-item__summary">共{{item.number }}件商品，消耗积分</view>
 								<view class="font-size-lg"> {{ item.totalScore }}</view>
 							</view>
 						</view>
-						<view class="d-flex align-items-center justify-content-end mt-3">
+						<view class="d-flex align-items-center justify-content-end score-product-orders-item__actions">
 							<view>
 								<button v-if="item.havePaid > 0 && item.haveDelivered == 1 && item.haveReceived == 0"
-									class="left-margin" type="primary" plain size="mini"
-									@tap.stop="receive(item)">确认收到货</button>
-								<button class="left-margin"  plain size="mini" @tap="detail(item.id)">订单详情</button>
+									class="score-product-orders-item__btn" type="primary" plain size="mini"
+									@tap.stop="receive(item)">确认收到货</button>
+								<button class="score-product-orders-item__btn" plain size="mini" @tap="detail(item.id)">订单详情</button>
 							</view>
 						</view>
 					</view>
 				</list-cell>
 			</view>
-		</view>
+		</view>
 		<uv-empty v-if="orders.length == 0" mode="order"></uv-empty>
 	</view>
-	<uv-toast ref="uToast" />
+	<uv-toast ref="uToast" />
 </template>
 
-<script setup>
+<script setup>
 import {
-  ref,
-  computed,
+  ref,
+  computed,
   getCurrentInstance
-} from 'vue'
-import { useMainStore } from '@/store/store'
-import { storeToRefs } from 'pinia'
-import { onLoad,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
-import { formatDateTime,kmUnit } from '@/utils/util'
-import {
-  scoreShopOrder,
+} from 'vue'
+import { useMainStore } from '@/store/store'
+import { storeToRefs } from 'pinia'
+import { onLoad,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
+import { formatDateTime,kmUnit } from '@/utils/util'
+import {
+  scoreShopOrder,
   scoreShopReceive
-} from '@/api/score'
-const main = useMainStore()
-const { proxy } = getCurrentInstance();
-const { isLogin } = storeToRefs(main)
-const title = ref('我的积分订单')
-
-const type = ref(-1)
-const page = ref(1)
-const pageSize = ref(10)
-const orders = ref([])
-const tabList = ref([{
-			type: -1,
-			name: '全部',
-		}, {
-			type: 0,
-			name: '待发货',
-		}, {
-			type: 1,
-			name: '待收货'
-		}, {
-			type: 2,
-			name: '已完成'
-		}]
+} from '@/api/score'
+const main = useMainStore()
+const { proxy } = getCurrentInstance();
+const { isLogin } = storeToRefs(main)
+const title = ref('我的积分订单')
+
+const type = ref(-1)
+const page = ref(1)
+const pageSize = ref(10)
+const orders = ref([])
+const tabList = ref([{
+			type: -1,
+			name: '全部',
+		}, {
+			type: 0,
+			name: '待发货',
+		}, {
+			type: 1,
+			name: '待收货'
+		}, {
+			type: 2,
+			name: '已完成'
+		}]
 )
-onLoad(() => {
-	if (!isLogin.value) {
-		uni.navigateTo({
-			url: '/pages/components/pages/login/login'
-		})
-	}
-	getOrders(false)
-})
-
-onReachBottom(() => {
-	getOrders(false)
-})
-onPullDownRefresh(() => {
-	 getOrders(false)
-})
-
-// tab栏切换
-const change = (e) => {
-	type.value = e.type
-	getOrders(true)
-}
-
+onLoad(() => {
+	if (!isLogin.value) {
+		uni.navigateTo({
+			url: '/pages/components/pages/login/login'
+		})
+	}
+	getOrders(false)
+})
+
+onReachBottom(() => {
+	getOrders(false)
+})
+onPullDownRefresh(() => {
+	 getOrders(false)
+})
+
+// tab栏切换
+const change = (e) => {
+	type.value = e.type
+	getOrders(true)
+}
+
 const  getOrders = async(isRefresh = false) => {
 	uni.showLoading({
 		title: '加载中'
@@ -129,7 +129,7 @@ const  getOrders = async(isRefresh = false) => {
 	}
 	let data = await scoreShopOrder({
 		page: page.value,
-		pagesize: pageSize.value,
+		pagesize: pageSize.value,
 		type: type.value
 	});
 	if (data.length > 0) {
@@ -150,27 +150,67 @@ const  receive = async(order) => {
 		id: order.id
 	});
 	if (data) {
-		proxy.$refs.uToast.show({
-			message: '已签收',
-			type: 'success',
+		proxy.$refs.uToast.show({
+			message: '已签收',
+			type: 'success',
 		})
 		setTimeout(function() {
 			getOrders(true)
 		}, 1000);
 	}
-}
+}
 
 
 </script>
 
 <style lang="scss" scoped>
-	.left-margin {
-		margin-left: 10rpx;
-	}
-	.image {
-		width: 160rpx;
-		height: 160rpx;
-		margin-right: 30rpx;
-		border-radius: 8rpx;
+$score-product-orders-list-padding-x: $spacing-row-base;
+$score-product-orders-list-padding-bottom: 0;
+$score-product-orders-item-gap: $spacing-row-lg;
+$score-product-orders-section-gap: $spacing-row-base;
+$score-product-orders-btn-gap: $spacing-row-base;
+$score-product-orders-summary-gap: $spacing-row-base;
+$score-product-orders-thumb-size: 160rpx;
+$score-product-orders-thumb-radius: 8rpx;
+
+.score-product-orders {
+	--score-product-orders-thumb-size: #{$score-product-orders-thumb-size};
+
+	&__list {
+		padding: $score-product-orders-list-padding-x;
+		padding-bottom: $score-product-orders-list-padding-bottom;
 	}
-</style>
+}
+
+.score-product-orders-item {
+	margin-bottom: $score-product-orders-item-gap;
+
+	&__title {
+		margin-bottom: $score-product-orders-section-gap;
+	}
+
+	&__thumb {
+		flex-shrink: 0;
+		width: var(--score-product-orders-thumb-size);
+		height: var(--score-product-orders-thumb-size);
+		margin-right: $spacing-row-lg;
+		border-radius: $score-product-orders-thumb-radius;
+	}
+
+	&__meta {
+		margin-top: $score-product-orders-section-gap;
+	}
+
+	&__summary {
+		margin-right: $score-product-orders-summary-gap;
+	}
+
+	&__actions {
+		margin-top: $score-product-orders-section-gap;
+	}
+
+	&__btn + &__btn {
+		margin-left: $score-product-orders-btn-gap;
+	}
+}
+</style>
diff --git a/yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/orderDetail.vue b/yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/orderDetail.vue
index 2f0c991..de2bca1 100644
--- a/yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/orderDetail.vue
+++ b/yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/orderDetail.vue
@@ -7,16 +7,16 @@
 	  @leftClick="$onClickLeft"
 	/>
 	<!-- #endif -->
-	<view class="container" style="padding:20rpx;">
-		<view style="padding-bottom: 100rpx;">
+	<view class="container score-product-order-detail">
+		<view class="score-product-order-detail__body">
 			<view class="bg-white">
-				<view class="section">
+				<view class="score-product-order-detail__section">
 					
 					<list-cell :hover="false" padding="50rpx 30rpx">
-						<view class="w-100 d-flex flex-column position-relative" style="margin-bottom: -40rpx;">
+						<view class="w-100 d-flex flex-column position-relative score-product-order-detail__goods-preview">
 							<view class="w-100 d-flex align-items-center mb-40">
 								<view class="d-flex flex-column w-60 overflow-hidden">
-									<image class="product-image" :src="order.product.image" mode="aspectFill"></image>
+									<image class="score-product-order-detail__thumb" :src="order.product.image" mode="aspectFill"></image>
 								</view>
 								<view class="d-flex flex-column w-60 overflow-hidden">
 									<view class="font-size-lg text-color-base mb-10 text-truncate">{{ order.product.title }}</view>
@@ -29,29 +29,29 @@
 						</view>
 					</list-cell>
 				</view>
-				<view class="section">
+				<view class="score-product-order-detail__section">
 					<list-cell :hover="false" padding="50rpx 30rpx">
 						<view class="w-100 d-flex flex-column">
 				
-							<view class="pay-cell">
+							<view class="score-product-order-detail__cell">
 								<view>消耗积分</view>
 								<view class="font-weight-bold">{{ order.totalScore }}</view>
 							</view>
 						</view>
 					</list-cell>
 				</view>
-				<view class="section">
+				<view class="score-product-order-detail__section">
 					<list-cell :hover="false" padding="50rpx 30rpx">
 						<view class="w-100 d-flex flex-column">
-							<view class="pay-cell">
+							<view class="score-product-order-detail__cell">
 								<view>订单状态</view>
 								<view class="font-weight-bold">{{ order.statusText }}</view>
 							</view>
-							<view class="pay-cell">
+							<view class="score-product-order-detail__cell">
 								<view>下单时间</view>
 								<view class="font-weight-bold">{{ formatDateTime(order.createTime) }}</view>
 							</view>
-							<view class="pay-cell">
+							<view class="score-product-order-detail__cell">
 								<view>订单号</view>
 								<view class="font-weight-bold">{{ order.orderId }}</view>
 							</view>
@@ -60,7 +60,7 @@
 					
 					<list-cell :hover="false">
 						<view class="w-100 d-flex align-items-center">
-							<view class="pay-cell">
+							<view class="score-product-order-detail__cell">
 								<view>收货地址</view>
 							</view>
 							<view class="d-flex flex-column">
@@ -73,13 +73,13 @@
 					
 					<list-cell :hover="false" padding="50rpx 30rpx" v-if="order.expressCompany">
 						<view class="w-100 d-flex flex-column">
-							<view class="pay-cell">
+							<view class="score-product-order-detail__cell">
 								<view>快递公司</view>
 								<view class="font-weight-bold">{{order.expressCompany }}</view>
 							</view>
-							<view class="pay-cell">
+							<view class="score-product-order-detail__cell">
 								<view>快递单号</view>
-								<view class="font-weight-bold">{{order.expressNumber }}<text class="copy" @click="copy()">复制</text></view>
+								<view class="font-weight-bold">{{order.expressNumber }}<text class="score-product-order-detail__copy" @click="copy()">复制</text></view>
 								<!-- <text class="copy" @click="copy()">复制</text> -->
 							</view>
 						</view>
@@ -102,10 +102,10 @@
 </template>
 
 <script setup>
-import {
+import {
   ref,
   computed,
-  getCurrentInstance
+  getCurrentInstance
 } from 'vue'
 import { useMainStore } from '@/store/store'
 import { storeToRefs } from 'pinia'
@@ -114,7 +114,7 @@ import { formatDateTime,kmUnit } from '@/utils/util'
 import {
   scoreShopOrderDetail,
   scoreShopReceive,
-  getLogistic
+  getLogistic
 } from '@/api/score'
 const main = useMainStore()
 const { proxy } = getCurrentInstance();
@@ -169,20 +169,20 @@ const copy = () => {
 	})
 }
 
-// 确认收到货
-const  receive = async(order) => {
-	let data = await scoreShopReceive({
-		id: order.id
-	});
-	if (data) {
+// 确认收到货
+const  receive = async(order) => {
+	let data = await scoreShopReceive({
+		id: order.id
+	});
+	if (data) {
 		proxy.$refs.uToast.show({
 			message: '已签收',
 			type: 'success',
-		})
-		setTimeout(function() {
-			detail(order.id)
-		}, 1000);
-	}
+		})
+		setTimeout(function() {
+			detail(order.id)
+		}, 1000);
+	}
 }
 
 
@@ -190,98 +190,83 @@ const  receive = async(order) => {
 </script>
 
 <style lang="scss" scoped>
-.copy {
-	color: #1296db;
-	margin-left: 10rpx;
-}
-@mixin arch {
-	content: "";
+$score-product-order-detail-padding: $spacing-row-base;
+$score-product-order-detail-body-padding-bottom: 100rpx;
+$score-product-order-detail-thumb-size: 140rpx;
+$score-product-order-detail-cell-gap: 40rpx;
+$score-product-order-detail-section-notch: 30rpx;
+$score-product-order-detail-section-notch-offset: 15rpx;
+$score-product-order-detail-goods-offset: -40rpx;
+$score-product-order-detail-copy-color: #1296db;
+$score-product-order-detail-copy-gap: $spacing-row-base;
+
+@mixin score-product-order-detail-section-notch {
+	content: '';
 	position: absolute;
-	background-color: $bg-color;
-	width: 30rpx;
-	height: 30rpx;
-	bottom: -15rpx;
+	bottom: calc(-1 * #{$score-product-order-detail-section-notch-offset});
 	z-index: 10;
-	border-radius: 100%;
+	width: $score-product-order-detail-section-notch;
+	height: $score-product-order-detail-section-notch;
+	background-color: $bg-color;
+	border-radius: $border-radius-circle;
 }
 
-.section {
+/* #ifdef H5 */
+page {
+	min-height: 100%;
+	background-color: $bg-color;
+}
+/* #endif */
+
+.score-product-order-detail {
+	padding: $score-product-order-detail-padding;
+	--score-product-order-detail-thumb-size: #{$score-product-order-detail-thumb-size};
+
+	&__body {
+		padding-bottom: $score-product-order-detail-body-padding-bottom;
+	}
+
+	&__goods-preview {
+		margin-bottom: $score-product-order-detail-goods-offset;
+	}
+
+	&__thumb {
+		flex-shrink: 0;
+		width: var(--score-product-order-detail-thumb-size);
+		height: var(--score-product-order-detail-thumb-size);
+	}
+
+	&__copy {
+		margin-left: $score-product-order-detail-copy-gap;
+		color: $score-product-order-detail-copy-color;
+	}
+}
+
+.score-product-order-detail__section {
 	position: relative;
-	
+
 	&::before {
-		@include arch;
-		left: -15rpx;
+		@include score-product-order-detail-section-notch;
+		left: calc(-1 * #{$score-product-order-detail-section-notch-offset});
 	}
-	
+
 	&::after {
-		@include arch;
-		right: -15rpx;
+		@include score-product-order-detail-section-notch;
+		right: calc(-1 * #{$score-product-order-detail-section-notch-offset});
 	}
 }
 
-.pay-cell {
-	width: 100%;
+.score-product-order-detail__cell {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
+	width: 100%;
+	margin-bottom: $score-product-order-detail-cell-gap;
 	font-size: $font-size-base;
 	color: $text-color-base;
-	margin-bottom: 40rpx;
 
-	&:nth-last-child(1) {
+	&:last-child {
 		margin-bottom: 0;
 	}
 }
-
-.invote-box {
-	position: absolute;
-	width: 100%;
-	left: 0;
-	top: 0;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	
-	image {
-		width: 30rpx;
-		height: 30rpx;
-	}
-}
-
-.btn-box {
-	background-color: #ffffff;
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	height: 120rpx;
-	box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
-	display: flex;
-	align-items: center;
-	justify-content: space-evenly;
-	z-index: 11;
-	
-	.item {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 20rpx 10rpx;
-		flex: 1;
-		flex-shrink: 0;
-		
-		button {
-			width: 100%;
-			border-radius: 50rem !important;
-			height: 80rpx;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			padding: 0;
-		}
-	}
-}
-.product-image {
-	width: 140rpx;
-	height: 140rpx;
-}
 </style>
diff --git a/yshop-drink-uniapp-vue3/pages/components/pages/shop/shop.vue b/yshop-drink-uniapp-vue3/pages/components/pages/shop/shop.vue
index 6383aec..9f0fd61 100644
--- a/yshop-drink-uniapp-vue3/pages/components/pages/shop/shop.vue
+++ b/yshop-drink-uniapp-vue3/pages/components/pages/shop/shop.vue
@@ -5,21 +5,21 @@
 	  left-arrow
 	  @leftClick="$onClickLeft"
 	/>
-	<view>
-		<view>
-			<uv-search margin="30rpx" v-model="keywork" @custom="search(keywork)"></uv-search>
+	<view class="shop-page">
+		<view class="shop-page__search">
+			<uv-search v-model="keywork" @custom="search(keywork)"></uv-search>
 		</view>
-		<view v-for="(item,index) in list" :key="index">
+		<view v-for="(item,index) in list" :key="index" class="shop-page__item">
 			<uni-card @click="choice(item)" :border="item.id == store.id" :title="item.name" :thumbnail="item.image" :thumb-width="80" :sub-title="item.status_text">
-				<view class="body">
-					<view class="body-left">
+				<view class="shop-page__body">
+					<view class="shop-page__info">
 						<view>距离您 {{kmUnit(item.dis)}}</view>
 						<view v-if="item.distance > 0">配送距离：{{item.distance + 'km '}} & 配送费：{{item.delivery_price}}</view>
 						<view v-else>外卖不配送</view>
 						<view>{{item.addressMap + ' ' + item.address}}</view>
 						<view>营业时间 {{formatDateTime(item.startTime,'hh:mm')}} - {{formatDateTime(item.endTime,'hh:mm')}}</view>
 					</view>
-					<view class="body-right">
+					<view class="shop-page__actions">
 						<uv-button @click="openLocation(item)">导航</uv-button>
 						<uv-button @click="call(item.mobile)">致电</uv-button>
 					</view>
@@ -30,8 +30,8 @@
 </template>
 
 <script setup>
-import {
-  ref
+import {
+  ref
 } from 'vue'
 import { useMainStore } from '@/store/store'
 import { storeToRefs } from 'pinia'
@@ -39,10 +39,10 @@ import { onLoad,onShow ,onPullDownRefresh,onHide} from '@dcloudio/uni-app'
 import { formatDateTime,kmUnit,prePage } from '@/utils/util'
 import {
   shopNearby,
-  menuGoods
+  menuGoods
 } from '@/api/goods'
 import {
-  shopGetList
+  shopGetList
 } from '@/api/market'
 const main = useMainStore()
 const { store,location } = storeToRefs(main)
@@ -116,18 +116,37 @@ const choice = (shop) => {
 </script>
 
 <style lang="scss">
-	.body {
-		
-		.body-left {
-			display: inline-block;
-			width: 77%;
-			padding-left: 6rpx;
-		}
-		.body-right {
-			display: inline-block;
-			width: 20%;
-		}
-	}
-	
+$shop-page-search-margin: $spacing-row-lg;
+$shop-page-info-padding-left: 6rpx;
+$shop-page-actions-width: 20%;
+$shop-page-actions-gap: $spacing-col-sm;
 
+.shop-page {
+	--shop-page-search-margin: #{$shop-page-search-margin};
+	--shop-page-info-padding-left: #{$shop-page-info-padding-left};
+	--shop-page-actions-width: #{$shop-page-actions-width};
+	--shop-page-actions-gap: #{$shop-page-actions-gap};
+
+	&__search {
+		margin: var(--shop-page-search-margin);
+	}
+
+	&__body {
+		display: flex;
+		align-items: flex-start;
+	}
+
+	&__info {
+		flex: 1;
+		min-width: 0;
+		padding-left: var(--shop-page-info-padding-left);
+	}
+
+	&__actions {
+		flex: 0 0 var(--shop-page-actions-width);
+		display: flex;
+		flex-direction: column;
+		gap: var(--shop-page-actions-gap);
+	}
+}
 </style>
diff --git a/yshop-drink-uniapp-vue3/pages/index/index.vue b/yshop-drink-uniapp-vue3/pages/index/index.vue
index 18ef092..9d8af7b 100644
--- a/yshop-drink-uniapp-vue3/pages/index/index.vue
+++ b/yshop-drink-uniapp-vue3/pages/index/index.vue
@@ -19,62 +19,58 @@
       <blank size="5"></blank>
     </uv-sticky>
 
-    <blank size="10"></blank>
-	<view class="container">
-			<view class="banner">
-				<uv-swiper class="bg" height="300" imgMode="aspectFill" keyName="image" :list="listAds" indicatorMode="dot" indicatorStyle="bottom"></uv-swiper>
-				<view class="intro">
-					<view class="greet">您好，{{ isLogin ? member.nickname : '游客' }}</view>
-					<view class="note">java-springboot-意向点餐外卖系统</view>
-				</view>
-			</view>
-			<view class="content">
-				<view class="flex justify-between yshop-menu">
-					<view class="flex flex-column align-center yshop-menu-item "  @tap="takein">
-						<view><image src="/static/images/index002.png" mode="aspectFit" class="img-01"></image></view>
-						<view>自取</view>
-						<view class="font-small text-light-black">下单免排队</view>
-					</view>
-					<view class="flex flex-column align-center yshop-menu-item "  @tap="takeout">
-						<view><image src="/static/images/index003.png" mode="aspectFit" class="img-01"></image></view>
-						<view>外卖</view>
-						<view class="font-small text-light-black">美食送到家</view>
-					</view>
-				</view>
-				 <view class="info">
-					<view class="integral_section">
-						<view class="top">
-							<text class="title">我的卡券</text>
-							<text class="value">{{member.couponCount}}</text>
-						</view>
-						<view class="bottom">
-							可抵扣商品价格哦
-						</view>
-					</view>
-					<view class="qrcode_section" @tap="coupons">
-						去领个券
-				<!-- 		<view class="iconfont iconarrow-right"></view> -->
-				
-					</view>
-				</view> 
-				<view class="info">
-					<view class="integral_section" @tap="goScore">
-						<view class="top">
-							<text class="title">积分商城</text>
-						</view>
-						<view class="bottom">
-							进入积分商城兑换奈雪券及周边好礼
-						<!-- 	<view class="iconfont iconarrow-right"></view> -->
-						</view>
-					</view>
-					<view class="qrcode_section" @tap="goScore">
-						<image src="/static/images/jifen.png"></image>
-						<text>逛一逛</text>
-					</view>
-				</view>
-				
-			</view>
-	</view>
+    <blank size="10"></blank>
+	<view class="container index-page">
+			<view class="index-banner">
+				<uv-swiper class="index-banner__swiper" height="300" imgMode="aspectFill" keyName="image" :list="listAds" indicatorMode="dot" indicatorStyle="bottom"></uv-swiper>
+				<view class="index-banner__intro">
+					<view class="index-banner__greet">您好，{{ isLogin ? member.nickname : '游客' }}</view>
+					<view class="index-banner__note">java-springboot-意向点餐外卖系统</view>
+				</view>
+			</view>
+			<view class="index-content">
+				<view class="flex justify-between index-menu">
+					<view class="flex flex-column align-center index-menu__item" @tap="takein">
+						<view><image src="/static/images/index002.png" mode="aspectFit" class="index-menu__icon"></image></view>
+						<view>自取</view>
+						<view class="font-small text-light-black">下单免排队</view>
+					</view>
+					<view class="flex flex-column align-center index-menu__item" @tap="takeout">
+						<view><image src="/static/images/index003.png" mode="aspectFit" class="index-menu__icon"></image></view>
+						<view>外卖</view>
+						<view class="font-small text-light-black">美食送到家</view>
+					</view>
+				</view>
+				 <view class="index-card">
+					<view class="index-card__main">
+						<view class="index-card__header">
+							<text class="index-card__title">我的卡券</text>
+							<text class="index-card__value">{{member.couponCount}}</text>
+						</view>
+						<view class="index-card__desc">
+							可抵扣商品价格哦
+						</view>
+					</view>
+					<view class="index-card__action" @tap="coupons">
+						去领个券
+					</view>
+				</view>
+				<view class="index-card">
+					<view class="index-card__main" @tap="goScore">
+						<view class="index-card__header">
+							<text class="index-card__title">积分商城</text>
+						</view>
+						<view class="index-card__desc">
+							进入积分商城兑换奈雪券及周边好礼
+						</view>
+					</view>
+					<view class="index-card__action index-card__action--with-icon" @tap="goScore">
+						<image src="/static/images/jifen.png" class="index-card__action-icon"></image>
+						<text>逛一逛</text>
+					</view>
+				</view>
+			</view>
+	</view>
   </layout>
 </template>
 
@@ -83,203 +79,209 @@ import {
   ref
 } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
-import {
+import {
   menuAds
-} from '@/api/market'
+} from '@/api/market'
 import { storeToRefs } from 'pinia'
-import { useMainStore } from '@/store/store'
+import { useMainStore } from '@/store/store'
 //
 const main = useMainStore()
 const { member,store, isLogin} = storeToRefs(main)
-//const store = ref(main.store)
-const listAds = ref([])
+//const store = ref(main.store)
+const listAds = ref([])
 // const isLogin = ref(main.isLogin)
-
-const handGetListAds = async () => {
-	let shop_id = store.id ? store.id : 0;
-	let data = await menuAds({
-		shop_id: shop_id
-	});
-	if (data) {
-		listAds.value = data.list;
-		console.log('listAds:',listAds.value)
-		uni.setStorage({
-				key: 'isActive',
-				data: data.isActive
-			});
-		if(data.list.length > 0){
-			uni.setStorage({
-					key: 'shopAd',
-					data: data.list[0].image
-			 });
-			}
-		}
-}
-
-const takein = () => {
-	main.SET_ORDER_TYPE('takein')
-	uni.switchTab({
-		url: '/pages/menu/menu'
-	})
-}
-
-const takeout = () => {
-	main.SET_ORDER_TYPE('takeout')
-	uni.switchTab({
-		url: '/pages/menu/menu'
-	}) 
-}
-
-const coupons = () => { 
-	console.log("--> % orderType:\n", main.orderType)
-	console.log("--> % isLogin:\n", main.isLogin)
-	if(!main.isLogin) {
-		uni.navigateTo({url: '/pages/components/pages/login/login'})
-		return
-	}
-	uni.navigateTo({
-		url: '/pages/components/pages/coupons/coupons'
-	})
-}
-
-const goScore = () => { 
-	uni.navigateTo({
-		url: '/pages/components/pages/scoreproduct/list'
-	})
-}
-
-
+
+const handGetListAds = async () => {
+	let shop_id = store.id ? store.id : 0;
+	let data = await menuAds({
+		shop_id: shop_id
+	});
+	if (data) {
+		listAds.value = data.list;
+		console.log('listAds:',listAds.value)
+		uni.setStorage({
+				key: 'isActive',
+				data: data.isActive
+			});
+		if(data.list.length > 0){
+			uni.setStorage({
+					key: 'shopAd',
+					data: data.list[0].image
+			 });
+			}
+		}
+}
+
+const takein = () => {
+	main.SET_ORDER_TYPE('takein')
+	uni.switchTab({
+		url: '/pages/menu/menu'
+	})
+}
+
+const takeout = () => {
+	main.SET_ORDER_TYPE('takeout')
+	uni.switchTab({
+		url: '/pages/menu/menu'
+	}) 
+}
+
+const coupons = () => { 
+	console.log("--> % orderType:\n", main.orderType)
+	console.log("--> % isLogin:\n", main.isLogin)
+	if(!main.isLogin) {
+		uni.navigateTo({url: '/pages/components/pages/login/login'})
+		return
+	}
+	uni.navigateTo({
+		url: '/pages/components/pages/coupons/coupons'
+	})
+}
+
+const goScore = () => { 
+	uni.navigateTo({
+		url: '/pages/components/pages/scoreproduct/list'
+	})
+}
+
+
 
 
 onLoad(() => {
- // main.init()
+ // main.init()
   handGetListAds()
 })
 
 </script>
 
-<style lang="scss">
-.yshop-menu {
-	//margin-bottom: 10rpx;
-	// position: relative;
-	margin-top: 20rpx;
-}
-.yshop-menu-item {
-	background-color: #ffffff;
-	width: 355rpx;
-	padding-bottom: 30rpx;
-}
-	
-.img-01 {
-	width: 100px;
-	height: 100rpx;
-	margin-top: 30rpx;
-}
-.img-02 {
-	width: 110px;
-	height: 110rpx;
-	margin-top: 20rpx;
-}
-	
-	
-/* #ifdef H5 */
-page {
-	height: auto;
-	min-height: 100%;
-}
-/* #endif */
-page {
-	//background-color: #ffffff!important;
-}
-.banner {
-	position: relative;
-	width: 100%;
-	//height: 300rpx;
-	
-	.bg {
-		width: 100%;
-		height: 300rpx;
-	}
-	
-	.intro {
-		position: absolute;
-		top: calc(50rpx + var(--status-bar-height));
-		left: 40rpx;
-		color: #FFFFFF;
-		display: flex;
-		flex-direction: column;
-		
-		.greet {
-			font-size: $font-size-lg;
-			margin-bottom: 10rpx;
-		}
-		
-		.note {
-			font-size: $font-size-sm;
-		}
-	}
-}
-
-.content {
-	padding: 0 15rpx;
-}
-
-
-.info {
-	position: relative;
-	margin: 10rpx 0;
-	border-radius: 10rpx;
-	background-color: #ffffff;
-	box-shadow: $box-shadow;
-	//padding: 30rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 25rpx;
-	
-	.integral_section {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		
-		.top {
-			display: flex;
-			align-items: center;
-			
-			.title {
-				color: $text-color-base;
-				font-size: $font-size-base;
-				margin-right: 10rpx;
-			}
-			.value {
-				font-size: 44rpx;
-				font-weight: bold;
-			}
-		}
-		
-		.bottom {
-			font-size: $font-size-sm;
-			color: $text-color-assist;
-			display: flex;
-			align-items: center;
-		}
-	}
-	
-	.qrcode_section {
-		color: $color-primary;
-		display: flex;
-		//flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		font-size: $font-size-sm;
-		
-		image {
-			width: 40rpx;
-			height: 40rpx;
-			margin-bottom: 10rpx;
-		}
-	}
-}
+<style lang="scss">
+// 首页局部尺寸 token（与 uni.scss 全局变量配合）
+$index-banner-height: 300rpx;
+$index-menu-item-width: 355rpx;
+$index-card-radius: 10rpx;
+$index-content-padding-x: 15rpx;
+$index-intro-offset-x: 40rpx;
+$index-intro-offset-y: 50rpx;
+$index-value-font-size: 44rpx;
+$index-gap-sm: 10rpx;
 
+/* #ifdef H5 */
+page {
+	height: auto;
+	min-height: 100%;
+}
+/* #endif */
+
+.index-page {
+	--index-banner-height: #{$index-banner-height};
+	--index-menu-item-width: #{$index-menu-item-width};
+
+	.index-banner {
+		position: relative;
+		width: 100%;
+
+		&__swiper {
+			width: 100%;
+			height: var(--index-banner-height);
+		}
+
+		&__intro {
+			position: absolute;
+			top: calc(#{$index-intro-offset-y} + var(--status-bar-height));
+			left: $index-intro-offset-x;
+			color: $text-color-white;
+			display: flex;
+			flex-direction: column;
+		}
+
+		&__greet {
+			font-size: $font-size-lg;
+			margin-bottom: $index-gap-sm;
+		}
+
+		&__note {
+			font-size: $font-size-sm;
+		}
+	}
+
+	.index-content {
+		padding: 0 $index-content-padding-x;
+	}
+
+	.index-menu {
+		margin-top: $spacing-row-base;
+
+		&__item {
+			width: var(--index-menu-item-width);
+			padding-bottom: $spacing-row-lg;
+			background-color: $text-color-white;
+		}
+
+		&__icon {
+			width: 100rpx;
+			height: 100rpx;
+			margin-top: $spacing-row-lg;
+		}
+	}
+
+	.index-card {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin: $index-gap-sm 0;
+		padding: 25rpx;
+		border-radius: $index-card-radius;
+		background-color: $text-color-white;
+		box-shadow: $box-shadow;
+
+		&__main {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+		}
+
+		&__header {
+			display: flex;
+			align-items: center;
+		}
+
+		&__title {
+			margin-right: $index-gap-sm;
+			font-size: $font-size-base;
+			color: $text-color-base;
+		}
+
+		&__value {
+			font-size: $index-value-font-size;
+			font-weight: bold;
+		}
+
+		&__desc {
+			display: flex;
+			align-items: center;
+			font-size: $font-size-sm;
+			color: $text-color-assist;
+		}
+
+		&__action {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: $font-size-sm;
+			color: $color-primary;
+
+			&--with-icon {
+				flex-direction: column;
+			}
+		}
+
+		&__action-icon {
+			width: $img-size-sm;
+			height: $img-size-sm;
+			margin-bottom: $index-gap-sm;
+		}
+	}
+}
 </style>
diff --git a/yshop-drink-uniapp-vue3/pages/menu/menu.vue b/yshop-drink-uniapp-vue3/pages/menu/menu.vue
index b3201a9..4873f2a 100644
--- a/yshop-drink-uniapp-vue3/pages/menu/menu.vue
+++ b/yshop-drink-uniapp-vue3/pages/menu/menu.vue
@@ -11,14 +11,14 @@
 			<!-- <view>
 				<image :src="shopAd" mode="aspectFill" class="w-100 " style="height: 250rpx;"></image>
 			</view> -->
-			<view style="height: 60rpx;background-color: #FFFFFF;" v-if="store.notice">
+			<view class="notice-bar" v-if="store.notice">
 					<uv-notice-bar  :text="store.notice"></uv-notice-bar>
 			</view>
 		<view class="main">
 			<view class="nav">
 				<view class="header">
-					<view class="mr-1"><image :src="store.image" style="width:80rpx ; height: 80rpx; "></image></view>
-					<view class="left" v-if="orderType == 'takein'" style="">
+					<view class="mr-1"><image :src="store.image" class="store-header-img"></image></view>
+					<view class="left" v-if="orderType == 'takein'">
 						<view class="store-name" @click="selectShop()">
 							<text>{{ store.name }}</text>
 							<view class="iconfont iconarrow-right"></view>
@@ -50,10 +50,10 @@
 		
 			<!-- #ifdef H5 -->
 			<view class="content"
-				:style="{height: 'calc(100vh - 500rpx + '+(store.notice ? '0rpx':'60rpx')+')'}">
+				:style="{height: 'calc(100vh - 300rpx + '+(store.notice ? '0rpx':'60rpx')+')'}">
 				<!-- #endif -->
 				<!-- #ifndef H5 -->
-				<view class="content" :style="{height: 'calc(100vh - 500rpx + '+(store.notice ? '0rpx':'60rpx')+')'}">
+				<view class="content" :style="{height: 'calc(100vh - 350rpx + '+(store.notice ? '0rpx':'60rpx')+')'}">
 					<!-- #endif -->
 					<scroll-view class="menus" :scroll-into-view="menuScrollIntoView" scroll-with-animation scroll-y>
 						<view class="wrapper">
@@ -79,7 +79,7 @@
 									<view class="items">
 										<!-- 商品 begin -->
 										<view class="good" v-for="(good, key) in item.goodsList" :key="key"
-											:class="{'backgroud-grey': good.stock <= 0}">
+											:class="{'background-grey': good.stock <= 0}">
 											<image mode="aspectFill" :src="good.image" class="image"
 												@tap="showGoodDetailModal(item, good)"></image>
 											<view class="right">
@@ -107,7 +107,7 @@
 									</view>
 								</view>
 								<!-- category end -->
-								<view style="height: 110rpx;"></view>
+								<view class="bottom-spacer"></view>
 							</view>
 						</view>
 					</scroll-view>
@@ -226,7 +226,7 @@
 		<!--轻提示-->
 		<view class="loading" v-else>
 			<uv-loading-icon  color="#DA5650" size=40 mode="circle" ></uv-loading-icon>
-			<button type="primary" style="z-index: 3001;position: absolute;top: 650rpx;" @click="init"
+			<button type="primary" class="locate-store-btn" @click="init"
 				v-if="!store.id">定位最近的门店</button>
 		<!-- 	<uv-toast ref="uToast"></uv-toast> -->
 		</view>
@@ -272,7 +272,71 @@ const shopAd = ref('')
 const isCartShow = ref(true)
 const popup = ref()
 
-
+// #region agent log
+const debugLog = (hypothesisId, location, message, data = {}) => {
+	fetch('http://127.0.0.1:7584/ingest/889fdfba-29d4-4509-84ce-3dfa9254da00', {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json', 'X-Debug-Session-Id': 'e0348b' },
+		body: JSON.stringify({
+			sessionId: 'e0348b',
+			runId: 'pre-fix',
+			hypothesisId,
+			location,
+			message,
+			data,
+			timestamp: Date.now()
+		})
+	}).catch(() => {})
+}
+const measureMenuLayout = () => {
+	const sys = uni.getSystemInfoSync()
+	const notice = !!store.value?.notice
+	const inlineHeight = `calc(100vh - 500rpx + ${notice ? '0rpx' : '60rpx'})`
+	let platform = 'OTHER'
+	// #ifdef H5
+	platform = 'H5'
+	// #endif
+	// #ifdef MP-WEIXIN
+	platform = 'MP-WEIXIN'
+	// #endif
+	debugLog('H1', 'menu.vue:measureMenuLayout', 'layout context', {
+		platform,
+		windowHeight: sys.windowHeight,
+		screenHeight: sys.screenHeight,
+		statusBarHeight: sys.statusBarHeight,
+		hasNotice: notice,
+		inlineHeight,
+		cssExpectedH5: 'calc(100vh - 212rpx - 188rpx)',
+		cssExpectedDefault: 'calc(100vh - 212rpx)'
+	})
+	const q = uni.createSelectorQuery()
+	q.select('.container').boundingClientRect()
+	q.select('.main').boundingClientRect()
+	q.select('.content').boundingClientRect()
+	q.select('.menus').boundingClientRect()
+	q.select('.goods').boundingClientRect()
+	q.select('.nav').boundingClientRect()
+	q.exec((res) => {
+		const [container, main, content, menus, goods, nav] = res || []
+		debugLog('H3', 'menu.vue:measureMenuLayout', 'parent rects', {
+			containerH: container?.height,
+			mainH: main?.height,
+			navH: nav?.height
+		})
+		debugLog('H1', 'menu.vue:measureMenuLayout', 'content rect', {
+			contentH: content?.height,
+			contentTop: content?.top,
+			windowHeight: sys.windowHeight,
+			heightRatio: content?.height && sys.windowHeight ? (content.height / sys.windowHeight).toFixed(3) : null
+		})
+		debugLog('H5', 'menu.vue:measureMenuLayout', 'scroll columns', {
+			menusH: menus?.height,
+			goodsH: goods?.height,
+			menusGoodsDelta: menus?.height != null && goods?.height != null ? Math.abs(menus.height - goods.height) : null
+		})
+	})
+}
+// #endregion
 
 const newkmUnit = computed(() => (param) =>{
   console.log('param:',param)
@@ -436,6 +500,7 @@ const getShopList = async(res) => {
 			console.log('goods:',mygoods)
 			console.log('goods:',goods.value)
 			loading.value = false;
+			nextTick(() => measureMenuLayout())
 			uni.stopPullDownRefresh();
 		}
 	}
@@ -707,342 +772,393 @@ const toPay = () => {
 </script>
 
 <style lang="scss" scoped>
+// 点餐页局部 token（与 uni.scss 全局变量配合）
+$menu-nav-height: 140rpx;
+$menu-sidebar-width: 200rpx;
+$menu-radius-sm: 8rpx;
+$menu-radius-pill: 38rpx;
+$menu-radius-cart: 48rpx;
+$menu-good-image-size: 160rpx;
+$menu-control-size-sm: 44rpx;
+$menu-control-size: 46rpx;
+$menu-list-bottom-space: 200rpx;
+$menu-cart-height: 96rpx;
+$menu-cart-popup-max-height: 60vh;
+$menu-cart-list-bottom: 156rpx;
+$menu-cart-price-offset: 120rpx;
+$menu-sold-out-bg: #e1e4e4;
+$menu-secondary-color: #5a5b5c;
+$menu-shadow-cart: 0 0 20rpx rgba(0, 0, 0, 0.2);
+$menu-dot-size: 34rpx;
+$menu-badge-size: 36rpx;
+$menu-tag-size: 40rpx;
+$menu-font-menu: 26rpx;
+$menu-gap-sm: 10rpx;
+$menu-gap-base: 20rpx;
+$menu-divider-height: 2rpx;
 
-	/* #ifdef H5 */
-	page {
-		height: auto;
-		min-height: 100%;
+@mixin text-ellipsis {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+@mixin quantity-control($size) {
+	.btn,
+	.number {
+		width: $size;
+		height: $size;
+		line-height: $size;
+		text-align: center;
 	}
-	/* #endif */
-	
-	.container {
-		overflow: hidden;
-		position: relative;
+
+	.btn {
+		padding: 0;
+		border-radius: $border-radius-circle;
 	}
-	
-	.loading {
+}
+
+@mixin list-divider {
+	&::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 0;
 		width: 100%;
-		height: 100%;
+		height: $menu-divider-height;
+		background-color: $border-color;
+		transform: scaleY(0.6);
+	}
+}
+
+/* #ifdef H5 */
+page {
+	height: auto;
+	min-height: 100%;
+}
+/* #endif */
+
+.container {
+	--menu-control-size-sm: #{$menu-control-size-sm};
+	--menu-control-size: #{$menu-control-size};
+	--menu-cart-popup-max-height: #{$menu-cart-popup-max-height};
+
+	overflow: hidden;
+	position: relative;
+}
+
+.loading {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	image {
+		width: 260rpx;
+		height: 260rpx;
+		position: relative;
+		margin-top: -200rpx;
+		/* #ifdef h5 */
+		margin-top: 0;
+		/* #endif */
+	}
+}
+
+.main {
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+
+.nav {
+	width: 100%;
+	height: $menu-nav-height;
+	display: flex;
+	flex-direction: column;
+
+	.header {
+		width: 100%;
+		height: $menu-nav-height;
 		display: flex;
 		align-items: center;
-		justify-content: center;
-	
-		image {
-			width: 260rpx;
-			height: 260rpx;
-			position: relative;
-			margin-top: -200rpx;
-			/* #ifdef h5 */
-			margin-top: 0;
-			/* #endif */
-		}
-	}
-	
-	
-	.main {
-		width: 100%;
-		height: 100%;
-		position: relative;
-	}
-	
-	.nav {
-		width: 100%;
-		//height: 212rpx;
-		height: 140rpx;
-		display: flex;
-		flex-direction: column;
-	
-		.header {
-			width: 100%;
+		justify-content: space-between;
+		padding: $spacing-row-base;
+		background-color: $text-color-white;
+
+		.left {
+			flex: 1;
 			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding: 20rpx;
-			background-color: #ffffff;
-			height: 140rpx;
-	
-			.left {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-	
-				.store-name {
-					display: flex;
-					justify-content: flex-start;
-					align-items: center;
-					font-size: $font-size-lg;
-					margin-bottom: 10rpx;
-					.small {
-						font-size: $font-size-sm;
-						color: $text-color-assist;
-					}
-					.iconfont {
-						margin-left: 10rpx;
-						line-height: 100%;
-					}
-				}
-	
-				.store-location {
-					display: flex;
-					justify-content: flex-start;
-					align-items: center;
-					color: $text-color-assist;
-					font-size: $font-size-sm;
-	
-					.iconfont {
-						vertical-align: middle;
-						display: table-cell;
-						color: $color-primary;
-						line-height: 100%;
-					}
-				}
-			}
-	
-			.right {
-				background-color: $bg-color-grey;
-				border-radius: 38rpx;
+			flex-direction: column;
+
+			.store-name {
 				display: flex;
 				align-items: center;
+				justify-content: flex-start;
+				margin-bottom: $menu-gap-sm;
+				font-size: $font-size-lg;
+
+				.small {
+					font-size: $font-size-sm;
+					color: $text-color-assist;
+				}
+
+				.iconfont {
+					margin-left: $menu-gap-sm;
+					line-height: 100%;
+				}
+			}
+
+			.store-location {
+				display: flex;
+				align-items: center;
+				justify-content: flex-start;
 				font-size: $font-size-sm;
-				padding: 0 38rpx;
 				color: $text-color-assist;
-	
-				.dinein,
-				.takeout {
-					position: relative;
-					display: flex;
-					align-items: center;
-					&.active {
-						padding: 14rpx 38rpx;
-						color: #ffffff;
-						background-color: $color-primary;
-						//background-color: #5A5B5C;
-						border-radius: 38rpx;
-					}
-				}
-	
-				.takeout {
-					margin-left: 20rpx;
-					height: 100%;
-					flex: 1;
-					padding: 14rpx 0;
-				}
-	
-				.dinein.active {
-					margin-left: -38rpx;
-				}
-	
-				.takeout.active {
-					margin-right: -38rpx;
+
+				.iconfont {
+					display: table-cell;
+					vertical-align: middle;
+					line-height: 100%;
+					color: $color-primary;
 				}
 			}
 		}
 
-	}
-	
-	.content {
-		width: 100%;
-		height: calc(100vh - 212rpx);
-		/* #ifdef H5 */
-		height: calc(100vh - 212rpx - 188rpx);
-		/* #endif */
-		display: flex;
-	
-		.menus {
-			width: 200rpx;
-			height: 100%;
-			overflow: hidden;
+		.right {
+			display: flex;
+			align-items: center;
+			padding: 0 $menu-radius-pill;
+			font-size: $font-size-sm;
+			color: $text-color-assist;
 			background-color: $bg-color-grey;
-	
-			.wrapper {
-				width: 100%;
-				height: 100%;
-	
-				.menu {
-					display: flex;
-					align-items: center;
-					justify-content: flex-start;
-					padding: 30rpx 20rpx;
-					font-size: 26rpx;
-					color: $text-color-assist;
-					position: relative;
-	
-					&.current {
-						background-color: #ffffff;
-						color: $text-color-base;
-					}
-	
-					.dot {
-						position: absolute;
-						width: 34rpx;
-						height: 34rpx;
-						line-height: 34rpx;
-						font-size: 22rpx;
-						background-color: $color-primary;
-						//background-color: #5A5B5C;
-						color: #ffffff;
-						top: 16rpx;
-						right: 10rpx;
-						border-radius: 100%;
-						text-align: center;
-					}
+			border-radius: $menu-radius-pill;
+
+			.dinein,
+			.takeout {
+				position: relative;
+				display: flex;
+				align-items: center;
+
+				&.active {
+					padding: 14rpx $menu-radius-pill;
+					color: $text-color-white;
+					background-color: $color-primary;
+					border-radius: $menu-radius-pill;
 				}
-				.menu:last-child {
-					margin-bottom: 200rpx;
+			}
+
+			.takeout {
+				flex: 1;
+				height: 100%;
+				margin-left: $spacing-row-base;
+				padding: 14rpx 0;
+			}
+
+			.dinein.active {
+				margin-left: -$menu-radius-pill;
+			}
+
+			.takeout.active {
+				margin-right: -$menu-radius-pill;
+			}
+		}
+	}
+}
+	
+.content {
+	width: 100%;
+	height: calc(100vh - 212rpx);
+	/* #ifdef H5 */
+	height: calc(100vh - 212rpx - 188rpx);
+	/* #endif */
+	display: flex;
+
+	.menus {
+		width: $menu-sidebar-width;
+		height: 100%;
+		overflow: hidden;
+		background-color: $bg-color-grey;
+
+		.wrapper {
+			width: 100%;
+			height: 100%;
+
+			.menu {
+				position: relative;
+				display: flex;
+				align-items: center;
+				justify-content: flex-start;
+				padding: $spacing-row-lg $spacing-row-base;
+				font-size: $menu-font-menu;
+				color: $text-color-assist;
+
+				&.current {
+					color: $text-color-base;
+					background-color: $text-color-white;
+				}
+
+				.dot {
+					position: absolute;
+					top: 16rpx;
+					right: $menu-gap-sm;
+					width: $menu-dot-size;
+					height: $menu-dot-size;
+					font-size: 22rpx;
+					line-height: $menu-dot-size;
+					text-align: center;
+					color: $text-color-white;
+					background-color: $color-primary;
+					border-radius: $border-radius-circle;
+				}
+
+				&:last-child {
+					margin-bottom: $menu-list-bottom-space;
 				}
 			}
 		}
-	
-		.goods {
-			flex: 1;
+	}
+
+	.goods {
+		flex: 1;
+		height: 100%;
+		overflow: hidden;
+		background-color: $text-color-white;
+
+		.wrapper {
+			width: 100%;
 			height: 100%;
-			overflow: hidden;
-			background-color: #ffffff;
-	
-			.wrapper {
-				width: 100%;
-				height: 100%;
-				padding: 20rpx;
-	
-				.ads {
-					height: calc(300 / 550 * 510rpx);
-	
-					image {
-						width: 100%;
-						height: 100%;
-						border-radius: 8rpx;
-					}
-				}
-	
-				.list {
+			padding: $spacing-row-base;
+
+			.ads {
+				height: calc(300 / 550 * 510rpx);
+
+				image {
 					width: 100%;
-					font-size: $font-size-base;
-	
-					.category {
-						width: 100%;
-	
-						.title {
-							padding: 30rpx 0;
-							display: flex;
-							align-items: center;
-							color: $text-color-base;
-	
-							.icon {
-								width: 38rpx;
-								height: 38rpx;
-								margin-left: 10rpx;
-							}
+					height: 100%;
+					border-radius: $menu-radius-sm;
+				}
+			}
+
+			.list {
+				width: 100%;
+				font-size: $font-size-base;
+
+				.category {
+					width: 100%;
+
+					.title {
+						display: flex;
+						align-items: center;
+						padding: $spacing-row-lg 0;
+						color: $text-color-base;
+
+						.icon {
+							width: 38rpx;
+							height: 38rpx;
+							margin-left: $menu-gap-sm;
 						}
 					}
-					.category:last-child {
-						margin-bottom: 200rpx;
+
+					&:last-child {
+						margin-bottom: $menu-list-bottom-space;
 					}
-	
+
 					.items {
 						display: flex;
 						flex-direction: column;
-						padding-bottom: -30rpx;
-	
+
 						.good {
 							display: flex;
 							align-items: center;
-							//margin-bottom: 30rpx;
 							padding: 15rpx 0;
+
 							.image {
-								width: 160rpx;
-								height: 160rpx;
-								margin-right: 20rpx;
-								border-radius: 8rpx;
+								width: $menu-good-image-size;
+								height: $menu-good-image-size;
+								margin-right: $spacing-row-base;
+								border-radius: $menu-radius-sm;
 							}
-	
+
 							.right {
 								flex: 1;
-								height: 160rpx;
-								overflow: hidden;
 								display: flex;
 								flex-direction: column;
 								align-items: flex-start;
 								justify-content: space-between;
+								height: $menu-good-image-size;
 								padding-right: 14rpx;
-	
+								overflow: hidden;
+
 								.name {
-									font-size: $font-size-base;
-									margin-bottom: 10rpx;
 									width: 100%;
-									overflow: hidden;
-									text-overflow: ellipsis;
-									white-space: nowrap;
+									margin-bottom: $menu-gap-sm;
+									font-size: $font-size-base;
+									@include text-ellipsis;
 								}
-	
+
 								.tips {
 									width: 100%;
 									height: 40rpx;
-									line-height: 40rpx;
-									overflow: hidden;
-									text-overflow: ellipsis;
-									white-space: nowrap;
+									margin-bottom: $menu-gap-sm;
 									font-size: $font-size-sm;
+									line-height: 40rpx;
 									color: $text-color-assist;
-									margin-bottom: 10rpx;
+									@include text-ellipsis;
 								}
-	
+
 								.price_and_action {
-									width: 100%;
 									display: flex;
-									justify-content: space-between;
 									align-items: center;
-	
+									justify-content: space-between;
+									width: 100%;
+
 									.price {
 										font-size: $font-size-base;
 										font-weight: 600;
 									}
-	
+
 									.btn-group {
-										display: flex;
-										justify-content: space-between;
-										align-items: center;
 										position: relative;
-	
+										display: flex;
+										align-items: center;
+										justify-content: space-between;
+
 										.btn {
-											padding: 0 20rpx;
 											box-sizing: border-box;
+											height: var(--menu-control-size-sm);
+											padding: 0 $spacing-row-base;
 											font-size: $font-size-sm;
-											height: 44rpx;
-											line-height: 44rpx;
-	
+											line-height: var(--menu-control-size-sm);
+
 											&.property_btn {
 												border-radius: 24rpx;
 											}
-	
+
 											&.add_btn,
 											&.reduce_btn {
+												width: var(--menu-control-size-sm);
 												padding: 0;
-												width: 44rpx;
-												border-radius: 44rpx;
+												border-radius: var(--menu-control-size-sm);
 											}
 										}
-	
+
 										.dot {
 											position: absolute;
-											background-color: #ffffff;
-											border: 1px solid $color-primary;
-											color: $color-primary;
-											font-size: $font-size-sm;
-											width: 36rpx;
-											height: 36rpx;
-											line-height: 36rpx;
-											text-align: center;
-											border-radius: 100%;
-											right: -12rpx;
 											top: -10rpx;
-										}
-	
-										.number {
-											width: 44rpx;
-											height: 44rpx;
-											line-height: 44rpx;
+											right: -12rpx;
+											width: $menu-badge-size;
+											height: $menu-badge-size;
+											font-size: $font-size-sm;
+											line-height: $menu-badge-size;
 											text-align: center;
+											color: $color-primary;
+											background-color: $text-color-white;
+											border: 1px solid $color-primary;
+											border-radius: $border-radius-circle;
 										}
+
+										@include quantity-control(var(--menu-control-size-sm));
 									}
 								}
 							}
@@ -1052,359 +1168,344 @@ const toPay = () => {
 			}
 		}
 	}
+}
 	
-	
-	.good-detail-modal {
-		width: 100%;
-		height: 100%;
+.good-detail-modal {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+
+	.cover {
 		display: flex;
-		flex-direction: column;
-	
-		.cover {
-			height: 20rpx;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-	
-			.btn-group {
-				position: absolute;
-				right: 10rpx;
-				top: 0rpx;
-				display: flex;
-				align-items: center;
-				justify-content: space-around;
-				z-index: 210;
-				 
-				image {
-					width: 80rpx;
-					height: 80rpx;
-				}
-			}
-		}
-	
-		.detail {
-			width: 100%;
-			min-height: 1vh;
-			max-height: calc(90vh - 320rpx - 80rpx - 120rpx);
-			position: relative;
-	
-			.image {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				image {
-					width: 260rpx;
-					height: 260rpx;
-				}
-			}
-			.wrapper {
-				width: 100%;
-				height: 100%;
-				overflow: hidden;
-	
-				.basic {
-					padding: 0 20rpx 30rpx;
-					display: flex;
-					flex-direction: column;
-					.name {
-						font-size: $font-size-base;
-						color: $text-color-base;
-						margin-bottom: 10rpx;
-					}
-					.tips {
-						font-size: $font-size-sm;
-						color: $text-color-grey;
-					}
-				}
-	
-				.properties {
-					width: 100%;
-					border-top: 2rpx solid $bg-color-grey;
-					padding: 10rpx 30rpx 0;
-					display: flex;
-					flex-direction: column;
-	
-					.property {
-						width: 100%;
-						display: flex;
-						flex-direction: column;
-						margin-bottom: 30rpx;
-						padding-bottom: -16rpx;
-	
-						.title {
-							width: 100%;
-							display: flex;
-							justify-content: flex-start;
-							align-items: center;
-							margin-bottom: 20rpx;
-	
-							.name {
-								font-size: 26rpx;
-								color: $text-color-base;
-								margin-right: 20rpx;
-							}
-	
-							.desc {
-								flex: 1;
-								font-size: $font-size-sm;
-								color: $color-primary;
-								overflow: hidden;
-								text-overflow: ellipsis;
-								white-space: nowrap;
-							}
-						}
-	
-						.values {
-							width: 100%;
-							display: flex;
-							flex-wrap: wrap;
-	
-							.value {
-								border-radius: 8rpx;
-								background-color: $bg-color-grey;
-								padding: 16rpx 30rpx;
-								font-size: 26rpx;
-								color: $text-color-assist;
-								margin-right: 16rpx;
-								margin-bottom: 16rpx;
-	
-								&.default {
-									background-color: $color-primary;
-									color: $text-color-white;
-								}
-							}
-						}
-					}
-				}
-			}
-		}
-	
-		.action {
+		align-items: center;
+		justify-content: center;
+		height: 20rpx;
+
+		.btn-group {
+			position: absolute;
+			top: 0;
+			right: $menu-gap-sm;
+			z-index: 210;
 			display: flex;
 			align-items: center;
-			justify-content: space-between;
-			background-color: $bg-color-grey;
-			height: 120rpx;
-			padding: 0 26rpx;
-	
-			.left {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-				margin-right: 20rpx;
-				overflow: hidden;
-	
-				.price {
-					font-size: $font-size-lg;
-					color: $text-color-base;
-				}
-	
-				.props {
-					color: $text-color-assist;
-					font-size: 24rpx;
-					width: 100%;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				}
+			justify-content: space-around;
+
+			image {
+				width: $img-size-lg;
+				height: $img-size-lg;
 			}
-			.btn-group {
-				display: flex;
-				align-items: center;
-				justify-content: space-around;
-	
-				.number {
-					font-size: $font-size-base;
-					width: 44rpx;
-					height: 44rpx;
-					line-height: 44rpx;
-					text-align: center;
-				}
-	
-				.btn {
-					padding: 0;
-					font-size: $font-size-base;
-					width: 44rpx;
-					height: 44rpx;
-					line-height: 44rpx;
-					border-radius: 100%;
-				}
-			}
-		}
-	
-		.add-to-cart-btn {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			background-color: $color-primary;
-			color: $text-color-white;
-			font-size: $font-size-base;
-			height: 80rpx;
-			border-radius: 0 0 12rpx 12rpx;
 		}
 	}
-	
-	.cart-box {
-		position: fixed;
-		bottom: 30rpx;
-		/* #ifdef H5 */
-		bottom:var(--window-bottom);
-		//bottom: 100rpx;
-		/* #endif */
-		left: 30rpx;
-		right: 30rpx;
-		height: 96rpx;
-		border-radius: 48rpx;
-		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
-		background-color: #ffffff;
+
+	.detail {
+		position: relative;
+		width: 100%;
+		min-height: 1vh;
+		max-height: calc(90vh - 320rpx - 80rpx - 120rpx);
+
+		.image {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			image {
+				width: 260rpx;
+				height: 260rpx;
+			}
+		}
+
+		.wrapper {
+			width: 100%;
+			height: 100%;
+			overflow: hidden;
+
+			.basic {
+				display: flex;
+				flex-direction: column;
+				padding: 0 $spacing-row-base $spacing-row-lg;
+
+				.name {
+					margin-bottom: $menu-gap-sm;
+					font-size: $font-size-base;
+					color: $text-color-base;
+				}
+
+				.tips {
+					font-size: $font-size-sm;
+					color: $text-color-grey;
+				}
+			}
+
+			.properties {
+				display: flex;
+				flex-direction: column;
+				width: 100%;
+				padding: $menu-gap-sm $spacing-row-lg 0;
+				border-top: $menu-divider-height solid $bg-color-grey;
+
+				.property {
+					display: flex;
+					flex-direction: column;
+					width: 100%;
+					margin-bottom: $spacing-row-lg;
+
+					.title {
+						display: flex;
+						align-items: center;
+						justify-content: flex-start;
+						width: 100%;
+						margin-bottom: $spacing-row-base;
+
+						.name {
+							margin-right: $spacing-row-base;
+							font-size: $menu-font-menu;
+							color: $text-color-base;
+						}
+
+						.desc {
+							flex: 1;
+							font-size: $font-size-sm;
+							color: $color-primary;
+							@include text-ellipsis;
+						}
+					}
+
+					.values {
+						display: flex;
+						flex-wrap: wrap;
+						width: 100%;
+
+						.value {
+							margin-right: $spacing-col-base;
+							margin-bottom: $spacing-col-base;
+							padding: $spacing-col-base $spacing-row-lg;
+							font-size: $menu-font-menu;
+							color: $text-color-assist;
+							background-color: $bg-color-grey;
+							border-radius: $menu-radius-sm;
+
+							&.default {
+								color: $text-color-white;
+								background-color: $color-primary;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.action {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		z-index: 9999;
-	
-		.cart-img {
-			width: 96rpx;
-			height: 96rpx;
-			position: relative;
-			margin-top: -48rpx;
-		}
-	
-		.pay-btn {
-			height: 100%;
-			padding: 0 30rpx;
-			color: #ffffff;
-			border-radius: 0 50rpx 50rpx 0;
+		height: 120rpx;
+		padding: 0 26rpx;
+		background-color: $bg-color-grey;
+
+		.left {
+			flex: 1;
 			display: flex;
-			align-items: center;
-			font-size: $font-size-base;
-		}
-	
-		.mark {
-			padding-left: 46rpx;
-			margin-right: 30rpx;
-			position: relative;
-	
-			.tag {
-				//background-color: $color-warning;
-				background-color: #09b4f1;;
-				color: $text-color-white;
-				display: flex;
-				justify-content: center;
-				align-items: center;
+			flex-direction: column;
+			justify-content: center;
+			margin-right: $spacing-row-base;
+			overflow: hidden;
+
+			.price {
+				font-size: $font-size-lg;
+				color: $text-color-base;
+			}
+
+			.props {
+				width: 100%;
 				font-size: $font-size-sm;
-				position: absolute;
-				right: -10rpx;
-				top: -50rpx;
-				border-radius: 100%;
-				padding: 4rpx;
-				width: 40rpx;
-				height: 40rpx;
-				opacity: 0.9;
+				color: $text-color-assist;
+				@include text-ellipsis;
 			}
 		}
-	
-		.price {
-			flex: 1;
-			color: $text-color-base;
+
+		.btn-group {
+			display: flex;
+			align-items: center;
+			justify-content: space-around;
+
+			.btn {
+				font-size: $font-size-base;
+			}
+
+			@include quantity-control(var(--menu-control-size-sm));
 		}
 	}
+
+	.add-to-cart-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 80rpx;
+		font-size: $font-size-base;
+		color: $text-color-white;
+		background-color: $color-primary;
+		border-radius: 0 0 $border-radius-lg $border-radius-lg;
+	}
+}
 	
-	.cart-popup {
-		.top {
-			background-color: $bg-color-primary;
-			//color: $color-primary;
-			color: #5A5B5C;
-			padding: 10rpx 30rpx;
-			font-size: 24rpx;
-			text-align: right;
+.cart-box {
+	position: fixed;
+	bottom: $spacing-row-lg;
+	/* #ifdef H5 */
+	bottom: var(--window-bottom);
+	/* #endif */
+	left: $spacing-row-lg;
+	right: $spacing-row-lg;
+	z-index: 9999;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: $menu-cart-height;
+	background-color: $text-color-white;
+	border-radius: $menu-radius-cart;
+	box-shadow: $menu-shadow-cart;
+
+	.cart-img {
+		position: relative;
+		width: $menu-cart-height;
+		height: $menu-cart-height;
+		margin-top: calc(-1 * #{$menu-cart-height} / 2);
+	}
+
+	.pay-btn {
+		display: flex;
+		align-items: center;
+		height: 100%;
+		padding: 0 $spacing-row-lg;
+		font-size: $font-size-base;
+		color: $text-color-white;
+		border-radius: 0 50rpx 50rpx 0;
+	}
+
+	.mark {
+		position: relative;
+		margin-right: $spacing-row-lg;
+		padding-left: 46rpx;
+
+		.tag {
+			position: absolute;
+			top: -50rpx;
+			right: -10rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: $menu-tag-size;
+			height: $menu-tag-size;
+			padding: 4rpx;
+			font-size: $font-size-sm;
+			color: $text-color-white;
+			background-color: $color-primary;
+			border-radius: $border-radius-circle;
+			opacity: 0.9;
 		}
-		.cart-list {
-			background-color: #ffffff;
-			width: 100%;
-			overflow: hidden;
-			min-height: 1vh;
-			max-height: 60vh;
-	
-			.wrapper {
-				height: 100%;
+	}
+
+	.price {
+		flex: 1;
+		color: $text-color-base;
+	}
+}
+
+.cart-popup {
+	.top {
+		padding: $menu-gap-sm $spacing-row-lg;
+		font-size: $font-size-sm;
+		text-align: right;
+		color: $menu-secondary-color;
+		background-color: $bg-color-primary;
+	}
+
+	.cart-list {
+		width: 100%;
+		min-height: 1vh;
+		max-height: var(--menu-cart-popup-max-height);
+		overflow: hidden;
+		background-color: $text-color-white;
+
+		.wrapper {
+			display: flex;
+			flex-direction: column;
+			height: 100%;
+			padding: 0 $spacing-row-lg;
+			margin-bottom: $menu-cart-list-bottom;
+
+			.item {
+				position: relative;
 				display: flex;
-				flex-direction: column;
-				padding: 0 30rpx;
-				margin-bottom: 156rpx;
-	
-				.item {
+				align-items: center;
+				justify-content: space-between;
+				padding: $spacing-row-lg 0;
+				@include list-divider;
+
+				.left {
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+					margin-right: $spacing-row-lg;
+					overflow: hidden;
+
+					.name {
+						font-size: $font-size-sm;
+						color: $text-color-base;
+					}
+
+					.props {
+						font-size: $font-size-sm;
+						color: $text-color-assist;
+						@include text-ellipsis;
+					}
+				}
+
+				.center {
+					margin-right: $menu-cart-price-offset;
+					font-size: $font-size-base;
+				}
+
+				.right {
 					display: flex;
-					justify-content: space-between;
 					align-items: center;
-					padding: 30rpx 0;
-					position: relative;
-	
-					&::after {
-						content: ' ';
-						position: absolute;
-						bottom: 0;
-						left: 0;
-						width: 100%;
-						background-color: $border-color;
-						height: 2rpx;
-						transform: scaleY(0.6);
-					}
-	
-					.left {
-						flex: 1;
-						display: flex;
-						flex-direction: column;
-						overflow: hidden;
-						margin-right: 30rpx;
-	
-						.name {
-							font-size: $font-size-sm;
-							color: $text-color-base;
-						}
-						.props {
-							color: $text-color-assist;
-							font-size: 24rpx;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							white-space: nowrap;
-						}
-					}
-	
-					.center {
-						margin-right: 120rpx;
+					justify-content: space-between;
+					@include quantity-control(var(--menu-control-size));
+
+					.btn {
 						font-size: $font-size-base;
 					}
-	
-					.right {
-						display: flex;
-						align-items: center;
-						justify-content: space-between;
-	
-						.btn {
-							width: 46rpx;
-							height: 46rpx;
-							border-radius: 100%;
-							padding: 0;
-							text-align: center;
-							line-height: 46rpx;
-						}
-	
-						.number {
-							font-size: $font-size-base;
-							width: 46rpx;
-							height: 46rpx;
-							text-align: center;
-							line-height: 46rpx;
-						}
-					}
 				}
 			}
 		}
 	}
-	
-	.backgroud-grey {
-		background-color: #e1e4e4;
-		padding: 15rpx !important;
-	}
+}
+
+// 页面级工具类
+.notice-bar {
+	height: 60rpx;
+	background-color: $text-color-white;
+}
+
+.store-header-img {
+	width: $img-size-lg;
+	height: $img-size-lg;
+}
+
+.bottom-spacer {
+	height: 110rpx;
+}
+
+.locate-store-btn {
+	position: absolute;
+	top: 650rpx;
+	z-index: 3001;
+}
+
+.background-grey {
+	padding: 15rpx !important;
+	background-color: $menu-sold-out-bg;
+}
 </style>
diff --git a/yshop-drink-uniapp-vue3/pages/mine/mine.vue b/yshop-drink-uniapp-vue3/pages/mine/mine.vue
index 2a9f109..95b7f61 100644
--- a/yshop-drink-uniapp-vue3/pages/mine/mine.vue
+++ b/yshop-drink-uniapp-vue3/pages/mine/mine.vue
@@ -1,21 +1,21 @@
-<template>
-	<layout>
-		<uv-navbar
-		  :fixed="false"
-		  :title="title"
-		  left-arrow
-		  @leftClick="$onClickLeft"
+<template>
+	<layout>
+		<uv-navbar
+		  :fixed="false"
+		  :title="title"
+		  left-arrow
+		  @leftClick="$onClickLeft"
 		/>
-		<view class="container">
-			<view style="padding: 0 30rpx;">
+		<view class="container mine-page">
+			<view class="mine-page__user-section">
 				<!-- user box begin -->
-				<view class="d-flex flex-column bg-white user-box">
+				<view class="mine-user d-flex flex-column bg-white">
 
-					<view class="d-flex align-items-center">
-						<view class="avatar rounded-circle">
+					<view class="mine-user__header d-flex align-items-center">
+						<view class="mine-user__avatar rounded-circle">
 							<image :src="isLogin ? member.avatar ? member.avatar : '/static/images/mine/default.png' : '/static/images/mine/default.png'"></image>
 						</view>
-						<view class="d-flex flex-column flex-fill overflow-hidden" style="margin-top: 20rpx;">
+						<view class="mine-user__info d-flex flex-column flex-fill overflow-hidden">
 							<view v-if="isLogin"
 								class="font-size-lg font-weight-bold d-flex justify-content-start align-items-center"
 								@tap="serv({type:'pages',pages:'/pages/components/pages/mine/userinfo'})">
@@ -26,26 +26,26 @@
 						</view>
 					</view>
 					<!-- user grid begin -->
-					<view class="w-100 d-flex align-items-center just-content-center">
-						<view class="user-grid" @tap="serv({type:'pages',pages:'/pages/components/pages/coupons/coupons'})">
+					<view class="mine-user__stats w-100 d-flex align-items-center just-content-center">
+						<view class="mine-user__stat" @tap="serv({type:'pages',pages:'/pages/components/pages/coupons/coupons'})">
 							<view class="value font-size-extra-lg font-weight-bold text-color-base">
 								{{ isLogin ? member.couponCount : 0}}
 							</view>
 							<view class="font-size-sm text-color-assist">优惠券</view>
 						</view>
-						<view class="user-grid"  @tap="serv({type:'pages', pages: '/pages/components/pages/balance/bill?cate=1'})">
+						<view class="mine-user__stat" @tap="serv({type:'pages', pages: '/pages/components/pages/balance/bill?cate=1'})">
 							<view class="value font-size-extra-lg font-weight-bold text-color-base">
 								{{ isLogin ? member.integral : 0 }}
 							</view>
 							<view class="font-size-sm text-color-assist">积分</view>
 						</view>
-						<view class="user-grid">
+						<view class="mine-user__stat">
 							<view class="value font-size-extra-lg font-weight-bold text-color-base">
 								{{ isLogin ? member.nowMoney : 0 }}
 							</view>
 							<view class="font-size-sm text-color-assist">余额</view>
 						</view>
-						<view class="user-grid" @tap="serv({type:'pages', pages: '/pages/components/pages/balance/bill?cate=0'})">
+						<view class="mine-user__stat" @tap="serv({type:'pages', pages: '/pages/components/pages/balance/bill?cate=0'})">
 							<view class="value font-size-extra-lg font-weight-bold text-color-base">
 								{{ isLogin ? member.sumMoney : 0 }}
 							</view>
@@ -58,24 +58,24 @@
 
 			</view>
 			<!-- service box begin -->
-			<view class="service-box">
-				<view class="font-size-lg text-color-base font-weight-bold" style="margin-bottom: 20rpx;">我的服务</view>
+			<view class="mine-service">
+				<view class="mine-service__title font-size-lg text-color-base font-weight-bold">我的服务</view>
 				<view class="u-m-t-20">
 					<uv-cell-group>
 						<block v-for="(item, index) in services" :key='index'>
 							<uv-cell :title="item.name" v-if="item.type == 'contact'" :isLink="true">
 								<template #icon>
-									<image :src="item.image" style="width: 40rpx;height: 40rpx;" class="mr-1"></image>
+									<image :src="item.image" class="mine-service__icon mr-1"></image>
 								</template>
 							</uv-cell>
 							<uv-cell :isLink="true" :title="item.name" v-else-if="item.type == 'call'" v-on:click="makePhoneCall(item.phone)">
 								<template #icon>
-									<image :src="item.image" style="width: 40rpx;height: 40rpx;" class="mr-1"></image>
+									<image :src="item.image" class="mine-service__icon mr-1"></image>
 								</template>
 							</uv-cell>
 							<uv-cell :isLink="true" :title="item.name" v-else @tap="serv(item)">
 								<template #icon>
-									<image :src="item.image" style="width: 40rpx;height: 40rpx;" class="mr-1"></image>
+									<image :src="item.image" class="mine-service__icon mr-1"></image>
 								</template>
 							</uv-cell>
 						</block>
@@ -83,45 +83,45 @@
 				</view>
 			</view>
 		</view>
-	</layout>
+	</layout>
 </template>
 
-<script setup>
+<script setup>
 import {
-  ref,
+  ref,
   computed
-} from 'vue'
-import { useMainStore } from '@/store/store'
-import { storeToRefs } from 'pinia'
-import { onLoad,onShow} from '@dcloudio/uni-app'
-import { formatDateTime,kmUnit } from '@/utils/util'
-import {
-  userGetUserInfo,
+} from 'vue'
+import { useMainStore } from '@/store/store'
+import { storeToRefs } from 'pinia'
+import { onLoad,onShow} from '@dcloudio/uni-app'
+import { formatDateTime,kmUnit } from '@/utils/util'
+import {
+  userGetUserInfo,
   mineService
-} from '@/api/user'
-const main = useMainStore()
-const { member,isLogin } = storeToRefs(main)
-
-const title = ref('个人中心')
-const services = ref([])
-
-const growthValue = computed(() => { 
-	if (!isLogin.value) return 0
-	const {
-		currentValue,
-		needValue
-	} = member.value
-	return currentValue / (currentValue + needValue) * 100
-})
-
-onLoad(() => {
-	getServices();
-})	
-onShow(() => {
-	getUserInfo();
-})
-
-
+} from '@/api/user'
+const main = useMainStore()
+const { member,isLogin } = storeToRefs(main)
+
+const title = ref('个人中心')
+const services = ref([])
+
+const growthValue = computed(() => { 
+	if (!isLogin.value) return 0
+	const {
+		currentValue,
+		needValue
+	} = member.value
+	return currentValue / (currentValue + needValue) * 100
+})
+
+onLoad(() => {
+	getServices();
+})	
+onShow(() => {
+	getUserInfo();
+})
+
+
 const getUserInfo = async() => {
 	if (isLogin.value) {
 		let data = await userGetUserInfo();
@@ -182,121 +182,111 @@ const serv = (item) => {
 			})
 			break;
 	}
-}
-
+}
+
 
 
 </script>
 
 <style lang="scss" scoped>
-	page {
-		height: auto;
-		min-height: 100%;
+// 个人中心页局部 token（与 uni.scss 全局变量配合）
+$mine-section-padding-x: $spacing-row-lg;
+$mine-user-box-radius: $border-radius-lg;
+$mine-user-box-margin-top: 70rpx;
+$mine-user-box-margin-bottom: $spacing-row-lg;
+$mine-avatar-size: 160rpx;
+$mine-avatar-image-size: 140rpx;
+$mine-avatar-offset-top: -35rpx;
+$mine-avatar-margin-x: 35rpx;
+$mine-avatar-radius: 20rpx;
+$mine-avatar-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
+$mine-stat-width: 25%;
+$mine-stat-padding: $spacing-row-lg;
+$mine-stat-value-gap: $spacing-row-base;
+$mine-info-margin-top: $spacing-row-base;
+$mine-service-padding-y: 32rpx;
+$mine-service-padding-bottom: 10rpx;
+$mine-service-icon-size: $img-size-sm;
+$mine-service-title-gap: $spacing-row-base;
+
+/* #ifdef H5 */
+page {
+	height: auto;
+	min-height: 100%;
+}
+/* #endif */
+
+.mine-page {
+	--mine-avatar-size: #{$mine-avatar-size};
+	--mine-avatar-image-size: #{$mine-avatar-image-size};
+	--mine-service-icon-size: #{$mine-service-icon-size};
+
+	&__user-section {
+		padding: 0 $mine-section-padding-x;
+	}
+}
+
+.mine-user {
+	position: relative;
+	margin-top: $mine-user-box-margin-top;
+	margin-bottom: $mine-user-box-margin-bottom;
+	border-radius: $mine-user-box-radius;
+	box-shadow: $box-shadow;
+
+	&__info {
+		margin-top: $mine-info-margin-top;
 	}
 
-
-	.user-box {
+	&__avatar {
 		position: relative;
-		border-radius: 8rpx;
-		margin-bottom: 30rpx;
-		margin-top: 70rpx;
-		box-shadow: $box-shadow;
-	}
-
-	.avatar {
-		position: relative;
-		margin-top: -35rpx;
-		margin-left: 35rpx;
-		margin-right: 35rpx;
-		width: 160rpx;
-		height: 160rpx;
-		border-radius: 20rpx;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background-color: #FFFFFF;
-		box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);
+		flex-shrink: 0;
+		width: var(--mine-avatar-size);
+		height: var(--mine-avatar-size);
+		margin-top: $mine-avatar-offset-top;
+		margin-left: $mine-avatar-margin-x;
+		margin-right: $mine-avatar-margin-x;
+		border-radius: $mine-avatar-radius;
+		background-color: $text-color-white;
+		box-shadow: $mine-avatar-shadow;
 
 		image {
-			width: 140rpx;
-			height: 140rpx;
-			border-radius: 100%;
-		}
-
-		.badge {
-			position: absolute;
-			right: -10rpx;
-			bottom: -10rpx;
-			background-color: #FFFFFF;
-			border-radius: 50rem;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			color: $color-warning;
-			font-size: 24rpx;
-			padding: 8rpx 16rpx;
-			box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);
-
-			image {
-				width: 30rpx;
-				height: 30rpx;
-			}
+			width: var(--mine-avatar-image-size);
+			height: var(--mine-avatar-image-size);
+			border-radius: $border-radius-circle;
 		}
 	}
 
-
-	.user-grid {
-		width: 25%;
-		padding: 30rpx;
+	&__stat {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
+		width: $mine-stat-width;
+		padding: $mine-stat-padding;
 
 		.value {
-			margin-bottom: 20rpx;
+			margin-bottom: $mine-stat-value-gap;
 		}
 	}
+}
 
-	
+.mine-service {
+	width: 100%;
+	padding: $mine-service-padding-y $mine-section-padding-x $mine-service-padding-bottom;
+	background-color: $text-color-white;
+	box-shadow: $box-shadow;
 
-	.service-box {
-		width: 100%;
-		background-color: #FFFFFF;
-		padding: 32rpx 30rpx 10rpx;
-		box-shadow: $box-shadow;
-
-		.row {
-			display: flex;
-			flex-wrap: wrap;
-			color: $text-color-assist;
-			font-size: $font-size-sm;
-			padding-bottom: -40rpx;
-
-			.grid {
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-				align-items: center;
-				margin-bottom: 40rpx;
-				width: 25%;
-				position: relative;
-
-				image {
-					width: 80rpx;
-					height: 80rpx;
-					margin-bottom: 20rpx;
-				}
-			}
-
-			.opacity-0 {
-				position: absolute;
-				width: 100%;
-				height: 100%;
-				opacity: 0;
-				z-index: 10;
-			}
-
-		}
+	&__title {
+		margin-bottom: $mine-service-title-gap;
 	}
+
+	&__icon {
+		width: var(--mine-service-icon-size);
+		height: var(--mine-service-icon-size);
+		flex-shrink: 0;
+	}
+}
 </style>
diff --git a/yshop-drink-uniapp-vue3/pages/order/order.vue b/yshop-drink-uniapp-vue3/pages/order/order.vue
index 37c967b..2403f55 100644
--- a/yshop-drink-uniapp-vue3/pages/order/order.vue
+++ b/yshop-drink-uniapp-vue3/pages/order/order.vue
@@ -5,16 +5,16 @@
 	  left-arrow
 	  @leftClick="$onClickLeft"
 	/>
-	<view class="container">
+	<view class="container order-page">
 		<view class="bg-white">
 			<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
 		</view>
-		<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;">
-			<view class="order-item" v-for="(item, index) in orders" :key="index" style="margin-bottom: 30rpx;" >
+		<view class="order-page__list d-flex flex-column w-100">
+			<view class="order-item" v-for="(item, index) in orders" :key="index">
 				<list-cell :hover="false">
 					<view class="w-100 d-flex align-items-center">
 						<view class="flex-fill d-flex flex-column">
-							<view class="font-size-lg text-color-base" style="margin-bottom: 20rpx;">
+							<view class="font-size-lg text-color-base order-item__shop">
 								{{ item.shop.name }}
 							</view>
 							<view class="font-size-sm text-color-assist">取餐号：{{ item.numberId }}</view>
@@ -27,9 +27,9 @@
 				</list-cell>
 				<list-cell :hover="false" last>
 					<view class="w-100 d-flex flex-column">
-						<view class="w-100 text-truncate font-size-lg text-color-base" style="margin-bottom: 20rpx;">
-							<view class="flex mb-2" v-for="(good,index) in item.cartInfo" :key="index">  
-								<image :src="good.image" mode="aspectFill" class="image"></image>
+						<view class="w-100 text-truncate font-size-lg text-color-base order-item__goods">
+							<view class="flex order-item__goods-row mb-2" v-for="(good,index) in item.cartInfo" :key="index">
+								<image :src="good.image" mode="aspectFill" class="order-item__thumb"></image>
 								<view class="flex flex-column">
 									<view class="font-size-medium mt-1 text-color-base">{{ good.title }}</view>
 									<view class="font-size-sm mt-1">{{ good.spec }}</view>
@@ -37,20 +37,24 @@
 								</view>
 							</view>
 						</view>
-						<view class="d-flex justify-content-between align-items-center" style="margin-bottom: 30rpx;">
+						<view class="d-flex justify-content-between align-items-center order-item__meta">
 							<view class="font-size-sm text-color-assist">
 								{{formatDateTime(item.createTime) }}
 							</view>
 							<view class="d-flex font-size-sm text-color-base align-items-center">
-								<view style="margin-right: 10rpx;">共{{ goodsNum(item.cartInfo) }}件商品，实付</view>
+								<view class="order-item__summary">共{{ goodsNum(item.cartInfo) }}件商品，实付</view>
 								<view class="font-size-lg">￥{{ item.payPrice }}</view>
 							</view>
 						</view>
-						<view class="d-flex align-items-center justify-content-end">
-							<view>
-								<button v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0" class="left-margin"  plain size="mini" @tap.stop="receive(item)">确认收到餐</button>
-								<button class="left-margin"  plain size="mini" @tap="detail(item.orderId)">订单详情</button>
-							</view>
+						<view class="d-flex align-items-center justify-content-end order-item__actions">
+							<button
+								v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0"
+								class="order-item__btn"
+								plain
+								size="mini"
+								@tap.stop="receive(item)"
+							>确认收到餐</button>
+							<button class="order-item__btn" plain size="mini" @tap="detail(item.orderId)">订单详情</button>
 						</view>
 					</view>
 				</list-cell>
@@ -62,9 +66,9 @@
 
 
 <script setup>
-import {
+import {
   ref,
-  computed
+  computed
 } from 'vue'
 import { useMainStore } from '@/store/store'
 import { storeToRefs } from 'pinia'
@@ -72,7 +76,7 @@ import { onLoad,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
 import { formatDateTime,kmUnit } from '@/utils/util'
 import {
   orderGetOrders,
-  orderReceive
+  orderReceive
 } from '@/api/order'
 const main = useMainStore()
 const { isLogin } = storeToRefs(main)
@@ -163,13 +167,54 @@ const receive  = async(order) => {
 </script>
 
 <style lang="scss" scoped>
-	.left-margin {
-		margin-left: 10rpx;
+// 订单页局部 token（与 uni.scss 全局变量配合）
+$order-list-padding-x: $spacing-row-base;
+$order-list-padding-bottom: 0;
+$order-item-gap: $spacing-row-lg;
+$order-section-gap: $spacing-row-base;
+$order-btn-gap: $spacing-row-base;
+$order-summary-gap: $spacing-row-base;
+$order-thumb-size: 160rpx;
+$order-thumb-radius: 8rpx;
+
+.order-page {
+	--order-thumb-size: #{$order-thumb-size};
+
+	&__list {
+		padding: $order-list-padding-x;
+		padding-bottom: $order-list-padding-bottom;
 	}
-	.image {
-		width: 160rpx;
-		height: 160rpx;
-		margin-right: 30rpx;
-		border-radius: 8rpx;
+}
+
+.order-item {
+	margin-bottom: $order-item-gap;
+
+	&__shop {
+		margin-bottom: $order-section-gap;
 	}
+
+	&__goods {
+		margin-bottom: $order-section-gap;
+	}
+
+	&__thumb {
+		flex-shrink: 0;
+		width: var(--order-thumb-size);
+		height: var(--order-thumb-size);
+		margin-right: $spacing-row-lg;
+		border-radius: $order-thumb-radius;
+	}
+
+	&__meta {
+		margin-bottom: $order-item-gap;
+	}
+
+	&__summary {
+		margin-right: $order-summary-gap;
+	}
+
+	&__btn + &__btn {
+		margin-left: $order-btn-gap;
+	}
+}
 </style>
diff --git a/yshop-drink-uniapp-vue3/static/style/app.scss b/yshop-drink-uniapp-vue3/static/style/app.scss
index 26de96b..e4de9cf 100644
--- a/yshop-drink-uniapp-vue3/static/style/app.scss
+++ b/yshop-drink-uniapp-vue3/static/style/app.scss
@@ -1,5 +1,11 @@
 @import '~@/uni.scss';
 
+/* ========================================
+   全局样式 - yshop-drink-uniapp
+   统一规范：使用SCSS变量，简短BEM-like命名
+   ======================================== */
+
+/* ====== Reset & Base ====== */
 page,
 view,
 scroll-view,
@@ -12,8 +18,13 @@ input {
 }
 
 page {
-	background-color: #F1F8FA;
-	height: 100%;
+	background-color: $bg-color-grey;
+	min-height: 100%;
+}
+
+image {
+	max-width: 100%;
+	height: auto;
 }
 
 .container {
@@ -21,26 +32,28 @@ page {
 	height: 100%;
 }
 
+/* ====== Button Reset ====== */
 button {
 	margin: 0;
 
 	&[type='primary'] {
 		background-color: $color-primary;
-		//background-color: #5A5B5C;
 		color: #ffffff;
 		font-size: $font-size-base;
-		
+
 		&[disabled] {
-			background-color: #D1D78C;
+			opacity: $opacity-disabled;
 		}
-		
+
 		&[plain] {
 			color: $color-primary;
 			border: 1rpx solid $color-primary;
 		}
+
 		&.button-hover {
-			background-color: #d5da91;
+			opacity: 0.8;
 		}
+
 		&::after {
 			border: 0;
 		}
@@ -54,213 +67,363 @@ button {
 	}
 }
 
-.bg-base {
-	background-color: $bg-color;
+/* ====== Vant Override ====== */
+:root {
+	--van-primary-color: $color-primary;
 }
 
-.bg-white {
-	background-color: #ffffff;
+.van-grid-item__content {
+	padding: 0 var(--van-padding-base);
 }
 
-.bg-transparent {
-  background-color: transparent !important;
+.van-button {
+	border-radius: 0;
 }
 
-.bg-primary {
-	background-color: $color-primary;
-}
-
-.bg-warning {
-	background-color: $color-warning;
-}
-
-.d-flex {
-	display: flex;
-}
-
-.d-none {
-	display: none !important;
-}
-
-.invisible {
-  visibility: hidden !important;
-}
-
-.d-inline {
-	display: inline !important;
-}
-
-.d-inline-block {
-	display: inline-block !important;
-}
-
-.d-block {
-	display: block !important;
-}
-
-.flex-column {
-	-ms-flex-direction: column !important;
-	flex-direction: column !important;
-}
-
-.justify-content-start {
-	justify-content: flex-start;
-}
-
-.justify-content-end {
-	justify-content: flex-end;
-}
-
-.justify-content-between {
-	justify-content: space-between;
-}
-
-.just-content-center {
-	justify-content: center;
-}
-
-.justify-content-evenly {
-	justify-content: space-evenly !important;
-}
-
-.just-content-around {
-	justify-content: space-around;
-}
-
-.align-items-start {
-	align-items: flex-start;
-}
-
-.align-items-end {
-	align-items: flex-end;
-}
-
-.align-items-center {
-	align-items: center;
-}
-
-.align-items-between {
-	align-items: space-between;
-}
-
-.align-items-around {
-	align-items: space-around;
-}
-
-.align-items-stretch {
-	align-items: stretch;
-}
-
-.align-items-baseline {
-	-ms-flex-align: baseline !important;
-	align-items: baseline !important;
-}
-
-.flex-fill {
-	-ms-flex: 1 1 auto !important;
-	flex: 1 1 auto !important;
-}
-
-.flex-wrap {
-	-ms-flex-wrap: wrap !important;
-	flex-wrap: wrap !important;
-}
-
-.flex-nowrap {
-	-ms-flex-wrap: nowrap !important;
-	flex-wrap: nowrap !important;
-}
-
-.flex-shrink-0 {
-	-ms-flex-negative: 0 !important;
-	flex-shrink: 0 !important;
-}
-
-.font-size-base {
-	font-size: 28rpx;
-}
-
-.font-size-sm {
+.van-button--mini {
 	font-size: 24rpx;
 }
 
-.font-size-medium {
-	font-size: 26rpx;
+/* ====== uv-ui Override ====== */
+.uv-button--info {
+	border-color: $text-color-base !important;
+	color: $text-color-base !important;
 }
 
-.font-size-lg {
-	font-size: 32rpx;
+/* ====== Iconfont ====== */
+.iconfont {
+	font-family: iconfont;
 }
 
-.font-size-extra-lg {
-	font-size: 40rpx;
+/* ====== Display ====== */
+.d-none { display: none !important; }
+.d-inline { display: inline !important; }
+.d-inline-block { display: inline-block !important; }
+.d-block { display: block !important; }
+.d-flex { display: flex; }
+.invisible { visibility: hidden !important; }
+
+/* ====== Flex Layout ====== */
+.flex { display: flex; flex-direction: row; }
+.flex-row { flex-direction: row !important; }
+.flex-column { flex-direction: column !important; }
+.flex-row-reverse { flex-direction: row-reverse !important; }
+.flex-column-reverse { flex-direction: column-reverse !important; }
+.flex-wrap { flex-wrap: wrap !important; }
+.flex-nowrap { flex-wrap: nowrap !important; }
+.flex-fill { flex: 1 1 auto !important; }
+.flex-1 { flex: 1; }
+.flex-2 { flex: 2; }
+.flex-3 { flex: 3; }
+.flex-4 { flex: 4; }
+.flex-5 { flex: 5; }
+.flex-shrink-0 { flex-shrink: 0 !important; }
+
+/* ====== Flex Alignment ====== */
+.justify-start { justify-content: flex-start; }
+.justify-end { justify-content: flex-end; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-around { justify-content: space-around; }
+.justify-evenly { justify-content: space-evenly !important; }
+
+.align-start { align-items: flex-start; }
+.align-center { align-items: center; }
+.align-end { align-items: flex-end; }
+.align-stretch { align-items: stretch; }
+.align-baseline { align-items: baseline !important; }
+
+/* ====== Grid System ====== */
+.row {
+	margin-right: -20rpx;
+	margin-left: -20rpx;
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: row;
 }
 
-.text-color-base {
-	color: $text-color-base;
+.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
+.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
+	position: relative;
+	padding-right: 20rpx;
+	padding-left: 20rpx;
 }
 
-.text-color-assist {
-	color: $text-color-assist;
-}
+.col-12 { width: 750rpx; }
+.col-11 { width: 687.5rpx; }
+.col-10 { width: 625rpx; }
+.col-9 { width: 562.5rpx; }
+.col-8 { width: 500rpx; }
+.col-7 { width: 437.5rpx; }
+.col-6 { width: 375rpx; }
+.col-5 { width: 312.5rpx; }
+.col-4 { width: 250rpx; }
+.col-3 { width: 187.5rpx; }
+.col-2 { width: 125rpx; }
+.col-1 { width: 62.5rpx; }
 
-.text-color-primary {
-	color: $color-primary;
-}
+.col-offset-12 { margin-left: 750rpx; }
+.col-offset-11 { margin-left: 687.5rpx; }
+.col-offset-10 { margin-left: 625rpx; }
+.col-offset-9 { margin-left: 562.5rpx; }
+.col-offset-8 { margin-left: 500rpx; }
+.col-offset-7 { margin-left: 437.5rpx; }
+.col-offset-6 { margin-left: 375rpx; }
+.col-offset-5 { margin-left: 312.5rpx; }
+.col-offset-4 { margin-left: 250rpx; }
+.col-offset-3 { margin-left: 187.5rpx; }
+.col-offset-2 { margin-left: 125rpx; }
+.col-offset-1 { margin-left: 62.5rpx; }
+.col-offset-0 { margin-left: 0; }
 
-.text-color-danger {
-	color: $color-error;
-}
+/* ====== Width & Height ====== */
+.w-25 { width: 25% !important; }
+.w-40 { width: 40%; }
+.w-50 { width: 50% !important; }
+.w-60 { width: 60%; }
+.w-75 { width: 75% !important; }
+.w-80 { width: 80% !important; }
+.w-90 { width: 90% !important; }
+.w-100 { width: 100% !important; }
+.h-100 { height: 100% !important; }
 
-.text-color-white {
-	color: #ffffff;
-}
+/* ====== Margin ====== */
+.m-0 { margin: 0; }
+.m-auto { margin: auto; }
+.m-1 { margin: 10rpx; }
+.m-2 { margin: 20rpx; }
+.m-3 { margin: 30rpx; }
+.m-4 { margin: 40rpx; }
+.m-5 { margin: 50rpx; }
 
-.text-color-warning {
-	color: $color-warning;
-}
+.mt-0 { margin-top: 0; }
+.mt-auto { margin-top: auto; }
+.mt-1 { margin-top: 10rpx; }
+.mt-2 { margin-top: 20rpx; }
+.mt-3 { margin-top: 30rpx; }
+.mt-4 { margin-top: 40rpx; }
+.mt-5 { margin-top: 50rpx; }
 
+.mb-0 { margin-bottom: 0; }
+.mb-auto { margin-bottom: auto; }
+.mb-1 { margin-bottom: 10rpx; }
+.mb-2 { margin-bottom: 20rpx; }
+.mb-3 { margin-bottom: 30rpx; }
+.mb-4 { margin-bottom: 40rpx; }
+.mb-5 { margin-bottom: 50rpx; }
+
+.ml-0 { margin-left: 0; }
+.ml-auto { margin-left: auto; }
+.ml-1 { margin-left: 10rpx; }
+.ml-2 { margin-left: 20rpx; }
+.ml-3 { margin-left: 30rpx; }
+.ml-4 { margin-left: 40rpx; }
+.ml-5 { margin-left: 50rpx; }
+
+.mr-0 { margin-right: 0; }
+.mr-auto { margin-right: auto; }
+.mr-1 { margin-right: 10rpx; }
+.mr-2 { margin-right: 20rpx; }
+.mr-3 { margin-right: 30rpx; }
+.mr-4 { margin-right: 40rpx; }
+.mr-5 { margin-right: 50rpx; }
+
+.mx-0 { margin-left: 0; margin-right: 0; }
+.mx-auto { margin-left: auto; margin-right: auto; }
+.mx-1 { margin-left: 10rpx; margin-right: 10rpx; }
+.mx-2 { margin-left: 20rpx; margin-right: 20rpx; }
+.mx-3 { margin-left: 30rpx; margin-right: 30rpx; }
+.mx-4 { margin-left: 40rpx; margin-right: 40rpx; }
+.mx-5 { margin-left: 50rpx; margin-right: 50rpx; }
+
+.my-0 { margin-top: 0; margin-bottom: 0; }
+.my-auto { margin-top: auto; margin-bottom: auto; }
+.my-1 { margin-top: 10rpx; margin-bottom: 10rpx; }
+.my-2 { margin-top: 20rpx; margin-bottom: 20rpx; }
+.my-3 { margin-top: 30rpx; margin-bottom: 30rpx; }
+.my-4 { margin-top: 40rpx; margin-bottom: 40rpx; }
+.my-5 { margin-top: 50rpx; margin-bottom: 50rpx; }
+
+/* ====== Padding ====== */
+.p-0 { padding: 0; }
+.p-1 { padding: 10rpx; }
+.p-2 { padding: 20rpx; }
+.p-3 { padding: 30rpx; }
+.p-4 { padding: 40rpx; }
+.p-5 { padding: 50rpx; }
+
+.pt-0 { padding-top: 0; }
+.pt-1 { padding-top: 10rpx; }
+.pt-2 { padding-top: 20rpx; }
+.pt-3 { padding-top: 30rpx; }
+.pt-4 { padding-top: 40rpx; }
+.pt-5 { padding-top: 50rpx; }
+
+.pb-0 { padding-bottom: 0; }
+.pb-1 { padding-bottom: 10rpx; }
+.pb-2 { padding-bottom: 20rpx; }
+.pb-3 { padding-bottom: 30rpx; }
+.pb-4 { padding-bottom: 40rpx; }
+.pb-5 { padding-bottom: 50rpx; }
+
+.pl-0 { padding-left: 0; }
+.pl-1 { padding-left: 10rpx; }
+.pl-2 { padding-left: 20rpx; }
+.pl-3 { padding-left: 30rpx; }
+.pl-4 { padding-left: 40rpx; }
+.pl-5 { padding-left: 50rpx; }
+
+.pr-0 { padding-right: 0; }
+.pr-1 { padding-right: 10rpx; }
+.pr-2 { padding-right: 20rpx; }
+.pr-3 { padding-right: 30rpx; }
+.pr-4 { padding-right: 40rpx; }
+.pr-5 { padding-right: 50rpx; }
+
+.px-0 { padding-left: 0; padding-right: 0; }
+.px-1 { padding-left: 10rpx; padding-right: 10rpx; }
+.px-2 { padding-left: 20rpx; padding-right: 20rpx; }
+.px-3 { padding-left: 30rpx; padding-right: 30rpx; }
+.px-4 { padding-left: 40rpx; padding-right: 40rpx; }
+.px-5 { padding-left: 50rpx; padding-right: 50rpx; }
+
+.py-0 { padding-top: 0; padding-bottom: 0; }
+.py-1 { padding-top: 10rpx; padding-bottom: 10rpx; }
+.py-2 { padding-top: 20rpx; padding-bottom: 20rpx; }
+.py-3 { padding-top: 30rpx; padding-bottom: 30rpx; }
+.py-4 { padding-top: 40rpx; padding-bottom: 40rpx; }
+.py-5 { padding-top: 50rpx; padding-bottom: 50rpx; }
+
+/* ====== Typography - Font Size ====== */
+.font-smaller { font-size: 15rpx; }
+.font-small { font-size: 20rpx; }
+.font-sm { font-size: 25rpx; }
+.font { font-size: 30rpx; }
+.font-md { font-size: 35rpx; }
+.font-lg { font-size: 40rpx; }
+.font-size-sm { font-size: $font-size-sm; }
+.font-size-base { font-size: $font-size-base; }
+.font-size-medium { font-size: 26rpx; }
+.font-size-lg { font-size: $font-size-lg; }
+.font-size-extra-lg { font-size: 40rpx; }
+
+.h1 { font-size: 80rpx; line-height: 1.8; }
+.h2 { font-size: 60rpx; line-height: 1.8; }
+.h3 { font-size: 45rpx; line-height: 1.8; }
+.h4 { font-size: 32rpx; line-height: 1.8; }
+.h5 { font-size: 30rpx; line-height: 1.8; }
+.h6 { font-size: 28rpx; line-height: 1.8; }
+
+/* ====== Typography - Font Weight ====== */
+.font-weight-light { font-weight: 300 !important; }
+.font-weight-lighter { font-weight: 100 !important; }
+.font-weight-normal { font-weight: 400 !important; }
+.font-weight-bold { font-weight: 700 !important; }
+.font-weight-bolder { font-weight: 900 !important; }
+.font-italic { font-style: italic; }
+
+/* ====== Typography - Color ====== */
+.text-base { color: $text-color-base; }
+.text-assist { color: $text-color-assist; }
+.text-primary { color: $color-primary; }
+.text-success { color: $color-success; }
+.text-warning { color: $color-warning; }
+.text-danger { color: $color-error; }
+.text-white { color: #ffffff; }
+.text-dark { color: $text-color-base; }
+.text-muted { color: $text-color-assist; }
+.text-light-muted { color: $text-color-light-muted; }
+.text-light-black { color: rgba(0, 0, 0, 0.5); }
+.text-light-white { color: rgba(255, 255, 255, 0.5); }
+
+/* ====== Typography - Alignment ====== */
+.text-left { text-align: left !important; }
+.text-right { text-align: right !important; }
+.text-center { text-align: center !important; }
+
+/* ====== Typography - Decoration ====== */
 .text-truncate {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
-.font-weight-bold {
-	font-weight: 700 !important;
+.text-ellipsis {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
-.font-weight-light {
-	font-weight: 300 !important;
+.text-through { text-decoration: line-through; }
+
+.line-height-100 { line-height: 100%; }
+.line-height-2 { line-height: 2rem !important; }
+
+/* ====== Background ====== */
+.bg-base { background-color: $bg-color; }
+.bg-white { background-color: #ffffff; }
+.bg-transparent { background-color: transparent !important; }
+.bg-primary { background-color: $color-primary; }
+.bg-warning { background-color: $color-warning; }
+.bg-light { background-color: #f8f9fa; }
+.bg-dark { background-color: $text-color-base; }
+
+/* ====== Border ====== */
+.border { border-width: 1rpx; border-style: solid; border-color: $border-color; }
+.border-top {
+	border-top-width: 1rpx;
+	border-top-style: solid;
+	border-top-color: $border-color;
+}
+.border-right {
+	border-right-width: 1rpx;
+	border-right-style: solid;
+	border-right-color: $border-color;
+}
+.border-bottom {
+	border-bottom-width: 1rpx;
+	border-bottom-style: solid;
+	border-bottom-color: $border-color;
+}
+.border-left {
+	border-left-width: 1rpx;
+	border-left-style: solid;
+	border-left-color: $border-color;
 }
 
-.font-weight-lighter {
-	font-weight: lighter !important;
-}
+.border-0 { border-width: 0 !important; }
+.border-top-0 { border-top-width: 0 !important; }
+.border-right-0 { border-right-width: 0 !important; }
+.border-bottom-0 { border-bottom-width: 0 !important; }
+.border-left-0 { border-left-width: 0 !important; }
 
-.font-weight-normal {
-	font-weight: 400 !important;
-}
+.border-primary { border-color: $color-primary; }
+.border-light-secondary { border-color: $border-color-light; }
+.border-white { border-color: #ffffff; }
 
-.overflow-auto {
-	overflow: auto !important;
+/* ====== Border Radius ====== */
+.rounded { border-radius: 8rpx; }
+.rounded-top {
+	border-top-left-radius: 8rpx;
+	border-top-right-radius: 8rpx;
 }
+.rounded-bottom {
+	border-bottom-right-radius: 8rpx;
+	border-bottom-left-radius: 8rpx;
+}
+.rounded-circle { border-radius: 50% !important; }
+.rounded-pill { border-radius: 50rem !important; }
+.rounded-0 { border-radius: 0; }
+.border-radius-base { border-radius: $border-radius-base; }
 
-.overflow-hidden {
-	overflow: hidden !important;
-}
+/* ====== Overflow ====== */
+.overflow-auto { overflow: auto !important; }
+.overflow-hidden { overflow: hidden !important; }
 
-.position-relative {
-	position: relative !important;
-}
-
-.position-absolute {
-	position: absolute !important;
-}
-
-.position-fixed {
-	position: fixed !important;
-}
+/* ====== Position ====== */
+.position-relative { position: relative !important; }
+.position-absolute { position: absolute !important; }
+.position-fixed { position: fixed !important; }
 
 .fixed-top {
 	position: fixed;
@@ -278,158 +441,817 @@ button {
 	z-index: 1030;
 }
 
-.line-height-100 {
-	line-height: 100%;
+.top-0 { top: 0; }
+.left-0 { left: 0; }
+.right-0 { right: 0; }
+.bottom-0 { bottom: 0; }
+
+/* ====== Shadow ====== */
+.shadow { box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.15); }
+.shadow-lg { box-shadow: 0 40rpx 100rpx 0 rgba(0, 0, 0, 0.175); }
+.shadow-none { box-shadow: none !important; }
+
+/* ====== Vertical Align ====== */
+.align-top { vertical-align: top !important; }
+.align-middle { vertical-align: middle !important; }
+.align-bottom { vertical-align: bottom !important; }
+
+/* ====== Misc ====== */
+.box-border { box-sizing: border-box; }
+.pre-line { white-space: pre-line; }
+.scroll-row { width: 100%; white-space: nowrap; }
+.scroll-row-item { display: inline-block !important; }
+.page-space { padding: 0 34rpx; }
+
+/* ====== Business Components ====== */
+
+/* Page Card */
+.page-card {
+	background: #fff;
+	border-radius: 15rpx;
 }
 
-.line-height-2 {
-	line-height: 2rem !important;
+/* Card Component */
+.card {
+	background: #ffffff;
+	border-radius: 15rpx;
+
+	&.noBorder {
+		.card-head { border-bottom: 0; }
+		.card-title { font-size: 28rpx; color: $text-color-assist; }
+		.card-content { padding: 0; }
+	}
+
+	&.min {
+		.card-title { font-size: 28rpx; color: $text-color-assist; }
+		.card-content { padding: 0; }
+	}
+
+	&.full {
+		border-radius: 0;
+		.card-content { padding: 0 34rpx 20rpx; }
+	}
+
+	&-head {
+		height: 85rpx;
+		border-bottom: 1rpx solid $border-color;
+		padding-left: 30rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	&-title {
+		font-size: 32rpx;
+		font-weight: 500;
+		color: $text-color-base;
+
+		.card-title-sub {
+			font-weight: normal;
+			font-size: 22rpx;
+			color: $text-color-assist;
+		}
+	}
+
+	&-more {
+		font-size: 24rpx;
+		font-weight: 400;
+		color: $text-color-assist;
+		display: flex;
+		align-items: center;
+
+		.uv-icon {
+			margin-left: 10rpx;
+			margin-right: 10rpx;
+		}
+	}
+
+	&-content {
+		padding: 20rpx 0 0;
+		border-bottom-left-radius: 15rpx;
+		border-bottom-right-radius: 15rpx;
+		overflow: hidden;
+	}
+
+	.card-grid-item {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		padding: 10rpx 0;
+		margin-bottom: 20rpx;
+		position: relative;
+
+		&-badge {
+			align-items: center;
+			display: flex;
+			position: absolute;
+			right: 0;
+			top: 0;
+
+			span {
+				margin: 0 !important;
+				color: #fff !important;
+			}
+		}
+
+		.image {
+			width: 60rpx;
+			height: 60rpx;
+		}
+
+		&-label {
+			margin-top: 14rpx;
+			line-height: 33rpx;
+			font-size: 24rpx;
+			font-weight: 400;
+			color: $text-color-base;
+		}
+	}
 }
 
-.line-height-50 {
-	line-height: 50rem !important;
+/* Info Cell */
+.infos {
+	padding: 20rpx 37rpx;
+
+	&.infos-right .info-cell-value {
+		text-align: right;
+	}
+
+	.info-cell {
+		margin-bottom: 20rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		&-label {
+			margin-right: 30rpx;
+			line-height: 32rpx;
+			font-size: 24rpx;
+			color: $text-color-assist;
+		}
+
+		&-value {
+			flex: 1;
+			line-height: 32rpx;
+			font-size: 24rpx;
+			color: $text-color-base;
+		}
+
+		&-operation {
+			line-height: 32rpx;
+			font-size: 24rpx;
+			color: $color-primary;
+		}
+	}
 }
 
-.w-25 {
-	width: 25% !important;
+/* Simple Cell */
+.simple-cell {
+	display: flex;
+	align-items: center;
+
+	&-icon {
+		width: 64rpx;
+		height: 64rpx;
+	}
+
+	&-content {
+		margin-left: 15rpx;
+	}
+
+	&-title {
+		line-height: 40rpx;
+		font-size: 28rpx;
+		font-weight: 500;
+		color: $text-color-base;
+	}
+
+	&-label {
+		line-height: 30rpx;
+		font-size: 22rpx;
+		color: $text-color-base;
+	}
 }
 
-.w-50 {
-	width: 50% !important;
+/* Store Info */
+.storeInfo {
+	padding: 24rpx 35rpx;
+	display: flex;
+	align-items: center;
+	background: #fff;
+
+	&-pic {
+		width: 80rpx;
+		height: 80rpx;
+	}
+
+	&-info {
+		flex: 1;
+		margin-left: 20rpx;
+	}
+
+	&-info-name {
+		line-height: 40rpx;
+		font-size: 28rpx;
+		color: $text-color-base;
+	}
+
+	&-info-address {
+		line-height: 28rpx;
+		font-size: 20rpx;
+		color: $text-color-assist;
+		margin-top: 10rpx;
+	}
+
+	&-action {
+		width: 120rpx;
+		height: 50rpx;
+		background: $text-color-base;
+		text-align: center;
+		font-size: 24rpx;
+		line-height: 50rpx;
+		color: #ffffff;
+	}
 }
 
-.w-75 {
-	width: 75% !important;
+/* Center Title */
+.center-title {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin: 20rpx 0;
+
+	&-line {
+		width: 36rpx;
+		height: 1rpx;
+		background: $text-color-base;
+	}
+
+	.title {
+		margin: 0 22rpx;
+	}
 }
 
-.w-80 {
-	width: 80% !important;
-}
+/* List */
+// .list {
+// 	padding: 25rpx 35rpx;
+// 	position: relative;
+// 	display: flex;
+// 	justify-content: space-between;
+// 	align-items: center;
+// 	background: #fff;
 
-.w-90 {
-	width: 90% !important;
-}
+// 	&-main {
+// 		display: flex;
+// 		align-items: center;
+// 		flex: 1;
+// 	}
 
-.w-100 {
-	width: 100% !important;
-}
+// 	&-actions-edit {
+// 		width: 33rpx;
+// 		height: 33rpx;
 
-.h-100 {
-	height: 100% !important;
-}
+// 		.image {
+// 			width: 100%;
+// 			height: 100%;
+// 			display: block;
+// 		}
+// 	}
 
-.text-left {
-	text-align: left !important;
-}
+// 	&.noBorder::after {
+// 		display: none;
+// 	}
 
-.text-right {
-	text-align: right !important;
-}
+// 	&::after {
+// 		content: '';
+// 		position: absolute;
+// 		left: 35rpx;
+// 		top: 0;
+// 		right: 0;
+// 		height: 1rpx;
+// 		background: $border-color;
+// 	}
 
-.text-center {
-	text-align: center !important;
-}
+// 	&-label {
+// 		line-height: 40rpx;
+// 		font-size: 28rpx;
+// 		color: $text-color-base;
+// 	}
 
-.border-box {
-	box-sizing: border-box;
-}
+// 	&-content {
+// 		flex: 1;
 
-.rounded-circle {
-	border-radius: 50% !important;
-}
+// 		input,
+// 		.uni-input {
+// 			line-height: 40rpx;
+// 			font-size: 28rpx;
+// 			color: $text-color-base;
+// 		}
+// 	}
+// }
 
-.rounded-pill {
-	border-radius: 50rem !important;
-}
-
-.border-radius-base {
-	border-radius: $border-radius-base;
-}
-
-.pre-line {
-	white-space: pre-line;
-}
-
-.align-top {
-	vertical-align: top !important;
-}
-
-.align-middle {
-	vertical-align: middle !important;
-}
-
-.align-bottom {
-	vertical-align: bottom !important;
-}
-
-.align-text-bottom {
-	vertical-align: text-bottom !important;
-}
-
-.align-text-top {
-	vertical-align: text-top !important;
-}
-
-.w-60 {
-	width: 60%;
-}
-
-.w-40 {
-	width: 40%;
-}
-
-.mb-10 {
-	margin-bottom: 10rpx;
-}
-
-.mb-20 {
+/* Y-List */
+.y-list {
 	margin-bottom: 20rpx;
+
+	&.min {
+		margin-bottom: 15rpx;
+
+		.y-list-label { margin-right: 10rpx; }
+		.y-list-content { height: 88rpx; }
+	}
+
+	.uv-list-item__wrapper {
+		flex-direction: row !important;
+	}
+
+	&-content {
+		flex: 1;
+		display: flex;
+		width: 100%;
+		align-items: center;
+		height: 100rpx;
+		padding-left: 34rpx;
+		padding-right: 34rpx;
+
+		&.avatar { height: 130rpx; }
+	}
+
+	&-label {
+		line-height: 40rpx;
+		font-size: 28rpx;
+		font-weight: 400;
+		color: $text-color-assist;
+		margin-right: 30rpx;
+		word-break: normal;
+		word-wrap: normal;
+		text-wrap: nowrap;
+		flex: 1;
+	}
+
+	&-select {
+		line-height: 40rpx;
+		font-size: 28rpx;
+		font-weight: 400;
+		color: $text-color-base;
+		flex: 1;
+		text-align: right;
+
+		&-placeholder {
+			color: $text-color-assist;
+			line-height: 40rpx;
+			font-size: 28rpx;
+			font-weight: 400;
+			flex: 1;
+			text-align: right;
+		}
+	}
+
+	&-default {
+		font-size: 28rpx;
+		font-weight: 400;
+		color: $text-color-base;
+	}
+
+	&-value {
+		line-height: 40rpx;
+		font-size: 28rpx;
+		font-weight: 500;
+		color: $color-primary;
+
+		.uv-input { border: 0; }
+	}
+
+	.uvicon-arrow-right {
+		font-size: 10rpx !important;
+	}
+
+	&-avatar {
+		padding: 20rpx 0;
+		display: flex;
+		justify-content: flex-end;
+
+		.img {
+			width: 90rpx;
+			height: 90rpx;
+			border-radius: 50%;
+		}
+	}
 }
 
-.mb-30 {
-	margin-bottom: 30rpx;
+/* Order */
+.order {
+	background-color: #fff;
+	border-radius: 15rpx;
+	box-sizing: border-box;
+	margin: 10rpx 34rpx;
+
+	&-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 80rpx;
+		border-bottom: 1rpx solid $border-color;
+		padding: 0 34rpx;
+	}
+
+	&-logo .image {
+		height: 45rpx;
+		width: auto;
+	}
+
+	&-title {
+		line-height: 45rpx;
+		font-size: 32rpx;
+		font-weight: 500;
+		color: $text-color-base;
+	}
+
+	&-status {
+		&.status-1 {
+			line-height: 40rpx;
+			font-size: 28rpx;
+			color: $text-color-assist;
+		}
+
+		&.status-2 {
+			line-height: 40rpx;
+			font-size: 28rpx;
+			color: $color-primary;
+		}
+	}
+
+	&-info {
+		border-top: 1rpx solid $border-color;
+		border-bottom: 1rpx solid $border-color;
+		height: 80rpx;
+		line-height: 80rpx;
+		font-size: 24rpx;
+		color: $text-color-assist;
+		display: flex;
+		justify-content: flex-end;
+		padding-right: 34rpx;
+
+		text { margin-left: 10rpx; }
+	}
+
+	&-actions {
+		display: flex;
+		justify-content: space-between;
+		padding: 34rpx;
+
+		&-btns {
+			display: flex;
+			align-items: center;
+		}
+	}
+
+	&-actions-delete {
+		width: 169rpx;
+		height: 60rpx;
+		border: 1px solid $text-color-base;
+		border-radius: 0;
+		line-height: 58rpx;
+		text-align: center;
+		color: $text-color-base;
+		font-size: 24rpx;
+	}
+
+	&-actions-primary {
+		margin-left: 20rpx;
+		width: 169rpx;
+		height: 60rpx;
+		background: $color-primary;
+		border: 1px solid $color-primary;
+		border-radius: 0;
+		line-height: 58rpx;
+		text-align: center;
+		color: #ffffff;
+		font-size: 24rpx;
+	}
 }
 
-.mb-40 {
-	margin-bottom: 40rpx;
+/* Address */
+.address {
+	background: #ffffff;
+	border-radius: 15rpx;
+	position: relative;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 20rpx;
+	padding: 40rpx 34rpx;
+
+	&-main { flex: 1; }
+
+	&-actions-edit {
+		width: 33rpx;
+		height: 33rpx;
+
+		.image {
+			width: 100%;
+			height: 100%;
+			display: block;
+		}
+	}
+
+	&.noBorder::after { display: none; }
+
+	&::after {
+		content: '';
+		position: absolute;
+		left: 35rpx;
+		top: 0;
+		right: 0;
+		height: 1rpx;
+		background: $border-color;
+	}
+
+	&-icon {
+		margin-right: 20rpx;
+		width: 35rpx;
+		height: 46rpx;
+
+		.image {
+			width: 100%;
+			height: 100%;
+			display: block;
+		}
+	}
+
+	&-header {
+		display: flex;
+		align-items: center;
+	}
+
+	&-name {
+		line-height: 40rpx;
+		font-size: 28rpx;
+		color: $text-color-base;
+		margin-right: 30rpx;
+	}
+
+	&-phone {
+		line-height: 40rpx;
+		font-size: 28rpx;
+		color: $text-color-base;
+	}
+
+	&-content {
+		display: flex;
+		align-items: center;
+	}
+
+	&-default {
+		margin-right: 82rpx;
+	}
+
+	&-desc {
+		line-height: 33rpx;
+		font-size: 24rpx;
+		color: $text-color-assist;
+	}
 }
 
-.mb-50 {
-	margin-bottom: 50rpx;
+/* Action Bar */
+.action-bar {
+	position: fixed;
+	display: flex;
+	bottom: 0;
+	padding-bottom: constant(safe-area-inset-bottom);
+	padding-bottom: env(safe-area-inset-bottom);
+	left: 0;
+	right: 0;
+	background: #fff;
+
+	&.screen {
+		bottom: 50px;
+		padding-bottom: 0;
+	}
+
+	&.column {
+		flex-direction: column;
+
+		.action-info { flex: 0 0 100rpx; }
+		.action-btns { height: 100rpx; align-items: center; }
+	}
+
+	.action-total { margin-left: 20rpx; }
+
+	.action-info {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		padding: 0 34rpx;
+		height: 100rpx;
+	}
+
+	.action-icons {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		height: 100rpx;
+		padding-left: 20rpx;
+
+		&-item {
+			flex: 1;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.action-icon {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			position: relative;
+
+			&-badge {
+				position: absolute;
+				right: -10rpx;
+				top: 0;
+			}
+
+			.action-icon-img {
+				width: 50rpx;
+				height: 50rpx;
+			}
+
+			.action-icon-label {
+				line-height: 28rpx;
+				font-size: 20rpx;
+				color: $text-color-base;
+			}
+		}
+	}
+
+	.action-btns {
+		display: flex;
+		align-items: center;
+		padding: 0 24rpx;
+
+		.uv-button-wrapper {
+			flex: 1;
+			margin: 0 10rpx;
+		}
+
+		.uv-button {
+			border-radius: 0 !important;
+		}
+	}
 }
 
-.mt-30 {
-	margin-top: 30rpx;
+/* Bottom Bar */
+.bottom-bar {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background: #fff;
+	display: flex;
 }
 
-.ml-10 {
-	margin-left: 10rpx;
+.bottom-bar-bg {
+	height: 150rpx;
 }
 
-.ml-20 {
-	margin-left: 20rpx;
+/* Blank / Shopping Bar */
+.blank {
+	height: var(--van-action-bar-height);
 }
 
-.ml-30 {
-	margin-left: 30rpx;
+.shopping-bar {
+	bottom: var(--van-tabbar-height);
 }
 
-.mr-10 {
+.full-btn {
+	height: var(--van-action-bar-height);
+}
+
+.shopping-checkbox .van-checkbox {
+	padding: 2px;
 	margin-right: 10rpx;
 }
 
-.mr-20 {
-	margin-right: 20rpx;
+.shopping-checkbox-cell {
+	display: flex;
+	align-items: center;
+	padding: 26rpx 0 26rpx 30rpx;
 }
 
-.mr-30 {
-	margin-right: 30rpx;
+/* Form */
+.form-checkbox {
+	padding: 43rpx 0;
+	display: flex;
+	justify-content: center;
 }
 
-.mr-40 {
-	margin-right: 40rpx;
+.form-buttons {
+	margin-top: 34rpx;
+	padding: 0 34rpx;
 }
 
-.pl-30 {
-	padding-left: 30rpx;
-}
\ No newline at end of file
+/* Background Warp */
+.background-warp {
+	position: relative;
+
+	.background {
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		z-index: 1;
+
+		.image { width: 100%; }
+	}
+
+	.background-content {
+		position: relative;
+		z-index: 10;
+	}
+}
+
+/* Search */
+.search .y-search {
+	background: none;
+}
+
+.search-bar {
+	background: #fff;
+	padding: 20rpx 34rpx;
+}
+
+/* Subsection */
+.y-subsection {
+	padding: 20rpx 33rpx 0;
+}
+
+/* Swiper */
+.swiper {
+	width: 100%;
+
+	&.detail { height: 750rpx; }
+
+	.image {
+		width: 100%;
+		display: block;
+	}
+}
+
+/* Cell Attr */
+.cell-attr {
+	.cell-title {
+		line-height: 40rpx;
+		font-size: 28rpx;
+		color: $text-color-base;
+	}
+
+	.cell-sub-title {
+		line-height: 40rpx;
+		font-size: 28rpx;
+		color: $text-color-assist;
+	}
+}
+
+/* uv-list border override */
+.uv-list--border-top { background: $border-color !important; }
+.uv-list--border-left { background: $border-color !important; }
+.uv-list--border-bottom { background: $border-color !important; }
+.uv-list--border-right { background: $border-color !important; }
+
+.uvicon-arrow-right {
+	color: $text-color-assist;
+}
+
+/* Icon component */
+.icon .image {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+
+/* ====== Backward Compatibility Aliases ====== */
+/* 旧类名 -> 新类名映射，保留兼容性 */
+.justify-content-start { justify-content: flex-start; }
+.justify-content-end { justify-content: flex-end; }
+.justify-content-center { justify-content: center; }
+.justify-content-between { justify-content: space-between; }
+.justify-content-around { justify-content: space-around; }
+.justify-content-evenly { justify-content: space-evenly !important; }
+.just-content-center { justify-content: center; }
+.just-content-around { justify-content: space-around; }
+.align-items-start { align-items: flex-start; }
+.align-items-end { align-items: flex-end; }
+.align-items-center { align-items: center; }
+.align-items-baseline { align-items: baseline !important; }
+.text-color-base { color: $text-color-base; }
+.text-color-assist { color: $text-color-assist; }
+.text-color-primary { color: $color-primary; }
+.text-color-danger { color: $color-error; }
+.text-color-white { color: #ffffff; }
+.text-color-warning { color: $color-warning; }
+.font-size-medium { font-size: 26rpx; }
+.font-size-extra-lg { font-size: 40rpx; }
+.bg-base { background-color: $bg-color; }
diff --git a/yshop-drink-uniapp-vue3/uni.scss b/yshop-drink-uniapp-vue3/uni.scss
index 1bebb92..f4bb2d1 100644
--- a/yshop-drink-uniapp-vue3/uni.scss
+++ b/yshop-drink-uniapp-vue3/uni.scss
@@ -14,27 +14,30 @@
 
 /* 颜色变量 */
 /* 行为相关颜色 */
-// $color-primary: #ADB838;
 $color-primary: #09b4f1;
 $color-success: #4cd964;
 $color-warning: #FAB714;
 $color-error: #D12E32;
 
 /* 文字基本颜色 */
-$text-color-base: #5A5B5C; //基本色
-$text-color-assist: #919293; //辅助色
+$text-color-base: #333333; //基本色(主要文字)
+$text-color-assist: #999999; //辅助色(次要文字)
 $text-color-black: #3B3C3E; //黑
 $text-color-grey: #878889; //灰
 $text-color-white: #ffffff; //白
+$text-color-light-muted: #A9A5A0; //浅灰
 
 /* 背景颜色 */
 $bg-color: #F1F8FA;
 $bg-color-grey: #F5F5F5;
-//$bg-color-primary: #E8EACF;
 $bg-color-primary: #dbe7ea;
 
 /* 边框颜色 */
-$border-color:#e2e2e2;
+$border-color: #e6e6e6;
+$border-color-light: #E9E8E5;
+
+/* 阴影 */
+$box-shadow: 0 20rpx 20rpx -20rpx rgba($color: #333, $alpha: 0.1);
 
 /* 尺寸变量 */
 
@@ -75,10 +78,6 @@ $font-size-subtitle:36rpx;
 $color-paragraph: #3F536E; // 文章段落颜色
 $font-size-paragraph:30rpx;
 
-$box-shadow: 0 20rpx 20rpx -20rpx rgba($color: #333, $alpha: 0.1);
-
-
-
 
 $uv-main-color: #333333;
 $uv-content-color: #999999;