<template>
  <el-row class="wrapper layout-grid-line">
    <el-col :span="span">
      <pre>
{{
  `
  import TimeSortSelectBox from '@/components/base/TimeSortSelectBox/index.vue'
    <div class="time-box">
      <TimeSortSelectBox @handle-px-change="handlePx" />
    </div>
  `
}}
      </pre>
      <div class="time-box">
        <TimeSortSelectBox @handle-px-change="handlePx" />
      </div>

    </el-col>

  </el-row>
</template>

<script setup>
import { ref } from 'vue'
import '@/styles/common.scss'
import TimeSortSelectBox from '@/components/base/TimeSortSelectBox/index.vue'
const span = 12

const handlePx = (val) => {
  alert(val)
}

</script>

<style lang="scss" scoped>
.time-box {
  width: 700px;
  height: 400px;
  padding: 100px;
  background: #F2F8FF;
  border: 1px solid var(--bg-black-5);
}
</style>