<template>
  <MapTitle
    text="产业融合发展"
    textRight="更多"
    :detailsHandle="detailsHandle"
  />

  <div class="info">
    <el-row class="year" align="middle">
      <el-icon color="#409EFC"> <Aim /> </el-icon>
      2021年(截至第二季度)
    </el-row>

    <el-row class="info-item font-size14 color-666 item-bg margin-bottom8">
      <el-row class="title">
        军民融合
      </el-row>

      <el-col :span="24">
        <el-row justify="space-between">
          <div class="item-row">
            <span class="font-size14 color-666">增长率</span>

            <el-col class="font-size20 color-pramiry">30% </el-col>
          </div>

          <div class="item-row">
            <span class="font-size14 color-666">主营业务收入</span>

            <el-col class="font-size20 color-pramiry"
              >30 <span class="font-size12 color-999">亿元</span>
            </el-col>
          </div>
        </el-row>
      </el-col>
    </el-row>

    <el-row class="info-item font-size14 color-666 item-bg margin-bottom8">
      <el-row class="title">
        国防科技工业
      </el-row>

      <el-col :span="24">
        <el-row justify="space-between">
          <div class="item-row">
            <span class="font-size14 color-666">增长率</span>

            <el-col class="font-size20 color-pramiry">30% </el-col>
          </div>

          <div class="item-row">
            <span class="font-size14 color-666">产值</span>

            <el-col class="font-size20 color-pramiry"
              >30 <span class="font-size12 color-999">亿元</span>
            </el-col>
          </div>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts">
/**
 * 卡片信息--- 产业融合发展
 */
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import { Aim } from "@element-plus/icons";
import {DataCenterRouter} from "@/route/dataCenter"

export default defineComponent({
  components: {
    MapTitle,
    Aim,
  },
  setup() {},
  methods: {
    detailsHandle() {
      console.log("--DataCenterRouter-sssss-", DataCenterRouter)
      this.$router.push(DataCenterRouter.DATA_INDUSTRIAL)
    },
  },
});
</script>
<style lang="scss" scoped>
@import url("./common.css");
.info {
  display: flex;
  flex-direction: column;
  height: 100%;
  .margin-bottom8 {
    margin-bottom: 8px;
    &:last-of-type {
      margin-bottom: 0;
    }
  }

  .year {
    margin: 10px 0;
  }
   .item-row {
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        text-align: center;
      }

  .info-item {
    margin-bottom: 10px;
    padding: 15px 10px;
    &:last-of-type {
      margin-bottom: 0;
    }
    .title {
      margin-left: 15px;
      margin-bottom: 5px;
      color: #333;
      font-weight: bold;
      position: relative;
      &::before{
        content: " ";
        display: inline-block;
        position: absolute;
        top: 6px;
        left: -12px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #87bded;
      }
    }
  }
}
</style>
