<template>
  <!-- 加入团队 -->
  <div class="team-frame">
    <main-page
      header-bg="bg-transparent"
      title-color="text-white"
      @click-left="$router.go(-1)"
    >
      <app-icon
        slot="right"
        icon-name="QRcode"
        class-name="w-4 h-4"
        @click="$router.push('/tag')"
      />
      <!-- 顶部左侧插槽 -->
      <template slot="left">
        <app-icon
          type="png"
          class-name="w-6.5 w-6.5"
          :path="require('@/assets/icons/left-arrow-white.png')"
          @click="$router.go(-1)"
        />
      </template>
      <div class="relative w-full h-40 bg-gradient-to-r from-linear-t to-linear-b">
        <!-- 背景图 -->
        <img class="w-82 absolute top-0 right-0" src="@/assets/images/header-bg.png" alt="">
        <!-- logo -->
        <div class="absolute top-20 left-1/2 border transform -translate-x-1/2 z-10 w-15 h-15 bg-white rounded-full overflow-hidden flex items-center justify-center">
          <img src="@/assets/images/33.png" alt="" class="max-w-full">
        </div>
        <div class="top-28 px-4 w-full absolute top-10">
          <div class="bg-white w-full rounded pt-8 pb-4 flex flex-col items-center shadow-bg">
            <div class="font-medium">杭州复杂美科技有限公司</div>
            <div class="font-medium text-sm text-text-secondary mt-0.5">团队号 HZFZM0001</div>
            <div class="mx-5 mt-4 h-20 overflow-y-scroll text-xs text-text-secondary">
              公司成立于2008年，2013年启动区块链、智能合约的研发与创新，
              2014年申请区块链发明专利:钱包找回功能已申请区块链相关专利500余项，
              其中已获得授权超80项，2019年据德温特专利家族统计，
              复杂美区块链发明专利排名位于全球第三，仅次于阿里巴巴和IBM。
            </div>
          </div>
        </div>
      </div>
      <div class="px-4 pt-40 pb-10 rounded">
        <c-cell>
          <div slot="prefix" class="text-text-secondary">个人信息</div>
        </c-cell>
        <c-cell>
          <div slot="prefix" class="text-text-secondary">真实姓名</div>
          <div slot="right" class="">张三</div>
        </c-cell>
        <c-cell>
          <div slot="prefix" class="text-text-secondary">职位</div>
          <div slot="right" class="">产品经理</div>
        </c-cell>
        <c-cell>
          <div slot="prefix" class="text-text-secondary">部门</div>
          <div slot="right" class="">产品设计部</div>
        </c-cell>
        <c-cell>
          <div slot="prefix" class="text-text-secondary" />
          <div slot="right" class="">产品部</div>
        </c-cell>
        <c-cell>
          <div slot="prefix" class="text-text-secondary">入职时间</div>
          <div slot="right" class="">2019-12-18</div>
        </c-cell>
      </div>
    </main-page>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'Myinfo',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'c-cell': () => import('@/components/common/c-cell.vue')
  },
  data() {
    return {

    }
  },
  created() {
    // console.log(Mock, 'mock')
  },
  methods: {
  }
})
</script>

<style lang="less">

</style>
