diff --git a/CHANGELOG.md b/CHANGELOG.md
index b998090..c507a75 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,29 +3,24 @@
 ### 🌟 新功能
 范围|描述|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)
- - | 时间轴界面 | [33927e9](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/33927e9)
- - | 提交到本地 | [9cbe411](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/9cbe411)
- - | 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)
- pinch | alloy finger实现图片的pinch放大缩小 | [de01343](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/de01343)
+ - | 标题栏角色栏全局任务组件新建 | [0500cb4](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/0500cb4)
+ - | 角色栏实现 | [94cd671](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/94cd671)
+ - | 时间轴界面 | [33927e9](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/33927e9)
+ - | 时间轴修改状态时提示框增加 | [e841392](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/e841392)
+ - | 提交到本地 | [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)
+ 富文本插件 | 富文本插件demo测试 | [ed3d644](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/ed3d644)
+ pinch | alloy finger实现图片的pinch放大缩小 | [de01343](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/de01343)
 
 
 ### 🎨 代码样式
 范围|描述|commitId
 --|--|--
- - | 更新代码 | [8c27e68](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/8c27e68)
- - | 更新代码 | [1f40a76](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/1f40a76)
- - | 任务快捷方式图标增加 | [4aba872](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/4aba872)
- - | 日常任务修改 | [dfa7ee2](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/dfa7ee2)
- - | 图标修改 | [54bca09](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/54bca09)
- - | 无基本变化 | [21ac4bb](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/21ac4bb)
- - | 组件新建 | [89c0035](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/89c0035)
  - | 更新代码 | [8c27e68](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/8c27e68)
  - | 更新代码 | [1f40a76](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/1f40a76)
  - | 任务快捷方式图标增加 | [4aba872](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/4aba872)
+ - | 日常任务修改 | [dfa7ee2](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/dfa7ee2)
  - | 图标修改 | [54bca09](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/54bca09)
  - | 无基本变化 | [21ac4bb](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/21ac4bb)
  - | 组件新建 | [89c0035](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/89c0035)
@@ -34,42 +29,40 @@
 ### 🐛 Bug 修复
 范围|描述|commitId
 --|--|--
- - | 角色栏修改 | [19228d6](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/19228d6)
- - | 时间轴上下滑动 | [4d0ae46](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/4d0ae46)
- - | 修改角色栏组件 | [a54c601](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/a54c601)
- - | 修改main | [749ae9a](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/749ae9a)
+ - | 修改main | [749ae9a](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/749ae9a)
 
 
 ### 📝 文档
 范围|描述|commitId
 --|--|--
- - | README.md | [ab0eb05](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/ab0eb05)
+ - | README.md | [ab0eb05](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/ab0eb05)
 
 
 ### 🔨 代码重构
 范围|描述|commitId
 --|--|--
- template | eslint prettier sass uview tailwindcss | [9c966a1](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/9c966a1)
+ template | eslint prettier sass uview tailwindcss | [9c966a1](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/9c966a1)
 
 
 ### 🚀 性能优化
 范围|描述|commitId
 --|--|--
- - | 角色栏文字颜色修改 | [215c6b3](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/215c6b3)
- - | 组件文件夹新建 | [22bfe7b](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/22bfe7b)
- - | 组件文件夹新建 | [17bb8c9](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/17bb8c9)
- - | 组件文件夹新建 | [1421504](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/1421504)
+ - | 角色栏文字颜色修改 | [215c6b3](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/215c6b3)
+ - | 组件文件夹新建 | [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
 --|--|--
- pwa 小程序 | 移除了pwa，alloyFinger添加平台判断 | [875fab4](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/875fab4)
- - | uview-ui | [a9ea34b](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/a9ea34b)
- 信息配置 | 配置eslint等配置 | [7421443](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/7421443)
+ 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](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/f5e61dd)
- - | init | [c0f1deb](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/c0f1deb)
+ - | !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/src/App.vue b/src/App.vue
index 032722f..9013b26 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,10 +19,6 @@ export default {
 };
 </script>
 
-<style>
-@import './common/styles/iconfont.scss';
-</style>
-
 <style lang="scss">
 @import './common/styles/iconfont.scss';
 @import 'uview-ui/index.scss';
diff --git a/src/components/Globals/Globals.vue b/src/components/Globals/Globals.vue
new file mode 100644
index 0000000..8869917
--- /dev/null
+++ b/src/components/Globals/Globals.vue
@@ -0,0 +1,58 @@
+<template>
+  <view class="m-2">
+    <u-card margin="0" :show-head="false" :show-foot="false" border-radius="25" :style="{ height: isShrink ? '96rpx' : '300rpx' }">
+      <!-- <u-card margin="0" :show-head="false" :show-foot="false" border-radius="25" style="height: 300rpx"> -->
+      <view slot="body">
+        <scroll-view :scrollY="true" :style="{ height: isShrink ? '40rpx' : '240rpx' }">
+          <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 class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆222</view>
+          </view>
+        </scroll-view>
+      </view>
+    </u-card>
+    <!-- <u-skeleton :animation="true" :loading="true" bgcolor="#fff"></u-skeleton> -->
+  </view>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+export default {
+  name: 'Global',
+  data() {
+    return {};
+  },
+  computed: mapState('home', ['isShrink']),
+};
+</script>
+
+<style scoped lang="scss">
+.u-card-wrap {
+  background-color: $u-bg-color;
+  padding: 1px;
+}
+
+.u-body-item {
+  font-size: 32rpx;
+  color: #333;
+  padding: 20rpx 10rpx;
+}
+
+.u-body-item image {
+  width: 120rpx;
+  flex: 0 0 120rpx;
+  height: 120rpx;
+  border-radius: 8rpx;
+  margin-left: 12rpx;
+}
+</style>
diff --git a/src/components/Globals/index.vue b/src/components/Globals/index.vue
deleted file mode 100644
index 03f574c..0000000
--- a/src/components/Globals/index.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<!--
- * @Author: aBin
- * @email: binbin0314@126.com
- * @Date: 2021-07-19 10:52:05
- * @LastEditors: aBin
- * @LastEditTime: 2021-07-20 14:20:46
--->
-<template>
-  <view class="p-2">
-    <u-card :show-foot="false" :show-head="false" border-radius="25" margin="0">
-      <view slot="body">
-        <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 :animation="true" :loading="true" bgcolor="#fff"></u-skeleton>
-  </view>
-</template>
-
-<script>
-export default {
-  name: 'Global',
-  data() {
-    return {};
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.u-card-wrap {
-  background-color: $u-bg-color;
-  padding: 1px;
-}
-
-.u-body-item {
-  font-size: 32rpx;
-  color: #333;
-  padding: 20rpx 10rpx;
-}
-
-.u-body-item image {
-  width: 120rpx;
-  flex: 0 0 120rpx;
-  height: 120rpx;
-  border-radius: 8rpx;
-  margin-left: 12rpx;
-}
-</style>
diff --git a/src/components/Project/Project.vue b/src/components/Project/Project.vue
index 39cdf25..6d9bdf1 100644
--- a/src/components/Project/Project.vue
+++ b/src/components/Project/Project.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script>
-import TimeBar from './components/TimeBar';
-import TimeLine from './components/TimeLine';
+import TimeBar from './component/TimeBar';
+import TimeLine from './component/TimeLine';
 
 export default {
   name: 'Project',
diff --git a/src/components/Project/components/TimeBar.vue b/src/components/Project/component/TimeBar.vue
similarity index 100%
rename from src/components/Project/components/TimeBar.vue
rename to src/components/Project/component/TimeBar.vue
diff --git a/src/components/Project/components/TimeLine.vue b/src/components/Project/component/TimeLine.vue
similarity index 100%
rename from src/components/Project/components/TimeLine.vue
rename to src/components/Project/component/TimeLine.vue
diff --git a/src/components/Roles/Roles.vue b/src/components/Roles/Roles.vue
index 5c68779..56f7575 100644
--- a/src/components/Roles/Roles.vue
+++ b/src/components/Roles/Roles.vue
@@ -1,20 +1,11 @@
-<!--
- * @Author: aBin
- * @email: binbin0314@126.com
- * @Date: 2021-07-19 10:52:05
- * @LastEditors: aBin
- * @LastEditTime: 2021-07-20 10:54:27
--->
 <template>
-  <view class="wrap bg-white">
-    <view class="px-2">
-      <role-list />
-    </view>
+  <view class="wrap bg-white px-2">
+    <role-list />
   </view>
 </template>
 
 <script>
-import RoleList from './components/RoleList.vue';
+import RoleList from './component/RoleList';
 
 export default {
   name: 'Roles',
diff --git a/src/components/Roles/component/RoleList.vue b/src/components/Roles/component/RoleList.vue
new file mode 100644
index 0000000..261893c
--- /dev/null
+++ b/src/components/Roles/component/RoleList.vue
@@ -0,0 +1,180 @@
+<template>
+  <view class="wrap">
+    <view class="homeBox">
+      <scroll-view :enable-flex="true" :scroll-left="scrollLeft" :throttle="false" scroll-with-animation scroll-x>
+        <view class="tabBox">
+          <view :key="index" @click="changeIndex(index)" class="tab-item" v-for="(item, index) in roles">
+            <view :class="setColor(item.mine, tabIndex, index)" class="tab-children u-skeleton-rect">{{ item.name }}</view>
+          </view>
+        </view>
+        <u-skeleton :animation="true" :loading="loading" bgcolor="#fff"></u-skeleton>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'RoleList',
+  data() {
+    return {
+      tabIndex: 0, //当前访问的 index 默认为0
+      tabList: [], //tab dom节点集合
+      scrollLeft: 0, //scrollview需要滚动的距离
+      roles: [
+        { id: 1, name: '项目经理', mine: 0, pm: 1, sequence: 1 },
+        { id: 2, name: '运维', mine: 0, pm: 0, sequence: 2 },
+        { id: 3, name: '导师一', mine: 1, pm: 0, sequence: 3 },
+        { id: 4, name: '导师二', mine: 1, pm: 0, sequence: 4 },
+        { id: 5, name: '导师三', mine: 1, pm: 0, sequence: 5 },
+        { id: 6, name: '导师四', mine: 1, pm: 0, sequence: 6 },
+        { id: 7, name: '导师五', mine: 1, pm: 0, sequence: 7 },
+        { id: 8, name: '导师六', mine: 1, pm: 0, sequence: 8 },
+        { id: 9, name: '导师七', mine: 1, pm: 0, sequence: 9 },
+        { id: 10, name: '导师八', mine: 1, pm: 0, sequence: 10 },
+      ],
+      loading: true, // 是否显示骨架屏组件
+    };
+  },
+
+  mounted() {
+    this.init();
+    setTimeout(() => {
+      this.loading = false;
+      console.log('this.loading: ', this.loading);
+    }, 5000);
+  },
+
+  methods: {
+    init() {
+      const data = document.getElementsByClassName('tab-children');
+      // TODO 第一步 获取当前所以子元素 并插入到 tabList 列表中
+      data.forEach(item => {
+        this.tabList.push({ width: item.clientWidth, left: item.offsetLeft });
+      });
+    },
+
+    changeIndex(index) {
+      //改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动
+      this.tabIndex = index;
+      //当前滚动的位置
+      let left = 0;
+      let screenWidth = window.screen.width;
+      for (let i = 0; i < index; i++) {
+        left += this.tabList[i].width + this.tabList[i].left * 2;
+      }
+      left += this.tabList[index].width;
+      this.scrollLeft = left - screenWidth / 2;
+    },
+
+    // 设置文字颜色
+    setColor(mine, tabIndex, index) {
+      if (mine === 1 && tabIndex === index) {
+        return 'default-tab-choice';
+      }
+      if (mine === 1 && tabIndex !== index) {
+        return 'default-tab-item';
+      }
+      if (mine === 0 && tabIndex === index) {
+        return 'tab-choice';
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+// 这是最外层盒子
+.wrap {
+  position: relative;
+  background: #f7f7f7;
+}
+
+.homeBox {
+  // 对此盒子进行 sticky 粘性定位
+  position: sticky;
+  top: 0;
+  background: #fff; //设置背景 否则会透明
+  /* #ifdef H5 */
+  //粘性定位 在h5下 加 原生头部高度 44px
+  top: 88rpx;
+
+  /* #endif */
+  .tabBox {
+    position: relative;
+    white-space: nowrap;
+    // height: 88rpx;
+
+    /* #ifdef MP-TOUTIAO */
+    /* #endif */
+    .tab-item {
+      padding: 20rpx 24rpx;
+      position: relative;
+      display: inline-block;
+      text-align: center;
+      font-size: 30rpx;
+      transition-property: background-color, width;
+    }
+
+    .default-tab-item {
+      color: $roleChoiceColor;
+    }
+
+    .default-tab-choice {
+      //当前选中 基于此类名给与底部选中框
+      position: relative;
+      color: $roleChoiceColor;
+      font-weight: 600;
+    }
+    .default-tab-choice:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: -20rpx;
+      width: 100%;
+      height: 6rpx;
+      border-radius: 2rpx;
+      background: $roleChoiceColor;
+    }
+
+    .tab-choice {
+      //当前选中 基于此类名给与底部选中框
+      position: relative;
+      color: $uni-color-primary;
+      font-weight: 600;
+    }
+
+    .tab-choice:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: -20rpx;
+      width: 100%;
+      height: 6rpx;
+      border-radius: 2rpx;
+      background: $uni-color-primary;
+    }
+  }
+}
+
+// // 删除 底部滚动条
+/* #ifndef APP-NVUE */
+::-webkit-scrollbar,
+::-webkit-scrollbar,
+::-webkit-scrollbar {
+  display: none;
+  width: 0 !important;
+  height: 0 !important;
+  -webkit-appearance: none;
+  background: transparent;
+}
+
+/* #endif */
+/* #ifdef H5 */
+// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
+scroll-view ::v-deep ::-webkit-scrollbar {
+  display: none;
+}
+
+/* #endif */
+</style>
diff --git a/src/components/Roles/components/RoleList.vue b/src/components/Roles/components/RoleList.vue
index 877a3bb..d0c3445 100644
--- a/src/components/Roles/components/RoleList.vue
+++ b/src/components/Roles/components/RoleList.vue
@@ -2,7 +2,7 @@
   <view class="wrap">
     <view class="homeBox">
       <scroll-view :enable-flex="true" :scroll-left="scrollLeft" :throttle="false" scroll-with-animation scroll-x>
-        <view class="tabBox">
+        <view class="tabBox u-skeleton">
           <view :key="index" @click="changeIndex(index)" class="tab-item" v-for="(item, index) in roles">
             <view :class="setColor(item.isMine, tabIndex, index)" class="tab-children u-skeleton-rect">{{ item.value }}</view>
           </view>
@@ -111,7 +111,7 @@ $max: 100%;
     /* #ifdef MP-TOUTIAO */
     /* #endif */
     .tab-item {
-      padding: 20rpx 24rpx;
+      padding: 15rpx 24rpx;
       position: relative;
       display: inline-block;
       text-align: center;
@@ -133,7 +133,7 @@ $max: 100%;
       content: '';
       position: absolute;
       left: 0;
-      bottom: -20rpx;
+      bottom: -14rpx;
       width: 100%;
       height: 6rpx;
       border-radius: 2rpx;
@@ -151,7 +151,7 @@ $max: 100%;
       content: '';
       position: absolute;
       left: 0;
-      bottom: -20rpx;
+      bottom: -14rpx;
       width: 100%;
       height: 6rpx;
       border-radius: 2rpx;
diff --git a/src/components/TimeLine/index.vue b/src/components/TimeLine/TimeLine.vue
similarity index 55%
rename from src/components/TimeLine/index.vue
rename to src/components/TimeLine/TimeLine.vue
index 310cf30..b26a662 100644
--- a/src/components/TimeLine/index.vue
+++ b/src/components/TimeLine/TimeLine.vue
@@ -8,44 +8,49 @@
 <template>
   <!-- <Barrier /> -->
   <scroll-view
+    :lower-threshold="300"
     :scrollTop="scrollTop"
     :scrollY="true"
-    :style="{ height: height }"
+    :upper-threshold="300"
     @scroll="scroll"
     @scrolltolower="handleScrollBottom"
     @scrolltoupper="handleScrollTop"
   >
-    <!-- :style="{ height: height }" -->
-    <TimeBox />
+    <TimeBox ref="child" />
   </scroll-view>
 </template>
 
 <script>
-// import Barrier from './components/Barrier.vue';
-import TimeBox from './components/TimeBox.vue';
+// import Barrier from './component/Barrier.vue';
+import { mapState, mapMutations } from 'vuex';
+import TimeBox from './component/TimeBox.vue';
 export default {
   name: 'TimeLine',
   components: { TimeBox },
   data() {
-    return { height: '', scrollTop: 0 };
-  },
-  mounted() {
-    this.height = document.getElementsByClassName('main')[0].clientHeight + 'px';
-    console.log(this.height);
+    return { scrollTop: 0, top: 0 };
   },
+  computed: mapState('home', ['scrollTop', 'showTips']),
   methods: {
+    ...mapMutations('home', ['setScrollTop', 'setShrink']),
+    // 滚动
     scroll(e) {
       console.log(e.detail.scrollTop);
+      this.top = e.detail.scrollTop;
+      this.setShrink(this.top > this.scrollTop);
+      this.setScrollTop(this.top);
     },
 
     // 滚动到顶部
     handleScrollTop() {
       console.log('滚动到顶部');
+      this.$refs.child.addTopList();
     },
 
     // 滚动到底部
     handleScrollBottom() {
       console.log('滚动到底部');
+      this.$refs.child.addBottomList();
     },
   },
 };
diff --git a/src/components/TimeLine/components/Barrier.vue b/src/components/TimeLine/component/Barrier.vue
similarity index 100%
rename from src/components/TimeLine/components/Barrier.vue
rename to src/components/TimeLine/component/Barrier.vue
diff --git a/src/components/TimeLine/components/TimeBox.vue b/src/components/TimeLine/component/TimeBox.vue
similarity index 66%
rename from src/components/TimeLine/components/TimeBox.vue
rename to src/components/TimeLine/component/TimeBox.vue
index 8e12731..4994319 100644
--- a/src/components/TimeLine/components/TimeBox.vue
+++ b/src/components/TimeLine/component/TimeBox.vue
@@ -9,8 +9,8 @@
   <view class="px-3 pb-10">
     <view :key="index" v-for="(item, index) in list">
       <view class="flex items-center">
-        <TimeStatus :status="item" />
-        <view class="flex-1 ml-2 flex justify-between items-center">
+        <TimeStatus :status="item" :content="JSON.stringify(item)" />
+        <view class="flex-1 ml-2 flex justify-between">
           <view>任务时间栏</view>
           <view>
             <view class="flex justify-between" style="min-width: 180rpx">
@@ -22,8 +22,8 @@
         </view>
       </view>
       <view class="border-l-2 border-gray-300 ml-3.5 my-2">
-        <view class="ml-4 shadow-lg">
-          <u-card :show-foot="false" :show-head="false" border-radius="25" class="h-16" margin="0">
+        <view class="ml-4 shadow-lg task-box overflow-hidden">
+          <u-card :show-foot="false" :show-head="false" class="h-16" margin="0">
             <view slot="body">
               <view class="u-col-between p-0 u-skeleton">
                 <view class="u-skeleton-rect">瓶身描绘的牡丹一如你初妆</view>
@@ -33,6 +33,7 @@
         </view>
       </view>
     </view>
+    <Tips />
   </view>
 </template>
 
@@ -40,9 +41,29 @@
 import TimeStatus from './TimeStatus.vue';
 export default {
   name: 'TimeBox',
+
   components: { TimeStatus },
+
   data() {
-    return { list: [0, 1, 2, 3, 0, 1, 2, 3, 0, 1, 2, 3] };
+    return { list: [0, 1, 2, 0, 1, 2] };
+  },
+
+  methods: {
+    addTopList() {
+      this.list.unshift(0, 0, 0);
+      console.log('this.list: ', this.list);
+    },
+
+    addBottomList() {
+      this.list.push(1, 1, 1);
+      console.log('this.list: ', this.list);
+    },
   },
 };
 </script>
+
+<style scoped lang="scss">
+.task-box {
+  border-radius: 24rpx;
+}
+</style>
diff --git a/src/components/TimeLine/components/TimeStatus.vue b/src/components/TimeLine/component/TimeStatus.vue
similarity index 54%
rename from src/components/TimeLine/components/TimeStatus.vue
rename to src/components/TimeLine/component/TimeStatus.vue
index f8b98a9..71779ff 100644
--- a/src/components/TimeLine/components/TimeStatus.vue
+++ b/src/components/TimeLine/component/TimeStatus.vue
@@ -7,9 +7,9 @@
 -->
 <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" borderWidth="4" class="u-progress-bg" width="66">
-        <view @tap="changeStatus(0)" class="u-progress-content">
+    <view class="rounded-full h-7 w-7 flex items-center justify-center text-blue-400" v-if="status === 0" @tap="changeStatus($event, 0)">
+      <u-circle-progress :percent="100" active-color="#2979ff" bgColor="rgba(255,255,255,0)" 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>
@@ -17,17 +17,17 @@
         </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" borderWidth="6" class="u-progress-bg" width="66">
-        <view @tap="changeStatus(1)" class="u-progress-content">
+    <view class="rounded-full h-7 w-7 flex items-center justify-center text-black" v-if="status === 1" @tap="changeStatus($event, 1)">
+      <u-circle-progress :percent="80" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="6" width="66">
+        <view 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" borderWidth="6" class="u-progress-bg" width="66">
-        <view @tap="changeStatus(2)" class="u-progress-content">
+    <view class="rounded-full h-7 w-7 flex items-center justify-center text-gray-400" v-if="status === 2" @tap="changeStatus($event, 2)">
+      <u-circle-progress :percent="40" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="6" width="66">
+        <view 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>
@@ -35,9 +35,13 @@
         </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" borderWidth="6" class="u-progress-bg" width="66">
-        <view @tap="changeStatus(3)" class="u-progress-content">
+    <view
+      class="rounded-full h-7 w-7 flex items-center justify-center text-red-800 font-black"
+      v-if="status === 3"
+      @tap="changeStatus($event, 3)"
+    >
+      <u-circle-progress :percent="80" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="6" width="66">
+        <view class="u-progress-content">
           <view class="u-progress-dot"></view>
           <text class="u-progress-info">
             <u-icon name="pause" size="30"></u-icon>
@@ -45,10 +49,10 @@
         </view>
       </u-circle-progress>
     </view>
-    <u-action-sheet :list="chooseList()" v-model="show"></u-action-sheet>
   </view>
 </template>
 <script>
+import { mapMutations } from 'vuex';
 export default {
   name: 'TimeStatus',
   props: {
@@ -56,6 +60,10 @@ export default {
       default: 0,
       type: Number,
     },
+    content: {
+      default: '',
+      type: String,
+    },
   },
   data() {
     return {
@@ -88,24 +96,35 @@ export default {
           color: 'blue',
         },
       ],
-      change: 0,
-      show: false,
     };
   },
   methods: {
+    ...mapMutations('home', ['setClient', 'setTips', 'setStatus', 'setTipsContent']),
     chooseList() {
       return this.start;
     },
-    changeStatus(num) {
-      this.change === num;
-      this.show = true;
+    changeStatus(e, num) {
+      this.setStatus(num);
+      this.setTipsContent(this.chooseTips(num, this.content));
+      const client = {
+        left: e.target.x,
+        top: e.target.y,
+      };
+      this.setClient(client);
+      this.setTips(true);
+    },
+    chooseTips(num, content) {
+      switch (num) {
+        case 0:
+          return `确认开始任务${content}吗？`;
+        case 1:
+          return `请选择要执行的操作`;
+        case 2:
+          return `请选择要执行的操作`;
+        case 3:
+          return `是否要重新开始此任务`;
+      }
     },
   },
 };
 </script>
-
-<style scoped lang="scss">
-.u-progress-bg {
-  background: rgba(255, 255, 255, 0) !important;
-}
-</style>
diff --git a/src/components/TimeLine/components/Title.vue b/src/components/TimeLine/component/Title.vue
similarity index 100%
rename from src/components/TimeLine/components/Title.vue
rename to src/components/TimeLine/component/Title.vue
diff --git a/src/components/Tips/Tips.vue b/src/components/Tips/Tips.vue
new file mode 100644
index 0000000..3b31600
--- /dev/null
+++ b/src/components/Tips/Tips.vue
@@ -0,0 +1,73 @@
+<template>
+  <view
+    class="absolute shadow-2xl shadow-2xl"
+    style="z-index: 1000"
+    :style="{
+      left: client.left + 'px',
+      top: height - client.top > 110 ? client.top + 'px' : '',
+      bottom: height - client.top > 110 ? '' : '10px',
+    }"
+    id="u-icard"
+  >
+    <u-card
+      :title="title"
+      style="width: 500rpx; margin: 0 !important"
+      v-if="showTips"
+      titleSize="28"
+      :headStyle="headStyle"
+      :footStyle="footStyle"
+    >
+      <view class="" slot="body"> {{ tipsContent }} </view>
+      <view class="flex ustify-between" slot="foot">
+        <u-button size="mini" @tap="clickCancel">取消</u-button>
+        <u-button v-if="status === 1" size="mini" @tap="clickCancel">暂停</u-button>
+        <u-button v-if="status === 2" size="mini" @tap="clickCancel">继续</u-button>
+        <u-button v-if="status === 1 || status === 2" size="mini" @tap="clickCancel">重新开始</u-button>
+        <u-button v-if="status === 1 || status === 2" type="primary" size="mini" @tap="clickCancel">结束</u-button>
+        <u-button v-if="status === 0 || status === 3" type="primary" size="mini" @tap="clickOk">确定</u-button>
+      </view>
+    </u-card>
+    <u-toast ref="uToast" />
+  </view>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex';
+export default {
+  name: 'Tips',
+  props: {
+    title: {
+      default: '提示',
+      type: String,
+    },
+  },
+  computed: mapState('home', ['client', 'showTips', 'status', 'tipsContent']),
+  data() {
+    return {
+      footStyle: { padding: '4px 15px' },
+      headStyle: { paddingTop: '8px', paddingBottom: '8px' },
+      height: 0,
+    };
+  },
+  mounted() {
+    this.height = window.screen.height;
+  },
+  methods: {
+    ...mapMutations('home', ['setTips']),
+    clickOk() {
+      this.$refs.uToast.show({
+        title: '点击了确定',
+        type: 'success',
+      });
+      this.setTips(false);
+    },
+    clickCancel() {
+      this.$refs.uToast.show({
+        title: '点击了取消',
+        type: 'error',
+      });
+      this.setTips(false);
+    },
+  },
+};
+</script>
diff --git a/src/main.js b/src/main.js
index 4cc3367..7b0b10a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,13 +2,14 @@
  * @Author: aBin
  * @email: binbin0314@126.com
  * @Date: 2021-07-19 10:09:22
- * @LastEditors: aBin
- * @LastEditTime: 2021-07-19 18:54:17
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-20 14:52:23
  */
 import Vue from 'vue';
 import App from './App';
 import uView from 'uview-ui';
 import './common/styles/index.css';
+import store from './store';
 
 //#ifdef H5
 import './registerServiceWorker';
@@ -22,7 +23,7 @@ Vue.use(uView);
 
 App.mpType = 'app';
 
-const app = new Vue({ ...App });
+const app = new Vue({ ...App, store });
 
 import request from '@/utils/request.js';
 Vue.use(request, app);
diff --git a/src/pages.json b/src/pages.json
index ee7915d..c6ca2cf 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -40,6 +40,9 @@
     "backgroundColor": "#F8F8F8"
   },
   "easycom": {
-    "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+    "autoscan": true,
+    "custom": {
+      "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+    }
   }
 }
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 7993e45..ffe0f0a 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -2,8 +2,8 @@
  * @Author: aBin
  * @email: binbin0314@126.com
  * @Date: 2021-07-19 10:09:22
- * @LastEditors: aBin
- * @LastEditTime: 2021-07-20 11:55:27
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-20 15:08:29
 -->
 <template>
   <view :style="{ height: height }" class="flex flex-col overflow-hidden">
@@ -28,15 +28,15 @@
 </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 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, TimeLine, Roles, Title },
+  // components: { Globals, TimeLine, Roles, Title },
   data() {
     return { title: 'Hello', height: '', scrollHeight: null };
   },
diff --git a/src/store/home/actions.js b/src/store/home/actions.js
new file mode 100644
index 0000000..5dfa3d4
--- /dev/null
+++ b/src/store/home/actions.js
@@ -0,0 +1,3 @@
+const actions = {};
+
+export default actions;
diff --git a/src/store/home/getters.js b/src/store/home/getters.js
new file mode 100644
index 0000000..56c8c75
--- /dev/null
+++ b/src/store/home/getters.js
@@ -0,0 +1,3 @@
+const getters = {};
+
+export default getters;
diff --git a/src/store/home/index.js b/src/store/home/index.js
new file mode 100644
index 0000000..d22f64a
--- /dev/null
+++ b/src/store/home/index.js
@@ -0,0 +1,12 @@
+import state from './state';
+import getters from './getters';
+import mutations from './mutations';
+import actions from './actions';
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions,
+};
diff --git a/src/store/home/mutations.js b/src/store/home/mutations.js
new file mode 100644
index 0000000..ae53b1d
--- /dev/null
+++ b/src/store/home/mutations.js
@@ -0,0 +1,52 @@
+const mutations = {
+  /**
+   * 记录时间轴向上滚动的距离
+   * @param { object } state
+   * @param { number } num
+   */
+  setScrollTop(state, num) {
+    state.scrollTop = num;
+  },
+  /**
+   * 设置日常任务当前是否应该处于收缩状态
+   * @param { object } state
+   * @param { boolean } data
+   */
+  setShrink(state, data) {
+    state.isShrink = data;
+  },
+  /**
+   * 存储鼠标点击位置
+   * @param { object } state
+   * @param { object } data
+   */
+  setClient(state, data) {
+    state.client = { ...data };
+  },
+  /**
+   * 是否显示tips
+   * @param { object } state
+   * @param { boolean } data
+   */
+  setTips(state, data) {
+    state.showTips = data;
+  },
+  /**
+   * 是否显示tips
+   * @param { object } state
+   * @param { number } data
+   */
+  setStatus(state, data) {
+    state.status = data;
+  },
+  /**
+   * 是否显示tips
+   * @param { object } state
+   * @param { string } data
+   */
+  setTipsContent(state, data) {
+    state.tipsContent = data;
+  },
+};
+
+export default mutations;
diff --git a/src/store/home/state.js b/src/store/home/state.js
new file mode 100644
index 0000000..33e99c3
--- /dev/null
+++ b/src/store/home/state.js
@@ -0,0 +1,13 @@
+const state = {
+  scrollTop: 0,
+  isShrink: false, // true: 收起， false：展开
+  client: {
+    left: 0, // 鼠标点击位置距离左边的距离
+    top: 0, // 鼠标点击位置距离上边的距离
+  },
+  showTips: false,
+  status: 0, // 点击了时间轴上的哪种样式，默认点击了开始
+  tipsContent: '', // 提示框内的内容，需要传入
+};
+
+export default state;
diff --git a/src/store/index.js b/src/store/index.js
index e69de29..571bd49 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import home from './home/index';
+import db from './db/index';
+import user from './user/index';
+
+Vue.use(Vuex);
+export default new Vuex.Store({ modules: { home, db, user } });
diff --git a/src/uni.scss b/src/uni.scss
index 1d8e557..0a86a65 100644
--- a/src/uni.scss
+++ b/src/uni.scss
@@ -27,12 +27,14 @@ $uni-text-color-inverse: #fff; //反色
 $uni-text-color-grey: #999; //辅助灰色，如加载更多的提示信息
 $uni-text-color-placeholder: #808080;
 $uni-text-color-disable: #c0c0c0;
+$roleChoiceColor: #f59e0b;
 
 /* 背景颜色 */
 $uni-bg-color: #ffffff;
 $uni-bg-color-grey: #f8f8f8;
 $uni-bg-color-hover: #f1f1f1; //点击状态颜色
 $uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色
+$uni-bg-color-transparent: rgba(255, 255, 255, 0); //透明色
 
 /* 边框颜色 */
 $uni-border-color: #c8c7cc;