diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8c2e256..adb1d32 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -37,6 +37,7 @@
 ### 🚀 性能优化
 范围|描述|commitId
 --|--|--
+ - | 组件文件夹新建 | [22bfe7b](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/22bfe7b)
  - | 组件文件夹新建 | [17bb8c9](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/17bb8c9)
  - | 组件文件夹新建 | [1421504](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/1421504)
 
diff --git a/package-lock.json b/package-lock.json
index 1d6bd2b..d86a199 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1364,11 +1364,6 @@
         }
       }
     },
-    "@dcloudio/uni-helper-json": {
-      "version": "1.0.13",
-      "resolved": "https://registry.npm.taobao.org/@dcloudio/uni-helper-json/download/@dcloudio/uni-helper-json-1.0.13.tgz",
-      "integrity": "sha1-ToqgYtqu+zDZiXPANaewq2KDKcc="
-    },
     "@dcloudio/uni-i18n": {
       "version": "2.0.0-31920210609001",
       "resolved": "https://registry.nlark.com/@dcloudio/uni-i18n/download/@dcloudio/uni-i18n-2.0.0-31920210609001.tgz?cache=0&sync_timestamp=1624507203745&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40dcloudio%2Funi-i18n%2Fdownload%2F%40dcloudio%2Funi-i18n-2.0.0-31920210609001.tgz",
diff --git a/package.json b/package.json
index 81a5abe..af1c9d8 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,6 @@
   "dependencies": {
     "@dcloudio/uni-app-plus": "^2.0.0-31920210609001",
     "@dcloudio/uni-h5": "^2.0.0-31920210609001",
-    "@dcloudio/uni-helper-json": "*",
     "@dcloudio/uni-i18n": "^2.0.0-31920210609001",
     "@dcloudio/uni-mp-360": "^2.0.0-31920210609001",
     "@dcloudio/uni-mp-alipay": "^2.0.0-31920210609001",
diff --git a/src/components/Globals/index.vue b/src/components/Globals/index.vue
index cd00b56..b0e7ef1 100644
--- a/src/components/Globals/index.vue
+++ b/src/components/Globals/index.vue
@@ -3,17 +3,20 @@
  * @email: binbin0314@126.com
  * @Date: 2021-07-19 10:52:05
  * @LastEditors: aBin
- * @LastEditTime: 2021-07-19 11:09:23
+ * @LastEditTime: 2021-07-19 16:37:35
 -->
 <template>
   <view>
-    <u-card margin="0" :show-head="false" :show-foot="false">
+    <u-card margin="0" :show-head="false" :show-foot="false" border-radius="25">
       <view slot="body">
-        <view class="u-flex u-col-between p-0">
-          <view class="u-body-item-title u-line-2">瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半</view>
+        <view class="u-col-between p-0 u-skeleton">
+          <view class="u-line-2 u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆</view>
+          <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
+          <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
         </view>
       </view>
     </u-card>
+    <u-skeleton :loading="true" :animation="true" bgColor="#fff"></u-skeleton>
   </view>
 </template>
 <script>
diff --git a/src/components/TimeLine/components/Barrier.vue b/src/components/TimeLine/components/Barrier.vue
new file mode 100644
index 0000000..3d0f43e
--- /dev/null
+++ b/src/components/TimeLine/components/Barrier.vue
@@ -0,0 +1,26 @@
+<!--
+ * @Author: aBin
+ * @email: binbin0314@126.com
+ * @Date: 2021-07-19 14:22:54
+ * @LastEditors: aBin
+ * @LastEditTime: 2021-07-19 17:01:58
+-->
+<template>
+  <view>
+    <view class="bg-blue-400 h-8 pl-7 text-white" style="line-height: 2rem">辅助时间隔栏 </view>
+  </view>
+</template>
+<script>
+export default {
+  name: 'Barrier',
+  data() {
+    return {};
+  },
+};
+</script>
+<style scoped lang="scss">
+.container {
+  height: 200vh;
+  margin-top: 150rpx;
+}
+</style>
diff --git a/src/components/TimeLine/components/TimeBox.vue b/src/components/TimeLine/components/TimeBox.vue
new file mode 100644
index 0000000..5b1d9f9
--- /dev/null
+++ b/src/components/TimeLine/components/TimeBox.vue
@@ -0,0 +1,42 @@
+<!--
+ * @Author: aBin
+ * @email: binbin0314@126.com
+ * @Date: 2021-07-19 15:36:28
+ * @LastEditors: aBin
+ * @LastEditTime: 2021-07-19 17:10:38
+-->
+<template>
+  <view class="px-4">
+    <view v-for="item in list" :key="item" class="mt-2">
+      <view class="flex items-center">
+        <TimeStatus :status="item" />
+        <view class="flex-1 ml-2 flex justify-between">
+          <view>任务时间栏</view>
+          <view>任务快捷方式</view>
+        </view>
+      </view>
+      <view class="border-l-2 border-gray-300 h-16 ml-3.5">
+        <view class="ml-4 h-16 shadow-lg">
+          <u-card margin="0" :show-head="false" :show-foot="false" border-radius="25">
+            <view slot="body">
+              <view class="u-col-between p-0 u-skeleton">
+                <view class="u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆</view>
+              </view>
+            </view>
+          </u-card>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import TimeStatus from './TimeStatus.vue';
+export default {
+  name: 'TimeBox',
+  components: { TimeStatus },
+  data() {
+    return { list: [0, 1, 2, 3] };
+  },
+};
+</script>
diff --git a/src/components/TimeLine/components/TimeStatus.vue b/src/components/TimeLine/components/TimeStatus.vue
new file mode 100644
index 0000000..c94a97e
--- /dev/null
+++ b/src/components/TimeLine/components/TimeStatus.vue
@@ -0,0 +1,109 @@
+<!--
+ * @Author: aBin
+ * @email: binbin0314@126.com
+ * @Date: 2021-07-19 15:47:38
+ * @LastEditors: aBin
+ * @LastEditTime: 2021-07-19 17:24:21
+-->
+<template>
+  <view>
+    <view v-if="status === 0" class="rounded-full h-7 w-7 flex items-center justify-center text-blue-400">
+      <u-circle-progress width="66" borderWidth="4" active-color="#2979ff" :percent="100">
+        <view class="u-progress-content" @tap="changeStatus(0)">
+          <view class="u-progress-dot"></view>
+          <text class="u-progress-info">
+            <u-icon size="30" name="checkmark"></u-icon>
+          </text>
+        </view>
+      </u-circle-progress>
+    </view>
+    <view v-if="status === 1" class="rounded-full h-7 w-7 flex items-center justify-center text-black">
+      <u-circle-progress width="66" borderWidth="6" active-color="#2979ff" :percent="80">
+        <view class="u-progress-content" @tap="changeStatus(1)">
+          <view class="u-progress-dot"></view>
+          <view class="u-progress-info">
+            {{ time }}
+          </view>
+        </view>
+      </u-circle-progress>
+    </view>
+    <view v-if="status === 2" class="rounded-full h-7 w-7 flex items-center justify-center text-gray-400">
+      <u-circle-progress width="66" borderWidth="6" active-color="#2979ff" :percent="40">
+        <view class="u-progress-content" @tap="changeStatus(2)">
+          <view class="u-progress-dot"></view>
+          <text class="u-progress-info">
+            <u-icon size="30" name="play-right-fill"></u-icon>
+          </text>
+        </view>
+      </u-circle-progress>
+    </view>
+    <view v-if="status === 3" class="rounded-full h-7 w-7 flex items-center justify-center text-red-800 font-black">
+      <u-circle-progress width="66" borderWidth="6" active-color="#2979ff" :percent="80">
+        <view class="u-progress-content" @tap="changeStatus(3)">
+          <view class="u-progress-dot"></view>
+          <text class="u-progress-info">
+            <u-icon size="30" name="pause"></u-icon>
+          </text>
+        </view>
+      </u-circle-progress>
+    </view>
+    <u-action-sheet :list="chooseList()" v-model="show"></u-action-sheet>
+  </view>
+</template>
+<script>
+export default {
+  name: 'TimeStatus',
+  props: {
+    status: {
+      default: 0,
+      type: Number,
+    },
+  },
+  data() {
+    return {
+      time: 20,
+      start: [
+        {
+          text: '确认开始任务',
+          color: 'blue',
+        },
+      ],
+      pause: [
+        { text: '继续' },
+        {
+          text: '重新开始任务',
+          color: 'blue',
+        },
+        { text: '结束' },
+      ],
+      proceed: [
+        { text: '暂停' },
+        {
+          text: '重新开始任务',
+          color: 'blue',
+        },
+        { text: '结束' },
+      ],
+      again: [
+        {
+          text: '重新开始任务',
+          color: 'blue',
+        },
+      ],
+      change: 0,
+      show: false,
+    };
+  },
+  methods: {
+    chooseList() {
+      return this.start;
+    },
+    changeStatus(num) {
+      this.change === num;
+      this.show = true;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/TimeLine/components/Title.vue b/src/components/TimeLine/components/Title.vue
new file mode 100644
index 0000000..fafec0b
--- /dev/null
+++ b/src/components/TimeLine/components/Title.vue
@@ -0,0 +1,7 @@
+<!--
+ * @Author: aBin
+ * @email: binbin0314@126.com
+ * @Date: 2021-07-19 15:40:02
+ * @LastEditors: aBin
+ * @LastEditTime: 2021-07-19 15:40:03
+-->
diff --git a/src/components/TimeLine/index.vue b/src/components/TimeLine/index.vue
new file mode 100644
index 0000000..a7b2fa3
--- /dev/null
+++ b/src/components/TimeLine/index.vue
@@ -0,0 +1,28 @@
+<!--
+ * @Author: aBin
+ * @email: binbin0314@126.com
+ * @Date: 2021-07-19 14:15:35
+ * @LastEditors: aBin
+ * @LastEditTime: 2021-07-19 16:44:12
+-->
+<template>
+  <view>
+    <Barrier />
+    <scroll-view scroll-y="true" style="height: 1000rpx">
+      <view style="position: relative">
+        <TimeBox />
+      </view>
+    </scroll-view>
+  </view>
+</template>
+<script>
+import Barrier from './components/Barrier.vue';
+import TimeBox from './components/TimeBox.vue';
+export default {
+  name: 'TimeLine',
+  components: { Barrier, TimeBox },
+  data() {
+    return {};
+  },
+};
+</script>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index de31489..2234155 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -3,11 +3,12 @@
  * @email: binbin0314@126.com
  * @Date: 2021-07-19 10:09:22
  * @LastEditors: aBin
- * @LastEditTime: 2021-07-19 11:05:42
+ * @LastEditTime: 2021-07-19 16:36:17
 -->
 <template>
-  <view class="container p-4 bg-gray-100">
-    <Globals />
+  <view>
+    <Globals class="p-4" />
+    <TimeLine />
     <!-- <view class="mt-5">
       <u-button type="primary" size="default" @click="$u.route('/pages/plugin-test/plugin-test')">iframe 验证</u-button>
     </view>
@@ -22,8 +23,9 @@
 
 <script>
 import Globals from 'components/Globals/index.vue';
+import TimeLine from 'components/TimeLine/index.vue';
 export default {
-  components: { Globals },
+  components: { Globals, TimeLine },
   data() {
     return { title: 'Hello' };
   },
diff --git a/tailwind.config.js b/tailwind.config.js
index 23fe29a..2d74801 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,10 @@
+/*
+ * @Author: aBin
+ * @email: binbin0314@126.com
+ * @Date: 2021-07-19 10:09:22
+ * @LastEditors: aBin
+ * @LastEditTime: 2021-07-19 11:48:41
+ */
 module.exports = {
   purge: [],
   darkMode: false, // or 'media' or 'class'