fix: 修改角色栏组件

CHANGELOG.md

@@ -1,4 +1,4 @@
-# 0.1.0 (2021-07-19)
+# 0.1.0 (2021-07-20)
 
 ### 🌟 新功能
 范围|描述|commitId
@@ -16,6 +16,7 @@
 范围|描述|commitId
 --|--|--
  - | 更新代码 | [1f40a76](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/1f40a76)
+ - | 无基本变化 | [21ac4bb](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/21ac4bb)
  - | 组件新建 | [89c0035](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/89c0035)
 
 

package-lock.json

@@ -2282,9 +2282,9 @@
       "integrity": "sha1-W9Jir5Tp0lvR5xsF3u1Eh2oiLos="
     },
     "@nodelib/fs.walk": {
-      "version": "1.2.7",
-      "resolved": "https://registry.nlark.com/@nodelib/fs.walk/download/@nodelib/fs.walk-1.2.7.tgz",
-      "integrity": "sha1-lMI9sY7kZT4Smr0m+wb4cKyeHuI=",
+      "version": "1.2.8",
+      "resolved": "https://registry.nlark.com/@nodelib/fs.walk/download/@nodelib/fs.walk-1.2.8.tgz?cache=0&sync_timestamp=1625769855088&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40nodelib%2Ffs.walk%2Fdownload%2F%40nodelib%2Ffs.walk-1.2.8.tgz",
+      "integrity": "sha1-6Vc36LtnRt3t9pxVaVNJTxlv5po=",
       "requires": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -2370,16 +2370,16 @@
       "dev": true
     },
     "@tailwindcss/postcss7-compat": {
-      "version": "2.2.0",
-      "resolved": "https://registry.nlark.com/@tailwindcss/postcss7-compat/download/@tailwindcss/postcss7-compat-2.2.0.tgz",
-      "integrity": "sha1-rcXDAfX9XvB5nx1nSZmvEuil/UA=",
+      "version": "2.2.4",
+      "resolved": "https://registry.nlark.com/@tailwindcss/postcss7-compat/download/@tailwindcss/postcss7-compat-2.2.4.tgz",
+      "integrity": "sha1-DltEbpTP34kuT3bOy3A8jWmAUPM=",
       "requires": {
         "@fullhuman/postcss-purgecss": "^3.1.3",
         "arg": "^5.0.0",
         "autoprefixer": "^9",
         "bytes": "^3.0.0",
         "chalk": "^4.1.1",
-        "chokidar": "^3.5.1",
+        "chokidar": "^3.5.2",
         "color": "^3.1.3",
         "cosmiconfig": "^7.0.0",
         "detective": "^5.2.0",
@@ -2399,7 +2399,7 @@
         "postcss": "^7",
         "postcss-functions": "^3",
         "postcss-js": "^2",
-        "postcss-load-config": "^3.0.1",
+        "postcss-load-config": "^3.1.0",
         "postcss-nested": "^4",
         "postcss-selector-parser": "^6.0.6",
         "postcss-value-parser": "^4.1.0",
@@ -2410,20 +2410,6 @@
         "tmp": "^0.2.1"
       },
       "dependencies": {
-        "autoprefixer": {
-          "version": "9.8.6",
-          "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
-          "integrity": "sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==",
-          "requires": {
-            "browserslist": "^4.12.0",
-            "caniuse-lite": "^1.0.30001109",
-            "colorette": "^1.2.1",
-            "normalize-range": "^0.1.2",
-            "num2fraction": "^1.2.2",
-            "postcss": "^7.0.32",
-            "postcss-value-parser": "^4.1.0"
-          }
-        },
         "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",
@@ -2435,7 +2421,7 @@
         },
         "cosmiconfig": {
           "version": "7.0.0",
-          "resolved": "https://registry.nlark.com/cosmiconfig/download/cosmiconfig-7.0.0.tgz?cache=0&sync_timestamp=1618846820697&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcosmiconfig%2Fdownload%2Fcosmiconfig-7.0.0.tgz",
+          "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=",
           "requires": {
             "@types/parse-json": "^4.0.0",
@@ -2456,94 +2442,35 @@
           }
         },
         "glob-parent": {
-          "version": "6.0.0",
-          "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=",
+          "version": "6.0.1",
+          "resolved": "https://registry.nlark.com/glob-parent/download/glob-parent-6.0.1.tgz?cache=0&sync_timestamp=1626760200164&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fglob-parent%2Fdownload%2Fglob-parent-6.0.1.tgz",
+          "integrity": "sha1-QgVPaF62pE56fRialu+kClSXGqc=",
           "requires": {
             "is-glob": "^4.0.1"
           }
         },
         "jsonfile": {
           "version": "6.1.0",
-          "resolved": "https://registry.npm.taobao.org/jsonfile/download/jsonfile-6.1.0.tgz?cache=0&sync_timestamp=1604161822397&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjsonfile%2Fdownload%2Fjsonfile-6.1.0.tgz",
+          "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=",
           "requires": {
             "graceful-fs": "^4.1.6",
             "universalify": "^2.0.0"
           }
         },
-        "parse-json": {
-          "version": "5.2.0",
-          "resolved": "https://registry.nlark.com/parse-json/download/parse-json-5.2.0.tgz",
-          "integrity": "sha1-x2/Gbe5UIxyWKyK8yKcs8vmXU80=",
-          "requires": {
-            "@babel/code-frame": "^7.0.0",
-            "error-ex": "^1.3.1",
-            "json-parse-even-better-errors": "^2.3.0",
-            "lines-and-columns": "^1.1.6"
-          }
-        },
         "path-type": {
           "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/path-type/download/path-type-4.0.0.tgz?cache=0&sync_timestamp=1611752074264&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpath-type%2Fdownload%2Fpath-type-4.0.0.tgz",
+          "resolved": "https://registry.npm.taobao.org/path-type/download/path-type-4.0.0.tgz",
           "integrity": "sha1-hO0BwKe6OAr+CdkKjBgNzZ0DBDs="
         },
-        "postcss": {
-          "version": "7.0.36",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
-          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          },
-          "dependencies": {
-            "ansi-styles": {
-              "version": "3.2.1",
-              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-              "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-              "requires": {
-                "color-convert": "^1.9.0"
-              }
-            },
-            "chalk": {
-              "version": "2.4.2",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-              "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-              "requires": {
-                "ansi-styles": "^3.2.1",
-                "escape-string-regexp": "^1.0.5",
-                "supports-color": "^5.3.0"
-              },
-              "dependencies": {
-                "supports-color": {
-                  "version": "5.5.0",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-                  "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-                  "requires": {
-                    "has-flag": "^3.0.0"
-                  }
-                }
-              }
-            },
-            "supports-color": {
-              "version": "6.1.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-              "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-              "requires": {
-                "has-flag": "^3.0.0"
-              }
-            }
-          }
-        },
         "postcss-value-parser": {
           "version": "4.1.0",
-          "resolved": "https://registry.npm.taobao.org/postcss-value-parser/download/postcss-value-parser-4.1.0.tgz",
+          "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="
         },
         "universalify": {
           "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/universalify/download/universalify-2.0.0.tgz",
+          "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="
         }
       }
@@ -4306,48 +4233,23 @@
       "integrity": "sha1-bZUX654DDSQ2ZmZR6GvZ9vE1M8k="
     },
     "autoprefixer": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-8.0.0.tgz",
-      "integrity": "sha512-XBEqAoESCyGu3daYmWcTC37Dwmjvs0y40UtUO3MMX+Pd/w7jwNFfUKNtxoMFu0u0wcotP+arDpU3JVH54UV79Q==",
-      "dev": true,
+      "version": "9.8.6",
+      "resolved": "https://registry.nlark.com/autoprefixer/download/autoprefixer-9.8.6.tgz?cache=0&sync_timestamp=1626111053301&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fautoprefixer%2Fdownload%2Fautoprefixer-9.8.6.tgz",
+      "integrity": "sha1-O3NZTKG/kmYyDFrPFYjXTep0IQ8=",
       "requires": {
-        "browserslist": "^3.0.0",
-        "caniuse-lite": "^1.0.30000808",
+        "browserslist": "^4.12.0",
+        "caniuse-lite": "^1.0.30001109",
+        "colorette": "^1.2.1",
         "normalize-range": "^0.1.2",
         "num2fraction": "^1.2.2",
-        "postcss": "^6.0.17",
-        "postcss-value-parser": "^3.2.3"
+        "postcss": "^7.0.32",
+        "postcss-value-parser": "^4.1.0"
       },
       "dependencies": {
-        "browserslist": {
-          "version": "3.2.8",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-3.2.8.tgz",
-          "integrity": "sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ==",
-          "dev": true,
-          "requires": {
-            "caniuse-lite": "^1.0.30000844",
-            "electron-to-chromium": "^1.3.47"
-          }
-        },
-        "postcss": {
-          "version": "6.0.23",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
-          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.1",
-            "source-map": "^0.6.1",
-            "supports-color": "^5.4.0"
-          }
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
+        "postcss-value-parser": {
+          "version": "4.1.0",
+          "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="
         }
       }
     },
@@ -7552,7 +7454,7 @@
     },
     "defined": {
       "version": "1.0.0",
-      "resolved": "https://registry.nlark.com/defined/download/defined-1.0.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/defined/download/defined-1.0.0.tgz",
       "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM="
     },
     "del": {
@@ -8856,9 +8758,9 @@
       "dev": true
     },
     "fast-glob": {
-      "version": "3.2.6",
-      "resolved": "https://registry.nlark.com/fast-glob/download/fast-glob-3.2.6.tgz",
-      "integrity": "sha1-Q03ZUphFF26gSazJND6CgnZcbho=",
+      "version": "3.2.7",
+      "resolved": "https://registry.nlark.com/fast-glob/download/fast-glob-3.2.7.tgz",
+      "integrity": "sha1-/Wy3otfpqnp4RhEehaGW1rL3ZqE=",
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -8869,7 +8771,7 @@
       "dependencies": {
         "glob-parent": {
           "version": "5.1.2",
-          "resolved": "https://registry.nlark.com/glob-parent/download/glob-parent-5.1.2.tgz?cache=0&sync_timestamp=1620073245729&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fglob-parent%2Fdownload%2Fglob-parent-5.1.2.tgz",
+          "resolved": "https://registry.nlark.com/glob-parent/download/glob-parent-5.1.2.tgz?cache=0&sync_timestamp=1626760200164&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fglob-parent%2Fdownload%2Fglob-parent-5.1.2.tgz",
           "integrity": "sha1-hpgyxYA0/mikCTwX3BXoNA2EAcQ=",
           "requires": {
             "is-glob": "^4.0.1"
@@ -8888,9 +8790,9 @@
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
     },
     "fastq": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npm.taobao.org/fastq/download/fastq-1.11.0.tgz",
-      "integrity": "sha1-u5+5VaBxMKkY62PB9RYcwypdCFg=",
+      "version": "1.11.1",
+      "resolved": "https://registry.nlark.com/fastq/download/fastq-1.11.1.tgz?cache=0&sync_timestamp=1625393108958&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffastq%2Fdownload%2Ffastq-1.11.1.tgz",
+      "integrity": "sha1-XYF1quF9thlH+LFiz8f2MmTSKAc=",
       "requires": {
         "reusify": "^1.0.4"
       }
@@ -14728,14 +14630,23 @@
       "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
     },
     "postcss": {
-      "version": "8.3.5",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.5.tgz",
-      "integrity": "sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA==",
-      "dev": true,
+      "version": "7.0.36",
+      "resolved": "https://registry.nlark.com/postcss/download/postcss-7.0.36.tgz",
+      "integrity": "sha1-BW+M/6k5ZiqPWQWVDAfVKFZE38s=",
       "requires": {
-        "colorette": "^1.2.2",
-        "nanoid": "^3.1.23",
-        "source-map-js": "^0.6.2"
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.nlark.com/supports-color/download/supports-color-6.1.0.tgz",
+          "integrity": "sha1-B2Srxpxj1ayELdSGfo0CXogN+PM=",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
       }
     },
     "postcss-calc": {
@@ -15028,7 +14939,7 @@
         },
         "supports-color": {
           "version": "5.5.0",
-          "resolved": "https://registry.nlark.com/supports-color/download/supports-color-5.5.0.tgz?cache=0&sync_timestamp=1622293670728&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-5.5.0.tgz",
+          "resolved": "https://registry.nlark.com/supports-color/download/supports-color-5.5.0.tgz",
           "integrity": "sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=",
           "requires": {
             "has-flag": "^3.0.0"
@@ -15086,26 +14997,6 @@
       "requires": {
         "camelcase-css": "^2.0.1",
         "postcss": "^7.0.18"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.36",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
-          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
       }
     },
     "postcss-load-config": {
@@ -15532,26 +15423,6 @@
       "requires": {
         "postcss": "^7.0.32",
         "postcss-selector-parser": "^6.0.2"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.36",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
-          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
       }
     },
     "postcss-normalize-charset": {
@@ -18705,13 +18576,13 @@
       }
     },
     "tailwindcss": {
-      "version": "2.2.4",
-      "resolved": "https://registry.nlark.com/tailwindcss/download/tailwindcss-2.2.4.tgz",
-      "integrity": "sha1-ai4lmx4mElrqp83EeZY/0hfDCLA=",
-      "dev": true,
+      "version": "npm:@tailwindcss/postcss7-compat@2.2.4",
+      "resolved": "https://registry.nlark.com/@tailwindcss/postcss7-compat/download/@tailwindcss/postcss7-compat-2.2.4.tgz",
+      "integrity": "sha1-DltEbpTP34kuT3bOy3A8jWmAUPM=",
       "requires": {
-        "@fullhuman/postcss-purgecss": "^4.0.3",
+        "@fullhuman/postcss-purgecss": "^3.1.3",
         "arg": "^5.0.0",
+        "autoprefixer": "^9",
         "bytes": "^3.0.0",
         "chalk": "^4.1.1",
         "chokidar": "^3.5.2",
@@ -18731,9 +18602,11 @@
         "node-emoji": "^1.8.1",
         "normalize-path": "^3.0.0",
         "object-hash": "^2.2.0",
-        "postcss-js": "^3.0.3",
+        "postcss": "^7",
+        "postcss-functions": "^3",
+        "postcss-js": "^2",
         "postcss-load-config": "^3.1.0",
-        "postcss-nested": "5.0.5",
+        "postcss-nested": "^4",
         "postcss-selector-parser": "^6.0.6",
         "postcss-value-parser": "^4.1.0",
         "pretty-hrtime": "^1.0.3",
@@ -18743,36 +18616,19 @@
         "tmp": "^0.2.1"
       },
       "dependencies": {
-        "@fullhuman/postcss-purgecss": {
-          "version": "4.0.3",
-          "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.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"
           }
         },
-        "commander": {
-          "version": "6.2.1",
-          "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.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",
             "import-fresh": "^3.2.1",
@@ -18785,7 +18641,6 @@
           "version": "10.0.0",
           "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",
             "jsonfile": "^6.0.1",
@@ -18793,10 +18648,9 @@
           }
         },
         "glob-parent": {
-          "version": "6.0.0",
-          "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,
+          "version": "6.0.1",
+          "resolved": "https://registry.nlark.com/glob-parent/download/glob-parent-6.0.1.tgz?cache=0&sync_timestamp=1626760200164&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fglob-parent%2Fdownload%2Fglob-parent-6.0.1.tgz",
+          "integrity": "sha1-QgVPaF62pE56fRialu+kClSXGqc=",
           "requires": {
             "is-glob": "^4.0.1"
           }
@@ -18805,7 +18659,6 @@
           "version": "6.1.0",
           "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",
             "universalify": "^2.0.0"
@@ -18814,51 +18667,17 @@
         "path-type": {
           "version": "4.0.0",
           "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.npm.taobao.org/postcss-js/download/postcss-js-3.0.3.tgz",
-          "integrity": "sha1-LwvTcKLoWZ1FQ59pcEA7WHOr2jM=",
-          "dev": true,
-          "requires": {
-            "camelcase-css": "^2.0.1",
-            "postcss": "^8.1.6"
-          }
-        },
-        "postcss-nested": {
-          "version": "5.0.5",
-          "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"
-          }
+          "integrity": "sha1-hO0BwKe6OAr+CdkKjBgNzZ0DBDs="
         },
         "postcss-value-parser": {
           "version": "4.1.0",
           "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.npm.taobao.org/purgecss/download/purgecss-4.0.3.tgz",
-          "integrity": "sha1-gUe0KfnAnbcZ4F1kkI6otnKRN0I=",
-          "dev": true,
-          "requires": {
-            "commander": "^6.0.0",
-            "glob": "^7.0.0",
-            "postcss": "^8.2.1",
-            "postcss-selector-parser": "^6.0.2"
-          }
+          "integrity": "sha1-RD9qIM7WSBor2k+oUypuVdeJoss="
         },
         "universalify": {
           "version": "2.0.0",
           "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
+          "integrity": "sha1-daSYTv7cSwiXXFrrc/Uw0C3yVxc="
         }
       }
     },
@@ -19061,7 +18880,7 @@
     },
     "tmp": {
       "version": "0.2.1",
-      "resolved": "https://registry.npm.taobao.org/tmp/download/tmp-0.2.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/tmp/download/tmp-0.2.1.tgz?cache=0&sync_timestamp=1588178571895&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftmp%2Fdownload%2Ftmp-0.2.1.tgz",
       "integrity": "sha1-hFf8MDfc9HGcJRNnoa9lAO4czxQ=",
       "requires": {
         "rimraf": "^3.0.0"

package.json

@@ -59,15 +59,18 @@
     "@dcloudio/uni-quickapp-native": "^2.0.0-31920210609001",
     "@dcloudio/uni-quickapp-webview": "^2.0.0-31920210609001",
     "@dcloudio/uni-stat": "^2.0.0-31920210609001",
-    "@tailwindcss/postcss7-compat": "^2.2.0",
+    "@tailwindcss/postcss7-compat": "^2.2.4",
     "@vue/shared": "^3.0.0",
     "alloyfinger": "^0.1.16",
+    "autoprefixer": "^9.8.6",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.5",
+    "postcss": "^7.0.36",
     "postcss-loader": "^6.1.1",
     "regenerator-runtime": "^0.12.1",
     "register-service-worker": "^1.7.1",
     "right-pad": "^1.0.1",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4",
     "uview-ui": "^1.8.4",
     "vue": "^2.6.11",
     "vuex": "^3.2.0"
@@ -89,7 +92,6 @@
     "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "autoprefixer": "^8.0.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-import": "^1.11.0",
     "commitizen": "^4.0.3",
@@ -105,13 +107,11 @@
     "mini-types": "*",
     "miniprogram-api-typings": "*",
     "node-sass": "^6.0.0",
-    "postcss": "^8.3.5",
     "postcss-class-rename": "^1.0.1",
     "postcss-comment": "^2.0.0",
     "prettier": "^2.2.1",
     "sass": "^1.35.1",
     "sass-loader": "10",
-    "tailwindcss": "^2.2.4",
     "vue-cli-plugin-commitlint": "~1.0.12",
     "vue-cli-plugin-mock": "^1.0.3",
     "vue-template-compiler": "^2.6.11"

src/App.vue

@@ -12,6 +12,10 @@ export default {
 };
 </script>
 
+<style>
+@import './common/styles/iconfont.scss';
+</style>
+
 <style lang="scss">
 @import 'uview-ui/index.scss';
 </style>

src/common/styles/iconfont.scss

@@ -0,0 +1,24 @@
+@font-face {
+  font-family: "custom-icon"; /* Project id 2685595 */
+  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVIAAsAAAAACgAAAAT8AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDHAqGfIV2ATYCJAMQCwoABCAFhQsHURurCMiemjwtI2pmiCwWUAUJlGuJ4HG/cl6SpewBK4QiWQZNKEwdsKoWvQqJCnX1H6rTZtX0UiiopKTEFmCawkkhn+jFAfxB9+3X9kyjpjkVIHEV0XTWkH3753TlyywWIqWRGiURCvFCf/6Pma4+rgS+DUCiEiOLBjaLtnyeedmUQnfgcsq3DK86yN24j0C1myf4OP9xwfLPMkmzCpReHETB8axww1mSkyoVxNAVtKFbiyw0AjDSR3gL8Mn7+fjHNiSBpJWBfqHLD64c9vtG8u1PRPRfJCU/0t5fGp6e0ELG9pnJ41G19o5IYNsOUYssUQcBytKV6LXty9vn/xuKvipu1/iXR5YE0QY6d4CA/Zy8YzSLRObXdRKJX8/pJ8AtZHYXHWInEM8RmP6WkOWTmpivmYVZ4wmKcM+ZELE9Jvu5+Vuv9l++vVu0yzhn07kLplvEZvnTUtG/WcSKrVThW8V54gvn5PfeJdp9+3L/VbP8k7SYapyaYgVi4hPMob5jAD3L6ZsA4AU7c5KbPQ0F51Z8TA5NYvaxYpnxU8zaNzHBjnPIWsmkVB8EFJvdX5uK2WJQWiDCp51PKN94cs0JZl13bLUJQcReIvgHKMsTlB0dsaRJeJ/SXtFZbXGaxPc70TSO/1GxzLkjNdnHOxQdVbNuQoZdJm22E+a7CD4VfEyfjCNpfK+Y8mSVzJbT+j2+j0VR+Fra6yTtREcdj9utEUfFU+E3mIR+lDVBxs1Y7zn6pEmrUesJiuh2dfZTz6VY0Nr3vPtgkbdYZ29vF5pS/xL3WYKxWdbwvplZmlZkKB7XYej4L/UEf+KX+nTGYPQs8Zblf/r97LG3V9DHM+s4OHdWMVr7vKp6rbokHq56XhvxR9zbPq3fa9eiY3wk3GOo+3/KbmD9ZKcTpnR9E2KOUMKcsu0knH/Cpd4oteKHhBqFIv6oWkIc6mXH2Bb77B0W8csowoyCP4LrwxNQyx8c998pNT+ihXzboc7T51fpm6pZJatrPMhEoIkJ9uj4XDkdwz8dNlrq3j/SuaHZxR8e6W1mX513EHzfHJX6n9UY5r7iseFvxy2vaKKcM8Jy+KTFb80zicsCiF2ZzPPYwwPHyrJ5JwWKhIbCTHj5X8PyLeDgKdkrc8izLbmH8zDmY+KvNy9xycS4NDQcb/TdF0zeqfrw+r5KEoVm4UaBP877e4cFLjGZQ6Na9V8+RT+gAkPzN88RKW/25zyKjDRNc3HKon9wmn+twna6nPt/ycz1N35VY40TJowH/iEamPrHeYByqOFkUwyU8pSoFgXAjZj2NUCwJaEaCn4xF2Oe9CEcf4+O0DcewaRjFmZ9K8gCdiNb4BiyDU7CapsoSm+zm0REWQVYNYxhmLIfJkM+w2zKfWQBXxEtbGDINlCD1c2wOa5vNbr9BMgJHciqh8Jso9dmFAkbkFFDrfMMN1ZyX0gPzSv0gx0uBRtL6wLnDWr0u1tRVbM5FQrXkCcwCvj9XgylNFAhMHsUNCoQkju1ssorepNRdrliF3yII8gBsnwChQRDWzuHiGAFiKEMK37PDNqwJM6vzqPAsoJ8jrsjgwE2LFnDkDdcDc06w1VV3mycEiJrYHH9dnrAn7MaScNmgIriSXtIICMFLSyuKStSKA/KHY3LVxe8Bir9piVgCIFQCAP1tpC42CrUlC0t1/gpjJQbvibjZ5FVJ4eCXMd+MAY=') format('woff2');
+}
+
+.custom-icon {
+  font-family: "custom-icon" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.custom-icon-attachment:before {
+  content: "\e7e1";
+}
+
+.custom-icon-moneycollect:before {
+  content: "\e7cd";
+}
+
+.custom-icon-C-bxl-redux:before {
+  content: "\e608";
+}

src/components/Globals/index.vue

@@ -7,18 +7,19 @@
 -->
 <template>
   <view>
-    <u-card margin="0" :show-head="false" :show-foot="false" border-radius="25">
+    <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 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>
+    <u-skeleton :animation="true" :loading="true" bgcolor="#fff"></u-skeleton>
   </view>
 </template>
+
 <script>
 export default {
   name: 'Global',

src/components/Roles/Roles.vue

@@ -9,65 +9,29 @@
   <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 class="container">
+          <role-list />
         </view>
-        <u-skeleton :animation="true" :loading="loading" bgcolor="#fff" v-else></u-skeleton>
       </view>
     </view>
   </view>
 </template>
 
 <script>
+import RoleList from './components/RoleList.vue';
+
 export default {
   name: 'Roles',
+  components: { RoleList },
   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;
-    },
+    return {};
   },
+  methods: {},
 };
 </script>
 
 <style scoped lang="scss">
 .container {
-  padding: 20rpx;
+  padding: 0 20rpx;
 }
 </style>

src/components/Roles/components/RoleList.vue

@@ -0,0 +1,183 @@
+<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 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>
+        </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, value: '项目经理', isMine: 0 },
+        { id: 2, value: '运维', isMine: 0 },
+        { id: 3, value: '导师一', isMine: 1 },
+        { id: 4, value: '导师二', isMine: 1 },
+        { id: 5, value: '导师三', isMine: 1 },
+        { id: 6, value: '导师四', isMine: 1 },
+        { id: 7, value: '导师五', isMine: 1 },
+        { id: 8, value: '导师六', isMine: 1 },
+        { id: 9, value: '导师七', isMine: 1 },
+        { id: 10, value: '导师八', isMine: 1 },
+      ],
+      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(isMine, tabIndex, index) {
+      if (isMine === 1 && tabIndex === index) {
+        return 'default-tab-choice';
+      }
+      if (isMine === 1 && tabIndex !== index) {
+        return 'default-tab-item';
+      }
+      if (isMine === 0 && tabIndex === index) {
+        return 'tab-choice';
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$tabChoiceColor: #f40; //设置选中文字和底部下划线背景颜色
+$max: 100%;
+
+// 这是最外层盒子
+.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: 15rpx 24rpx;
+      position: relative;
+      display: inline-block;
+      text-align: center;
+      font-size: 30rpx;
+      transition-property: background-color, width;
+    }
+
+    .default-tab-item {
+      color: $tabChoiceColor;
+    }
+
+    .default-tab-choice {
+      //当前选中 基于此类名给与底部选中框
+      position: relative;
+      color: $tabChoiceColor;
+      font-weight: 600;
+    }
+    .default-tab-choice:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: -14rpx;
+      width: 100%;
+      height: 6rpx;
+      border-radius: 2rpx;
+      background: $tabChoiceColor;
+    }
+
+    .tab-choice {
+      //当前选中 基于此类名给与底部选中框
+      position: relative;
+      color: $uni-color-primary;
+      font-weight: 600;
+    }
+
+    .tab-choice:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: -14rpx;
+      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>

src/components/TimeLine/components/Barrier.vue

@@ -28,7 +28,7 @@ export default {
   margin-bottom: 16rpx;
   background: #fafafc;
   color: $uni-text-color;
-  font-size: 14px;
+  font-size: 28rpx;
   position: sticky;
   top: -1px;
   left: 0;

src/components/TimeLine/components/TimeBox.vue

@@ -7,20 +7,27 @@
 -->
 <template>
   <view class="px-4">
-    <view v-for="item in list" :key="item" class="mt-2">
+    <view :key="item" class="mt-2" v-for="item in list">
       <view class="flex items-center">
         <TimeStatus :status="item" />
-        <view class="flex-1 ml-2 flex justify-between">
+        <view class="flex-1 ml-2 flex justify-between items-center">
           <view>任务时间栏</view>
-          <view>任务快捷方式</view>
+          <view>
+            <view class="flex justify-between" style="min-width: 180rpx">
+              <!-- <text class="custom-icon custom-icon-attachment"></text> -->
+              <u-icon custom-prefix="custom-icon" name="C-bxl-redux" size="34"></u-icon>
+              <u-icon custom-prefix="custom-icon" name="attachment" size="42"></u-icon>
+              <u-icon custom-prefix="custom-icon" name="moneycollect" size="40"></u-icon>
+            </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">
+          <u-card :show-foot="false" :show-head="false" border-radius="25" class="h-16" margin="0">
             <view slot="body">
               <view class="u-col-between p-0 u-skeleton">
-                <view class="u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆</view>
+                <view class="u-skeleton-rect">瓶身描绘的牡丹一如你初妆</view>
               </view>
             </view>
           </u-card>

src/components/TimeLine/components/TimeStatus.vue

@@ -8,7 +8,7 @@
 <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">
+      <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="u-progress-dot"></view>
           <text class="u-progress-info">
@@ -18,7 +18,7 @@
       </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">
+      <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="u-progress-dot"></view>
           <view class="u-progress-info">{{ time }}</view>
@@ -26,7 +26,7 @@
       </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">
+      <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="u-progress-dot"></view>
           <text class="u-progress-info">
@@ -36,7 +36,7 @@
       </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">
+      <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="u-progress-dot"></view>
           <text class="u-progress-info">
@@ -104,4 +104,8 @@ export default {
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.u-progress-bg {
+  background: rgba(255, 255, 255, 0) !important;
+}
+</style>