<template>
  <div :class="isFullScreen?'full container':'container'" :style="{backgroundImage: `url(${screen})`}">
<!--    &lt;!&ndash; 标题 &ndash;&gt;-->
<!--    <div class="top-area">-->
<!--      <div class="top-item">-->
<!--        <img class="school-logo" src="@/icons/index2/school_logo.png" alt="">-->
<!--        <span>2021级新生</span>-->
<!--        <span>研究生</span>-->
<!--        <span>报到实时动态</span>-->
<!--        <img class="bottom-line" src="@/icons/index2/title_line.png" alt="">-->
<!--      </div>-->
<!--    </div>-->
<!--    &lt;!&ndash; 主内容 &ndash;&gt;-->
<!--    <div class="content">-->
<!--      &lt;!&ndash; 第一列 &ndash;&gt;-->
<!--      <div class="content-one">-->
<!--        &lt;!&ndash; 1-1 &ndash;&gt;-->
<!--        <div class="content-item-one" :style="{backgroundImage: `url(${left_top})`}">-->
<!--          <div class="title">-->
<!--            <span>报到情况</span>-->
<!--            <img src="@/icons/index2/left_top_line.png" alt="">-->
<!--          </div>-->
<!--          <div class="echart-area">-->
<!--            <div class="echart">-->
<!--              <echartsLeftTop persent="50%"></echartsLeftTop>-->
<!--            </div>-->
<!--            <div class="title-area">-->
<!--              <div>-->
<!--                <span class="echart-area-title">已报到</span>-->
<!--                <span class="echart-area-value-pink">149</span>-->
<!--              </div>-->
<!--              <div>-->
<!--                <span class="echart-area-title">未报到</span>-->
<!--                <span class="echart-area-value">149</span>-->
<!--              </div>-->
<!--              <div>-->
<!--                <span class="echart-area-title">应报到</span>-->
<!--                <span class="echart-area-value">149</span>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        &lt;!&ndash; 1-2 &ndash;&gt;-->
<!--        <div class="content-item-two" :style="{backgroundImage: `url(${left_bottom})`}">-->
<!--          <div class="title">-->
<!--            <span>通行情况</span>-->
<!--            <img src="@/icons/index2/left_top_line.png" alt="">-->
<!--          </div>-->
<!--          <div class="pass-area">-->
<!--            <div class="pass-card" >-->
<!--              <div class="sub-title">持红码人数</div>-->
<!--              <div class="sub-value">22</div>-->
<!--              <img src="@/icons/index2/red.png" alt="">-->
<!--            </div>-->
<!--            <div class="pass-card" >-->
<!--              <div class="sub-title">持黄码人数</div>-->
<!--              <div class="sub-value">22</div>-->
<!--              <img src="@/icons/index2/yellow.png" alt="">-->
<!--            </div>-->
<!--            <div class="pass-card" >-->
<!--              <div class="sub-title">持绿码人数</div>-->
<!--              <div class="sub-value">22</div>-->
<!--              <img src="@/icons/index2/blue.png" alt="">-->
<!--            </div>-->
<!--            <div class="pass-card" >-->
<!--              <div class="sub-title">持未知健康码人数</div>-->
<!--              <div class="sub-value">22</div>-->
<!--              <img src="@/icons/index2/blue.png" alt="">-->
<!--            </div>-->
<!--            <div class="pass-card" >-->
<!--              <div class="sub-title">红码密接人员人数</div>-->
<!--              <div class="sub-value">22</div>-->
<!--              <img src="@/icons/index2/red.png" alt="">-->
<!--            </div>-->
<!--            <div class="pass-card" >-->
<!--              <div class="sub-title">黄码密接人员人数</div>-->
<!--              <div class="sub-value">22</div>-->
<!--              <img src="@/icons/index2/yellow.png" alt="">-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      &lt;!&ndash; 第二列 &ndash;&gt;-->
<!--      <div class="content-two">-->
<!--        <chinaMap name=""></chinaMap>-->
<!--      </div>-->
<!--      &lt;!&ndash; 第三列 &ndash;&gt;-->
<!--      <div class="content-three"></div>-->
<!--    </div>-->
  </div>
</template>

<script>
    import echarts_left_top from "@/views/dashboard/components/components/echarts_left_top";
    import china_map from "@/views/dashboard/components/components/china_map"
    export default {
      name: "screen_school",
      components: {
        echartsLeftTop: echarts_left_top,
        chinaMap: china_map,
      },
      data() {
        return {
          // 背景图片
          bg: require("@/icons/index2/bg.png"),
          screen: require("@/icons/index2/screen.png"),
          left_top: require("@/icons/index2/left_top.png"),
          left_bottom: require("@/icons/index2/left_bottom.png"),
          // 定时
          interval: null,
          // 是否全屏
          isFullScreen: false
        }
      },
    }
</script>

<style scoped>
  p {
    margin: 0 !important;
    padding: 0 !important;
  }
  .container {
    position: relative;
    width: 100%;
    height: calc(100vh - 50px);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    overflow: auto;
  }
  .full {
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh !important;
  }
/* 顶部 */
  .top-area {
    position: relative;
    width: 100%;
    min-width: 800px;
    height: 10%;
    min-height: 70px;
    /*border: 1px solid red;*/
  }
  .top-item {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .top-item>.school-logo {
    height: 70%;
  }
  .top-item>.bottom-line {
    position: absolute;
    width: 10%;
    min-width: 800px;
    max-width: 1200px;
    bottom: 0;
  }
  .top-item>spanild(2), span:nth-child(4) {
    display: inline-block;
    font-size: 30px;
    color: #FFFFFF;
    margin-left: 20px;
    font-weight: 700;
  }
  .top-item>span:nth-child(3) {
    background: linear-gradient(180deg, rgba(123, 106, 225, 0.7) 14.58%, rgba(21, 32, 155, 0.7) 83.37%);
    background-clip: text;
    font-size: 30px;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke-color: #BDD7FF;
    -webkit-text-stroke-width: 1px;
    margin-left: 20px;
  }
  .content {
    position: relative;
    width: 100%;
    min-width: 1500px;
    height: calc(100vh - 10% - 50px);
    min-height: 900px;
    /*border: 1px solid red;*/
    display: flex;
    justify-content: center;
  }
  .content-one {
    position: relative;
    width: 25%;
    min-width: 500px;
    /*border: 1px solid red;*/
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
  }
  .content-item-one {
    position: relative;
    width: 100%;
    min-width: 350px;
    flex: 0.35;
    /*border: 1px solid red;*/
    background-size: 100% 100%;
    padding: 15px;
    box-sizing: border-box;
  }
  .content-item-two {
    position: relative;
    width: 100%;
    min-width: 350px;
    flex: 0.6;
    /*border: 1px solid red;*/
    background-size: 100% 100%;
    padding: 15px;
    box-sizing: border-box;
  }
  .title {
    position: relative;
    width: 100%;
  }
  .content-item-one>.title>span, .content-item-two>.title>span {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 500;
  }
  .content-item-one>.title>img, .content-item-two>.title>img {
    width: 100px;
    margin-left: 10px;
  }
  .content-two {
    width: 45%;
    /*border: 1px solid red;*/
  }
  .content-three {
    width: 30%;
    /*border: 1px solid red;*/
  }
  .pass-area {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px 0;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .pass-card {
    position: relative;
    width: 40%;
    height: 27%;
    /*border: 1px solid red;*/
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
  }
  .sub-title {
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ECEDFF;
    font-size: 15px;
  }
  .sub-value {
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ECEDFF;
    font-size: 40px;
    font-weight: 700;
  }
  .pass-card>img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
  }
  .echart-area {
    position: relative;
    width: 100%;
    height: 80%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 20px;
  }
  .echart {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*border: 1px solid red;*/
  }
  .title-area {
    width: 50%;
    /*border: 1px solid red;*/
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
  }
  .echart-area-title {
    font-size: 28px;
    color: #CED1FC;
    line-height: 50px;
  }
  .echart-area-value {
    font-size: 28px;
    color: #CED1FC;
    line-height: 70px;
    font-weight: 500;
    margin-left: 15px;
  }
  .echart-area-value-pink {
    font-size: 40px;
    color: #CF7FFF;
    line-height: 70px;
    font-weight: 700;
    margin-left: 15px;
  }
</style>
