From 6c17db566a5be8a752e5b70ade4f393042dd91df Mon Sep 17 00:00:00 2001
From: AntzyMo <mozbano@163.com>
Date: Wed, 3 Aug 2022 16:37:43 +0800
Subject: [PATCH] =?UTF-8?q?docs(countdown):=20=E6=94=B9=E5=BB=BAcountdown?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

改进countdown文档
---
 src/count-down/README.md                      | 40 ++------------
 src/count-down/_example/base/index.js         |  5 ++
 src/count-down/_example/base/index.json       |  6 +++
 src/count-down/_example/base/index.wxml       | 29 ++++++++++
 src/count-down/_example/base/index.wxss       | 20 +++++++
 src/count-down/_example/count-down.json       |  4 +-
 src/count-down/_example/count-down.wxml       | 54 ++-----------------
 .../_example/sizeCountDown/index.js           |  5 ++
 .../_example/sizeCountDown/index.json         |  6 +++
 .../_example/sizeCountDown/index.wxml         | 27 ++++++++++
 .../_example/sizeCountDown/index.wxss         | 30 +++++++++++
 11 files changed, 137 insertions(+), 89 deletions(-)
 create mode 100644 src/count-down/_example/base/index.js
 create mode 100644 src/count-down/_example/base/index.json
 create mode 100644 src/count-down/_example/base/index.wxml
 create mode 100644 src/count-down/_example/base/index.wxss
 create mode 100644 src/count-down/_example/sizeCountDown/index.js
 create mode 100644 src/count-down/_example/sizeCountDown/index.json
 create mode 100644 src/count-down/_example/sizeCountDown/index.wxml
 create mode 100644 src/count-down/_example/sizeCountDown/index.wxss

diff --git a/src/count-down/README.md b/src/count-down/README.md
index e3a570053..48fda3662 100644
--- a/src/count-down/README.md
+++ b/src/count-down/README.md
@@ -19,45 +19,11 @@ isComponent: true
 
 ### 基础倒计时
 
-动态倒计时间主要有时间数字和时分秒分割组成，尺寸可通过 class 进行控制
+{{ base }}
 
-<img src="https://tdesign.gtimg.com/miniprogram/readme/countdown.png" width="375px" height="50%">
+### 调整尺寸
 
-```html
-<!-- 时分秒毫秒 -->
-<t-count-down time="{{96 * 60 * 1000}}" />
-
-<!-- 带毫秒 -->
-<t-count-down format="HH:mm:ss:SSS" time="{{96 * 60 * 1000}}" millisecond />
-
-<!-- 带方形底 -->
-<t-count-down content="default" time="{{96 * 60 * 1000}}" theme="square" />
-
-<!-- Large 带方形底 -->
-<t-count-down content="default" time="{{96 * 60 * 1000}}" theme="square" size="large" />
-
-<!-- 自定义内容 -->
-<t-count-down
-  t-class="custom-theme"
-  content="slot"
-  time="{{96 * 60 * 1000}}"
-  bind:change="onChange"
->
-  <text class="item">{{timeData.hours}}</text>
-  <text class="item-dot">:</text>
-  <text class="item">{{timeData.minutes}}</text>
-  <text class="item-dot">:</text>
-  <text class="item">{{timeData.seconds}}</text>
-</t-count-down>
-```
-
-```js
-onChange(e) {
-  this.setData({
-    timeData: e.detail,
-  });
-},
-```
+{{ sizeCountDown }}
 
 ## API
 ### CountDown Props
diff --git a/src/count-down/_example/base/index.js b/src/count-down/_example/base/index.js
new file mode 100644
index 000000000..d07c6c422
--- /dev/null
+++ b/src/count-down/_example/base/index.js
@@ -0,0 +1,5 @@
+Component({
+  data: {
+    time: 96 * 60 * 1000,
+  },
+});
diff --git a/src/count-down/_example/base/index.json b/src/count-down/_example/base/index.json
new file mode 100644
index 000000000..662fded9a
--- /dev/null
+++ b/src/count-down/_example/base/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-count-down": "tdesign-miniprogram/count-down/count-down"
+  }
+}
diff --git a/src/count-down/_example/base/index.wxml b/src/count-down/_example/base/index.wxml
new file mode 100644
index 000000000..46d45e81d
--- /dev/null
+++ b/src/count-down/_example/base/index.wxml
@@ -0,0 +1,29 @@
+<view class="flex base-time">
+  <t-count-down t-class="base-time-cls" time="{{ time }}" />
+  <view class="base-time-text"> 时分秒 </view>
+</view>
+
+<view class="flex base-time">
+  <t-count-down t-class="base-time-cls" format="HH:mm:ss:SSS" time="{{ time }}" millisecond />
+  <view class="base-time-text"> 带毫秒 </view>
+</view>
+
+<view class="flex base-time">
+  <t-count-down content="default" time="{{ time }}" theme="square"> </t-count-down>
+  <view class="base-time-text"> 带方形底 </view>
+</view>
+
+<view class="flex base-time">
+  <t-count-down content="default" time="{{ time }}" theme="round"> </t-count-down>
+  <view class="base-time-text"> 带圆形底 </view>
+</view>
+
+<view class="flex base-time">
+  <t-count-down content="default" time="{{ time }}" splitWithUnit theme="round" />
+  <view class="base-time-text"> 带单位 </view>
+</view>
+
+<view class="flex base-time">
+  <t-count-down content="default" time="{{ time }}" splitWithUnit theme="highlight" />
+  <view class="base-time-text"> 无底色带单位 </view>
+</view>
diff --git a/src/count-down/_example/base/index.wxss b/src/count-down/_example/base/index.wxss
new file mode 100644
index 000000000..0a696e059
--- /dev/null
+++ b/src/count-down/_example/base/index.wxss
@@ -0,0 +1,20 @@
+.flex {
+  display: flex;
+  align-items: center;
+}
+
+.base-time {
+  margin-top: 52rpx;
+  justify-content: space-between;
+}
+
+.base-time-text {
+  font-size: 20rpx;
+  color: rgba(0, 0, 0, 0.4);
+  width: 60%;
+}
+
+.base-time-cls {
+  color: #333;
+  font-weight: 700;
+}
diff --git a/src/count-down/_example/count-down.json b/src/count-down/_example/count-down.json
index 066b7f77f..9a727aa51 100644
--- a/src/count-down/_example/count-down.json
+++ b/src/count-down/_example/count-down.json
@@ -2,6 +2,8 @@
   "navigationBarTitleText": "count-down 倒计时",
   "navigationBarBackgroundColor": "#fff",
   "usingComponents": {
-    "t-demo": "../../components/demo-block/index"
+    "t-demo": "../../components/demo-block/index",
+    "base": "./base",
+    "sizeCountDown": "./sizeCountDown"
   }
 }
diff --git a/src/count-down/_example/count-down.wxml b/src/count-down/_example/count-down.wxml
index 5b22b4cea..d7a3fcae4 100644
--- a/src/count-down/_example/count-down.wxml
+++ b/src/count-down/_example/count-down.wxml
@@ -2,57 +2,9 @@
 <view class="demo-desc">用于实时展示倒计时数值。</view>
 
 <t-demo padding title="01 类型" desc="动态倒计时间主要有时间数字和时分秒分割组成">
-  <view class="flex base-time">
-    <t-count-down t-class="base-time-cls" time="{{ time }}" />
-    <view class="base-time-text"> 时分秒 </view>
-  </view>
-  <view class="flex base-time">
-    <t-count-down t-class="base-time-cls" format="HH:mm:ss:SSS" time="{{ time }}" millisecond />
-    <view class="base-time-text"> 带毫秒 </view>
-  </view>
-  <view class="flex base-time">
-    <t-count-down content="default" time="{{ time }}" theme="square"> </t-count-down>
-    <view class="base-time-text"> 带方形底 </view>
-  </view>
-  <view class="flex base-time">
-    <t-count-down content="default" time="{{ time }}" theme="round"> </t-count-down>
-    <view class="base-time-text"> 带圆形底 </view>
-  </view>
-  <view class="flex base-time">
-    <t-count-down content="default" time="{{ time }}" splitWithUnit theme="round" />
-    <view class="base-time-text"> 带单位 </view>
-  </view>
-  <view class="flex base-time">
-    <t-count-down content="default" time="{{ time }}" splitWithUnit theme="highlight" />
-    <view class="base-time-text"> 无底色带单位 </view>
-  </view>
+  <base />
 </t-demo>
+
 <t-demo padding title="02 规格" desc="动倒计时带底色和无底色各尺寸规格">
-  <view class="flex spec-item">
-    <view class="spec-item-left">
-      <t-count-down content="default" time="{{ time }}" theme="square" />
-    </view>
-    <view class="spec-item-right">
-      <t-count-down time="{{ time }}" />
-    </view>
-    <view class="spec-item-after"> S </view>
-  </view>
-  <view class="flex spec-item">
-    <view class="spec-item-left">
-      <t-count-down content="default" time="{{ time }}" theme="square" size="middle" />
-    </view>
-    <view class="spec-item-right">
-      <t-count-down size="middle" time="{{ time }}" />
-    </view>
-    <view class="spec-item-after"> M </view>
-  </view>
-  <view class="flex spec-item last-padding">
-    <view class="spec-item-left">
-      <t-count-down content="default" time="{{ time }}" theme="square" size="large"> </t-count-down>
-    </view>
-    <view class="spec-item-right">
-      <t-count-down size="large" time="{{ time }}" />
-    </view>
-    <view class="spec-item-after"> L </view>
-  </view>
+  <sizeCountDown />
 </t-demo>
diff --git a/src/count-down/_example/sizeCountDown/index.js b/src/count-down/_example/sizeCountDown/index.js
new file mode 100644
index 000000000..d07c6c422
--- /dev/null
+++ b/src/count-down/_example/sizeCountDown/index.js
@@ -0,0 +1,5 @@
+Component({
+  data: {
+    time: 96 * 60 * 1000,
+  },
+});
diff --git a/src/count-down/_example/sizeCountDown/index.json b/src/count-down/_example/sizeCountDown/index.json
new file mode 100644
index 000000000..662fded9a
--- /dev/null
+++ b/src/count-down/_example/sizeCountDown/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-count-down": "tdesign-miniprogram/count-down/count-down"
+  }
+}
diff --git a/src/count-down/_example/sizeCountDown/index.wxml b/src/count-down/_example/sizeCountDown/index.wxml
new file mode 100644
index 000000000..c7d958453
--- /dev/null
+++ b/src/count-down/_example/sizeCountDown/index.wxml
@@ -0,0 +1,27 @@
+<view class="flex spec-item">
+  <view class="spec-item-left">
+    <t-count-down content="default" time="{{ time }}" theme="square" />
+  </view>
+  <view class="spec-item-right">
+    <t-count-down time="{{ time }}" />
+  </view>
+  <view class="spec-item-after"> S </view>
+</view>
+<view class="flex spec-item">
+  <view class="spec-item-left">
+    <t-count-down content="default" time="{{ time }}" theme="square" size="middle" />
+  </view>
+  <view class="spec-item-right">
+    <t-count-down size="middle" time="{{ time }}" />
+  </view>
+  <view class="spec-item-after"> M </view>
+</view>
+<view class="flex spec-item last-padding">
+  <view class="spec-item-left">
+    <t-count-down content="default" time="{{ time }}" theme="square" size="large"> </t-count-down>
+  </view>
+  <view class="spec-item-right">
+    <t-count-down size="large" time="{{ time }}" />
+  </view>
+  <view class="spec-item-after"> L </view>
+</view>
diff --git a/src/count-down/_example/sizeCountDown/index.wxss b/src/count-down/_example/sizeCountDown/index.wxss
new file mode 100644
index 000000000..424168b1f
--- /dev/null
+++ b/src/count-down/_example/sizeCountDown/index.wxss
@@ -0,0 +1,30 @@
+.flex {
+  display: flex;
+  align-items: center;
+}
+
+.spec-item {
+  justify-content: space-between;
+  margin-top: 32rpx;
+}
+
+.spec-item-right {
+  width: 118 * 2rpx;
+}
+
+.spec-item-left {
+  width: 176 * 2rpx;
+}
+
+.spec-item-after {
+  font-size: 20rpx;
+  color: rgba(0, 0, 0, 0.4);
+  justify-content: center;
+  display: inline-flex;
+  align-items: center;
+  width: 30%;
+}
+
+.last-padding {
+  padding-bottom: 80rpx;
+}