<template>
  <div class="nav-list">
    <div v-for="(item, index) in navList" :key="index" class="nav-list-item">
      <div class="left">
        <div :style="{ background: item.bg }">
          <i class="iconfont" :class="item.icon" style="color: #fff; font-size: 40px;" />
        </div>
        <div class="title">
          <div>{{ item.name }}</div>
          <div>{{ item.desc }}</div>
        </div>
      </div>
      <div class="right" @click="jump(item.path)">立即前往 >></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [{
        bg: '#235AEB',
        icon: 'icon-a-Group9361',
        name: '企业绑定',
        desc: '完成企业绑定 即可关联项目',
        path: '/myBusiness/index'
      },
      {
        bg: '#E9423A',
        icon: 'icon-a-Group921',
        name: '项目绑定',
        desc: '完成项目绑定 即可获取贸易额度',
        path: '/myBusiness/index'
      },
      {
        bg: '#23D9A2',
        icon: 'icon-Vector',
        name: '贸易相关',
        desc: '关联贸易数据  即可发起申请',
        path: '/myTrade/index'
      },
      {
        bg: '#635DF7',
        icon: 'icon-a-Group920',
        name: '申请贸易',
        desc: '发起贸易申请',
        path: '/myFinancing/index'
      }]
    }
  },
  methods: {
    jump(path) {
      this.$router.push({ path })
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-list {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .nav-list-item {
    width: calc(50% - 10px);
    padding-left: 30px;
    padding-right: 20px;
    height: 170px;
    background: #fff;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .left {
      display: flex;
      & > div {
        &:first-child {
          width: 80px;
          height: 80px;
          background: #235AEB;
          border-radius: 10px;
          text-align: center;
          line-height: 80px;
        }
      }
      .title {
        margin-left: 20px;
        & > div {
          &:first-child {
            font-size: 20px;
            color: #222931;
            font-weight: 700;
            line-height: 55px;
          }
          &:last-child {
            font-size: 16px;
            color: #A3A8AC
          }
        }
      }
    }
    .right {
      font-size: 16px;
      cursor: pointer;
      color: #E9423A;
    }
    &:hover {
      background: #E9423A;
      color: #fff !important;
      .left {
        & > div {
          &:first-child {
            background: rgba(255, 255, 255, .2) !important;
          }
        }
        .title {
          & > div {
            &:first-child {
              color: #fff;
            }
            &:last-child {
              color: #fff
            }
          }
        }
      }
      .right {
        color: #fff;
      }
    }
  }
}

</style>
