我需要一个"押金设置页面"页面, 展示添加押金入口和 已设置的记录.
每一项都使用卡片进行布局, 卡片之间有间距, 展示布局如下:
1 添加押金设置: 提供添加押金入口, 点击后 跳转到"添加押金设置"页面,
- 左侧: 展示添加图标, 这个图标要尺寸要大一些
- 右侧: 展示标题和说明文字, 上下展示, 标题加粗
2. 搜索表单, 提供一个搜索框, 搜索按钮, 一行展示
- 搜索框: 提现信息为 "终端号/商户号搜索",
- 搜索按钮: 提供一个 搜索按钮, 有图标
3. 以往设置的记录: 展示设置记录, 每一项都使用卡片展示
- 标题栏: 左右布局展示终端号, 右侧展示复制按钮
- 分割线: 展示一个分割线, 高度为1rpx, 颜色为 #e5e5e5
- 押金金额: 右侧展示押金金额分
- 设置时间: 右侧展示设置时间, 格式为 年-月-日 时:分
- 是否支付: 右侧 是否支付: 已支付/ 未支付
- 操控栏: 右布局 展示按钮集合:
- 详情按钮: 展示详情按钮, 点击后 跳转到"押金设置详情"页面,
- 查看支付码 按钮, 点击后弹出支付码图片,
数据格式如下,请配合使用,
```
[
{
"f主键": "",
"f用户主键": 0,
"f代理主键": 0,
"f设备号": "",
"f二维码内容": "",
"f支付商品主键": 0,
"f创建时间": 0,
"f支付时间": 0,
"orderListId": 0,
"f是否支付": false,
"f押金政策主键": 0,
"f奖励政策主键": 0,
"f生成押金主键": 0,
"f生成政策主键": 0
}
]
```
颜色: 主题颜色以橘红色和橙色为主, 蓝色,绿色为辅, 颜色需要高亮色，鲜艳.
设备: 我的应用是手机移动端的, 不用考虑响应式布局
样式: style 请使用 lang="scss", 相关的节点的样式请使用 scss 中的层级嵌套,以便查阅.
代码: 需要提供 uni-app 的 vue2 代码, 我的程序需要兼容微信小程序, 请使用uni-app 的节点, view,text,image 等节点,
图标: 我下载了 fontawesome-free-6.4.0-web 图标库, 请使用其中的图标. 我将里面的所有图标都放在了 /static/icons目录下,请按照此路径引用, 这些图标都是svg格式的.