<template>
  <div>
    <Dec :content="content" />
    <div class="dashboard-container" style="padding:12px;">
      <!--学校信息-->
      <div style="border-bottom:1px solid #ccc;padding:10px 0;padding-left:40px;">
        <div class="school-info">
          <el-image
            class="school-logo"
            style="width: 30px; height: 30px"
            :src="require('@/assets/images/u185.jpg')"
            fit="cover"
          />
          <span class="school-name">长沙市一中</span>
        </div>
        <p class="welcome">WELCOME BACK!</p>
      </div>
      <!--公告-->
      <el-row>
        <el-col :span="1" class="notice-icon">
          <svg-icon icon-class="horn" />
        </el-col>
        <el-col :span="20" class="notice">关于2020年中天教育云平台系统升级的通知</el-col>
        <el-col :span="2" class="notice">2020-02-10</el-col>
        <el-col :span="1" class="notice-icon">
          <svg-icon icon-class="more" />
        </el-col>
      </el-row>
      <!--快捷操作-->
      <div class="box">
        <div class="box-title">
          <el-row>
            <el-col :span="2" class="title">快捷操作</el-col>
            <el-col :span="21" class="dec" />
            <el-col :span="1" class="more" />
          </el-row>
        </div>
        <div class="box-content">
          <div class="add">
            <i class="el-icon-circle-plus-outline" />
          </div>
          <span class="divider" />
          <div class="block">
            <svg-icon icon-class="adduser" />
            <span class="title">新增用户</span>
          </div>
          <div class="block">
            <svg-icon icon-class="addclasses" />
            <span class="title">添加班级</span>
          </div>
        </div>
      </div>
      <!--试卷分析-->
      <div class="box">
        <div class="box-title">
          <el-row>
            <el-col :span="2" class="title">试卷分析</el-col>
            <el-col :span="21" class="dec">我最近发起的考试</el-col>
            <el-col :span="1" class="more">
              <i class="el-icon-arrow-right" />
            </el-col>
          </el-row>
        </div>
        <div class="box-content">
          <div class="list-item">
            <el-row>
              <el-col :span="23" class="testinfo">
                <p class="test-title">【第六章-经济学人】测试试卷（中）</p>
                <p class="test-time-obj">
                  <span class="test-time">考试时间：2019-12-25 10:00</span>
                  <span class="test-obj">考试对象：三年二班</span>
                </p>
              </el-col>
              <el-col :span="1" class="detail">
                <i class="el-icon-arrow-right" />
              </el-col>
            </el-row>
          </div>
          <el-divider />
          <div class="list-item">
            <el-row>
              <el-col :span="23" class="testinfo">
                <p class="test-title">【第六章-经济学人】测试试卷（中）</p>
                <p class="test-time-obj">
                  <span class="test-time">考试时间：2019-12-25 10:00</span>
                  <span class="test-obj">考试对象：三年二班</span>
                </p>
              </el-col>
              <el-col :span="1" class="detail">
                <i class="el-icon-arrow-right" />
              </el-col>
            </el-row>
          </div>
          <el-divider />
          <div class="list-item">
            <el-row>
              <el-col :span="23" class="testinfo">
                <p class="test-title">【第六章-经济学人】测试试卷（中）</p>
                <p class="test-time-obj">
                  <span class="test-time">考试时间：2019-12-25 10:00</span>
                  <span class="test-obj">考试对象：三年二班</span>
                </p>
              </el-col>
              <el-col :span="1" class="detail">
                <i class="el-icon-arrow-right" />
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <!--班级统计-->
      <div class="box">
        <div class="box-title">
          <el-row>
            <el-col :span="2" class="title">班级统计</el-col>
            <el-col :span="21" class="dec">我授课和管理的班级</el-col>
            <el-col :span="1" class="more" />
          </el-row>
        </div>
        <div
          class="box-content"
          style="overflow-x:auto;white-space: nowrap;width:100%;display:flex;-webkit-overflow-scrolling:touch;"
        >
          <div class="classitem">
            <svg-icon icon-class="addclasses" style="font-size:40px;vertical-align: middle;" />
            <span class="classname">三年二班</span>
          </div>
          <span class="classsplit">&nbsp;</span>
          <div class="classitem">
            <svg-icon icon-class="addclasses" style="font-size:40px;vertical-align: middle;" />
            <span class="classname">三年二班</span>
          </div>
          <span class="classsplit">&nbsp;</span>
          <div class="classitem">
            <svg-icon icon-class="addclasses" style="font-size:40px;vertical-align: middle;" />
            <span class="classname">三年二班</span>
          </div>
          <span class="classsplit">&nbsp;</span>
          <div class="classitem">
            <svg-icon icon-class="addclasses" style="font-size:40px;vertical-align: middle;" />
            <span class="classname">三年二班</span>
          </div>
          <span class="classsplit">&nbsp;</span>
          <div class="classitem">
            <svg-icon icon-class="addclasses" style="font-size:40px;vertical-align: middle;" />
            <span class="classname">三年二班</span>
          </div>
          <span class="classsplit">&nbsp;</span>
          <div class="classitem">
            <svg-icon icon-class="addclasses" style="font-size:40px;vertical-align: middle;" />
            <span class="classname">三年二班</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Dec from '@/components/Dec'

export default {
  name: 'Dashboard',
  components: {
    Dec
  },
  data() {
    return {
      content: ''
    }
  },
  computed: {
    ...mapGetters(['name'])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    width: 1100px;
    margin: 0 auto;
    background: #fff;
    margin-top: 15px;
    .school-info {
      display: inline-block;
      text-align: center;
      padding-right: 40px;
      border-right: 1px solid #ccc;
      .school-logo {
        display: block;
        margin: 0 auto;
        margin-bottom: 8px;
      }
      .school-name {
        font-weight: 600;
      }
    }
    .welcome {
      font-size: 42px;
      line-height: 56px;
      font-weight: bolder;
      color: #888;
      display: inline;
      padding-left: 40px;
    }
    .notice-icon {
      text-align: center;
      font-size: 22px;
      line-height: 50px;
    }
    .notice {
      font-size: 14px;
      line-height: 50px;
    }
    .box {
      border: 1px solid #ccc;
      margin-top: 20px;
      .box-title {
        background: #eee;
        line-height: 50px;
        .title {
          text-align: center;
          font-weight: 600;
        }
        .dec {
          padding-left: 20px;
          color: #888;
        }
        .more {
          color: #888;
        }
      }
      .box-content {
        padding: 15px;
        .add {
          font-size: 40px;
          float: left;
          line-height: 69px;
        }
        .divider {
          display: inline-block;
          height: 40px;
          width: 1px;
          background: #ccc;
          float: left;
          margin: 0 20px;
          margin-top: 14.5px;
        }
        .block {
          display: inline-block;
          text-align: center;
          font-size: 42px;
          margin: 0 10px;
          .title {
            display: block;
            text-align: center;
            font-size: 14px;
            margin-top: 5px;
          }
        }
        .test-title {
          font-size: 16px;
          margin: 0;
          line-height: 25px;
        }
        .test-time-obj {
          font-size: 12px;
          color: #888;
          margin: 0;
          line-height: 25px;
          .test-obj {
            margin-left: 40px;
          }
        }
        .detail {
          line-height: 50px;
        }
        .classsplit {
          display: inline-block;
          width: 1px;
          height: 40px;
          background: #888;
          vertical-align: bottom;
          margin: 0 60px;
          float: left;
        }
        .classitem {
          float: left;
          height: 40px;
          .classname {
            margin-left: 10px;
          }
        }
      }
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
