刚刚的样式不够好看,要那种订单卡片展示
时间: 2024-10-25 09:10:15 浏览: 7
微信小程序uniapp银行卡卡片样式组件
对于订单卡片展示,你可以更注重细节设计,比如增加状态颜色、订单时间等信息,并且可以使用一些常见的UI库来提升视觉效果。以下是一个基本的示例,假设使用Element Plus这类库:
**1. wxml (页面文件)**
```html
<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 (样式文件)**
```css
.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 (逻辑处理)**
```javascript
Page({
data: {
orders: [
// 假设这是你的订单数组
],
}
})
```
阅读全文