登录界面完成

package-lock.json

@@ -15,6 +15,12 @@
         "js-message": "1.0.7"
       }
     },
+    "@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true
+    },
     "@ampproject/remapping": {
       "version": "2.2.1",
       "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.1.tgz",
@@ -2212,6 +2218,20 @@
             }
           }
         },
+        "autoprefixer": {
+          "version": "10.4.14",
+          "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.14.tgz",
+          "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
+          "dev": true,
+          "requires": {
+            "browserslist": "^4.21.5",
+            "caniuse-lite": "^1.0.30001464",
+            "fraction.js": "^4.2.0",
+            "normalize-range": "^0.1.2",
+            "picocolors": "^1.0.0",
+            "postcss-value-parser": "^4.2.0"
+          }
+        },
         "json5": {
           "version": "1.0.2",
           "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
@@ -2231,6 +2251,17 @@
             "emojis-list": "^3.0.0",
             "json5": "^1.0.1"
           }
+        },
+        "postcss": {
+          "version": "8.4.23",
+          "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.23.tgz",
+          "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
+          "dev": true,
+          "requires": {
+            "nanoid": "^3.3.6",
+            "picocolors": "^1.0.0",
+            "source-map-js": "^1.0.2"
+          }
         }
       }
     },
@@ -2364,6 +2395,18 @@
         "magic-string": "^0.25.7",
         "postcss": "^8.1.10",
         "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "8.4.23",
+          "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.23.tgz",
+          "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
+          "requires": {
+            "nanoid": "^3.3.6",
+            "picocolors": "^1.0.0",
+            "source-map-js": "^1.0.2"
+          }
+        }
       }
     },
     "@vue/compiler-ssr": {
@@ -2805,6 +2848,12 @@
       "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
       "dev": true
     },
+    "arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
+    },
     "argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmmirror.com/argparse/-/argparse-1.0.10.tgz",
@@ -3105,6 +3154,12 @@
       "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
       "dev": true
     },
+    "camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -3557,6 +3612,17 @@
             "yallist": "^4.0.0"
           }
         },
+        "postcss": {
+          "version": "8.4.23",
+          "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.23.tgz",
+          "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
+          "dev": true,
+          "requires": {
+            "nanoid": "^3.3.6",
+            "picocolors": "^1.0.0",
+            "source-map-js": "^1.0.2"
+          }
+        },
         "semver": {
           "version": "7.5.0",
           "resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.0.tgz",
@@ -3615,6 +3681,17 @@
           "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
           "dev": true
         },
+        "postcss": {
+          "version": "8.4.23",
+          "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.23.tgz",
+          "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
+          "dev": true,
+          "requires": {
+            "nanoid": "^3.3.6",
+            "picocolors": "^1.0.0",
+            "source-map-js": "^1.0.2"
+          }
+        },
         "schema-utils": {
           "version": "4.0.1",
           "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.0.1.tgz",
@@ -3886,6 +3963,12 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "dev": true
     },
+    "didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
     "dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -3895,6 +3978,12 @@
         "path-type": "^4.0.0"
       }
     },
+    "dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -5559,6 +5648,12 @@
         }
       }
     },
+    "jiti": {
+      "version": "1.18.2",
+      "resolved": "https://registry.npmmirror.com/jiti/-/jiti-1.18.2.tgz",
+      "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==",
+      "dev": true
+    },
     "joi": {
       "version": "17.9.2",
       "resolved": "https://registry.npmmirror.com/joi/-/joi-17.9.2.tgz",
@@ -6312,6 +6407,12 @@
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
       "dev": true
     },
+    "object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true
+    },
     "object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.3.tgz",
@@ -6631,6 +6732,18 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true
+    },
+    "pirates": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmmirror.com/pirates/-/pirates-4.0.5.tgz",
+      "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==",
+      "dev": true
+    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -6666,6 +6779,7 @@
       "version": "8.4.23",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.23.tgz",
       "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
+      "dev": true,
       "requires": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -6728,6 +6842,44 @@
       "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
       "dev": true
     },
+    "postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      }
+    },
+    "postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "requires": {
+        "camelcase-css": "^2.0.1"
+      }
+    },
+    "postcss-load-config": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
+      "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
+      "dev": true,
+      "requires": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^2.1.1"
+      },
+      "dependencies": {
+        "yaml": {
+          "version": "2.2.2",
+          "resolved": "https://registry.npmmirror.com/yaml/-/yaml-2.2.2.tgz",
+          "integrity": "sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==",
+          "dev": true
+        }
+      }
+    },
     "postcss-loader": {
       "version": "6.2.1",
       "resolved": "https://registry.npmmirror.com/postcss-loader/-/postcss-loader-6.2.1.tgz",
@@ -6875,6 +7027,15 @@
         "icss-utils": "^5.0.0"
       }
     },
+    "postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.11"
+      }
+    },
     "postcss-normalize-charset": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
@@ -7155,6 +7316,15 @@
         }
       }
     },
+    "read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "requires": {
+        "pify": "^2.3.0"
+      }
+    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmmirror.com/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -7865,6 +8035,43 @@
         "postcss-selector-parser": "^6.0.4"
       }
     },
+    "sucrase": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmmirror.com/sucrase/-/sucrase-3.32.0.tgz",
+      "integrity": "sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "7.1.6",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmmirror.com/commander/-/commander-4.1.1.tgz",
+          "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+          "dev": true
+        },
+        "glob": {
+          "version": "7.1.6",
+          "resolved": "https://registry.npmmirror.com/glob/-/glob-7.1.6.tgz",
+          "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        }
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-5.5.0.tgz",
@@ -7942,6 +8149,48 @@
         }
       }
     },
+    "tailwindcss": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-3.3.2.tgz",
+      "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==",
+      "dev": true,
+      "requires": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.12",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.18.2",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "postcss-value-parser": "^4.2.0",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-6.0.2.tgz",
+          "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.3"
+          }
+        }
+      }
+    },
     "tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmmirror.com/tapable/-/tapable-2.2.1.tgz",
@@ -8075,6 +8324,12 @@
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
       "dev": true
     },
+    "ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmmirror.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
+    },
     "ts-loader": {
       "version": "9.4.2",
       "resolved": "https://registry.npmmirror.com/ts-loader/-/ts-loader-9.4.2.tgz",

package.json

@@ -24,10 +24,13 @@
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "@vue/eslint-config-typescript": "^9.1.0",
+    "autoprefixer": "^10.4.14",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
+    "postcss": "^8.4.23",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
+    "tailwindcss": "^3.3.2",
     "typescript": "~4.5.5"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  }

src/App.css

@@ -0,0 +1,4 @@
+/* app.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/App.vue

@@ -1,10 +1,11 @@
 <template>
- 
-  <router-view/>
+  <router-view />
 </template>
 
+
 <style lang="scss">
-*{
+
+* {
   padding: 0;
   margin: 0;
 }
@@ -29,3 +30,4 @@ nav {
   }
 }
 </style>
+

src/main.ts

@@ -2,4 +2,5 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import "tailwindcss/tailwind.css"
 createApp(App).use(store).use(router).mount('#app')

src/router/index.ts

@@ -18,6 +18,18 @@ const routes: Array<RouteRecordRaw> = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: Login
+  },
+  {
+    path: '/home',
+    name: 'home',
+    children:[{
+      path:'sysconfig',
+      component:()=>import('../views/home/sysconfig/index.vue')
+    }],
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '../views/home/index.vue')
   }
 ]
 

src/views/home/components/leftTab/index.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="flex left">
+    <div class="w256 bg-component-pink">
+      <div class="pt9">
+        <div class="w-full font0">
+          <div
+            v-for="(item, index) in tabList"
+            :class="{
+              'overflow-hidden': !item.isOpen,
+              'left-item_select': item.isSelect,
+            }"
+            :key="index"
+            class="left-item"
+          >
+            <div class="w-full h-full pl25 relative">
+              <img class="" :src="item.icon" />
+              <div
+                @click="
+                  () => {
+                    item.isOpen = !item.isOpen;
+                    item.isSelect = !item.isSelect;
+                  }
+                "
+                class="title"
+              >
+                {{ item.text }}
+              </div>
+              <img
+                v-if="item.children.length && item.isOpen"
+                src="@/assets/home/bottom_arrow.png"
+                class="behind-icon"
+              />
+              <img
+                v-if="item.children.length && !item.isOpen"
+                src="@/assets/home/top_arrow.png"
+                class="behind-icon"
+              />
+            </div>
+
+            <div class="relative font0 overflow-hidden">
+              <div
+                :key="_index"
+                v-for="(_item, _index) in item.children"
+                class="left-item-open cursor-pointer"
+                @click="selectChildren(item.children, _index)"
+                :class="{ 'left-item-open_select': _item.isSelect }"
+              >
+                {{ _item.text }}
+                <!-- xx -->
+              </div>
+            </div>
+          </div>
+
+          <!-- <div class="left-item">
+            <div class="w-full h-full pl25">
+              <img class="front-icon" :src="xcIcon" />
+              <span class="w27">汽车科目一</span>
+              <img src="@/assets/home/bottom_arrow.png" class="behind-icon" />
+            </div>
+            <div class="left-item-open">1.练习技巧</div>
+            <div class="left-item-open">2.套餐技巧</div>
+            <div class="left-item-open">3.模拟考试</div>
+          </div> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs } from "vue";
+import sysIcon from "@/assets/home/sys_icon.png";
+import xcIcon from "@/assets/home/xc_icon.png";
+import mtcIcon from "@/assets/home/mtc_icon.png";
+import bottomArrow from "@/assets/home/bottom_arrow.png";
+import topArrow from "@/assets/home/bottom_arrow.png";
+export default defineComponent({
+  setup() {
+    const state = reactive({
+      tabList: [
+        {
+          text: "系统设置",
+          icon: sysIcon,
+          children: [],
+          isOpen: false,
+          isSelect: false,
+          path: "",
+        },
+        {
+          text: "汽车科目一",
+          icon: xcIcon,
+          isSelect: false,
+          children: [
+            {
+              text: "1.练习技巧",
+              isSelect: false,
+            },
+            {
+              text: "2.套餐技巧",
+              isSelect: false,
+            },
+            {
+              text: "3.模拟考试",
+              isSelect: false,
+            },
+          ],
+          isOpen: false,
+        },
+
+        {
+          text: "汽车科目四",
+          icon: xcIcon,
+          children: [
+            {
+              text: "1.练习技巧",
+              isSelect: false,
+            },
+            {
+              text: "2.套餐技巧",
+              isSelect: false,
+            },
+            {
+              text: "3.模拟考试",
+              isSelect: false,
+            },
+          ],
+          isOpen: false,
+          isSelect: false,
+          path: "",
+        },
+        {
+          text: "摩托车科目一",
+          icon: mtcIcon,
+          children: [
+            {
+              text: "1.练习技巧",
+              isSelect: false,
+            },
+            {
+              text: "2.套餐技巧",
+              isSelect: false,
+            },
+            {
+              text: "3.模拟考试",
+              isSelect: false,
+            },
+          ],
+          isOpen: false,
+          isSelect: false,
+          path: "",
+        },
+      ],
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+  methods: {
+    selectChildren(
+      item: {
+        text: string;
+        isSelect: boolean;
+        path?: undefined;
+      }[],
+      selectIndex: number
+    ) {
+      item.forEach((_item) => {
+        _item.isSelect = false;
+      });
+      item[selectIndex].isSelect = true;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.bg-component-pink {
+  background: #fffdf2;
+}
+.left {
+  height: calc(100vh - 86px);
+
+  .left-item_select {
+    background: #fff3b4;
+    font-weight: bold;
+  }
+  .left-item-open {
+    width: 256px;
+    line-height: 46px;
+    font-weight: 500;
+    text-align: left;
+    font-size: 18px;
+    padding-left: 50px;
+  }
+  .left-item-open_select {
+    background-color: #f9de5b;
+    font-weight: bold;
+  }
+
+  .left-item {
+    width: 256px;
+    line-height: 60px;
+    height: 60px;
+
+    display: inline-block;
+    text-align: left;
+    // display: flex;
+    // justify-content: flex-start;
+    // align-content: center;
+    // align-items: center;
+    font-size: 20px;
+    .title {
+      width: 160px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: inline-block;
+      font-size: 20px;
+      cursor: pointer;
+    }
+    img {
+      display: inline-block;
+      margin-right: 10px;
+      width: 22px;
+    }
+    .front-icon {
+      width: 25px;
+      display: inline-block;
+    }
+    .behind-icon {
+      display: inline-block;
+      width: 13px;
+      margin-left: 10px;
+    }
+  }
+}
+.w256 {
+  width: 256px;
+}
+.pt9 {
+  padding-top: 9px;
+}
+.w20 {
+  width: 20px;
+}
+.h20 {
+  height: 20px;
+}
+.h60 {
+  height: 20px;
+}
+.pl25 {
+  padding-left: 25px;
+}
+.font0 {
+  font-size: 0;
+}
+.mb25 {
+  margin-bottom: 25px;
+}
+</style>

src/views/home/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <img class="w-full" src="@/assets/login/top_bg.png" />
+    <div class="w-full flex">
+      <leftTab></leftTab>
+      <div class="right">
+        <div class="top">
+          <img class="w15" src="@/assets/home/light_icon.png" />
+          <span>友情提示：</span>
+          <span class="text-red-600">您好，请保持安静，认真学习！</span>
+        </div>
+        <router-view></router-view>
+        <!-- <div class="content">
+          <div class="w-full h754 bg-white"></div>
+        </div> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reactive, toRefs } from "vue";
+import leftTab from "./components/leftTab/index.vue";
+export default {
+  setup() {
+    const state = reactive({
+      count: 0,
+    });
+
+    return {
+      ...toRefs(state),
+    };
+  },
+  components: {
+    leftTab,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.w15 {
+  width: 15px;
+}
+.h58 {
+  height: 58px;
+}
+.h754 {
+  height: 754px;
+}
+.right {
+  width: calc(100vw - 256px);
+  background: #f5f5f5;
+  .top {
+    width: 100%;
+    background: #fff;
+    height: 58px;
+    display: flex;
+    justify-content: flex-start;
+    align-content: center;
+    align-items: center;
+    padding-left: 30px;
+  }
+  .content {
+    padding: 0 30px;
+    padding-top: 21px;
+  }
+}
+</style>

src/views/home/sysconfig/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="content">
+    <div class="w-full h255 bg-white pl30 pt30 text-left">
+      <div class="">
+        <span> 1.答题时若答对答案后自动跳到下一题：<input class="yello-radio" type="radio" /></span>
+      </div>
+      <div class="">
+        <span> 2.答题时有红字关键字提示：</span>
+      </div>
+      <div class="">
+        <span>3.答题时有语音提示：</span>
+      </div>
+      <div class="">
+        <span> 4.答题时有语音提示：</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  setup() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.pl30 {
+  padding-left: 30px;
+}
+.pt30{
+    padding-top: 30px;
+}
+.content {
+  padding: 0 30px;
+  padding-top: 21px;
+  .yello-radio{
+    color: yellow;
+  }
+}
+.h754 {
+  height: 754px;
+}
+.h255 {
+  height: 255px;
+}
+</style>

src/views/login/index.vue

@@ -39,7 +39,18 @@
         <img class="w-full" src="@/assets/login/right_bg.png" />
       </div>
     </div>
-    <div></div>
+    <div>
+      <div class="w-full tip">
+        <div>
+          <div>
+            1、请注意：第一次使用时需要安装播放电脑插件，否则不能登陆哦，<a class="tip-download" href="https://www.google.cn/chrome/index.html">点击下载插件</a>
+            看安装说明
+          </div>
+          <div>2、本网站推荐用360浏览器，分辨率为1024*768以上</div>
+        </div>
+      </div>
+    </div>
+    <div class="mt25">闽ICP备05017640号-10</div>
   </div>
 </template>
 
@@ -60,6 +71,9 @@ export default {
   justify-content: space-between;
   width: 1109px;
   margin: 0 auto;
+  margin-top: 58px;
+  align-content: center;
+  align-items: center;
   .left {
     width: 351px;
     background: #fffcef;
@@ -69,14 +83,15 @@ export default {
     align-items: flex-start;
     justify-content: center;
     border-radius: 10px 10px 10px 10px;
+    height: 401px;
 
     .submit {
       margin-top: 50px;
       display: flex;
       justify-content: space-between;
       .confirm {
-        width: 104px;
-        height: 30px;
+        width: 110px;
+        height: 40px;
         background: #f9de5b;
         opacity: 1;
         border: none;
@@ -89,8 +104,8 @@ export default {
         background: #f2c901;
       }
       .cancel {
-        width: 104px;
-        height: 30px;
+        width: 110px;
+        height: 40px;
         background: #f9de5b;
         opacity: 1;
         border: none;
@@ -152,8 +167,8 @@ export default {
     }
 
     .title {
-      padding-top: 25px;
-      padding-bottom: 30px;
+      padding-top: 55px;
+      padding-bottom: 40px;
       font-size: 24px;
       color: #333;
       width: 100%;
@@ -194,16 +209,25 @@ export default {
     width: 672px;
   }
 }
-.pl30 {
-  padding-left: 30px;
-}
-.flex-wrap {
+.tip {
   display: flex;
-  flex-wrap: wrap;
+  justify-content: center;
+  text-align: left;
+  line-height: 1.5;
+  margin-top: 35px;
+  .tip-download{
+    text-decoration: underline;
+    text-underline-offset: 4px;
+    color: #333;
+  }
 }
-.w-full {
-  width: 100%;
+.pl30 {
+  padding-left: 30px;
 }
+
+
+
+
 .bg-primary-yellow {
   background-color: #f9de5b;
 }
@@ -222,4 +246,7 @@ export default {
 .vh100 {
   height: 100vh;
 }
+.mt25 {
+  margin-top: 25px;
+}
 </style>

tailwind.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+    mode: 'jit',
+    purge: [
+      './src/**/*.{vue,js,ts,jsx,tsx}',
+      './public/index.html'
+    ],
+    darkMode: false, // or 'media' or 'class'
+    theme: {
+      extend: {},
+    },
+    variants: {
+      extend: {},
+    },
+    plugins: [],
+  }

vue.config.js

@@ -1,4 +1,5 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+
 })