刚刚的样式不够好看，要那种订单卡片展示

对于订单卡片展示，你可以更注重细节设计，比如增加状态颜色、订单时间等信息，并且可以使用一些常见的UI库来提升视觉效果。以下是一个基本的示例，假设使用Element Plus这类库：

**1. wxml (页面文件)**

<template>
  <view class="order-container">
    <el-card v-for="order in orders" :key="order.id" shadow="hover">
      <div class="order-header">
        <span>订单编号: {{ order.orderNo }}</span>
        <span class="order-status" :class="{ green: order.status === '已完成' }">{{ order.status }}</span>
      </div>
      <div class="order-body">
        <div class="order-date">下单时间: {{ order.orderTime }}</div>
        <div class="order-detail">
          <span>商品名称: {{ order.productName }}</span>
          <span>金额: {{ order.price }}元</span>
        </div>
      </div>
    </el-card>
  </view>
</template>

**2. wxss (样式文件)**

.order-container {
  display: flex;
  justify-content: space-between;
}

.order-header {
  display: flex;
  align-items: center;
}

.order-status {
  margin-left: 10rpx;
  color: #409EFF; /* 颜色可以根据实际需要调整 */
}

/* 添加更多的样式，例如绿色背景表示完成状态 */
.green {
  background-color: lightgreen;
}

.order-body {
  margin-top: 10rpx;
}

**3. js (逻辑处理)**

Page({
  data: {
    orders: [
      // 假设这是你的订单数组
    ],
  }
})