zzc/spring-festival-greetings
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: avatar page

Browse Source
This commit is contained in:
zzc
2026-02-05 22:36:54 +08:00
parent 931ede6f8a
commit 3f764693c1
1 changed files with 24 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
pages/avatar/index.vue
View File

@@ -13,7 +13,6 @@
@tap="openTool(tool.type)" @tap="openTool(tool.type)"
> >
<view class="step-num-wrap"> <view class="step-num-wrap">
<view class="step-line" v-if="idx > 0"></view>
<view class="step-num"> <view class="step-num">
<text v-if="activeTool === tool.type">{{ tool.icon }}</text> <text v-if="activeTool === tool.type">{{ tool.icon }}</text>
<text v-else>{{ tool.step }}</text> <text v-else>{{ tool.step }}</text>
@@ -713,73 +712,67 @@ onShareAppMessage(async () => {
.top-steps { .top-steps {
background: #fff; background: #fff;
padding: 30rpx 0; padding: 30rpx 40rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
position: sticky; position: sticky;
top: var(--window-top);
z-index: 100; z-index: 100;
.step-bar { .step-bar {
display: flex; display: flex;
justify-content: center; background: #f5f5f5;
align-items: center; padding: 8rpx;
padding: 0 40rpx; border-radius: 50rpx;
position: relative;
} }
.step-item { .step-item {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center;
height: 72rpx;
position: relative; position: relative;
flex: 1; flex: 1;
z-index: 2;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 40rpx;
.step-num-wrap { .step-num-wrap {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; margin-right: 12rpx;
justify-content: center;
margin-bottom: 12rpx;
}
.step-line {
position: absolute;
left: -50%;
right: 50%;
top: 20rpx;
height: 2rpx;
background: #eee;
z-index: 1;
} }
.step-num { .step-num {
width: 40rpx; width: 36rpx;
height: 40rpx; height: 36rpx;
background: #f5f5f5; background: #e0e0e0;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 20rpx; font-size: 18rpx;
color: #999; color: #666;
position: relative;
z-index: 2;
transition: all 0.3s; transition: all 0.3s;
} }
.step-text { .step-text {
font-size: 24rpx; font-size: 26rpx;
color: #999; color: #666;
transition: all 0.3s; transition: all 0.3s;
} }
&.active { &.active {
background: #fff;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
.step-num { .step-num {
background: #ff3b30; background: #ff3b30;
color: #fff; color: #fff;
transform: scale(1.2);
box-shadow: 0 4rpx 12rpx rgba(255, 59, 48, 0.3);
} }
.step-text { .step-text {
color: #ff3b30; color: #333;
font-weight: bold; font-weight: bold;
} }
} }