<template>
  <div class="home_wrapper">
    <header-nav :currentNav="1"></header-nav>
    <div class="subnavigation_main">
      <router-link tag="div" to="/sunVillage/latestReport" class="channel c1">
        <div class="icon"></div>
        <div class="title">最新报道</div>
      </router-link>

      <router-link tag="div" to="/sunVillage/importantItems" class="channel c2">
        <div class="icon"></div>
        <div class="title">重大事项</div>
      </router-link>
      <router-link tag="div" to="/sunVillage/public" class="channel c3">
        <div class="icon"></div>
        <div class="title">三务公开</div>
      </router-link>

      <router-link tag="div" to="/sunVillage/financial" class="channel c4">
        <div class="icon"></div>
        <div class="title">惠民金融</div>
      </router-link>
      <router-link tag="div" to="/sunVillage/injoint" class="channel c5">
        <div class="icon"></div>
        <div class="title">三资公开</div>
      </router-link>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home_wrapper {
  width: 100%;
  padding-top: 126px;
  min-height: 100vh;
  background: #fff;
}
.subnavigation_main {
  margin: 50px 40px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .channel {
    background: #58cf99;
    border-radius: 20px;
    width: 308px;
    height: 308px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column; /* 子元素横向排列 */
    justify-content: center; /* 相对父元素水平居中 */
    align-items: center; /*  子元素相对父元素垂直居中 */

    .icon {
      width: 128px;
      height: 128px;
      margin-bottom: 32px;
    }
    .title {
      color: #fff;
      font-size: 28px;
    }
    &.c1 {
      background: #58cf99;
      .icon {
        background: url("../../assets/images/sunVillage/index_nav_1.png")
          no-repeat;
        background-size: 100% 100%;
      }
    }
    &.c2 {
      background: #ff9d00;
      .icon {
        background: url("../../assets/images/sunVillage/index_nav_2.png")
          no-repeat;
        background-size: 100% 100%;
      }
    }
    &.c3 {
      background: #fa90c2;
      .icon {
        background: url("../../assets/images/sunVillage/index_nav_3.png")
          no-repeat;
        background-size: 100% 100%;
      }
    }
    &.c4 {
      background: #6a7afa;
      .icon {
        background: url("../../assets/images/sunVillage/index_nav_4.png")
          no-repeat;
        background-size: 100% 100%;
      }
    }
    &.c5 {
      background: #66ccff;
      .icon {
        background: url("../../assets/images/sunVillage/index_nav_5.png")
          no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
</style>

<script>
import headerNav from "@/components/sunVillage/common/header.vue";
export default {
  name: "latestReport",
  components: { headerNav },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>
