<template>
  <div class="page">
    <!-- <div class="title">{{ $t("API.comingSoon") }}</div> -->
    <!-- 左侧名称 -->
    <div class="left">
      <div class="scrollBox">
        <p>啊实打实大</p>
      </div>
    </div>
    <!-- 右侧介绍 -->
    <div class="right">
      <div class="scrollBox"></div>
    </div>
  </div>
</template>

<script setup>
// import { ref } from 'vue'
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  width: 100%;
  overflow: hidden;
  overflow-y: scroll;
  background-color: #f5f5f5;
  border-radius: 25px 0 0 0;
  min-height: calc(100vh - 80px);
  // text-align: center;
  .title {
    font-size: 50px;
  }
}
.left {
  height: calc(100vh - 80px);
  width: 30%;
  padding: 30px 15px 30px 30px;
  font-size: 20px;
  background-color: #f5f5f5;

  .scrollBox {
    padding: 20px;
    height: calc(100vh - 80px - 60px);
    width: 100%;
    overflow-y: scroll;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px;
  }
}
.right {
  height: calc(100vh - 80px);
  width: 80%;
  padding: 30px 30px 30px 15px;
  background-color: #f5f5f5;
  .scrollBox {
    padding: 20px;
    height: calc(100vh - 80px - 60px);
    width: 100%;
    overflow-y: scroll;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px;
  }
}
</style>
