<template>
  <MapTitle
    text="服务强军兴军"
    textRight="更多"
    :detailsHandle="detailsHandle"
  />
  <div class="info">
    <div class="text-list item-bg">
      <el-row
        class="font-size14 color-666"
        justify="space-between"
        align="middle"
      >
        贯彻国防要求的建设项目
        <el-row align="middle">
          <span class="font-size20 color-pramiry">30</span>
          <span class="font-size12 color-999">亿元</span>
        </el-row>
      </el-row>

      <el-row
        class="font-size14 color-666"
        justify="space-between"
        align="middle"
      >
        总投资
        <el-row align="middle">
          <span class="font-size20 color-pramiry">30</span>
          <span class="font-size12 color-999">亿元</span>
        </el-row>
      </el-row>

      <el-row
        class="font-size14 color-666"
        justify="space-between"
        align="middle"
      >
        项目建设进度
        <el-row align="middle">
          <span class="font-size20 color-pramiry">30%</span>
        </el-row>
      </el-row>
    </div>

    <!-- foot -->
    <el-row class="foot-wrapper " :gutter="16">
      <el-col :span="15" class="foot-row-text">
        <el-row class="item-bg margin-bottom8">
          <el-col class=" padding0-8 font-size14 color-666"
            >国防科技工业军品收入</el-col
          >
          <el-col class="padding0-8">
            <span class="font-size20 color-pramiry">30</span>
            <span class="font-size12 color-999">亿元</span>
          </el-col>
        </el-row>

        <el-row class="item-bg">
          <el-col class="padding0-8 font-size14 color-666"
            >民口单位军需品收入</el-col
          >
          <el-col class="padding0-8">
            <span class="font-size20 color-pramiry">30</span>
            <span class="font-size12 color-999">亿元</span>
          </el-col>
        </el-row>
      </el-col>

      <el-col class="font-size14 color-666 item-bg" :span="9">
        <el-row class="margin-bottom8">
          <el-col class="padding0-8 font-size14 color-666"
            >应届大学生应征入伍</el-col
          >
          <el-col class="padding0-8">
            <span class="font-size20 color-pramiry">30</span>
            <span class="font-size12 color-999">人</span>
          </el-col>
        </el-row>

        <el-row>
          <el-col class="padding0-8 font-size14 color-666">应征入伍率</el-col>
          <el-col class="padding0-8">
            <span class="font-size20 color-pramiry">30</span>
            <span class="font-size12 color-999">%</span>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts">
/**
 * 卡片信息--- 服务强军兴军
 */
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import {
  DataCenterRouter
} from "@/route/dataCenter"

export default defineComponent({
  components: {
    MapTitle,
  },
  setup() {},
  methods: {
    detailsHandle() {
      this.$router.push(DataCenterRouter.DATA_ARMY);
    },
  },
});
</script>
<style lang="scss" scoped>
@import url("./common.css");
.info {
  padding: 10px 0;
  .text-list {
    .el-row {
      margin-bottom: 6px;
      padding: 0 8px;
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}
.foot-row-text {
  margin-left: 0 !important;
}
.foot-wrapper {
  margin-top: 10px;
  width: 100%;
 

  .padding0-8 {
    padding: 0 8px;
  }
  .margin-bottom8 {
    margin-bottom: 8px;
  }
}
</style>
