init-project

babel.config.js

@@ -5,6 +5,7 @@ module.exports = {
     ['taro', {
       framework: 'react',
       ts: true
-    }]
+    }],
+    'linaria/babel' // 添加到 babel-preset
   ]
 }

config/index.js

@@ -1,8 +1,9 @@
+/* eslint-disable no-unused-vars */
 /* eslint-disable import/no-commonjs */
 const path = require('path')
 
 const config = {
-  projectName: 'agent-auth-react',
+  projectName: 'GGW',
   date: '2021-1-27',
   designWidth: 750,
   deviceRatio: {
@@ -46,6 +47,17 @@ const config = {
           generateScopedName: '[name]__[local]___[hash:base64:5]'
         }
       }
+    },
+   
+    webpackChain(chain, _webpack) {
+      // linaria/loader 选项详见 https://github.com/callstack/linaria/blob/master/docs/BUNDLERS_INTEGRATION.md#webpack
+      chain.module
+        .rule('script')
+        .use('linariaLoader')
+        .loader('linaria/loader')
+        .options({
+          sourceMap: process.env.NODE_ENV !== 'production',
+        })
     }
   },
   h5: {

linaria.config.js

@@ -0,0 +1,12 @@
+// linaria 配置详见 https://github.com/callstack/linaria/blob/master/docs/CONFIGURATION.md#options
+module.exports = {
+    rules: [
+      {
+        action: require("linaria/evaluators").shaker,
+      },
+      {
+        test: /node_modules[\/\\](?!@tarojs[\/\\]components)/,
+        action: "ignore"
+      }
+    ]
+  }

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "agent-auth-react",
+  "name": "ggw",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -1087,6 +1087,19 @@
         }
       }
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npm.taobao.org/@emotion/is-prop-valid/download/@emotion/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha1-2yixxDaKJZtgqXMR1qlS1P0BrBo=",
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npm.taobao.org/@emotion/memoize/download/@emotion/memoize-0.7.4.tgz",
+      "integrity": "sha1-Gb8PWvGRSREcQNmLsM+CEZ9dnus="
+    },
     "@hapi/address": {
       "version": "4.1.0",
       "resolved": "https://registry.npm.taobao.org/@hapi/address/download/@hapi/address-4.1.0.tgz?cache=0&sync_timestamp=1603524710662&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40hapi%2Faddress%2Fdownload%2F%40hapi%2Faddress-4.1.0.tgz",
@@ -1130,6 +1143,256 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "@linaria/babel-preset": {
+      "version": "3.0.0-beta.1",
+      "resolved": "https://registry.npm.taobao.org/@linaria/babel-preset/download/@linaria/babel-preset-3.0.0-beta.1.tgz",
+      "integrity": "sha1-fN5r7vQBdatWfGgD8eUCJVgTbdg=",
+      "requires": {
+        "@babel/generator": ">=7",
+        "@babel/plugin-syntax-dynamic-import": ">=7",
+        "@babel/template": ">=7",
+        "@linaria/core": "^3.0.0-beta.1",
+        "@linaria/logger": "^3.0.0-beta.0",
+        "cosmiconfig": "^5.1.0",
+        "source-map": "^0.6.1",
+        "stylis": "^3.5.4"
+      },
+      "dependencies": {
+        "cosmiconfig": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npm.taobao.org/cosmiconfig/download/cosmiconfig-5.2.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcosmiconfig%2Fdownload%2Fcosmiconfig-5.2.1.tgz",
+          "integrity": "sha1-BA9yaAnFked6F8CjYmykW08Wixo=",
+          "requires": {
+            "import-fresh": "^2.0.0",
+            "is-directory": "^0.3.1",
+            "js-yaml": "^3.13.1",
+            "parse-json": "^4.0.0"
+          }
+        },
+        "import-fresh": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/import-fresh/download/import-fresh-2.0.0.tgz?cache=0&sync_timestamp=1608469532269&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fimport-fresh%2Fdownload%2Fimport-fresh-2.0.0.tgz",
+          "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
+          "requires": {
+            "caller-path": "^2.0.0",
+            "resolve-from": "^3.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npm.taobao.org/parse-json/download/parse-json-4.0.0.tgz?cache=0&sync_timestamp=1610966667117&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fparse-json%2Fdownload%2Fparse-json-4.0.0.tgz",
+          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+          "requires": {
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1"
+          }
+        },
+        "resolve-from": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npm.taobao.org/resolve-from/download/resolve-from-3.0.0.tgz",
+          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM="
+        }
+      }
+    },
+    "@linaria/core": {
+      "version": "3.0.0-beta.1",
+      "resolved": "https://registry.npm.taobao.org/@linaria/core/download/@linaria/core-3.0.0-beta.1.tgz",
+      "integrity": "sha1-v6z9eSLtOESuddspeVOafKxNhVM="
+    },
+    "@linaria/extractor": {
+      "version": "3.0.0-beta.1",
+      "resolved": "https://registry.npm.taobao.org/@linaria/extractor/download/@linaria/extractor-3.0.0-beta.1.tgz",
+      "integrity": "sha1-2ESi5pyCZleLuEHvMOjpewZjITw=",
+      "requires": {
+        "@babel/generator": ">=7",
+        "@babel/plugin-transform-runtime": ">=7",
+        "@babel/plugin-transform-template-literals": ">=7",
+        "@linaria/babel-preset": "^3.0.0-beta.1",
+        "@linaria/preeval": "^3.0.0-beta.1"
+      }
+    },
+    "@linaria/logger": {
+      "version": "3.0.0-beta.0",
+      "resolved": "https://registry.npm.taobao.org/@linaria/logger/download/@linaria/logger-3.0.0-beta.0.tgz",
+      "integrity": "sha1-9LACRmpoyhEcLKhKRNBL0mkLcNc=",
+      "requires": {
+        "debug": "^4.1.1"
+      }
+    },
+    "@linaria/preeval": {
+      "version": "3.0.0-beta.1",
+      "resolved": "https://registry.npm.taobao.org/@linaria/preeval/download/@linaria/preeval-3.0.0-beta.1.tgz",
+      "integrity": "sha1-E1oOlwlYJxpa5dFhfV5hchKCl3I=",
+      "requires": {
+        "@linaria/babel-preset": "^3.0.0-beta.1"
+      }
+    },
+    "@linaria/react": {
+      "version": "3.0.0-beta.1",
+      "resolved": "https://registry.npm.taobao.org/@linaria/react/download/@linaria/react-3.0.0-beta.1.tgz",
+      "integrity": "sha1-uck88yjwEtIPJ47FR8kRkp5C1jQ=",
+      "requires": {
+        "@emotion/is-prop-valid": "^0.8.8",
+        "@linaria/core": "^3.0.0-beta.1"
+      }
+    },
+    "@linaria/rollup": {
+      "version": "3.0.0-beta.1",
+      "resolved": "https://registry.npm.taobao.org/@linaria/rollup/download/@linaria/rollup-3.0.0-beta.1.tgz",
+      "integrity": "sha1-3iSlLmnx/h1cVkWBRpM5RKWr76g=",
+      "requires": {
+        "@linaria/babel-preset": "^3.0.0-beta.1",
+        "@rollup/pluginutils": "^4.1.0"
+      }
+    },
+    "@linaria/server": {
+      "version": "3.0.0-beta.0",
+      "resolved": "https://registry.npm.taobao.org/@linaria/server/download/@linaria/server-3.0.0-beta.0.tgz",
+      "integrity": "sha1-ZHlWBlCiWvA6Z2ZIT/nY/tdIqco=",
+      "requires": {
+        "postcss": "^7.0.14"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-2.4.2.tgz?cache=0&sync_timestamp=1591687042638&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-2.4.2.tgz",
+          "integrity": "sha1-zUJUFnelQzPPVBpJEIwUMrRMlCQ=",
+          "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.npm.taobao.org/supports-color/download/supports-color-5.5.0.tgz?cache=0&sync_timestamp=1611394023277&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-5.5.0.tgz",
+              "integrity": "sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=",
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npm.taobao.org/postcss/download/postcss-7.0.35.tgz?cache=0&sync_timestamp=1612638009555&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss%2Fdownload%2Fpostcss-7.0.35.tgz",
+          "integrity": "sha1-0r4AuZj38hHYonaXQHny6SuXDiQ=",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-6.1.0.tgz?cache=0&sync_timestamp=1611394023277&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-6.1.0.tgz",
+          "integrity": "sha1-B2Srxpxj1ayELdSGfo0CXogN+PM=",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "@linaria/shaker": {
+      "version": "3.0.0-beta.1",
+      "resolved": "https://registry.npm.taobao.org/@linaria/shaker/download/@linaria/shaker-3.0.0-beta.1.tgz",
+      "integrity": "sha1-Guv0LvEt6xEHB81ZrNVYGPJs0f0=",
+      "requires": {
+        "@babel/generator": ">=7",
+        "@babel/plugin-transform-runtime": ">=7",
+        "@babel/plugin-transform-template-literals": ">=7",
+        "@babel/preset-env": ">=7",
+        "@linaria/babel-preset": "^3.0.0-beta.1",
+        "@linaria/logger": "^3.0.0-beta.0",
+        "@linaria/preeval": "^3.0.0-beta.1",
+        "babel-plugin-transform-react-remove-prop-types": "^0.4.24"
+      }
+    },
+    "@linaria/stylelint": {
+      "version": "3.0.0-beta.1",
+      "resolved": "https://registry.npm.taobao.org/@linaria/stylelint/download/@linaria/stylelint-3.0.0-beta.1.tgz",
+      "integrity": "sha1-4NQO6Q0ZS3z+sabORHYkIGvqPHw=",
+      "requires": {
+        "@linaria/babel-preset": "^3.0.0-beta.1",
+        "strip-ansi": "^5.2.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npm.taobao.org/ansi-regex/download/ansi-regex-4.1.0.tgz",
+          "integrity": "sha1-i5+PCM8ay4Q3Vqg5yox+MWjFGZc="
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npm.taobao.org/strip-ansi/download/strip-ansi-5.2.0.tgz",
+          "integrity": "sha1-jJpTb+tq/JYr36WxBKUJHBrZwK4=",
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
+      }
+    },
+    "@linaria/webpack4-loader": {
+      "version": "3.0.0-beta.1",
+      "resolved": "https://registry.npm.taobao.org/@linaria/webpack4-loader/download/@linaria/webpack4-loader-3.0.0-beta.1.tgz",
+      "integrity": "sha1-MObPrfzrbbH2NszVtQmyZFYnEdc=",
+      "requires": {
+        "@linaria/babel-preset": "^3.0.0-beta.1",
+        "@linaria/logger": "^3.0.0-beta.0",
+        "cosmiconfig": "^5.1.0",
+        "enhanced-resolve": "^4.1.0",
+        "find-yarn-workspace-root": "^1.2.1",
+        "loader-utils": "^1.2.3",
+        "mkdirp": "^0.5.1",
+        "normalize-path": "^3.0.0"
+      },
+      "dependencies": {
+        "cosmiconfig": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npm.taobao.org/cosmiconfig/download/cosmiconfig-5.2.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcosmiconfig%2Fdownload%2Fcosmiconfig-5.2.1.tgz",
+          "integrity": "sha1-BA9yaAnFked6F8CjYmykW08Wixo=",
+          "requires": {
+            "import-fresh": "^2.0.0",
+            "is-directory": "^0.3.1",
+            "js-yaml": "^3.13.1",
+            "parse-json": "^4.0.0"
+          }
+        },
+        "import-fresh": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/import-fresh/download/import-fresh-2.0.0.tgz?cache=0&sync_timestamp=1608469532269&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fimport-fresh%2Fdownload%2Fimport-fresh-2.0.0.tgz",
+          "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
+          "requires": {
+            "caller-path": "^2.0.0",
+            "resolve-from": "^3.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npm.taobao.org/parse-json/download/parse-json-4.0.0.tgz?cache=0&sync_timestamp=1610966667117&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fparse-json%2Fdownload%2Fparse-json-4.0.0.tgz",
+          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+          "requires": {
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1"
+          }
+        },
+        "resolve-from": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npm.taobao.org/resolve-from/download/resolve-from-3.0.0.tgz",
+          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
+        }
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npm.taobao.org/@mrmlnc/readdir-enhanced/download/@mrmlnc/readdir-enhanced-2.2.1.tgz",
@@ -1190,6 +1453,15 @@
         }
       }
     },
+    "@rollup/pluginutils": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npm.taobao.org/@rollup/pluginutils/download/@rollup/pluginutils-4.1.0.tgz?cache=0&sync_timestamp=1603767613737&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40rollup%2Fpluginutils%2Fdownload%2F%40rollup%2Fpluginutils-4.1.0.tgz",
+      "integrity": "sha1-Dcxhx4DjkldVT+t/dyB9zsoTyDg=",
+      "requires": {
+        "estree-walker": "^2.0.1",
+        "picomatch": "^2.2.2"
+      }
+    },
     "@sindresorhus/is": {
       "version": "0.7.0",
       "resolved": "https://registry.npm.taobao.org/@sindresorhus/is/download/@sindresorhus/is-0.7.0.tgz?cache=0&sync_timestamp=1602542828376&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40sindresorhus%2Fis%2Fdownload%2F%40sindresorhus%2Fis-0.7.0.tgz",
@@ -4788,6 +5060,11 @@
         "babel-runtime": "^6.22.0"
       }
     },
+    "babel-plugin-transform-react-remove-prop-types": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npm.taobao.org/babel-plugin-transform-react-remove-prop-types/download/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
+      "integrity": "sha1-8u2vm0xqX75cHWeL+1MQeMFVXzo="
+    },
     "babel-plugin-transform-taroapi": {
       "version": "1.3.15",
       "resolved": "https://registry.npm.taobao.org/babel-plugin-transform-taroapi/download/babel-plugin-transform-taroapi-1.3.15.tgz?cache=0&sync_timestamp=1611913882012&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-plugin-transform-taroapi%2Fdownload%2Fbabel-plugin-transform-taroapi-1.3.15.tgz",
@@ -5496,7 +5773,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/caller-callsite/download/caller-callsite-2.0.0.tgz",
       "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
-      "dev": true,
       "requires": {
         "callsites": "^2.0.0"
       },
@@ -5504,8 +5780,7 @@
         "callsites": {
           "version": "2.0.0",
           "resolved": "https://registry.npm.taobao.org/callsites/download/callsites-2.0.0.tgz",
-          "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
-          "dev": true
+          "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA="
         }
       }
     },
@@ -5513,7 +5788,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/caller-path/download/caller-path-2.0.0.tgz",
       "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
-      "dev": true,
       "requires": {
         "caller-callsite": "^2.0.0"
       }
@@ -7685,7 +7959,6 @@
       "version": "4.5.0",
       "resolved": "https://registry.npm.taobao.org/enhanced-resolve/download/enhanced-resolve-4.5.0.tgz?cache=0&sync_timestamp=1610568624565&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fenhanced-resolve%2Fdownload%2Fenhanced-resolve-4.5.0.tgz",
       "integrity": "sha1-Lzz9hNvjtIfxjy2y7x4GSlccpew=",
-      "dev": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "memory-fs": "^0.5.0",
@@ -7696,7 +7969,6 @@
           "version": "0.5.0",
           "resolved": "https://registry.npm.taobao.org/memory-fs/download/memory-fs-0.5.0.tgz",
           "integrity": "sha1-MkwBKIuIZSlm0WHbd4OHIIRajjw=",
-          "dev": true,
           "requires": {
             "errno": "^0.1.3",
             "readable-stream": "^2.0.1"
@@ -7718,7 +7990,6 @@
       "version": "0.1.8",
       "resolved": "https://registry.npm.taobao.org/errno/download/errno-0.1.8.tgz",
       "integrity": "sha1-i7Ppx9Rjvkl2/4iPdrSAnrwugR8=",
-      "dev": true,
       "requires": {
         "prr": "~1.0.1"
       }
@@ -8459,6 +8730,11 @@
       "resolved": "https://registry.npm.taobao.org/estraverse/download/estraverse-4.3.0.tgz?cache=0&sync_timestamp=1596642941915&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Festraverse%2Fdownload%2Festraverse-4.3.0.tgz",
       "integrity": "sha1-OYrT88WiSUi+dyXoPRGn3ijNvR0="
     },
+    "estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npm.taobao.org/estree-walker/download/estree-walker-2.0.2.tgz",
+      "integrity": "sha1-UvAQF4wqTBF6d1fP6UKtt9LaTKw="
+    },
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npm.taobao.org/esutils/download/esutils-2.0.3.tgz",
@@ -11035,8 +11311,7 @@
     "json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/json-parse-better-errors/download/json-parse-better-errors-1.0.2.tgz",
-      "integrity": "sha1-u4Z8+zRQ5pEHwTHRxRS6s9yLyqk=",
-      "dev": true
+      "integrity": "sha1-u4Z8+zRQ5pEHwTHRxRS6s9yLyqk="
     },
     "json-parse-even-better-errors": {
       "version": "2.3.1",
@@ -11234,6 +11509,22 @@
         "type-check": "~0.3.2"
       }
     },
+    "linaria": {
+      "version": "3.0.0-beta.1",
+      "resolved": "https://registry.npm.taobao.org/linaria/download/linaria-3.0.0-beta.1.tgz",
+      "integrity": "sha1-fiATu4m9MnGUabnrDWoRfEi3Abs=",
+      "requires": {
+        "@linaria/babel-preset": "^3.0.0-beta.1",
+        "@linaria/core": "^3.0.0-beta.1",
+        "@linaria/extractor": "^3.0.0-beta.1",
+        "@linaria/react": "^3.0.0-beta.1",
+        "@linaria/rollup": "^3.0.0-beta.1",
+        "@linaria/server": "^3.0.0-beta.0",
+        "@linaria/shaker": "^3.0.0-beta.1",
+        "@linaria/stylelint": "^3.0.0-beta.1",
+        "@linaria/webpack4-loader": "^3.0.0-beta.1"
+      }
+    },
     "lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npm.taobao.org/lines-and-columns/download/lines-and-columns-1.1.6.tgz",
@@ -14534,8 +14825,7 @@
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/prr/download/prr-1.0.1.tgz",
-      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
-      "dev": true
+      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
     },
     "pseudomap": {
       "version": "1.0.2",
@@ -17524,6 +17814,11 @@
         }
       }
     },
+    "stylis": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npm.taobao.org/stylis/download/stylis-3.5.4.tgz",
+      "integrity": "sha1-9mXyX14pnPPWRlSrlJpXx2i3P74="
+    },
     "stylus": {
       "version": "0.54.8",
       "resolved": "https://registry.npm.taobao.org/stylus/download/stylus-0.54.8.tgz?cache=0&sync_timestamp=1594902470280&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstylus%2Fdownload%2Fstylus-0.54.8.tgz",

package.json

@@ -41,6 +41,7 @@
     "@tarojs/react": "3.0.18",
     "@tarojs/runtime": "3.0.18",
     "@tarojs/taro": "^3.0.18",
+    "linaria": "^3.0.0-beta.1",
     "lodash": "4.17.15",
     "react": "^16.10.0",
     "react-dom": "^16.10.0",

project.config.json

@@ -1,26 +1,81 @@
 {
-	"miniprogramRoot": "dist/",
-	"projectname": "agent-auth-react",
-	"description": "",
-	"appid": "touristappid",
-	"setting": {
-		"urlCheck": true,
-		"es6": false,
-		"postcss": false,
-		"preloadBackgroundData": false,
-		"minified": false,
-		"newFeature": true,
-		"autoAudits": false,
-		"coverView": true,
-		"showShadowRootInWxmlPanel": false,
-		"scopeDataCheck": false,
-		"useCompilerModule": false
-	},
-	"compileType": "miniprogram",
-	"simulatorType": "wechat",
-	"simulatorPluginLibVersion": {},
-	"condition": {},
-	"compilerOptions": {
-		"paths": { "@": ["./src"] }
-	}
-}
+  "miniprogramRoot": "dist/",
+  "projectname": "agent-auth-react",
+  "description": "",
+  "appid": "wxe57e116e4fe55532",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "enhance": false,
+    "postcss": false,
+    "preloadBackgroundData": false,
+    "minified": false,
+    "newFeature": true,
+    "coverView": true,
+    "nodeModules": false,
+    "autoAudits": false,
+    "showShadowRootInWxmlPanel": false,
+    "scopeDataCheck": false,
+    "uglifyFileName": false,
+    "checkInvalidKey": true,
+    "checkSiteMap": true,
+    "uploadWithSourceMap": true,
+    "compileHotReLoad": false,
+    "useMultiFrameRuntime": true,
+    "useApiHook": true,
+    "useApiHostProcess": true,
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
+    "enableEngineNative": false,
+    "bundle": false,
+    "useIsolateContext": true,
+    "useCompilerModule": false,
+    "userConfirmedUseCompilerModuleSwitch": false,
+    "userConfirmedBundleSwitch": false,
+    "packNpmManually": false,
+    "packNpmRelationList": [],
+    "minifyWXSS": true
+  },
+  "compileType": "miniprogram",
+  "simulatorType": "wechat",
+  "simulatorPluginLibVersion": {},
+  "compilerOptions": {
+    "paths": {
+      "@": [
+        "./src"
+      ],
+      "@/assets": [
+        "src/assets"
+      ]
+    }
+  },
+  "condition": {
+    "plugin": {
+      "list": []
+    },
+    "game": {
+      "list": []
+    },
+    "gamePlugin": {
+      "list": []
+    },
+    "miniprogram": {
+      "list": [
+        {
+          "name": "pages/Entrance/index",
+          "pathName": "pages/Entrance/index",
+          "query": "",
+          "scene": null
+        },
+        {
+          "name": "pages/My/index",
+          "pathName": "pages/My/index",
+          "scene": null
+        }
+      ]
+    }
+  }
+}

src/app.config.ts

@@ -1,6 +1,8 @@
 export default {
   pages: [
-    'pages/index/index'
+    'pages/index/index',
+    'pages/Entrance/index',
+    'pages/My/index',
   ],
   window: {
     backgroundTextStyle: 'light',

src/app.scss

@@ -0,0 +1,5 @@
+.over1 {
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+}

src/pages/Entrance/index.config.ts

@@ -0,0 +1,4 @@
+export default {
+    navigationBarTitleText: '线上云大赛'
+}
+  

src/pages/Entrance/index.scss

@@ -0,0 +1,77 @@
+.Enteance {
+    background: url('../../assets/Entrance/bg.png') no-repeat;
+    width: 100vw;
+    height: 100vh;
+    background-size: 100% 100%;
+}
+
+
+.game-box {
+    position: fixed;
+    right: 0;
+    top: 11.7vh;
+    display: flex;
+    flex-direction: column;
+    .my {
+        width: 142px;
+        height: 82px;
+        display: block;
+    }
+
+    .game-report {
+        width: 142px;
+        height: 82px;
+        display: block;
+    }
+}
+
+
+.enteance-item {
+    position: relative;
+    .enteance-item-img {
+        width: 140px;
+        height: 142px;
+    }
+
+    .star {
+        position: absolute;
+        top: -30px;
+        left: 0px;
+        width: 140px;
+        height: 40px;
+    }
+
+    .step {
+        width: 116px;
+        height: 116px;
+        position: absolute;
+        top: -25px;
+        left: -100px;
+    }
+}
+
+
+.rule-pop {
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.66);
+    position: relative;
+    z-index: 1000;
+    .container {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        .rule-img {
+            width: 704px;
+            height: 306px;
+        }
+        .go-btn {
+            width: 172px;
+            height: 172px;
+            display: block;
+            margin: 0 auto;
+            margin-top: 64px;
+        }
+    }
+}

src/pages/Entrance/index.tsx

@@ -0,0 +1,91 @@
+import React, {useState} from 'react'
+
+import { View, Image } from '@tarojs/components'
+
+import './index.scss'
+
+const entranceList = [
+    {
+        id: 0,
+        x: '51.47vw',
+        y: '79.89vh'
+    },
+    {
+        id: 1,
+        x: '39.2vw',
+        y: '66.26vh'
+    },
+    {
+        id: 2,
+        x: '71.2vw',
+        y: '53.75vh'
+    },
+    {
+        id: 3,
+        x: '8.53vw',
+        y: '50.62vh'
+    },
+    {
+        id: 4,
+        x: '45.33vw',
+        y: '41.75vh'
+    },
+    {
+        id: 5,
+        x: '73.87vw',
+        y: '28.57vh'
+    },
+    {
+        id: 6,
+        x: '37.33vw',
+        y: '20.69vh'
+    },
+    {
+        id: 7,
+        x: '16vw',
+        y: '7.27vh'
+    }
+]
+
+const Enteance: React.FC = () => {
+
+    const [visible, setVisible] = useState<boolean>(false)
+    
+
+    return (
+        <View className='Enteance'>
+            <View className='game-box'>
+                <Image className='my' src={require('../../assets/Entrance/my.png')} />
+                <Image className='game-report' src={require('../../assets/Entrance/game-report.png')} />
+            </View>
+
+            {/* 游戏入口 */}
+
+            {
+                entranceList.map( (item, index) => (
+                    <View key={item.id} className='enteance-item' style={{top: item.y, left: item.x, position: 'absolute'}}>
+                        <Image className='enteance-item-img' src={require(`../../assets/Entrance/${index + 1}.png`)}></Image>
+                        <Image className='star' src={require('../../assets/Entrance/star0.png')} />
+                        <Image 
+                          className='step' 
+                          style={{ left: item.id === 3 ? 64 : -55}} 
+                          src={require(`../../assets/Entrance/${item.id === 3 ? 'setp-4' : 'step'}.png`)}
+                        />
+                    </View>
+                 ))
+            }
+
+            {/* 第一次进入的活动规则 */}
+            {
+               visible && <View className='rule-pop'>
+                    <View className='container'>
+                        <Image className='rule-img' src={require('../../assets/Entrance/first-tip.png')} ></Image>
+                        <Image className='go-btn' onClick={() => setVisible(false)} src={require('../../assets/Entrance/go.png')} ></Image>
+                    </View>
+                </View>
+            }
+        </View>
+    )
+}
+
+export default Enteance

src/pages/GetBag/index.config.ts

@@ -0,0 +1,4 @@
+export default {
+    navigationBarTitleText: '提升课'
+}
+  

src/pages/GetBag/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import { View } from '@tarojs/components'
+
+
+const GetBag: React.FC = () => {
+    return (
+        <View>
+            
+        </View>
+    )
+}
+
+export default GetBag

src/pages/My/index.config.ts

@@ -0,0 +1,4 @@
+export default {
+    navigationStyle: 'custom'
+}
+  

src/pages/My/index.scss

@@ -0,0 +1,223 @@
+.My {
+    min-height: 100vh;
+    background: #F4F5F7;
+}
+
+.header {
+    width: 100vw;
+    height: 552px;
+    background: url('../../assets/My/bg.png') no-repeat;
+    background-size: 100% 100%;
+}
+
+.user {
+    position: absolute;
+    top: 180px;
+    left: 50px;
+    display: flex;
+    align-items: center;
+    .user-ava {
+        width: 126px;
+        height: 126px;
+        border: 6px solid #FFFFFF;
+        border-radius: 50%;
+    }
+    Text {
+        font-size: 48px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #FFFFFF;
+        margin-left: 32px;
+    }
+}
+
+
+.customs-step {
+    width: 686px;
+    height: 378px;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 8px 0px rgba(123, 121, 121, 0.06);
+    border-radius: 22px;
+    margin: 0 auto;
+    margin-top: -154px;
+    padding: 40px;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+
+    .step {
+        width: 108px;
+        margin-right: 52px;
+        height: 108px;
+        background: #28D626;
+        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+        border-radius: 20px;
+        border: 6px solid #FFFFFF;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        .star {
+            position: absolute;
+            width: 130px;
+            height: 50px;
+            bottom: -16px;
+        }
+        .clock {
+            width: 110px;
+            height: 32px;
+            background: #FFFFFF;
+            box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+            border-radius: 200px;
+            box-sizing: border-box;
+            padding: 4px 12px 6px 12px;
+            position: absolute;
+            bottom: -22px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            Text {
+                font-size: 20px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                color: #28D626;
+            }
+        }
+    }
+
+    
+}
+
+.card {
+    background: url('../../assets/My/card.png') no-repeat;
+    width: 730px;
+    height: 408px;
+    position: relative;
+    background-size: 100% 100%;
+    .card-btn {
+        width: 376px;
+        height: 140px;
+        position: absolute;
+        top: 260px;
+        left: 186px;
+    }
+}
+
+
+.RankList {
+    margin-top: 24px;
+    .self {
+        width: 686px;
+        height: 104px;
+        background: #FFFFFF;
+        box-shadow: 0px 4px 14px 0px rgba(234, 234, 235, 0.88);
+        border-radius: 22px 22px 0px 0px;
+        margin: 0 auto;
+        .menu {
+            height: 102px;
+            font-size: 36px;
+            font-family: PingFangSC-Semibold, PingFang SC;
+            font-weight: 600;
+            color: #ABB4C1;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 126px;
+            box-sizing: border-box;
+        }
+        .active {
+            color: #5FE608;
+        }
+        .line {
+            width: 584px;
+            height: 2px;
+            background-color: #EDEFED;
+            margin: 0 auto;
+        }
+    }
+    .rank {
+        width: 686px;
+        height: 1998px;
+        background: #FFFFFF;
+        box-shadow: 0px 4px 14px 0px rgba(234, 234, 235, 0.88);
+        border-radius: 0px 0px 22px 22px;
+        margin: 0 auto;
+        margin-top: 8px;
+        
+    }
+
+    .rank-item {
+        display: flex;
+        align-items: center;
+        width: 686px;
+        height: 126px;
+        padding-left: 28px;
+        padding-right: 70px;
+        box-sizing: border-box;
+        background-color: #fff;
+        margin: 0 auto;
+        .rank-count {
+            width: 52px;
+            height: 58px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 32px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #ABB4C1;
+        }
+        .user-ava {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            margin-left: 34px;
+            margin-right: 34px;
+        }
+        .user-name {
+            width: 64px;
+            margin-right: 42px;
+        }
+        .success-rate {
+            font-size: 20px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #ABB4C1;
+            margin-right: 16px;
+            Text {
+                font-size: 32px;
+                color: #5B73F9;
+                font-weight: bold;
+            }
+        }
+        .date {
+            font-size: 20px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #ABB4C1;
+            margin-right: 16px;
+            Text {
+                color: #23D321;
+                font-size: 32px;
+            }
+        }
+    }
+}
+
+.topic {
+    width: 686px;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 14px 0px rgba(234, 234, 235, 0.88);
+    border-radius: 22px;
+    margin: 0 auto;
+    .topic-item {
+        .date {
+            font-size: 32px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #212020;
+        }
+    }
+}
+

src/pages/My/index.tsx

@@ -0,0 +1,134 @@
+import React, {useState} from 'react'
+
+import { View, Image, Text } from '@tarojs/components'
+
+import './index.scss'
+
+const stepList = new Array(8).fill(0)
+
+const RankList: React.FC = () => {
+
+    // 当前选中的Menu下标
+    const [MenuIndex, setMenuIndex] = useState(0)
+
+
+    // 渲染排名等级
+    const RenderThree = (rank: number) => {
+        if (rank < 4) {
+            return <Image  style={{width: 26, height: 29}} src={require(`../../assets/My/rank${rank}.png`)} />
+        } else {
+            return rank
+        }
+
+    }
+
+    // 渲染做题记录
+
+    const RenderTopicRecord = () => {
+        return (
+            <View className='topic'>
+                <View className='topic-item'>
+                    <View className='date'>2020/4/18</View>
+
+                </View>
+            </View>
+        )
+    }
+
+
+    // 渲染排行榜
+    const RenderRank = () => {
+        return (
+            <React.Fragment>
+                <View className='rank-item'>
+                        <View className='rank-count'>
+                            {RenderThree(2)}
+                        </View>
+                        <Image className='user-ava'  src={require('../../assets/My/ava.jpg')} />
+                        <View className='user-name over1'>22222222222222222</View>
+                        <View className='success-rate'>正确率：<Text>80%</Text></View>
+                        <View className='date'>用时:<Text>10s</Text></View>
+                </View>
+                <View className='rank'>
+                    {
+                        stepList.map( (item, index) =>  (
+                            <View className='rank-item' key={index}>
+                                <View className='rank-count'>
+                                    {RenderThree(index + 1)}
+                                </View>
+                                <Image className='user-ava'  src={require('../../assets/My/ava.jpg')} />
+                                <View className='user-name over1'>22222222222222222</View>
+                                <View className='success-rate'>正确率：<Text>80%</Text></View>
+                                <View className='date'>用时:<Text>10s</Text></View>
+                            </View>
+                        ))
+                    }
+                    
+                </View>
+            </React.Fragment>
+        )
+    }
+
+    return (
+        <View className='RankList'>
+            <View className='self'>
+                <View className='menu'>
+                    <View className={[MenuIndex === 0 ? 'active' : ''].join('')} onClick={() => setMenuIndex(0)}> 排行榜 </View>
+                    <View className={[MenuIndex === 1 ? 'active' : ''].join('')} onClick={() => setMenuIndex(1)}> 做题记录 </View>
+                </View>
+                <View className='line'></View>
+            </View>
+
+            {/* 排行榜 */}
+            {
+                MenuIndex === 0 ? RenderRank() : RenderTopicRecord()
+            }
+
+            
+        </View>
+    )
+}
+
+const My: React.FC = () => {
+
+    const RenderTopicResult = () => {
+        // return <Image className='star' src={require('../../assets/My/star0.png')} />
+        return (
+            <View className='clock'>
+                <Image style={{width: 8, height: 9}} src={require('../../assets/My/clock.png')} />
+                <Text>未解锁</Text>
+            </View>
+        )
+    }
+
+    return (
+        <View className='My'>
+            <View className='header'></View>
+            <View className='user'>
+                <Image className='user-ava' src={require('../../assets/My/ava.jpg')} />
+                <Text>小明</Text>
+            </View>
+            {/* 闯关进度 */}
+            <View className='customs-step'>
+                {
+                    stepList.map( (item, index) => (
+                        <View className='step' style={{marginRight: [3, 7].includes(index)?  0 : 27}} key={index} >
+                            <Image style={{width: 21, height: 27}} src={require(`../../assets/My/${index + 1 }.png`)} />
+                            {
+                                RenderTopicResult()
+                            }
+                        </View>
+                    ))
+                }
+            </View>
+            {/* 卡片 */}
+            <View className='card'>
+                <Image className='card-btn' src={require('../../assets/My/card-btn.png')} />
+            </View>
+            {/* 排行榜 */}
+            <RankList />
+        </View>
+    )
+}
+
+export default My

src/pages/home/index.tsx

@@ -1,8 +0,0 @@
-import React from 'react'
-
-const Home: React.FC = () => {
-    return (
-        <text>2</text>
-    )
-}
-export default Home

src/pages/index/index.scss

@@ -1,2 +1,55 @@
-@import "~taro-ui/dist/style/components/nav-bar.scss";
-@import "~taro-ui/dist/style/components/icon.scss";
+@import "~taro-ui/dist/style/components/curtain.scss";
+
+.index {
+    .bg {
+        width: 100vw;
+        height: 100vh;
+        display: block;
+        position: relative;
+        z-index: 1;
+    }
+    .ruler {
+        width: 150px;
+        height: 4.85vh;
+        display: block;
+        position: absolute;
+        right: 0;
+        top: 15.29vh;
+        z-index: 2;
+    }    
+}
+
+
+
+.activity {
+    position: absolute;
+    top: 45.88vh;
+    left: 0.8vw;
+    z-index: 2;
+    .gift-bag {
+        width: 728px;
+        height: 422px;
+        display: block;
+        
+    }
+
+    .get-btn {
+        width: 166px;
+        height: 68px;
+        display: block;
+        position: absolute;
+        top: 61.64%;
+        left: 14.13%;
+        z-index: 2;
+    }
+
+}
+
+.start-btn {
+    position: absolute;
+    z-index: 2;
+    width: 238px;
+    height: 236px;
+    left: 34.13vw;
+    bottom: 6.19vh;
+}

src/pages/index/index.tsx

@@ -1,24 +1,65 @@
+/* eslint-disable import/no-commonjs */
+import React, { useEffect, useState } from 'react'
 
-import React, { useEffect } from 'react'
+import { View, Text, Image} from '@tarojs/components'
 
-import { View, Text } from '@tarojs/components'
+import { AtCurtain } from 'taro-ui'
 
-import { AtButton, AtNavBar, AtIcon  } from 'taro-ui'
-
-import "taro-ui/dist/style/components/button.scss" // 按需引入
+import Taro from '@tarojs/taro'
 
 import './index.scss'
 
 const Index: React.FC = () => { 
 
+  const [ visible, setVisble ] = useState<boolean>(false)
+
+  // 跳转页面
+  const goPage = () => {
+    Taro.navigateTo({
+       url: '/pages/Entrance/index'
+    });
+  }
+
+
+  // 渲染弹窗
+  const RenderRuler = () => {
+    return (
+      <AtCurtain isOpened={visible} closeBtnPosition='top-right' onClose={() => setVisble(false)} >
+        <Image style={{width: 298, height: 432}} src={require('../../assets/index/ruler.png')} />
+      </AtCurtain>
+    )
+  }
+  
 
   return (
     <View className='index'>
-     
+    
+        <Image 
+          mode='scaleToFill'
+          className='bg'
+          src={require('../../assets/index/index1.png')}
+        />
+
+        <Image className='ruler' onClick={() => setVisble(true)} src={require('../../assets/index/index2.png')} />
+
+        <View className='activity'>
+          <Image className='gift-bag' src={require('../../assets/index/index3.png')} />
+
+          <Image className='get-btn' src={require('../../assets/index/index5.png')} />
+        </View>
+
+        <Image 
+          className='start-btn' 
+          src={require('../../assets/index/index4.png')}
+          onClick={goPage}
+        />
+        
 
+        {/* 活动规则 */}
+        {RenderRuler()}
       </View>
   )
 
 }
 
-export default Index
+export default Index

tsconfig.json

@@ -20,7 +20,7 @@
       "allowJs": true,
       "resolveJsonModule": true,
       "typeRoots": ["node_modules/@types", "global.d.ts"],
-      "paths": { "@/*": ["./src/*"] },
+      "paths": { "@/*": ["./src/*"], "@/assets": ["src/assets"] },
     },
     "exclude": ["node_modules", "dist"],
     "compileOnSave": false