@charset "UTF-8"; /* 绿纤美业会员端设计系统:苔玉绿 + 雾金 */ /* 绿纤美业会员端设计系统:苔玉绿 + 雾金 */ page { min-height: 100%; background: #f3f5f0; color: #1f2c28; font-family: "PingFang SC", "Helvetica Neue", sans-serif; } view, text, button, image, scroll-view, swiper, swiper-item { box-sizing: border-box; } button { margin: 0; padding: 0; line-height: 1; background: transparent; } button::after { border: 0; } .page-shell { min-height: 100vh; position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.12) 16%, rgba(255, 255, 255, 0) 34%), linear-gradient(180deg, rgba(211, 191, 156, 0.05) 0%, rgba(175, 194, 181, 0.045) 42%, #f3f5f0 100%); } .page-shell::before, .page-shell::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .page-shell::before { z-index: 0; opacity: 0.45; background: radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.18) 0 2rpx, transparent 2rpx 100%), radial-gradient(circle at 78% 30%, rgba(100, 140, 118, 0.08) 0 1.5rpx, transparent 1.5rpx 100%), radial-gradient(circle at 36% 68%, rgba(211, 191, 156, 0.1) 0 1.5rpx, transparent 1.5rpx 100%); background-size: 180rpx 180rpx, 260rpx 260rpx, 220rpx 220rpx; background-repeat: repeat; -webkit-animation: lfAtmosphereShift 20s ease-in-out infinite alternate; animation: lfAtmosphereShift 20s ease-in-out infinite alternate; } .page-shell::after { z-index: 0; opacity: 0.28; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0.06) 2rpx, transparent 2rpx, transparent 30rpx); -webkit-animation: lfAtmosphereGlow 14s ease-in-out infinite alternate; animation: lfAtmosphereGlow 14s ease-in-out infinite alternate; } .page-content { position: relative; z-index: 2; padding: calc(25px + 28rpx) 48rpx calc(228rpx + env(safe-area-inset-bottom)); } .page-content > view:not(.safe-bottom-space), .page-content > scroll-view, .page-content > swiper { opacity: 0; -webkit-transform: translate3d(0, 22rpx, 0); transform: translate3d(0, 22rpx, 0); -webkit-animation: lfRevealUp 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards; animation: lfRevealUp 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } .page-content > view:nth-child(1) { -webkit-animation-delay: 0.04s; animation-delay: 0.04s; } .page-content > view:nth-child(2) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .page-content > view:nth-child(3) { -webkit-animation-delay: 0.16s; animation-delay: 0.16s; } .page-content > view:nth-child(4) { -webkit-animation-delay: 0.22s; animation-delay: 0.22s; } .page-content > view:nth-child(5) { -webkit-animation-delay: 0.28s; animation-delay: 0.28s; } .page-content > view:nth-child(6) { -webkit-animation-delay: 0.34s; animation-delay: 0.34s; } .page-content > view:nth-child(7) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .page-content > view:nth-child(8) { -webkit-animation-delay: 0.46s; animation-delay: 0.46s; } .page-content > view:nth-child(9) { -webkit-animation-delay: 0.52s; animation-delay: 0.52s; } .page-content > view:nth-child(10) { -webkit-animation-delay: 0.58s; animation-delay: 0.58s; } .page-blur, .page-blur-secondary, .page-blur-tertiary { position: absolute; border-radius: 999rpx; -webkit-filter: blur(16rpx); filter: blur(16rpx); z-index: 1; } .page-blur { width: 320rpx; height: 320rpx; top: 80rpx; right: -120rpx; background: rgba(100, 140, 118, 0.16); -webkit-animation: lfFloatSoft 8.2s ease-in-out infinite; animation: lfFloatSoft 8.2s ease-in-out infinite; } .page-blur-secondary { width: 280rpx; height: 280rpx; left: -100rpx; top: 560rpx; background: rgba(211, 191, 156, 0.16); animation: lfFloatSoft 10.4s ease-in-out infinite 0.9s reverse; } .page-blur-tertiary { width: 220rpx; height: 220rpx; right: 50rpx; bottom: 240rpx; background: rgba(175, 194, 181, 0.12); -webkit-animation: lfPulseSoft 7.6s ease-in-out infinite 1.3s; animation: lfPulseSoft 7.6s ease-in-out infinite 1.3s; } .safe-bottom-space { height: 24rpx; } .capsule-safe { padding-right: 188rpx; } .primary-button { display: inline-flex; align-items: center; justify-content: center; height: 92rpx; padding: 0 38rpx; border-radius: 44rpx; color: #fff; font-size: 28rpx; font-weight: 600; letter-spacing: 3rpx; background: #244a3d; border: 1rpx solid rgba(210, 191, 156, 0.26); box-shadow: 0 22rpx 48rpx rgba(36, 74, 61, 0.18); } .secondary-button { display: inline-flex; align-items: center; justify-content: center; height: 84rpx; padding: 0 30rpx; border-radius: 42rpx; color: #244a3d; font-size: 26rpx; font-weight: 600; letter-spacing: 2rpx; background: rgba(255, 255, 255, 0.9); border: 1rpx solid rgba(210, 191, 156, 0.22); box-shadow: 0 14rpx 30rpx rgba(54, 77, 64, 0.08); } .primary-button, .secondary-button { position: relative; overflow: hidden; white-space: nowrap; transition: box-shadow 320ms ease, -webkit-transform 280ms cubic-bezier(0.22, 1, 0.36, 1), -webkit-filter 320ms ease; transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease, filter 320ms ease; transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease, filter 320ms ease, -webkit-transform 280ms cubic-bezier(0.22, 1, 0.36, 1), -webkit-filter 320ms ease; } .primary-button::before, .secondary-button::before { content: ""; position: absolute; left: 20rpx; right: 20rpx; top: 0; height: 1rpx; background: rgba(255, 255, 255, 0.34); pointer-events: none; } .primary-button::after, .secondary-button::after { content: ""; position: absolute; top: -24rpx; left: -90rpx; width: 72rpx; height: calc(100% + 48rpx); opacity: 0.34; -webkit-transform: skewX(-20deg); transform: skewX(-20deg); background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)); -webkit-animation: lfSheen 4.8s ease-in-out infinite; animation: lfSheen 4.8s ease-in-out infinite; pointer-events: none; } .primary-button:active, .secondary-button:active { -webkit-transform: translateY(1rpx) scale(0.992); transform: translateY(1rpx) scale(0.992); } .primary-button:active { box-shadow: 0 14rpx 30rpx rgba(36, 74, 61, 0.14); } .secondary-button:active { box-shadow: 0 10rpx 22rpx rgba(54, 77, 64, 0.06); } .glass-card { background: rgba(253, 255, 252, 0.88); border: 1rpx solid rgba(255, 255, 255, 0.8); border-radius: 36rpx; box-shadow: 0 24rpx 64rpx rgba(54, 77, 64, 0.1); transition: box-shadow 320ms ease, border-color 320ms ease, -webkit-transform 320ms cubic-bezier(0.22, 1, 0.36, 1); transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease, border-color 320ms ease; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease, border-color 320ms ease, -webkit-transform 320ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform, box-shadow; } .glass-card:active { -webkit-transform: translateY(2rpx) scale(0.996); transform: translateY(2rpx) scale(0.996); box-shadow: 0 18rpx 38rpx rgba(54, 77, 64, 0.1); } .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24rpx; } .section-title { font-size: 34rpx; font-weight: 700; color: #1f2c28; } .section-link { font-size: 24rpx; color: #d2bf9c; text-shadow: 0 2rpx 10rpx rgba(210, 191, 156, 0.18); transition: opacity 240ms ease, -webkit-transform 240ms ease; transition: transform 240ms ease, opacity 240ms ease; transition: transform 240ms ease, opacity 240ms ease, -webkit-transform 240ms ease; } .section-link:active { -webkit-transform: translateX(4rpx); transform: translateX(4rpx); opacity: 0.76; } .decor-image { display: block; width: 100%; } .lf-tabbar-wrap { position: fixed; left: 24rpx; right: 24rpx; bottom: calc(16rpx + env(safe-area-inset-bottom)); z-index: 30; } .lf-tabbar-panel { background: rgba(253, 255, 252, 0.96); border: 1rpx solid rgba(255, 255, 255, 0.8); border-radius: 36rpx; box-shadow: 0 24rpx 64rpx rgba(54, 77, 64, 0.1); display: flex; align-items: center; justify-content: space-between; min-height: 118rpx; padding: 12rpx 12rpx 10rpx; border-radius: 999rpx; box-shadow: 0 28rpx 80rpx rgba(40, 63, 52, 0.16); -webkit-animation: lfRevealUp 780ms cubic-bezier(0.22, 1, 0.36, 1) 0.14s both; animation: lfRevealUp 780ms cubic-bezier(0.22, 1, 0.36, 1) 0.14s both; transition: box-shadow 320ms ease, -webkit-transform 320ms cubic-bezier(0.22, 1, 0.36, 1); transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease, -webkit-transform 320ms cubic-bezier(0.22, 1, 0.36, 1); } .lf-tabbar-item { width: 25%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8rpx 0; border-radius: 999rpx; transition: background 260ms ease, -webkit-transform 260ms cubic-bezier(0.22, 1, 0.36, 1); transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), background 260ms ease; transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), background 260ms ease, -webkit-transform 260ms cubic-bezier(0.22, 1, 0.36, 1); } .lf-tabbar-item:active { -webkit-transform: scale(0.97); transform: scale(0.97); } .lf-tabbar-item.active { background: rgba(255, 255, 255, 0.72); -webkit-transform: translateY(-2rpx); transform: translateY(-2rpx); } .lf-tabbar-icon-shell { width: 78rpx; height: 78rpx; display: flex; align-items: center; justify-content: center; transition: -webkit-transform 260ms ease; transition: transform 260ms ease; transition: transform 260ms ease, -webkit-transform 260ms ease; } .lf-tabbar-icon { width: 60rpx; height: 60rpx; } .lf-tabbar-label { margin-top: 4rpx; font-size: 22rpx; color: #8d9992; font-weight: 500; transition: color 260ms ease; } .lf-tabbar-item.active .lf-tabbar-icon-shell { -webkit-animation: lfPulseSoft 3.4s ease-in-out infinite; animation: lfPulseSoft 3.4s ease-in-out infinite; } .lf-tabbar-item.active .lf-tabbar-label { color: #244a3d; font-weight: 700; } @-webkit-keyframes lfRevealUp { from { opacity: 0; -webkit-transform: translate3d(0, 22rpx, 0); transform: translate3d(0, 22rpx, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes lfRevealUp { from { opacity: 0; -webkit-transform: translate3d(0, 22rpx, 0); transform: translate3d(0, 22rpx, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes lfFloatSoft { 0%, 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } 50% { -webkit-transform: translate3d(0, -18rpx, 0) scale(1.04); transform: translate3d(0, -18rpx, 0) scale(1.04); } } @keyframes lfFloatSoft { 0%, 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } 50% { -webkit-transform: translate3d(0, -18rpx, 0) scale(1.04); transform: translate3d(0, -18rpx, 0) scale(1.04); } } @-webkit-keyframes lfPulseSoft { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(1.05); transform: scale(1.05); opacity: 0.9; } } @keyframes lfPulseSoft { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(1.05); transform: scale(1.05); opacity: 0.9; } } @-webkit-keyframes lfAtmosphereShift { 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } 100% { -webkit-transform: translate3d(0, -16rpx, 0) scale(1.03); transform: translate3d(0, -16rpx, 0) scale(1.03); } } @keyframes lfAtmosphereShift { 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } 100% { -webkit-transform: translate3d(0, -16rpx, 0) scale(1.03); transform: translate3d(0, -16rpx, 0) scale(1.03); } } @-webkit-keyframes lfAtmosphereGlow { 0% { opacity: 0.2; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { opacity: 0.34; -webkit-transform: translate3d(-10rpx, 12rpx, 0); transform: translate3d(-10rpx, 12rpx, 0); } } @keyframes lfAtmosphereGlow { 0% { opacity: 0.2; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { opacity: 0.34; -webkit-transform: translate3d(-10rpx, 12rpx, 0); transform: translate3d(-10rpx, 12rpx, 0); } } @-webkit-keyframes lfSheen { 0%, 15% { -webkit-transform: translateX(0) skewX(-20deg); transform: translateX(0) skewX(-20deg); opacity: 0; } 35% { opacity: 0.38; } 55%, 100% { -webkit-transform: translateX(320rpx) skewX(-20deg); transform: translateX(320rpx) skewX(-20deg); opacity: 0; } } @keyframes lfSheen { 0%, 15% { -webkit-transform: translateX(0) skewX(-20deg); transform: translateX(0) skewX(-20deg); opacity: 0; } 35% { opacity: 0.38; } 55%, 100% { -webkit-transform: translateX(320rpx) skewX(-20deg); transform: translateX(320rpx) skewX(-20deg); opacity: 0; } }