chore(demo): optimize css style (#3129)

Tencent · Sep 9, 2024 · 427d866 · 427d866
1 parent 326eb05
commit 427d866
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 25 deletions.
diff --git a/src/checkbox/_example/horizontal/index.wxss b/src/checkbox/_example/horizontal/index.wxss
@@ -2,5 +2,6 @@
   padding: 32rpx;
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
   background-color: var(--td-bg-color-container, #fff);
-}
+}
diff --git a/src/checkbox/_example/special/index.wxss b/src/checkbox/_example/special/index.wxss
@@ -37,29 +37,22 @@
 
 /* 横向布局 */
 .horizontal-box {
-  width: calc(100% - 64rpx);
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
   margin: 32rpx;
 }
 
 .horizontal-box .card {
-  flex: 1;
-  margin: 0;
-}
-
-.horizontal-box .card {
-  margin-left: 24rpx;
-}
-
-.horizontal-box .card:first-child {
-  margin-left: 0;
+  flex: 0 0 calc(33.33% - 12rpx);
+  margin: 0 0 24rpx 0;
 }
 
 .horizontal-box .card::after {
-  border-width: 24px 24px 24px 0;
+  border-width: 48rpx 48rpx 48rpx 0;
 }
 
 .horizontal-box .card__icon {
-  font-size: 12px;
+  font-size: 24rpx;
 }
diff --git a/src/radio/_example/horizontal/index.wxss b/src/radio/_example/horizontal/index.wxss
@@ -2,5 +2,6 @@
   padding: 32rpx;
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
   background-color: var(--td-bg-color-container, #fff);
-}
+}
diff --git a/src/radio/_example/special/index.wxss b/src/radio/_example/special/index.wxss
@@ -33,21 +33,15 @@
 
 /* 横向布局 */
 .horizontal-box {
-  width: calc(100% - 64rpx);
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
   margin: 32rpx;
 }
 
 .horizontal-box .card {
-  flex: 1;
-  margin: 0;
+  flex: 0 0 calc(33.33% - 12rpx);
+  margin: 0 0 24rpx 0;
 }
 
-.horizontal-box .card {
-  margin-left: 24rpx;
-}
-
-.horizontal-box .card:first-child {
-  margin-left: 0;
-}