|
@@ -0,0 +1,668 @@
|
|
|
+<template>
|
|
|
+<div class="schooliotbox">
|
|
|
+ <div class="containerbox">
|
|
|
+ <!--header-->
|
|
|
+ <!--title-->
|
|
|
+ <div class="container-title">
|
|
|
+ <dv-decoration-10 class="dv-dec-10" />
|
|
|
+ <div class="title-center">
|
|
|
+ <dv-decoration-8 class="dv-dec-8" :color="['#568aea', '#000000']" />
|
|
|
+ <div class="title-text">
|
|
|
+ <span class="title-textbox">{{$t('schoolIot.title')}}</span>
|
|
|
+ <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" />
|
|
|
+ </div>
|
|
|
+ <dv-decoration-8 class="dv-dec-8" :reverse="true" :color="['#568aea', '#000000']" />
|
|
|
+ </div>
|
|
|
+ <dv-decoration-10 class="dv-dec-10-s" />
|
|
|
+ </div>
|
|
|
+ <!--title end -->
|
|
|
+ <!--school name-->
|
|
|
+ <div class="school-name">
|
|
|
+ <!-- <img :src="schoolInfo.schoolLogo">
|
|
|
+ <span class="schoolbox-name">{{ schoolInfo.schoolName }}</span>
|
|
|
+ <span class="schoolbox-period">{{ schoolInfo.periodName }}</span>
|
|
|
+ <span class="schoolbox-semester">{{ schoolInfo.curSemester }}</span> -->
|
|
|
+ <span class="schoolbox-name">{{ schoolInfo.names }}</span>
|
|
|
+ </div>
|
|
|
+ <!--school name end-->
|
|
|
+ <!--time-->
|
|
|
+ <div class="timebox">
|
|
|
+ <span class="timebox-text">{{ times.year }} <span style="display: inline-block; margin: 0 5px;color: #0fa2fe;">{{ times.day }}</span> </span>
|
|
|
+ </div>
|
|
|
+ <!--time end-->
|
|
|
+ <!--header end-->
|
|
|
+ <!--containerbody-->
|
|
|
+ <div class="containerbody">
|
|
|
+ <!--containerbody top-->
|
|
|
+ <div class="topbox">
|
|
|
+ <dv-border-box-12>
|
|
|
+ <div class="topbox-item" v-for="(item,index) in basicaList" :key="index">
|
|
|
+ <div class="item-title-images">
|
|
|
+ <div :class="[item.key ==='participationnum' && locals==='en-us' ? 'common-title':'','item-title']">{{item.title}}</div>
|
|
|
+ <div class="item-images">
|
|
|
+ <!-- <svg class="analysisicon" aria-hidden="true">
|
|
|
+ <use :xlink:href="item.icon"></use>
|
|
|
+ </svg> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div :class="[item.key === 'classtime' || item.key === 'participationnum' ? 'item-nums-special':'item-nums']">
|
|
|
+ <p v-if="item.key === 'classtime' || item.key === 'participationnum'">{{item.value}}<span class="timetag">Min</span><br /><span>{{Math.round(item.value/60)}}<span class="timetag">H</span></span></p>
|
|
|
+ <p v-else>
|
|
|
+ <countTo :startVal='0' :endVal='item.value' :duration='1500' v-show="index !== 0"></countTo>
|
|
|
+ <span v-show="index ===0">{{item.value}}</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="totalclass" v-show="item.key === 'roomnum' || item.key === 'teachnum' || item.key === 'studentnum'">
|
|
|
+ <div v-if="item.key ==='roomnum'">
|
|
|
+ <p class="totalclass-total">{{$t('schoolIot.basics.classTotals')}}</p>
|
|
|
+ <p class="totalclass-num">70</p>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="item.key ==='teachnum'">
|
|
|
+ <p class="totalclass-total">{{$t('schoolIot.basics.teachTotals')}}</p>
|
|
|
+ <p class="totalclass-num">70</p>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="item.key ==='studentnum'">
|
|
|
+ <p class="totalclass-total">{{$t('schoolIot.basics.studentTotals')}}</p>
|
|
|
+ <p class="totalclass-num">70</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-12>
|
|
|
+ </div>
|
|
|
+ <!--containerbody top end-->
|
|
|
+ <!--containerbody rests-->
|
|
|
+ <div class="restsbox">
|
|
|
+ <div class="restsbox-left">
|
|
|
+ <dv-border-box-11 :title="$t('schoolIot.classrooming.title')">
|
|
|
+ <div class="left-item" v-for="(item,index) in inuseList" :key="index">
|
|
|
+ <div class="item-img">
|
|
|
+ <!-- <Icon :custom="item.icon" class="top-header-icon"/> -->
|
|
|
+ <img :src="item.src"></img>
|
|
|
+ </div>
|
|
|
+ <div class="item-box">
|
|
|
+ <p><countTo :startVal='0' :endVal='item.value' :duration='1500' class="itembox-value"></countTo></p>
|
|
|
+ <span>{{item.title}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-11>
|
|
|
+ </div>
|
|
|
+ <div class="restsbox-right">
|
|
|
+ <dv-border-box-11 :title="$t('schoolIot.device.title')">
|
|
|
+ <div class="right-box">
|
|
|
+ <!-- <dv-scroll-board :config="config" style="width:100%;height:100%" /> -->
|
|
|
+ <div class="right-box-left">
|
|
|
+ <BaseCircle circleId="hiteach" chatName="HiTeach" :percent="45" subTitle="45" totalNum="158"></BaseCircle>
|
|
|
+ </div>
|
|
|
+ <div class="right-box-left">
|
|
|
+ <BaseCircle circleId="hita" chatName="HiTA" :percent="20" subTitle="15" totalNum="60"></BaseCircle>
|
|
|
+ </div>
|
|
|
+ <div class="right-box-left">
|
|
|
+ <BaseCircle circleId="hitachcc" chatName="HiTeach CC" :percent="10" subTitle="23" totalNum="0"></BaseCircle>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-11>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--containerbody rests end-->
|
|
|
+ <!--bottom-->
|
|
|
+ <div class="bottombox">
|
|
|
+ <div class="bottombox-left">
|
|
|
+ <dv-border-box-12>
|
|
|
+ <div class="innerbox">
|
|
|
+ <p class="boxtitles">
|
|
|
+ <span>{{$t('schoolIot.lessons.title')}}</span>
|
|
|
+ <dv-decoration-3 style="width:200px;height:20px;"/>
|
|
|
+ </p>
|
|
|
+ <div class="innerbox-inside">
|
|
|
+ <!-- <div class="data-left">
|
|
|
+ <BaseCircle circleId="hiteach" chatName="HiTeach" :percent="45" subTitle="45" totalNum="158"></BaseCircle>
|
|
|
+ </div>
|
|
|
+ <div class="data-left">
|
|
|
+ <BaseCircle circleId="hita" chatName="HiTA" :percent="20" subTitle="15" totalNum="60"></BaseCircle>
|
|
|
+ </div>
|
|
|
+ <div class="data-left">
|
|
|
+ <BaseCircle circleId="hitachcc" chatName="HiTeach CC" :percent="10" subTitle="23" totalNum="80"></BaseCircle>
|
|
|
+ </div>
|
|
|
+ <div class="data-left">
|
|
|
+ <BaseCircle circleId="webirs" chatName="WebIRS" :percent="40" subTitle="45" totalNum="77"></BaseCircle>
|
|
|
+ </div> -->
|
|
|
+ <barandLine ></barandLine>
|
|
|
+ </div>
|
|
|
+ <!-- <dv-decoration-2 :reverse="true" style="width:5px;height:95%;" :dur="5" /> -->
|
|
|
+ <!-- <div class="data-right">
|
|
|
+ <div class="data-right-top">
|
|
|
+ <YPie title="本月" :pieData="monthData"></YPie>
|
|
|
+ </div>
|
|
|
+ <div class="data-right-bottom">
|
|
|
+ <YPie title="学期" :pieData="semesterData"></YPie>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </dv-border-box-12>
|
|
|
+ </div>
|
|
|
+ <div class="right-integration">
|
|
|
+ <div class="bottombox-right">
|
|
|
+ <dv-border-box-12>
|
|
|
+ <div class="innerbox">
|
|
|
+ <p class="boxtitles">
|
|
|
+ <span>课堂记录统计</span>
|
|
|
+ <dv-decoration-3 style="width:200px;height:20px;"/>
|
|
|
+ </p>
|
|
|
+ <div class="barbox">
|
|
|
+ <!-- <Bar title="学期" :pieData="bars"></Bar> -->
|
|
|
+ <dv-scroll-board :config="config" style="width:100%;height:100%" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-12>
|
|
|
+ </div>
|
|
|
+ <div class="bottombox-right">
|
|
|
+ <dv-border-box-12>
|
|
|
+ <div class="innerbox">
|
|
|
+ <p class="boxtitles">
|
|
|
+ <span>{{$t('schoolIot.morphologyClass.title')}}</span>
|
|
|
+ <dv-decoration-3 style="width:200px;height:20px;"/>
|
|
|
+ </p>
|
|
|
+ <div class="barbox">
|
|
|
+ <Bar title="学期" :pieData="bars"></Bar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-12>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--bottom end-->
|
|
|
+ </div>
|
|
|
+ <!--containerbodyend-->
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import countTo from 'vue-count-to'
|
|
|
+import BasePie from '@/components/echart/pie/index'
|
|
|
+import YPie from './echarts/pie/index'
|
|
|
+import Bar from './echarts/bar/index'
|
|
|
+import BaseCircle from "./echarts/circle/index";
|
|
|
+import barandLine from './echarts/barandLine/barandLine'
|
|
|
+export default {
|
|
|
+ name:'areaiot',
|
|
|
+ components: {
|
|
|
+ countTo,
|
|
|
+ BasePie,
|
|
|
+ YPie,
|
|
|
+ Bar,
|
|
|
+ BaseCircle,
|
|
|
+ barandLine
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ times:{
|
|
|
+ year:null,
|
|
|
+ month:null,
|
|
|
+ week:null,
|
|
|
+ day:null
|
|
|
+ },
|
|
|
+ weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
|
|
+ basicaList:[
|
|
|
+ // { title: '学校简码', icon: '#icon-xuanzexuexiao-01', value: 'hbcn', key: 'code' },
|
|
|
+ { title: this.$t('schoolIot.basics.classnums'), icon: '#icon-shouhuifangzi', value: 65, key: 'roomnum' },
|
|
|
+ { title: this.$t('schoolIot.basics.teachnums'), icon: '#icon-jiaoshijie', value: 158, key: 'teachnum' },
|
|
|
+ { title: this.$t('schoolIot.basics.studentnums'), icon: '#icon-zongrenshu', value: 7603, key: 'studentnum' },
|
|
|
+ { title: this.$t('schoolIot.basics.studentTime'), icon: '#icon-_shijian_xiaoshuai', value: 450, key: 'participationnum' },
|
|
|
+ { title: this.$t('schoolIot.basics.classroomTotal'), icon: '#icon-ketang', value: 45, key: 'classnum' },
|
|
|
+ { title: this.$t('schoolIot.basics.classroomTime'), icon: '#icon--shijian ', value: 648, key: 'classtime' },
|
|
|
+ ],
|
|
|
+ inuseList:[
|
|
|
+ { title: this.$t('schoolIot.classrooming.taskNums'), value: 15, icon: 'iconfont icon-renwu',src:require("@/assets/image/iot/task.png"),class: 'task', textClass: 'task-text' },
|
|
|
+ { title: this.$t('schoolIot.classrooming.productionNums'), value: 10, icon: 'iconfont icon-zuopinzhanshi',src:require("@/assets/image/iot/production.png"),class: 'accomplish', textClass: 'accomplish-text' },
|
|
|
+ { title: this.$t('schoolIot.classrooming.topicNums'), value: 22, icon: 'iconfont icon-xingbiaoti-',src:require("@/assets/image/iot/exam.png"),class: 'topic', textClass: 'topic-text' },
|
|
|
+ { title: this.$t('schoolIot.classrooming.interactionNums'), value: 58, icon: 'iconfont icon-hudongshequ',src:require("@/assets/image/iot/interact.png"),class: 'interaction', textClass: 'interaction-text' },
|
|
|
+ ],
|
|
|
+ config:{
|
|
|
+ header: ['教师','学校','时间','科目'],
|
|
|
+ data: [
|
|
|
+ ['王老师','东城一小','72Min','语文'],
|
|
|
+ ['李老师','锦江四小','32Min','数学'],
|
|
|
+ ['金老师','川师附小','48Min','英语'],
|
|
|
+ ['周老师','川师附小','54Min','数学'],
|
|
|
+ ['郭老师','川师附小','22Min','音乐'],
|
|
|
+ ['秦老师','锦江外国语小学','18Min','美术'],
|
|
|
+ ['晓老师','锦江四小','72Min','英语'],
|
|
|
+ ['车老师','锦江外国语小学','32Min','数学'],
|
|
|
+ ['王老师','锦江外国语小学','48Min','英语'],
|
|
|
+ ['李老师','锦江四小','54Min','语文'],
|
|
|
+ ],
|
|
|
+ index: true,
|
|
|
+ indexHeader:'排名',
|
|
|
+ // columnWidth: [200,200,200,200],
|
|
|
+ align: ['center'],
|
|
|
+ carousel: 'single',
|
|
|
+ headerBGC:'rgba(19, 25, 47, 0.6)',
|
|
|
+ oddRowBGC:'rgba(19, 25, 47, 0.6)',
|
|
|
+ evenRowBGC:'rgba(19, 25, 47, 0.6)',
|
|
|
+ waitTime:'4000'
|
|
|
+ },
|
|
|
+ todayData:[
|
|
|
+ {name:this.$t('schoolIot.device.deviceTotal'),value:58},
|
|
|
+ {name:this.$t('schoolIot.device.deviceOnline'),value:50},
|
|
|
+ ],
|
|
|
+ monthData:[
|
|
|
+ {name:'六年二班',value:120},
|
|
|
+ {name:'三年四班',value:98},
|
|
|
+ {name:'五年三班',value:88},
|
|
|
+ {name:'四年二班',value:75},
|
|
|
+ {name:'二年二班',value:65},
|
|
|
+ {name:'一年五班',value:40},
|
|
|
+ ],
|
|
|
+ semesterData:[
|
|
|
+ {name:'六年二班',value:220},
|
|
|
+ {name:'五年四班',value:150},
|
|
|
+ {name:'六年三班',value:144},
|
|
|
+ {name:'四年二班',value:139},
|
|
|
+ {name:'二年二班',value:98},
|
|
|
+ // {name:'四年五班',value:75},
|
|
|
+ // {name:'九年二班',value:98},
|
|
|
+ // {name:'八年五班',value:75},
|
|
|
+ // {name:'七年二班',value:98},
|
|
|
+ // {name:'十年五班',value:75},
|
|
|
+ ],
|
|
|
+ bars:{
|
|
|
+ xdata:[this.$t('schoolIot.morphologyClass.cooperation'), this.$t('schoolIot.morphologyClass.interaction'), this.$t('schoolIot.morphologyClass.task'), this.$t('schoolIot.morphologyClass.differentiation'), this.$t('schoolIot.morphologyClass.examination')],
|
|
|
+ value:[254, 3254, 1654, 2454, 757,]
|
|
|
+ },
|
|
|
+ locals:'',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.timeFn()
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.locals=localStorage.local
|
|
|
+ console.log(this.locals,'语言')
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ schoolInfo() {
|
|
|
+ // let store_user = this.$store.state.user
|
|
|
+ // let semesterRange = this.$tools.getSemesterTimeRange()
|
|
|
+ // console.log(store_user,semesterRange)
|
|
|
+ // return {
|
|
|
+ // schoolName: store_user.schoolProfile.school_base.name,
|
|
|
+ // schoolLogo: store_user.schoolProfile.school_base.picture,
|
|
|
+ // periodName: store_user.curPeriod.name,
|
|
|
+ // curSemester: semesterRange.name_with_year
|
|
|
+ // }
|
|
|
+ let areaName=sessionStorage.areaName
|
|
|
+ return{
|
|
|
+ names:areaName
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ timeFn() {
|
|
|
+ this.timing = setInterval(() => {
|
|
|
+ this.times.day = this.$tools.formatTime(new Date(), 'hh:mm:ss')
|
|
|
+ this.times.year = this.$tools.formatTime(new Date(), 'yyyy-MM-dd')
|
|
|
+ this.times.week = this.weekday[new Date().getDay()]
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.schooliotbox{
|
|
|
+ color: #d3d6dd;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.containerbox{
|
|
|
+ width:100%;
|
|
|
+ height:100%;
|
|
|
+ padding: 16px 16px 0 16px;
|
|
|
+ background-image:url('../../assets/image/pageBg.png');
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center center;
|
|
|
+}
|
|
|
+.container-title,.title-center{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+}
|
|
|
+.title-text{
|
|
|
+ position: relative;
|
|
|
+ width: 500px;
|
|
|
+ text-align: center;
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+.title-textbox{
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: bold;
|
|
|
+ position: absolute;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ display: inline-block;
|
|
|
+ background-image: linear-gradient(#00b5ef, #7393a6);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ background-clip: text;
|
|
|
+ font-family: auto;
|
|
|
+ color: transparent;
|
|
|
+ bottom: 15px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%);
|
|
|
+ width: 80%;
|
|
|
+}
|
|
|
+.schooliotbox .dv-dec-10{
|
|
|
+ width:33.3%;
|
|
|
+ height:5px;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.schooliotbox .dv-dec-10-s{
|
|
|
+ transform: rotateY(180deg);
|
|
|
+ width:33.3%;
|
|
|
+ height:5px;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.schooliotbox .dv-dec-8{
|
|
|
+ width: 200px;
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.schooliotbox .title-center .dv-dec-6{
|
|
|
+ position: absolute;
|
|
|
+ bottom:0;
|
|
|
+ left:50%;
|
|
|
+ width:250px;
|
|
|
+ height:8px;
|
|
|
+ transform: translate(-50%);
|
|
|
+}
|
|
|
+.school-name{
|
|
|
+ position: absolute;
|
|
|
+ left: 30px;
|
|
|
+ top: 40px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.school-name img{
|
|
|
+ border-radius: 50%;
|
|
|
+ width: 25px;
|
|
|
+}
|
|
|
+.schoolbox-name{
|
|
|
+ margin: 0 10px;
|
|
|
+}
|
|
|
+.schoolbox-period,.schoolbox-semester{
|
|
|
+ font-size: 12px;
|
|
|
+ background-color: #2d2d2d;
|
|
|
+ display: inline-block;
|
|
|
+ padding: 2px 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+.timebox{
|
|
|
+ position: absolute;
|
|
|
+ right: 30px;
|
|
|
+ top: 30px;
|
|
|
+ font-size: 26px;
|
|
|
+ font-weight: bold;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.timebox-text{
|
|
|
+ font-size: 30px;
|
|
|
+ margin-right: 20px;
|
|
|
+ font-weight: 200;
|
|
|
+ color: #9f9f9f;
|
|
|
+ font-family: 'staticFont';
|
|
|
+}
|
|
|
+.containerbody{
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.topbox{
|
|
|
+ width:100%;
|
|
|
+ height:15vh;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.topbox-item{
|
|
|
+ display: flex;
|
|
|
+ width: 15%;
|
|
|
+ padding: 8px;
|
|
|
+ flex-direction: column;
|
|
|
+ line-height: 60px;
|
|
|
+ border-radius: 5px;
|
|
|
+ /* box-shadow: 0 2px 5px #e9e9e9; */
|
|
|
+ margin: 0.8%;
|
|
|
+ background-color: rgba(19, 25, 47, 0.6);
|
|
|
+ position:relative;
|
|
|
+}
|
|
|
+.item-title-images {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.item-title-images {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.item-title {
|
|
|
+ font-size: 16px;
|
|
|
+ /* font-weight: bold; */
|
|
|
+ color: #05d5ff;
|
|
|
+}
|
|
|
+.analysisicon {
|
|
|
+ width: 2.3em;
|
|
|
+ height: 2.3em;
|
|
|
+ vertical-align: -0.5em;
|
|
|
+ fill: currentColor;
|
|
|
+ /* overflow: hidden;
|
|
|
+ margin-right: 25px;
|
|
|
+ margin-left: 0px; */
|
|
|
+}
|
|
|
+.item-nums {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #d3d6dd;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.item-nums-special {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #d3d6dd;
|
|
|
+ line-height: 20px;
|
|
|
+}
|
|
|
+.timetag {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-left: 1%;
|
|
|
+ color: #7f8c8d;
|
|
|
+}
|
|
|
+.restsbox{
|
|
|
+ width:100%;
|
|
|
+ height:21vh;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.restsbox-left,.restsbox-right{
|
|
|
+ width:50%;
|
|
|
+}
|
|
|
+.left-item{
|
|
|
+ width: 21%;
|
|
|
+ display: flex;
|
|
|
+ height: 110px;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: rgba(19, 25, 47, 0.6);
|
|
|
+ margin: 9% 2% 1% 2%;
|
|
|
+}
|
|
|
+.item-img {
|
|
|
+ width: 45%;
|
|
|
+ position:relative
|
|
|
+}
|
|
|
+.item-img img{
|
|
|
+ width:50%;
|
|
|
+ margin-left:15%;
|
|
|
+}
|
|
|
+.inuseicon {
|
|
|
+ width: 3em;
|
|
|
+ height: 3em;
|
|
|
+ vertical-align: -0.5em;
|
|
|
+ fill: currentColor;
|
|
|
+}
|
|
|
+.item-box {
|
|
|
+ padding: 5px 0px;
|
|
|
+}
|
|
|
+.item-img {
|
|
|
+ width: 45%;
|
|
|
+}
|
|
|
+.item-box {
|
|
|
+ width: 54%;
|
|
|
+}
|
|
|
+.item-box p,
|
|
|
+.inuse-total p {
|
|
|
+ font-size: 22px;
|
|
|
+ color: #d3d6dd;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 5px;
|
|
|
+}
|
|
|
+.itembox-value{
|
|
|
+ font-size: 22px !important;
|
|
|
+ color: #d3d6dd !important;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 5px;
|
|
|
+}
|
|
|
+.item-box span,
|
|
|
+.inuse-total span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #05d5ff;
|
|
|
+}
|
|
|
+.inuse-total {
|
|
|
+ position: absolute;
|
|
|
+ top: 5%;
|
|
|
+ left: 5%;
|
|
|
+ width: 30%;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+.right-box{
|
|
|
+ width:100%;
|
|
|
+ /* padding: 6% 2% 2% 2%; */
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.count-num{
|
|
|
+ display: inline-block;
|
|
|
+ margin-top: 5px;
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.bottombox{
|
|
|
+ width:100%;
|
|
|
+ display: flex;
|
|
|
+ height:49vh;
|
|
|
+}
|
|
|
+.bottombox-left{
|
|
|
+ width:55%;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.innerbox{
|
|
|
+ width:100%;
|
|
|
+ height:100%;
|
|
|
+ padding: 20px 16px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+}
|
|
|
+.innerbox-inside{
|
|
|
+ width:100%;
|
|
|
+ height:98%;
|
|
|
+ background-color: rgba(19, 25, 47, 0.6);
|
|
|
+ /* display: flex;
|
|
|
+ flex-wrap: wrap; */
|
|
|
+}
|
|
|
+.bottombox-right{
|
|
|
+ width:100%;
|
|
|
+ height:50%;
|
|
|
+}
|
|
|
+.data-left,.data-right{
|
|
|
+ width:50%;
|
|
|
+ padding: 1%;
|
|
|
+ height:48%;
|
|
|
+}
|
|
|
+.separate-line{
|
|
|
+ width:2px;
|
|
|
+ height:95%;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+.boxtitles{
|
|
|
+ width:100%;
|
|
|
+ background-color: rgba(19, 25, 47, 0.6);
|
|
|
+ display: flex;
|
|
|
+ line-height: 20px;
|
|
|
+ padding-left: 1%;
|
|
|
+}
|
|
|
+.data-right{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.data-right-top,.data-right-bottom{
|
|
|
+ width:100%;
|
|
|
+ padding: 0%;
|
|
|
+ height:50%;
|
|
|
+}
|
|
|
+.barbox{
|
|
|
+ width:100%;
|
|
|
+ height:95%;
|
|
|
+ background-color: rgba(19, 25, 47, 0.6);
|
|
|
+}
|
|
|
+.top-header-icon {
|
|
|
+ fill: currentColor;
|
|
|
+ overflow: hidden;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ font-size: 38px;
|
|
|
+}
|
|
|
+.totalclass{
|
|
|
+ position:absolute;
|
|
|
+ right:3%;
|
|
|
+ bottom:2%;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.totalclass-total{
|
|
|
+ color: #05d5ff;
|
|
|
+ font-size:14px;
|
|
|
+}
|
|
|
+.totalclass-num{
|
|
|
+ font-size:20px;
|
|
|
+ color:#d3d6dd;
|
|
|
+}
|
|
|
+.right-box-left{
|
|
|
+ width:31%;
|
|
|
+ padding: 6% 1% 1% 1%;
|
|
|
+ height:100%;
|
|
|
+}
|
|
|
+.common-title{
|
|
|
+ line-height: 30px !important;
|
|
|
+}
|
|
|
+.right-integration{
|
|
|
+ width:45%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.schooliotbox .topbox .border-box-content,.schooliotbox .restsbox .border-box-content{
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+</style>
|