<template>

    <div class="grid-container">
      <div class="grid-item item-1">
        <!-- 整体项目情况 -->
        <div class="allarea">
          <AllArea />
        </div>
      </div>
      <div class="grid-item item-2">
        <!-- 消息通知 -->
        <div class="itemhead">
          <span>消息通知</span>
        </div>
        <div class="mainarea">
          <Message />
        </div>
      </div>
      <div class="grid-item item-1">
        <!-- 整体项目情况 -->
        <div class="allarea">

        </div>
      </div>
      <div class="grid-item item-2">
        <!-- 消息通知 -->
        <div class="itemhead">
          <span>我的待办</span>
        </div>
        <div class="mainarea">
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import AllArea from '@/views/components/analysis/all.vue'
  import FunctionArea from '@/views/components/analysis/function.vue'
  import InvestArea from '@/views/components/analysis/invest.vue'
  import Message from '@/views/components/analysis/message.vue'
  import ProjectList from '@/views/components/analysis/projectList.vue'
  import MapArea from '@/views/components/analysis/map.vue'
  
  export default {
    name: "Pc2FbEcharts",
    components: {
      AllArea,
      FunctionArea,
      InvestArea,
      Message,
      ProjectList,
      MapArea,
    },
    data() {
      return {};
    },
    mounted() {
  
    },
    methods: {
  
    },
  };
  </script>
  
  <style scoped>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 三列 */
    grid-template-rows: auto auto auto;
    /* 三行 */
    gap: 1rem;
    /* 模块之间的间隔 */
    padding: 1rem;
    /* 容器内边距 */
  }
  
  .grid-item {
    background-color: #FFFFFF;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  }
  
  .itemhead {
    width: 100%;
    border-left: 0.25rem solid #2B62F1;
    margin: 0.94rem 0;
    height: 1.25rem;
    display: flex;
    align-items: center;
  }
  .relaitem{
    position: relative;
  }
  .itemsall{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 5.5rem;
    left: 7.2rem;
  }
  .itemsall span:nth-child(1){
    font-family: DIN, DIN;
    font-weight: 500;
    font-size: 1.75rem;
    color: #292C33;
    line-height: 2.44rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .itemsall span:nth-child(2){
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 400;
    font-size: 0.88rem;
    color: #9E9E9E;
    line-height: 1.25rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .itemhead span {
    margin-left: 1rem;
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 600;
    font-size: 1rem;
    color: #3D424C;
    line-height: 1.69rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .mainarea{
    padding: 0rem 0rem 0 1.4rem;
    overflow: auto;
  }
  
  /* 第一行：第一个模块占两列 */
  .item-1 {
    grid-column: span 2;
    background-image: url(../../../src/assets/images/allbg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  
  .allarea {
    width: 100%;
    height: 14.5rem;
    padding: 1rem 1.5rem;
  }
  
  /* 最后一行：一个模块占一整行 */
  .item-6 {
    grid-column: span 3;
    /* 占三列 */
  }
  </style>