css

pages/mine/userOrder.vue

 <template>
 <template>
-    <view class="page-userOrder">1212</view>
+    <view class="page-userOrder">
+        <view class="top">
+            <view class="head row bothSide verCenter">
+                <view class="left row verCenter">
+                    <text class="iconfont icon-arrleft"></text>
+                    <view class="search-box row verCenter">
+                        <text class="iconfont icon-search"></text>
+                        <input type="text" placeholder="请输入订单号/型号" placeholder-style="color:#F5F5F7" class="uni-input" />
+                    </view>
+                </view>
+                <text class="filter">筛选</text>
+            </view>
+            <view class="tab  row avarage verCenter">
+                <view class="box row rowCenter verCenter"><text class="t1">全部</text></view>
+                <view class="box row rowCenter verCenter curr">
+                    <text class="t2">待付款</text>
+                    <text class="t3">（0）</text>
+                </view>
+                <view class="box row rowCenter verCenter">
+                    <text class="t2">待收货</text>
+                    <text class="t3">（80）</text>
+                </view>
+                <view class="box row rowCenter verCenter">
+                    <text class="t2">已完结订单</text>
+                    <text class="t3">（0）</text>
+                </view>
+            </view>
+        </view>
+        <view class="list">
+            <view class="box" v-for="(item, index) in 100" :key="index">
+                <view class="p1 row bothSide verCenter">
+                    <view class="row verCenter">
+                        <text class="t1">订单号：</text>
+                        <text class="t2">12022071810404SZ</text>
+                        <text class="t3">2023.04.24 11:40</text>
+                    </view>
+                    <text class="color2">待审核</text>
+                </view>
+                <view class="p2 row bothSide verCenter">
+                    <view class="row verCenter">
+                        <text class="t1">附加费：</text>
+                        <text class="t2" style="margin-right: 24rpx;">¥3580.23</text>
+                        <text class="t1">运费：</text>
+                        <text class="t2">￥10.00</text>
+                    </view>
+                    <view class="right-bar">
+                        <text class="bar-t1">共</text>
+                        <text class="bar-t2">4</text>
+                        <text class="bar-t1">件商品</text>
+                        <text class="iconfont icon-jt"></text>
+                    </view>
+                </view>
+                <view class="p3 row bothSide verCenter">
+                    <view class="row verCenter">
+                        <text class="t1">总金额：</text>
+                        <text class="price">¥3580.23</text>
+                    </view>
+                    <view class="right-bar row"><view class="btn0 row rowCenter verCenter">取消订单</view></view>
+                </view>
+            </view>
+        </view>
+    </view>
 </template>
 </template>
 
 
 <script>
 <script>