feat: 角色栏实现

4 years ago · 94cd671e8a
8 changed files with 325 additions and 84 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -3,54 +3,55 @@
 ### 🌟 新功能
 范围|描述|commitId
 --|--|--
- - | 标题栏角色栏全局任务组件新建 | [0500cb4](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/0500cb4)
- - | 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)
+ - | 标题栏角色栏全局任务组件新建 | [0500cb4](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/0500cb4)
+ - | 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)


 ### 🎨 代码样式
 范围|描述|commitId
 --|--|--
- - | 组件新建 | [89c0035](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/89c0035)
+ - | 组件新建 | [89c0035](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/89c0035)


 ### 🐛 Bug 修复
 范围|描述|commitId
 --|--|--
- - | 修改main | [749ae9a](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/749ae9a)
+ - | 修改main | [749ae9a](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/749ae9a)


 ### 📝 文档
 范围|描述|commitId
 --|--|--
- - | README.md | [ab0eb05](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/ab0eb05)
+ - | README.md | [ab0eb05](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/ab0eb05)


 ### 🔨 代码重构
 范围|描述|commitId
 --|--|--
- template | eslint prettier sass uview tailwindcss | [9c966a1](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/9c966a1)
+ template | eslint prettier sass uview tailwindcss | [9c966a1](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/9c966a1)


 ### 🚀 性能优化
 范围|描述|commitId
 --|--|--
- - | 组件文件夹新建 | [17bb8c9](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/17bb8c9)
- - | 组件文件夹新建 | [1421504](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/1421504)
+ - | 组件文件夹新建 | [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)


 ### 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)
+ 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)


 范围|描述|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)
+ - | !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)

--- a/package-lock.json
+++ b/package-lock.json
@ -3248,17 +3248,6 @@
            "postcss-value-parser": "^4.1.0"
          }
        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
        "default-gateway": {
          "version": "5.0.5",
          "resolved": "https://registry.npm.taobao.org/default-gateway/download/default-gateway-5.0.5.tgz?cache=0&sync_timestamp=1610365791284&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdefault-gateway%2Fdownload%2Fdefault-gateway-5.0.5.tgz",
@ -3361,18 +3350,6 @@
            "resolve-from": "^3.0.0"
          }
        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
        "micromatch": {
          "version": "3.1.10",
          "resolved": "https://registry.npm.taobao.org/micromatch/download/micromatch-3.1.10.tgz?cache=0&sync_timestamp=1618054885525&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmicromatch%2Fdownload%2Fmicromatch-3.1.10.tgz",
@ -3520,18 +3497,6 @@
          "resolved": "https://registry.npm.taobao.org/slash/download/slash-2.0.0.tgz",
          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
          "dev": true
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.3.1",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.3.1.tgz",
-          "integrity": "sha512-QTtXgdqQ+4G3d8dmhnnfJSiKKHQtp53XiivSYAvAqNCOufL9aK0DYOc9MW9MSy7Xzj/1qdcghb28zKhOPvQYqQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
        }
      }
    },
@ -18746,8 +18711,8 @@
    },
    "tailwindcss": {
      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.4.tgz",
-      "integrity": "sha512-OdBCPgazNNsknSP+JfrPzkay9aqKjhKtFhbhgxHgvEFdHy/GuRPo2SCJ4w1SFTN8H6FPI4m6qD/Jj20NWY1GkA==",
+      "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",
@ -18785,8 +18750,8 @@
      "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"
@ -18794,8 +18759,8 @@
        },
        "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",
@ -18804,14 +18769,14 @@
        },
        "commander": {
          "version": "6.2.1",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
-          "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+          "resolved": "https://registry.nlark.com/commander/download/commander-6.2.1.tgz?cache=0&sync_timestamp=1624609570521&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcommander%2Fdownload%2Fcommander-6.2.1.tgz",
+          "integrity": "sha1-B5LraC37wyWZm7K4T93duhEKxzw=",
          "dev": true
        },
        "cosmiconfig": {
          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz",
-          "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==",
+          "resolved": "https://registry.npm.taobao.org/cosmiconfig/download/cosmiconfig-7.0.0.tgz?cache=0&sync_timestamp=1596312863119&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcosmiconfig%2Fdownload%2Fcosmiconfig-7.0.0.tgz",
+          "integrity": "sha1-75tE13OVnK5j3ezRIt4jhTtg+NM=",
          "dev": true,
          "requires": {
            "@types/parse-json": "^4.0.0",
@ -18823,8 +18788,8 @@
        },
        "fs-extra": {
          "version": "10.0.0",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz",
-          "integrity": "sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==",
+          "resolved": "https://registry.nlark.com/fs-extra/download/fs-extra-10.0.0.tgz",
+          "integrity": "sha1-n/YbZV3eU/s0qC34S7IUzoAuF8E=",
          "dev": true,
          "requires": {
            "graceful-fs": "^4.2.0",
@ -18834,8 +18799,8 @@
        },
        "glob-parent": {
          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.0.tgz",
-          "integrity": "sha512-Hdd4287VEJcZXUwv1l8a+vXC1GjOQqXe+VS30w/ypihpcnu9M1n3xeYeJu5CBpeEQj2nAab2xxz28GuA3vp4Ww==",
+          "resolved": "https://registry.nlark.com/glob-parent/download/glob-parent-6.0.0.tgz?cache=0&sync_timestamp=1620073245729&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fglob-parent%2Fdownload%2Fglob-parent-6.0.0.tgz",
+          "integrity": "sha1-+FG1mziOeI86RNY/q1A4KyhZwzw=",
          "dev": true,
          "requires": {
            "is-glob": "^4.0.1"
@ -18843,8 +18808,8 @@
        },
        "jsonfile": {
          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "resolved": "https://registry.npm.taobao.org/jsonfile/download/jsonfile-6.1.0.tgz?cache=0&sync_timestamp=1604161933968&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjsonfile%2Fdownload%2Fjsonfile-6.1.0.tgz",
+          "integrity": "sha1-vFWyY0eTxnnsZAMJTrE2mKbsCq4=",
          "dev": true,
          "requires": {
            "graceful-fs": "^4.1.6",
@ -18853,14 +18818,14 @@
        },
        "path-type": {
          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-          "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+          "resolved": "https://registry.npm.taobao.org/path-type/download/path-type-4.0.0.tgz",
+          "integrity": "sha1-hO0BwKe6OAr+CdkKjBgNzZ0DBDs=",
          "dev": true
        },
        "postcss-js": {
          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
-          "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
+          "resolved": "https://registry.npm.taobao.org/postcss-js/download/postcss-js-3.0.3.tgz",
+          "integrity": "sha1-LwvTcKLoWZ1FQ59pcEA7WHOr2jM=",
          "dev": true,
          "requires": {
            "camelcase-css": "^2.0.1",
@ -18869,8 +18834,8 @@
        },
        "postcss-nested": {
          "version": "5.0.5",
-          "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.5.tgz",
-          "integrity": "sha512-GSRXYz5bccobpTzLQZXOnSOfKl6TwVr5CyAQJUPub4nuRJSOECK5AqurxVgmtxP48p0Kc/ndY/YyS1yqldX0Ew==",
+          "resolved": "https://registry.npm.taobao.org/postcss-nested/download/postcss-nested-5.0.5.tgz",
+          "integrity": "sha1-8KEH0zqfqxHXY3IF9TIeJyI+NgM=",
          "dev": true,
          "requires": {
            "postcss-selector-parser": "^6.0.4"
@ -18878,14 +18843,14 @@
        },
        "postcss-value-parser": {
          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-          "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+          "resolved": "https://registry.npm.taobao.org/postcss-value-parser/download/postcss-value-parser-4.1.0.tgz?cache=0&sync_timestamp=1588083303810&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-value-parser%2Fdownload%2Fpostcss-value-parser-4.1.0.tgz",
+          "integrity": "sha1-RD9qIM7WSBor2k+oUypuVdeJoss=",
          "dev": true
        },
        "purgecss": {
          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.0.3.tgz",
-          "integrity": "sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==",
+          "resolved": "https://registry.npm.taobao.org/purgecss/download/purgecss-4.0.3.tgz",
+          "integrity": "sha1-gUe0KfnAnbcZ4F1kkI6otnKRN0I=",
          "dev": true,
          "requires": {
            "commander": "^6.0.0",
@ -18896,8 +18861,8 @@
        },
        "universalify": {
          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+          "resolved": "https://registry.npm.taobao.org/universalify/download/universalify-2.0.0.tgz?cache=0&sync_timestamp=1603180048005&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Funiversalify%2Fdownload%2Funiversalify-2.0.0.tgz",
+          "integrity": "sha1-daSYTv7cSwiXXFrrc/Uw0C3yVxc=",
          "dev": true
        }
      }
@ -19719,6 +19684,50 @@
        "vue-style-loader": "^4.1.0"
      }
    },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.3.1",
+      "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.3.1.tgz",
+      "integrity": "sha1-W2da4orJcIARHpOybSKtyjbdV6o=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "4.1.1",
+          "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,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "hash-sum": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/hash-sum/download/hash-sum-2.0.0.tgz",
+          "integrity": "sha1-gdAbtd6OpKIUrV1urRtSNGCwtFo=",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
+          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
+      }
+    },
    "vue-style-loader": {
      "version": "4.1.3",
      "resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.3.tgz",
--- a/src/components/Project/Project.vue
+++ 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>
--- a/src/components/Project/components/TimeBar.vue
+++ 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 { status: 0 };
+  },
+};
+</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>
--- a/src/components/Project/components/TimeLine.vue
+++ 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>
--- a/src/components/Roles/.gitkeep
+++ b/src/components/Roles/.gitkeep
--- a/src/components/Roles/Roles.vue
+++ b/src/components/Roles/Roles.vue
@ -0,0 +1,85 @@
+<!--
+ * @Author: aBin
+ * @email: binbin0314@126.com
+ * @Date: 2021-07-19 10:52:05
+ * @LastEditors: aBin
+ * @LastEditTime: 2021-07-19 11:09:23
+-->
+<template>
+  <view class="wrap">
+    <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"
+            :list="roles"
+            @change="handleClickRole"
+            class="u-skeleton-rect"
+            name="value"
+            ref="tabs"
+          ></u-tabs>
+
+          <!-- <u-tabs
+            :bar-width="barWidth"
+            :current="currentRoleIndex"
+            :list="roles"
+            @change="handleClickRole"
+            class="u-skeleton-rect"
+            ref="tabs"
+          >
+            <template v-slot:name>
+              <span :key="role.id" v-for="role in roles">{{ role.value }}</span>
+            </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: true, // 是否显示骨架屏组件
+    };
+  },
+
+  methods: {
+    handleClickRole(index) {
+      console.log('index: ', index);
+      this.currentRoleIndex = index;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.container {
+  padding: 20rpx;
+}
+</style>
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@ -6,9 +6,11 @@
 * @LastEditTime: 2021-07-19 11:05:42
 -->
 <template>
-  <view class="container p-4 bg-gray-100">
-    <Globals />
-    <!-- <view class="mt-5">
+  <view>
+    <Roles />
+    <view class="container p-4 bg-gray-100">
+      <Globals />
+      <!-- <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">
@ -16,14 +18,19 @@
    </view>
    <view class="my-3">
      <u-button type="error" size="default" @click="openPage">pinch 事件验证</u-button>
-    </view> -->
+      </view>-->
+    </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';
+
 export default {
-  components: { Globals },
+  components: { Globals, Roles, Project },
  data() {
    return { title: 'Hello' };
  },