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

    </el-col>

  </el-row>
</template>

<script setup>
import { ref } from 'vue'
import '@/styles/common.scss'
import TimeSortSelectBox from '@/components/base/TimeSortSelectBox/index.vue'
import HeatSortSelectBox from '@/components/base/HeatSortSelectBox/index.vue'
import GradeSortSelectBox from '@/components/base/GradeSortSelectBox/index.vue'

const span = 12

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

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

const handleGradePx = (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>