<template>
  <div class="discovery">
    <m-brief
      class="d-card"
      v-for="data in $store.state.discoveryList"
      :key="data.title"
      :icon="require(`@/assets/images/${data.img}`)"
      :label="data.title"
      :count="+data.num"
      :unit="data.unit"
      labelColor="#5587b7"
      countColor="#00f2ff"
      size="1.2rem"
    />
    <div class="d-list">
      <div
        class="d-l-card"
        v-for="(data, i) in $store.state.foundList"
        :key="data.title"
        >
        <span class="title">
          <img :src="require(`@/assets/images/${data.img}`)" />
          {{data.title}}
        </span>
        <span v-if="i != $store.state.foundList.length - 1 ">{{data.num}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Discovery'

}
</script>

<style lang="stylus" scoped>
.discovery
  display flex
  width 100%
  height 100%
  flex-wrap wrap
  .d-card
    width 50%
  .d-list
    display flex
    flex-wrap wrap
    .d-l-card
      width 49%
      background-color rgba(6,27,50,0.9)
      margin 0.1rem
      padding 0 .7rem
      display flex
      justify-content space-between
      align-items center
      &:last-child
        span
         &.title
          color gold
      span
        color $edgeColor
        font-weight 700
        font-size 1.2rem
        &.title
          display flex
          align-items center
          width 70%
          color #fff
          font-size 1rem
          font-weight normal
          >img
            width 1.25rem
            height 1.25rem
            margin-right 0.8rem
</style>
