<template>
  <div class="version-info">
    <Card simple class="jyh-card mb-4">
      <div class="card-title">基本信息</div>
      <d-row class="mb-3">
        <d-col :span="8">
          <span class="card-key width-90">社区名称</span>
          <span class="card-val">开发者社区</span>
        </d-col>
        <d-col :span="8">
          <span class="card-key width-90">官网地址</span>
          <span class="card-val">https://www.huaweicloud.com</span>
        </d-col>
        <d-col :span="8">
          <span class="card-key width-90">联系方式</span>
          <span class="card-val">950808-1</span>
        </d-col>
      </d-row>
      <d-row class="mb-3">
        <d-col :span="24">
          <div class="flex">
            <span class="card-key width-90 flex-shrink-0">社区描述</span>
            <span class="card-val flex-grow-1"
              >华为开发者社区致力于打造华为开发者专属的官方技术交流平台，帮助开发者探索开发实践、交流心得经验、获悉业界动态、解决开发问题。汇聚华为云社区“华为云”领域博
              客、问答、视频等精彩内容，形成开发者和技术爱好者交流与分享主阵地。</span
            >
          </div>
        </d-col>
      </d-row>
    </Card>
    <Card simple class="jyh-card mb-4">
      <div class="card-title">贡献者分布</div>
      <p class="card-desc">有关Pull Request创建者的公司信息和地区分布(使用公共GitHub信息进行分析)</p>
      <div class="mt-3">
        <chart-line />
      </div>
    </Card>
  </div>
</template>

<script setup>
import ChartLine from '@/components/ChartLine/index.vue';
</script>

<style scoped lang="scss">
.card-desc {
  font-size: 12px;
  color: #808080;
}
</style>
