init

miniprogram/components/statistics-card/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

miniprogram/components/statistics-card/index.scss

@@ -0,0 +1,28 @@
+/* components/statistics-card/index.wxss */
+.statistcs-card {
+  display: flex;
+  justify-content: space-between;
+  border-radius: 16rpx;
+  margin: 0 32rpx;
+  background-color: #fff;
+  padding: 32rpx 0;
+  .statistcs-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    &:not(:last-child) {
+      border-right: 1px solid #eee;
+    }
+    .value {
+      color: #0052d9;
+      font-size: larger;
+      font-weight: bold;
+    }
+    .title {
+      margin-top: 6rpx;
+      color: #555;
+      font-size: small;
+    }
+  }
+}

miniprogram/components/statistics-card/index.ts

@@ -0,0 +1,21 @@
+// components/statistics-card/index.ts
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    statisticsData: {
+      type: Object,
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {},
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {},
+});

miniprogram/components/statistics-card/index.wxml

@@ -0,0 +1,7 @@
+<!--components/statistics-card/index.wxml-->
+<view class="statistcs-card">
+  <view wx:for="{{statisticsData}}" wx:key="key" wx:for-item="value" class="statistcs-item">
+    <view class="value">{{value.value}}</view>
+    <view class="title">{{value.label}}</view>
+  </view>
+</view>