订单

src/pages/order/components/Header/index.vue

 <template>
-  <div class="header">
-    <div class="headbox">
+  <view class="header">
+    <view class="headbox">
       <wd-icon
         class="icon"
         name="thin-arrow-left"
@@ -8,9 +8,9 @@
         size="18px"
         @click="handleBack"
       ></wd-icon>
-      <div class="title">{{ props.title }}</div>
-    </div>
-  </div>
+      <view class="title">{{ props.title }}</view>
+    </view>
+  </view>
 </template>
 
 <script setup>

src/pages/order/components/OrderList/index.vue

 <template>
-  <div class="content">
-    <div class="box">
-      <div class="header">
-        <div class="left">
-          <img src="@/static/order/shop.png" />
-          <div class="title">宽带融合5G 169套餐</div>
-        </div>
+  <view class="content">
+    <view class="box">
+      <view class="header">
+        <view class="left">
+          <image src="@/static/order/shop.png" />
+          <view class="title">宽带融合5G 169套餐</view>
+        </view>
         <span class="status">待消费</span>
-      </div>
+      </view>
 
-      <div class="info">
-        <img
+      <view class="info">
+        <image
           mode="aspectFill"
           src="https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg"
         />
-        <div class="info-box">
-          <div class="text">下单时间：2023-06-27 15:53</div>
-          <div class="text">预约时间：2023-07-04 10:00-12:00</div>
-          <div class="text">数量：1</div>
-          <div class="text">实付：￥169</div>
-        </div>
-      </div>
-
-      <div class="btn">
-        <div class="btn-info">删除</div>
-        <div class="btn-info">查看预约</div>
-        <div class="btn-error">再来一单</div>
-      </div>
-    </div>
-  </div>
+        <view class="info-box">
+          <view class="text">下单时间：2023-06-27 15:53</view>
+          <view class="text">预约时间：2023-07-04 10:00-12:00</view>
+          <view class="text">数量：1</view>
+          <view class="text">实付：￥169</view>
+        </view>
+      </view>
+
+      <view class="btn">
+        <view class="btn-info">删除</view>
+        <view class="btn-info">查看预约</view>
+        <view class="btn-error">再来一单</view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script></script>
@@ -61,7 +61,7 @@
         align-items: center;
         gap: 20rpx;
 
-        img {
+        image {
           height: 38rpx;
           width: 38rpx;
         }
@@ -83,7 +83,7 @@
       display: flex;
       gap: 20rpx;
 
-      img {
+      image {
         width: 110rpx;
         height: 110rpx;
         border-radius: 12rpx;

src/pages/order/order.vue

 <template>
-  <div class="container">
+  <view class="container">
     <Header title="全部订单"></Header>
-    <div class="tabs">
+    <view class="tabs">
       <wd-tabs v-model="tab" animated lineWidth="38" lineHeight="3">
         <block v-for="item in tabs" :key="item">
           <wd-tab :title="`${item}`" :name="item">
@@ -9,8 +9,8 @@
           </wd-tab>
         </block>
       </wd-tabs>
-    </div>
-  </div>
+    </view>
+  </view>
 </template>
 
 <script setup>
@@ -22,25 +22,25 @@ const tab = ref('待使用');
 </script>
 
 <style scoped lang="scss">
-.container {
-  background-color: #f5f5f5;
-  height: 100vh;
+page {
+  background: #f3f3f3;
 }
+.container {
+  .tabs {
+    padding-top: 44px;
 
-.tabs {
-  padding-top: 44px;
+    .wd-tabs {
+      background-color: #f5f5f5;
+    }
 
-  .wd-tabs {
-    background-color: #f5f5f5;
-  }
-
-  &:deep(.wd-tabs__nav) {
-    background-color: #f5f5f5;
-  }
+    &:deep(.wd-tabs__nav) {
+      background-color: #f5f5f5;
+    }
 
-  &:deep(.wd-tabs__line) {
-    background-color: #e9231b;
-    bottom: 2px;
+    &:deep(.wd-tabs__line) {
+      background-color: #e9231b;
+      bottom: 2px;
+    }
   }
 }
 </style>