增加余额明细列表

public/cdn/layui-ul.css

@@ -1039,6 +1039,35 @@
   margin-right: 3px;
 }
 
+.list-record .item-record {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #fff;
+  box-shadow: 0px 0px 4px rgba(77, 85, 114, 0.1);
+  padding: 12px;
+  margin-bottom: 9px;
+  border-radius: 12px;
+}
+.list-record .item-record .right {
+  text-align: right;
+}
+.list-record .item-record .item-name {
+  font-size: 14px;
+}
+.list-record .item-record .item-desc {
+  font-size: 12px;
+  color: #999;
+  margin-top: 6px;
+}
+.list-record .item-record .item-change {
+  font-weight: 600;
+  color: green;
+}
+.list-record .item-record .item-change.status-2 {
+  color: orangered;
+}
+
 .ul-book-list {
   display: flex;
   align-items: flex-start;

source/components/_index.scss

@@ -2,6 +2,7 @@
 @import './descriptions/ul-descriptions-info/index';
 @import './descriptions/ul-easy-item/index';
 @import './header/ul-shop-header/index';
+@import './list/list-record/index';
 @import './list/ul-book-item/index';
 @import './list/ul-music-list/index';
 @import './list/ul-order-list-simple-card/index';

source/components/list/list-record/_index.env

@@ -0,0 +1,5 @@
+title=明细列表
+padding=1
+margin=0
+gray=1
+mobile=1

source/components/list/list-record/_index.html

@@ -0,0 +1,40 @@
+<div class="list-record">
+    <div class="item-record" data-repeat="3">
+        <div class="left">
+            <div class="item-name">
+                充值
+            </div>
+            <div class="item-desc">
+                小程序端充值
+            </div>
+        </div>
+        <div class="right">
+            <div class="item-change">
+                +1000
+            </div>
+            <div class="item-desc">
+                2023年4月10日21:12:23
+            </div>
+        </div>
+
+    </div>
+    <div class="item-record">
+        <div class="left">
+            <div class="item-name">
+                消费
+            </div>
+            <div class="item-desc">
+                商城消费
+            </div>
+        </div>
+        <div class="right">
+            <div class="item-change status-2">
+                -1000
+            </div>
+            <div class="item-desc">
+                2023年4月10日21:12:23
+            </div>
+        </div>
+
+    </div>
+</div>

source/components/list/list-record/_index.scss

@@ -0,0 +1,36 @@
+.list-record {
+    .item-record {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background-color: #fff;
+        box-shadow: 0px 0px 4px rgba(77, 85, 114, 0.1);
+        padding: 12px;
+        margin-bottom: 9px;
+        border-radius: 12px;
+
+
+        .right {
+            text-align: right;
+        }
+
+        .item-name {
+            font-size: 14px;
+        }
+
+        .item-desc {
+            font-size: 12px;
+            color: #999;
+            margin-top: 6px;
+        }
+
+        .item-change {
+            font-weight: 600;
+            color: green;
+
+            &.status-2 {
+                color: orangered
+            }
+        }
+    }
+}