学校管理页面开发

src/App.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>

src/assets/icon/close.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.84375 4.375H18.1562C18.5877 4.375 18.9375 4.02521 18.9375 3.59375C18.9375 3.16227 18.5877 2.8125 18.1562 2.8125H2.84375C2.41227 2.8125 2.0625 3.16227 2.0625 3.59375C2.0625 4.02521 2.41227 4.375 2.84375 4.375ZM18.1562 15.625H2.84375C2.41227 15.625 2.0625 15.9748 2.0625 16.4062C2.0625 16.8377 2.41227 17.1875 2.84375 17.1875H18.1562C18.5877 17.1875 18.9375 16.8377 18.9375 16.4062C18.9375 15.9748 18.5877 15.625 18.1562 15.625ZM18.1562 9.21875H9.09375C8.66227 9.21875 8.3125 9.56852 8.3125 10C8.3125 10.4315 8.66227 10.7812 9.09375 10.7812H18.1562C18.5877 10.7812 18.9375 10.4315 18.9375 10C18.9375 9.56852 18.5877 9.21875 18.1562 9.21875ZM6.52117 6.35396C6.21607 6.04887 5.72143 6.04887 5.41633 6.35396L2.32273 9.44758C2.01764 9.75268 2.01764 10.2473 2.32273 10.5524L5.41633 13.646C5.72143 13.9511 6.21607 13.9511 6.52117 13.646C6.82627 13.3409 6.82627 12.8463 6.52117 12.5412L3.98002 10L6.52117 7.45883C6.82627 7.15373 6.82627 6.65906 6.52117 6.35396Z" fill="#666666"/>
+</svg>

src/assets/icon/home_hover.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.60718 2.33667C9.4851 1.64684 10.7549 1.69676 11.5769 2.48706L17.9753 8.6355L18.0535 8.72339C18.2201 8.94004 18.2624 9.23186 18.1599 9.49097V9.49194C18.0404 9.78815 17.7522 9.9812 17.4333 9.9812H16.0271V15.8787C16.0271 17.1312 15.0131 18.1453 13.7605 18.1453H6.23315C4.98059 18.1453 3.96655 17.1312 3.96655 15.8787V9.9812H2.56812C2.24734 9.9811 1.96098 9.78811 1.84155 9.49194C1.72224 9.19572 1.79458 8.8559 2.02515 8.6355L8.43726 2.48511L8.60718 2.33667ZM10.7478 3.34937C10.3524 2.96902 9.73311 2.94851 9.31323 3.30249L9.31226 3.30151L9.26147 3.34644L9.26245 3.34741L3.58862 8.78784H4.11792C4.69206 8.78802 5.15783 9.25373 5.15796 9.82788V15.8787C5.15796 16.4472 5.60188 16.916 6.1687 16.95H6.16772L6.23218 16.9519H13.7585C14.327 16.9519 14.7958 16.5079 14.8298 15.9412L14.8318 15.8787V9.82788C14.8319 9.25364 15.2976 8.78788 15.8718 8.78784H16.4119L10.7478 3.34937Z" fill="#2E64FA" stroke="#2E64FA" stroke-width="0.08"/>
+<path d="M12.0391 13.2412C12.2308 13.2412 12.3815 13.2897 12.4844 13.3926C12.5873 13.4955 12.6357 13.6462 12.6357 13.8379C12.6357 14.0296 12.5873 14.1803 12.4844 14.2832C12.3815 14.3861 12.2308 14.4346 12.0391 14.4346H7.95703C7.76532 14.4346 7.61464 14.3861 7.51172 14.2832C7.4088 14.1803 7.36035 14.0296 7.36035 13.8379C7.36035 13.6462 7.4088 13.4955 7.51172 13.3926C7.61464 13.2897 7.76532 13.2412 7.95703 13.2412H12.0391Z" fill="#2E64FA" stroke="#2E64FA" stroke-width="0.08"/>
+</svg>

src/assets/icon/home_light.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.60715 2.33667C9.48507 1.64684 10.7549 1.69676 11.5769 2.48706L17.9753 8.6355L18.0534 8.72339C18.2201 8.94004 18.2624 9.23186 18.1599 9.49097V9.49194C18.0404 9.78815 17.7521 9.9812 17.4333 9.9812H16.0271V15.8787C16.0271 17.1312 15.013 18.1453 13.7605 18.1453H6.23312C4.98056 18.1453 3.96652 17.1312 3.96652 15.8787V9.9812H2.56808C2.24731 9.9811 1.96094 9.78811 1.84152 9.49194C1.72221 9.19572 1.79455 8.8559 2.02512 8.6355L8.43723 2.48511L8.60715 2.33667ZM10.7478 3.34937C10.3524 2.96902 9.73308 2.94851 9.3132 3.30249L9.31223 3.30151L9.26144 3.34644L9.26242 3.34741L3.58859 8.78784H4.11789C4.69203 8.78802 5.1578 9.25373 5.15793 9.82788V15.8787C5.15793 16.4472 5.60185 16.916 6.16867 16.95H6.16769L6.23215 16.9519H13.7585C14.327 16.9519 14.7958 16.5079 14.8298 15.9412L14.8318 15.8787V9.82788C14.8319 9.25364 15.2975 8.78788 15.8718 8.78784H16.4118L10.7478 3.34937Z" fill="white" stroke="white" stroke-width="0.08"/>
+<path d="M12.0391 13.2412C12.2308 13.2412 12.3815 13.2897 12.4844 13.3926C12.5873 13.4955 12.6357 13.6462 12.6357 13.8379C12.6357 14.0296 12.5873 14.1803 12.4844 14.2832C12.3815 14.3861 12.2308 14.4346 12.0391 14.4346H7.95703C7.76532 14.4346 7.61464 14.3861 7.51172 14.2832C7.4088 14.1803 7.36035 14.0296 7.36035 13.8379C7.36035 13.6462 7.4088 13.4955 7.51172 13.3926C7.61464 13.2897 7.76532 13.2412 7.95703 13.2412H12.0391Z" fill="white" stroke="white" stroke-width="0.08"/>
+</svg>

src/assets/icon/home_normal.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.60715 2.33667C9.48507 1.64684 10.7549 1.69676 11.5769 2.48706L17.9753 8.6355L18.0534 8.72339C18.2201 8.94004 18.2624 9.23186 18.1599 9.49097V9.49194C18.0404 9.78815 17.7521 9.9812 17.4333 9.9812H16.0271V15.8787C16.0271 17.1312 15.013 18.1453 13.7605 18.1453H6.23312C4.98056 18.1453 3.96652 17.1312 3.96652 15.8787V9.9812H2.56808C2.24731 9.9811 1.96094 9.78811 1.84152 9.49194C1.72221 9.19572 1.79455 8.8559 2.02512 8.6355L8.43723 2.48511L8.60715 2.33667ZM10.7478 3.34937C10.3524 2.96902 9.73308 2.94851 9.3132 3.30249L9.31223 3.30151L9.26144 3.34644L9.26242 3.34741L3.58859 8.78784H4.11789C4.69203 8.78802 5.1578 9.25373 5.15793 9.82788V15.8787C5.15793 16.4472 5.60185 16.916 6.16867 16.95H6.16769L6.23215 16.9519H13.7585C14.327 16.9519 14.7958 16.5079 14.8298 15.9412L14.8318 15.8787V9.82788C14.8319 9.25364 15.2975 8.78788 15.8718 8.78784H16.4118L10.7478 3.34937Z" fill="#666666" stroke="#666666" stroke-width="0.08"/>
+<path d="M12.0391 13.2412C12.2308 13.2412 12.3815 13.2897 12.4844 13.3926C12.5873 13.4955 12.6357 13.6462 12.6357 13.8379C12.6357 14.0296 12.5873 14.1803 12.4844 14.2832C12.3815 14.3861 12.2308 14.4346 12.0391 14.4346H7.95703C7.76532 14.4346 7.61464 14.3861 7.51172 14.2832C7.4088 14.1803 7.36035 14.0296 7.36035 13.8379C7.36035 13.6462 7.4088 13.4955 7.51172 13.3926C7.61464 13.2897 7.76532 13.2412 7.95703 13.2412H12.0391Z" fill="#666666" stroke="#666666" stroke-width="0.08"/>
+</svg>

src/assets/icon/join_exam_hover.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10" cy="5.43188" r="1.925" stroke="#2E64FA" stroke-width="1.15"/>
+<circle cx="4" cy="14.5" r="1.425" stroke="#2E64FA" stroke-width="1.15"/>
+<circle cx="10" cy="14.5" r="1.425" stroke="#2E64FA" stroke-width="1.15"/>
+<circle cx="16" cy="14.5" r="1.425" stroke="#2E64FA" stroke-width="1.15"/>
+<line x1="10.075" y1="7.5" x2="10.075" y2="13.5" stroke="#2E64FA" stroke-width="1.15"/>
+<path d="M16 13.5V12.1819C16 11.0773 15.1046 10.1819 14 10.1819H6C4.89543 10.1819 4 11.0773 4 12.1819V13.5" stroke="#2E64FA" stroke-width="1.15"/>
+</svg>

src/assets/icon/join_exam_light.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10" cy="5.43188" r="1.925" stroke="white" stroke-width="1.15"/>
+<circle cx="4" cy="14.5" r="1.425" stroke="white" stroke-width="1.15"/>
+<circle cx="10" cy="14.5" r="1.425" stroke="white" stroke-width="1.15"/>
+<circle cx="16" cy="14.5" r="1.425" stroke="white" stroke-width="1.15"/>
+<line x1="10.075" y1="7.5" x2="10.075" y2="13.5" stroke="white" stroke-width="1.15"/>
+<path d="M16 13.5V12.1819C16 11.0773 15.1046 10.1819 14 10.1819H6C4.89543 10.1819 4 11.0773 4 12.1819V13.5" stroke="white" stroke-width="1.15"/>
+</svg>

src/assets/icon/join_exam_normal.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10" cy="5.43188" r="1.925" stroke="#666666" stroke-width="1.15"/>
+<circle cx="4" cy="14.5" r="1.425" stroke="#666666" stroke-width="1.15"/>
+<circle cx="10" cy="14.5" r="1.425" stroke="#666666" stroke-width="1.15"/>
+<circle cx="16" cy="14.5" r="1.425" stroke="#666666" stroke-width="1.15"/>
+<line x1="10.075" y1="7.5" x2="10.075" y2="13.5" stroke="#666666" stroke-width="1.15"/>
+<path d="M16 13.5V12.1819C16 11.0773 15.1046 10.1819 14 10.1819H6C4.89543 10.1819 4 11.0773 4 12.1819V13.5" stroke="#666666" stroke-width="1.15"/>
+</svg>

src/assets/icon/open.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.1562 4.375H2.84375C2.41227 4.375 2.0625 4.02521 2.0625 3.59375C2.0625 3.16227 2.41227 2.8125 2.84375 2.8125H18.1562C18.5877 2.8125 18.9375 3.16227 18.9375 3.59375C18.9375 4.02521 18.5877 4.375 18.1562 4.375ZM2.84375 15.625H18.1562C18.5877 15.625 18.9375 15.9748 18.9375 16.4062C18.9375 16.8377 18.5877 17.1875 18.1562 17.1875H2.84375C2.41227 17.1875 2.0625 16.8377 2.0625 16.4062C2.0625 15.9748 2.41227 15.625 2.84375 15.625ZM2.84375 9.21875H11.9062C12.3377 9.21875 12.6875 9.56852 12.6875 10C12.6875 10.4315 12.3377 10.7812 11.9062 10.7812H2.84375C2.41227 10.7812 2.0625 10.4315 2.0625 10C2.0625 9.56852 2.41227 9.21875 2.84375 9.21875ZM14.4788 6.35396C14.7839 6.04887 15.2786 6.04887 15.5837 6.35396L18.6773 9.44758C18.9824 9.75268 18.9824 10.2473 18.6773 10.5524L15.5837 13.646C15.2786 13.9511 14.7839 13.9511 14.4788 13.646C14.1737 13.3409 14.1737 12.8463 14.4788 12.5412L17.02 10L14.4788 7.45883C14.1737 7.15373 14.1737 6.65906 14.4788 6.35396Z" fill="#666666"/>
+</svg>

src/assets/icon/search_line.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.41667 11.0833C8.994 11.0833 11.0833 8.994 11.0833 6.41667C11.0833 3.83934 8.994 1.75 6.41667 1.75C3.83934 1.75 1.75 3.83934 1.75 6.41667C1.75 8.994 3.83934 11.0833 6.41667 11.0833Z" stroke="#909399" stroke-linejoin="round"/>
+<path d="M12.25 12.2499L9.71252 9.7124" stroke="#909399" stroke-linejoin="round"/>
+</svg>

src/assets/icon/user_all.svg

@@ -0,0 +1,11 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="white"/>
+<g clip-path="url(#clip0_892_1601)">
+<path d="M28.9344 27.1029C28.6736 25.7273 28.1432 24.4595 27.3699 23.3447C26.5877 22.2118 25.5987 21.2947 24.4299 20.6204L24.4119 20.6114C24.349 20.5754 24.295 20.5485 24.2231 20.5125C24.0702 20.4316 23.9084 20.3327 23.6027 20.2068C23.2071 20.0449 22.8025 19.9101 22.3889 19.7932C22.7755 19.5774 23.1352 19.3077 23.4499 18.984C24.322 18.0939 24.7985 16.9251 24.7985 15.6843C24.7985 14.4436 24.322 13.2747 23.4499 12.3846C22.5777 11.4855 21.4269 11 20.2131 11C18.9993 11 17.8485 11.4855 16.9763 12.3756C16.1042 13.2658 15.6277 14.4346 15.6277 15.6753C15.6277 16.9161 16.1042 18.0849 16.9763 18.975C17.2371 19.2448 17.5248 19.4695 17.8305 19.6673C17.345 19.7932 16.8594 19.964 16.4009 20.1708C15.5018 20.5754 14.6746 21.1329 13.9464 21.8162C13.2181 22.4995 12.5977 23.2997 12.1032 24.1898C11.5997 25.0979 11.2491 26.0779 11.0423 27.1119C10.9434 27.5435 11.0333 28.002 11.312 28.3976L11.321 28.4156L11.33 28.4336C11.6177 28.7842 12.0582 29 12.4988 29H27.4419C27.8734 29 28.323 28.7842 28.6017 28.4426C28.9344 28.038 29.0513 27.5704 28.9344 27.1029Z" fill="#2E64FA"/>
+</g>
+<defs>
+<clipPath id="clip0_892_1601">
+<rect width="18" height="18" fill="white" transform="translate(11 11)"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icon/user_blue.svg

@@ -0,0 +1,11 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#2E64FA"/>
+<g clip-path="url(#clip0_892_1609)">
+<path d="M28.9344 27.1029C28.6736 25.7273 28.1432 24.4595 27.3699 23.3447C26.5877 22.2118 25.5987 21.2947 24.4299 20.6204L24.4119 20.6114C24.349 20.5754 24.295 20.5485 24.2231 20.5125C24.0702 20.4316 23.9084 20.3327 23.6027 20.2068C23.2071 20.0449 22.8025 19.9101 22.3889 19.7932C22.7755 19.5774 23.1352 19.3077 23.4499 18.984C24.322 18.0939 24.7985 16.9251 24.7985 15.6843C24.7985 14.4436 24.322 13.2747 23.4499 12.3846C22.5777 11.4855 21.4269 11 20.2131 11C18.9993 11 17.8485 11.4855 16.9763 12.3756C16.1042 13.2658 15.6277 14.4346 15.6277 15.6753C15.6277 16.9161 16.1042 18.0849 16.9763 18.975C17.2371 19.2448 17.5248 19.4695 17.8305 19.6673C17.345 19.7932 16.8594 19.964 16.4009 20.1708C15.5018 20.5754 14.6746 21.1329 13.9464 21.8162C13.2181 22.4995 12.5977 23.2997 12.1032 24.1898C11.5997 25.0979 11.2491 26.0779 11.0423 27.1119C10.9434 27.5435 11.0333 28.002 11.312 28.3976L11.321 28.4156L11.33 28.4336C11.6177 28.7842 12.0582 29 12.4988 29H27.4419C27.8734 29 28.323 28.7842 28.6017 28.4426C28.9344 28.038 29.0513 27.5704 28.9344 27.1029Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_892_1609">
+<rect width="18" height="18" fill="white" transform="translate(11 11)"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icon/user_green.svg

@@ -0,0 +1,11 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#2BC644"/>
+<g clip-path="url(#clip0_892_1617)">
+<path d="M28.9344 27.1029C28.6736 25.7273 28.1432 24.4595 27.3699 23.3447C26.5877 22.2118 25.5987 21.2947 24.4299 20.6204L24.4119 20.6114C24.349 20.5754 24.295 20.5485 24.2231 20.5125C24.0702 20.4316 23.9084 20.3327 23.6027 20.2068C23.2071 20.0449 22.8025 19.9101 22.3889 19.7932C22.7755 19.5774 23.1352 19.3077 23.4499 18.984C24.322 18.0939 24.7985 16.9251 24.7985 15.6843C24.7985 14.4436 24.322 13.2747 23.4499 12.3846C22.5777 11.4855 21.4269 11 20.2131 11C18.9993 11 17.8485 11.4855 16.9763 12.3756C16.1042 13.2658 15.6277 14.4346 15.6277 15.6753C15.6277 16.9161 16.1042 18.0849 16.9763 18.975C17.2371 19.2448 17.5248 19.4695 17.8305 19.6673C17.345 19.7932 16.8594 19.964 16.4009 20.1708C15.5018 20.5754 14.6746 21.1329 13.9464 21.8162C13.2181 22.4995 12.5977 23.2997 12.1032 24.1898C11.5997 25.0979 11.2491 26.0779 11.0423 27.1119C10.9434 27.5435 11.0333 28.002 11.312 28.3976L11.321 28.4156L11.33 28.4336C11.6177 28.7842 12.0582 29 12.4988 29H27.4419C27.8734 29 28.323 28.7842 28.6017 28.4426C28.9344 28.038 29.0513 27.5704 28.9344 27.1029Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_892_1617">
+<rect width="18" height="18" fill="white" transform="translate(11 11)"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icon/user_orange.svg

@@ -0,0 +1,11 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#FB9F34"/>
+<g clip-path="url(#clip0_892_1625)">
+<path d="M28.9344 27.1029C28.6736 25.7273 28.1432 24.4595 27.3699 23.3447C26.5877 22.2118 25.5987 21.2947 24.4299 20.6204L24.4119 20.6114C24.349 20.5754 24.295 20.5485 24.2231 20.5125C24.0702 20.4316 23.9084 20.3327 23.6027 20.2068C23.2071 20.0449 22.8025 19.9101 22.3889 19.7932C22.7755 19.5774 23.1352 19.3077 23.4499 18.984C24.322 18.0939 24.7985 16.9251 24.7985 15.6843C24.7985 14.4436 24.322 13.2747 23.4499 12.3846C22.5777 11.4855 21.4269 11 20.2131 11C18.9993 11 17.8485 11.4855 16.9763 12.3756C16.1042 13.2658 15.6277 14.4346 15.6277 15.6753C15.6277 16.9161 16.1042 18.0849 16.9763 18.975C17.2371 19.2448 17.5248 19.4695 17.8305 19.6673C17.345 19.7932 16.8594 19.964 16.4009 20.1708C15.5018 20.5754 14.6746 21.1329 13.9464 21.8162C13.2181 22.4995 12.5977 23.2997 12.1032 24.1898C11.5997 25.0979 11.2491 26.0779 11.0423 27.1119C10.9434 27.5435 11.0333 28.002 11.312 28.3976L11.321 28.4156L11.33 28.4336C11.6177 28.7842 12.0582 29 12.4988 29H27.4419C27.8734 29 28.323 28.7842 28.6017 28.4426C28.9344 28.038 29.0513 27.5704 28.9344 27.1029Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_892_1625">
+<rect width="18" height="18" fill="white" transform="translate(11 11)"/>
+</clipPath>
+</defs>
+</svg>

src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/HelloWorld.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/components/SearchMain.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="module_content">
+    <div class="tag_group" v-for="(itemData, index) in searchData" :key="index">
+      <template v-if="itemData.list.length > 0">
+        <div class="tag_group_title">{{ itemData.label }}：</div>
+        <div class="tag_group_content">
+          <div class="tag_item" v-for="item in itemData.list" :key="item.value" @click="selectItem(index, item.value, itemData)" :class="item.value == itemData.value ? 'active' : ''">
+            {{ item.label }}
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+export default {
+  name: 'SearchMain',
+  setup(props, context) {
+    const searchData = ref([
+      {
+        label: '省份',
+        value: '0',
+        type: 'province',
+        list: [
+          { label: '全部', value: '0' },
+          { label: '北京', value: '1' },
+          { label: '上海', value: '2' },
+          { label: '天津', value: '3' },
+          { label: '河北', value: '4' },
+          { label: '山西', value: '5' },
+        ]
+      },
+      {
+        label: '城市',
+        value: '0',
+        type: 'city',
+        list: [
+          { label: '全部', value: '0' },
+          { label: '东城', value: '1' },
+          { label: '西城', value: '2' },
+          { label: '南城', value: '3' },
+          { label: '北城', value: '4' },
+          { label: '中城', value: '5' },
+        ]
+      },
+      {
+        label: '运维',
+        value: '0',
+        type: 'admin',
+        list: [
+          { label: '全部', value: '0' },
+          { label: '运维1号', value: '1' },
+          { label: '运维2号', value: '2' },
+          { label: '运维3号', value: '3' },
+          { label: '运维4号', value: '4' },
+          { label: '运维5号', value: '5' },
+        ]
+      },
+      {
+        label: '状态',
+        value: '0',
+        type: 'status',
+        list: [
+          { label: '全部', value: '0' },
+          { label: '正式用户', value: '1' },
+          { label: '体验用户', value: '2' },
+          { label: '冻结用户', value: '3' },
+        ]
+      }
+    ])
+    const selectItem = (index, val, item) => {
+      if(searchData.value[index].value == val) return
+      let d = { index, value: val}
+      context.emit('selectItem', d, item)
+    }
+    return {
+      searchData, selectItem
+    }
+  }
+}
+</script>
+
+<style scoped>
+.filters_group {
+  background: #fff;
+}
+.tag_group{
+  padding:8px 0;
+  display: flex;
+  justify-content: flex-start;
+}
+.tag_group_title {
+  width: auto;
+  height: auto;
+  margin-right: 8px;
+  color: #303133;
+  font-size: 14px;
+  text-align: left;
+  line-height: 30px;
+  font-weight: 500;
+  letter-spacing: 0em;
+}
+.tag_group_content {
+  width: calc(100% - 80px);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.tag_item {
+  padding: 0 8px;
+  line-height: 30px;
+  border-radius: 4px;
+  font-size: 14px;
+  background: #fff;
+  color: #999999;
+  cursor: pointer;
+}
+.tag_item.active {
+  background: rgba(71,113,203,0.1);
+  color: #2E64FA;
+}
+.tag_item:hover {
+  color: #2E64FA;
+}
+</style>

src/layout/components/AppMain.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="container">
+    <SiderBar />
+    <el-main class="main_container">
+      <router-view></router-view>
+    </el-main>
+  </div>
+</template>
+
+<script>
+import SiderBar from './SiderBar.vue'
+export default {
+  components: {
+    SiderBar
+  },
+  setup() {
+    return {
+    }
+  },
+}
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+  height: calc(100vh - 65px);
+}
+.main_container {
+  background: #F0F4FB;
+}
+</style>

src/layout/components/SiderBar.vue

@@ -0,0 +1,83 @@
+<template>
+  <el-aside class="siderbar_container" :width="isCollapse ? '72px' : '150px'">
+    <div @click="toggleCollapse">
+      <img v-if="isCollapse" src="@/assets/icon/open.svg" alt="">
+      <img v-else src="@/assets/icon/close.svg" alt="">
+    </div>
+    <el-menu default-active="/schoolManage" :collapse="isCollapse" router @handleOpen="handleOpen" @handleClose="handleClose">
+      <el-menu-item v-for="item in menuItems" :key="item.route" :index="item.route">
+        <template #title>
+          <!-- <img :src="`@/assets/icon/${item.icon}.svg`" alt=""> -->
+          <img src="`@/assets/icon/manage_normal.svg`" alt="">
+          <span>{{ item.label }}</span>
+        </template>
+      </el-menu-item>
+    </el-menu>
+  </el-aside>
+</template>
+
+<script> 
+import { ref } from 'vue';
+export default {
+  name: 'SiderBar',
+  components: {
+  },
+  setup() {
+    const isCollapse = ref(false)
+    const menuItems = ref([
+      {
+        label: '学校管理',
+        icon: 'school_normal',
+        icon_light: 'school_light',
+        icon_hover: 'school_hover',
+        route: '/school',
+      },
+      {
+        label: '运维管理',
+        icon: 'manage_normal',
+        icon_light: 'school_light',
+        icon_hover: 'school_hover',
+        route: '/manager',
+      },
+      {
+        label: '联考管理',
+        icon: 'join_exam_normal',
+        icon_light: 'join_exam_light',
+        icon_hover: 'join_exam_hover',
+        route: '/examination',
+      }
+    ])
+    const handleOpen = (key, keyPath) => {
+      console.log(key, keyPath)
+    }
+    const handleClose = (key, keyPath) => {
+      console.log(key, keyPath)
+    }
+    const toggleCollapse = () => {
+      isCollapse.value = !isCollapse.value
+    }
+    return {
+      isCollapse,
+      menuItems,
+      handleOpen,
+      handleClose,
+      toggleCollapse,
+      
+    }
+  }
+}
+</script>
+
+<style scoped>
+.siderbar_container {
+  background: #fff;
+  padding: 16px;
+}
+.el-menu {
+  width: 100%;
+  border: none;
+}
+.el-menu-item {
+  padding: 0;
+}
+</style>

src/layout/components/header.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="head_content">
+    <div class="head_content_left">
+      <div class="big_head">后台管理系统</div>
+      <div class="small_head">大数据精准教学平台</div>
+    </div>
+    <div class="head_content_right">
+      xxxxxx学校
+    </div>
+  </div>
+</template>
+ 
+ <script>
+ export default {
+ 
+ }
+ </script>
+ 
+ <style scoped>
+.head_content {
+  height: 65px;
+  padding: 0 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #2E64FA;
+}
+.big_head {
+  font-size: 24px;
+  color: #fff;
+}
+.small_head {
+  font-size: 14px;
+  color: #fff;
+}
+.head_content_right {
+  color: #fff;
+}
+ </style>

src/layout/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="layout">
+    <Header />
+    <AppMain />
+  </div>
+</template>
+
+<script>
+import Header from './components/header.vue'
+import AppMain from './components/AppMain.vue'
+export default {
+  components: {
+    Header, AppMain
+  }
+}
+</script>
+
+<style>
+
+</style>

src/main.ts

@@ -7,6 +7,8 @@ import 'element-plus/dist/index.css'
 import * as ElIcons from '@element-plus/icons-vue'
 import router from './router' // 引入路由配置
 import { setupStore } from './store' // 引入 store 初始化方法
+
+import './styles/common.scss'
 const app = createApp(App)
 Object.keys(ElIcons).forEach((key) => {
   app.component(key, ElIcons[key])

src/router/index.ts

@@ -1,11 +1,12 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import type { RouteRecordRaw } from 'vue-router'
+import Layout from '@/layout/index.vue'
 
 // 示例路由配置
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
-    name: 'Login',
+    name: '',
     component: () => import('../views/login/login.vue')
   },
   {
@@ -16,7 +17,24 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/main',
     name: 'main',
-    component: () => import('../views/layout/index.vue')
+    component: Layout,
+    children: [
+      {
+        path: '/school',
+        name: 'school',
+        component: () => import('@/views/school/index.vue')
+      },
+      {
+        path: '/manager',
+        name: 'manager',
+        component: () => import('@/views/manager/index.vue')
+      },
+      {
+        path: '/examination',
+        name: 'examination',
+        component: () => import('@/views/examination/index.vue')
+      }
+    ]
   }
 ]
 

src/styles/common.scss

@@ -1,5 +1,8 @@
-
-
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 ul,
 li {
   list-style: none;
@@ -25,7 +28,6 @@ li {
   margin: 0 auto;
   padding-bottom: 30px;
   overflow-y: hidden;
-  // background-color: #ebecee;
   background-color: #f0f4fb;
 }
 
@@ -44,11 +46,55 @@ li {
 
 html,
 body {
+  width: 100%;
+  height: 100%;
   overflow: hidden;
   font-family: Inter, -apple-system, BlinkMacSystemFont, PingFang SC,
     Hiragino Sans GB, noto sans, Helvetica Neue, Helvetica,
     Arial, sans-serif;
 }
+.module_content {
+  padding: 16px;
+  margin-bottom: 20px;
+  border-radius: 10px;
+  background: #fff;
+  .module_title {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    .title_left, .title_right {
+      display: flex;
+      gap: 10px;
+    }
+  }
+}
+.el-select {
+  width: 120px;
+}
+.el-input {
+  width: 200px;
+}
+.el-select .el-select__wrapper,
+.el-input .el-input__wrapper,
+.el-button {
+  height: 36px;
+}
+.el-button:focus  {
+  outline: none;
+}
+.el-button+.el-button {
+  margin: 0;
+}
+.el-input-group__append {
+  padding: 0 11px;
+}
+
+
+
+
+
+
+
 
 .el-popup-parent--hidden {
   padding-right: 0px !important;
@@ -251,11 +297,6 @@ body {
   display: none !important;
 }
 
-html,
-body {
-  width: 100%;
-  height: 100%;
-}
 
 body {
   font-size: 14px;

src/views/examination/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    联考
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/manager/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    运维
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/school/index.vue

@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <div class="user_num_content">
+      <div class="user_item all">
+        <div class="item_left">
+          <img src="@/assets/icon/user_all.svg" alt="">
+          <p>全部用户</p>
+        </div>
+        <div class="item_right">5185</div>
+      </div>
+      <div class="user_item blue">    
+        <div class="item_left">
+          <img src="@/assets/icon/user_blue.svg" alt="">
+          <p>正式用户</p>
+        </div>
+        <div class="item_right">5185</div>
+      </div>
+      <div class="user_item green">
+        <div class="item_left">
+          <img src="@/assets/icon/user_green.svg" alt="">
+          <p>体验用户</p>
+        </div>
+        <div class="item_right">5185</div>
+      </div>
+      <div class="user_item orange">
+        <div class="item_left">
+          <img src="@/assets/icon/user_orange.svg" alt="">
+          <p>冻结用户</p>
+        </div>
+        <div class="item_right">5185</div>
+      </div>
+    </div>
+    <SearchMain />
+    <div class="module_content">
+      <div class="module_title">
+        <div class="title_left">
+          <el-select v-model="accountTypeSelect">
+            <el-option label="全部类型" :value="0"></el-option>
+            <el-option label="单校" :value="1"></el-option>
+            <el-option label="联考" :value="2"></el-option>
+          </el-select>
+          <el-input v-model="studentName" placeholder="请输入学生姓名">
+            <template #append>
+              <img src="@/assets/icon/search_line.svg" alt="">
+            </template>
+          </el-input>
+        </div>
+        <div class="title_right">
+          <el-button>
+            <img src="@/assets/icon/refresh.svg" alt="" style="margin-right: 5px;">刷新
+          </el-button>
+          <el-button>开通科目</el-button>
+          <el-button type="primary">新增用户</el-button>
+        </div>
+      </div>
+      <div class="module_table">
+        <el-table :data="tableData">
+          <el-table-column type="index" label="序号" />
+          <el-table-column prop="schoolCode" label="学校编号" width="180" />
+          <el-table-column prop="schoolName" label="学校名称" width="180" />
+          <el-table-column prop="schoolAbbreviation" label="学校简称" />
+          <el-table-column prop="region" label="区域" />
+          <el-table-column prop="accountType" label="账号类型" />
+          <el-table-column prop="startTime" label="开始时间" />
+          <el-table-column prop="endTime" label="结束时间" />
+          <el-table-column prop="remainingDays" label="剩余天数" />
+          <el-table-column prop="status" label="状态" />
+          <el-table-column prop="maintenanceStaff" label="运维人员" />
+          <el-table-column label="操作" width="250" fixed="right">
+            <template #default="{ row }">
+              <el-button link>{{ row.status == '3' ? "解冻" : "冻结"}}</el-button>
+              <el-button link>编辑</el-button>
+              <el-button link>权限</el-button>
+              <el-button link>重置密码</el-button>
+              <el-button link>进入学校</el-button>
+            </template>
+        </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SearchMain from '@/components/SearchMain.vue'
+import { ref } from 'vue'
+// import { Search } from '@element-plus/icons-vue'
+export default {
+  components: {
+    SearchMain,
+    // Search
+  },
+  setup() {
+    const tableData = ref([
+      {
+        schoolCode: '182900',
+        schoolName: '霍格沃茨魔法学校',
+        schoolAbbreviation: '霍格沃茨',
+        region: '九又四分之三站台',
+        accountType: '魔法版',
+        startTime: '2024-10-15',
+        endTime: '2024-10-16',
+        remainingDays: '1',
+        status: '1',
+        statusName: '正式',
+        maintenanceStaff: '哈利·波特',
+      }
+    ])
+    const accountTypeSelect = ref(0)
+    const studentName = ref('')
+    return {
+      accountTypeSelect,
+      studentName,
+      tableData
+    }
+  }
+}
+</script>
+
+<style scoped>
+.user_num_content {
+  width: 100%;
+  display: flex;
+  gap: 20px;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.user_num_content .user_item {
+  flex-grow: 1;
+  height: 80px;
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 10px;
+}
+.user_num_content .user_item .item_left {
+  display: flex;
+  align-items: center;
+}
+.item_left img {
+  margin-right: 10px;
+}
+.user_item.all {
+  background: #2E64FA;
+  color: #fff;
+}
+.user_item.blue {
+  border: 1px solid #2E64FA;
+  background: #EAF0FF;
+  color: #333;
+}
+.user_item.green {
+  border: 1px solid #2BC644;
+  background: #EAF9EC;
+  color: #333;
+}
+.user_item.orange {
+  border: 1px solid #FB9F34;
+  background: #FFF5EB;
+  color: #333;
+}
+</style>

tsconfig.json

@@ -12,5 +12,4 @@
       "@/*": ["src/*"]
     }
   }
-
 }