我需要一个"设备抵扣记录"页面, 展示设备的抵扣记录情况, 有以下要求
1. 查询条件, 使用块布局, 需要有阴影, 凸显出来,
- 设备号查询, 一个文本输入框, 用于输入设备号, 仅支持字母和数字,最多64个字符
- 抵扣状态: 点击后弹出选择框, 使用 uni-app 的选择框组件(<picker></picker>), 有: 等待扣除,已扣除,已取消,已撤销扣除 , 以及所有状态. 默认是所有状态
- 查询按钮: 点击后进行查询, 你只需要模拟查询,
2 展示数据: 展示查询到的数据, 使用卡片布局, 每个卡片展示一条记录, 卡片之间有间距, 展示布局内容如下
- 设备号 : 展示当前设备机身号, 使用左右布局, 左侧展示号码,右侧提供一个复制按钮,
- 分割线: 展示一个分割线, 高度为1rpx, 颜色为 #e5e5e5, 区分设备号和后续内容
- 平台: 左右布局, 左侧展示 平台, 右侧展示具体的平台名称,
- 抵扣状态: 左右布局, 左侧展示 平台, 右侧展示具体的平台名称,
- 抵扣时间: 展示抵扣时间, 格式为 年-月-日 时:分
- 抵扣金额: 展示抵扣金额, 格式为 1234.56,
- 商户号: 展示商户号, 格式为 1234567890,注意
- 更多: 换行展示更多按钮, 点击后导航到"设备抵扣详情"页面, 展示该条记录的详细信息.
颜色: 主题颜色以橘红色和橙色为主, 蓝色,绿色为辅, 颜色需要高亮色，鲜艳.
设备: 我的应用是手机移动端的, 不用考虑响应式布局
样式: style 请使用 lang="scss", 相关的节点的样式请使用 scss 中的层级嵌套,以便查阅.
代码: 需要提供 uni-app 的 vue2 代码, 我的程序需要兼容微信小程序, 请使用uni-app 的节点, view,text,image 等节点,
图标: 我下载了 fontawesome-free-6.4.0-web 图标库, 请使用其中的图标. 我将里面的所有图标都放在了 /static/icons目录下,请按照此路径引用, 这些图标都是svg格式的.