瀏覽代碼

公共头部

luohailiang 2 年之前
父節點
當前提交
d7d7b8ddf8
共有 9 個文件被更改,包括 128 次插入83 次删除
  1. 二進制
      favicon.ico
  2. 2 2
      index.html
  3. 3 2
      package.json
  4. 36 28
      pnpm-lock.yaml
  5. 二進制
      public/images/logo.png
  6. 二進制
      public/images/title.png
  7. 二進制
      public/images/triangle.png
  8. 81 51
      src/components/NavHeader/index.vue
  9. 6 0
      src/styles/main.css

二進制
favicon.ico


+ 2 - 2
index.html

@@ -3,8 +3,8 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
-  <title>Vitesse Lite</title>
+  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+  <title>精准教学</title>
   <meta name="description" content="Opinionated Vite Starter Template">
 </head>
 <body class="font-sans dark:text-white dark:bg-hex-121212">

+ 3 - 2
package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@vueuse/core": "^9.13.0",
     "element-plus": "^2.3.2",
+    "sass": "^1.62.0",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"
   },
@@ -27,6 +28,7 @@
     "@vue-macros/volar": "^0.9.4",
     "@vue/test-utils": "^2.3.2",
     "eslint": "^8.37.0",
+    "husky": "^8.0.0",
     "jsdom": "^21.1.1",
     "lint-staged": "^13.2.0",
     "pnpm": "^8.1.0",
@@ -40,8 +42,7 @@
     "vite": "^4.2.1",
     "vite-plugin-pages": "^0.29.0",
     "vitest": "^0.29.8",
-    "vue-tsc": "^1.2.0",
-    "husky": "^8.0.0"
+    "vue-tsc": "^1.2.0"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"

+ 36 - 28
pnpm-lock.yaml

@@ -11,9 +11,11 @@ specifiers:
   '@vueuse/core': ^9.13.0
   element-plus: ^2.3.2
   eslint: ^8.37.0
+  husky: ^8.0.0
   jsdom: ^21.1.1
   lint-staged: ^13.2.0
   pnpm: ^8.1.0
+  sass: ^1.62.0
   simple-git-hooks: ^2.8.1
   taze: ^0.9.1
   typescript: ^5.0.2
@@ -31,6 +33,7 @@ specifiers:
 dependencies:
   '@vueuse/core': 9.13.0_vue@3.2.47
   element-plus: 2.3.3_vue@3.2.47
+  sass: 1.62.0
   vue: 3.2.47
   vue-router: 4.1.6_vue@3.2.47
 
@@ -43,6 +46,7 @@ devDependencies:
   '@vue-macros/volar': 0.9.5_vue-tsc@1.2.0+vue@3.2.47
   '@vue/test-utils': 2.3.2_vue@3.2.47
   eslint: 8.38.0
+  husky: 8.0.3
   jsdom: 21.1.1
   lint-staged: 13.2.1
   pnpm: 8.2.0
@@ -53,9 +57,9 @@ devDependencies:
   unplugin-auto-import: 0.15.2_@vueuse+core@9.13.0
   unplugin-vue-components: 0.24.1_vue@3.2.47
   unplugin-vue-macros: 1.11.2_aeurc5btel4k37vmechrre3xm4
-  vite: 4.2.1_@types+node@18.15.11
+  vite: 4.2.1_g772r5w5ng27elj5pzc7q7vnhy
   vite-plugin-pages: 0.29.0_vite@4.2.1
-  vitest: 0.29.8_jsdom@21.1.1
+  vitest: 0.29.8_jsdom@21.1.1+sass@1.62.0
   vue-tsc: 1.2.0_typescript@5.0.4
 
 packages:
@@ -1094,7 +1098,7 @@ packages:
       chokidar: 3.5.3
       fast-glob: 3.2.12
       magic-string: 0.30.0
-      vite: 4.2.1_@types+node@18.15.11
+      vite: 4.2.1_g772r5w5ng27elj5pzc7q7vnhy
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -1106,7 +1110,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.2.1_@types+node@18.15.11
+      vite: 4.2.1_g772r5w5ng27elj5pzc7q7vnhy
       vue: 3.2.47
     dev: true
 
@@ -1380,7 +1384,7 @@ packages:
         optional: true
     dependencies:
       sirv: 2.0.2
-      vite: 4.2.1_@types+node@18.15.11
+      vite: 4.2.1_g772r5w5ng27elj5pzc7q7vnhy
       vue: 3.2.47
     dev: true
 
@@ -1813,7 +1817,6 @@ packages:
     dependencies:
       normalize-path: 3.0.0
       picomatch: 2.3.1
-    dev: true
 
   /aproba/2.0.0:
     resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==}
@@ -1911,7 +1914,6 @@ packages:
   /binary-extensions/2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
-    dev: true
 
   /boolbase/1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
@@ -1935,7 +1937,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       fill-range: 7.0.1
-    dev: true
 
   /builtin-modules/3.3.0:
     resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
@@ -2055,7 +2056,6 @@ packages:
       readdirp: 3.6.0
     optionalDependencies:
       fsevents: 2.3.2
-    dev: true
 
   /chownr/2.0.0:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
@@ -3099,7 +3099,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       to-regex-range: 5.0.1
-    dev: true
 
   /find-up/4.1.0:
     resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
@@ -3160,7 +3159,6 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /function-bind/1.1.1:
@@ -3230,7 +3228,6 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       is-glob: 4.0.3
-    dev: true
 
   /glob-parent/6.0.2:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
@@ -3439,6 +3436,12 @@ packages:
       ms: 2.1.3
     dev: true
 
+  /husky/8.0.3:
+    resolution: {integrity: sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
+
   /iconv-lite/0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
@@ -3458,6 +3461,9 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
+  /immutable/4.3.0:
+    resolution: {integrity: sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==}
+
   /import-fresh/3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -3555,7 +3561,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       binary-extensions: 2.2.0
-    dev: true
 
   /is-boolean-object/1.1.2:
     resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
@@ -3597,7 +3602,6 @@ packages:
   /is-extglob/2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /is-fullwidth-code-point/3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
@@ -3614,7 +3618,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       is-extglob: 2.1.1
-    dev: true
 
   /is-hexadecimal/1.0.4:
     resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
@@ -3643,7 +3646,6 @@ packages:
   /is-number/7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
-    dev: true
 
   /is-path-inside/3.0.3:
     resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
@@ -4364,7 +4366,6 @@ packages:
   /normalize-path/3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /normalize-wheel-es/1.2.0:
     resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
@@ -4745,7 +4746,6 @@ packages:
   /picomatch/2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
-    dev: true
 
   /pidtree/0.6.0:
     resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
@@ -4930,7 +4930,6 @@ packages:
     engines: {node: '>=8.10.0'}
     dependencies:
       picomatch: 2.3.1
-    dev: true
 
   /regexp-tree/0.1.24:
     resolution: {integrity: sha512-s2aEVuLhvnVJW6s/iPgEGK6R+/xngd2jNQ+xy4bXNDKxZKJH6jpPHY6kVeVv1IeLCHgswRj+Kl3ELaDjG6V1iw==}
@@ -5056,6 +5055,15 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: true
 
+  /sass/1.62.0:
+    resolution: {integrity: sha512-Q4USplo4pLYgCi+XlipZCWUQz5pkg/ruSSgJ0WRDSb/+3z9tXUOkQ7QPYn4XrhZKYAK4HlpaQecRwKLJX6+DBg==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.3.0
+      source-map-js: 1.0.2
+
   /saxes/6.0.0:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
@@ -5435,7 +5443,6 @@ packages:
     engines: {node: '>=8.0'}
     dependencies:
       is-number: 7.0.0
-    dev: true
 
   /totalist/3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
@@ -5681,7 +5688,7 @@ packages:
     dependencies:
       '@antfu/utils': 0.7.2
       unplugin: 1.3.1
-      vite: 4.2.1_@types+node@18.15.11
+      vite: 4.2.1_g772r5w5ng27elj5pzc7q7vnhy
     dev: true
 
   /unplugin-vue-components/0.24.1_vue@3.2.47:
@@ -5800,7 +5807,7 @@ packages:
       builtins: 5.0.1
     dev: true
 
-  /vite-node/0.29.8_@types+node@18.15.11:
+  /vite-node/0.29.8_g772r5w5ng27elj5pzc7q7vnhy:
     resolution: {integrity: sha512-b6OtCXfk65L6SElVM20q5G546yu10/kNrhg08afEoWlFRJXFq9/6glsvSVY+aI6YeC1tu2TtAqI2jHEQmOmsFw==}
     engines: {node: '>=v14.16.0'}
     hasBin: true
@@ -5810,7 +5817,7 @@ packages:
       mlly: 1.2.0
       pathe: 1.1.0
       picocolors: 1.0.0
-      vite: 4.2.1_@types+node@18.15.11
+      vite: 4.2.1_g772r5w5ng27elj5pzc7q7vnhy
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -5838,13 +5845,13 @@ packages:
       json5: 2.2.3
       local-pkg: 0.4.3
       picocolors: 1.0.0
-      vite: 4.2.1_@types+node@18.15.11
+      vite: 4.2.1_g772r5w5ng27elj5pzc7q7vnhy
       yaml: 2.2.1
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite/4.2.1_@types+node@18.15.11:
+  /vite/4.2.1_g772r5w5ng27elj5pzc7q7vnhy:
     resolution: {integrity: sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -5874,11 +5881,12 @@ packages:
       postcss: 8.4.21
       resolve: 1.22.2
       rollup: 3.20.2
+      sass: 1.62.0
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
 
-  /vitest/0.29.8_jsdom@21.1.1:
+  /vitest/0.29.8_jsdom@21.1.1+sass@1.62.0:
     resolution: {integrity: sha512-JIAVi2GK5cvA6awGpH0HvH/gEG9PZ0a/WoxdiV3PmqK+3CjQMf8c+J/Vhv4mdZ2nRyXFw66sAg6qz7VNkaHfDQ==}
     engines: {node: '>=v14.16.0'}
     hasBin: true
@@ -5931,8 +5939,8 @@ packages:
       tinybench: 2.4.0
       tinypool: 0.4.0
       tinyspy: 1.1.1
-      vite: 4.2.1_@types+node@18.15.11
-      vite-node: 0.29.8_@types+node@18.15.11
+      vite: 4.2.1_g772r5w5ng27elj5pzc7q7vnhy
+      vite-node: 0.29.8_g772r5w5ng27elj5pzc7q7vnhy
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less

二進制
public/images/logo.png


二進制
public/images/title.png


二進制
public/images/triangle.png


+ 81 - 51
src/components/NavHeader/index.vue

@@ -3,55 +3,85 @@ const router = useRouter()
 </script>
 
 <template>
-  <el-menu
-    :default-active="activeIndex"
-    class="el-menu-demo"
-    mode="horizontal"
-    :ellipsis="false"
-    router
-    background-color="#0148e5"
-    text-color="#fff"
-    active-text-color="#ffd04b"
-  >
-    <el-menu-item index="0">
-      精准教学1
-    </el-menu-item>
-    <div class="flex-grow" />
-    <el-menu-item index="1">
-      亲亲云学堂
-    </el-menu-item>
-    <el-menu-item index="2">
-      首页
-    </el-menu-item>
-    <el-sub-menu index="3">
-      <template #title>
-        试题库
-      </template>
-      <el-menu-item index="3-1">
-        item one
-      </el-menu-item>
-    </el-sub-menu>
-    <el-sub-menu index="4">
-      <template #title>
-        考试阅卷
-      </template>
-      <el-menu-item index="4-1">
-        item one
-      </el-menu-item>
-    </el-sub-menu>
-    <el-menu-item index="5">
-      试卷库
-    </el-menu-item>
-    <el-menu-item index="6">
-      命题要求
-    </el-menu-item>
-    <el-sub-menu index="7">
-      <template #title>
-        <el-avatar /> <span ml-2>演示老师</span>
-      </template>
-      <el-menu-item index="7-1">
-        item one
-      </el-menu-item>
-    </el-sub-menu>
-  </el-menu>
+  <div class="main-header">
+    <div class="header-nav">
+       <div class="width-1200px m-a flex justify-between items-center">
+         <a href="https://yzy.bozedu.net/webapps/page/home.html">
+           <img src="/images/logo.png" class="logo" alt="">
+           <img src="/images/title.png" class="logo-title" alt="">
+         </a>
+         <div class="flex">
+           <a href="#" class="nav-item">亲亲云学堂</a>
+           <a href="#" class="nav-item">精准教学首页</a>
+           <div class="nav-item">
+             <span class="display-inline-block v-mid">试题库</span>
+             <img src="/images/triangle.png" class="triangle" alt="">
+           </div>
+           <div class="nav-item">
+             <span class="display-inline-block v-mid">考试阅卷</span>
+             <img src="/images/triangle.png" class="triangle" alt="">
+           </div>
+           <div class="nav-item">
+             试卷库
+           </div>
+           <div class="nav-item">
+             <span class="display-inline-block v-mid">VIP题库</span>
+             <img src="/images/triangle.png" class="triangle" alt="">
+           </div>
+           <div class="nav-item">
+             命题要求
+           </div>
+         </div>
+       </div>
+    </div>
+  </div>
+
 </template>
+<style lang="scss">
+.main-header{
+  position: relative;
+  width: 100%;
+  height: 50px;
+}
+.header-nav{
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 999;
+  width: 100%;
+  height: 50px;
+  background: #0048e5;
+}
+.logo{
+  width: 21px;
+  height: 26.5px;
+  display: inline-block;
+}
+.logo-title{
+  width: 81px;
+  height: 16.5px;
+  display: inline-block;
+  margin-left: 10px
+}
+.nav-item{
+  width: 110px;
+  height: 50px;
+  font-size: 16px;
+  line-height: 50px;
+  color: #fff;
+  text-align: center;
+  cursor: pointer;
+  &:hover,
+  &.selected{
+    background: rgba(0,0,0,.2);
+  }
+  .triangle {
+    width: 9px;
+    height: 5.5px;
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    left: 10px;
+  }
+}
+</style>

+ 6 - 0
src/styles/main.css

@@ -9,3 +9,9 @@ body,
 html.dark {
   background: #121212;
 }
+.bg-0048e5{
+  background: #0048e5;
+}
+.width-1200px{
+  width: 1200px;
+}