Browse Source

style: 优化回到顶部按钮毛玻璃样式

pull/1/head
Trae AI 2 months ago
parent
commit
5f012a132a
  1. 33
      pages/index/index.wxss

33
pages/index/index.wxss

@ -1359,20 +1359,23 @@ wx-button:not([size=mini]) {
/* 回到顶部按钮 */ /* 回到顶部按钮 */
.back-to-top-btn { .back-to-top-btn {
position: fixed; position: fixed;
right: 30rpx; right: 24rpx;
bottom: 200rpx; bottom: 180rpx;
width: 100rpx; width: 96rpx;
height: 100rpx; height: 96rpx;
background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%); background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(16rpx);
-webkit-backdrop-filter: blur(16rpx);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-shadow: 0 4rpx 16rpx rgba(22, 119, 255, 0.4); box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.15);
border: 2rpx solid rgba(255, 255, 255, 0.4);
opacity: 0; opacity: 0;
transform: translateY(20rpx); transform: translateY(20rpx);
transition: all 0.3s ease; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 999; z-index: 999;
pointer-events: none; pointer-events: none;
} }
@ -1384,13 +1387,17 @@ wx-button:not([size=mini]) {
} }
.back-to-top-icon { .back-to-top-icon {
font-size: 36rpx; font-size: 32rpx;
color: white; color: #1677ff;
font-weight: bold; font-weight: 600;
line-height: 1;
text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
} }
.back-to-top-text { .back-to-top-text {
font-size: 18rpx; font-size: 16rpx;
color: white; color: #1677ff;
margin-top: 2rpx; margin-top: 4rpx;
font-weight: 500;
text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
} }

Loading…
Cancel
Save