<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-08 09:26:24
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-10-29 15:30:19
 * @FilePath: \znxjxt-ui\src\views\index.vue
 * @Description: 系统首页
-->
<template>
  <div class="app-container">
    <fssm-scroll :showBar="false">
      <div class="top-content">
        <div
          class="top-div"
          :class="`top-div-${index}`"
          v-for="(item, index) in topList"
          :key="`top-div-${index}`"
        >
          <div class="name">{{ item.name }}</div>
          <div class="value">
            <span>{{ item.value }}</span
            >{{ item.unit }}
          </div>
        </div>
      </div>
      <div class="middle-content">
        <div class="daily-content">
          <daily-index></daily-index>
        </div>
        <div class="disease-content">
          <disease-index></disease-index>
        </div>
      </div>
      <div class="bottom-content">
        <div class="road-content">
          <road-index></road-index>
        </div>
        <div class="traffic-content">
          <traffic-index></traffic-index>
        </div>
      </div>
    </fssm-scroll>
  </div>
</template>
<script>
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
import DailyIndex from "./index-components/daily-index.vue";
import DiseaseIndex from "./index-components/disease-index.vue";
import RoadIndex from "./index-components/road-index.vue";
import TrafficIndex from "./index-components/traffic-index.vue";
export default {
  name: "Index",
  components: {
    FssmScroll,
    DailyIndex,
    DiseaseIndex,
    RoadIndex,
    TrafficIndex,
  },
  data() {
    return {
      // 顶栏循环数据
      topList: [],
    };
  },
  created() {
    this.getTopData();
  },
  methods: {
    /* 获取顶栏数据 */
    getTopData() {
      this.topList = [
        { name: "巡查总里程", value: 54, unit: "个" },
        { name: "现存病害总数", value: 54, unit: "个" },
        { name: "公路资产总数", value: 54, unit: "个" },
        { name: "交安事件总数", value: 54, unit: "个" },
      ];
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  padding: 1rem;
  height: calc(100vh - 5.4rem);
}

.top-content {
  width: 100%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border: 1px salmon solid;

  .top-div {
    width: 22%;
    height: 80%;
    padding: 1.5rem;
    background-color: aqua;

    .name {
      font-family: "DouYu";
    }

    .value {
      line-height: 4rem;

      span {
        font-size: 1.8rem;
      }
    }
  }
}

.middle-content {
  width: 100%;
  height: 60%;
  display: flex;
  justify-content: space-between;
  border: 1px red solid;

  .daily-content,
  .disease-content {
    width: 49.5%;
    height: calc(100% - 1rem);
    margin-top: 1rem;
    border: 1px blue solid;
  }
}

.bottom-content {
  width: 100%;
  height: 60%;
  display: flex;
  justify-content: space-between;
  border: 1px red solid;

  .road-content,
  .traffic-content {
    width: 49.5%;
    height: calc(100% - 1rem);
    margin-top: 1rem;
    border: 1px blue solid;
  }
}
</style>

