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

<template>
  <div class="grid-container">
    <div class="grid-item item-1">
      <!-- 整体项目情况 -->
      <div class="allarea">
        <AllArea2 />
      </div>
    </div>
    <div class="grid-item item-2">
      <!-- 消息通知 -->
      <div class="itemhead">
        <span>消息通知</span>
      </div>
      <div class="mainarea">
        <Message2 />
      </div>
    </div>
    <div class="grid-item item-1">
      <!-- 整体项目情况 -->
      <div class="allarea">
      </div>
    </div>
    <div class="grid-item item-2 bottombox">
      <!-- 消息通知 -->
      <div class="itemhead">
        <span>关联项目</span>
      </div>
      <div class="mainarea" style="height: 22rem;overflow: auto;">
        <div class="mainareaitem" v-for="(item, index) in items" :key="index">
          <div class="itemleft">
            <div class="xmmctitle">{{ item.xmmc }}</div>
            <div class="lefttwo">
              <div>现状分类：{{ item.xcfl }}</div>
              <div>总投资额：{{ item.ztzje }}</div>
              <div>填报时间：{{ item.tbrq }}</div>
            </div>
          </div>
          <div class="itemright" :class="getStatusClass(item.status)">
            <div class="rightword">{{ item.status }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-item item-2">
      <!-- 消息通知 -->
      <div class="itemhead">
        <span>我的待办</span>
      </div>
      <div class="mainarea">
        <daiban />
      </div>
    </div>
  </div>
</template>

<script>
import AllArea2 from '@/views/components/analysis/allcompany.vue'
import FunctionArea from '@/views/components/analysis/function.vue'
import InvestArea from '@/views/components/analysis/invest.vue'
import Message2 from '@/views/components/analysis/messagecompany.vue'
import daiban from '@/views/components/analysis/daiban.vue'

export default {
  name: "Pc2FbEcharts",
  components: {
    AllArea2,
    FunctionArea,
    InvestArea,
    Message2,
    daiban
  },
  data() {
    return {
      items: [
        { xmmc: '项目A', xcfl: '分类1', ztzje: '100万', tbrq: '2023-10-01', status: '待填报' },
        { xmmc: '项目B', xcfl: '分类2', ztzje: '200万', tbrq: '2023-10-02', status: '待审核' },
        { xmmc: '项目C', xcfl: '分类3', ztzje: '300万', tbrq: '2023-10-03', status: '审核通过' },
        { xmmc: '项目D', xcfl: '分类3', ztzje: '300万', tbrq: '2023-10-03', status: '待填报' },
      ]
    };
  },
  mounted() {

  },
  methods: {
    getStatusClass(status) {
      switch (status) {
        case '待填报':
          return 'status-red';
        case '待审核':
          return 'status-yellow';
        case '审核通过':
          return 'status-green';
        default:
          return '';
      }
    }
  },
};
</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;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 第一行：第一个模块占两列 */
.item-1 {
  width: 67rem;
  background-image: url(../../../src/assets/images/allbg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.allarea {
  width: 80rem;
  height: 14.5rem;
  padding: 1rem 1.5rem;
}

/* 最后一行：一个模块占一整行 */
.item-6 {
  grid-column: span 3;
  /* 占三列 */
}

.mainareaitem {
  /* padding: .5rem 0 .5rem .5rem; */
  display: flex;
  justify-content: space-between;
  border: 1px solid #ccc;
  margin: 0 1rem 0 0;

}

.itemleft {
  padding: .5rem 0 .5rem .5rem;
  display: flex;
  flex-direction: column;
  width: 70%;
  gap: 1rem;
}

.itemright {
  width: 8rem;
  height: 5rem;
  display: flex;
  color: white;
  font-size: 1rem;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 101% 100%);
  justify-content: flex-end;
  align-items: flex-start;
}

.rightword {
  transform: rotate(32deg);
  margin-top: -0.3rem;
  padding: 25px 0.5rem 2px 5px;
}

.status-red {
  background-color: #FFC77C;
}

.status-yellow {
  background-color: #7F99DB;
}

.status-green {
  background-color: #74DCC1;
}

.bottombox {
  height: 26rem;
}

.xmmctitle {
  color: #2B62F1;
}

.lefttwo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>