1

src/Components/step.vue

+<template>
+  <view class="steps">
+    <view class="step-box">
+      <view class="header">
+        <view class="dot"></view>
+        <view class="line"></view>
+      </view>
+      <view class="content">
+        <view class="rowbox">
+          <view class="textbox">
+            <text class="title">待取件</text>
+            <text class="text">06-25 17:37</text>
+          </view>
+          <text class="detail">详细信息 ></text>
+        </view>
+        <view class="infobox">
+          <text class="addr">贵阳市市政公园菜鸟驿站店</text>
+          <view class="row">
+            <text class="text">取件码</text>
+            <text class="code">2-7-4109</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="step-box">
+      <view class="header">
+        <view class="past-dot"></view>
+        <!-- <view class="line"></view> -->
+      </view>
+      <view class="content">
+        <text class="title">送至 贵阳市市政公园正门菜鸟驿站</text>
+        <view class="rowbox">
+          <text class="text1">李先生 +86-187****4253</text>
+          <text class="text">隐藏保护中</text>
+        </view>
+        <view class="rowbox">
+          <text class="text1">取件时可初始虚拟号码 172****4532-3113</text>
+          <wd-icon name="browse" size="22px" color="#999"></wd-icon>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.steps {
+  display: flex;
+  flex-direction: column;
+  margin-top: 40rpx;
+
+  .step-box {
+    display: flex;
+    gap: 18rpx;
+
+    .header {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+      width: 30rpx;
+
+      .dot {
+        width: 30rpx;
+        height: 30rpx;
+        background: #f12a2a;
+        border-radius: 50%;
+        position: absolute;
+        top: -12rpx;
+      }
+
+      .past-dot {
+        width: 30rpx;
+        height: 30rpx;
+        background: #ffd5d5;
+        border-radius: 50%;
+        position: absolute;
+        top: -12rpx;
+      }
+
+      .line {
+        height: 100%;
+        width: 2rpx;
+        background-color: #ffd5d5;
+      }
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: 22rpx;
+      width: 100%;
+
+      .title {
+        font-family:
+          PingFang SC,
+          PingFang SC;
+        font-weight: bold;
+        font-size: 32rpx;
+        color: #333333;
+      }
+
+      .rowbox {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .textbox {
+          display: flex;
+          flex-direction: row;
+          gap: 30rpx;
+          align-items: center;
+        }
+
+        .title {
+          font-family: PingFang SC;
+          font-weight: bold;
+          font-size: 32rpx;
+          color: #ff0909;
+        }
+
+        .text {
+          font-family: PingFang SC;
+          font-weight: 500;
+          font-size: 28rpx;
+          color: #ff0909;
+        }
+
+        .detail {
+          font-family: PingFang SC;
+          font-weight: 500;
+          font-size: 28rpx;
+          color: #ff0909;
+        }
+
+        .text1 {
+          font-family: PingFang SC;
+          font-weight: 500;
+          font-size: 28rpx;
+          color: #333333;
+        }
+      }
+
+      .infobox {
+        display: flex;
+        flex-direction: column;
+        background-color: #f7f8fa;
+        border-radius: 12rpx;
+        padding: 20rpx 0 34rpx 50rpx;
+        gap: 28rpx;
+        margin-bottom: 54rpx;
+
+        .addr {
+          font-family: PingFang SC;
+          font-weight: bold;
+          font-size: 28rpx;
+          color: #333333;
+        }
+
+        .row {
+          display: flex;
+          align-items: center;
+          gap: 28rpx;
+          color: #333333;
+
+          .text {
+            font-family: PingFang SC;
+            font-size: 28rpx;
+          }
+
+          .code {
+            font-family: PingFang SC;
+            font-weight: bold;
+            font-size: 52rpx;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/text/text.vue

+<template>
+  <div>
+    <step>
+        
+    </step>
+  </div>
+</template>
+
+<script setup>
+import step from '@/Components/step.vue';
+</script>
+
+<style lang="scss" scoped></style>