<template>
  <div class="page-content">
  </div>
</template>
<script>

  import * as dayjs from "dayjs";
import STable from '@/components/table';
import treecheck from '@/components/sysmanage/treeCheck';
import {getMenus} from '@/api/system';

export default {
  name: 'Analysis',
  components: {treecheck, STable},

  data() {
    return {}
  },
  methods: {
  },
  //初始化
  created() {
  }
}
</script>
<style scoped lang="less">
  @itemH: 11vw;
  @mg: 1vw;
  .page-content {
    width: 80vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    height: 100%;
    overflow: auto;
    position: relative;
  }

  .page-left {
    flex: 1;
  }

  .page-right {
    width: 35%;
    margin-left: @mg;
  }

  .right-box1 {
    height: @itemH;
    margin-bottom: @mg;
    background-color: #5C96FF;
    padding-left: 0.3vw;
    box-sizing: border-box;

    p {
      font-size: 1.5vw;
      color: white;

      &.text-row {
        font-size: 1vw;
        margin-bottom: 0.2vw;
      }
    }

    .nomessage {
      color: white;
      text-align: center;
      line-height: @itemH;
    }
  }

  .right-box2 {
    height: @itemH+@itemH/2;
    margin-bottom: @mg;
    background-color: white;
    display: flex;

    .flex-filling {
      width: 100%;
    }
  }

  .right-box3 {
    height: @itemH/2;
    background-color: #FEC52C;
    color: white;
    padding-left: 0.2vw;
    font-size: 1vw;
    display: flex;
    align-items: center;
  }

  .page-left {
    &:before, &:after {
      content: "";
      overflow: hidden;
      height: 0;
      visibility: hidden;
      clear: both;
    }
  }

  .left-item {
    height: @itemH;
    float: left;
    background-image: url("~@/assets/img/meun-icon.png");
    background-repeat: no-repeat;
    background-position: 95% 95%;
    background-size: 4vw 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1vw;
    cursor: pointer;

    &.left-top {
      width: 49%;
      margin-bottom: @mg;
    }

    &.left-center {
      width: 32%;
      margin-bottom: @mg;
    }

    &.left-bottom {
      width: 49%;
    }

    &.left1 {
      background-color: #1F7EF7;
      margin-right: @mg/2;
    }

    &.left2 {
      background-color: #1FB2F7;
      margin-left: @mg/2;
    }

    &.left3 {
      background-color: #1FB2F7;
      margin-right: @mg/2;
    }

    &.left4 {
      background-color: #5CA4FF;
      margin-left: @mg/2;
      margin-right: @mg/2;
    }

    &.left5 {
      background-color: #1FB2F7;
      margin-left: @mg/2;
    }

    &.left6 {
      background-color: #5CA4FF;
      margin-right: @mg/2;
    }

    &.left7 {
      background-color: #45DAFF;
      margin-left: @mg/2;
    }
  }

  .tips-black {
    color: yellow;
    font-weight: bolder;
    font-size: 1.5vw;
  }

  .tips-red {
    color: red;
    font-weight: bolder;
    font-size: 1.5vw;
  }

</style>
<style scoped>
  /* For demo */
  .ant-carousel >>> .slick-slide {
    text-align: center;
    height: 5.5vw;
    line-height: 90px;
    background: #FEC52C;
    overflow: hidden;
  }

  .ant-carousel >>> .custom-slick-arrow {
    padding-left: 0.2vw;
    display: flex;
    align-items: center;
    font-size: 1vw;
    color: white;
    background-color: #FEC52C;
    opacity: 0.3;
  }
  .ant-carousel >>> .custom-slick-arrow:before {
    display: none;
  }
  .ant-carousel >>> .custom-slick-arrow:hover {
    opacity: 0.5;
  }

  .ant-carousel >>> .slick-slide h3 {
    color: #fff;
  }
</style>