UI细节调整

src/components/Header.vue

@@ -29,7 +29,24 @@ onMounted(() => {
     <view class="back-btn" @click="onClick">
       <image src="../static/back.png" mode="widthFix" />
     </view>
-    <text>{{ title }}</text>
+    <view>
+      <block v-if="'凹造型，感知距离，小试牛刀'.indexOf(title) === -1">
+        <text>{{ title }}</text>
+      </block>
+      <block v-else>
+        <view class="first-try-steps">
+          <text :class="title === '凹造型' ? 'current-step' : ''">凹造型</text>
+          <text>—</text>
+          <text :class="title === '感知距离' ? 'current-step' : ''"
+            >感知距离</text
+          >
+          <text>—</text>
+          <text :class="title === '小试牛刀' ? 'current-step' : ''"
+            >小试牛刀</text
+          >
+        </view>
+      </block>
+    </view>
   </view>
 </template>
 
@@ -42,6 +59,8 @@ onMounted(() => {
   height: 60px;
   /* margin-top: var(--status-bar-height); */
   padding-left: 15px;
+  color: #fff;
+  font-size: 16px;
 }
 .back-btn {
   display: flex;
@@ -52,7 +71,21 @@ onMounted(() => {
   height: 22px;
   margin-right: 10px;
 }
-.container > text {
+.first-try-steps {
+  display: flex;
+  align-items: center;
+  color: #fff6;
+  font-size: 14px;
+}
+.first-try-steps > text {
+  transition: all 0.3s ease;
+}
+.first-try-steps > text:nth-child(2),
+.first-try-steps > text:nth-child(4) {
+  margin: 0 5px;
+}
+.current-step {
+  font-size: 16px;
   color: #fff;
 }
 </style>