src/views/HomeView.vue

@@ -2,11 +2,7 @@
 	<div class="body">
 		<div class="container">
 			<div class="leftBar" style="height: 100%">
-				<sidebarL
-					@getPer="getPer"
-					@AddAppJson="AddAppJson"
-					ref="sidebarLRef"
-				></sidebarL>
+				<sidebarL @getPer="getPer" @AddAppJson="AddAppJson" ref="sidebarLRef"></sidebarL>
 			</div>
 			<div class="table-container">
 				<div class="top">
@@ -19,22 +15,16 @@
 						</div>
 						<div class="person">
 							<div class="person_name">
-								<img
-									@click="openData()"
-									style="
+								<img @click="openData()" style="
 										width: 40px;
 										height: 40px;
 										object-fit: cover;
 										border-radius: 50%;
 										cursor: pointer;
-									"
-									:src="
-										roleUser.headportrait
+									" :src="roleUser.headportrait
 											? roleUser.headportrait
 											: require('../assets/img/toux2.png')
-									"
-									alt=""
-								/>
+										" alt="" />
 								<div class="personInfo">
 									<div class="personInfoTit">
 										{{ roleUser.username }}
@@ -44,41 +34,26 @@
 									</div>
 								</div>
 							</div>
-							<el-button
-								type="text"
-								@click="handleLogout"
-								style="margin-left: 20px"
-								>退出</el-button
-							>
+							<el-button type="text" @click="handleLogout" style="margin-left: 20px">退出</el-button>
 						</div>
 					</div>
 				</div>
 
 				<!-- 首页 -->
-				<homepageL
-					@AddAppJson="AddAppJson"
-					v-show="!appSign"
-					ref="homepageLRef"
-				></homepageL>
+				<homepageL @AddAppJson="AddAppJson" v-show="!appSign" ref="homepageLRef"></homepageL>
 
 				<!-- 循环数组展示iframe  -->
 				<div v-for="(item, index) in AppJSon" :key="index">
 					<!-- {{ item }} -->
 					<div style="height: calc(100vh - 60px)" v-show="item.stateL">
-						<iframe
-							allow="camera *; microphone *;display-capture;midi;encrypted-media;"
-							frameborder="no"
-							style="border: 0; width: 100%; height: calc(100vh - 60px)"
-							:src="item.json"
-							:ref="item.toolId"
-						>
+						<iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;" frameborder="no"
+							style="border: 0; width: 100%; height: calc(100vh - 60px)" :src="item.json"
+							:ref="item.toolId">
 						</iframe>
 					</div>
 				</div>
 
-				<div
-					v-if="loading"
-					style="
+				<div v-if="loading" style="
 						position: absolute;
 						left: 0;
 						top: 0;
@@ -88,16 +63,9 @@
 						display: flex;
 						justify-content: center;
 						align-items: center;
-					"
-				>
-					<div
-						style="display: flex; flex-direction: column; align-items: center"
-					>
-						<img
-							style="height: 75px; transform: scale(2)"
-							src="../assets/img/cocoloading.gif"
-							alt=""
-						/>
+					">
+					<div style="display: flex; flex-direction: column; align-items: center">
+						<img style="height: 75px; transform: scale(2)" src="../assets/img/cocoloading.gif" alt="" />
 						<div style="color: #0354d7">拼命加载中...</div>
 					</div>
 				</div>
@@ -206,9 +174,9 @@ export default {
 				});
 
 				setTimeout(() => {
-					
-          console.log('this.$refs.appRef.contentWindow.document.body;',this.$refs[val.toolId][0].contentWindow.document.body);
-          
+
+					console.log('this.$refs.appRef.contentWindow.document.body;', this.$refs[val.toolId][0].contentWindow.document.body);
+
 					if (!this.$refs[val.toolId][0].contentWindow.document.body) {
 						this.$refs[val.toolId][0].contentWindow.location.reload();
 					}
@@ -305,6 +273,18 @@ export default {
 					}
 				});
 			}
+			if (perData.admin.CampusF.appList) {
+				perData.admin.CampusF.appList.forEach((i, index) => {
+					let _index = toolList.findIndex((i2) => i.id == i2.id);
+					if (_index != -1) {
+						let _setData = toolList[_index];
+						_setData.setIcon = i.setIcon;
+						perData.admin.CampusF.toolList[index] = _setData;
+					} else {
+						console.log("无应用", i);
+					}
+				});
+			}
 			perData.admin.index.list.forEach((i, index) => {
 				let _index = toolList.findIndex((i2) => i == i2.id);
 				if (_index != -1) {
@@ -365,12 +345,14 @@ export default {
 	height: 60px;
 	box-sizing: border-box;
 }
+
 .topCon {
 	display: flex;
 	width: 100%;
 	justify-content: space-between;
 	align-items: center;
 }
+
 .body {
 	width: 100%;
 	height: 100%;
@@ -378,6 +360,7 @@ export default {
 	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
 		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
+
 .title {
 	font-family: PingFang SC;
 	font-weight: 400;
@@ -388,14 +371,17 @@ export default {
 	display: flex;
 	gap: 11px;
 }
+
 .person {
 	display: flex;
 	align-items: center;
 }
+
 .person_name {
 	display: flex;
 	gap: 9px;
 }
+
 .personInfo {
 	display: flex;
 	flex-direction: column;
@@ -403,6 +389,7 @@ export default {
 	padding: 5px 0 2px;
 	box-sizing: border-box;
 }
+
 .personInfoTit {
 	font-family: PingFang SC;
 	font-weight: 500;
@@ -410,6 +397,7 @@ export default {
 	line-height: 100%;
 	color: #000000;
 }
+
 .personInfoBri {
 	font-family: PingFang SC;
 	font-weight: 300;
@@ -417,14 +405,17 @@ export default {
 	line-height: 100%;
 	color: #969ba3;
 }
+
 .container {
 	display: flex;
 	width: 100%;
 	height: 100vh;
 }
-.container >>> .el-loading-mask {
+
+.container>>>.el-loading-mask {
 	z-index: 0;
 }
+
 .table-container {
 	/* display: flex;
   flex: 1;
@@ -433,6 +424,7 @@ export default {
 	background-color: #f9fafb;
 	position: relative;
 }
+
 .leftBar {
 	/* box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px 6px rgb(0 0 0 / 0.1); */
 	/* overflow: visible;  */

src/views/kanBan/components/AIApplications.vue

@@ -1,15 +1,20 @@
 <template>
     <div class="aiApp">
-        <ranking />
-        <countPercentage />
-        <countPercentage />
-        <ranking :title="'创作者排名TOP5'" />
-        <div class="DataDiv">
-            <div class="DataTitle">活跃度环比增长率</div>
-            <div class="imgArea" style="padding: 41px 220px;">
-                <img src="../../../assets/img/BaseData2.png">
+        <div class="aiTopArea">
+            <ranking />
+            <countPercentage />
+            <countPercentage />
+        </div>
+        <div class="aiMidArea">
+            <ranking :title="'创作者排名TOP5'" />
+            <div class="DataDiv">
+                <div class="DataTitle">活跃度环比增长率</div>
+                <div class="imgArea">
+                    <img src="../../../assets/img/BaseData2.png">
+                </div>
             </div>
         </div>
+
         <div class="rankingArea">
             <ranking />
             <ranking />
@@ -34,6 +39,19 @@ export default {
     flex-wrap: wrap;
     gap: 41px;
 }
+
+.aiTopArea {
+    display: grid;
+    gap: 20px;
+    grid-template-columns: 326px auto auto;
+    width: 100%;
+}
+.aiMidArea {
+    display: grid;
+    grid-template-columns: 326px auto;
+    width: 100%;
+    gap: 20px;
+}
 .DataDiv {
     background-color: #fff;
     border-radius: 20px;
@@ -41,21 +59,28 @@ export default {
     box-shadow: 0px 4px 29px rgba(0, 0, 0, 0.1);
 }
 
-.DataTitle{
+.DataDiv img {
+    width: 100%;
+    height: 100%;
+}
+
+.DataTitle {
     font-weight: bold;
     font-size: 17px;
 }
+
 .imgArea {
     padding: 41px;
 }
+
 .rankingArea {
-    display: flex;
+    display: grid;
     gap: 26px;
     background-color: #ededed;
     padding: 20px;
     border-radius: 20px;
+    grid-template-columns: repeat(3, 1fr);
+    width: 100%;
 }
-.rankingArea >>> .rankingDiv{
-    width: 366px;
-}
+
 </style>

src/views/kanBan/components/AschoolFeature.vue

@@ -1,6 +1,6 @@
 <template>
     <div style="display: flex;flex-direction: column;gap: 20px;height: 100%;">
-       <div class="top">
+        <div class="top">
             <div class="topTit">
                 <div>
                     <div>集团简介</div>
@@ -11,10 +11,10 @@
                 </div>
             </div>
             <div class="Topbri">
-                深圳市荔园教育集团是一所现代化、智能化的示范性办学团体，致力于为学生提供优质的教育资源和创新的学习环境。我们采用先进的教学理念和方法，培养学生的综合素质和创新能力。
+                {{ fromL.admin.CampusF.GroupBri }}
             </div>
-       </div>
-       <div class="feature">
+        </div>
+        <div class="feature">
             <div class="topTit">
                 <div>
                     <div>办学特色</div>
@@ -26,15 +26,15 @@
             </div>
 
             <div style="display: flex;justify-content: space-between;">
-                <div class="featureCon" v-for="(i,index) in featureList" :key="index">
+                <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 class="featureConTit">{{ i.name }}</div>
+                    <div class="Topbri">{{ i.bri }}</div>
                 </div>
             </div>
-       </div>
+        </div>
 
-       <div class="feature">
+        <div class="feature">
             <div class="topTit">
                 <div>
                     <div>师资力量</div>
@@ -45,18 +45,18 @@
                 </div>
             </div>
             <div class="Topbri">
-                深圳市荔园教育集团是一所现代化、智能化的示范性办学团体，致力于为学生提供优质的教育资源和创新的学习环境。我们采用先进的教学理念和方法，培养学生的综合素质和创新能力。
+                {{ fromL.admin.CampusF.GroupBri }}
             </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 class="featureCon2" v-for="(i, index) in teaData" :key="index">
+                    <div class="featureConTit2">{{ i.bri }}</div>
+                    <div class="Topbri">{{ i.name }}</div>
                 </div>
             </div>
-       </div>
+        </div>
 
-       <div class="feature">
+        <div class="feature">
             <div class="topTit">
                 <div>
                     <div>特色应用</div>
@@ -68,55 +68,87 @@
             </div>
 
             <div class="AppStoreList">
-                <div class="AppStore" v-for="i in 2" :key="i">
-                    <img style="width: 24px;cursor: pointer;" src="../../../assets/img/bianji.svg" alt="">
+                <div class="AppStore" v-for="(i,index) in featureApp" :key="index">
+                    <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 class="AppStoreConTit">{{i.name}}</div>
+                        <div class="AppStoreConBri">{{i.detail}}</div>
                     </div>
                 </div>
 
-                <div  class="AppStore">
+                <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>
     </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:'特级教师'},
-                ]
-            }
+import { mapGetters } from 'vuex';
+import { API_CONFIG } from '../../../common/apiConfig.js';
+export default {
+    data() {
+        return {
+            featureApp:[]
         }
+    },
+    computed: {
+        ...mapGetters(['fromL']),
+        featureList() {
+            return this.fromL.admin.CampusF.feature; // 从 Vuex 的 fromL 中获取 featureList
+        },
+        teaData() {
+            return this.fromL.admin.CampusF.teacherN.list; // 从 Vuex 的 fromL 中获取 teaData
+        },
+    },
+    methods: {
+        // 获取cocoFlow2应用
+        getData() {
+            let cocoFlowCopy = []
+            if (this.fromL.admin.cocoFlow2 && this.fromL.admin.cocoFlow2.length) {
+                cocoFlowCopy = this.fromL.admin.cocoFlow2.map(item => item.id);
+            } else {
+                return
+            }
+
+            let params = [
+                {
+                    functionName: API_CONFIG.ajax_AdminApp.functionName,
+                    con: cocoFlowCopy.join(','),
+                },
+            ];
+
+            this.$ajax
+                .post(API_CONFIG.baseUrl, params)
+                .then((res) => {
+                    this.featureApp = res.data[0]
+                    // console.log("后端传的数据", this.featureApp);
+                    
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+    },
+    mounted() {
+        this.getData()
     }
+}
 </script>
 
 <style scoped>
-.top{
+.top {
     height: 159px;
-    padding: 36px  27px;
+    padding: 36px 27px;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -124,7 +156,8 @@
     border-radius: 12px;
     justify-content: space-between;
 }
-.topTit{
+
+.topTit {
     font-family: PingFang SC;
     font-weight: 600;
     font-size: 20px;
@@ -144,7 +177,8 @@
     line-height: 22px;
     color: #000;
 }
-.feature{
+
+.feature {
     width: 100%;
     padding: 36px 27px;
     border-radius: 12px;
@@ -155,7 +189,8 @@
     gap: 20px;
     justify-content: space-between;
 }
-.featureCon{
+
+.featureCon {
     background: #FFFFFF;
     width: 24%;
     height: 206px;
@@ -168,7 +203,8 @@
     box-sizing: border-box;
     gap: 18px;
 }
-.featureCon2{
+
+.featureCon2 {
     background: #FFFFFF;
     width: 24%;
     height: 94px;
@@ -181,38 +217,44 @@
     box-sizing: border-box;
     gap: 10px;
 }
-.featureConTit{
+
+.featureConTit {
     font-family: PingFang SC;
     font-weight: 600;
     font-size: 20px;
     line-height: 22px;
     color: #000;
 }
-.featureConTit2{
+
+.featureConTit2 {
     font-family: PingFang SC;
     font-weight: 600;
     font-size: 20px;
     line-height: 22px;
     color: #0663FE;
 }
-.AppStoreList{
+
+.AppStoreList {
     display: flex;
     gap: 20px;
 }
-.AppStore{
+
+.AppStore {
     width: 33%;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }
-.AppStoreCon{
+
+.AppStoreCon {
     height: 122px;
     border-radius: 10px;
     padding: 17px 17px;
     box-sizing: border-box;
     background: #fff;
 }
-.AppAdd{
+
+.AppAdd {
     height: 122px;
     border-radius: 10px;
     padding: 17px 17px;
@@ -223,19 +265,27 @@
     justify-content: center;
     align-items: center;
 }
-.AppStoreConTit{
+
+.AppStoreConTit {
     font-family: PingFang SC;
     font-weight: 500;
     font-size: 16px;
     margin-bottom: 5px;
 }
-.AppStoreConBri{
+
+.AppStoreConBri {
     font-family: PingFang SC;
     font-weight: 300;
     font-size: 12px;
     color: #969BA3;
+    display: -webkit-box; 
+    -webkit-line-clamp: 2; 
+    -webkit-box-orient: vertical; 
+    overflow: hidden; 
+    text-overflow: ellipsis;
 }
-.AppStoreBri{
+
+.AppStoreBri {
     font-family: PingFang SC;
     font-size: 10px;
     color: #969BA3;

src/views/kanBan/components/BasicData.vue

@@ -7,57 +7,61 @@
             </div>
         </div>
         <div class="BaseData">
-            <div class="DataDiv">
-                <div class="DataTitle">教师活跃度</div>
-                <div class="imgArea">
-                    <img src="../../../assets/img/BaseData1.png" alt="">
-                </div>
+            <div class="BaseDataArea1">
+                <div class="DataDiv">
+                    <div class="DataTitle">教师活跃度</div>
+                    <div class="imgArea">
+                        <img src="../../../assets/img/BaseData1.png" alt="">
+                    </div>
 
-            </div>
+                </div>
 
-            <div class="DataDiv">
-                <div class="DataTitle">活跃度环比增长率</div>
-                <div class="imgArea">
-                    <img src="../../../assets/img/BaseData2.png" alt="">
+                <div class="DataDiv">
+                    <div class="DataTitle">活跃度环比增长率</div>
+                    <div class="imgArea">
+                        <img src="../../../assets/img/BaseData2.png" alt="">
+                    </div>
                 </div>
             </div>
-            <div class="DataDiv">
-                <div class="DataTitle">应用使用分类</div>
-                <div class="useCount">
-                    <div class="useItem">
-                        <div class="useColor" style="background-color: #3681fc;"></div>
-                        <div>高频</div>
-                        <div>45%</div>
-                        <div>(40-80人)</div>
-                    </div>
-                    <div class="useItem">
-                        <div class="useColor" style="background-color:#1f94ff;"></div>
-                        <div>中高频</div>
-                        <div>30%</div>
-                        <div>(0-25人)</div>
-                    </div>
-                    <div class="useItem">
-                        <div class="useColor" style="background-color:#8979ff;"></div>
-                        <div>中频</div>
-                        <div>45%</div>
-                        <div>(0-25人)</div>
+            <div class="BaseDataArea2">
+                <div class="DataDiv">
+                    <div class="DataTitle">应用使用分类</div>
+                    <div class="useCount">
+                        <div class="useItem">
+                            <div class="useColor" style="background-color: #3681fc;"></div>
+                            <div>高频</div>
+                            <div>45%</div>
+                            <div>(40-80人)</div>
+                        </div>
+                        <div class="useItem">
+                            <div class="useColor" style="background-color:#1f94ff;"></div>
+                            <div>中高频</div>
+                            <div>30%</div>
+                            <div>(0-25人)</div>
+                        </div>
+                        <div class="useItem">
+                            <div class="useColor" style="background-color:#8979ff;"></div>
+                            <div>中频</div>
+                            <div>45%</div>
+                            <div>(0-25人)</div>
+                        </div>
+                        <div class="useItem">
+                            <div class="useColor" style="background-color:#f4cf3b;"></div>
+                            <div>低频</div>
+                            <div>45%</div>
+                            <div>(0-25人)</div>
+                        </div>
+
                     </div>
-                    <div class="useItem">
-                        <div class="useColor" style="background-color:#f4cf3b;"></div>
-                        <div>低频</div>
-                        <div>45%</div>
-                        <div>(0-25人)</div>
+                    <div class="imgArea" style="padding: 41px 82px;">
+                        <img src="../../../assets/img/BaseData3.png" alt="">
                     </div>
-
                 </div>
-                <div class="imgArea" style="padding: 41px 82px;">
-                    <img src="../../../assets/img/BaseData3.png" alt="">
-                </div>
-            </div>
-            <div class="DataDiv">
-                <div class="DataTitle">使用时长</div>
-                <div class="imgArea" style="padding: 41px 54px;">
-                    <img src="../../../assets/img/BaseData4.png" alt="">
+                <div class="DataDiv">
+                    <div class="DataTitle">使用时长</div>
+                    <div class="imgArea">
+                        <img src="../../../assets/img/BaseData4.png" alt="">
+                    </div>
                 </div>
             </div>
         </div>
@@ -77,7 +81,7 @@ export default {
             selectedDate: 0
         }
     },
-    methods:{
+    methods: {
         selectDate(index) {
             this.selectedDate = index;
         }
@@ -94,8 +98,7 @@ export default {
 .selectDateArea {
     display: flex;
     justify-content: flex-end;
-    padding: 30px 42px;
-    ;
+    padding: 30px 35px;
 }
 
 .selectDate {
@@ -130,20 +133,39 @@ export default {
     margin: 10px 38px;
     gap: 29px;
 }
-
+.BaseDataArea1{
+    display: grid;
+    gap: 20px;
+    grid-template-columns: repeat(2, 1fr);
+    width: 100%;
+}
+.BaseDataArea2{
+    display: grid;
+    gap: 20px;
+    grid-template-columns: 470px auto;
+    width: 100%;
+}
 .DataDiv {
     background-color: #fff;
     border-radius: 20px;
     padding: 20px;
     box-shadow: 0px 4px 29px rgba(0, 0, 0, 0.1);
 }
-.DataTitle{
+
+.DataDiv img {
+    width: 100%;
+    height: 100%;
+}
+
+.DataTitle {
     font-weight: bold;
     font-size: 17px;
 }
+
 .imgArea {
     padding: 41px;
 }
+
 .useCount {
     display: grid;
     justify-content: end;

src/views/kanBan/components/RegularTeaching.vue

@@ -1,58 +1,62 @@
 <template>
     <div class="tradTea">
-        <ranking />
-        <div class="DataDiv">
-            <div class="DataTitle">课程分布</div>
-            <div class="imgArea" style="padding: 65px 222px;">
-                <img src="../../../assets/img/BaseData5.png" alt="">
+        <div class="tradTeaArea1">
+            <ranking />
+            <div class="DataDiv">
+                <div class="DataTitle">课程分布</div>
+                <div class="imgArea">
+                    <img src="../../../assets/img/BaseData5.png" alt="">
+                </div>
             </div>
         </div>
-        <ranking />
-        <countPercentage :title="'AI辅助设计分析'" />
-        <div class="DataDiv">
-            <div class="DataTitle"> 使用分析</div>
-            <div class="aiUseCount">
-                <div class="aiUseArea">
-                    <div class="aiUseItem">
-                        <div class="useColor" style="background-color: #3681fc;"></div>
-                        <div>高频</div>
-                        <div>45%</div>
-                        <div>(40-80人)</div>
-                    </div>
-                    <div class="aiUseItem">
-                        <div class="useColor" style="background-color:#1f94ff;"></div>
-                        <div>中高频</div>
-                        <div>30%</div>
-                        <div>(0-25人)</div>
-                    </div>
-                </div>
-                <div class="aiUseArea">
-                    <div class="aiUseItem">
-                        <div class="useColor" style="background-color:#8979ff;"></div>
-                        <div>中频</div>
-                        <div>45%</div>
-                        <div>(0-25人)</div>
+        <div class="tradTeaArea2">
+            <ranking />
+            <countPercentage :title="'AI辅助设计分析'" />
+            <div class="DataDiv">
+                <div class="DataTitle"> 使用分析</div>
+                <div class="aiUseCount">
+                    <div class="aiUseArea">
+                        <div class="aiUseItem">
+                            <div class="useColor" style="background-color: #3681fc;"></div>
+                            <div>高频</div>
+                            <div>45%</div>
+                            <div>(40-80人)</div>
+                        </div>
+                        <div class="aiUseItem">
+                            <div class="useColor" style="background-color:#1f94ff;"></div>
+                            <div>中高频</div>
+                            <div>30%</div>
+                            <div>(0-25人)</div>
+                        </div>
                     </div>
-                    <div class="aiUseItem">
-                        <div class="useColor" style="background-color:#f4cf3b;"></div>
-                        <div>低频</div>
-                        <div>45%</div>
-                        <div>(0-25人)</div>
+                    <div class="aiUseArea">
+                        <div class="aiUseItem">
+                            <div class="useColor" style="background-color:#8979ff;"></div>
+                            <div>中频</div>
+                            <div>45%</div>
+                            <div>(0-25人)</div>
+                        </div>
+                        <div class="aiUseItem">
+                            <div class="useColor" style="background-color:#f4cf3b;"></div>
+                            <div>低频</div>
+                            <div>45%</div>
+                            <div>(0-25人)</div>
+                        </div>
                     </div>
-                </div>
 
 
-            </div>
-            <div class="imgArea" style="padding: 65px 106px;">
-                <img src="../../../assets/img/BaseData6.png" alt="">
+                </div>
+                <div class="imgArea">
+                    <img src="../../../assets/img/BaseData6.png" alt="">
+                </div>
             </div>
         </div>
-        <div class="DataDiv">
+        <div class="DataDiv" style="width: 100%;">
             <div class="DataTitle">AI与教学融合度</div>
 
-            <div class="imgArea" style="display: flex;padding: 41px 92px;">
-                <img src="../../../assets/img/BaseData7.png" alt="">
-                <img src="../../../assets/img/BaseData8.png" style="height: 100%;">
+            <div class="imgArea" style="display: flex;align-items: center;">
+                <img src="../../../assets/img/BaseData7.png">
+                <img src="../../../assets/img/BaseData8.png">
             </div>
         </div>
         <div class="classArea">
@@ -60,7 +64,7 @@
                 <div class="DataTitle">课堂模块占分析</div>
                 <div class="classDiv">
                     <div class="imgArea" style="padding: 41px 68px;">
-                        <img src="../../../assets/img/BaseData3.png" style="padding: 13px;">
+                        <img src="../../../assets/img/BaseData3.png">
                     </div>
                     <div class="useCount">
                         <div class="useItem">
@@ -95,8 +99,8 @@
             <div class="DataDiv">
                 <div class="DataTitle">课堂观察综合结果</div>
                 <div class="classView">
-                    <div class="imgArea" style="padding: 41px 66px;">
-                        <img src="../../../assets/img/BaseData9.png" style="height: 100%;">
+                    <div class="imgArea">
+                        <img src="../../../assets/img/BaseData9.png">
                     </div>
                     <div class="useCountArea">
                         <div class="useCount">
@@ -133,8 +137,6 @@
                         </div>
                     </div>
                 </div>
-
-
             </div>
         </div>
 
@@ -157,19 +159,40 @@ export default {
     flex-wrap: wrap;
     gap: 41px;
 }
+
+.tradTeaArea1 {
+    display: grid;
+    grid-template-columns: 326px auto;
+    width: 100%;
+    gap: 20px;
+}
+.tradTeaArea2 {
+    display: grid;
+    grid-template-columns: 326px auto auto;
+    width: 100%;
+    gap: 20px;
+}
 .DataDiv {
     background-color: #fff;
     border-radius: 20px;
     padding: 20px;
     box-shadow: 0px 4px 29px rgba(0, 0, 0, 0.1);
 }
-.DataTitle{
+
+.DataDiv img {
+    width: 100%;
+    height: 100%;
+}
+
+.DataTitle {
     font-weight: bold;
     font-size: 17px;
 }
+
 .imgArea {
     padding: 41px;
 }
+
 .aiUseCount {
     display: flex;
     gap: 28px;
@@ -186,21 +209,25 @@ export default {
     font-size: 12px;
     margin-top: 5px;
 }
+
 .useColor {
     width: 11px;
     border-radius: 10px;
     height: 11px;
 }
+
 .classDiv {
     display: flex;
     align-items: center;
 }
+
 .useCountArea {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     margin: 26px;
 }
+
 .useCount {
     display: grid;
     justify-content: end;
@@ -219,6 +246,7 @@ export default {
     border-radius: 10px;
     height: 11px;
 }
+
 .allRating {
     background-color: #fff;
     border-radius: 20px;
@@ -237,13 +265,17 @@ export default {
     font-size: 14px;
     color: #969ba3;
 }
+
 .classArea {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    width: 100%;
     gap: 26px;
     background-color: #ededed;
     padding: 30px;
     border-radius: 20px;
 }
+
 .classView {
     display: flex;
 }

src/views/kanBan/components/TeacherManagement.vue

@@ -1,20 +1,22 @@
 <template>
     <div class="teaManage">
-        <div class="DataDiv">
+        <div class="DataDiv" style="width: 100%;">
             <div class="DataTitle">AI与教学融合度</div>
 
-            <div class="imgArea" style="display: flex;padding: 41px 92px;">
-                <img src="../../../assets/img/BaseData7.png" alt="">
-                <img src="../../../assets/img/BaseData8.png" style="height: 100%;">
+            <div class="imgArea" style="display: flex;align-items: center;">
+                <img src="../../../assets/img/BaseData7.png">
+                <img src="../../../assets/img/BaseData8.png">
             </div>
         </div>
-        <countPercentage :title="'流程自定义分类'" />
-        <ranking :title="'流程自定义分析'" />
+        <div class="teaManageArea">
+            <countPercentage :title="'流程自定义分类'" />
+            <ranking :title="'流程自定义分析'" />
 
-        <div class="DataDiv">
-            <div class="DataTitle">智能问答词云</div>
-            <div style="padding: 41px 212px;"></div>
+            <div class="DataDiv">
+                <div class="DataTitle">智能问答词云</div>
+            </div>
         </div>
+
     </div>
 </template>
 <script>
@@ -34,17 +36,31 @@ export default {
     flex-wrap: wrap;
     gap: 41px;
 }
+
 .DataDiv {
     background-color: #fff;
     border-radius: 20px;
     padding: 20px;
     box-shadow: 0px 4px 29px rgba(0, 0, 0, 0.1);
 }
-.DataTitle{
+
+.DataTitle {
     font-weight: bold;
     font-size: 17px;
 }
+
 .imgArea {
     padding: 41px;
 }
+
+.DataDiv img {
+    width: 100%;
+    height: 100%;
+}
+.teaManageArea {
+    display: grid;
+    grid-template-columns: repeat(3,1fr);
+    width: 100%;
+    gap: 20px;
+}
 </style>

src/views/kanBan/components/ranking.vue

@@ -41,7 +41,6 @@ export default {
     box-shadow: 0px 4px 29px rgba(0, 0, 0, 0.1);
     padding: 20px;
     border-radius: 20px;
-    width: 263px;
     display: flex;
     flex-direction: column;
 }