<template>
  
  <div class="store-page">
    <Breadcrumb />
    <UserInfoHeader />
    <div class="content">
        <a-grid :cols="24" :col-gap="16" :row-gap="16">
          <a-grid-item :span="24">
            <MyProject />
          </a-grid-item>
          <a-grid-item :span="24">
            <!-- <LatestActivity /> -->
          </a-grid-item>
        </a-grid>
    </div>
  </div>
</template>

<script setup>
import UserInfoHeader from './components/user-info-header.vue'
import MyProject from './components/my-project.vue'
// import LatestActivity from './components/latest-activity.vue';
</script>

<style scoped lang="less">
.content {
  display: flex;
  margin-top: 12px;

  &-left {
    flex: 1;
    margin-right: 16px;
    overflow: hidden;
    // background-color: var(--color-bg-2);

    :deep(.arco-tabs-nav-tab) {
      margin-left: 16px;
    }
  }

  &-right {
    width: 332px;
  }

  .tab-pane-wrapper {
    padding: 0 16px 16px 16px;
  }
}

@media (max-width: 768px) {
  .content {
    display: block;
  }

  .content-left {
    margin-right: 0;
    margin-bottom: 12px;
  }

  .content-right {
    width: 100%;
  }
}
</style>
