<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"
      countColor="gold"
      size="1.4rem"
    />
    <div class="d-list">
      <div
        class="d-l-card"
        v-for="data in $store.state.foundList"
        :key="data.title"
        >
        <span class="title">
          <img :src="require(`@/assets/images/${data.img}`)" />
          {{data.title}}
        </span>
        <span :style="+data.num !== 0 ? 'color:gold' : ''">{{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
        color #fff
        font-weight 700
        font-size 1.2rem
        &.title
          display flex
          align-items center
          width 80%
          color #fff
          font-size .9rem
          font-weight normal
          >img
            width 1.25rem
            height 1.25rem
            margin-right 0.8rem
</style>
