Gyyq-Upstairs/src/views/statistics/index.vue

<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-3">
      <!-- 功能区 -->
      <div class="itemhead">
        <span>功能区</span>
      </div>
      <div class="relaitem">
        <div class="itemsall">
          <span>384</span>
          <span>项目总数</span>
        </div>
        <FunctionArea />
      </div>
    </div>
    <div class="grid-item item-4">
      <!-- 项目列表 -->
      <div class="itemhead">
        <span>项目列表</span>
      </div>
      <div class="mainarea">
        <ProjectList />
      </div>
    </div>
    <div class="grid-item item-5">
      <!-- 投资区 -->
      <div class="itemhead">
        <span>投资主体</span>
      </div>
      <div class="relaitem">
        <div class="itemsall">
          <span>112</span>
          <span>项目总数</span>
        </div>
        <InvestArea />
      </div>
    </div>
    <div class="grid-item item-6">
      <!-- 地图模块 -->
      <div class="mapareaone">
        <div style="position: absolute; top: 2rem;left: 5rem; z-index: 999;">
          <el-input  placeholder="请输入项目名称" />
        </div>
        <MapArea />
      </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('~@/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;
  /* 占三列 */
}
.mapareaone{
  position: relative;
}
</style>