<!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-19 10:15:33
 * @LastEditors: hisense.liangjunhua
 * @LastEditTime: 2022-06-19 10:18:49
 * @Description: 告诉大家这是什么
-->
<template>
  <div class="knowledge-base">
    <div class="knowledge-top">
      <span class="title">知识库</span>
    </div>
    <div class="knowledge-content">
      <div v-for="(item, index) in contentBox" :key="index">
        <img :src="item.photo" alt="" />
        <h3>{{ item.name }}</h3>
        <h3>{{ item.type }}</h3>
        <h6 class="num">{{ item.num }}</h6>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import { KnowledgeBaseStatic } from '@/api/capabilityCloud'
  const contentBoxData = ref([])
  const contentBox = ref([
    {
      photo: require('@/assets/capabilityCloud/Knowledge-up.png'),
      name: '知识库',
      type: '上架总量',
      num: '',
    },
    {
      photo: require('@/assets/capabilityCloud/Knowledge-look.png'),
      name: '知识库',
      type: '浏览总量',
      num: '',
    },
  ])
  KnowledgeBaseStatic().then((res) => {
    console.log(res.data.data)
    contentBoxData.value = res.data.data
    console.log(contentBoxData.value)
    contentBox.value[0].num = contentBoxData.value[0].amount
    contentBox.value[1].num = contentBoxData.value[1].amount
  })
</script>
<style lang="less" scoped>
  .knowledge-base {
    width: 1.52rem;
    height: 4.63rem;
    background: rgba(0, 108, 188, 0.1);
    border-radius: 0.02rem;
    border: 0.01rem solid rgba(0, 108, 188, 0.7);
    box-sizing: border-box;
    .knowledge-top {
      height: 0.6rem;
      background: url('~@/assets/capabilityCloud/Knowledge-title.png') no-repeat;
      text-align: center;
      font-size: 0.24rem;
    }
    .knowledge-content {
      width: 100%;

      div {
        width: 1.18rem;
        height: 1.76rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-image: linear-gradient(#214678, transparent);
        margin-bottom: 0.2rem;
        img {
          margin: 0.27rem 0 0.12rem;
        }
        h3 {
          font-size: 0.16rem;
          font-weight: normal;
          color: #ffffff;
          margin-bottom: 0rem;
        }
        .num {
          font-weight: 300;
          font-size: 0.28rem;
          color: #1ef6f5;
          margin-bottom: 0.27rem;
        }
      }
    }
  }
</style>