<template>
  <div class="page-material">
    <HeadingType01 class="heading_sales--details" align="left">
      売上詳細
    </HeadingType01>
    <CardMini class="card-post" />
    <BoxType02>
      <HeadingType02> これまでの売上 </HeadingType02>
      <SaleAmount title="累計売上総額" :amount="1000000" />
      <HeadingType02 class="sales-by-work">
        生まれた作品別の売上
      </HeadingType02>
      <div class="table-scroll scroll-inner">
        <TableLinkListSales01 class="table-material" />
      </div>
    </BoxType02>
    <PageNavi class="page-change" :last-page="lastPage" :current-page="currentPage" />
  </div>
</template>
<script>
/*

XDページ名
A4-1i-2b/売上詳細_プロジェクト素材

*/
export default {
  layout: 'mypage',
  data () {
    return {
      currentPage: 0,
      lastPage: 0
    }
  },

  mounted () {
    this.$store.commit('bread/set', [
      {
        title: 'マイページ/売上管理'
      }
    ])
  }
}
</script>
<style lang="scss">
@include mq-sp {
  .page-material .heading_sales--details {
    margin: 0rem 0rem 2rem 2rem;
  }
  .part-item {
    font-size: 1.1rem;
  }
  .content-row {
    align-items: baseline;
  }
  .time {
    font-size: 1.3rem;
  }
  .sales-by-work {
    margin: 4rem 0 0 0;
  }
  .page-material .card-post {
    margin-bottom: 3rem;
  }
  .page-material .page-change {
    margin-top: 4rem;
  }
  .page-material .table-scroll {
    overflow: auto;
  }
  .page-material .scroll-inner {
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar:horizontal {
      height: 4px;
    }
    &::-webkit-scrollbar-track {
      background-color: transparentize(#ccc, 0.7);
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: #725feb;
      box-shadow: inset 0 0 6px rgba(47, 50, 238, 0.5);
    }
  }
  .page-material .table-material {
    width: max-content;
    margin-bottom: 0;
    max-width: none;
  }
}
</style>
