添加组件及页面

miniprogram/pages/index/index.wxss

@@ -1,14 +1,34 @@
-.container {
-  height: calc(100vh - var(--td-tab-bar-height, 80rpx) - env(safe-area-inset-bottom));
+page {
+  background: #f5f5f5;
+}
+
+.menu-box {
+  background-color: #fff;
+  border-radius: 8rpx;
+  margin-bottom: 32rpx;
+}
+
+.menu-title {
+  display: flex;
+  align-items: center;
+  padding: 16rpx 24rpx;
+  border-bottom: 1rpx solid #ddd;
+}
+
+.menu-children-box {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 16rpx;
 }
 
 .menu-item {
   display: inline-flex;
   flex-direction: column;
-  width: clamp(80px, 25%, 120px);
+  width: clamp(80rpx, 25%, 200rpx);
   box-sizing: border-box;
-  padding: 8px;
-  --width: calc((100vw - 16px - 24px) / 4 * 0.4);
+  padding: 16rpx;
+  --width: calc((100vw - 32rpx - 48rpx - 16rpx) / 4 * 0.4);
   justify-content: center;
   align-items: center;
 }
@@ -23,3 +43,41 @@
   display: inline-flex;
   box-sizing: border-box;
 }
+
+.block-box {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  row-gap: 24rpx;
+  column-gap: 24rpx;
+  margin-bottom: 48rpx;
+}
+
+.block-item-box {
+  border-radius: 8rpx;
+  padding: 24rpx;
+  box-sizing: border-box;
+}
+
+.block-item-name {
+  font-size: 1.125em;
+  margin-bottom: 32rpx;
+}
+
+.block-item-value {
+  display: flex;
+  font-size: 1.4em;
+  font-weight: bold;
+  align-items: flex-end;
+  line-height: 1.2;
+  justify-content: flex-end;
+}
+
+.block-item-value text:first-child {
+  line-height: 1;
+}
+
+.block-item-value text:last-child {
+  font-weight: normal;
+  font-size: 0.75em;
+  color: #333;
+}