diff --git a/CHANGELOG.md b/CHANGELOG.md
index c3c1261..8a3435a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 --|--|--
  - | 标题栏角色栏全局任务组件新建 | [0500cb4](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/0500cb4)
  - | 角色栏实现 | [94cd671](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/94cd671)
+ - | 时间轴界面 | [33927e9](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/33927e9)
  - | 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/src/components/Project/components/TimeBar.vue b/src/components/Project/components/TimeBar.vue
index aa3a938..07e8824 100644
--- a/src/components/Project/components/TimeBar.vue
+++ b/src/components/Project/components/TimeBar.vue
@@ -12,7 +12,7 @@
 export default {
   name: 'TimeBar',
   data() {
-    return { status: 0 };
+    return {};
   },
 };
 </script>
diff --git a/src/components/Roles/Roles.vue b/src/components/Roles/Roles.vue
index 28314e1..94b26e7 100644
--- a/src/components/Roles/Roles.vue
+++ b/src/components/Roles/Roles.vue
@@ -9,7 +9,7 @@
   <view class="wrap">
     <view class="rolebar">
       <view>
-        <view class="container u-skeleton" v-if="roles || roles.length">
+        <view class="container" v-if="roles || roles.length">
           <u-tabs
             :bar-width="barWidth"
             :current="currentRoleIndex"
diff --git a/src/components/TimeLine/components/Barrier.vue b/src/components/TimeLine/components/Barrier.vue
index 3d0f43e..23e7610 100644
--- a/src/components/TimeLine/components/Barrier.vue
+++ b/src/components/TimeLine/components/Barrier.vue
@@ -6,8 +6,12 @@
  * @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 class>
+    <!-- :class="{ active: cycleTasks.time.start === filter.startTime }" -->
+    <view class="cycle-time active">
+      <!-- {{ $util.formatStartTimeToCycleTime(filter.time, cycleTasks.time.start) }} -->
+      2021年30周
+    </view>
   </view>
 </template>
 <script>
@@ -19,8 +23,20 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.container {
-  height: 200vh;
-  margin-top: 150rpx;
+.cycle-time {
+  padding: 8rpx 16rpx;
+  margin-bottom: 16rpx;
+  background: #fafafc;
+  color: $uni-text-color;
+  font-size: 14px;
+  position: sticky;
+  top: -1px;
+  left: 0;
+  z-index: 99;
+
+  &.active {
+    background: $uni-color-primary;
+    color: $uni-text-color-inverse;
+  }
 }
 </style>
diff --git a/src/components/TimeLine/components/TimeStatus.vue b/src/components/TimeLine/components/TimeStatus.vue
index c94a97e..dc0e268 100644
--- a/src/components/TimeLine/components/TimeStatus.vue
+++ b/src/components/TimeLine/components/TimeStatus.vue
@@ -7,42 +7,40 @@
 -->
 <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="rounded-full h-7 w-7 flex items-center justify-center text-blue-400" v-if="status === 0">
+      <u-circle-progress :percent="100" active-color="#2979ff" borderWidth="4" width="66">
+        <view @tap="changeStatus(0)" class="u-progress-content">
           <view class="u-progress-dot"></view>
           <text class="u-progress-info">
-            <u-icon size="30" name="checkmark"></u-icon>
+            <u-icon name="checkmark" size="30"></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="rounded-full h-7 w-7 flex items-center justify-center text-black" v-if="status === 1">
+      <u-circle-progress :percent="80" active-color="#2979ff" borderWidth="6" width="66">
+        <view @tap="changeStatus(1)" class="u-progress-content">
           <view class="u-progress-dot"></view>
-          <view class="u-progress-info">
-            {{ time }}
-          </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="rounded-full h-7 w-7 flex items-center justify-center text-gray-400" v-if="status === 2">
+      <u-circle-progress :percent="40" active-color="#2979ff" borderWidth="6" width="66">
+        <view @tap="changeStatus(2)" class="u-progress-content">
           <view class="u-progress-dot"></view>
           <text class="u-progress-info">
-            <u-icon size="30" name="play-right-fill"></u-icon>
+            <u-icon name="play-right-fill" size="30"></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="rounded-full h-7 w-7 flex items-center justify-center text-red-800 font-black" v-if="status === 3">
+      <u-circle-progress :percent="80" active-color="#2979ff" borderWidth="6" width="66">
+        <view @tap="changeStatus(3)" class="u-progress-content">
           <view class="u-progress-dot"></view>
           <text class="u-progress-info">
-            <u-icon size="30" name="pause"></u-icon>
+            <u-icon name="pause" size="30"></u-icon>
           </text>
         </view>
       </u-circle-progress>