diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6a152ea..c3c1261 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 范围|描述|commitId
 --|--|--
  - | 标题栏角色栏全局任务组件新建 | [0500cb4](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/0500cb4)
+ - | 角色栏实现 | [94cd671](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/94cd671)
  - | db store | [6414c4f](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/6414c4f)
  - | indexedDB | [687394e](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/687394e)
  富文本插件 | 富文本插件demo测试 | [ed3d644](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/ed3d644)
diff --git a/package-lock.json b/package-lock.json
index bff9666..03735de 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/Roles/Roles.vue b/src/components/Roles/Roles.vue
index b6d88d9..28314e1 100644
--- a/src/components/Roles/Roles.vue
+++ b/src/components/Roles/Roles.vue
@@ -10,17 +10,6 @@
     <view class="rolebar">
       <view>
         <view class="container u-skeleton" v-if="roles || roles.length">
-          <!-- <u-tag
-            :key="role.id"
-            :mode="currentRoleIndex === index ? 'dark' : 'light'"
-            :text="role.value"
-            :type="role.isMine === 1 ? 'warning' : role.isMine === 0 && currentRoleIndex === index ? 'primary' : ''"
-            @tap="handleClickRole(index)"
-            class="u-m-15"
-            shape="circle"
-            v-for="(role, index) in roles"
-          ></u-tag>-->
-
           <u-tabs
             :bar-width="barWidth"
             :current="currentRoleIndex"
@@ -39,9 +28,7 @@
             class="u-skeleton-rect"
             ref="tabs"
           >
-            <template v-slot:name>
-              <span :key="role.id" v-for="role in roles">{{ role.value }}</span>
-            </template>
+            <template slot="name">++++</template>
           </u-tabs>-->
         </view>
         <u-skeleton :animation="true" :loading="loading" bgcolor="#fff" v-else></u-skeleton>
@@ -65,7 +52,7 @@ export default {
       currentRoleIndex: 0,
       barWidth: 80,
 
-      loading: true, // 是否显示骨架屏组件
+      loading: false, // 是否显示骨架屏组件
     };
   },
 
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 9357804..a456a4a 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -3,14 +3,16 @@
  * @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>
     <Roles />
-    <view class="container p-4 bg-gray-100">
-      <Globals />
+    <view class="container bg-gray-100">
+      <Globals class="p-4" />
+      <TimeLine />
       <!-- <view class="mt-5">
+    <view class="mt-5">
       <u-button type="primary" size="default" @click="$u.route('/pages/plugin-test/plugin-test')">iframe 验证</u-button>
     </view>
     <view class="my-3">
@@ -19,18 +21,19 @@
     <view class="my-3">
       <u-button type="error" size="default" @click="openPage">pinch 事件验证</u-button>
       </view>-->
+      <!-- <Project /> -->
     </view>
-    <Project />
   </view>
 </template>
 
 <script>
 import Globals from 'components/Globals/index.vue';
 import Roles from 'components/Roles/Roles.vue';
-import Project from 'components/Project/Project.vue';
+// import Project from 'components/Project/Project.vue';
+import TimeLine from 'components/TimeLine/index.vue';
 
 export default {
-  components: { Globals, Roles, Project },
+  components: { Globals, TimeLine, Roles },
   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'