xjsaas-ui/src/views/index.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-08 09:26:24
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-10-29 13:07:17
 * @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>日常巡查</div>
        <div>病害识别</div>
      </div>
      <div class="bottom-content">
        <div>公路资产</div>
        <div>路况评定</div>
      </div>
    </fssm-scroll>
  </div>
</template>
<script>
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
export default {
  name: "Index",
  components: {
    FssmScroll,
  },
  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%;
}

.bottom-content {
  width: 100%;
  height: 60%;
}
</style>