opt_web/src/views/product-manage/historical-detail/index.vue

<script lang="ts" setup>
/**
 * @Name: index.vue
 * @Description: 历史详情
 * @Author: Cheney
 */

import { useTableHeight } from '/@/utils/useCustomHeight';
import PriceChart from '/@/views/product-manage/historical-detail/component/PriceChart.vue';
import DataTable from '/@/views/product-manage/historical-detail/component/DataTable.vue';


const isShowHistory = defineModel({ default: false });

const props = defineProps({
  rowData: <any>Object,
  title: String
});
const { rowData, title } = props;

const heightObj = { topBar: 50, cardMargin: 8, cardPadding: 20 };
const { tableHeight } = useTableHeight(heightObj);


</script>

<template>
  <div class="drawer-container">
    <el-drawer
        ref="editDrawer"
        v-model="isShowHistory"
        :show-close="false"
        :title="`${title} - 历史详情`"
        direction="btt"
        size="85%"
        style="background-color:#F3F4FB;">
      <div class="sticky top-0" style="background-color:#F3F4FB; min-height: 20px; z-index: 999"></div>
      <div class="px-5">
        <PriceChart :asin="rowData.asin" :country="rowData.country_code" />
        <DataTable :asin="rowData.asin" :country="rowData.country_code" />
      </div>
    </el-drawer>
  </div>

</template>

<style scoped>
.drawer-container :deep(.el-drawer__header) {
  border-bottom: none;
  font-weight: 500;
}

.drawer-container :deep(.el-drawer__title) {
  font-size: 18px;
}
</style>