diff --git a/CHANGELOG.md b/CHANGELOG.md
index 308a53c..c6a0eb4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### 🌟 新功能
 范围|描述|commitId
 --|--|--
+ - | 标题栏角色栏全局任务组件新建 | [0500cb4](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/0500cb4)
  - | 提交到本地 | [9cbe411](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/9cbe411)
  - | db store | [6414c4f](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/6414c4f)
  - | indexedDB | [687394e](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/687394e)
@@ -10,34 +11,48 @@
  pinch | alloy finger实现图片的pinch放大缩小 | [de01343](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/de01343)
 
 
+### 🎨 代码样式
+范围|描述|commitId
+--|--|--
+ - | 组件新建 | [89c0035](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/89c0035)
+
+
 ### 🐛 Bug 修复
 范围|描述|commitId
 --|--|--
  - | 修改main | [749ae9a](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/749ae9a)
 
 
-### chore
+### 📝 文档
 范围|描述|commitId
 --|--|--
- pwa 小程序 | 移除了pwa，alloyFinger添加平台判断 | [875fab4](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/875fab4)
- - | uview-ui | [a9ea34b](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/a9ea34b)
- 信息配置 | 配置eslint等配置 | [7421443](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/7421443)
+ - | README.md | [ab0eb05](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/ab0eb05)
 
 
+### 🔨 代码重构
 范围|描述|commitId
 --|--|--
- - | !2 基础模板v1.1.0 | [f5e61dd](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/f5e61dd)
- - | init | [c0f1deb](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/c0f1deb)
+ template | eslint prettier sass uview tailwindcss | [9c966a1](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/9c966a1)
 
 
-### 📝 文档
+### 🚀 性能优化
 范围|描述|commitId
 --|--|--
- - | README.md | [ab0eb05](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/ab0eb05)
+ - | 组件文件夹新建 | [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)
 
 
-### 🔨 代码重构
+### chore
 范围|描述|commitId
 --|--|--
- template | eslint prettier sass uview tailwindcss | [9c966a1](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/9c966a1)
+ pwa 小程序 | 移除了pwa，alloyFinger添加平台判断 | [875fab4](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/875fab4)
+ - | uview-ui | [a9ea34b](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/a9ea34b)
+ 信息配置 | 配置eslint等配置 | [7421443](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/7421443)
+
+
+范围|描述|commitId
+--|--|--
+ - | !2 基础模板v1.1.0 | [f5e61dd](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/f5e61dd)
+ - | init | [c0f1deb](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/c0f1deb)
 
diff --git a/package-lock.json b/package-lock.json
index 804ac0a..1493ff4 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",
@@ -18715,9 +18710,10 @@
       }
     },
     "tailwindcss": {
-      "version": "npm:tailwindcss@2.2.4",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.4.tgz",
-      "integrity": "sha512-OdBCPgazNNsknSP+JfrPzkay9aqKjhKtFhbhgxHgvEFdHy/GuRPo2SCJ4w1SFTN8H6FPI4m6qD/Jj20NWY1GkA==",
+      "version": "2.2.4",
+      "resolved": "https://registry.nlark.com/tailwindcss/download/tailwindcss-2.2.4.tgz",
+      "integrity": "sha1-ai4lmx4mElrqp83EeZY/0hfDCLA=",
+      "dev": true,
       "requires": {
         "@fullhuman/postcss-purgecss": "^4.0.3",
         "arg": "^5.0.0",
@@ -18754,16 +18750,18 @@
       "dependencies": {
         "@fullhuman/postcss-purgecss": {
           "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-4.0.3.tgz",
-          "integrity": "sha512-/EnQ9UDWGGqHkn1UKAwSgh+gJHPKmD+Z+5dQ4gWT4qq2NUyez3zqAfZNwFH3eSgmgO+wjTXfhlLchx2M9/K+7Q==",
+          "resolved": "https://registry.npm.taobao.org/@fullhuman/postcss-purgecss/download/@fullhuman/postcss-purgecss-4.0.3.tgz",
+          "integrity": "sha1-VdcXEuwceojg0bpfEM5/tqoFvrQ=",
+          "dev": true,
           "requires": {
             "purgecss": "^4.0.3"
           }
         },
         "chalk": {
           "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995384030&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
+          "integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
+          "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
diff --git a/package.json b/package.json
index 7d218fb..b173962 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/Project/Project.vue b/src/components/Project/Project.vue
new file mode 100644
index 0000000..33ccff4
--- /dev/null
+++ b/src/components/Project/Project.vue
@@ -0,0 +1,22 @@
+<template>
+  <view class="wrap">
+    <time-bar />
+    <view class="container p-4">
+      <time-line />
+    </view>
+  </view>
+</template>
+
+<script>
+import TimeBar from './components/TimeBar';
+import TimeLine from './components/TimeLine';
+
+export default {
+  name: 'Project',
+  components: { TimeBar, TimeLine },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
diff --git a/src/components/Project/components/TimeBar.vue b/src/components/Project/components/TimeBar.vue
new file mode 100644
index 0000000..07e8824
--- /dev/null
+++ b/src/components/Project/components/TimeBar.vue
@@ -0,0 +1,37 @@
+<template>
+  <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>
+export default {
+  name: 'TimeBar',
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.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/Project/components/TimeLine.vue b/src/components/Project/components/TimeLine.vue
new file mode 100644
index 0000000..ea53320
--- /dev/null
+++ b/src/components/Project/components/TimeLine.vue
@@ -0,0 +1,80 @@
+<template>
+  <u-time-line>
+    <u-time-line-item nodeTop="2">
+      <!-- 此处自定义了左边内容，用一个图标替代 -->
+      <template v-slot:node>
+        <view class="u-node state">
+          <!-- 此处为uView的icon组件 -->
+          <!-- <u-icon :size="24" color="#fff" name="play-right-fill"></u-icon> -->
+          <u-circle-progress :percent="100" active-color="#2979ff" borderWidth="4" width="66">
+            <view class="u-progress-content">
+              <view class="u-progress-dot"></view>
+              <text class="u-progress-info">
+                <u-icon name="checkmark" size="30"></u-icon>
+              </text>
+            </view>
+          </u-circle-progress>
+        </view>
+      </template>
+      <template v-slot:content>
+        <view>
+          <view class="u-order-title">待取件</view>
+          <view class="u-order-desc">[自提柜]您的快件已放在楼下侧门，直走前方53.6米。</view>
+          <view class="u-order-time">2019-05-08 12:12</view>
+        </view>
+      </template>
+    </u-time-line-item>
+    <u-time-line-item>
+      <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
+      <template v-slot:content>
+        <view>
+          <view class="u-order-desc">【深圳市】日照香炉生紫烟，遥看瀑布挂前川，飞流直下三千尺，疑是银河落九天。</view>
+          <view class="u-order-time">2019-12-06 22:30</view>
+        </view>
+      </template>
+    </u-time-line-item>
+  </u-time-line>
+</template>
+
+<script>
+export default {
+  name: 'TimeLine',
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.u-node {
+  width: 44rpx;
+  height: 44rpx;
+  border-radius: 100rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #d0d0d0;
+}
+
+.state {
+  border: 2px solid #999;
+  background: #fff;
+}
+
+.u-order-title {
+  color: #333333;
+  font-weight: bold;
+  font-size: 32rpx;
+}
+
+.u-order-desc {
+  color: rgb(150, 150, 150);
+  font-size: 28rpx;
+  margin-bottom: 6rpx;
+}
+
+.u-order-time {
+  color: rgb(200, 200, 200);
+  font-size: 26rpx;
+}
+</style>
diff --git a/src/components/Roles/.gitkeep b/src/components/Roles/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/Roles/Roles.vue b/src/components/Roles/Roles.vue
new file mode 100644
index 0000000..9585b04
--- /dev/null
+++ b/src/components/Roles/Roles.vue
@@ -0,0 +1,73 @@
+<!--
+ * @Author: aBin
+ * @email: binbin0314@126.com
+ * @Date: 2021-07-19 10:52:05
+ * @LastEditors: aBin
+ * @LastEditTime: 2021-07-19 18:02:10
+-->
+<template>
+  <view class="wrap">
+    <view class="rolebar">
+      <view>
+        <view class="container" v-if="roles || roles.length">
+          <!-- <u-tabs
+            :bar-width="barWidth"
+            :current="currentRoleIndex"
+            :list="roles"
+            @change="handleClickRole"
+            class="u-skeleton-rect"
+            name="value"
+            ref="tabs"
+          ></u-tabs>-->
+
+          <u-tabs
+            :bar-width="barWidth"
+            :class="'isMine' ? '#f00' : ''"
+            :current="currentRoleIndex"
+            :list="roles"
+            @change="handleClickRole"
+            class="u-skeleton-rect"
+            name="value"
+            ref="tabs"
+          >
+            <template slot="name">+++</template>
+          </u-tabs>
+        </view>
+        <u-skeleton :animation="true" :loading="loading" bgcolor="#fff" v-else></u-skeleton>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'Roles',
+  data() {
+    return {
+      roles: [
+        { id: 1, value: '项目经理', isMine: 0 },
+        { id: 2, value: '运维', isMine: 0 },
+        { id: 3, value: '导师一', isMine: 1 },
+        { id: 4, value: '导师二', isMine: 1 },
+        { id: 5, value: '导师三', isMine: 1 },
+      ],
+      currentRoleIndex: 0,
+      barWidth: 80,
+
+      loading: false, // 是否显示骨架屏组件
+    };
+  },
+  methods: {
+    handleClickRole(index) {
+      console.log('index: ', index);
+      this.currentRoleIndex = index;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.container {
+  padding: 20rpx;
+}
+</style>
diff --git a/src/components/TimeLine/components/Barrier.vue b/src/components/TimeLine/components/Barrier.vue
new file mode 100644
index 0000000..23e7610
--- /dev/null
+++ b/src/components/TimeLine/components/Barrier.vue
@@ -0,0 +1,42 @@
+<!--
+ * @Author: aBin
+ * @email: binbin0314@126.com
+ * @Date: 2021-07-19 14:22:54
+ * @LastEditors: aBin
+ * @LastEditTime: 2021-07-19 17:01:58
+-->
+<template>
+  <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>
+export default {
+  name: 'Barrier',
+  data() {
+    return {};
+  },
+};
+</script>
+<style scoped lang="scss">
+.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/TimeBox.vue b/src/components/TimeLine/components/TimeBox.vue
new file mode 100644
index 0000000..96e9178
--- /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:44:18
+-->
+<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 ml-3.5">
+        <view class="ml-4 shadow-lg">
+          <u-card margin="0" :show-head="false" :show-foot="false" border-radius="25" class="h-16">
+            <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..479d173
--- /dev/null
+++ b/src/components/TimeLine/components/TimeStatus.vue
@@ -0,0 +1,107 @@
+<!--
+ * @Author: aBin
+ * @email: binbin0314@126.com
+ * @Date: 2021-07-19 15:47:38
+ * @LastEditors: aBin
+ * @LastEditTime: 2021-07-19 18:01:59
+-->
+<template>
+  <view>
+    <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" bgcolor="rgba(255,255,255,0)" 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 name="checkmark" size="30"></u-icon>
+          </text>
+        </view>
+      </u-circle-progress>
+    </view>
+    <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" bgcolor="rgba(255,255,255,0)" 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>
+      </u-circle-progress>
+    </view>
+    <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" bgcolor="rgba(255,255,255,0)" 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 name="play-right-fill" size="30"></u-icon>
+          </text>
+        </view>
+      </u-circle-progress>
+    </view>
+    <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" bgcolor="rgba(255,255,255,0)" 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 name="pause" size="30"></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/components/Title/Title.vue b/src/components/Title/Title.vue
index c731600..f868bf7 100644
--- a/src/components/Title/Title.vue
+++ b/src/components/Title/Title.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-07-19 11:35:03
- * @LastEditTime: 2021-07-19 17:48:02
+ * @LastEditTime: 2021-07-19 18:37:13
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \TALL-MUI-3\src\components\Title\titleBar.vue
@@ -26,7 +26,6 @@
 <script>
 export default {
   name: 'Title',
-  mounted() {},
   data() {
     return {
       title: '加载中...',
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 42fea4b..488688a 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -3,13 +3,17 @@
  * @email: binbin0314@126.com
  * @Date: 2021-07-19 10:09:22
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-07-19 14:49:07
+ * @LastEditTime: 2021-07-19 18:51:34
 -->
 <template>
-  <view class="container p-4 bg-gray-100">
+  <view>
     <Title />
-    <Globals />
-    <!-- <view class="mt-5">
+    <Roles />
+    <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">
@@ -17,15 +21,22 @@
     </view>
     <view class="my-3">
       <u-button type="error" size="default" @click="openPage">pinch 事件验证</u-button>
-    </view> -->
+      </view>-->
+      <!-- <Project /> -->
+    </view>
   </view>
 </template>
 
 <script>
 import Globals from 'components/Globals/index.vue';
 import Title from 'components/Title/Title.vue';
+import Roles from 'components/Roles/Roles.vue';
+import TimeLine from 'components/TimeLine/index.vue';
+
+// import Project from 'components/Project/Project.vue';
+
 export default {
-  components: { Globals, Title },
+  components: { Globals, TimeLine, Roles, Title },
   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'