KanBan响应式布局

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,31 +39,48 @@ 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;
     padding: 20px;
     box-shadow: 0px 4px 29px rgba(0, 0, 0, 0.1);
 }
+
 .DataDiv img {
     width: 100%;
     height: 100%;
 }
-.DataTitle{
+
+.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

@@ -45,7 +45,7 @@
                 </div>
             </div>
             <div class="Topbri">
-                深圳市荔园教育集团是一所现代化、智能化的示范性办学团体，致力于为学生提供优质的教育资源和创新的学习环境。我们采用先进的教学理念和方法，培养学生的综合素质和创新能力。
+                {{ fromL.admin.CampusF.GroupBri }}
             </div>
 
             <div style="display: flex;justify-content: space-between;">

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,24 +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);
 }
+
 .DataDiv img {
     width: 100%;
     height: 100%;
 }
-.DataTitle{
+
+.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,23 +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);
 }
+
 .DataDiv img {
     width: 100%;
     height: 100%;
 }
-.DataTitle{
+
+.DataTitle {
     font-weight: bold;
     font-size: 17px;
 }
+
 .imgArea {
     padding: 41px;
 }
+
 .aiUseCount {
     display: flex;
     gap: 28px;
@@ -190,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;
@@ -223,6 +246,7 @@ export default {
     border-radius: 10px;
     height: 11px;
 }
+
 .allRating {
     background-color: #fff;
     border-radius: 20px;
@@ -241,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,21 +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;
 }