update

package-lock.json

@@ -8,7 +8,10 @@
       "name": "course_resources",
       "version": "0.0.0",
       "dependencies": {
+        "element-plus": "^2.5.3",
         "pinia": "^2.1.7",
+        "sass": "^1.70.0",
+        "scss": "^0.2.4",
         "vue": "^3.4.15",
         "vue-router": "^4.2.5"
       },
@@ -31,6 +34,22 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+      "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
@@ -399,6 +418,28 @@
         "node": ">=12"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
+      "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.1"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.1.tgz",
+      "integrity": "sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.1"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -449,6 +490,16 @@
         "node": ">=14"
       }
     },
+    "node_modules/@popperjs/core": {
+      "name": "@sxzz/popperjs-es",
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.9.6",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.6.tgz",
@@ -630,6 +681,24 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.202",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
+      "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ=="
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.3.tgz",
@@ -836,6 +905,89 @@
         }
       }
     },
+    "node_modules/@vueuse/core": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
+      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
+      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/abbrev": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
@@ -902,6 +1054,18 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/assertion-error": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
@@ -911,6 +1075,11 @@
         "node": "*"
       }
     },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -923,6 +1092,14 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -932,6 +1109,17 @@
         "balanced-match": "^1.0.0"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/cac": {
       "version": "6.7.14",
       "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
@@ -971,6 +1159,32 @@
         "node": "*"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1064,6 +1278,11 @@
         "node": ">=18"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.10",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -1141,6 +1360,31 @@
         "node": ">=14"
       }
     },
+    "node_modules/element-plus": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.5.3.tgz",
+      "integrity": "sha512-wmtstxaMkD6UinIgD+45CjrhbRh4u0vt+/GgxfPeMLt5pDpIVwZFjkUaVcWqqxcxd5a80HP3XlDF74fW7wim9A==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.3.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.14.182",
+        "@types/lodash-es": "^4.17.6",
+        "@vueuse/core": "^9.1.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.3",
+        "escape-html": "^1.0.3",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lodash-unified": "^1.0.2",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -1196,6 +1440,11 @@
         "@esbuild/win32-x64": "0.19.12"
       }
     },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
     "node_modules/estree-walker": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
@@ -1228,6 +1477,17 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
@@ -1262,7 +1522,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -1315,6 +1574,17 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
@@ -1374,12 +1644,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
+      "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw=="
+    },
     "node_modules/ini": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -1389,6 +1683,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -1513,6 +1826,26 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
+    "node_modules/lodash-unified": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+      "peerDependencies": {
+        "@types/lodash-es": "*",
+        "lodash": "*",
+        "lodash-es": "*"
+      }
+    },
     "node_modules/loupe": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.7.tgz",
@@ -1542,6 +1875,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -1655,6 +1993,19 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-wheel-es": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
+    },
     "node_modules/npm-run-path": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.2.0.tgz",
@@ -1688,6 +2039,14 @@
       "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==",
       "dev": true
     },
+    "node_modules/ometa": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/ometa/-/ometa-0.2.2.tgz",
+      "integrity": "sha512-LZuoK/yjU3FvrxPjUXUlZ1bavCfBPqauA7fsNdwi+AVhRdyk2IzgP3JRnevvjzQ6fKHdUw8YISshf53FmpHrng==",
+      "engines": {
+        "node": ">= 0.2.0"
+      }
+    },
     "node_modules/onetime": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
@@ -1775,6 +2134,17 @@
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/pinia": {
       "version": "2.1.7",
       "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
@@ -1910,6 +2280,17 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
       "dev": true
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -1960,6 +2341,22 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "node_modules/sass": {
+      "version": "1.70.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.70.0.tgz",
+      "integrity": "sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -1972,6 +2369,17 @@
         "node": ">=v12.22.7"
       }
     },
+    "node_modules/scss": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/scss/-/scss-0.2.4.tgz",
+      "integrity": "sha512-4u8V87F+Q/upVhUmhPnB4C1R11xojkRkWjExL2v0CX2EXTg18VrKd+9JWoeyCp2VEMdSpJsyAvVU+rVjogh51A==",
+      "dependencies": {
+        "ometa": "0.2.2"
+      },
+      "engines": {
+        "node": ">= 0.2.0"
+      }
+    },
     "node_modules/semver": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -2208,6 +2616,17 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/tough-cookie": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",

package.json

@@ -10,7 +10,10 @@
     "test:unit": "vitest"
   },
   "dependencies": {
+    "element-plus": "^2.5.3",
     "pinia": "^2.1.7",
+    "sass": "^1.70.0",
+    "scss": "^0.2.4",
     "vue": "^3.4.15",
     "vue-router": "^4.2.5"
   },

src/App.vue

@@ -1,85 +1,13 @@
 <script setup>
 import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
+import Header from './views/header.vue';
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-      </nav>
-    </div>
-  </header>
-
-  <RouterView />
+  <Header></Header>
+  <keep-alive>
+    <router-view></router-view>
+  </keep-alive>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-  max-height: 100vh;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-nav {
-  width: 100%;
-  font-size: 12px;
-  text-align: center;
-  margin-top: 2rem;
-}
-
-nav a.router-link-exact-active {
-  color: var(--color-text);
-}
-
-nav a.router-link-exact-active:hover {
-  background-color: transparent;
-}
-
-nav a {
-  display: inline-block;
-  padding: 0 1rem;
-  border-left: 1px solid var(--color-border);
-}
-
-nav a:first-of-type {
-  border: 0;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-
-  nav {
-    text-align: left;
-    margin-left: -1rem;
-    font-size: 1rem;
-
-    padding: 1rem 0;
-    margin-top: 1rem;
-  }
-}
-</style>
+<style scoped></style>

src/assets/main.css

@@ -1,35 +1,28 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
+  /* padding: 0 20px; */
+  height: 100vh;
 }
 
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
+/* 清除浮动 */
+.clearfix:after,
+.clearfix:before {
+  content: "";
+  display: table;
 }
 
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
+.clearfix:after {
+  clear: both;
 }
 
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
+.clearfix {
+  zoom: 1;
+}
 
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
+.contentTitle{
+  margin: 20px 0;
 }
+.contentTitle:nth-of-type(1){
+  margin-top: 0px;
+}

src/components/HelloWorld.vue

@@ -1,44 +0,0 @@
-<script setup>
-defineProps({
-  msg: {
-    type: String,
-    required: true
-  }
-})
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  position: relative;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>

src/components/TheWelcome.vue

@@ -1,88 +0,0 @@
-<script setup>
-import WelcomeItem from './WelcomeItem.vue'
-import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
-</script>
-
-<template>
-  <WelcomeItem>
-    <template #icon>
-      <DocumentationIcon />
-    </template>
-    <template #heading>Documentation</template>
-
-    Vue’s
-    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
-    provides you with all information you need to get started.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <ToolingIcon />
-    </template>
-    <template #heading>Tooling</template>
-
-    This project is served and bundled with
-    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
-    recommended IDE setup is
-    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
-    you need to test your components and web pages, check out
-    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
-    <a href="https://on.cypress.io/component" target="_blank" rel="noopener"
-      >Cypress Component Testing</a
-    >.
-
-    <br />
-
-    More instructions are available in <code>README.md</code>.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <EcosystemIcon />
-    </template>
-    <template #heading>Ecosystem</template>
-
-    Get official tools and libraries for your project:
-    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
-    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
-    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
-    you need more resources, we suggest paying
-    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
-    a visit.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <CommunityIcon />
-    </template>
-    <template #heading>Community</template>
-
-    Got stuck? Ask your question on
-    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
-    Discord server, or
-    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
-      >StackOverflow</a
-    >. You should also subscribe to
-    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
-    the official
-    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
-    twitter account for latest news in the Vue world.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <SupportIcon />
-    </template>
-    <template #heading>Support Vue</template>
-
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
-  </WelcomeItem>
-</template>

src/components/WelcomeItem.vue

@@ -1,86 +0,0 @@
-<template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.item {
-  margin-top: 2rem;
-  display: flex;
-  position: relative;
-}
-
-.details {
-  flex: 1;
-  margin-left: 1rem;
-}
-
-i {
-  display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-  color: var(--color-text);
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
-  }
-}
-</style>

src/components/__tests__/HelloWorld.spec.js

@@ -1,11 +0,0 @@
-import { describe, it, expect } from 'vitest'
-
-import { mount } from '@vue/test-utils'
-import HelloWorld from '../HelloWorld.vue'
-
-describe('HelloWorld', () => {
-  it('renders properly', () => {
-    const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
-    expect(wrapper.text()).toContain('Hello Vitest')
-  })
-})

src/components/admin/adminStudent.vue

@@ -0,0 +1,143 @@
+<template>
+    <div class="adminStudent">
+        <div>
+            <el-form :inline="true" :model="formInline" class="demo-form-inline">
+                <el-form-item label="年级">
+                    <el-input v-model="formInline.user" placeholder="请输入年级" clearable />
+                </el-form-item>
+                <el-form-item label="状态">
+                    <el-select v-model="formInline.region" placeholder="请选择状态" clearable>
+                        <el-option label="开" value="on" />
+                        <el-option label="关" value="off" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="onSubmit">查询</el-button>
+                    <el-button type="primary" @click="onSubmit">重置</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div>
+            <div>
+                <el-button>新建</el-button>
+                <el-button>批量操作</el-button>
+                <el-button>更多操作</el-button>
+                <span>
+                    已选{{ selectNum }}
+                </span>
+            </div>
+            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"
+                @selection-change="handleSelectionChange">
+                <el-table-column type="selection" width="55" />
+                <el-table-column label="班级" width="120" property="calss">
+                </el-table-column>
+                <el-table-column property="year" label="入学年份" width="120" />
+                <el-table-column property="peopleNum" label="人数" />
+                <el-table-column property="status" label="状态" />
+                <el-table-column property="updateDate" label="更新时间" />
+                <el-table-column property="option" label="操作">
+                    <template #default="scope">
+                        <el-button @click="Details(scope.row)">详情</el-button>
+                        <el-button @click="deleteList(scope.row)">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-config-provider :locale="zhCn">
+                <el-pagination class="clearfix" v-model:current-page="currentPage4" v-model:page-size="pageSize"
+                    :page-sizes="[10, 50, 100, 400]" :small="small" :disabled="disabled" :background="background"
+                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange" />
+            </el-config-provider>
+
+        </div>
+    </div>
+</template>
+<script setup>
+import { ref, reactive } from 'vue';
+import zhCn from "element-plus/es/locale/lang/zh-cn";
+const formInline = reactive({
+    user: '',
+    region: '',
+    date: '',
+})
+const tableData = [
+    {
+        id: 0,
+        class: "9.2",
+        year: "2024",
+        peopleNum: 30,
+        status: "异常",
+        updateDate: "2020-02-03",
+    },
+    {
+        id: 1,
+        class: "9.2",
+        year: "2024",
+        peopleNum: 30,
+        status: "异常",
+        updateDate: "2020-02-03",
+    },
+    {
+        id: 2,
+        class: "9.2",
+        year: "2024",
+        peopleNum: 30,
+        status: "异常",
+        updateDate: "2020-02-03",
+    },
+    {
+        id: 3,
+        class: "9.2",
+        year: "2024",
+        peopleNum: 30,
+        status: "异常",
+        updateDate: "2020-02-03",
+    },
+    {
+        id: 4,
+        class: "9.2",
+        year: "2024",
+        peopleNum: 30,
+        status: "异常",
+        updateDate: "2020-02-03",
+    }
+]
+const selectNum = ref(0)
+const total = ref(5)
+const currentPage4 = ref(4)
+const pageSize = ref(10)
+
+
+const onSubmit = e => {
+    console.log(e)
+}
+
+const handleSelectionChange = (val) => {
+    console.log(val)
+    selectNum.value = val.length
+}
+// 详情
+const Details = data => {
+    console.log(data)
+}
+// 删除
+const deleteList = data => {
+    console.log(data)
+}
+const handleSizeChange = (val) => {
+    console.log(`${val} items per page`)
+}
+const handleCurrentChange = (val) => {
+    console.log(`current page: ${val}`)
+}
+</script>
+
+<style lang="scss" scoped>
+.adminStudent {
+    padding: 0 20px;
+    .el-pagination {
+        float: right;
+        margin-top: 15px;
+    }
+}
+</style>

src/components/header/headerLeft.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="header_left">
+        <img :src="LOGO" alt="">
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue"
+import LOGO from '@/assets/icon/Group 64.jpg'
+import LOGOTEXT from '@/assets/icon/深圳市青少年人工智能.png'
+
+</script>
+<style scoped lang="scss">
+.header_left {
+    display: flex;
+    padding: 13px 5px;
+
+    img{
+        height: 30px;
+        // margin-right: 10px;
+    }
+}
+</style>

src/components/header/headerRight.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="header_right">
+        <div>
+            <img src="" alt="">
+            <span>管理后台</span>
+        </div>
+        <div>
+            <img src="" alt="">
+            <span>用户名称</span>
+        </div>
+
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue"
+import Logo from '@/assets/logo.svg'
+
+</script>
+<style scoped lang="scss">
+.header_right {
+    display: flex;
+
+    div {
+        img {
+
+            vertical-align: middle;
+        }
+
+        span {
+            padding: 10px;
+            line-height: 60px;
+
+        }
+    }
+}
+</style>

src/components/icons/IconCommunity.vue

@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
-    />
-  </svg>
-</template>

src/components/icons/IconDocumentation.vue

@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
-    <path
-      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
-    />
-  </svg>
-</template>

src/components/icons/IconEcosystem.vue

@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
-    <path
-      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
-    />
-  </svg>
-</template>

src/components/icons/IconSupport.vue

@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
-    />
-  </svg>
-</template>

src/components/icons/IconTooling.vue

@@ -1,19 +0,0 @@
-<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    aria-hidden="true"
-    role="img"
-    class="iconify iconify--mdi"
-    width="24"
-    height="24"
-    preserveAspectRatio="xMidYMid meet"
-    viewBox="0 0 24 24"
-  >
-    <path
-      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
-      fill="currentColor"
-    ></path>
-  </svg>
-</template>

src/components/main/Practice.vue

@@ -0,0 +1,88 @@
+<template>
+  <h2 class="contentTitle">实践中心</h2>
+  <el-row :gutter="20">
+    <el-col :span="6">
+      <div class="grid-content">
+        <router-link to="/iframe/实践中心/图形化">
+          <img :src="GraphicsImg" alt="">
+          <div>
+            <span>图形化</span>
+            <p>通过组合图形化程序进行人工智能硬件控制程序编写。</p>
+          </div>
+        </router-link>
+
+      </div>
+    </el-col>
+    <el-col :span="6">
+      <div class="grid-content">
+        <router-link to="/iframe/实践中心/Python">
+          <img :src="pythonImg" alt="">
+          <div>
+            <span>Python</span>
+            <p>通过编写Python语言进行人工智能硬件控制程序编写。</p>
+          </div>
+        </router-link>
+
+      </div>
+    </el-col>
+  </el-row>
+</template>
+<script setup>
+import { ref } from 'vue';
+import GraphicsImg from '@/assets/icon/图形化icon-1.png'
+import pythonImg from '@/assets/icon/Frame.png'
+</script>
+<style lang="scss" scoped>
+.el-row {
+  margin-bottom: 20px;
+
+  .el-col {
+    border-radius: 4px;
+
+    .grid-content {
+      border-radius: 4px;
+      min-height: 36px;
+      background: #fff;
+      border-radius: 10px;
+
+      a {
+        text-decoration: none;
+        display: block;
+        position: relative;
+        padding: 16px;
+
+        img {
+          width: 56px;
+        }
+
+        div {
+          position: absolute;
+          left: 80px;
+          top: 16px;
+
+          span {
+            color: rgba(0, 0, 0, 0.9);
+            font-size: 14px;
+            margin-bottom: 10px;
+            font-weight: 400;
+          }
+
+          p {
+            color: rgba(0, 0, 0, 0.4);
+            font-size: 12px;
+            padding-right: 20px;
+          }
+        }
+
+
+      }
+    }
+  }
+
+
+}
+
+.el-row:last-child {
+  margin-bottom: 0;
+}
+</style>

src/components/main/banner.vue

@@ -0,0 +1,29 @@
+<template>
+    <el-carousel indicator-position="outside">
+        <el-carousel-item v-for="item in 4" :key="item">
+            <h3 text="2xl" justify="center">{{ item }}</h3>
+        </el-carousel-item>
+    </el-carousel>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+</script>
+
+<style lang="scss" scoped>
+.el-carousel__item h3 {
+    display: flex;
+    color: #475669;
+    opacity: 0.75;
+    line-height: 300px;
+    margin: 0;
+}
+
+.el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n + 1) {
+    background-color: #d3dce6;
+}
+</style>

src/components/main/courseSelect.vue

@@ -0,0 +1,72 @@
+<template>
+  <h2 class="contentTitle">课程列表</h2>
+  <div class="course_select">
+    <span class="grandTitle">年级：</span>
+    <el-button :class="selectGrand ==0?'el_button_active':''" @click="clickGrand(0)">三年级</el-button>
+    <el-button :class="selectGrand ==1?'el_button_active':''" @click="clickGrand(1)">四年级</el-button>
+    <el-button :class="selectGrand ==2?'el_button_active':''" @click="clickGrand(2)">五年级</el-button>
+    <el-button :class="selectGrand ==3?'el_button_active':''" @click="clickGrand(3)">六年级</el-button>
+    <el-button :class="selectGrand ==4?'el_button_active':''" @click="clickGrand(4)">七年级</el-button>
+    <el-button :class="selectGrand ==5?'el_button_active':''" @click="clickGrand(5)">八年级</el-button>
+  </div>
+  <el-row :gutter="20">
+    <el-col :span="6">
+      <div class="grid-content ep-bg-purple"></div>
+    </el-col>
+    <el-col :span="6">
+      <div class="grid-content ep-bg-purple"></div>
+    </el-col>
+    <el-col :span="6">
+      <div class="grid-content ep-bg-purple"></div>
+    </el-col>
+    <el-col :span="6">
+      <div class="grid-content ep-bg-purple"></div>
+    </el-col>
+  </el-row>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const selectGrand = ref(0)
+const clickGrand = val =>{
+  selectGrand.value = val
+}
+</script>
+<style lang="scss" scoped>
+.course_select{
+  .grandTitle{
+    display: inline-block;
+    line-height: 22px;
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 15px;
+  }
+  .el-button{
+    // background:  rgba(54, 129, 252, 1);
+    background: rgba(224, 234, 251, 1);
+    color: rgba(54, 129, 252, 1);
+  }
+  .el_button_active{
+    background:  rgba(54, 129, 252, 1);
+    color: #fff;
+  }
+}
+.el-row {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.el-row:last-child {
+  margin-bottom: 0;
+}
+
+.el-col {
+  border-radius: 4px;
+}
+
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+  background: #000;
+  height: 300px;
+}
+</style>

src/components/main/other.vue

@@ -0,0 +1,99 @@
+<template>
+  <h2 class="contentTitle">其他课程资源</h2>
+  <el-row :gutter="20">
+    <el-col :span="6">
+      <div class="grid-content">
+        <router-link to="/iframe/其他课程资源/课程管理">
+          <img :src="Img1" alt="">
+          <div>
+            <span>课程管理</span>
+            <p>教师自定义创建个人人工智能课程教学资源。</p>
+          </div>
+        </router-link>
+
+      </div>
+    </el-col>
+    <el-col :span="6">
+      <div class="grid-content">
+        <router-link to="/iframe/其他课程资源/课程中心">
+          <img :src="Img2" alt="">
+          <div>
+            <span>课程中心</span>
+            <p>教师使用预置或自定义补充资源开展授课。</p>
+          </div>
+        </router-link>
+      </div>
+    </el-col>
+    <el-col :span="6">
+      <div class="grid-content">
+        <router-link to="/iframe/其他课程资源/学生评价">
+          <img :src="Img3" alt="">
+          <div>
+            <span>学生评价</span>
+            <p>教师基于平台数据采集开展对应目标的学生评价。</p>
+          </div>
+        </router-link>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+<script setup>
+import { ref } from 'vue';
+import Img1 from '@/assets/icon/课程管理.png'
+import Img2 from '@/assets/icon/课程中心.png'
+import Img3 from '@/assets/icon/学生评价icon.png'
+</script>
+<style lang="scss" scoped>
+.el-row {
+  margin-bottom: 20px;
+
+  .el-col {
+    border-radius: 4px;
+
+    .grid-content {
+      border-radius: 4px;
+      min-height: 36px;
+      background: #fff;
+      border-radius: 10px;
+
+      a {
+        text-decoration: none;
+        display: block;
+        position: relative;
+        padding: 16px;
+
+        img {
+          width: 56px;
+        }
+
+        div {
+          position: absolute;
+          left: 80px;
+          top: 16px;
+
+          span {
+            color: rgba(0, 0, 0, 0.9);
+            font-size: 14px;
+            margin-bottom: 10px;
+            font-weight: 400;
+          }
+
+          p {
+            color: rgba(0, 0, 0, 0.4);
+            font-size: 12px;
+            padding-right: 20px;
+          }
+        }
+
+
+      }
+    }
+  }
+
+
+}
+
+.el-row:last-child {
+  margin-bottom: 0;
+}
+</style>

src/components/main/resource.vue

@@ -0,0 +1,99 @@
+<template>
+  <h2 class="contentTitle">资源中心</h2>
+  <el-row :gutter="20">
+    <el-col :span="6">
+      <div class="grid-content">
+        <router-link to="/iframe/资源中心/情绪识别">
+          <img :src="emotionImg" alt="">
+          <div>
+            <span>情绪识别</span>
+            <p>以人脸面部检测为基础，对面部情绪进行识别与分类。</p>
+          </div>
+        </router-link>
+
+      </div>
+    </el-col>
+    <el-col :span="6">
+      <div class="grid-content">
+        <router-link to="/iframe/资源中心/物体识别">
+          <img :src="objectImg" alt="">
+          <div>
+            <span>物体识别</span>
+            <p>以预置物体识别模型为基础，实现图片或视频中的物体识别。</p>
+          </div>
+        </router-link>
+      </div>
+    </el-col>
+    <el-col :span="6">
+      <div class="grid-content">
+        <router-link to="/iframe/资源中心/语音识别">
+          <img :src="speechImg" alt="">
+          <div>
+            <span>语音识别</span>
+            <p>实现普通话、英语、粤语三种录制语言的自动语音识别。</p>
+          </div>
+        </router-link>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+<script setup>
+import { ref } from 'vue';
+import emotionImg from '@/assets/icon/情绪识别icon.png'
+import objectImg from '@/assets/icon/物体识别icon.png'
+import speechImg from '@/assets/icon/语音识别icon.png'
+</script>
+<style lang="scss" scoped>
+.el-row {
+  margin-bottom: 20px;
+
+  .el-col {
+    border-radius: 4px;
+
+    .grid-content {
+      border-radius: 4px;
+      min-height: 36px;
+      background: #fff;
+      border-radius: 10px;
+
+      a {
+        text-decoration: none;
+        display: block;
+        position: relative;
+        padding: 16px;
+
+        img {
+          width: 56px;
+        }
+
+        div {
+          position: absolute;
+          left: 80px;
+          top: 16px;
+
+          span {
+            color: rgba(0, 0, 0, 0.9);
+            font-size: 14px;
+            margin-bottom: 10px;
+            font-weight: 400;
+          }
+
+          p {
+            color: rgba(0, 0, 0, 0.4);
+            font-size: 12px;
+            padding-right: 20px;
+          }
+        }
+
+
+      }
+    }
+  }
+
+
+}
+
+.el-row:last-child {
+  margin-bottom: 0;
+}
+</style>

src/main.js

@@ -1,7 +1,8 @@
 import './assets/main.css'
-
+import 'element-plus/dist/index.css'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
 
 import App from './App.vue'
 import router from './router'
@@ -10,5 +11,6 @@ const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
+app.use(ElementPlus)
 
 app.mount('#app')

src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import HomeView from '../views/main.vue'
+import iframeView from '@/views/iframeRoute.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -10,12 +11,23 @@ const router = createRouter({
       component: HomeView
     },
     {
-      path: '/about',
-      name: 'about',
+      path: '/details/:title',
+      name: 'Details',
+      component: () => import('../views/Details.vue')
+    },
+    {
+      path: '/admin',
+      name: 'admin',
       // 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('../views/AboutView.vue')
+      component: () => import('../views/admin.vue')
+    },
+    {
+      path: "/iframe/:title/:id",
+      name: "iframe",
+      meta: { title: "动态路由" },
+      component: iframeView
     }
   ]
 })

src/views/AboutView.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>

src/views/Details.vue

@@ -0,0 +1,36 @@
+<template>
+    <el-page-header>
+        <template #breadcrumb>
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item :to="{ path: '/' }">
+                    首页
+                </el-breadcrumb-item>
+                <el-breadcrumb-item>{{ params.title }}</el-breadcrumb-item>
+            </el-breadcrumb>
+        </template>
+        <div class="iframDiv">
+            <CourseSelect v-if="detailsTitle == '课程列表'"></CourseSelect>
+            <resource v-else-if="detailsTitle == '资源中心'"></resource>
+            <Practice v-else-if="detailsTitle == '实践中心'"></Practice>
+            <other v-else-if="detailsTitle == '其他课程资源'"></other>
+        </div>
+    </el-page-header>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import CourseSelect from '@/components/main/courseSelect.vue'
+import resource from '@/components/main/resource.vue';
+import Practice from '@/components/main/Practice.vue';
+import other from '@/components/main/other.vue';
+import { useRoute } from 'vue-router';  //1.先在需要跳转的页面引入useRouter
+const { query, params } = useRoute()
+console.log(query, params)
+
+const detailsTitle = ref('')
+onMounted(()=>{
+    detailsTitle.value = params.title
+})
+</script>
+
+<style scoped lang="scss"></style>

src/views/HomeView.vue

@@ -1,9 +0,0 @@
-<script setup>
-import TheWelcome from '../components/TheWelcome.vue'
-</script>
-
-<template>
-  <main>
-    <TheWelcome />
-  </main>
-</template>

src/views/admin.vue

@@ -0,0 +1,35 @@
+<template>
+    <el-row>
+        <el-col :span="4">
+            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
+                <el-sub-menu index="1">
+                    <template #title>
+                        <span>学生管理</span>
+                    </template>
+                    <el-menu-item index="1-1" @click="menuSelect(1)">账号管理</el-menu-item>
+                    <el-menu-item index="1-2" @click="menuSelect(2)">学生评价</el-menu-item>
+                </el-sub-menu>
+                <el-sub-menu index="2">
+                    <template #title>
+                        <span>班级管理</span>
+                    </template>
+                    <el-menu-item index="2-1" @click="menuSelect(3)">班级管理</el-menu-item>
+                    <el-menu-item index="2-2" @click="menuSelect(4)">学生评价</el-menu-item>
+                </el-sub-menu>
+            </el-menu>
+        </el-col>
+        <el-col :span="20">
+            <adminStudent></adminStudent>
+        </el-col>
+    </el-row>
+</template>
+<script setup>
+import { ref } from 'vue';
+import adminStudent from '@/components/admin/adminStudent.vue'
+
+const menuSelect=e=>{
+    console.log(e)
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/header.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="header">
+    <headerLeft></headerLeft>
+    <headerRight></headerRight>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+import headerLeft from '@/components/header/headerLeft.vue';
+import headerRight from '@/components/header/headerRight.vue';
+</script>
+
+<style scoped>
+.header{
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 60px;
+}
+
+</style>
+

src/views/iframeRoute.vue

@@ -0,0 +1,83 @@
+<template>
+    <el-page-header>
+        <template #breadcrumb>
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item :to="{ path: '/' }">
+                    首页
+                </el-breadcrumb-item>
+                <el-breadcrumb-item :to="{ path: `/details/${params.title}` }">{{ params.title }}</el-breadcrumb-item>
+                <el-breadcrumb-item>{{ params.id }}</el-breadcrumb-item>
+            </el-breadcrumb>
+        </template>
+        <div class="iframDiv">
+            <iframe :src="iframeSrc" frameborder="0"></iframe>
+        </div>
+    </el-page-header>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';  //1.先在需要跳转的页面引入useRouter
+import main from './main.vue';
+const { query, params } = useRoute()
+
+const iframeList = [
+    {
+        label: "情绪识别",
+        src: "//ai-demos.cocorobo.cn/labs/emotion-recognition/"
+    },{
+        label: "物体识别",
+        src: "//ai-demos.cocorobo.cn/object-detection/index.html"
+    },{
+        label: "语音识别",
+        src: "//ai-demos.cocorobo.cn/labs/speech-recognition/"
+    },{
+        label: "图形化",
+        src: "//pi.cocorobo.cn/?lang=zh-hans"
+    },{
+        label: "Python",
+        src: "//pi.cocorobo.cn/python/?lang=zh-hans"
+    },{
+        label: "课程管理",
+        src: "//ai-demos.cocorobo.cn/labs/emotion-recognition/"
+    },{
+        label: "课程中心",
+        src: "//ai-demos.cocorobo.cn/labs/emotion-recognition/"
+    },{
+        label: "学生评价",
+        src: "//ai-demos.cocorobo.cn/labs/emotion-recognition/"
+    },
+]
+const iframeSrc = ref('')
+onMounted(()=>{
+    iframeSrc.value = iframeList.find(x=>x.label == params.id).src
+})
+</script>
+
+<style lang="scss">
+.el-page-header {
+    padding: 20px 10%;
+    background: #F0F2F5;
+    height: 100%;
+
+    .el-page-header__header {
+        display: none;
+    }
+
+    .el-page-header__main {
+        width: 100%;
+        height: 100%;
+
+        .iframDiv {
+            width: 100%;
+            height: 100%;
+
+            iframe {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+    }
+}
+</style>

src/views/main.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="main">
+        <!-- <BannerVue></BannerVue> -->
+        <CourseSelect></CourseSelect>
+        <resource></resource>
+        <Practice></Practice>
+        <other></other>
+    </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+import BannerVue from '@/components/main/banner.vue'
+import CourseSelect from '@/components/main/courseSelect.vue'
+import resource from '@/components/main/resource.vue';
+import Practice from '@/components/main/Practice.vue';
+import other from '@/components/main/other.vue';
+</script>
+<style lang="scss" scoped>
+.main{
+    background: #F0F2F5;
+    padding: 20px 10%;
+}
+
+</style>