<template>
  <el-row :gutter="20" style="background: #f2f6fc; margin: 0">
    <el-col :span="20" :offset="2">
      <breadcrumb></breadcrumb>
    </el-col>
  </el-row>
  <el-row :gutter="20" class="user-center" style="margin: 20px 0">
    <el-col :span="4" :offset="2">
      <el-card>
        <h4 class="menu_title">开发者中心</h4>
        <el-menu router :default-active="$route.path">
          <el-menu-item-group title="1. 总体介绍">
            <el-menu-item index="/developCenter/a1">1.1 平台简介</el-menu-item>
            <el-menu-item index="/developCenter/a2">1.2 平台价值</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="2. 新手入门">
            <el-menu-item index="/developCenter/a3">
              2.1 注册开发者
            </el-menu-item>
            <el-menu-item index="/developCenter/a4">2.2 创建应用</el-menu-item>
            <el-menu-item index="/developCenter/a5">2.3 申请接口</el-menu-item>
            <el-menu-item index="/developCenter/a6">2.4 接口调用</el-menu-item>
          </el-menu-item-group>
          <!-- <el-menu-item-group title="3. 接入指南">
            <el-menu-item index="/developCenter/a7">3.1 应用接入</el-menu-item>
            <el-menu-item index="/developCenter/a8">3.2 应用审核</el-menu-item>
          </el-menu-item-group> -->
        </el-menu>
      </el-card>
    </el-col>
    <el-col :span="16">
      <el-card style="min-height: 640px">
        <router-view/>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import Breadcrumb from '../components/Breadcrumb.vue'

export default {
  name: 'developCenter',
  components: {
    Breadcrumb,
  },
}
</script>
<style scoped>
.index_head {
  background: url('../assets/slogan_bg3.jpg') no-repeat;
  background-size: 100% 100%;
  height: 120px;
}

.index_head h3 {
  font-size: 26px;
  color: rgb(255, 255, 255);
  text-align: center;
  line-height: 120px;
}

:deep(.el-menu) {
  border: none;
}

:deep(.el-menu-item-group__title) {
  font-size: 15px;
  font-weight: bold;
  color: #000;
}
</style>
