#

src/assets/img/bianji.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_289_2082)">
+<path d="M7 7H6C5.46957 7 4.96086 7.21071 4.58579 7.58579C4.21071 7.96086 4 8.46957 4 9V18C4 18.5304 4.21071 19.0391 4.58579 19.4142C4.96086 19.7893 5.46957 20 6 20H15C15.5304 20 16.0391 19.7893 16.4142 19.4142C16.7893 19.0391 17 18.5304 17 18V17" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 4.99998L19 7.99998M20.385 6.58499C20.7788 6.19114 21.0001 5.65697 21.0001 5.09998C21.0001 4.543 20.7788 4.00883 20.385 3.61498C19.9912 3.22114 19.457 2.99988 18.9 2.99988C18.343 2.99988 17.8088 3.22114 17.415 3.61498L9 12V15H12L20.385 6.58499Z" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_289_2082">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/img/schlit.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99996 9.16667C10.4602 9.16667 10.8333 8.79357 10.8333 8.33333C10.8333 7.8731 10.4602 7.5 9.99996 7.5C9.53972 7.5 9.16663 7.8731 9.16663 8.33333C9.16663 8.79357 9.53972 9.16667 9.99996 9.16667Z" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.99996 14.1667V14.175M4.99996 10.8333V10.8417M15 14.1667V14.175M15 10.8333V10.8417M18.3333 16.6667V6.66668H15L9.99996 3.33334L4.99996 6.66668H1.66663V16.6667C1.66663 17.1087 1.84222 17.5326 2.15478 17.8452C2.46734 18.1577 2.89127 18.3333 3.33329 18.3333H16.6666C17.1087 18.3333 17.5326 18.1577 17.8451 17.8452C18.1577 17.5326 18.3333 17.1087 18.3333 16.6667Z" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.6666 18.3333V14.1667C11.6666 13.7246 11.491 13.3007 11.1784 12.9882C10.8659 12.6756 10.4419 12.5 9.99992 12.5C9.55789 12.5 9.13397 12.6756 8.82141 12.9882C8.50885 13.3007 8.33325 13.7246 8.33325 14.1667V18.3333" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/img/star.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="M15.4025 13.9725C14.2635 14.246 13.0744 14.2327 11.9418 13.9339C10.8091 13.6351 9.76827 13.06 8.9124 12.2602C8.05654 11.4604 7.41238 10.4609 7.03763 9.35103C6.66287 8.24119 6.56921 7.05574 6.76503 5.90082C6.7357 5.93007 6.70422 5.95708 6.67087 5.98165C6.43753 6.15915 6.14587 6.22498 5.56253 6.35665L5.03337 6.47665C2.98337 6.94082 1.95837 7.17248 1.7142 7.95665C1.47087 8.73998 2.1692 9.55748 3.5667 11.1917L3.92837 11.6142C4.32503 12.0783 4.5242 12.3108 4.61337 12.5975C4.70253 12.885 4.67253 13.195 4.61253 13.8142L4.55753 14.3783C4.3467 16.5592 4.24087 17.6492 4.8792 18.1333C5.51753 18.6175 6.47753 18.1767 8.39587 17.2925L8.89337 17.0642C9.43837 16.8125 9.71087 16.6875 10 16.6875C10.2892 16.6875 10.5617 16.8125 11.1075 17.0642L11.6034 17.2925C13.5225 18.1758 14.4825 18.6175 15.12 18.1342C15.7592 17.6492 15.6534 16.5592 15.4425 14.3783L15.4025 13.9725Z" fill="#0354D7"/>
+<path d="M7.62749 4.50669L7.35416 4.99669C7.05416 5.53502 6.90416 5.80419 6.67083 5.98169C6.70416 5.95669 6.73555 5.92974 6.76499 5.90085C6.56912 7.05586 6.66278 8.24142 7.03757 9.35134C7.41237 10.4613 8.0566 11.4609 8.91258 12.2607C9.76855 13.0605 10.8095 13.6356 11.9423 13.9343C13.0751 14.2331 14.2642 14.2462 15.4033 13.9725L15.3867 13.8142C15.3275 13.195 15.2975 12.885 15.3867 12.5975C15.4758 12.3109 15.6742 12.0784 16.0717 11.6142L16.4333 11.1917C17.8308 9.55835 18.5292 8.74085 18.285 7.95669C18.0417 7.17252 17.0167 6.94002 14.9667 6.47669L14.4367 6.35669C13.8542 6.22502 13.5625 6.15919 13.3283 5.98169C13.095 5.80419 12.945 5.53502 12.645 4.99669L12.3725 4.50669C11.3167 2.61335 10.7892 1.66669 9.99999 1.66669C9.21083 1.66669 8.68333 2.61335 7.62749 4.50669Z" fill="black"/>
+</svg>

src/assets/img/sy.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.33315 24C2.44914 24 1.60134 23.6514 0.976257 23.0308C0.35117 22.4102 0 21.5684 0 20.6908V9.66002C0 9.62178 0.00185188 9.58502 0.00555537 9.54972H0C0 8.91324 0.25443 8.30324 0.706627 7.85539L7.64402 0.968896C8.26908 0.348512 9.11672 0 10.0006 0C10.8844 0 11.732 0.348512 12.3571 0.968896L19.2934 7.85539C19.7456 8.30435 20 8.91434 20 9.54861H19.9944C19.9981 9.58538 20 9.62215 20 9.65892V20.6897C20 21.5673 19.6488 22.409 19.0237 23.0296C18.3987 23.6502 17.5509 23.9989 16.6669 23.9989L3.33315 24ZM10.785 2.52864L17.7768 9.4703V20.6919C17.7768 20.9844 17.6597 21.265 17.4514 21.4719C17.243 21.6787 16.9604 21.795 16.6657 21.795H13.3326V16.2796C13.3326 15.4019 12.9814 14.5602 12.3563 13.9396C11.7313 13.319 10.8835 12.9704 9.99944 12.9704C9.11544 12.9704 8.26764 13.319 7.64255 13.9396C7.01747 14.5602 6.6663 15.4019 6.6663 16.2796V21.795H3.33315C3.03848 21.795 2.75588 21.6787 2.54752 21.4719C2.33916 21.265 2.2221 20.9844 2.2221 20.6919V9.4703L9.21393 2.52864C9.42229 2.32185 9.70483 2.20568 9.99944 2.20568C10.2941 2.20568 10.5766 2.32185 10.785 2.52864Z" fill="#969BA3"/>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.33315 28C8.44914 28 7.60134 27.6514 6.97626 27.0308C6.35117 26.4102 6 25.5684 6 24.6908V13.66C6 13.6218 6.00185 13.585 6.00556 13.5497H6C6 12.9132 6.25443 12.3032 6.70663 11.8554L13.644 4.9689C14.2691 4.34851 15.1167 4 16.0006 4C16.8844 4 17.732 4.34851 18.3571 4.9689L25.2934 11.8554C25.7456 12.3043 26 12.9143 26 13.5486H25.9944C25.9981 13.5854 26 13.6222 26 13.6589V24.6897C26 25.5673 25.6488 26.409 25.0237 27.0296C24.3987 27.6502 23.5509 27.9989 22.6669 27.9989L9.33315 28ZM16.785 6.52864L23.7768 13.4703V24.6919C23.7768 24.9844 23.6597 25.265 23.4514 25.4719C23.243 25.6787 22.9604 25.795 22.6657 25.795H19.3326V20.2796C19.3326 19.4019 18.9814 18.5602 18.3563 17.9396C17.7313 17.319 16.8835 16.9704 15.9994 16.9704C15.1154 16.9704 14.2676 17.319 13.6426 17.9396C13.0175 18.5602 12.6663 19.4019 12.6663 20.2796V25.795H9.33315C9.03848 25.795 8.75588 25.6787 8.54752 25.4719C8.33916 25.265 8.2221 24.9844 8.2221 24.6919V13.4703L15.2139 6.52864C15.4223 6.32185 15.7048 6.20568 15.9994 6.20568C16.2941 6.20568 16.5766 6.32185 16.785 6.52864Z" fill="#0663FE"/>
 </svg>

src/assets/img/sy1.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.33315 24C2.44914 24 1.60134 23.6514 0.976257 23.0308C0.35117 22.4102 0 21.5684 0 20.6908V9.66002C0 9.62178 0.00185188 9.58502 0.00555537 9.54972H0C0 8.91324 0.25443 8.30324 0.706627 7.85539L7.64402 0.968896C8.26908 0.348512 9.11672 0 10.0006 0C10.8844 0 11.732 0.348512 12.3571 0.968896L19.2934 7.85539C19.7456 8.30435 20 8.91434 20 9.54861H19.9944C19.9981 9.58538 20 9.62215 20 9.65892V20.6897C20 21.5673 19.6488 22.409 19.0237 23.0296C18.3987 23.6502 17.5509 23.9989 16.6669 23.9989L3.33315 24ZM10.785 2.52864L17.7768 9.4703V20.6919C17.7768 20.9844 17.6597 21.265 17.4514 21.4719C17.243 21.6787 16.9604 21.795 16.6657 21.795H13.3326V16.2796C13.3326 15.4019 12.9814 14.5602 12.3563 13.9396C11.7313 13.319 10.8835 12.9704 9.99944 12.9704C9.11544 12.9704 8.26764 13.319 7.64255 13.9396C7.01747 14.5602 6.6663 15.4019 6.6663 16.2796V21.795H3.33315C3.03848 21.795 2.75588 21.6787 2.54752 21.4719C2.33916 21.265 2.2221 20.9844 2.2221 20.6919V9.4703L9.21393 2.52864C9.42229 2.32185 9.70483 2.20568 9.99944 2.20568C10.2941 2.20568 10.5766 2.32185 10.785 2.52864Z" fill="#0663FE"/>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.33315 28C8.44914 28 7.60134 27.6514 6.97626 27.0308C6.35117 26.4102 6 25.5684 6 24.6908V13.66C6 13.6218 6.00185 13.585 6.00556 13.5497H6C6 12.9132 6.25443 12.3032 6.70663 11.8554L13.644 4.9689C14.2691 4.34851 15.1167 4 16.0006 4C16.8844 4 17.732 4.34851 18.3571 4.9689L25.2934 11.8554C25.7456 12.3043 26 12.9143 26 13.5486H25.9944C25.9981 13.5854 26 13.6222 26 13.6589V24.6897C26 25.5673 25.6488 26.409 25.0237 27.0296C24.3987 27.6502 23.5509 27.9989 22.6669 27.9989L9.33315 28ZM16.785 6.52864L23.7768 13.4703V24.6919C23.7768 24.9844 23.6597 25.265 23.4514 25.4719C23.243 25.6787 22.9604 25.795 22.6657 25.795H19.3326V20.2796C19.3326 19.4019 18.9814 18.5602 18.3563 17.9396C17.7313 17.319 16.8835 16.9704 15.9994 16.9704C15.1154 16.9704 14.2676 17.319 13.6426 17.9396C13.0175 18.5602 12.6663 19.4019 12.6663 20.2796V25.795H9.33315C9.03848 25.795 8.75588 25.6787 8.54752 25.4719C8.33916 25.265 8.2221 24.9844 8.2221 24.6919V13.4703L15.2139 6.52864C15.4223 6.32185 15.7048 6.20568 15.9994 6.20568C16.2941 6.20568 16.5766 6.32185 16.785 6.52864Z" fill="#969BA3"/>
 </svg>

src/assets/img/tese.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 5L12 3M8 16L16 8M12 21L14 19M16.5 19C17.163 19 17.7989 18.7366 18.2678 18.2678C18.7366 17.7989 19 17.163 19 16.5C19 15.837 18.7366 15.2011 18.2678 14.7322C17.7989 14.2634 17.163 14 16.5 14C15.837 14 15.2011 14.2634 14.7322 14.7322C14.2634 15.2011 14 15.837 14 16.5C14 17.163 14.2634 17.7989 14.7322 18.2678C15.2011 18.7366 15.837 19 16.5 19ZM7.5 10C8.16304 10 8.79893 9.73661 9.26777 9.26777C9.73661 8.79893 10 8.16304 10 7.5C10 6.83696 9.73661 6.20107 9.26777 5.73223C8.79893 5.26339 8.16304 5 7.5 5C6.83696 5 6.20107 5.26339 5.73223 5.73223C5.26339 6.20107 5 6.83696 5 7.5C5 8.16304 5.26339 8.79893 5.73223 9.26777C6.20107 9.73661 6.83696 10 7.5 10ZM5.5 21C6.16304 21 6.79893 20.7366 7.26777 20.2678C7.73661 19.7989 8 19.163 8 18.5C8 17.837 7.73661 17.2011 7.26777 16.7322C6.79893 16.2634 6.16304 16 5.5 16C4.83696 16 4.20107 16.2634 3.73223 16.7322C3.26339 17.2011 3 17.837 3 18.5C3 19.163 3.26339 19.7989 3.73223 20.2678C4.20107 20.7366 4.83696 21 5.5 21ZM18.5 8C19.163 8 19.7989 7.73661 20.2678 7.26777C20.7366 6.79893 21 6.16304 21 5.5C21 4.83696 20.7366 4.20107 20.2678 3.73223C19.7989 3.26339 19.163 3 18.5 3C17.837 3 17.2011 3.26339 16.7322 3.73223C16.2634 4.20107 16 4.83696 16 5.5C16 6.16304 16.2634 6.79893 16.7322 7.26777C17.2011 7.73661 17.837 8 18.5 8Z" stroke="#0663FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/img/zl.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="M9.99996 1.66667C14.6023 1.66667 18.3333 5.39771 18.3333 10C18.3333 14.6023 14.6023 18.3333 9.99996 18.3333C5.39767 18.3333 1.66663 14.6023 1.66663 10C1.66663 5.39771 5.39767 1.66667 9.99996 1.66667ZM9.99996 2.91667C6.08788 2.91667 2.91663 6.08792 2.91663 10C2.91663 13.9121 6.08788 17.0833 9.99996 17.0833C13.912 17.0833 17.0833 13.9121 17.0833 10C17.0833 6.08792 13.912 2.91667 9.99996 2.91667ZM12.9133 6.02021C13.0621 5.9666 13.2231 5.95645 13.3774 5.99094C13.5318 6.02542 13.6732 6.10312 13.785 6.21496C13.8968 6.3268 13.9745 6.46816 14.009 6.62252C14.0435 6.77688 14.0334 6.93787 13.9798 7.08667L12.4539 11.325C12.3604 11.5847 12.2107 11.8205 12.0155 12.0157C11.8203 12.2108 11.5845 12.3605 11.3248 12.454L7.08663 13.9798C6.93782 14.0334 6.77684 14.0436 6.62248 14.0091C6.46812 13.9746 6.32676 13.8969 6.21492 13.785C6.10308 13.6732 6.02538 13.5318 5.99089 13.3775C5.9564 13.2231 5.96656 13.0621 6.02017 12.9133L7.546 8.675C7.63952 8.41532 7.78921 8.17947 7.9844 7.98432C8.17959 7.78917 8.41546 7.63951 8.67517 7.54605L12.9133 6.02021ZM12.5037 7.49625L9.0985 8.72209C9.0119 8.75325 8.93326 8.80315 8.86818 8.86823C8.80311 8.93331 8.7532 9.01195 8.72204 9.09855L7.49621 12.5038L10.9014 11.2779C10.988 11.2468 11.0667 11.1969 11.1317 11.1318C11.1968 11.0667 11.2467 10.9881 11.2779 10.9015L12.5037 7.49625Z" fill="black"/>
+<path opacity="0.6" d="M13.2688 6.47867C13.3305 6.49249 13.3872 6.52383 13.4319 6.56851C13.4765 6.61322 13.507 6.66994 13.5208 6.7316C13.5277 6.76253 13.5306 6.79403 13.5286 6.82535L13.509 6.91714L11.9836 11.1554C11.9151 11.3459 11.8055 11.5192 11.6624 11.6623C11.5551 11.7695 11.4307 11.8575 11.2952 11.924L11.1555 11.9836L6.91724 13.5089C6.85772 13.5304 6.79343 13.5345 6.73169 13.5207C6.67003 13.5069 6.61331 13.4764 6.5686 13.4318C6.52392 13.3871 6.49258 13.3304 6.47876 13.2687C6.47187 13.2379 6.46997 13.2062 6.47192 13.175L6.49048 13.0832V13.0822L8.01685 8.8439C8.06826 8.7013 8.14224 8.56813 8.23657 8.45035L8.33813 8.33804C8.44552 8.23067 8.56957 8.14185 8.70532 8.07535L8.84497 8.01675L13.0833 6.49039C13.1427 6.46907 13.2072 6.4649 13.2688 6.47867Z" stroke="black"/>
+</svg>

src/components/schoolArea.vue

@@ -1,34 +1,35 @@
 <template>
     <div class="schoolArea">
-        <div class="allView" :class="{ active: activeSchool === 'allView' }" @click="setActive('allView')">
+        <div class="allView" :class="{ active: activeSchool === 'allView' }">
             <div class="allView_icon"></div>
             <div>总览</div>
         </div>
         <div class="priSchBox">
-            <div class="primarySch" :class="{ active: activeSchool === 'primarySch' }" @click="setActive('primarySch')">
-                <div class="priSch_icon"></div>
+            <div class="primarySch" :class="{ active: activeSchool === 'primarySch' }" >
+                <img src="../assets/img/schlit.svg" style="margin-right: 8px;" alt="">
                 <div>小学部</div>
             </div>
             <div class="priSchArea">
                 <div class="schArea" v-for="(item, index) in priSchList" :key="index"
-                    :class="{ active: activeSchool === item }" @click="setActive(item)">{{ item }}</div>
+                    :class="{ active: activeSchool === item }" >{{ item }}
+                </div>
             </div>
         </div>
         <div class="midSchBox">
-            <div class="midSch" :class="{ active: activeSchool === 'midSch' }" @click="setActive('midSch')">
-                <div class="midSch_icon"></div>
+            <div class="primarySch" :class="{ active: activeSchool === 'primarySch' }">
+                <img src="../assets/img/star.svg" style="margin-right: 8px;" alt="">
                 <div>初中部</div>
             </div>
-            <div class="midiSchArea">
-                <div class="midArea" v-for="(item, index) in midList" :key="index"
-                    :class="{ active: activeSchool === item }" @click="setActive(item)">{{ item }}</div>
+            <div class="priSchArea">
+                <div class="schArea" v-for="(item, index) in midList" :key="index"
+                    :class="{ active: activeSchool === item }">{{ item }}
+                </div>
             </div>
         </div>
     </div>
 </template>
 <script>
 export default {
-    name: 'schoolArea',
     data() {
         return {
             activeSchool: '',
@@ -40,7 +41,13 @@ export default {
                 "园岭校区",
             ],
             midList: [
-                "笔架山学校"
+                "笔架山学校",
+                "笔架山学校",
+                "笔架山学校",
+                "笔架山学校",
+                "笔架山学校",
+                "笔架山学校",
+                "笔架山学校",
             ]
         }
     },
@@ -54,91 +61,52 @@ export default {
 </script>
 <style scoped>
 .schoolArea {
-    max-width: 192px;
-    min-width: 192px;
+    /* max-width: 192px;
+    min-width: 192px; */
+    width: 267px;
+    min-width: 100px;
+    display: flex;
+    flex-direction: column;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     border-radius: 10px;
-    padding-bottom: 10px;
-    padding-top: 5px;
+    padding: 19px 13px;
+    box-sizing: border-box;
+    gap: 8px;
+    background: #fff;
 }
-
-.allView,
-.primarySch,
-.midSch {
+.allView{
     display: flex;
-    cursor: pointer;
-    justify-content: flex-start;
-    padding: 10px;
-    margin: 10px;
-    border-radius: 5px;
-}
-
-.allView:hover,
-.primarySch:hover,
-.schArea:hover,
-.midSch:hover,
-.midArea:hover {
-    background-color: #e6f0ff;
-    color: #0354d7;
-
-}
-.allView.active,
-.primarySch.active,
-.schArea.active,
-.midSch.active,
-.midArea.active {
-    background-color: #e6f0ff;
-    color: #0354d7;
-
+    width: 230px;
+    height: 54px;
+    align-items: center;
+    padding: 16px;
+    box-sizing: border-box;
 }
-.allView_icon {
-    background: url('../assets/allView.png') no-repeat;
-    width: 18px;
-    height: 18px;
-    display: inline-block;
-    background-size: contain;
-    margin-right: 8px;
-}
-
-/* Hover 时替换图片 */
-.allView:hover .allView_icon {
-    background-image: url('../assets/allView.active.png');
-    /* 替换为激活状态的图片 */
-}
-.allView.active .allView_icon {
-    background-image: url('../assets/allView.active.png');
-    /* 替换为激活状态的图片 */
-}
-.priSch_icon {
-    background: url('../assets/primarySch.png') no-repeat;
-    width: 18px;
-    height: 18px;
-    display: inline-block;
-    background-size: contain;
-    margin-right: 8px;
-}
-
-/* Hover 时替换图片 */
-.primarySch:hover .priSch_icon {
-    background-image: url('../assets/primarySch.active.png');
-    /* 替换为激活状态的图片 */
+.primarySch{
+    display: flex;
+    padding: 16px;
+    padding-bottom: 4px;
 }
-.primarySch.active .priSch_icon {
-    background-image: url('../assets/primarySch.active.png');
-    /* 替换为激活状态的图片 */
+.priSchArea{
+    margin: 8px 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
 }
-.schArea,
-.midArea {
+.schArea{
+    width: 100%;
+    height: 36px;
     display: flex;
+    align-items: center;
+    border-radius: 6px;
+    padding: 7px 16px;
+    padding-left: 36px;
+    box-sizing: border-box;
+    font-size: 14px;
     cursor: pointer;
-    padding: 10px;
-    border-radius: 5px;
-    justify-content: center;
-    margin: 0px 10px;
 }
-
-.midSch_icon {
-    background: url('../assets/midSch.png') no-repeat;
+.allView_icon {
+    background: url('../assets/img/zl.svg') no-repeat;
     width: 18px;
     height: 18px;
     display: inline-block;
@@ -146,13 +114,5 @@ export default {
     margin-right: 8px;
 }
 
-/* Hover 时替换图片 */
-.midSch:hover .midSch_icon {
-    background-image: url('../assets/midSch.active.png');
-    /* 替换为激活状态的图片 */
-}
-.midSch.active .midSch_icon {
-    background-image: url('../assets/midSch.active.png');
-    /* 替换为激活状态的图片 */
-}
+
 </style>

src/components/sidebarL.vue

@@ -10,7 +10,7 @@
                 <div class="ulTOne" @click.stop="goto(0)">
                     <div class="menu_left">
                         <div class="iconW">
-                            <img  class="logo" :src="activeL === 0 ? require('../assets/img/sy1.svg') : require('../assets/img/sy.svg')" alt="">
+                            <img  class="logo" :src="activeL === 0 ? require('../assets/img/sy.svg') : require('../assets/img/sy1.svg')" alt="">
                         </div>
                         <span class="barT" :style="{color : activeL === 0 ? '#0051D7' :''}">首页</span>
                     </div>
@@ -33,12 +33,10 @@
                                     v-for="(i,ind) in appSignL(item.children)"
                                         @click="levTwo(i,ind,index)" :key="ind+'a'">
                                             <div class="ulTCopyTxt"
-                                             :style="{background : (activeLTwo === index+1 +'+' + ind)? '#E6F0FF' : ''}"
+                                             :style="{background : (activeLTwo === index+1 +'+' + ind)? '#0663FE' : '',color: (activeLTwo === index+1 +'+' + ind)? '#fff' :''}"
                                             v-for="(p,pin) in AppCon(i.url)" :key="pin+'p'">
-                                            <el-tooltip class="item" 
-                                            effect="dark" :content="p.name" placement="right">
-                                                        <div class="ulTCopyConT">{{ p.name }}</div>
-                                                    </el-tooltip>
+                                         
+                                                <div class="ulTCopyConT">{{ p.name }}</div>
                                             </div>
                                     </div>
                                 </div>
@@ -71,19 +69,13 @@
                                                 <div class="ulTCopyTxt"  
                                                 v-for="(i,ind) in cocoFlowList[0]" 
                                                 @click="openNewWindow(i.url)" :key="ind+'ab'">
-                                                    <el-tooltip class="item" effect="dark" 
-                                                    :content="i.name" placement="right">
                                                         <div class="ulTCopyConT">{{ i.name }}</div>
-                                                    </el-tooltip>
                                                 </div>
                                                 <span v-if="cocoFlowList[1].length" style="color: #00000066;">我的收藏</span>
 
                                                 <div class="ulTCopyTxt"
                                                 v-for="(i,ind) in cocoFlowList[1]" @click="openNewWindow(i.url)" :key="ind+'a'">
-                                                    <el-tooltip class="item" effect="dark" 
-                                                    :content="i.name" placement="right">
                                                         <div class="ulTCopyConT">{{ i.name }}</div>
-                                                    </el-tooltip>
                                                 </div>
                                             </div>
                                         </div>
@@ -359,13 +351,12 @@ import { API_CONFIG } from "@/common/apiConfig";
     height: 90%;
     width: 154px;
     overflow: hidden;
-    background-color: #FFFFFFE5 !important;
+    background-color: rgb(255 255 255 / 98%);
     border-radius: 12px;
     position: fixed;
     left: -75px;
     top: 70px;
     z-index: -100;
-    background-color: #ffffff;
     transition: transform .5s ease;
 
 }
@@ -528,6 +519,7 @@ import { API_CONFIG } from "@/common/apiConfig";
 }
 .ulTCopyConT:hover{
     background: #e7e7e7;
+    color: #000;
 }
 .ulTCopyTxtCon{
    display: flex;align-items: center;width: 100%;

src/components/topPage.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="top">
+        <div class="top" v-if="fromL.admin.banner && fromL.admin.banner.length == 0">
             <div class="topBlock">
                 <div class="topTit" style="display: flex;">
                     <div>欢迎使用</div>
@@ -12,14 +12,23 @@
                 </div>
             </div>
             <img style="width: 96px;height: 96px;" src="../assets/img/root.png" alt="">
-            
-            <!-- <div v-if="fromL.basics.loginBanner" style="margin: 20px 0;border-radius: 10px;overflow: hidden;">
-                <el-carousel :interval="5000" arrow="always">
-                    <el-carousel-item v-for="(item,index) in bannerL(fromL.basics.loginBanner)" :key="index">
-                        <img style="width: 100%;object-fit: cover;" :src="fromL.basics.loginBanner" alt="">
-                    </el-carousel-item>
-                </el-carousel>
-            </div> -->
+        </div>
+
+        <div style="width: 100%;height: 100%;object-fit: cover;border-radius: 10px;height: 300px;" 
+        v-if="fromL.admin.banner && fromL.admin.banner.length == 1"
+        >
+            <img style="width: 100%;height: 100%;object-fit: cover;border-radius: 10px;" 
+            :src="fromL.admin.banner[0].src" alt="" @click="gotoBanner(fromL.admin.banner[0].url)">
+        </div>
+
+        <div style="border-radius: 10px;overflow: hidden;" v-if="fromL.admin.banner && fromL.admin.banner.length > 1">
+            <el-carousel style="width: 100%;" indicator-position="outside">
+                <el-carousel-item v-for="(i,index) in fromL.admin.banner" :key="index">
+                    <img style="width: 100%;height: 100%;object-fit: cover;border-radius: 10px;" 
+                     @click="gotoBanner(i.url)"
+                    :src="i.src" alt="">
+                </el-carousel-item>
+            </el-carousel>
         </div>
 
         <!-- 平台应用  -->
@@ -146,7 +155,7 @@
             </div>
             <div style="height: 45px;line-height: 45px;text-align: end;">
                 <el-button @click="handleClose">取消</el-button>
-                <el-button @click="addUsuallyApp" type="primary">确认</el-button>
+                <el-button @click="addUsuallyApp" style="background-color: #0663FE;" type="primary">确认</el-button>
             </div>
         </el-dialog>
     </div>
@@ -248,6 +257,11 @@ import { API_CONFIG } from "@/common/apiConfig";
             }
         },
         methods: {
+            gotoBanner(val){
+                if (val == '') return
+                window.open(val, "_blank");
+            },
+            // 首页平台应用浮动效果
             setHovered(index, value) {
                 // console.log(index, value);
                 
@@ -553,12 +567,13 @@ import { API_CONFIG } from "@/common/apiConfig";
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px; /* 网格间距 */
-    margin-bottom: 16px;
+    margin-top: 10px;
 }
 
 .TabListAll{
     position: relative !important;
     display: flex;
+    height: 140px;
     justify-content: flex-end;
 }
 .imgApp{
@@ -644,13 +659,14 @@ import { API_CONFIG } from "@/common/apiConfig";
 /* 图片 */
 .footConLeft{
     width: 400px;
+    min-width: 150px;
     box-sizing: border-box;
     display: flex;
-    justify-content: center;
     align-items: center;
 }
 .footConLeft img{
-    object-fit: contain;
+    min-width: 150px;
+    object-view-box: inset(0% 0% 0% 30px);
 }
 
 /* 中间后面设置应用 */
@@ -746,7 +762,7 @@ import { API_CONFIG } from "@/common/apiConfig";
 /* 对号 */
 .top{
     display: flex;
-    min-height: 144px;
+    height: 154px;
     justify-content: space-between;
     background-color: #fff;
     align-items: center;

src/router/index.js

@@ -3,7 +3,7 @@ import VueRouter from 'vue-router';
 import HomeView from '../views/HomeView.vue';
 import homepageL  from '@/views/homepageL.vue'
 import loginPage from '@/views/login/loginPage.vue'
-import KanBan from '@/views/KanBan.vue';
+import KanBan from '@/views/kanBan/index.vue';
 
 Vue.use(VueRouter);
 

src/store/modules/user.js

@@ -114,11 +114,11 @@ const actions = {
           // }
         })
         .catch((error) => {
-          // var _user = { userid: "6c56ec0e-2c74-11ef-bee5-005056b86db5" };
-          // commit("SET_ID", _user.userid);
-          // commit("SET_TOKEN", _user.userid);
-          // setToken(_user.userid);
-          // resolve(_user.userid);
+          var _user = { userid: "6c56ec0e-2c74-11ef-bee5-005056b86db5" };
+          commit("SET_ID", _user.userid);
+          commit("SET_TOKEN", _user.userid);
+          setToken(_user.userid);
+          resolve(_user.userid);
           reject(error);
         });
     });

src/views/HomeView.vue

@@ -37,10 +37,10 @@
          <!-- 首页 -->
          <homepageL @AddAppJson="AddAppJson" :urlAddress.sync="urlAddress" v-show="!appSign" ref="homepageLRef"></homepageL>
 
-         <!-- 应用  -->
+         <!-- 循环数组展示iframe  -->
           <div
               v-for="(item,index) in AppJSon" :key="index">
-            <div style="height: 100vh;" v-show="item.stateL">
+            <div style="height: calc(100vh - 60px);" v-show="item.stateL">
               <div style="height: 100%;"  v-html="item.json"></div>
             </div>
           </div>

src/views/KanBan.vue

@@ -1,721 +0,0 @@
-<template>
-    <div class="KanBan">
-        <div class="KanBan_top">
-            <div class="top_textArea">
-                <div class="top_title">
-                    欢迎使用<div>深圳市荔园教育集团</div>综合看板！
-                </div>
-                <div style="color: #4b5563;">高效管理平台资源，提升教育管理效率</div>
-            </div>
-            <div class="imgArea">
-                <img src="../assets/KanBan.png" />
-            </div>
-        </div>
-        <div class="buttonArea">
-            <div class="btnDiv" :class="{ active: isActive === 1 }" @click="setActive(1)">数据看板</div>
-            <div class="btnDiv" :class="{ active: isActive === 2 }" @click="setActive(2)">校区特色</div>
-            <div class="btnDiv" :class="{ active: isActive === 3 }" @click="setActive(3)">快捷入口</div>
-        </div>
-        <div class="mainArea">
-            <div class="sidebar" v-if="isActive === 1 || isActive === 2">
-                <schoolArea />
-            </div>
-
-            <div class="right_content">
-                <div class="kanban_content" v-if="isActive === 1">
-                    <div class="right_top">
-                        <div class="count_content">
-                            <div class="count_left">
-                                <div class="countTitle">总用户数</div>
-                                <div class="countNumber">1,254</div>
-                                <div class="countRecord"><i class="el-icon-top"></i>较上月增长 5.3%</div>
-                            </div>
-
-                            <div class="count_right">
-                                <img src="../assets/user.png" />
-                            </div>
-
-                        </div>
-                        <div class="count_content">
-                            <div class="count_left">
-                                <div class="countTitle">内容总数</div>
-                                <div class="countNumber">3,721</div>
-                                <div class="countRecord"><i class="el-icon-top"></i>较上月增长 5.3%</div>
-                            </div>
-
-                            <div class="count_right">
-                                <img src="../assets/content.png" />
-                            </div>
-                        </div>
-                        <div class="count_content">
-                            <div class="count_left">
-                                <div class="countTitle">系统状态</div>
-                                <div class="countNumber">正常</div>
-                                <div class="countRecord"><i class="el-icon-success"></i>所以服务运行正常</div>
-                            </div>
-
-                            <div class="count_right">
-                                <img src="../assets/system.png" />
-                            </div>
-                        </div>
-                    </div>
-                    <div class="right_bottom">
-                        <div class="bottom_title">最近活动</div>
-                        <div class="bottomArea">
-                            <div class="botContent">
-                                <div class="bot_left">
-                                    <img src="../assets/personalFile.png" />
-                                </div>
-                                <div class="bot_right">
-                                    <div class="userInfo">张老师 更新了个人资料</div>
-                                    <div class="updaTime">今天 09:45</div>
-                                </div>
-                            </div>
-                            <div class="botContent">
-                                <div class="bot_left">
-                                    <img src="../assets/uploadFile.png" />
-                                </div>
-                                <div class="bot_right">
-                                    <div class="userInfo">李老师 上传了新的教学资料</div>
-                                    <div class="updaTime">今天 09:45</div>
-                                </div>
-                            </div>
-                            <div class="botContent">
-                                <div class="bot_left">
-                                    <img src="../assets/addUser.png" />
-                                </div>
-                                <div class="bot_right">
-                                    <div class="userInfo">系统管理员 添加了5名新用户</div>
-                                    <div class="updaTime">今天 08:30</div>
-                                </div>
-                            </div>
-                            <div class="botContent">
-                                <div class="bot_left">
-                                    <img src="../assets/setup.png" />
-                                </div>
-                                <div class="bot_right">
-                                    <div class="userInfo">系统管理员 更新了系统设置</div>
-                                    <div class="updaTime">昨天 16:20</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="school_well" v-if="isActive === 2">
-                    <div class="schWell_top">
-                        <div class="schTop">
-                            <div class="schTitle">集团总览</div>
-                            <div class="schIndro">集团简介</div>
-                            <div class="schText">深圳市荔园教育集团是一所现代化、智能化的示范性办学团体，
-                                致力于为学生提供优质的教育资源和创新的学习环境。我们采用先进的教学理念和方法，
-                                培养学生的综合素质和创新能力。</div>
-                        </div>
-                        <div class="schIndro">办学特色</div>
-                        <div class="midArea">
-                            <div class="midDiv">
-                                <div class="midTitle">
-                                    <img src="../assets/smartTeach.png">
-                                    <div class="title_text">智能教育</div>
-                                </div>
-                                <div class="midText">引入AI技术，打造智能化学习环境，提供个性化教学服务。</div>
-                            </div>
-                            <div class="midDiv">
-                                <div class="midTitle">
-                                    <img src="../assets/user.png">
-                                    <div class="title_text">小班教学</div>
-                                </div>
-                                <div class="midText">采用小班制教学模式，确保每个学生都能得到充分关注。</div>
-                            </div>
-                            <div class="midDiv">
-                                <div class="midTitle">
-                                    <img src="../assets/worldLook.png">
-                                    <div class="title_text">国际视野</div>
-                                </div>
-                                <div class="midText">引入AI技术，打造智能化学习环境，提供个性化教学服务。</div>
-                            </div>
-                            <div class="midDiv">
-                                <div class="midTitle">
-                                    <img src="../assets/art.png">
-                                    <div class="title_text">艺术教育</div>
-                                </div>
-                                <div class="midText">引入AI技术，打造智能化学习环境，提供个性化教学服务。</div>
-                            </div>
-                        </div>
-                        <div class="schIndro">师资力量</div>
-                        <div class="schText">集团拥有一支高素质的教师团队，90%以上教师具有硕士及以上学历，多人获得市级以上教学奖项。</div>
-                        <div class="teaPowArea">
-                            <div class="teaPow">
-                                <div class="teaPow_count">120+</div>
-                                <div>专职教师</div>
-                            </div>
-                            <div class="teaPow">
-                                <div class="teaPow_count">90%</div>
-                                <div>硕士及以上</div>
-                            </div>
-                            <div class="teaPow">
-                                <div class="teaPow_count">30+</div>
-                                <div>市级奖项</div>
-                            </div>
-                            <div class="teaPow">
-                                <div class="teaPow_count">15+</div>
-                                <div>特级教师</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="schWell_bottom">
-                        <div class="schIndro">特色应用</div>
-                        <div class="schbotArea">
-                            <div class="sbotTop">
-                                <div class="leftDiv">
-                                    <img src="../assets/robot.png">
-                                    <div>
-                                        <div>AI智能教学系统</div>
-                                        <div class="leftD_text">个性化学习方案</div>
-                                    </div>
-                                </div>
-                                <div class="rightDiv">
-                                    <div class="rightD_text">基于人工智能技术，为每位学生提供个性化的学习路径和教学内容。
-                                        系统能够实时分析学习数据，调整教学策略，确保学习效果最大化。
-                                        包含智能题目推荐、错题分析、知识图谱等功能。</div>
-                                    <i class="el-icon-edit-outline"></i>
-                                </div>
-                            </div>
-                            <div class="sbotBottom">
-                                <div class="leftDiv2">
-                                    <img src="../assets/liveVideo.png">
-                                    <div>
-                                        <div>在线课堂直播</div>
-                                        <div class="leftD_text">多班级同步直播</div>
-                                    </div>
-
-                                </div>
-                                <div class="rightDiv">
-                                    <div class="rightD_text">支持多个班级同时在线直播，教师可以实时与学生互动，进行课堂提问和讨论。
-                                        系统提供课堂录制、课件共享、在线答疑等功能，确保线上教学质量。</div>
-                                    <i class="el-icon-edit-outline"></i>
-                                </div>
-                            </div>
-
-                        </div>
-                        <div class="addDiv">
-                            <i class="el-icon-plus"></i>
-                            <div class="addText">添加应用</div>
-                        </div>
-                    </div>
-                </div>
-                <div class="fast_enterArea" v-if="isActive === 3">
-
-                    <div class="priS_enter">
-                        <div class="priS_title">
-                            <img src="../assets/primarySch.active.png">
-                            <div class="schIndro">小学部</div>
-                        </div>
-                        <div class="priSDiv">
-                            <div class="priS_content">
-                                <div class="priS_img">
-                                    <img src="../assets/school.png">
-                                </div>
-                                <div>通信岭校区</div>
-                            </div>
-                            <div class="priS_content">
-                                <div class="priS_img">
-                                    <img src="../assets/school.png">
-                                </div>
-                                <div>通信岭校区</div>
-                            </div>
-                            <div class="priS_content">
-                                <div class="priS_img">
-                                    <img src="../assets/school.png">
-                                </div>
-                                <div>通信岭校区</div>
-                            </div>
-                            <div class="priS_content">
-                                <div class="priS_img">
-                                    <img src="../assets/school.png">
-                                </div>
-                                <div>通信岭校区</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="midSch_enter">
-                        <div class="midS_title">
-                            <img src="../assets/primarySch.active.png">
-                            <div class="schIndro">初中部</div>
-                        </div>
-                        <div class="midSDiv">
-                            <div class="midS_content">
-                                <div class="midS_img">
-                                    <img src="../assets/school.png">
-                                </div>
-                                
-                                <div>通信岭校区</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-
-    </div>
-</template>
-<script>
-import schoolArea from '../components/schoolArea.vue';
-export default {
-    name: 'KanBan',
-    components: {
-        schoolArea: schoolArea
-    },
-    data() {
-        return {
-            isActive: 1
-        }
-    },
-    methods: {
-        setActive(Index) {
-            this.isActive = Index; // 设置激活的按钮
-        }
-    }
-}
-</script>
-<style scoped>
-.KanBan {
-    background-color: #fff;
-    padding-top: 20px;
-    min-height: 100vh;
-    /* 设置高度为视口高度 */
-    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-
-.KanBan_top {
-    border-radius: 10px;
-    width: 69vw;
-    height: 144px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    margin: 0px auto;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.top_textArea {
-    margin-left: 23px;
-}
-
-.top_title {
-    font-size: 30px;
-    font-weight: bold;
-    display: flex;
-    margin-bottom: 8px;
-}
-
-.top_title div {
-    color: #0354d7;
-    margin: 0 7px;
-}
-
-.imgArea {
-    margin-right: 23px;
-}
-
-.imgArea img {
-    width: 96px;
-    height: 96px;
-}
-
-.buttonArea {
-    display: flex;
-    justify-content: center;
-    margin-top: 20px;
-}
-
-.btnDiv {
-    width: 112px;
-    height: 48px;
-    background-color: #d9dbdfc4;
-    border-radius: 7px;
-    text-align: center;
-    line-height: 48px;
-    margin-left: 15px;
-    cursor: pointer;
-}
-
-.btnDiv:hover {
-    background-color: #d6d6e0;
-}
-
-.btnDiv.active {
-    background-color: #0354d7;
-    color: #fff;
-}
-
-.mainArea {
-    display: flex;
-    width: 69vw;
-    margin: 0 auto;
-}
-
-.sidebar {
-    margin-top: 20px;
-}
-
-.right_content {
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
-}
-
-.right_top {
-    display: flex;
-}
-
-.kanban_content {
-    margin-top: 10px;
-    margin-left: 20px;
-}
-
-.count_content {
-    width: 16vw;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    border-radius: 10px;
-    margin-right: 25px;
-    display: flex;
-    justify-content: space-between;
-    padding: 23px
-}
-
-.count_left div {
-    margin-bottom: 5px;
-}
-
-.count_right {
-    background-color: #e6f0ff;
-    height: 25px;
-    padding: 13px;
-    border-radius: 7px;
-}
-
-.count_right img {
-    width: 25px;
-}
-
-.countTitle {
-    color: #6b7280;
-    font-size: 14px;
-}
-
-.countNumber {
-    font-size: 30px;
-    font-weight: bold;
-    color: #1f2937;
-}
-
-.countRecord {
-    font-size: 14px;
-    color: #22c55e;
-}
-
-.el-icon-top {
-    font-size: 15px;
-    font-weight: bold;
-}
-
-.right_bottom {
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    border-radius: 10px;
-    margin-top: 20px;
-    padding-bottom: 20px;
-    width: 57.8vw;
-}
-
-.bottom_title {
-    font-size: 18px;
-    color: #1f2937;
-    font-weight: bold;
-    margin-left: 22px;
-    padding-top: 16px;
-}
-
-.botContent {
-    display: flex;
-    align-items: center;
-    margin-top: 10px;
-    margin-left: 22px;
-}
-
-.bot_right {
-    display: flex;
-    flex-direction: column;
-    margin-left: 17px;
-}
-
-.bot_left {
-    background-color: #e6f0ff;
-    height: 25px;
-    padding: 7px;
-    border-radius: 7px;
-}
-
-.bot_left img {
-    width: 25px;
-}
-
-.schWell_top {
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    border-radius: 10px;
-    margin-top: 10px;
-    padding: 13px 20px;
-    width: 55.8vw;
-    margin-left: 20px;
-}
-
-.schTitle {
-    font-size: 24px;
-    font-weight: bold;
-    margin: 10px 0px;
-}
-
-.schIndro {
-    font-size: 20px;
-    font-weight: bold;
-    margin-top: 10px;
-}
-
-.schText {
-    color: #4b5563;
-    font-size: 16px;
-    margin: 10px 0;
-}
-
-.midArea {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.midDiv {
-    background-color: #e6f0ff;
-    padding: 29px;
-    width: 23vw;
-    border-radius: 10px;
-    margin: 10px 18px 10px 0px;
-}
-
-.midTitle {
-    display: flex;
-    margin-bottom: 10px;
-    align-items: center;
-}
-
-.midTitle img {
-    width: 25px;
-    margin-right: 8px
-}
-
-.title_text {
-    font-size: 18px;
-}
-
-.midText {
-    color: #4b5563;
-}
-
-.teaPowArea {
-    display: flex;
-}
-
-.teaPow {
-    background-color: #e6f0ff;
-    padding: 29px;
-    width: 10vw;
-    border-radius: 10px;
-    margin: 10px 18px 10px 0px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.teaPow_count {
-    font-size: 24px;
-    color: #0354d7;
-    font-weight: bold;
-}
-
-.updaTime {
-    color: #6b7280;
-    font-size: 14px;
-}
-
-.schWell_bottom {
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    border-radius: 10px;
-    margin-top: 20px;
-    padding: 8px 20px;
-    width: 57vw;
-    margin-bottom: 60px;
-    margin-left: 20px;
-}
-
-
-.sbotTop,
-.sbotBottom {
-    display: flex;
-}
-
-.leftDiv,
-.leftDiv2 {
-    display: flex;
-    margin-top: 20px;
-    margin-bottom: 30px;
-    border: 1px solid #ebeef5;
-    padding: 16px 15px;
-    min-width: 14vw;
-    border-radius: 10px;
-}
-
-.leftD_text {
-    font-size: 12px;
-    color: #687280;
-    margin-top: 5px;
-}
-
-.leftDiv img {
-    width: 25px;
-    background-color: #e6f0ff;
-    border-radius: 23px;
-    padding: 10px;
-    margin-right: 13px;
-}
-
-.leftDiv2 img {
-    width: 25px;
-    background-color: #dcfce7;
-    border-radius: 23px;
-    padding: 10px;
-    margin-right: 13px;
-}
-
-.rightDiv {
-    display: flex;
-    align-items: center;
-    margin-bottom: 47px;
-    margin-left: 24px;
-    margin-right: 5px;
-}
-
-.rightD_text {
-    font-size: 14px;
-    color: #4b5563;
-}
-
-.rightDiv i {
-    font-size: 20px;
-}
-
-.addDiv {
-    text-align: center;
-    cursor: pointer;
-    border: 1px solid #ebeef5;
-    padding: 32px 15px;
-    border-radius: 10px;
-    margin-bottom: 15px;
-}
-.addDiv:hover{
-    box-shadow: 0 2px 7px rgba(156, 157, 167, 0.57);
-}
-.el-icon-plus {
-    background-color: #f3f4f6;
-    padding: 16px;
-    border-radius: 24px;
-}
-
-.addText {
-    color: #6b7280;
-    font-size: 12px;
-    margin-top: 4px;
-}
-
-.el-icon-edit-outline {
-    font-weight: bold;
-    color: #4b5563;
-    margin-top: 21px
-}
-
-.el-icon-edit-outline:hover {
-    color: #0354d7;
-}
-
-.priS_enter {
-    margin-top: 10px;
-}
-
-.priS_title {
-    display: flex;
-    align-items: center;
-}
-
-.priS_title img {
-    width: 30px;
-    margin-right: 5px;
-}
-
-.priSDiv,
-.midSDiv {
-    display: flex;
-    margin-top: 10px;
-}
-
-.priS_content {
-    width: 7vw;
-    box-shadow: 0 1px 4px rgb(188 191 213 / 57%);
-    border-radius: 10px;
-    margin-right: 30px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 30px;
-}
-
-.priS_content:hover {
-    box-shadow: 0 2px 7px rgba(156, 157, 167, 0.57);
-}
-.priS_img,.midS_img{
-    padding: 13px;
-    background-color: #e6f0ff;
-    border-radius: 25px;
-    margin-bottom: 10px;
-}
-.priS_img img,
-.midS_img img{
-    width: 25px;
-}
-
-.midSch_enter {
-    margin-top: 10px;
-}
-
-.midS_title {
-    display: flex;
-    align-items: center;
-}
-
-.midS_title img {
-    width: 30px;
-    margin-right: 5px;
-}
-
-.midS_content {
-    width: 7vw;
-    box-shadow: 0 1px 4px rgb(188 191 213 / 57%);
-    border-radius: 10px;
-    margin-right: 30px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 30px;
-
-}
-
-.midS_content:hover {
-    box-shadow: 0 2px 7px rgba(156, 157, 167, 0.57);
-}
-</style>

src/views/homepageL.vue

@@ -2,7 +2,6 @@
     <div class="allPage">
         <div class="packageL">
             <topPage @cutUrl="cutUrl" ref="topPageRef"></topPage>
-            <div style="height: 30px;width: 100%;"></div>
             <botPage :hotApp="hotApp" ref="botPageRef"></botPage>
         </div>
     </div>

src/views/kanBan/components/AdataKanban.vue

@@ -0,0 +1,161 @@
+<template>
+    <div class="datakanban">
+        <div class="barList">
+            <div @click="cutPage(index)" :class="[pageEnd == index ? 'Selected' : '' ]" v-for="(i,index) in barList" :key="index">
+                {{ i.name }}
+            </div>
+        </div>
+
+        <div class="dataExponent">
+            <div class="dataExponentCon" v-for="(i,index) in dataExponentList[pageEnd]" :key="index + 'p'">
+                <div class="dataExponentConTit">
+                    {{ i.name }}
+                </div>
+                <div class="dataExponentConNum">
+                    {{ i.num }}
+                </div>
+            </div>
+        </div>
+
+        <div v-if="pageEnd == 0">
+            <img style="width: 100%;" src="../../../assets/img/chart1.svg" alt="">
+        </div>
+        <div style="display: flex;flex-direction: column;justify-content: center;" v-if="pageEnd == 1">
+            <div style="display: flex;width: 100%;">
+                <img style="transform: scale(1.05);" src="../../../assets/img/chart2.svg" alt="">
+                <div>
+                    <img src="../../../assets/img/chart3.svg" alt="">
+                    <img src="../../../assets/img/chart5.svg" alt="">
+                </div>
+            </div>
+            <img style="width: 100%;"  src="../../../assets/img/chart4.svg" alt="">
+        </div>
+        <div v-if="pageEnd == 2">
+            <div style="display: flex;width: 100%;">
+                <img style="transform: scale(1.05);" src="../../../assets/img/chart6.svg" alt="">
+                <div>
+                    <img src="../../../assets/img/chart10.svg" alt="">
+                    <img src="../../../assets/img/chart8.svg" alt="">
+                </div>
+            </div>
+            <img style="width: 100%;"  src="../../../assets/img/chart7.svg" alt="">
+            <img style="width: 105%;"  src="../../../assets/img/chart9.svg" alt="">
+        </div>
+        <div v-if="pageEnd == 3">
+            <img style="width: 100%;"  src="../../../assets/img/chart11.svg" alt="">
+            <div style="display: flex;width: 100%;">
+                <div>
+                    <img style="object-view-box: inset(4% 16% 3% 0%);" src="../../../assets/img/chart12.svg" alt="">
+                    <img style="object-view-box: inset(3% 0% 6% 0%);" src="../../../assets/img/chart13.svg" alt="">
+                </div>
+                <img style="object-view-box: inset(5% 4% 4% 4%);" src="../../../assets/img/chart14.svg" alt="">
+            </div>
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+    export default {
+        data(){
+            return{
+                barList:[
+                    {name:'基础数据',ind: 1},
+                    {name:'AI应用',ind: 2},
+                    {name:'常规教学',ind: 3},
+                    {name:'教师管理',ind: 4},
+                ],
+                dataExponentList:[
+                    [
+                        {name:'教师总量',num:1254},
+                        {name:'教师总量',num:3721},
+                        {name:'月登录总数',num:4579},
+                        {name:'月登录环比',num:'+15%'},
+                    ],[
+                        {name:'AI应用数量',num:1254},
+                        {name:'今日用户数量',num:3721},
+                        {name:'知识库数量',num:4579},
+                        {name:'文件数量',num:'+15%'},
+                    ],[
+                        {name:'课程总量',num:1254},
+                        {name:'本月新增课程',num:3721},
+                        {name:'新增课程环比',num:4579},
+                        {name:'AI应用嵌入数量',num:'272'},
+                    ],[
+                        {name:'表单总量',num:1254},
+                        {name:'表单回收率',num:3721},
+                        {name:'表单平均处理时长',num:4579},
+                        {name:'智能问答次数',num:'272'},
+                    ],
+                ],
+                pageEnd: 0,
+            }
+        },
+        methods:{
+            cutPage(val){
+                this.pageEnd = val
+            }
+        }
+    }
+</script>
+
+<style scoped>
+.datakanban{
+    width: 100%;
+}
+.barList{
+    display: flex;
+    gap: 42px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 22px;
+    color: #969BA3;
+    margin-bottom: 15px;
+}
+.barList > div{
+    cursor: pointer;
+    height: 23px;
+    line-height: 23px;
+}
+.Selected{
+    color: #0663FE;
+    border-bottom: 2px solid #0663FE;
+}
+.dataExponent{
+    width: 100%;
+    height: 120px;
+    display: grid;
+    background: #fff;
+    border-radius: 20px;
+    grid-template-columns: repeat(4, 1fr);
+    margin-bottom: 15px;
+    align-items: center;
+    /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
+}
+.dataExponentCon{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 50%;
+    border-right: 1px solid #D9D9D9;
+}
+.dataExponentCon:nth-child(4){
+    border: none;
+}
+.dataExponentConTit{
+    font-family: PingFang SC;
+    font-size: 14px;
+    line-height: 100%;
+    color: #969BA3;
+}
+.dataExponentConNum{
+    height: 45px;
+    font-family: PingFang SC;
+    font-weight: 600;
+    font-size: 32px;
+    line-height: 45px
+}
+</style>

src/views/kanBan/components/AquickEntrance.vue

@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <div class="EntBlo">
+            <div style="text-align: center;margin-bottom: 60px;">
+                小学部
+            </div>
+            <div class="EntBloConList">
+                <div class="EntBloCon" v-for="i in 9" :key="i">
+                    <img style="width: 18px;margin-bottom: 10px;" src="../../../assets/img/tese.svg" alt="">
+                    <div>笔架山中学</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="EntBlo">
+            <div style="text-align: center;margin-bottom: 60px;">
+                初中部
+            </div>
+            <div class="EntBloConList">
+                <div class="EntBloCon" v-for="i in 1" :key="i">
+                    <img style="width: 18px;margin-bottom: 10px;" src="../../../assets/img/tese.svg" alt="">
+                    <div>笔架山中学</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data(){
+            return{
+
+            }
+        }
+    }
+</script>
+
+<style  scoped>
+.EntBlo{
+    width: 80%;
+    margin: auto;
+    margin-bottom: 80px;
+}
+.EntBloConList{
+    grid-template-columns: repeat(5, 1fr);
+    display: grid;
+    gap: 10px;
+}
+
+
+.EntBloCon{
+    padding: 40px 20px;
+    background: #fff;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+</style>

src/views/kanBan/components/AschoolFeature.vue

@@ -0,0 +1,242 @@
+<template>
+    <div style="display: flex;flex-direction: column;gap: 20px;">
+       <div class="top">
+            <div class="topTit">
+                <div>
+                    <div>集团简介</div>
+                    <div style="height: 4px;background-color: #0663FE;width: 2rem;margin-top: 6px;"></div>
+                </div>
+                <div>
+                </div>
+            </div>
+            <div class="Topbri">
+                深圳市荔园教育集团是一所现代化、智能化的示范性办学团体，致力于为学生提供优质的教育资源和创新的学习环境。我们采用先进的教学理念和方法，培养学生的综合素质和创新能力。
+            </div>
+       </div>
+       <div class="feature">
+            <div class="topTit">
+                <div>
+                    <div>办学特色</div>
+                    <div style="height: 4px;background-color: #0663FE;width: 2rem;margin-top: 6px;"></div>
+                </div>
+                <div>
+                    <img src="../../../assets/img/bianji.svg" alt="">
+                </div>
+            </div>
+
+            <div style="display: flex;justify-content: space-between;">
+                <div class="featureCon" v-for="(i,index) in featureList" :key="index">
+                    <img style="width: 24px;" src="../../../assets/img/tese.svg" alt="">
+                    <div class="featureConTit">{{i.name}}</div>
+                    <div class="Topbri">{{i.bir}}</div>
+                </div>
+            </div>
+       </div>
+
+       <div class="feature">
+            <div class="topTit">
+                <div>
+                    <div>师资力量</div>
+                    <div style="height: 4px;background-color: #0663FE;width: 2rem;margin-top: 6px;"></div>
+                </div>
+                <div>
+                    <img src="../../../assets/img/bianji.svg" alt="">
+                </div>
+            </div>
+            <div class="Topbri">
+                深圳市荔园教育集团是一所现代化、智能化的示范性办学团体，致力于为学生提供优质的教育资源和创新的学习环境。我们采用先进的教学理念和方法，培养学生的综合素质和创新能力。
+            </div>
+
+            <div style="display: flex;justify-content: space-between;">
+                <div class="featureCon2" v-for="(i,index) in teaData" :key="index">
+                    <div class="featureConTit2">{{i.name}}</div>
+                    <div class="Topbri">{{i.bir}}</div>
+                </div>
+            </div>
+       </div>
+
+       <div class="feature">
+            <div class="topTit">
+                <div>
+                    <div>师资力量</div>
+                    <div style="height: 4px;background-color: #0663FE;width: 2rem;margin-top: 6px;"></div>
+                </div>
+                <div>
+                    <img src="../../../assets/img/bianji.svg" alt="">
+                </div>
+            </div>
+
+            <div class="AppStoreList">
+                <div class="AppStore" v-for="i in 2" :key="i">
+                    <img style="width: 24px;" src="../../../assets/img/bianji.svg" alt="">
+                    <div class="AppStoreCon">
+                        <img style="width: 18px;margin-bottom: 10px;" src="../../../assets/img/tese.svg" alt="">
+                        <div class="AppStoreConTit">PBL课程设计</div>
+                        <div class="AppStoreConBri">项目式学习课程规划</div>
+                    </div>
+                    <div class="AppStoreBri">
+                        基于人工智能技术，为每位学生提供个性化的学习路径和教学内容。系统能够实时分析学习数据，调整教学策略，确保学习效果最大化。包含智能题目推荐、错题分析、知识图谱等功能。
+                    </div>
+                </div>
+
+                <div  class="AppStore">
+                    <div style="height: 24px;"></div>
+                    <div class="AppAdd">
+                        <img src="../../../assets/img/add.svg" alt="">
+                    </div>
+                    <div>
+                       
+                    </div>
+                </div>
+            </div>
+            
+       </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data(){
+            return{
+                featureList:[
+                    {name:'智能教育',bir:'引入AI技术，打造智能化学习环境，提供个性化教学服务。'},
+                    {name:'小班教学',bir:'采用小班制教学模式，确保每个学生都能得到充分关注。'},
+                    {name:'国际视野',bir:'开展国际交流项目，培养学生国际化视野和跨文化交际能力'},
+                    {name:'艺术教育',bir:'引入AI技术，打造智能化学习环境，提供个性化教学服务。'},
+                ],
+                teaData:[
+                    {name:'120+',bir:'专职教师'},
+                    {name:'90%',bir:'硕士及以上'},
+                    {name:'30+',bir:'市级奖项'},
+                    {name:'15+',bir:'特级教师'},
+                ]
+            }
+        }
+    }
+</script>
+
+<style scoped>
+.top{
+    height: 159px;
+    padding: 36px  27px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    border-radius: 12px;
+    justify-content: space-between;
+}
+.topTit{
+    font-family: PingFang SC;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 22px;
+    color: #0663FE;
+    display: flex;
+    height: 36px;
+    justify-content: space-between;
+}
+.Topbri{
+    font-family: PingFang SC;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 22px;
+    color: #000;
+}
+.feature{
+    width: 100%;
+    padding: 36px 27px;
+    border-radius: 12px;
+    box-sizing: border-box;
+    background: #EEEEEE;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    justify-content: space-between;
+}
+.featureCon{
+    background: #FFFFFF;
+    width: 24%;
+    height: 206px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border-radius: 12px;
+    padding: 40px 20px;
+    align-items: center;
+    box-sizing: border-box;
+    gap: 18px;
+}
+.featureCon2{
+    background: #FFFFFF;
+    width: 24%;
+    height: 94px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border-radius: 12px;
+    padding: 40px 20px;
+    align-items: center;
+    box-sizing: border-box;
+    gap: 10px;
+}
+.featureConTit{
+    font-family: PingFang SC;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 22px;
+    color: #000;
+}
+.featureConTit2{
+    font-family: PingFang SC;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 22px;
+    color: #0663FE;
+}
+.AppStoreList{
+    display: flex;
+    gap: 20px;
+}
+.AppStore{
+    width: 33%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+.AppStoreCon{
+    height: 122px;
+    border-radius: 10px;
+    padding: 17px 17px;
+    box-sizing: border-box;
+    background: #fff;
+}
+.AppAdd{
+    height: 122px;
+    border-radius: 10px;
+    padding: 17px 17px;
+    box-sizing: border-box;
+    border: 1px dashed #000000;
+    background: #E5E5E5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.AppStoreConTit{
+    font-family: PingFang SC;
+    font-weight: 500;
+    font-size: 16px;
+    margin-bottom: 5px;
+}
+.AppStoreConBri{
+    font-family: PingFang SC;
+    font-weight: 300;
+    font-size: 12px;
+    color: #969BA3;
+}
+.AppStoreBri{
+    font-family: PingFang SC;
+    font-size: 10px;
+    color: #969BA3;
+}
+</style>

src/views/kanBan/index.vue

@@ -0,0 +1,143 @@
+<template>
+    <div class="KanBan">
+        <div style="max-width: 1260px;margin: auto;">
+            <div class="buttonArea">
+                <div style="width: 500px;display: flex;gap: 100px;">
+                    <div class="btnDiv" :class="{ active: isActive === 1 }" @click="setActive(1)">数据看板</div>
+                    <div class="btnDiv" :class="{ active: isActive === 2 }" @click="setActive(2)">校区特色</div>
+                    <div class="btnDiv" :class="{ active: isActive === 3 }" @click="setActive(3)">快捷入口</div>
+                </div>
+            </div>
+            
+            <div class="mainArea">
+                <div v-if="isActive === 1 || isActive === 2">
+                    <schoolArea />
+                </div>
+
+                <div class="right_content">
+                    <div class="Con" v-if="isActive === 1">
+                    <AdataKanban></AdataKanban>
+                    </div>
+                    <div class="Con" v-if="isActive === 2">
+                    <AschoolFeature></AschoolFeature>
+                    </div>
+                    <div class="Con" v-if="isActive === 3">
+                        <AquickEntrance></AquickEntrance>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+    </div>
+</template>
+<script>
+import schoolArea from '../../components/schoolArea.vue';
+import AdataKanban from './components/AdataKanban';
+import AquickEntrance from './components/AquickEntrance';
+import AschoolFeature from './components/AschoolFeature';
+
+export default {
+    name:'kanBan',
+    components: {
+        schoolArea,
+        AdataKanban,
+        AquickEntrance,
+        AschoolFeature
+    },
+    data() {
+        return {
+            isActive: 1
+        }
+    },
+    methods: {
+        setActive(Index) {
+            this.isActive = Index; // 设置激活的按钮
+        }
+    }
+}
+</script>
+<style scoped>
+.KanBan {
+    background-color: #FAFAFA;
+    /* 设置高度为视口高度 */
+    min-height: 100%;
+    padding: 0  120px;
+    box-sizing: border-box;
+    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+.KanBan_top {
+    border-radius: 10px;
+    width: 69vw;
+    height: 144px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    margin: 0px auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.Con{
+    width: 100%;
+}
+.top_textArea {
+    margin-left: 23px;
+}
+
+.top_title {
+    font-size: 30px;
+    font-weight: bold;
+    display: flex;
+    margin-bottom: 8px;
+}
+
+.top_title div {
+    color: #0354d7;
+    margin: 0 7px;
+}
+
+.imgArea {
+    margin-right: 23px;
+}
+
+.imgArea img {
+    width: 96px;
+    height: 96px;
+}
+
+.buttonArea {
+    display: flex;
+    justify-content: center;
+    padding-top: 20px;
+    border-bottom: 1px #e7e7e7 solid;
+}
+
+.btnDiv {
+    height: 48px;
+    text-align: center;
+    line-height: 48px;
+    margin-left: 15px;
+    cursor: pointer;
+}
+
+/* .btnDiv:hover {
+    background-color: #d6d6e0;
+} */
+
+.btnDiv.active {
+    font-weight: 600;
+    border-bottom: 3px #0663FE solid;
+}
+
+.mainArea {
+    width: 100%;
+    margin-top: 30px;
+    display: flex;
+    gap: 30px;
+    
+}
+.right_content{
+    width: 100%;
+}
+
+
+</style>