<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 in $store.state.foundList"
        :key="data.title"
        >
        <img :src="require(`@/assets/images/${data.img}`)" alt="">
        <span class="title">{{data.title}}</span>
        <span>{{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 .7rem
      display flex
      justify-content space-between
      align-items center
      >img
        width 1.25rem /* 20/16 */
        height 1.25rem /* 20/16 */
      span
        color $edgeColor
        font-weight 700
        font-size 1.2rem
        &.title
          width 70%
          color #fff
          font-size 1rem
          font-weight normal
</style>
