<template>
  <el-row class="wrapper layout-grid-line">
    <el-col :span="span">
      <pre>
        {{
          `
      import ActionButton from '@/components/base/ActionButton/index.vue'
      <ActionButton name="全部选项" type="active" />
      <ActionButton name="选项A" type="normal" />
      <ActionButton name="选项B" type="normal" />
      <ActionButton name="选项C" type="normal" />

      选项按钮
  `
        }}
      </pre>
      <div class="button-box">
        <ActionButton name="全部选项" type="active" />
        <ActionButton name="选项A" type="normal" />
        <ActionButton name="选项B" type="normal" />
        <ActionButton name="选项C" type="normal" />
      </div>

    </el-col>

    <el-col :span="span">
      <pre>
        {{
          `
      import LeftBtn from '@/components/base/PageBtn/LeftBtn.vue'
      import RightBtn from '@/components/base/PageBtn/RightBtn.vue'

      <LeftBtn />
      <RightBtn />
        
      左右按钮
  `
        }}
      </pre>
      <div class="button-box1">
        <LeftBtn />
        <RightBtn />
      </div>

    </el-col>
  </el-row>
</template>

<script setup>
import '@/styles/common.scss'
import LeftBtn from '@/components/base/pageBtn/leftBtn.vue'
import RightBtn from '@/components/base/pageBtn/rightBtn.vue'
const span = 12
</script>

<style lang="scss" scoped>
.button-box {
  margin-left: 40px;
  ;
  display: flex;
  gap: 8px
}

.button-box1 {
  width: 200px;
  display: flex;
  justify-content: space-between;
  margin-left: 40px;
  margin-bottom: 10px;
  gap: 8px
}
</style>