|
|
@@ -1,13 +1,14 @@
|
|
|
<template>
|
|
|
<div class="datakanban">
|
|
|
<div class="barList">
|
|
|
- <div @click="cutPage(index)" :class="[pageEnd == index ? 'Selected' : '' ]" v-for="(i,index) in barList" :key="index">
|
|
|
+ <div @click="cutPage(index)" :class="[pageEnd == index ? 'Selected' : '']" v-for="(i, index) in barList"
|
|
|
+ :key="index">
|
|
|
{{ i.name }}
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="dataExponent">
|
|
|
- <div class="dataExponentCon" v-for="(i,index) in dataExponentList[pageEnd]" :key="index + 'p'">
|
|
|
+ <div class="dataExponentCon" v-for="(i, index) in dataExponentList[pageEnd]" :key="index + 'p'">
|
|
|
<div class="dataExponentConTit">
|
|
|
{{ i.name }}
|
|
|
</div>
|
|
|
@@ -18,23 +19,360 @@
|
|
|
</div>
|
|
|
|
|
|
<div v-if="pageEnd == 0">
|
|
|
- <img style="width: 100%;" src="../../../assets/img/uuu4.svg" alt="">
|
|
|
- <!-- <div style="display: flex;flex-direction: column;">
|
|
|
- <div style="display: flex;justify-content: flex-end;">
|
|
|
- <img src="../../../assets/img/cs1.svg" alt="">
|
|
|
+ <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 style="display: flex;justify-content: space-between;">
|
|
|
- <img style="width: 200px;" src="../../../assets/img/uuu4.svg" alt="">
|
|
|
- <img style="width: 200px;" src="../../../assets/img/uuu5.svg" alt="">
|
|
|
- </div>
|
|
|
- <div style="display: flex;justify-content: space-between;">
|
|
|
- <div> <img src="../../../assets/img/cs3.svg" alt=""></div>
|
|
|
- <div> <img src="../../../assets/img/cs4.svg" alt=""></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> -->
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!-- <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%;">
|
|
|
<img style="transform: scale(1.05);" src="../../../assets/img/chart2.svg" alt="">
|
|
|
<div>
|
|
|
@@ -42,28 +380,376 @@
|
|
|
<img src="../../../assets/img/chart5.svg" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
- <img style="width: 100%;" src="../../../assets/img/uuu5.svg" alt="">
|
|
|
+ <img style="width: 100%;" src="../../../assets/img/uuu5.svg" alt=""> -->
|
|
|
</div>
|
|
|
<div v-if="pageEnd == 2">
|
|
|
- <div style="display: flex;width: 100%;">
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <!-- <div style="display: flex;width: 100%;">
|
|
|
<img style="transform: scale(1.05);" src="../../../assets/img/chart6.svg" alt="">
|
|
|
<div>
|
|
|
<img src="../../../assets/img/chart10.svg" alt="">
|
|
|
<img src="../../../assets/img/chart8.svg" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
- <img style="width: 100%;" src="../../../assets/img/chart7.svg" alt="">
|
|
|
- <img style="width: 100%;" src="../../../assets/img/chart9.svg" alt="">
|
|
|
+ <img style="width: 100%;" src="../../../assets/img/chart7.svg" alt="">
|
|
|
+ <img style="width: 100%;" src="../../../assets/img/chart9.svg" alt=""> -->
|
|
|
</div>
|
|
|
<div v-if="pageEnd == 3">
|
|
|
- <img style="width: 100%;" src="../../../assets/img/chart11.svg" alt="">
|
|
|
+ <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>
|
|
|
+ <!-- <img style="width: 100%;" src="../../../assets/img/chart11.svg" alt="">
|
|
|
<div style="display: flex;width: 100%;">
|
|
|
<div>
|
|
|
<img style="object-view-box: inset(4% 16% 3% 0%);" src="../../../assets/img/chart12.svg" alt="">
|
|
|
<img style="object-view-box: inset(3% 0% 6% 0%);" src="../../../assets/img/chart13.svg" alt="">
|
|
|
</div>
|
|
|
<img style="object-view-box: inset(5% 4% 4% 4%);" src="../../../assets/img/chart14.svg" alt="">
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
|
|
|
|
|
|
@@ -71,54 +757,64 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data(){
|
|
|
- return{
|
|
|
- barList:[
|
|
|
- {name:'基础数据',ind: 1},
|
|
|
- {name:'AI应用',ind: 2},
|
|
|
- {name:'常规教学',ind: 3},
|
|
|
- {name:'教师管理',ind: 4},
|
|
|
- ],
|
|
|
- dataExponentList:[
|
|
|
- [
|
|
|
- {name:'教师总量',num:1254},
|
|
|
- {name:'教师总量',num:3721},
|
|
|
- {name:'月登录总数',num:4579},
|
|
|
- {name:'月登录环比',num:'+15%'},
|
|
|
- ],[
|
|
|
- {name:'AI应用数量',num:1254},
|
|
|
- {name:'今日用户数量',num:3721},
|
|
|
- {name:'知识库数量',num:4579},
|
|
|
- {name:'文件数量',num:'+15%'},
|
|
|
- ],[
|
|
|
- {name:'课程总量',num:1254},
|
|
|
- {name:'本月新增课程',num:3721},
|
|
|
- {name:'新增课程环比',num:4579},
|
|
|
- {name:'AI应用嵌入数量',num:'272'},
|
|
|
- ],[
|
|
|
- {name:'表单总量',num:1254},
|
|
|
- {name:'表单回收率',num:3721},
|
|
|
- {name:'表单平均处理时长',num:4579},
|
|
|
- {name:'智能问答次数',num:'272'},
|
|
|
- ],
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ barList: [
|
|
|
+ { name: '基础数据', ind: 1 },
|
|
|
+ { name: 'AI应用', ind: 2 },
|
|
|
+ { name: '常规教学', ind: 3 },
|
|
|
+ { name: '教师管理', ind: 4 },
|
|
|
+ ],
|
|
|
+ dataExponentList: [
|
|
|
+ [
|
|
|
+ { name: '教师总量', num: 1254 },
|
|
|
+ { name: '教师总量', num: 3721 },
|
|
|
+ { name: '月登录总数', num: 4579 },
|
|
|
+ { name: '月登录环比', num: '+15%' },
|
|
|
+ ], [
|
|
|
+ { name: 'AI应用数量', num: 1254 },
|
|
|
+ { name: '今日用户数量', num: 3721 },
|
|
|
+ { name: '知识库数量', num: 4579 },
|
|
|
+ { name: '文件数量', num: '+15%' },
|
|
|
+ ], [
|
|
|
+ { name: '课程总量', num: 1254 },
|
|
|
+ { name: '本月新增课程', num: 3721 },
|
|
|
+ { name: '新增课程环比', num: 4579 },
|
|
|
+ { name: 'AI应用嵌入数量', num: '272' },
|
|
|
+ ], [
|
|
|
+ { name: '表单总量', num: 1254 },
|
|
|
+ { name: '表单回收率', num: 3721 },
|
|
|
+ { name: '表单平均处理时长', num: 4579 },
|
|
|
+ { name: '智能问答次数', num: '272' },
|
|
|
],
|
|
|
- pageEnd: 0,
|
|
|
- }
|
|
|
+ ],
|
|
|
+ DateList: [
|
|
|
+ { date: '年' },
|
|
|
+ { date: '月' },
|
|
|
+ { date: '日' },
|
|
|
+ ],
|
|
|
+ pageEnd: 0,
|
|
|
+ selectedDate: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ cutPage(val) {
|
|
|
+ this.pageEnd = val
|
|
|
},
|
|
|
- methods:{
|
|
|
- cutPage(val){
|
|
|
- this.pageEnd = val
|
|
|
- }
|
|
|
+ selectDate(index) {
|
|
|
+ this.selectedDate = index;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.datakanban{
|
|
|
+.datakanban {
|
|
|
width: 100%;
|
|
|
}
|
|
|
-.barList{
|
|
|
+
|
|
|
+.barList {
|
|
|
display: flex;
|
|
|
gap: 42px;
|
|
|
font-family: PingFang SC;
|
|
|
@@ -128,16 +824,19 @@
|
|
|
color: #969BA3;
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
-.barList > div{
|
|
|
+
|
|
|
+.barList>div {
|
|
|
cursor: pointer;
|
|
|
height: 23px;
|
|
|
line-height: 23px;
|
|
|
}
|
|
|
-.Selected{
|
|
|
+
|
|
|
+.Selected {
|
|
|
color: #0663FE;
|
|
|
border-bottom: 2px solid #0663FE;
|
|
|
}
|
|
|
-.dataExponent{
|
|
|
+
|
|
|
+.dataExponent {
|
|
|
width: 100%;
|
|
|
height: 120px;
|
|
|
display: grid;
|
|
|
@@ -148,7 +847,8 @@
|
|
|
align-items: center;
|
|
|
/* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
|
|
|
}
|
|
|
-.dataExponentCon{
|
|
|
+
|
|
|
+.dataExponentCon {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
@@ -156,20 +856,224 @@
|
|
|
height: 50%;
|
|
|
border-right: 1px solid #D9D9D9;
|
|
|
}
|
|
|
-.dataExponentCon:nth-child(4){
|
|
|
+
|
|
|
+.dataExponentCon:nth-child(4) {
|
|
|
border: none;
|
|
|
}
|
|
|
-.dataExponentConTit{
|
|
|
+
|
|
|
+.dataExponentConTit {
|
|
|
font-family: PingFang SC;
|
|
|
font-size: 14px;
|
|
|
line-height: 100%;
|
|
|
color: #969BA3;
|
|
|
}
|
|
|
-.dataExponentConNum{
|
|
|
+
|
|
|
+.dataExponentConNum {
|
|
|
height: 45px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 600;
|
|
|
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>
|
