diff --git a/pages/make/index.vue b/pages/make/index.vue index 34d19af..81d6f91 100644 --- a/pages/make/index.vue +++ b/pages/make/index.vue @@ -54,33 +54,23 @@ - - - - - - - - + + - {{ tool.icon }} - {{ tool.text }} + + + + {{ tool.icon }} + {{ tool.step }} + + + {{ tool.text }} @@ -112,6 +102,11 @@ >没有更多了 + + + 选好模板了,去修改文字 + + @@ -235,6 +230,12 @@ + + + + 文字写好了,去微调位置 + + @@ -292,6 +293,22 @@ + + + + + + { }; const tools = [ - { type: "template", text: "模板", icon: "▦" }, - { type: "text", text: "文字", icon: "文" }, - { type: "position", text: "位置", icon: "图" }, - // { type: "avatar", text: "头像挂饰", icon: "饰" }, + { type: "template", text: "1. 选模板", icon: "🎨", step: 1 }, + { type: "text", text: "2. 改文字", icon: "✍️", step: 2 }, + { type: "position", text: "3. 调位置", icon: "🎯", step: 3 }, ]; const activeTool = ref("template"); @@ -1110,36 +1126,84 @@ function drawRoundRect(ctx, x, y, w, h, r, color) { margin: 12rpx auto; } -/* 工具入口 */ -.tools { - display: grid; - grid-template-columns: repeat(4, 1fr); - padding: 16rpx 24rpx 8rpx; +/* 步骤条工具 */ +.step-bar { + display: flex; + justify-content: space-between; + padding: 30rpx 60rpx 10rpx; + position: relative; } -.tool-item { +.step-item { display: flex; flex-direction: column; align-items: center; - padding: 14rpx 0; - border-radius: 18rpx; - color: #666; + flex: 1; + position: relative; + z-index: 1; } -.tool-item.active { - background: #fff6f5; - color: #ff3b30; +.step-num-wrap { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + position: relative; + margin-bottom: 12rpx; } -.tool-icon { - width: 64rpx; - height: 64rpx; - border-radius: 16rpx; - background: #fafafa; +.step-line { + position: absolute; + right: 50%; + top: 30rpx; + width: 100%; + height: 2rpx; + background: #eee; + z-index: -1; +} +.step-num { + width: 60rpx; + height: 60rpx; + border-radius: 50%; + background: #f5f5f5; + color: #999; display: flex; align-items: center; justify-content: center; - margin-bottom: 8rpx; + font-size: 26rpx; + font-weight: bold; + border: 4rpx solid #fff; + transition: all 0.3s; } -.tool-text { - font-size: 22rpx; +.step-item.active .step-num { + background: #ff3b30; + color: #fff; + transform: scale(1.1); + box-shadow: 0 4rpx 12rpx rgba(255, 59, 48, 0.3); +} +.step-text { + font-size: 24rpx; + color: #999; + font-weight: 500; + transition: all 0.3s; +} +.step-item.active .step-text { + color: #ff3b30; + font-weight: bold; +} + +/* 下一步引导 */ +.next-step-tip { + display: flex; + align-items: center; + justify-content: center; + padding: 20rpx 0; + margin: 10rpx 24rpx 20rpx; + background: #fff6f5; + border-radius: 12rpx; + color: #ff3b30; + font-size: 24rpx; + font-weight: 500; +} +.next-step-tip text { + margin-right: 8rpx; } /* 模板区 */