|
@@ -9,218 +9,108 @@
|
|
<div class="dataBox">
|
|
<div class="dataBox">
|
|
<div class="info_box">
|
|
<div class="info_box">
|
|
<div class="info blueBG">
|
|
<div class="info blueBG">
|
|
- <span>课程总数</span>
|
|
|
|
- <span>{{ allCourse }}</span>
|
|
|
|
|
|
+ <span>教师总数</span>
|
|
|
|
+ <span>{{ 113 }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="info blueBG">
|
|
<div class="info blueBG">
|
|
- <span>本月新增课程环比</span>
|
|
|
|
- <span v-if="loginCountMonthArray.length">{{ (loginCountMonthArray[loginCountMonthArray.length - 1].course) >
|
|
|
|
- 0 ? (((loginCountMonthArray[loginCountMonthArray.length - 1].course) / allCourse) * 100).toFixed(0) + '%'
|
|
|
|
- : 0 }}</span>
|
|
|
|
|
|
+ <span>考核项目总数</span>
|
|
|
|
+ <span>{{ 9 }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="info blueBG">
|
|
<div class="info blueBG">
|
|
- <span>模板课程总数</span>
|
|
|
|
- <span>{{ 0 }}</span>
|
|
|
|
|
|
+ <span>提交人数</span>
|
|
|
|
+ <span>{{ 89 }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="info blueBG">
|
|
<div class="info blueBG">
|
|
- <span>本月新增课程总数</span>
|
|
|
|
- <span v-if="loginCountMonthArray.length">{{
|
|
|
|
- loginCountMonthArray[loginCountMonthArray.length - 1].course
|
|
|
|
- }}</span>
|
|
|
|
|
|
+ <span>数据总数</span>
|
|
|
|
+ <span>{{ 1113 }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <TeaFre style="height: calc(100% - 140px)" :monthArray="loginCountMonthArray"></TeaFre>
|
|
|
|
|
|
+ <div class="depth_box" style="height: calc(100% - 140px)">
|
|
|
|
+ <div class="depth">
|
|
|
|
+ <span>考核项目完成率</span>
|
|
|
|
+ <div>
|
|
|
|
+ <el-progress :width="100" type="circle" :percentage="70" :stroke-width="15" :format="format" color="#106BFF"></el-progress>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="depth">
|
|
|
|
+ <span>教师项目提交率</span>
|
|
|
|
+ <div>
|
|
|
|
+ <el-progress :width="100" type="circle" :percentage="80" :stroke-width="15" :format="format" color="#106BFF"></el-progress>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- <div style="height: calc(100% - 140px)">
|
|
|
|
+ <TeaFre style="height: calc(100%)" :monthArray="loginCountMonthArray"></TeaFre>
|
|
|
|
+ </div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="bottom">
|
|
<div class="titleBox">
|
|
<div class="titleBox">
|
|
- <div class="title" :class="{ isClick: skType == 0 }" @click="skType = 0"
|
|
|
|
- style="cursor: pointer; padding: 0 0 5px 0">
|
|
|
|
- 授课时长
|
|
|
|
|
|
+ <div class="title" >
|
|
|
|
+ 培训心得
|
|
</div>
|
|
</div>
|
|
- <div class="title" :class="{ isClick: skType == 1 }" @click="skType = 1"
|
|
|
|
- style="cursor: pointer; padding: 0 0 5px 0">
|
|
|
|
- 作业数量
|
|
|
|
- </div>
|
|
|
|
- <el-select v-if="skType == 0" v-model="lType" @change="typeChange1" class="selectBox" style="margin-left: auto">
|
|
|
|
- <el-option label="年级" value="grade"></el-option>
|
|
|
|
- <el-option label="主题" value="theme"></el-option>
|
|
|
|
- <el-option label="学科" value="subject"></el-option>
|
|
|
|
- </el-select>
|
|
|
|
- <el-select v-if="skType == 1" v-model="lType1" @change="typeChange2" class="selectBox"
|
|
|
|
- style="margin-left: auto">
|
|
|
|
- <el-option label="年级" value="grade"></el-option>
|
|
|
|
- <el-option label="主题" value="theme"></el-option>
|
|
|
|
- <el-option label="学科" value="subject"></el-option>
|
|
|
|
- </el-select>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="dataBox">
|
|
<div class="dataBox">
|
|
- <div class="info_box" style="width: 96%" v-if="skType == 0">
|
|
|
|
- <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
|
|
|
|
- <span>累计时长</span>
|
|
|
|
- <span>{{ allTime }}</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
|
|
|
|
- <span>课程实施总数</span>
|
|
|
|
- <span>{{ courseLength }}</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
|
|
|
|
- <span>课均时长</span>
|
|
|
|
- <span>{{
|
|
|
|
- allTime == 0 ? 0 : (allTime / courseLength).toFixed(0)
|
|
|
|
- }}</span>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="info_box" style="width: 96%" 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 ? 0 : (worksCount / haveWorksCourse).toFixed(0)
|
|
|
|
- }}</span>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <Bar style="height: calc(100% - 100px)" v-if="skType == 0 && !oType" :workList="tedurArray"></Bar>
|
|
|
|
- <ToolUse2 style="height: calc(100% - 100px)" v-if="skType == 0 && oType" :yearArray="courseWorksCountYearArray2"></ToolUse2>
|
|
|
|
-
|
|
|
|
- <ToolUse style="height: calc(100% - 100px)" v-if="skType == 1 && !oType2"
|
|
|
|
- :yearArray="courseWorksCountYearArray"></ToolUse>
|
|
|
|
- <Bar2 style="height: calc(100% - 100px)" v-if="skType == 1 && oType2" :workList="tedurArray2"></Bar2>
|
|
|
|
- <div class="otherCss" v-if="skType == 0">
|
|
|
|
- <div v-if="!oType">切换为热力图</div>
|
|
|
|
- <div v-if="oType">切换为柱状图</div>
|
|
|
|
- <div class="otherImg" @click="otherEchart">
|
|
|
|
- <img src="../../../../assets/icon/other.png" alt="" />
|
|
|
|
|
|
+ <div class="info_box" style="width: 96%" >
|
|
|
|
+ <div class="info blueBG">
|
|
|
|
+ <span>提交总数</span>
|
|
|
|
+ <span>{{ 257 }}</span>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
- <div class="otherCss" v-if="skType == 1">
|
|
|
|
- <div v-if="!oType2">切换为柱状图</div>
|
|
|
|
- <div v-if="oType2">切换为热力图</div>
|
|
|
|
- <div class="otherImg" @click="otherEchart2">
|
|
|
|
- <img src="../../../../assets/icon/other.png" alt="" />
|
|
|
|
|
|
+ <div class="info blueBG">
|
|
|
|
+ <span>人均提交次数</span>
|
|
|
|
+ <span>{{ 4 }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <Bar style="height: calc(100% - 70px)" :workList="tedurArray"></Bar>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="center">
|
|
<div class="center">
|
|
<div class="top">
|
|
<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 class="titleBox" style="justify-content: space-between">
|
|
|
|
+ <div class="title">
|
|
|
|
+ 教学设计
|
|
</div>
|
|
</div>
|
|
|
|
+ <!-- <el-select v-model="cType" @change="typeChange" class="selectBox" v-if="toolType == 0">
|
|
|
|
+ <el-option label="全部" value=""></el-option>
|
|
|
|
+ </el-select> -->
|
|
</div>
|
|
</div>
|
|
<div class="dataBox">
|
|
<div class="dataBox">
|
|
- <CateRank v-if="courseType == 0" style="height: calc(100%)" :courseArray="courseArray"></CateRank>
|
|
|
|
- <CourseNum v-if="courseType == 1" style="height: calc(100%)" :weekCourse2="weekCourse2"></CourseNum>
|
|
|
|
|
|
+ <div class="info_box" style="width: 96%" >
|
|
|
|
+ <div class="info blueBG">
|
|
|
|
+ <span>提交总数</span>
|
|
|
|
+ <span>{{ 60 }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="info blueBG">
|
|
|
|
+ <span>人均人数</span>
|
|
|
|
+ <span>{{ 39 }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <CateRank style="height:calc(100% - 70px);" :courseArray="courseArray"></CateRank>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="bottom">
|
|
<div class="titleBox" style="justify-content: space-between">
|
|
<div class="titleBox" style="justify-content: space-between">
|
|
- <div class="title">课程实施程度</div>
|
|
|
|
|
|
+ <div class="title">教师活动</div>
|
|
</div>
|
|
</div>
|
|
<div class="dataBox">
|
|
<div class="dataBox">
|
|
- <div class="allBox" v-if="!shType" style="height: calc(100% - 30px)">
|
|
|
|
- <div class="allBox_left">
|
|
|
|
- <CourseTime v-if="!shType" :pusaDep="pusaDep"></CourseTime>
|
|
|
|
- </div>
|
|
|
|
- <div class="allBox_right">
|
|
|
|
- <div class="depth">
|
|
|
|
- <span>已提交作业</span>
|
|
|
|
- <div>
|
|
|
|
- <el-progress :width="80" type="circle" :percentage="allCourse
|
|
|
|
- ? parseInt(
|
|
|
|
- ((haveWorksCourse / allCourse) * 100).toFixed(0)
|
|
|
|
- )
|
|
|
|
- : 0
|
|
|
|
- " :stroke-width="5" :format="format" color="#106BFF"></el-progress>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="depth">
|
|
|
|
- <span>设置评价</span>
|
|
|
|
- <div>
|
|
|
|
- <el-progress :width="80" type="circle" :percentage="allCourse
|
|
|
|
- ? parseInt(((evaCount / allCourse) * 100).toFixed(0))
|
|
|
|
- : 0
|
|
|
|
- " :stroke-width="5" :format="format" color="#106BFF"></el-progress>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="depth">
|
|
|
|
- <span>已评价课程</span>
|
|
|
|
- <div>
|
|
|
|
- <el-progress :width="80" type="circle" :percentage="allCourse
|
|
|
|
- ? parseInt(
|
|
|
|
- ((evaWorksCount / allCourse) * 100).toFixed(0)
|
|
|
|
- )
|
|
|
|
- : 0
|
|
|
|
- " :stroke-width="5" :format="format" color="#106BFF"></el-progress>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="depth">
|
|
|
|
- <span>教学评一体化</span>
|
|
|
|
- <div>
|
|
|
|
- <el-progress :width="80" type="circle" :percentage="allCourse
|
|
|
|
- ? parseInt(
|
|
|
|
- ((evaWorksCount / allCourse) * 100).toFixed(0)
|
|
|
|
- )
|
|
|
|
- : 0
|
|
|
|
- " :stroke-width="5" :format="format" color="#106BFF"></el-progress>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="info_box" v-if="shType">
|
|
|
|
- <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
|
|
|
|
- <span>平台实施课程总数</span>
|
|
|
|
- <!-- <span>{{ count }}</span> -->
|
|
|
|
- <span>{{ isCourseCount }}</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
|
|
|
|
- <span>平台实施课程占比</span>
|
|
|
|
- <!-- <span>{{ weekCount }}</span> -->
|
|
|
|
- <span>{{
|
|
|
|
- isCourseCount
|
|
|
|
- ? ((isCourseCount / allCourseCount) * 100).toFixed(0) + "%"
|
|
|
|
- : "0%"
|
|
|
|
- }}</span>
|
|
|
|
|
|
+ <div class="info_box">
|
|
|
|
+ <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
|
|
|
|
+ <span>提交总数</span>
|
|
|
|
+ <span>{{ 62 }}</span>
|
|
</div>
|
|
</div>
|
|
- <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
|
|
|
|
- <span>课程平均任务数量</span>
|
|
|
|
- <!-- <span>{{ weekCount }}</span> -->
|
|
|
|
- <span>{{
|
|
|
|
- isCourseCount ? (taskCount / isCourseCount).toFixed(0) : 0
|
|
|
|
- }}</span>
|
|
|
|
|
|
+ <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
|
|
|
|
+ <span>发展规划提交总数</span>
|
|
|
|
+ <span>{{ 30 }}</span>
|
|
</div>
|
|
</div>
|
|
- <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
|
|
|
|
- <span>课程平均作业数量</span>
|
|
|
|
- <!-- <span>{{ weekCount }}</span> -->
|
|
|
|
- <span>{{
|
|
|
|
- isCourseCount ? (workCount / isCourseCount).toFixed(0) : 0
|
|
|
|
- }}</span>
|
|
|
|
|
|
+ <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
|
|
|
|
+ <span>教育观念提交总数</span>
|
|
|
|
+ <span>{{ 32 }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <WorkNum style="height: calc(100% - 95px)" :workNumList="workNumList" @openCourse="openCourse" v-if="shType">
|
|
|
|
|
|
+ <WorkNum style="height: calc(100% - 70px)" :workNumList="workNumList" >
|
|
</WorkNum>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
@@ -235,39 +125,48 @@
|
|
">
|
|
">
|
|
<div class="title" :class="{ isClick: toolType == 0 }" @click="toolType = 0"
|
|
<div class="title" :class="{ isClick: toolType == 0 }" @click="toolType = 0"
|
|
style="cursor: pointer; padding: 0 0 5px 0">
|
|
style="cursor: pointer; padding: 0 0 5px 0">
|
|
- 课程占比
|
|
|
|
|
|
+ 获奖级别
|
|
</div>
|
|
</div>
|
|
<div class="title" :class="{ isClick: toolType == 1 }" @click="toolType = 1"
|
|
<div class="title" :class="{ isClick: toolType == 1 }" @click="toolType = 1"
|
|
style="cursor: pointer; padding: 0 0 5px 0">
|
|
style="cursor: pointer; padding: 0 0 5px 0">
|
|
- 工具使用
|
|
|
|
|
|
+ 获奖名次
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <el-select v-model="cType4" @change="typeChange" class="selectBox" v-if="toolType == 0">
|
|
|
|
- <!-- <el-option label="全部" value=""></el-option> -->
|
|
|
|
- <el-option label="年级" value="grade"></el-option>
|
|
|
|
- <el-option label="主题" value="theme"></el-option>
|
|
|
|
- <el-option label="学科" value="subject"></el-option>
|
|
|
|
- </el-select>
|
|
|
|
|
|
+ <!-- <el-select v-model="cType4" @change="typeChange" class="selectBox" v-if="toolType == 0">
|
|
|
|
+ <el-option label="全部" value=""></el-option>
|
|
|
|
+ </el-select> -->
|
|
</div>
|
|
</div>
|
|
<div class="dataBox">
|
|
<div class="dataBox">
|
|
- <CourseAna style="height: calc(100%)" :courseNumberArray="courseNumberArray" v-if="toolType == 0"></CourseAna>
|
|
|
|
|
|
+ <div class="info_box" v-if="toolType == 0">
|
|
|
|
+ <div class="info blueBG">
|
|
|
|
+ <span>获奖总数</span>
|
|
|
|
+ <span>{{ 49 }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="info blueBG">
|
|
|
|
+ <span>获奖人数</span>
|
|
|
|
+ <span>{{ 39 }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <CourseAna style="height: calc(100% - 70px)" :courseNumberArray="courseNumberArray" v-if="toolType == 0"></CourseAna>
|
|
<ToolChart style="height: calc(100%)" :toolArray="toolList" v-if="toolType == 1"></ToolChart>
|
|
<ToolChart style="height: calc(100%)" :toolArray="toolList" v-if="toolType == 1"></ToolChart>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="bottom">
|
|
<div class="titleBox">
|
|
<div class="titleBox">
|
|
- <div class="title">课程协同情况</div>
|
|
|
|
|
|
+ <div class="title">德育获奖</div>
|
|
</div>
|
|
</div>
|
|
<div class="dataBox">
|
|
<div class="dataBox">
|
|
- <WorkTime style="height: calc(100% - 25px)" :personArray="personList" v-if="xtType"></WorkTime>
|
|
|
|
- <Subjuect style="height: calc(100% - 25px)" v-if="!xtType" :resultSubject="resultSubject"></Subjuect>
|
|
|
|
- <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 class="info_box" v-if="toolType == 0">
|
|
|
|
+ <div class="info blueBG">
|
|
|
|
+ <span>获奖总数</span>
|
|
|
|
+ <span>{{ 9 }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="info blueBG">
|
|
|
|
+ <span>获奖人数</span>
|
|
|
|
+ <span>{{ 9 }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <WorkTime style="height: calc(100% - 70px)" :personArray="personList"></WorkTime>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -315,8 +214,8 @@ export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
isLoading: false,
|
|
isLoading: false,
|
|
- cType: "全部年级",
|
|
|
|
- cType4: "grade",
|
|
|
|
|
|
+ cType: "",
|
|
|
|
+ cType4: "",
|
|
cType7: "全部课程",
|
|
cType7: "全部课程",
|
|
toolType: 0,
|
|
toolType: 0,
|
|
tType: 0,
|
|
tType: 0,
|
|
@@ -466,7 +365,7 @@ export default {
|
|
},
|
|
},
|
|
];
|
|
];
|
|
this.ajax
|
|
this.ajax
|
|
- .post(this.$store.state.api + "selectDataBoardCourseNew", params)
|
|
|
|
|
|
+ .post(this.$store.state.api + "selectDataBoardTest", params)
|
|
.then((res) => {
|
|
.then((res) => {
|
|
this.isLoading = false;
|
|
this.isLoading = false;
|
|
|
|
|
|
@@ -505,62 +404,62 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
.left {
|
|
.left {
|
|
- width: calc(100% / 4 * 1);
|
|
|
|
|
|
+ width: calc(100% / 3 * 1 - (20px / 3));
|
|
height: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
.left>.top {
|
|
.left>.top {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: calc(100% / 2 - 10px);
|
|
|
|
|
|
+ height: calc(100% / 2 - 5px);
|
|
background: #fff;
|
|
background: #fff;
|
|
border-radius: 5px;
|
|
border-radius: 5px;
|
|
- margin: 0 0 20px 0;
|
|
|
|
|
|
+ margin: 0 0 10px 0;
|
|
}
|
|
}
|
|
|
|
|
|
.left>.bottom {
|
|
.left>.bottom {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: calc(100% / 2 - 10px);
|
|
|
|
|
|
+ height: calc(100% / 2 - 5px);
|
|
background: #fff;
|
|
background: #fff;
|
|
border-radius: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
|
|
|
|
.center {
|
|
.center {
|
|
- width: calc(100% / 4 * 2 - 40px);
|
|
|
|
|
|
+ width: calc(100% / 3 - (20px / 3));
|
|
height: 100%;
|
|
height: 100%;
|
|
- margin: 0 20px;
|
|
|
|
|
|
+ margin: 0 10px;
|
|
}
|
|
}
|
|
|
|
|
|
.center>.top {
|
|
.center>.top {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: calc(100% / 5 * 3 - 10px);
|
|
|
|
|
|
+ height: calc(100% / 2 - 5px);
|
|
background: #fff;
|
|
background: #fff;
|
|
border-radius: 5px;
|
|
border-radius: 5px;
|
|
- margin: 0 0 20px 0;
|
|
|
|
|
|
+ margin: 0 0 10px 0;
|
|
}
|
|
}
|
|
|
|
|
|
.center>.bottom {
|
|
.center>.bottom {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: calc(100% / 5 * 2 - 10px);
|
|
|
|
|
|
+ height: calc(100% / 2 - 5px);
|
|
background: #fff;
|
|
background: #fff;
|
|
border-radius: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
|
|
|
|
.right {
|
|
.right {
|
|
- width: calc(100% / 4 * 1);
|
|
|
|
|
|
+ width: calc(100% / 3 - (20px / 3));
|
|
height: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
.right>.top {
|
|
.right>.top {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: calc(100% / 2 - 10px);
|
|
|
|
|
|
+ height: calc(100% / 2 - 5px);
|
|
background: #fff;
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
border-radius: 16px;
|
|
- margin: 0 0 20px 0;
|
|
|
|
|
|
+ margin: 0 0 10px 0;
|
|
}
|
|
}
|
|
|
|
|
|
.right>.bottom {
|
|
.right>.bottom {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: calc(100% / 2 - 10px);
|
|
|
|
|
|
+ height: calc(100% / 2 - 5px);
|
|
background: #fff;
|
|
background: #fff;
|
|
border-radius: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
@@ -794,4 +693,31 @@ export default {
|
|
.blueBG {
|
|
.blueBG {
|
|
background: rgb(243, 248, 253);
|
|
background: rgb(243, 248, 253);
|
|
border: 2px solid rgb(234, 246, 255);
|
|
border: 2px solid rgb(234, 246, 255);
|
|
-}</style>
|
|
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+.depth_box {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ height: 100%;
|
|
|
|
+ width: 95%;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.depth {
|
|
|
|
+ width: calc(100% / 2 - 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) {}</style>
|