<template>
  <x-scroll-box>
    <div class="two-column-layout">
      <!-- 左列 -->
      <div class="column column-left">
        <div v-for="i in 100" :key="'left-' + i" class="item">
          左列第 {{ i }} 行
        </div>
      </div>

      <!-- 右列 -->
      <div class="column column-right">
        <div v-for="i in 100" :key="'right-' + i" class="item">
          右列第 {{ i }} 行
        </div>
      </div>
    </div>
  </x-scroll-box>
</template>

<script>
export default {
  name: 'XScrollBoxExample',
  computed: {
  }
}
</script>

<style lang="less" scoped>
.two-column-layout {
  display: flex;
  gap: 0;
  min-height: 100%;

  .column {
    flex: 1;

    &.column-left {
      background-color: #e6f7ff;
      border-right: 2px solid #1890ff;

      .item {
        padding: 15px 20px;
        border-bottom: 1px solid #91d5ff;
        color: #0050b3;
        font-weight: 500;

        &:hover {
          background-color: #bae7ff;
        }
      }
    }

    &.column-right {
      background-color: #fff1f0;

      .item {
        padding: 15px 20px;
        border-bottom: 1px solid #ffccc7;
        color: #cf1322;
        font-weight: 500;

        &:hover {
          background-color: #ffccc7;
        }
      }
    }
  }
}
</style>
