数据看板

src/components/schoolArea.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="schoolArea">
-        <div class="allView" @click="setActive('allView')">
+        <div class="allView" :class="{ active: activeSchool === 'allView' }" @click="setActive('allView')">
             <div class="allView_icon"></div>
             <div>总览</div>
         </div>
@@ -46,18 +46,20 @@ export default {
     },
     methods: {
         setActive(school) {
-            this.activeSchool = this.activeSchool === school ? null : school; // 切换高亮状态
+            this.activeSchool = school  // 切换高亮状态
         }
+
     }
 }
 </script>
 <style scoped>
 .schoolArea {
-    max-width:192px;
+    max-width: 192px;
     min-width: 192px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     border-radius: 10px;
     padding-bottom: 10px;
+    padding-top: 5px;
 }
 
 .allView,
@@ -78,8 +80,17 @@ export default {
 .midArea:hover {
     background-color: #e6f0ff;
     color: #0354d7;
+
 }
+.allView.active,
+.primarySch.active,
+.schArea.active,
+.midSch.active,
+.midArea.active {
+    background-color: #e6f0ff;
+    color: #0354d7;
 
+}
 .allView_icon {
     background: url('../assets/allView.png') no-repeat;
     width: 18px;
@@ -94,7 +105,10 @@ export default {
     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;
@@ -109,7 +123,10 @@ export default {
     background-image: url('../assets/primarySch.active.png');
     /* 替换为激活状态的图片 */
 }
-
+.primarySch.active .priSch_icon {
+    background-image: url('../assets/primarySch.active.png');
+    /* 替换为激活状态的图片 */
+}
 .schArea,
 .midArea {
     display: flex;
@@ -134,4 +151,8 @@ export default {
     background-image: url('../assets/midSch.active.png');
     /* 替换为激活状态的图片 */
 }
+.midSch.active .midSch_icon {
+    background-image: url('../assets/midSch.active.png');
+    /* 替换为激活状态的图片 */
+}
 </style>

src/views/KanBan.vue

@@ -64,7 +64,7 @@
                         <div class="bottomArea">
                             <div class="botContent">
                                 <div class="bot_left">
-                                    <img src="../assets/system.png" />
+                                    <img src="../assets/personalFile.png" />
                                 </div>
                                 <div class="bot_right">
                                     <div class="userInfo">张老师 更新了个人资料</div>
@@ -73,7 +73,7 @@
                             </div>
                             <div class="botContent">
                                 <div class="bot_left">
-                                    <img src="../assets/system.png" />
+                                    <img src="../assets/uploadFile.png" />
                                 </div>
                                 <div class="bot_right">
                                     <div class="userInfo">李老师 上传了新的教学资料</div>
@@ -82,7 +82,7 @@
                             </div>
                             <div class="botContent">
                                 <div class="bot_left">
-                                    <img src="../assets/system.png" />
+                                    <img src="../assets/addUser.png" />
                                 </div>
                                 <div class="bot_right">
                                     <div class="userInfo">系统管理员 添加了5名新用户</div>
@@ -91,22 +91,13 @@
                             </div>
                             <div class="botContent">
                                 <div class="bot_left">
-                                    <img src="../assets/system.png" />
+                                    <img src="../assets/setup.png" />
                                 </div>
                                 <div class="bot_right">
                                     <div class="userInfo">系统管理员 更新了系统设置</div>
                                     <div class="updaTime">昨天 16:20</div>
                                 </div>
                             </div>
-                            <div class="botContent">
-                                <div class="bot_left">
-                                    <img src="../assets/system.png" />
-                                </div>
-                                <div class="bot_right">
-                                    <div class="userInfo">张老师 更新了个人资料</div>
-                                    <div class="updaTime">昨天 14:15</div>
-                                </div>
-                            </div>
                         </div>
                     </div>
                 </div>
@@ -123,31 +114,31 @@
                         <div class="midArea">
                             <div class="midDiv">
                                 <div class="midTitle">
-                                    <img src="../assets/allView.png">
-                                    <div>智能教育</div>
+                                    <img src="../assets/smartTeach.png">
+                                    <div class="title_text">智能教育</div>
                                 </div>
-                                <div>引入AI技术，打造智能化学习环境，提供个性化教学服务。</div>
+                                <div class="midText">引入AI技术，打造智能化学习环境，提供个性化教学服务。</div>
                             </div>
                             <div class="midDiv">
                                 <div class="midTitle">
-                                    <img src="../assets/allView.png">
-                                    <div>智能教育</div>
+                                    <img src="../assets/user.png">
+                                    <div class="title_text">小班教学</div>
                                 </div>
-                                <div>引入AI技术，打造智能化学习环境，提供个性化教学服务。</div>
+                                <div class="midText">采用小班制教学模式，确保每个学生都能得到充分关注。</div>
                             </div>
                             <div class="midDiv">
                                 <div class="midTitle">
-                                    <img src="../assets/allView.png">
-                                    <div>智能教育</div>
+                                    <img src="../assets/worldLook.png">
+                                    <div class="title_text">国际视野</div>
                                 </div>
-                                <div>引入AI技术，打造智能化学习环境，提供个性化教学服务。</div>
+                                <div class="midText">引入AI技术，打造智能化学习环境，提供个性化教学服务。</div>
                             </div>
                             <div class="midDiv">
                                 <div class="midTitle">
-                                    <img src="../assets/allView.png">
-                                    <div>智能教育</div>
+                                    <img src="../assets/art.png">
+                                    <div class="title_text">艺术教育</div>
                                 </div>
-                                <div>引入AI技术，打造智能化学习环境，提供个性化教学服务。</div>
+                                <div class="midText">引入AI技术，打造智能化学习环境，提供个性化教学服务。</div>
                             </div>
                         </div>
                         <div class="schIndro">师资力量</div>
@@ -158,50 +149,49 @@
                                 <div>专职教师</div>
                             </div>
                             <div class="teaPow">
-                                <div class="teaPow_count">120+</div>
-                                <div>专职教师</div>
+                                <div class="teaPow_count">90%</div>
+                                <div>硕士及以上</div>
                             </div>
                             <div class="teaPow">
-                                <div class="teaPow_count">120+</div>
-                                <div>专职教师</div>
+                                <div class="teaPow_count">30+</div>
+                                <div>市级奖项</div>
                             </div>
                             <div class="teaPow">
-                                <div class="teaPow_count">120+</div>
-                                <div>专职教师</div>
+                                <div class="teaPow_count">15+</div>
+                                <div>特级教师</div>
                             </div>
                         </div>
                     </div>
                     <div class="schWell_bottom">
                         <div class="schIndro">特色应用</div>
                         <div class="schbotArea">
-                            <div class="sbotLeft">
+                            <div class="sbotTop">
                                 <div class="leftDiv">
-                                    <img src="../assets/user.png">
+                                    <img src="../assets/robot.png">
                                     <div>
                                         <div>AI智能教学系统</div>
-                                        <div>个性化学习方案</div>
-                                    </div>
-                                </div>
-                                <div class="leftDiv">
-                                    <img src="../assets/user.png">
-                                    <div>
-                                        <div>在线课堂直播</div>
-                                        <div>多班级同步直播</div>
+                                        <div class="leftD_text">个性化学习方案</div>
                                     </div>
-
                                 </div>
-                            </div>
-                            <div class="sbotRight">
                                 <div class="rightDiv">
-                                    <div>基于人工智能技术，为每位学生提供个性化的学习路径和教学内容。
+                                    <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>基于人工智能技术，为每位学生提供个性化的学习路径和教学内容。
-                                        系统能够实时分析学习数据，调整教学策略，确保学习效果最大化。
-                                        包含智能题目推荐、错题分析、知识图谱等功能。</div>
+                                    <div class="rightD_text">支持多个班级同时在线直播，教师可以实时与学生互动，进行课堂提问和讨论。
+                                        系统提供课堂录制、课件共享、在线答疑等功能，确保线上教学质量。</div>
                                     <i class="el-icon-edit-outline"></i>
                                 </div>
                             </div>
@@ -222,19 +212,27 @@
                         </div>
                         <div class="priSDiv">
                             <div class="priS_content">
-                                <img src="../assets/school.png">
+                                <div class="priS_img">
+                                    <img src="../assets/school.png">
+                                </div>
                                 <div>通信岭校区</div>
                             </div>
                             <div class="priS_content">
-                                <img src="../assets/school.png">
+                                <div class="priS_img">
+                                    <img src="../assets/school.png">
+                                </div>
                                 <div>通信岭校区</div>
                             </div>
                             <div class="priS_content">
-                                <img src="../assets/school.png">
+                                <div class="priS_img">
+                                    <img src="../assets/school.png">
+                                </div>
                                 <div>通信岭校区</div>
                             </div>
                             <div class="priS_content">
-                                <img src="../assets/school.png">
+                                <div class="priS_img">
+                                    <img src="../assets/school.png">
+                                </div>
                                 <div>通信岭校区</div>
                             </div>
                         </div>
@@ -246,7 +244,10 @@
                         </div>
                         <div class="midSDiv">
                             <div class="midS_content">
-                                <img src="../assets/school.png">
+                                <div class="midS_img">
+                                    <img src="../assets/school.png">
+                                </div>
+                                
                                 <div>通信岭校区</div>
                             </div>
                         </div>
@@ -267,7 +268,7 @@ export default {
     },
     data() {
         return {
-            isActive: 2
+            isActive: 1
         }
     },
     methods: {
@@ -281,7 +282,7 @@ export default {
 .KanBan {
     background-color: #fff;
     padding-top: 20px;
-    height: 100vh;
+    min-height: 100vh;
     /* 设置高度为视口高度 */
     font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
@@ -361,7 +362,7 @@ export default {
 .right_content {
     display: flex;
     justify-content: center;
-    margin-top: 20px;
+    margin-top: 10px;
 }
 
 .right_top {
@@ -424,7 +425,7 @@ export default {
     border-radius: 10px;
     margin-top: 20px;
     padding-bottom: 20px;
-    width: 59vw;
+    width: 57.8vw;
 }
 
 .bottom_title {
@@ -456,15 +457,15 @@ export default {
 }
 
 .bot_left img {
-    width: 20px;
+    width: 25px;
 }
 
 .schWell_top {
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     border-radius: 10px;
-    margin-top: 20px;
+    margin-top: 10px;
     padding: 13px 20px;
-    width: 57vw;
+    width: 55.8vw;
     margin-left: 20px;
 }
 
@@ -477,6 +478,7 @@ export default {
 .schIndro {
     font-size: 20px;
     font-weight: bold;
+    margin-top: 10px;
 }
 
 .schText {
@@ -509,6 +511,14 @@ export default {
     margin-right: 8px
 }
 
+.title_text {
+    font-size: 18px;
+}
+
+.midText {
+    color: #4b5563;
+}
+
 .teaPowArea {
     display: flex;
 }
@@ -539,26 +549,33 @@ export default {
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     border-radius: 10px;
     margin-top: 20px;
-    padding: 13px 20px;
+    padding: 8px 20px;
     width: 57vw;
     margin-bottom: 60px;
     margin-left: 20px;
 }
 
-.schbotArea {
-    display: flex;
-}
 
-.sbotLeft {
+.sbotTop,
+.sbotBottom {
     display: flex;
-    width: 100%;
-    flex-direction: column;
 }
 
-.leftDiv {
+.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 {
@@ -566,17 +583,28 @@ export default {
     background-color: #e6f0ff;
     border-radius: 23px;
     padding: 10px;
-    margin-right: 10px;
+    margin-right: 13px;
 }
 
-.sbotRight {
-    margin-right: 15px;
+.leftDiv2 img {
+    width: 25px;
+    background-color: #dcfce7;
+    border-radius: 23px;
+    padding: 10px;
+    margin-right: 13px;
 }
 
 .rightDiv {
     display: flex;
     align-items: center;
-    margin-bottom: 30px;
+    margin-bottom: 47px;
+    margin-left: 24px;
+    margin-right: 5px;
+}
+
+.rightD_text {
+    font-size: 14px;
+    color: #4b5563;
 }
 
 .rightDiv i {
@@ -586,18 +614,32 @@ export default {
 .addDiv {
     text-align: center;
     cursor: pointer;
+    border: 1px solid #ebeef5;
+    padding: 32px 15px;
+    border-radius: 10px;
+    margin-bottom: 15px;
 }
-
-.addDiv i {
-    font-size: 16px;
-    font-weight: bold;
+.addDiv:hover{
+    box-shadow: 0 2px 7px rgba(156, 157, 167, 0.57);
+}
+.el-icon-plus {
     background-color: #f3f4f6;
-    padding: 15px;
-    border-radius: 23px;
+    padding: 16px;
+    border-radius: 24px;
+}
+
+.addText {
+    color: #6b7280;
+    font-size: 12px;
+    margin-top: 4px;
 }
-.addText{
-    color:#6b7280;font-size: 12px;margin-top: 5px;
+
+.el-icon-edit-outline {
+    font-weight: bold;
+    color: #4b5563;
+    margin-top: 21px
 }
+
 .el-icon-edit-outline:hover {
     color: #0354d7;
 }
@@ -632,16 +674,20 @@ export default {
     align-items: center;
     padding: 30px;
 }
-.priS_content:hover{
+
+.priS_content:hover {
     box-shadow: 0 2px 7px rgba(156, 157, 167, 0.57);
 }
-.priS_content img {
-    width: 25px;
-    padding: 10px;
-    background-color: #dcfce7;
-    border-radius: 20px;
+.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;
@@ -668,14 +714,8 @@ export default {
     padding: 30px;
 
 }
-.midS_content:hover{
+
+.midS_content:hover {
     box-shadow: 0 2px 7px rgba(156, 157, 167, 0.57);
 }
-.midS_content img {
-    width: 25px;
-    padding: 10px;
-    background-color: #dcfce7;
-    border-radius: 20px;
-    margin-bottom: 10px;
-}
 </style>