pbl-teacher-table/src/components/pages/dataBoardNew/project/index.vue

<template>
  <div class="body1" v-loading="isLoading">
    <!-- 课程数据 -->
    <div class="left">
      <div class="top">
        <div class="titleBox" style="justify-content: space-between">
          <div class="title">基础概况</div>
          <el-select v-model="cType7" class="selectBox" style="width: 110px">
            <el-option label="全部课程" value="全部课程"></el-option>
          </el-select>
        </div>
        <div class="dataBox">
          <div class="info_box">
            <div class="info blueBG">
              <span>项目总数</span>
              <span>{{ allCourse }}</span>
            </div>
            <div class="info blueBG">
              <span>本月新增项目环比</span>
              <span v-if="loginCountMonthArray.length">{{
                loginCountMonthArray[loginCountMonthArray.length - 1].course -
                loginCountMonthArray[loginCountMonthArray.length - 2].course < 0 ? 0 : (
                  (loginCountMonthArray[loginCountMonthArray.length - 1].course -
                    loginCountMonthArray[loginCountMonthArray.length - 2].course) / (allCourse -
                      loginCountMonthArray[loginCountMonthArray.length - 1].course)).toFixed(2) * 100 + "%" }}</span>
                  <span v-else>0</span>
            </div>
            <div class="info blueBG">
              <span>模板项目总数</span>
              <span>{{ courseTemplate }}</span>
            </div>
            <div class="info blueBG">
              <span>本月新增项目总数</span>
              <span v-if="loginCountMonthArray.length">{{
                loginCountMonthArray[loginCountMonthArray.length - 1].course
              }}</span>
              <span v-else>0</span>
            </div>
          </div>
          <TeaFre style="height: calc(100% - 140px)" :monthArray="loginCountMonthArray"></TeaFre>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div class="title" :class="{ isClick: skType == 0 }" @click="skType = 0"
            style="cursor: pointer; padding: 0 0 5px 0">
            项目时长
          </div>
          <div class="title" :class="{ isClick: skType == 1 }" @click="skType = 1"
            style="cursor: pointer; padding: 0 0 5px 0">
            作业数量
          </div>
          <!-- <el-select v-model="cType" class="selectBox" style="width: 110px">
            <el-option label="全部年级" value="全部年级"></el-option>
            <el-option label="一年级" value="一年级"></el-option>
            <el-option label="二年级" value="二年级"></el-option>
            <el-option label="三年级" value="三年级"></el-option>
          </el-select>
          <div class="timeDiv">
            <div @click="tType = 0" :class="{ isClick: tType == 0 }">周</div>
            <div @click="tType = 1" :class="{ isClick: tType == 1 }">月</div>
            <div @click="tType = 2" :class="{ isClick: tType == 2 }">学期</div>
          </div> -->
        </div>
        <div class="info_box" v-if="skType == 1">
          <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
            <span>作业数量</span>
            <span>{{ worksCount }}</span>
          </div>
          <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
            <span>项目开展总数</span>
            <span>{{ haveWorksCourse }}</span>
          </div>
          <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
            <span>项目平均作业数量</span>
            <span>{{
              !worksCount ? 0 : (worksCount / haveWorksCourse).toFixed(0)
            }}</span>
          </div>
        </div>
        <div class="info_box" v-if="skType == 0">
          <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
            <span>累计时长</span>
            <span>{{ 132 }}</span>
          </div>
          <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
            <span>项目开展总数</span>
            <span>{{ haveWorksCourse }}</span>
          </div>
          <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
            <span>项目平均时长</span>
            <span>{{ 18 }}</span>
          </div>
        </div>
        <div class="dataBox" style="height: calc(100% - 110px);">
          <ToolUse style="height: calc(100%)" v-if="skType == 1" :worksYearArray="worksYearArray"></ToolUse>
          <Bar style="height: calc(100%)" v-if="skType == 0"></Bar>
          <!-- <div class="otherCss">
            <div v-if="!oType">切换为柱状图</div>
            <div v-if="oType">切换为热力图</div>
            <div class="otherImg" @click="otherEchart">
              <img src="../../../../assets/icon/other.png" alt="" />
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="center">
      <div class="top">
        <div class="titleBox">
          <div class="title" :class="{ isClick: courseType == 0 }" @click="courseType = 0"
            style="cursor: pointer; padding: 0 0 5px 0">
            项目分布
          </div>
          <div class="title" :class="{ isClick: courseType == 1 }" @click="courseType = 1"
            style="cursor: pointer; padding: 0 0 5px 0">
            项目总数增幅
          </div>
        </div>
        <div class="dataBox">
          <CateRank v-if="courseType == 0" style="height: calc(100%)"></CateRank>
          <CourseNum v-if="courseType == 1" style="height: calc(100%)"></CourseNum>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox" style="justify-content: space-between">
          <div class="title">项目开展情况</div>
          <!-- <div v-if="!shType" style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            ">
            <el-select v-model="cType8" class="selectBox" style="width: 110px">
              <el-option label="全部年级" value="全部年级"></el-option>
            </el-select>
            <el-select v-model="cType9" class="selectBox" style="width: 110px">
              <el-option label="全部学科" value="全部学科"></el-option>
            </el-select>
          </div> -->
          <!-- <div v-if="shType" style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            ">
            <el-select v-model="cType1" class="selectBox" style="width: 110px">
              <el-option label="全部年级" value="全部年级"></el-option>
            </el-select>
            <el-select v-model="cType2" class="selectBox" style="width: 110px">
              <el-option label="全部学科" value="全部学科"></el-option>
            </el-select>
            <el-select v-model="cType3" class="selectBox" style="width: 110px">
              <el-option label="全部主题" value="全部主题"></el-option>
            </el-select>
          </div> -->
        </div>
        <div class="dataBox">
          <CourseTime v-if="!shType" style="height: calc(100% - 30px)"></CourseTime>
          <div class="info_box" v-if="shType">
            <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
              <span>项目实施总数</span>
              <span>{{ haveWorksCourse }}</span>
            </div>
            <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
              <span>平台实施项目占比</span>
              <span>{{ haveWorksCourse && allCourse ? (haveWorksCourse / allCourse * 100).toFixed(0) + '%' : 0 + '%' }}</span>
            </div>
            <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
              <span>项目平均任务数量</span>
              <span>{{ taskCount && allCourse ? (taskCount / allCourse).toFixed(0) : 0 }}</span>
            </div>
            <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
              <span>项目平均作业数量</span>
              <span>{{ worksCount && allCourse ? (worksCount / allCourse).toFixed(0) : 0 }}</span>
            </div>
          </div>
          <WorkNum v-if="shType" style="height: calc(100% - 105px)" :workNumList="workNumList"></WorkNum>
          <div class="otherCss">
            <div v-if="!shType">转换为散点图</div>
            <div v-if="shType">转换为堆积柱状图</div>
            <div class="otherImg" @click="shEchart">
              <img src="../../../../assets/icon/other.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="top" style="border-radius: 5px">
        <div class="titleBox" style="justify-content: space-between">
          <div style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            ">
            <div class="title" :class="{ isClick: toolType == 0 }" @click="toolType = 0"
              style="cursor: pointer; padding: 0 0 5px 0">
              项目占比
            </div>
            <div class="title" :class="{ isClick: toolType == 1 }" @click="toolType = 1"
              style="cursor: pointer; padding: 0 0 5px 0">
              工具使用
            </div>
          </div>
          <!-- <el-select v-model="cType4" class="selectBox" style="width: 110px" v-if="toolType == 0">
            <el-option label="按年级" value="按年级"></el-option>
            <el-option label="按学科" value="按学科"></el-option>
            <el-option label="按主题" value="按主题"></el-option>
          </el-select> -->
          <!-- <div v-if="toolType == 1" style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            ">
            <el-select v-model="cType5" class="selectBox" style="width: 110px">
              <el-option label="全部学科" value="全部学科"></el-option>
              <el-option label="语文" value="语文"></el-option>
              <el-option label="数学" value="数学"></el-option>
            </el-select>
            <el-select v-model="cType6" class="selectBox" style="width: 110px">
              <el-option label="全部年级" value="全部年级"></el-option>
              <el-option label="一年级" value="一年级"></el-option>
              <el-option label="二年级" value="二年级"></el-option>
            </el-select>
          </div> -->
        </div>
        <div class="dataBox">
          <CourseAna style="height: calc(100% - 40px)" v-if="toolType == 0"></CourseAna>
          <ToolChart style="height: calc(100% - 40px)" v-if="toolType == 1" :toolArray="toolList"></ToolChart>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div class="title">项目学科分布</div>
        </div>
        <div class="dataBox">
          <subjuect style="height: calc(100% - 30px)" v-if="!xtType"></subjuect>
          <WorkTime style="height: calc(100% - 30px)" v-if="xtType" :personArray="personList"></WorkTime>
          <div class="otherCss">
            <div v-if="!xtType">转换为人员协同</div>
            <div v-if="xtType">转换为学科协同</div>
            <div class="otherImg" @click="xtEchart">
              <img src="../../../../assets/icon/other.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TeaFre from "./chartList/teaFre.vue";
import ToolUse from "./chartList/toolUse.vue";
import CateRank from "./chartList/cateRank.vue";
import WorkNum from "./chartList/workNum.vue";
import CourseTime from "./chartList/courseTime.vue";
import CourseAna from "./chartList/courseAna.vue";
import WorkTime from "./chartList/workTime.vue";
import Bar from "./chartList/bar.vue";
import CourseNum from "./chartList/courseNum.vue";
import ToolChart from "./chartList/toolChart.vue";
import subjuect from "./chartList/subjuect.vue";
export default {
  components: {
    TeaFre,
    ToolUse,
    CateRank,
    WorkNum,
    CourseTime,
    CourseAna,
    WorkTime,
    Bar,
    CourseNum,
    ToolChart,
    subjuect
  },
  props: {
    oid: {
      type: String,
    },
    org: {
      type: String,
    },
  },
  data() {
    return {
      isLoading: false,
      cType: "全部年级",
      cType1: "全部年级",
      cType2: "全部学科",
      cType3: "全部主题",
      cType4: "按年级",
      cType5: "全部学科",
      cType6: "全部年级",
      cType7: "全部课程",
      cType8: "全部年级",
      cType9: "全部学科",
      toolType: 0,
      tType: 0,
      skType: 0,
      courseType: 0,
      sType: 0,
      oType: false,
      shType: false,
      xtType: false,
      allCourse: 0,
      courseTemplate: 0,
      loginCountMonthArray: [],
      haveWorksCourse: 0,
      worksCount: 0,
      workNumList: [],
      taskCount: 0,
      toolList: [],
      personList: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    otherEchart() {
      this.oType = !this.oType;
    },
    shEchart() {
      this.shType = !this.shType;
    },
    xtEchart() {
      this.xtType = !this.xtType;
    },
    format(percentage) {
      return percentage + '%';
    },
    getData() {
      this.isLoading = true;
      let params = [
        {
          oid: this.oid,
          org: this.org,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "selectDataBoardStudentCourseNew", params)
        .then((res) => {
          this.isLoading = false;
          let _grade = res.data[0]; //赛道
          let _subject = res.data[1]; //主题
          this.allCourse = res.data[2][0].count; //课程总数
          let _timeCourse = res.data[3]; //查询半年内全部课程
          this.courseTemplate = res.data[4][0].count; //查询模板课程总数

          //将数据根据time里面的月份分成多个数组
          let loginCountMonthArray = [];
          const date = new Date();
          var Month = date.getMonth() + 1;
          var Year = date.getFullYear();
          for (var i = Month; i > Month - 6; i--) {
            if (i <= 0) {
              loginCountMonthArray.push({
                Year: Year - 1,
                Month: 12 + i,
                course: 0,
              });
            } else {
              loginCountMonthArray.push({
                Month: i,
                Year: Year,
                course: 0,
              });
            }
          }
          loginCountMonthArray = loginCountMonthArray.reverse();
          for (var i = 0; i < _timeCourse.length; i++) {
            let _date = new Date(_timeCourse[i].time);
            var _month = _date.getMonth() + 1;
            var _year = _date.getFullYear();
            for (var j = 0; j < loginCountMonthArray.length; j++) {
              if (
                _month == loginCountMonthArray[j].Month &&
                _year == loginCountMonthArray[j].Year
              ) {
                loginCountMonthArray[j].course++;
                break;
              }
            }
          }
          this.loginCountMonthArray = loginCountMonthArray;

          this.haveWorksCourse = res.data[5][0].count; //项目开展总数
          this.worksCount = res.data[6][0].count; //作业数量

          let worksArray = res.data[7];//一年内提交的作业
          let worksYearArray = []
          for (var i = Month; i > Month - 12; i--) {
            if (i <= 0) {
              worksYearArray.push({
                Year: Year - 1,
                Month: 12 + i,
                mon: 0,
                tue: 0,
                wed: 0,
                thur: 0,
                fri: 0,
                sat: 0,
                sun: 0,
              })
            } else {
              worksYearArray.push({
                Month: i,
                Year: Year,
                mon: 0,
                tue: 0,
                wed: 0,
                thur: 0,
                fri: 0,
                sat: 0,
                sun: 0,
              })
            }
          }
          worksYearArray = worksYearArray.reverse()
          for (var i = 0; i < worksArray.length; i++) {
            let _date = new Date(worksArray[i].create_at)
            var _month = _date.getMonth() + 1
            var _year = _date.getFullYear()
            var _day = _date.getDay()
            let dayArray = ['sun', 'mon', 'tue', 'wed', 'thur', 'fri', 'sat']
            for (var j = 0; j < worksYearArray.length; j++) {
              if (_month == worksYearArray[j].Month && _year == worksYearArray[j].Year) {
                worksYearArray[j][dayArray[_day]]++
                break;
              }
            }
          }
          console.log(worksYearArray);
          this.worksYearArray = worksYearArray


          let _workCourse = res.data[8]; //带作业的课程
          let _taskCount = 0 //任务数量
          var toolAllArray = [
            { name: "电子白板", value: 0 },
            { name: "思维导图", value: 0 },
            { name: "表格", value: 0 },
            { name: "文档", value: 0 },
            { name: "资源库", value: 0 },
            { name: "拍照", value: 0 },
            { name: "投票", value: 0 },
            { name: "CocoPi", value: 0 },
            { name: "其他", value: 0 },
          ];
          var twoPerson = 0,threePerson = 0,fivePerson = 0,sevenPerson = 0;
          let personList = []
          var wList = [];
          for (var i = 0; i < _workCourse.length; i++) {
            if (!wList[_workCourse[i].courseId]) {
              wList[_workCourse[i].courseId] = {
                cid: _workCourse[i].courseId,
                title: _workCourse[i].title,
                task: 0,
                work: 0,
              };
              let chapters = JSON.parse(_workCourse[i].chapters);
              for (var j = 0; j < chapters.length; j++) {
                if (wList[_workCourse[i].courseId].task == 0) {
                  wList[_workCourse[i].courseId].task =
                    chapters[j].chapterInfo[0].taskJson.length;
                } else {
                  wList[_workCourse[i].courseId].task +=
                    chapters[j].chapterInfo[0].taskJson.length;
                }
                _taskCount += chapters[j].chapterInfo[0].taskJson.length;
                let _taskJson = chapters[j].chapterInfo[0].taskJson
                for (
                    var k = 0;
                    k < _taskJson.length;
                    k++
                  ) {
                    for (
                      var q = 0;
                      q <
                        _taskJson[k].toolArray.length;
                      q++
                    ) {
                        if(_taskJson[k].toolArray[q].tool == 1){
                          toolAllArray[0].value++;
                        }else if(_taskJson[k].toolArray[q].tool == 3){
                          toolAllArray[1].value++;
                        }else if(_taskJson[k].toolArray[q].tool == 48){
                          toolAllArray[2].value++;
                        }else if(_taskJson[k].toolArray[q].tool == 52){
                          toolAllArray[3].value++;
                        }else if(_taskJson[k].toolArray[q].tool == 51){
                          toolAllArray[4].value++;
                        }else if(_taskJson[k].toolArray[q].tool == 54){
                          toolAllArray[5].value++;
                        }else if(_taskJson[k].toolArray[q].tool == 56){
                          toolAllArray[6].value++;
                        }else if(_taskJson[k].toolArray[q].tool == 57){
                          toolAllArray[7].value++;
                        }else{
                          toolAllArray[8].value++;
                        }
                    }
                  }
              }
              if(_workCourse[i].course_teacher){
                if(_workCourse[i].course_teacher.split(',').length <= 2){
                  twoPerson++
                }else if(4 >= _workCourse[i].course_teacher.split(',').length && _workCourse[i].course_teacher.split(',').length > 2){
                  threePerson++;
                }else if(6 >= _workCourse[i].course_teacher.split(',').length && _workCourse[i].course_teacher.split(',').length > 4){
                  fivePerson++;
                }else if(_workCourse[i].course_teacher.split(',').length >= 7){
                  sevenPerson++;
                }
              }
            }
          }
          for (var i = 0; i < _workCourse.length; i++) {
            let a = Object.keys(wList);
            for (var j = 0; j < Object.keys(wList).length; j++) {
              if (_workCourse[i].courseId == wList[a[j]].cid && _workCourse[i].id) {
                wList[a[j]].work++;
              }
            }
          }
          var workNumList = Object.values(wList).map((item) => [
            item.task,
            item.work,
            item.title,
            item.cid,
          ]);
          this.workNumList = workNumList;
          this.taskCount = _taskCount
          this.toolList = toolAllArray;
          personList.push({ name:"2人以下",value: twoPerson },{ name:"3-4人",value: threePerson },{ name:"5-6人",value: fivePerson },{ name:"7人以上",value: sevenPerson });
          this.personList = personList;

          this.$forceUpdate();
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
  },
};
</script>

<style scoped>
.body1 {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.left {
  width: calc(100% / 4 * 1);
  height: 100%;
}

.left>.top {
  width: 100%;
  height: calc(100% / 2 - 10px);
  background: #fff;
  border-radius: 5px;
  margin: 0 0 20px 0;
}

.left>.bottom {
  width: 100%;
  height: calc(100% / 2 - 10px);
  background: #fff;
  border-radius: 5px;
}

.center {
  width: calc(100% / 4 * 2 - 40px);
  height: 100%;
  margin: 0 20px;
}

.center>.top {
  width: 100%;
  height: calc(100% / 5 * 3 - 10px);
  background: #fff;
  border-radius: 5px;
  margin: 0 0 20px 0;
}

.center>.bottom {
  width: 100%;
  height: calc(100% / 5 * 2 - 10px);
  background: #fff;
  border-radius: 5px;
}

.right {
  width: calc(100% / 4 * 1);
  height: 100%;
}

.right>.top {
  width: 100%;
  height: calc(100% / 2 - 10px);
  background: #fff;
  border-radius: 16px;
  margin: 0 0 20px 0;
}

.right>.bottom {
  width: 100%;
  height: calc(100% / 2 - 10px);
  background: #fff;
  border-radius: 5px;
}

.titleBox {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
  width: 100%;
}

.dataBox {
  height: calc(100% - 40px);
  width: 100%;
}

.middleBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.title {
  color: #060e17;
  margin-right: 10px;
}

.teaMiddle {
  width: calc(100% / 2 - 10px);
  height: 60px;
  border-radius: 8px;
  /* border: 1px solid #e0eafb; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 10px;
  margin: 0 10px;
}

.teaMiddle {
  width: calc(100% / 3 - 10px);
}

.cNum {
  background: linear-gradient(180deg,
      rgb(125, 227, 174, 0.2) 0%,
      rgb(23, 196, 105, 0.3) 100%) !important;
}

.tNum {
  background: linear-gradient(180deg,
      rgb(174, 204, 254, 0.2) 0%,
      rgb(54, 129, 252, 0.3) 100%) !important;
}

.tSum {
  background: linear-gradient(180deg,
      rgb(125, 227, 174, 0.2) 0%,
      rgb(23, 196, 105, 0.3) 100%) !important;
}

.teaLeft>div:first-child,
.teaMiddle>div:first-child {
  font-size: 12px;
  font-weight: 400;
  color: #565e6a;
}

.teaLeft>div:last-child,
.teaMiddle>div:last-child {
  font-size: 22px;
  font-weight: bold;
  color: #060e17;
}

.halfBox {
  width: 50%;
  height: 100%;
}

.selectBox {
  width: 80px;
  margin-left: 10px;
}

.selectBox>>>.el-input__inner {
  height: 30px;
  line-height: 30px;
}

.selectBox>>>.el-input__icon {
  line-height: 30px;
}

.timeDiv {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0 0 0 15px;
}

.timeDiv>div {
  margin-right: 10px;
  cursor: pointer;
}

.isClick {
  color: #1684fc;
  border-bottom: 2px solid #1684fc;
  box-sizing: border-box;
}

.otherCss {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}

.otherImg {
  width: 20px;
  height: 20px;
  margin: 0 10px;
  cursor: pointer;
}

.otherImg>img {
  width: 100%;
  height: 100%;
}

.allBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.allBox_left {
  width: 30%;
  height: 100%;
}

.allBox_right {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 70%;
  margin: 0 auto;
  overflow: hidden;
  justify-content: space-between;
}

.depth {
  width: calc(100% / 4 - 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.depth>span:nth-child(1) {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 10px;
}

.depth>div:nth-child(1) {}

.info_box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}

.info_box>.info2,
.info_box>.info3,
.info_box>.info {
  width: calc(50% - 10px);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 60px;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
  border-radius: 5px;
}

.info_box>.info2 {
  width: calc(100% / 4 - 10px);
  /* align-items: flex-end; */
}

.info_box>.info3 {
  width: 100%;
  margin-bottom: 5px;
}

.info_box>.info2>span:nth-child(1),
.info_box>.info3>span:nth-child(1),
.info_box>.info>span:nth-child(1) {
  font-size: 14px;
  /* margin: 0 0 0 20px; */
  color: #565e6a;
  width: 60px;
  white-space: pre-wrap;
  word-break: break-all;
}

.info_box>.info2>span:nth-child(2),
.info_box>.info3>span:nth-child(2),
.info_box>.info>span:nth-child(2) {
  font-size: 24px;
  /* font-weight: 700; */
}

.blueBG {
  background: rgb(243, 248, 253);
  border: 2px solid rgb(234, 246, 255);
}
</style>