KanBan组件化

src/views/kanBan/components/AIApplications.vue

@@ -0,0 +1,61 @@
+<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>
+        </div>
+        <div class="rankingArea">
+            <ranking />
+            <ranking />
+            <ranking />
+        </div>
+    </div>
+</template>
+<script>
+import ranking from './ranking.vue';
+import countPercentage from './countPercentage.vue';
+export default {
+    name: 'AIApplications',
+    components: {
+        ranking,
+        countPercentage
+    }
+}
+</script>
+<style scoped>
+.aiApp {
+    display: flex;
+    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{
+    font-weight: bold;
+    font-size: 17px;
+}
+.imgArea {
+    padding: 41px;
+}
+.rankingArea {
+    display: flex;
+    gap: 26px;
+    background-color: #ededed;
+    padding: 20px;
+    border-radius: 20px;
+}
+.rankingArea >>> .rankingDiv{
+    width: 366px;
+}
+</style>

src/views/kanBan/components/AdataKanban.vue

@@ -19,361 +19,15 @@
         </div>
 
         <div v-if="pageEnd == 0">
-            <div class="chartArea">
-                <div class="selectDateArea">
-                    <div class="selectDate">
-                        <div class='dateDiv' v-for="(i, index) in DateList" :key="index"
-                            :class="{ 'active': selectedDate === index }" @click="selectDate(index)">{{ i.date }}</div>
-                    </div>
-                </div>
-                <div class="BaseData">
-                    <div class="DataDiv">
-                        <div class="DataTitle">教师活跃度</div>
-                        <div class="imgArea">
-                            <img src="../../../assets/img/BaseData1.png" alt="">
-                        </div>
-
-                    </div>
-
-                    <div class="DataDiv">
-                        <div class="DataTitle">活跃度环比增长率</div>
-                        <div class="imgArea">
-                            <img src="../../../assets/img/BaseData2.png" alt="">
-                        </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>
-                            <div class="useItem">
-                                <div class="useColor" style="background-color:#f4cf3b;"></div>
-                                <div>低频</div>
-                                <div>45%</div>
-                                <div>(0-25人)</div>
-                            </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>
-                    </div>
-                </div>
-
-            </div>
+            <BasicData/>
             <!-- <img style="width: 100%;" src="../../../assets/img/uuu4.svg" alt=""> -->
 
 
         </div>
         <div style="display: flex;flex-direction: column;justify-content: center;" v-if="pageEnd == 1">
-            <div class="aiApp">
-                <div class="rankingDiv">
-                    <div class="rankTitle">热门应用排名TOP5</div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber">1</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber" style="background-color:#d9d9d9;">2</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber" style="background-color: #ae938c;">3</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber" style="background-color: #fff;border:1px solid gray;">4</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber" style="background-color: #fff;border:1px solid gray;">5</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                </div>
-                <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>
-                            <div class="aiUseItem">
-                                <div class="useColor" style="background-color:#f4cf3b;"></div>
-                                <div>低频</div>
-                                <div>45%</div>
-                                <div>(0-25人)</div>
-                            </div>
-                        </div>
-
-
-                    </div>
-                    <div class="imgArea">
-                        <img src="../../../assets/img/BaseData3.png" alt="">
-                    </div>
-
-                </div>
-                <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>
-                            <div class="aiUseItem">
-                                <div class="useColor" style="background-color:#f4cf3b;"></div>
-                                <div>低频</div>
-                                <div>45%</div>
-                                <div>(0-25人)</div>
-                            </div>
-                        </div>
-
-
-                    </div>
-                    <div class="imgArea">
-                        <img src="../../../assets/img/BaseData3.png" alt="">
-                    </div>
-                </div>
-                <div class="rankingDiv">
-                    <div class="rankTitle">创作者排名TOP5</div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber">1</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber" style="background-color:#d9d9d9;">2</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber" style="background-color: #ae938c;">3</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber" style="background-color: #fff;border:1px solid gray;">4</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber" style="background-color: #fff;border:1px solid gray;">5</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                </div>
-                <div class="DataDiv">
-                    <div class="DataTitle">活跃度环比增长率</div>
-                    <div class="imgArea" style="padding: 41px 114px;">
-                        <img src="../../../assets/img/BaseData2.png">
-                    </div>
-
-                </div>
-                <div class="rankingArea">
-                    <div class="rankingDiv" style="width: 346px;">
-                        <div class="rankTitle">热门应用排名TOP5</div>
-                        <div>
-
-
-                            <div class="rankItem">
-                                <div class="item_left">
-                                    <div class="rankNumber">1</div>
-                                    <div class="rankText">应用1</div>
-                                </div>
-                                <div class="rankCount">2213次</div>
-                            </div>
-                            <div class="rankItem">
-                                <div class="item_left">
-                                    <div class="rankNumber" style="background-color:#d9d9d9;">2</div>
-                                    <div class="rankText">应用1</div>
-                                </div>
-                                <div class="rankCount">2213次</div>
-                            </div>
-                            <div class="rankItem">
-                                <div class="item_left">
-                                    <div class="rankNumber" style="background-color: #ae938c;">3</div>
-                                    <div class="rankText">应用1</div>
-                                </div>
-                                <div class="rankCount">2213次</div>
-                            </div>
-                            <div class="rankItem">
-                                <div class="item_left">
-                                    <div class="rankNumber" style="background-color: #fff;border:1px solid gray;">4
-                                    </div>
-                                    <div class="rankText">应用1</div>
-                                </div>
-                                <div class="rankCount">2213次</div>
-                            </div>
-                            <div class="rankItem">
-                                <div class="item_left">
-                                    <div class="rankNumber" style="background-color: #fff;border:1px solid gray;">5
-                                    </div>
-                                    <div class="rankText">应用1</div>
-                                </div>
-                                <div class="rankCount">2213次</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="rankingDiv" style="width: 346px;">
-                        <div class="rankTitle">热门应用排名TOP5</div>
-                        <div class="rankItem">
-                            <div class="item_left">
-                                <div class="rankNumber">1</div>
-                                <div class="rankText">应用1</div>
-                            </div>
-                            <div class="rankCount">2213次</div>
-                        </div>
-                        <div class="rankItem">
-                            <div class="item_left">
-                                <div class="rankNumber" style="background-color:#d9d9d9;">2</div>
-                                <div class="rankText">应用1</div>
-                            </div>
-                            <div class="rankCount">2213次</div>
-                        </div>
-                        <div class="rankItem">
-                            <div class="item_left">
-                                <div class="rankNumber" style="background-color: #ae938c;">3</div>
-                                <div class="rankText">应用1</div>
-                            </div>
-                            <div class="rankCount">2213次</div>
-                        </div>
-                        <div class="rankItem">
-                            <div class="item_left">
-                                <div class="rankNumber" style="background-color: #fff;border:1px solid gray;">4</div>
-                                <div class="rankText">应用1</div>
-                            </div>
-                            <div class="rankCount">2213次</div>
-                        </div>
-                        <div class="rankItem">
-                            <div class="item_left">
-                                <div class="rankNumber" style="background-color: #fff;border:1px solid gray;">5</div>
-                                <div class="rankText">应用1</div>
-                            </div>
-                            <div class="rankCount">2213次</div>
-                        </div>
-                    </div>
-                    <div class="rankingDiv" style="width: 346px;">
-                        <div class="rankTitle">热门应用排名TOP5</div>
-                        <div class="rankItem">
-                            <div class="item_left">
-                                <div class="rankNumber">1</div>
-                                <div class="rankText">应用1</div>
-                            </div>
-                            <div class="rankCount">2213次</div>
-                        </div>
-                        <div class="rankItem">
-                            <div class="item_left">
-                                <div class="rankNumber" style="background-color:#d9d9d9;">2</div>
-                                <div class="rankText">应用1</div>
-                            </div>
-                            <div class="rankCount">2213次</div>
-                        </div>
-                        <div class="rankItem">
-                            <div class="item_left">
-                                <div class="rankNumber" style="background-color: #ae938c;">3</div>
-                                <div class="rankText">应用1</div>
-                            </div>
-                            <div class="rankCount">2213次</div>
-                        </div>
-                        <div class="rankItem">
-                            <div class="item_left">
-                                <div class="rankNumber" style="background-color: #fff;border:1px solid gray;">4</div>
-                                <div class="rankText">应用1</div>
-                            </div>
-                            <div class="rankCount">2213次</div>
-                        </div>
-                        <div class="rankItem">
-                            <div class="item_left">
-                                <div class="rankNumber" style="background-color: #fff;border:1px solid gray;">5</div>
-                                <div class="rankText">应用1</div>
-                            </div>
-                            <div class="rankCount">2213次</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!-- 
-            <div style="display: flex;width: 100%;">
+            <AIApplications/>
+            
+            <!-- <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="">
@@ -383,261 +37,7 @@
             <img style="width: 100%;" src="../../../assets/img/uuu5.svg" alt=""> -->
         </div>
         <div v-if="pageEnd == 2">
-            <div class="tradTea">
-                <div class="rankingDiv">
-                    <div class="rankTitle">热门应用排名TOP5</div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber">1</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber" style="background-color:#d9d9d9;">2</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber" style="background-color: #ae938c;">3</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber" style="background-color: #fff;border:1px solid gray;">4</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber" style="background-color: #fff;border:1px solid gray;">5</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                </div>
-                <div class="DataDiv">
-                    <div class="DataTitle">课程分布</div>
-                    <div class="imgArea">
-                        <img src="../../../assets/img/BaseData5.png" alt="">
-                    </div>
-                </div>
-                <div class="rankingDiv">
-                    <div class="rankTitle">热门应用排名TOP5</div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber">1</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber" style="background-color:#d9d9d9;">2</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber" style="background-color: #ae938c;">3</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber" style="background-color: #fff;border:1px solid gray;">4</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber" style="background-color: #fff;border:1px solid gray;">5</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                </div>
-                <div class="DataDiv">
-                    <div class="DataTitle">AI辅助设计分析</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>
-                            <div class="aiUseItem">
-                                <div class="useColor" style="background-color:#f4cf3b;"></div>
-                                <div>低频</div>
-                                <div>45%</div>
-                                <div>(0-25人)</div>
-                            </div>
-                        </div>
-
-
-                    </div>
-                    <div class="imgArea">
-                        <img src="../../../assets/img/BaseData3.png" alt="">
-                    </div>
-                </div>
-                <div class="DataDiv">
-                    <div class="DataTitle">AI应用使用分析</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>
-                            <div class="aiUseItem">
-                                <div class="useColor" style="background-color:#f4cf3b;"></div>
-                                <div>低频</div>
-                                <div>45%</div>
-                                <div>(0-25人)</div>
-                            </div>
-                        </div>
-
-
-                    </div>
-                    <div class="imgArea">
-                        <img src="../../../assets/img/BaseData6.png" alt="">
-                    </div>
-                </div>
-                <div class="DataDiv">
-                    <div class="DataTitle">AI与教学融合度</div>
-
-                    <div class="imgArea" style="display: flex;">
-                        <img src="../../../assets/img/BaseData7.png" alt="">
-                        <img src="../../../assets/img/BaseData8.png" style="height: 100%;">
-                    </div>
-
-
-
-
-                </div>
-                <div class="classArea">
-                    <div class="DataDiv">
-                        <div class="DataTitle">课堂模块占分析</div>
-                        <div class="classDiv">
-                            <div class="imgArea">
-                                <img src="../../../assets/img/BaseData3.png" style="padding: 13px;">
-                            </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>
-
-                    </div>
-                    <div class="DataDiv">
-                        <div class="DataTitle">课堂观察综合结果</div>
-                        <div class="classView">
-                            <div class="imgArea">
-                                <img src="../../../assets/img/BaseData9.png" style="height: 100%;">
-                            </div>
-                            <div class="useCountArea">
-                                <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="allRating">
-                                    <div class="ratingText1">总体评价</div>
-                                    <div class="ratingText2">综合得分：7.7</div>
-                                    <div class="ratingText2">状态：良好</div>
-                                </div>
-                            </div>
-                        </div>
-
-
-                    </div>
-                </div>
-
-            </div>
+           <RegularTeaching/>
 
             <!-- <div style="display: flex;width: 100%;">
                 <img style="transform: scale(1.05);" src="../../../assets/img/chart6.svg" alt="">
@@ -650,98 +50,7 @@
             <img style="width: 100%;" src="../../../assets/img/chart9.svg" alt=""> -->
         </div>
         <div v-if="pageEnd == 3">
-            <div class="teaManage">
-                <div class="DataDiv">
-                    <div class="DataTitle">AI与教学融合度</div>
-
-                    <div class="imgArea" style="display: flex;">
-                        <img src="../../../assets/img/BaseData7.png" alt="">
-                        <img src="../../../assets/img/BaseData8.png" style="height: 100%;">
-                    </div>
-
-
-                </div>
-                <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>
-                            <div class="aiUseItem">
-                                <div class="useColor" style="background-color:#f4cf3b;"></div>
-                                <div>低频</div>
-                                <div>45%</div>
-                                <div>(0-25人)</div>
-                            </div>
-                        </div>
-
-
-                    </div>
-                    <div class="imgArea">
-                        <img src="../../../assets/img/BaseData3.png" alt="">
-                    </div>
-
-                </div>
-                <div class="rankingDiv">
-                    <div class="rankTitle">流程自定义分析</div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber">1</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber" style="background-color:#d9d9d9;">2</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber" style="background-color: #ae938c;">3</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber" style="background-color: #fff;border:1px solid gray;">4</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                    <div class="rankItem">
-                        <div class="item_left">
-                            <div class="rankNumber" style="background-color: #fff;border:1px solid gray;">5</div>
-                            <div class="rankText">应用1</div>
-                        </div>
-                        <div class="rankCount">2213次</div>
-                    </div>
-                </div>
-                <div>
-                    <div class="DataTitle">智能问答词云</div>
-                </div>
-            </div>
+           <TeacherManagement/>
             <!-- <img style="width: 100%;" src="../../../assets/img/chart11.svg" alt="">
             <div style="display: flex;width: 100%;">
                 <div>
@@ -757,7 +66,18 @@
 </template>
 
 <script>
+import BasicData from './BasicData.vue';
+import AIApplications from './AIApplications.vue';
+import RegularTeaching from './RegularTeaching.vue';
+import TeacherManagement from './TeacherManagement.vue';
 export default {
+    name: 'AdataKanban',
+    components: {
+        BasicData,
+        AIApplications,
+        RegularTeaching,
+        TeacherManagement,
+    },
     data() {
         return {
             barList: [
@@ -789,21 +109,12 @@ export default {
                     { name: '智能问答次数', num: '272' },
                 ],
             ],
-            DateList: [
-                { date: '年' },
-                { date: '月' },
-                { date: '日' },
-            ],
-            pageEnd: 0,
-            selectedDate: 0
+            pageEnd: 0
         }
     },
     methods: {
         cutPage(val) {
             this.pageEnd = val
-        },
-        selectDate(index) {
-            this.selectedDate = index;
         }
     }
 }
@@ -875,205 +186,4 @@ export default {
     font-size: 32px;
     line-height: 45px
 }
-
-.chartArea {
-    background-color: #eaeaea;
-    border-radius: 20px;
-}
-
-
-.selectDateArea {
-    display: flex;
-    justify-content: flex-end;
-    padding: 30px 42px;
-    ;
-}
-
-.selectDate {
-    display: flex;
-    justify-content: center;
-    height: 30px;
-    background-color: #fff;
-    border-radius: 20px;
-    gap: 17px;
-    box-shadow: 0px 4px 29px rgba(0, 0, 0, 0.1);
-}
-
-.dateDiv {
-    width: 63px;
-    line-height: 30px;
-    text-align: center;
-    border-radius: 15px;
-    cursor: pointer;
-    font-weight: bold;
-    font-size: 17px;
-}
-
-.dateDiv.active {
-    background-color: black;
-    color: #fff;
-}
-
-.BaseData {
-    display: flex;
-    flex-wrap: wrap;
-    padding-bottom: 30px;
-    margin: 10px 38px;
-    gap: 29px;
-}
-
-.DataDiv {
-    background-color: #fff;
-    border-radius: 20px;
-    padding: 20px;
-    box-shadow: 0px 4px 29px rgba(0, 0, 0, 0.1);
-}
-
-.allRating {
-    background-color: #fff;
-    border-radius: 20px;
-    padding: 20px;
-    box-shadow: 0px 4px 29px rgba(0, 0, 0, 0.1);
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.ratingText1 {
-    color: #0663fe;
-}
-
-.ratingText2 {
-    font-size: 14px;
-    color: #969ba3;
-}
-
-.DataDiv img {
-    width: 100%;
-    height: 100%;
-}
-
-.DataTitle,
-.rankTitle {
-    font-weight: bold;
-    font-size: 17px;
-}
-
-.imgArea {
-    padding: 41px;
-}
-
-.useCount {
-    display: grid;
-    justify-content: end;
-    gap: 5px;
-}
-
-.useItem {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 12px;
-}
-
-.useColor {
-    width: 11px;
-    border-radius: 10px;
-    height: 11px;
-}
-
-.aiUseCount {
-    display: flex;
-    gap: 28px;
-}
-
-.aiUseArea {
-    margin-top: 10px;
-}
-
-.aiUseItem {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 12px;
-    margin-top: 5px;
-}
-
-.aiApp,
-.tradTea,
-.teaManage {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 32px;
-    padding: 10px 20px;
-}
-
-.rankingDiv {
-    background-color: #fff;
-    box-shadow: 0px 4px 29px rgba(0, 0, 0, 0.1);
-    padding: 20px;
-    border-radius: 20px;
-    width: 263px;
-}
-
-.rankItem {
-    display: flex;
-    justify-content: space-between;
-    border-bottom: 1px solid #e5e1e1;
-    padding-bottom: 7px;
-    margin: 25px 10px;
-}
-
-.item_left,
-.classView {
-    display: flex;
-}
-
-.rankNumber {
-    background-color: #f0b343;
-    border-radius: 10px;
-    width: 17px;
-    height: 17px;
-    text-align: center;
-    font-size: 13px;
-    margin-right: 5px;
-}
-
-.rankText {
-    font-size: 13px;
-    font-weight: bold;
-}
-
-.rankCount {
-    font-size: 13px;
-    color: #2878fe;
-}
-
-.rankingArea {
-    display: flex;
-    gap: 26px;
-    background-color: #ededed;
-    padding: 20px;
-    border-radius: 20px;
-}
-
-.classArea {
-    display: flex;
-    gap: 26px;
-    background-color: #ededed;
-    padding: 30px;
-    border-radius: 20px;
-}
-
-.classDiv {
-    display: flex;
-    align-items: center;
-}
-
-.useCountArea {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    margin: 26px;
-}
 </style>

src/views/kanBan/components/BasicData.vue

@@ -0,0 +1,165 @@
+<template>
+    <div class="chartArea">
+        <div class="selectDateArea">
+            <div class="selectDate">
+                <div class='dateDiv' v-for="(i, index) in DateList" :key="index"
+                    :class="{ 'active': selectedDate === index }" @click="selectDate(index)">{{ i.date }}</div>
+            </div>
+        </div>
+        <div class="BaseData">
+            <div class="DataDiv">
+                <div class="DataTitle">教师活跃度</div>
+                <div class="imgArea">
+                    <img src="../../../assets/img/BaseData1.png" alt="">
+                </div>
+
+            </div>
+
+            <div class="DataDiv">
+                <div class="DataTitle">活跃度环比增长率</div>
+                <div class="imgArea">
+                    <img src="../../../assets/img/BaseData2.png" alt="">
+                </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>
+                    <div class="useItem">
+                        <div class="useColor" style="background-color:#f4cf3b;"></div>
+                        <div>低频</div>
+                        <div>45%</div>
+                        <div>(0-25人)</div>
+                    </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>
+            </div>
+        </div>
+
+    </div>
+</template>
+<script>
+export default {
+    name: 'BasicData',
+    data() {
+        return {
+            DateList: [
+                { date: '年' },
+                { date: '月' },
+                { date: '日' },
+            ],
+            selectedDate: 0
+        }
+    },
+    methods:{
+        selectDate(index) {
+            this.selectedDate = index;
+        }
+    }
+}
+</script>
+<style scoped>
+.chartArea {
+    background-color: #eaeaea;
+    border-radius: 20px;
+}
+
+
+.selectDateArea {
+    display: flex;
+    justify-content: flex-end;
+    padding: 30px 42px;
+    ;
+}
+
+.selectDate {
+    display: flex;
+    justify-content: center;
+    height: 30px;
+    background-color: #fff;
+    border-radius: 20px;
+    gap: 17px;
+    box-shadow: 0px 4px 29px rgba(0, 0, 0, 0.1);
+}
+
+.dateDiv {
+    width: 63px;
+    line-height: 30px;
+    text-align: center;
+    border-radius: 15px;
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 17px;
+}
+
+.dateDiv.active {
+    background-color: black;
+    color: #fff;
+}
+
+.BaseData {
+    display: flex;
+    flex-wrap: wrap;
+    padding-bottom: 30px;
+    margin: 10px 38px;
+    gap: 29px;
+}
+
+.DataDiv {
+    background-color: #fff;
+    border-radius: 20px;
+    padding: 20px;
+    box-shadow: 0px 4px 29px rgba(0, 0, 0, 0.1);
+}
+.DataTitle{
+    font-weight: bold;
+    font-size: 17px;
+}
+.imgArea {
+    padding: 41px;
+}
+.useCount {
+    display: grid;
+    justify-content: end;
+    gap: 5px;
+}
+
+.useItem {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+}
+
+.useColor {
+    width: 11px;
+    border-radius: 10px;
+    height: 11px;
+}
+</style>

src/views/kanBan/components/RegularTeaching.vue

@@ -0,0 +1,250 @@
+<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>
+        </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>
+                    <div class="aiUseItem">
+                        <div class="useColor" style="background-color:#f4cf3b;"></div>
+                        <div>低频</div>
+                        <div>45%</div>
+                        <div>(0-25人)</div>
+                    </div>
+                </div>
+
+
+            </div>
+            <div class="imgArea" style="padding: 65px 106px;">
+                <img src="../../../assets/img/BaseData6.png" alt="">
+            </div>
+        </div>
+        <div class="DataDiv">
+            <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>
+        </div>
+        <div class="classArea">
+            <div class="DataDiv">
+                <div class="DataTitle">课堂模块占分析</div>
+                <div class="classDiv">
+                    <div class="imgArea" style="padding: 41px 68px;">
+                        <img src="../../../assets/img/BaseData3.png" style="padding: 13px;">
+                    </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>
+
+            </div>
+            <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>
+                    <div class="useCountArea">
+                        <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="allRating">
+                            <div class="ratingText1">总体评价</div>
+                            <div class="ratingText2">综合得分：7.7</div>
+                            <div class="ratingText2">状态：良好</div>
+                        </div>
+                    </div>
+                </div>
+
+
+            </div>
+        </div>
+
+    </div>
+</template>
+<script>
+import ranking from './ranking.vue'
+import countPercentage from './countPercentage.vue'
+export default {
+    name: 'RegularTeaching',
+    components: {
+        ranking,
+        countPercentage
+    },
+}
+</script>
+<style scoped>
+.tradTea {
+    display: flex;
+    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{
+    font-weight: bold;
+    font-size: 17px;
+}
+.imgArea {
+    padding: 41px;
+}
+.aiUseCount {
+    display: flex;
+    gap: 28px;
+}
+
+.aiUseArea {
+    margin-top: 10px;
+}
+
+.aiUseItem {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    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;
+    gap: 5px;
+}
+
+.useItem {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+}
+
+.useColor {
+    width: 11px;
+    border-radius: 10px;
+    height: 11px;
+}
+.allRating {
+    background-color: #fff;
+    border-radius: 20px;
+    padding: 20px;
+    box-shadow: 0px 4px 29px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.ratingText1 {
+    color: #0663fe;
+}
+
+.ratingText2 {
+    font-size: 14px;
+    color: #969ba3;
+}
+.classArea {
+    display: flex;
+    gap: 26px;
+    background-color: #ededed;
+    padding: 30px;
+    border-radius: 20px;
+}
+.classView {
+    display: flex;
+}
+</style>

src/views/kanBan/components/TeacherManagement.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="teaManage">
+        <div class="DataDiv">
+            <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>
+        </div>
+        <countPercentage :title="'流程自定义分类'" />
+        <ranking :title="'流程自定义分析'" />
+
+        <div class="DataDiv">
+            <div class="DataTitle">智能问答词云</div>
+            <div style="padding: 41px 212px;"></div>
+        </div>
+    </div>
+</template>
+<script>
+import ranking from './ranking.vue'
+import countPercentage from './countPercentage.vue'
+export default {
+    name: 'TeacherManagement',
+    components: {
+        ranking,
+        countPercentage
+    },
+}
+</script>
+<style scoped>
+.teaManage {
+    display: flex;
+    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{
+    font-weight: bold;
+    font-size: 17px;
+}
+.imgArea {
+    padding: 41px;
+}
+</style>

src/views/kanBan/components/countPercentage.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="DataDiv">
+        <div class="DataTitle">{{ title }}</div>
+        <div class="aiUseCount">
+            <div class="aiUseArea" v-for="(area, areaIndex) in useData" :key="areaIndex">
+                <div class="aiUseItem" v-for="(item, itemIndex) in area" :key="itemIndex">
+                    <div class="useColor" :style="{ backgroundColor: item.color }"></div>
+                    <div>{{ item.label }}</div>
+                    <div>{{ item.percentage }}</div>
+                    <div>{{ item.range }}</div>
+                </div>
+            </div>
+        </div>
+        <div class="imgArea">
+            <img src="../../../assets/img/BaseData3.png" alt="">
+        </div>
+    </div>
+</template>
+<script>
+export default {
+  name: "countPercentage",
+  props: {
+    title: {
+      type: String,
+      default: "应用使用分类", // 默认标题
+    },
+    useData: {
+      type: Array,
+      default: () => [
+        [
+          { color: "#3681fc", label: "高频", percentage: "45%", range: "(40-80人)" },
+          { color: "#1f94ff", label: "中高频", percentage: "30%", range: "(0-25人)" },
+        ],
+        [
+          { color: "#8979ff", label: "中频", percentage: "45%", range: "(0-25人)" },
+          { color: "#f4cf3b", label: "低频", percentage: "45%", range: "(0-25人)" },
+        ],
+      ],
+    },
+  },
+};
+</script>
+<style scoped>
+.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 {
+    font-weight: bold;
+    font-size: 17px;
+}
+.aiUseCount {
+    display: flex;
+    gap: 28px;
+}
+
+.aiUseArea {
+    margin-top: 10px;
+}
+
+.aiUseItem {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    margin-top: 5px;
+}
+.useColor {
+    width: 11px;
+    border-radius: 10px;
+    height: 11px;
+}
+.imgArea {
+    padding: 65px 92px;
+}
+</style>

src/views/kanBan/components/ranking.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="rankingDiv">
+        <div class="rankTitle">{{ title }}</div>
+        <div class="rankItem" v-for="(i, index) in useData" :key="index">
+            <div class="item_left">
+                <div class="rankNumber" :style="{
+                    backgroundColor: i.backgroundColor,
+                    border: i.hasBorder ? '1px solid gray' : 'none',
+                }">{{ i.rank }}</div>
+                <div class="rankText">{{ i.name }}</div>
+            </div>
+            <div class="rankCount">{{ i.count }}</div>
+        </div>
+
+    </div>
+</template>
+<script>
+export default {
+    name: "rankingDiv",
+    props: {
+        title: {
+            type: String,
+            default: "热门应用排名TOP5", // 默认标题
+        },
+        useData: {
+            type: Array,
+            default: () => [
+                { rank: 1, name: "应用1", count: "2213次", backgroundColor: "#f0b343" },
+                { rank: 2, name: "应用2", count: "2213次", backgroundColor: "#d9d9d9" },
+                { rank: 3, name: "应用3", count: "2213次", backgroundColor: "#ae938c" },
+                { rank: 4, name: "应用4", count: "2213次", backgroundColor: "#fff", hasBorder: true },
+                { rank: 5, name: "应用5", count: "2213次", backgroundColor: "#fff", hasBorder: true },
+            ],
+        },
+    },
+}
+</script>
+<style scoped>
+.rankingDiv {
+    background-color: #fff;
+    box-shadow: 0px 4px 29px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    border-radius: 20px;
+    width: 263px;
+    display: flex;
+    flex-direction: column;
+}
+
+.rankTitle {
+    font-weight: bold;
+    font-size: 17px;
+}
+
+.rankItem {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #e5e1e1;
+    padding-bottom: 7px;
+    margin: 25px 10px;
+}
+
+.item_left {
+    display: flex;
+}
+
+.rankNumber {
+    border-radius: 10px;
+    width: 17px;
+    height: 17px;
+    text-align: center;
+    font-size: 13px;
+    margin-right: 5px;
+}
+
+.rankText {
+    font-size: 13px;
+    font-weight: bold;
+}
+
+.rankCount {
+    font-size: 13px;
+    color: #2878fe;
+}
+</style>