fix: unify product detail back button with top mask style

This commit is contained in:
2026-08-08 04:26:44 +08:00
parent a3c3005c04
commit 2c39e6d7da
35 changed files with 76 additions and 70 deletions
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -1 +1 @@
.scroll-top-mask{left:0;pointer-events:none;position:fixed;right:0;top:0;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:40}.scroll-top-blur,.scroll-top-gradient{height:100%;left:0;pointer-events:none;position:absolute;right:0;top:0}.scroll-top-gradient{height:80%}.scroll-top-title{bottom:38%;color:var(--text-primary);font-size:36rpx;font-weight:600;left:0;letter-spacing:0;pointer-events:none;position:absolute;right:0;text-align:center}.scroll-top-back{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;backdrop-filter:blur(32rpx) saturate(1.2);-webkit-backdrop-filter:blur(32rpx) saturate(1.2);background:hsla(0,0%,100%,.55);border:1rpx solid hsla(0,0%,100%,.55);border-radius:50%;-webkit-box-shadow:0 12rpx 40rpx rgba(0,0,0,.18),0 4rpx 12rpx rgba(0,0,0,.08);box-shadow:0 12rpx 40rpx rgba(0,0,0,.18),0 4rpx 12rpx rgba(0,0,0,.08);display:-webkit-flex;display:-ms-flexbox;display:flex;height:80rpx;-webkit-justify-content:center;justify-content:center;left:30rpx;pointer-events:auto;position:absolute;width:80rpx}.theme-dark .scroll-top-back{background:rgba(25,25,25,.55);border-color:hsla(0,0%,100%,.14);-webkit-box-shadow:0 12rpx 40rpx rgba(0,0,0,.5),0 4rpx 12rpx rgba(0,0,0,.3);box-shadow:0 12rpx 40rpx rgba(0,0,0,.5),0 4rpx 12rpx rgba(0,0,0,.3)}.scroll-top-back-arrow{color:var(--text-primary);font-size:44rpx;font-weight:600;line-height:1}.scroll-top-blur-mid{backdrop-filter:blur(12rpx);-webkit-backdrop-filter:blur(12rpx);-webkit-mask-image:-webkit-gradient(linear,left top,left bottom,from(#000),color-stop(42%,rgba(0,0,0,.8)),color-stop(76%,rgba(0,0,0,0)));-webkit-mask-image:-webkit-linear-gradient(top,#000,rgba(0,0,0,.8) 42%,rgba(0,0,0,0) 76%);mask-image:-webkit-gradient(linear,left top,left bottom,from(#000),color-stop(42%,rgba(0,0,0,.8)),color-stop(76%,rgba(0,0,0,0)));mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.8) 42%,rgba(0,0,0,0) 76%)}.scroll-top-blur-soft{backdrop-filter:blur(6rpx);-webkit-backdrop-filter:blur(6rpx);-webkit-mask-image:-webkit-gradient(linear,left top,left bottom,from(#000),color-stop(52%,rgba(0,0,0,.65)),to(rgba(0,0,0,0)));-webkit-mask-image:-webkit-linear-gradient(top,#000,rgba(0,0,0,.65) 52%,rgba(0,0,0,0));mask-image:-webkit-gradient(linear,left top,left bottom,from(#000),color-stop(52%,rgba(0,0,0,.65)),to(rgba(0,0,0,0)));mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.65) 52%,rgba(0,0,0,0))}.theme-light .scroll-top-gradient{background:-webkit-gradient(linear,left top,left bottom,from(hsla(38,44%,96%,.94)),color-stop(50%,hsla(38,44%,96%,.9)),color-stop(78%,hsla(38,44%,96%,.58)),to(hsla(38,44%,96%,0)));background:-webkit-linear-gradient(top,hsla(38,44%,96%,.94),hsla(38,44%,96%,.9) 50%,hsla(38,44%,96%,.58) 78%,hsla(38,44%,96%,0));background:linear-gradient(180deg,hsla(38,44%,96%,.94) 0,hsla(38,44%,96%,.9) 50%,hsla(38,44%,96%,.58) 78%,hsla(38,44%,96%,0))}.theme-dark .scroll-top-gradient{background:-webkit-gradient(linear,left top,left bottom,from(rgba(25,25,25,.94)),color-stop(50%,rgba(25,25,25,.9)),color-stop(78%,rgba(25,25,25,.58)),to(rgba(25,25,25,0)));background:-webkit-linear-gradient(top,rgba(25,25,25,.94),rgba(25,25,25,.9) 50%,rgba(25,25,25,.58) 78%,rgba(25,25,25,0));background:linear-gradient(180deg,rgba(25,25,25,.94) 0,rgba(25,25,25,.9) 50%,rgba(25,25,25,.58) 78%,rgba(25,25,25,0))}.bottom-action-bar{-ms-flex-align:center;-webkit-align-items:center;align-items:center;backdrop-filter:blur(32rpx) saturate(1.2);-webkit-backdrop-filter:blur(32rpx) saturate(1.2);background:hsla(0,0%,100%,.55);border:1rpx solid hsla(0,0%,100%,.55);border-radius:64rpx;bottom:36rpx;-webkit-box-shadow:0 12rpx 40rpx rgba(46,34,34,.18),0 4rpx 12rpx rgba(46,34,34,.08);box-shadow:0 12rpx 40rpx rgba(46,34,34,.18),0 4rpx 12rpx rgba(46,34,34,.08);-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:24rpx;left:36rpx;padding:24rpx 24rpx calc(24rpx + env(safe-area-inset-bottom));position:fixed;right:36rpx;z-index:500}.theme-dark .bottom-action-bar{background:rgba(25,25,25,.55);border-color:hsla(0,0%,100%,.14);-webkit-box-shadow:0 12rpx 40rpx rgba(0,0,0,.5),0 4rpx 12rpx rgba(0,0,0,.3);box-shadow:0 12rpx 40rpx rgba(0,0,0,.5),0 4rpx 12rpx rgba(0,0,0,.3)}
.scroll-top-mask{left:0;pointer-events:none;position:fixed;right:0;top:0;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:40}.scroll-top-blur,.scroll-top-gradient{height:100%;left:0;pointer-events:none;position:absolute;right:0;top:0}.scroll-top-gradient{height:80%}.scroll-top-title{color:var(--text-primary);font-size:36rpx;font-weight:600;left:0;letter-spacing:0;pointer-events:none;position:absolute;right:0;text-align:center}.scroll-top-back{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;backdrop-filter:blur(32rpx) saturate(1.2);-webkit-backdrop-filter:blur(32rpx) saturate(1.2);background:hsla(0,0%,100%,.55);border:1rpx solid hsla(0,0%,100%,.55);border-radius:50%;-webkit-box-shadow:0 12rpx 40rpx rgba(0,0,0,.18),0 4rpx 12rpx rgba(0,0,0,.08);box-shadow:0 12rpx 40rpx rgba(0,0,0,.18),0 4rpx 12rpx rgba(0,0,0,.08);display:-webkit-flex;display:-ms-flexbox;display:flex;height:80rpx;-webkit-justify-content:center;justify-content:center;left:30rpx;pointer-events:auto;position:absolute;width:80rpx}.theme-dark .scroll-top-back{background:rgba(25,25,25,.55);border-color:hsla(0,0%,100%,.14);-webkit-box-shadow:0 12rpx 40rpx rgba(0,0,0,.5),0 4rpx 12rpx rgba(0,0,0,.3);box-shadow:0 12rpx 40rpx rgba(0,0,0,.5),0 4rpx 12rpx rgba(0,0,0,.3)}.scroll-top-back-arrow{color:var(--text-primary);font-size:44rpx;font-weight:600;line-height:1}.scroll-top-blur-mid{backdrop-filter:blur(12rpx);-webkit-backdrop-filter:blur(12rpx);-webkit-mask-image:-webkit-gradient(linear,left top,left bottom,from(#000),color-stop(42%,rgba(0,0,0,.8)),color-stop(76%,rgba(0,0,0,0)));-webkit-mask-image:-webkit-linear-gradient(top,#000,rgba(0,0,0,.8) 42%,rgba(0,0,0,0) 76%);mask-image:-webkit-gradient(linear,left top,left bottom,from(#000),color-stop(42%,rgba(0,0,0,.8)),color-stop(76%,rgba(0,0,0,0)));mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.8) 42%,rgba(0,0,0,0) 76%)}.scroll-top-blur-soft{backdrop-filter:blur(6rpx);-webkit-backdrop-filter:blur(6rpx);-webkit-mask-image:-webkit-gradient(linear,left top,left bottom,from(#000),color-stop(52%,rgba(0,0,0,.65)),to(rgba(0,0,0,0)));-webkit-mask-image:-webkit-linear-gradient(top,#000,rgba(0,0,0,.65) 52%,rgba(0,0,0,0));mask-image:-webkit-gradient(linear,left top,left bottom,from(#000),color-stop(52%,rgba(0,0,0,.65)),to(rgba(0,0,0,0)));mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.65) 52%,rgba(0,0,0,0))}.theme-light .scroll-top-gradient{background:-webkit-gradient(linear,left top,left bottom,from(hsla(38,44%,96%,.94)),color-stop(50%,hsla(38,44%,96%,.9)),color-stop(78%,hsla(38,44%,96%,.58)),to(hsla(38,44%,96%,0)));background:-webkit-linear-gradient(top,hsla(38,44%,96%,.94),hsla(38,44%,96%,.9) 50%,hsla(38,44%,96%,.58) 78%,hsla(38,44%,96%,0));background:linear-gradient(180deg,hsla(38,44%,96%,.94) 0,hsla(38,44%,96%,.9) 50%,hsla(38,44%,96%,.58) 78%,hsla(38,44%,96%,0))}.theme-dark .scroll-top-gradient{background:-webkit-gradient(linear,left top,left bottom,from(rgba(25,25,25,.94)),color-stop(50%,rgba(25,25,25,.9)),color-stop(78%,rgba(25,25,25,.58)),to(rgba(25,25,25,0)));background:-webkit-linear-gradient(top,rgba(25,25,25,.94),rgba(25,25,25,.9) 50%,rgba(25,25,25,.58) 78%,rgba(25,25,25,0));background:linear-gradient(180deg,rgba(25,25,25,.94) 0,rgba(25,25,25,.9) 50%,rgba(25,25,25,.58) 78%,rgba(25,25,25,0))}.bottom-action-bar{-ms-flex-align:center;-webkit-align-items:center;align-items:center;backdrop-filter:blur(32rpx) saturate(1.2);-webkit-backdrop-filter:blur(32rpx) saturate(1.2);background:hsla(0,0%,100%,.55);border:1rpx solid hsla(0,0%,100%,.55);border-radius:64rpx;bottom:36rpx;-webkit-box-shadow:0 12rpx 40rpx rgba(46,34,34,.18),0 4rpx 12rpx rgba(46,34,34,.08);box-shadow:0 12rpx 40rpx rgba(46,34,34,.18),0 4rpx 12rpx rgba(46,34,34,.08);-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:24rpx;left:36rpx;padding:24rpx 24rpx calc(24rpx + env(safe-area-inset-bottom));position:fixed;right:36rpx;z-index:500}.theme-dark .bottom-action-bar{background:rgba(25,25,25,.55);border-color:hsla(0,0%,100%,.14);-webkit-box-shadow:0 12rpx 40rpx rgba(0,0,0,.5),0 4rpx 12rpx rgba(0,0,0,.3);box-shadow:0 12rpx 40rpx rgba(0,0,0,.5),0 4rpx 12rpx rgba(0,0,0,.3)}
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -1 +1 @@
.service-page{-webkit-box-sizing:border-box;box-sizing:border-box;min-height:100vh;padding:0 32rpx calc(24rpx + env(safe-area-inset-bottom))}.service-page .page-header.service-header{-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:16rpx;margin:0;padding-bottom:32rpx;padding-left:0;padding-right:0}.service-header .back-btn{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:var(--bg-card);border:1rpx solid var(--border-strong);border-radius:50%;-webkit-box-shadow:var(--shadow-card);box-shadow:var(--shadow-card);-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;height:88rpx;-webkit-justify-content:center;justify-content:center;width:88rpx}.service-header .back-btn:active{-webkit-transform:scale(.96);-ms-transform:scale(.96);transform:scale(.96)}.service-header .back-arrow{color:var(--text-primary);font-size:36rpx;line-height:1}.service-header .page-title{color:var(--text-primary);-webkit-flex:1;-ms-flex:1;flex:1;font-size:44rpx;font-weight:700;letter-spacing:0;line-height:1.2;min-width:0;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.service-header .header-spacer{-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:88rpx}.service-hero{-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:56rpx 40rpx;text-align:center}.service-hero-icon{height:88rpx;margin-bottom:24rpx;width:88rpx}.service-title{color:var(--text-primary);display:block;font-size:36rpx;font-weight:700;letter-spacing:0;margin-bottom:12rpx}.service-desc{color:var(--text-secondary);display:block;font-size:24rpx;line-height:1.5;margin-bottom:32rpx}.service-btn{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:28rpx;font-weight:600;height:80rpx;-webkit-justify-content:center;justify-content:center;min-width:280rpx;padding:0 48rpx}.service-page .section-title{color:var(--text-primary);display:block;font-size:32rpx;font-weight:700;letter-spacing:0;margin-bottom:24rpx}.contact-list.surface-card{overflow:hidden;padding:0 32rpx}.contact-item{-ms-flex-align:center;-webkit-align-items:center;align-items:center;border-bottom:1rpx solid var(--border);display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:112rpx;padding:24rpx 0}.contact-item:last-child{border-bottom:none}.contact-item-link{-webkit-transition:background .16s ease;transition:background .16s ease}.contact-item-link:active{background:var(--bg-muted)}.contact-icon-img{-ms-flex-negative:0;-webkit-flex-shrink:0;flex-shrink:0;height:48rpx;margin-right:24rpx;width:48rpx}.contact-info{-webkit-flex:1;-ms-flex:1;flex:1;min-width:0}.contact-label{color:var(--text-secondary);display:block;font-size:24rpx;line-height:1.4;margin-bottom:4rpx}.contact-value{color:var(--text-primary);display:block;font-size:28rpx;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-arrow{-ms-flex-negative:0;color:var(--text-muted);-webkit-flex-shrink:0;flex-shrink:0;font-size:32rpx;line-height:1;margin-left:16rpx}.faq-card{display:block;margin-bottom:24rpx;padding:32rpx}.faq-q{color:var(--text-primary);display:block;font-size:30rpx;font-weight:700;letter-spacing:0;line-height:1.45;margin-bottom:12rpx}.faq-a{color:var(--text-secondary);display:block;font-size:26rpx;line-height:1.7}.enterprise-service{padding:32rpx}.enterprise-service .flex-center{-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;margin-bottom:12rpx}.enterprise-icon{-ms-flex-negative:0;-webkit-flex-shrink:0;flex-shrink:0;height:40rpx;margin-right:12rpx;width:40rpx}.enterprise-title{color:var(--text-primary);display:block;font-size:30rpx;font-weight:700;letter-spacing:0}.enterprise-desc{color:var(--text-secondary);display:block;font-size:24rpx;line-height:1.6;margin-bottom:24rpx}.enterprise-btn{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:28rpx;font-weight:600;height:80rpx;-webkit-justify-content:center;justify-content:center}
.service-page{-webkit-box-sizing:border-box;box-sizing:border-box;min-height:100vh;padding:0 32rpx calc(24rpx + env(safe-area-inset-bottom))}.service-page .page-header.service-header{-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:16rpx;margin:0;padding-bottom:32rpx;padding-left:0;padding-right:0}.service-header .back-btn{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:var(--bg-card);border:1rpx solid var(--border-strong);border-radius:50%;-webkit-box-shadow:var(--shadow-card);box-shadow:var(--shadow-card);-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;height:88rpx;-webkit-justify-content:center;justify-content:center;width:88rpx}.service-header .back-btn:active{-webkit-transform:scale(.96);-ms-transform:scale(.96);transform:scale(.96)}.service-header .back-arrow{color:var(--text-primary);font-size:36rpx;line-height:1}.service-header .page-title{color:var(--text-primary);-webkit-flex:1;-ms-flex:1;flex:1;font-size:34rpx;font-weight:700;letter-spacing:0;line-height:1.2;min-width:0;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.service-header .header-spacer{-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:88rpx}.service-hero{-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:56rpx 40rpx;text-align:center}.service-hero-icon{height:88rpx;margin-bottom:24rpx;width:88rpx}.service-title{color:var(--text-primary);display:block;font-size:36rpx;font-weight:700;letter-spacing:0;margin-bottom:12rpx}.service-desc{color:var(--text-secondary);display:block;font-size:24rpx;line-height:1.5;margin-bottom:32rpx}.service-btn{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:28rpx;font-weight:600;height:80rpx;-webkit-justify-content:center;justify-content:center;min-width:280rpx;padding:0 48rpx}.service-page .section-title{color:var(--text-primary);display:block;font-size:32rpx;font-weight:700;letter-spacing:0;margin-bottom:24rpx}.contact-list.surface-card{overflow:hidden;padding:0 32rpx}.contact-item{-ms-flex-align:center;-webkit-align-items:center;align-items:center;border-bottom:1rpx solid var(--border);display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:112rpx;padding:24rpx 0}.contact-item:last-child{border-bottom:none}.contact-item-link{-webkit-transition:background .16s ease;transition:background .16s ease}.contact-item-link:active{background:var(--bg-muted)}.contact-icon-img{-ms-flex-negative:0;-webkit-flex-shrink:0;flex-shrink:0;height:48rpx;margin-right:24rpx;width:48rpx}.contact-info{-webkit-flex:1;-ms-flex:1;flex:1;min-width:0}.contact-label{color:var(--text-secondary);display:block;font-size:24rpx;line-height:1.4;margin-bottom:4rpx}.contact-value{color:var(--text-primary);display:block;font-size:28rpx;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-arrow{-ms-flex-negative:0;color:var(--text-muted);-webkit-flex-shrink:0;flex-shrink:0;font-size:32rpx;line-height:1;margin-left:16rpx}.faq-card{display:block;margin-bottom:24rpx;padding:32rpx}.faq-q{color:var(--text-primary);display:block;font-size:30rpx;font-weight:700;letter-spacing:0;line-height:1.45;margin-bottom:12rpx}.faq-a{color:var(--text-secondary);display:block;font-size:26rpx;line-height:1.7}.enterprise-service{padding:32rpx}.enterprise-service .flex-center{-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;margin-bottom:12rpx}.enterprise-icon{-ms-flex-negative:0;-webkit-flex-shrink:0;flex-shrink:0;height:40rpx;margin-right:12rpx;width:40rpx}.enterprise-title{color:var(--text-primary);display:block;font-size:30rpx;font-weight:700;letter-spacing:0}.enterprise-desc{color:var(--text-secondary);display:block;font-size:24rpx;line-height:1.6;margin-bottom:24rpx}.enterprise-btn{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:28rpx;font-weight:600;height:80rpx;-webkit-justify-content:center;justify-content:center}
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -1 +1 @@
.shop-list{padding:0 32rpx calc(220rpx + env(safe-area-inset-bottom))}.shop-header{padding:48rpx 0 32rpx;text-align:center}.shop-header-title{color:var(--text-primary);display:block;font-size:44rpx;font-weight:700;letter-spacing:0}.shop-header-sub{color:var(--text-secondary);display:block;font-size:24rpx;margin-top:8rpx}.shop-grid{display:grid;gap:24rpx;grid-template-columns:1fr 1fr}.shop-card{background:var(--bg-card);border:1rpx solid var(--border);border-radius:24rpx;-webkit-box-shadow:var(--shadow-card);box-shadow:var(--shadow-card);overflow:hidden;-webkit-transition:-webkit-transform .15s ease;transition:-webkit-transform .15s ease;transition:transform .15s ease;transition:transform .15s ease,-webkit-transform .15s ease}.shop-card:active{-webkit-transform:scale(.98);-ms-transform:scale(.98);transform:scale(.98)}.shop-card-img-wrap{aspect-ratio:1/1;background:var(--bg-muted);overflow:hidden}.shop-card-img{height:100%;-o-object-fit:cover;object-fit:cover;-webkit-transition:-webkit-transform .4s ease;transition:-webkit-transform .4s ease;transition:transform .4s ease;transition:transform .4s ease,-webkit-transform .4s ease;width:100%}.shop-card-body{padding:20rpx 24rpx 24rpx}.shop-card-name{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--text-primary);display:-webkit-box;font-size:28rpx;font-weight:700;line-height:1.4;overflow:hidden}.shop-card-desc{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--text-secondary);display:-webkit-box;font-size:24rpx;line-height:1.4;margin-top:8rpx;overflow:hidden}.shop-card-price{color:var(--accent-primary);display:block;font-size:32rpx;font-variant:tabular-nums;font-weight:700;margin-top:12rpx}@media (min-width:750rpx){.shop-page{-ms-flex-pack:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center}}
.shop-list{padding:0 32rpx calc(220rpx + env(safe-area-inset-bottom))}.shop-header{padding-bottom:32rpx}.shop-header-title{color:var(--text-primary);display:block;font-size:56rpx;font-weight:800;letter-spacing:0;line-height:1.15}.shop-header-sub{color:var(--text-secondary);display:block;font-size:24rpx;margin-top:8rpx}.shop-grid{display:grid;gap:24rpx;grid-template-columns:1fr 1fr}.shop-card{background:var(--bg-card);border:1rpx solid var(--border);border-radius:24rpx;-webkit-box-shadow:var(--shadow-card);box-shadow:var(--shadow-card);overflow:hidden;-webkit-transition:-webkit-transform .15s ease;transition:-webkit-transform .15s ease;transition:transform .15s ease;transition:transform .15s ease,-webkit-transform .15s ease}.shop-card:active{-webkit-transform:scale(.98);-ms-transform:scale(.98);transform:scale(.98)}.shop-card-img-wrap{aspect-ratio:1/1;background:var(--bg-muted);overflow:hidden}.shop-card-img{height:100%;-o-object-fit:cover;object-fit:cover;-webkit-transition:-webkit-transform .4s ease;transition:-webkit-transform .4s ease;transition:transform .4s ease;transition:transform .4s ease,-webkit-transform .4s ease;width:100%}.shop-card-body{padding:20rpx 24rpx 24rpx}.shop-card-name{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--text-primary);display:-webkit-box;font-size:28rpx;font-weight:700;line-height:1.4;overflow:hidden}.shop-card-desc{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--text-secondary);display:-webkit-box;font-size:24rpx;line-height:1.4;margin-top:8rpx;overflow:hidden}.shop-card-price{color:var(--accent-primary);display:block;font-size:32rpx;font-variant:tabular-nums;font-weight:700;margin-top:12rpx}@media (min-width:750rpx){.shop-page{-ms-flex-pack:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center}}
+1 -1
View File
File diff suppressed because one or more lines are too long
+20 -3
View File
@@ -201,10 +201,27 @@ page {
padding-top: calc(env(safe-area-inset-top, 20px) + 96rpx);
}
/* 返回按钮不单独占状态栏空间——父级 .page-header / .edit-header 已整体下移 */
/* 返回按钮统一为 TopMask 同款圆形毛玻璃 */
.back-btn,
.edit-back {
display: inline-block;
.edit-back,
.shop-back-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.55) !important;
backdrop-filter: blur(32px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(32px) saturate(1.2) !important;
border: 1rpx solid rgba(255, 255, 255, 0.55) !important;
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.18), 0 4rpx 12rpx rgba(0, 0, 0, 0.08) !important;
}
.theme-dark .back-btn,
.theme-dark .edit-back,
.theme-dark .shop-back-btn {
background: rgba(25, 25, 25, 0.55) !important;
border-color: rgba(255, 255, 255, 0.14) !important;
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.5), 0 4rpx 12rpx rgba(0, 0, 0, 0.3) !important;
}
/* ==========================================================
-1
View File
@@ -26,7 +26,6 @@
position: absolute;
left: 0;
right: 0;
bottom: 38%;
text-align: center;
font-size: 36rpx;
font-weight: 600;
+2
View File
@@ -111,6 +111,8 @@ export default function ScrollTopMask({ title, targetSelector = '.page-header',
<Text
className='scroll-top-title'
style={{
top: `calc(${safe.menuButtonTop}px + 40rpx)`,
transform: 'translateY(-50%)',
opacity: Math.max(0, Math.min(1, (topMaskOpacity - 0.5) / 0.5))
}}
>
+7 -12
View File
@@ -5,28 +5,23 @@
.page-header.design-header {
display: flex;
align-items: center;
align-items: flex-end;
min-height: 88rpx;
padding-bottom: 16rpx;
}
.header-spacer {
width: 88rpx;
height: 88rpx;
flex-shrink: 0;
padding-bottom: 32rpx;
}
.header-title {
flex: 1;
text-align: center;
font-size: 36rpx;
font-weight: 700;
font-size: 56rpx;
font-weight: 800;
line-height: 1.15;
letter-spacing: 0;
color: var(--text-primary);
}
.header-manage {
width: 88rpx;
text-align: center;
text-align: right;
font-size: 28rpx;
font-weight: 500;
color: var(--accent-secondary);
-1
View File
@@ -125,7 +125,6 @@ export default function DesignListPage() {
<LoginGuard>
<View className='design-page'>
<View className='page-header design-header' style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
<View className='header-spacer' />
<Text className='header-title'></Text>
<View className='header-manage' onTap={handleManage}>
<Text>{managing ? '完成' : '管理'}</Text>
+1 -1
View File
@@ -279,7 +279,7 @@ export default function DIYPage() {
<ScrollTopMask title="设计工作台" targetSelector=".page-header.surface-card" showBack />
<View className='diy-page'>
<View className='page-header surface-card mt-20' style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
<View className='page-header surface-card' style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
<View className='flex-between' style={{ width: '100%' }}>
<Text className='back-btn' onTap={goBack}></Text>
<Text className='page-title'></Text>
-5
View File
@@ -481,8 +481,3 @@
font-weight: 600;
color: var(--accent-secondary);
}
/* --- 底部留白 --- */
.page-bottom-spacer {
height: 48rpx;
}
+2 -4
View File
@@ -56,7 +56,7 @@ export default function OrderDetailPage() {
return (
<View className={`theme-${resolvedTheme}`}>
<ThemedPageMeta />
<ScrollTopMask title="订单详情" targetSelector=".page-header" showBack />
<ScrollTopMask title="订单详情" targetSelector=".page-header" showBack />
<View className='order-detail-page'>
<View className='page-header' style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
<View className='page-header-inner'>
@@ -75,7 +75,7 @@ export default function OrderDetailPage() {
return (
<View className={`theme-${resolvedTheme}`}>
<ThemedPageMeta />
<ScrollTopMask title="订单详情" targetSelector=".page-header" showBack />
<ScrollTopMask title="订单详情" targetSelector=".page-header" showBack />
<View className='order-detail-page'>
<View className='page-header' style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
@@ -209,8 +209,6 @@ export default function OrderDetailPage() {
</View>
</View>
<View className='page-bottom-spacer' />
{/* 地址选择底部弹窗 */}
{showAddrPicker && (
<View className='modal-overlay' style={{ alignItems: 'flex-end', justifyContent: 'flex-end' }}>
+4 -3
View File
@@ -8,15 +8,16 @@
.orders-page .page-header {
display: flex;
align-items: flex-end;
padding-top: 0;
padding-bottom: 32rpx;
margin: 0;
}
.orders-page .page-title {
display: block;
font-size: 44rpx;
font-weight: 700;
line-height: 1.2;
font-size: 56rpx;
font-weight: 800;
line-height: 1.15;
color: var(--text-primary);
letter-spacing: 0;
}
+5 -4
View File
@@ -19,8 +19,8 @@
}
.back-btn {
width: 88rpx;
height: 88rpx;
width: 80rpx;
height: 80rpx;
flex: 0 0 auto;
border-radius: 50%;
background: var(--bg-card);
@@ -36,7 +36,8 @@
}
.back-arrow {
font-size: 36rpx;
font-size: 44rpx;
font-weight: 600;
line-height: 1;
color: var(--text-primary);
}
@@ -53,7 +54,7 @@
}
.nav-placeholder {
width: 88rpx;
width: 80rpx;
flex: 0 0 auto;
}
+1 -4
View File
@@ -28,7 +28,7 @@ export default function ProductPage() {
return (
<View className={`theme-${resolvedTheme}`}>
<ThemedPageMeta />
<ScrollTopMask title="商品详情" targetSelector=".page-header" showBack />
<ScrollTopMask title="商品详情" targetSelector=".page-header" showBack />
<View className='product-page'>
<View className='page-header' style={{ marginTop: `${safe.statusBarHeight + 12}px` }}>
<View className='page-header-inner'>
@@ -173,9 +173,6 @@ export default function ProductPage() {
</View>
</BottomActionBar>
{/* 安全区占位(防止内容被 action-bar 遮挡) */}
<View className='safe-bottom-placeholder' />
{/* 数量选择弹窗 */}
{showModal && (
<View className='modal-overlay'>
+1 -1
View File
@@ -46,7 +46,7 @@
flex: 1;
min-width: 0;
text-align: center;
font-size: 44rpx;
font-size: 34rpx;
font-weight: 700;
line-height: 1.2;
color: var(--text-primary);
-1
View File
@@ -95,7 +95,6 @@ export default function ServicePage() {
</View>
</View>
<View style={{ height: '80rpx' }} />
</View>
</View>
)
+1
View File
@@ -142,6 +142,7 @@ export default function SettingsPage() {
</View>
)}
{/* 底部留白:短内容页,为退出登录按钮与底部保留呼吸空间 */}
<View style={{ height: '80rpx' }} />
{/* 编辑弹窗 */}
+6 -5
View File
@@ -281,10 +281,10 @@
.shop-back-btn {
position: fixed;
top: calc(env(safe-area-inset-top, 20px) + 20rpx);
left: 24rpx;
left: 30rpx;
z-index: 50;
width: 88rpx;
height: 88rpx;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
background: rgba(40, 35, 32, 0.5);
backdrop-filter: blur(16px) saturate(1.4);
@@ -302,9 +302,10 @@
}
.shop-back-arrow {
font-size: 36rpx;
color: var(--text-primary);
font-size: 44rpx;
font-weight: 600;
line-height: 1;
color: var(--text-primary);
}
/* --- Bottom Action Bar — 毛玻璃由 BottomActionBar 提供,本地只补充价格摘要 --- */
+1 -1
View File
@@ -277,7 +277,7 @@ export default function ShopDetailPage() {
<View
className="shop-back-btn"
onTap={() => Taro.navigateBack()}
style={{ top: `${safe.backBtnPaddingTop}px`, opacity: heroStyles.backBtnOpacity }}
style={{ top: `${safe.menuButtonTop}px`, opacity: heroStyles.backBtnOpacity }}
>
<Text className="shop-back-arrow"></Text>
</View>
+4 -4
View File
@@ -8,15 +8,15 @@
}
.shop-header {
text-align: center;
padding: 48rpx 0 32rpx;
padding-bottom: 32rpx;
}
.shop-header-title {
font-size: 44rpx;
font-weight: 700;
font-size: 56rpx;
font-weight: 800;
color: var(--text-primary);
letter-spacing: 0;
line-height: 1.15;
display: block;
}
+4 -3
View File
@@ -94,11 +94,12 @@
}
.udb-header .page-title {
text-align: center;
font-size: 44rpx;
font-weight: 700;
text-align: left;
font-size: 56rpx;
font-weight: 800;
color: var(--text-primary);
letter-spacing: 0;
line-height: 1.15;
}
/* 工具栏 */