63 lines
2.1 KiB
Vue
63 lines
2.1 KiB
Vue
<template>
|
|
<div class="h-[358px] relative bg-[#082059]">
|
|
<div class="flex h-full custom-border absolute top-0 left-0">
|
|
<SvgComponent :content="headerLeftSvg" class="w-[255px] h-[36px]" />
|
|
<SvgComponent :content="headerRightSvg" class="w-[669px] h-[36px]" />
|
|
<div class="absolute top-[2px] left-[15px] flex items-center">
|
|
<SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
|
|
<div class="ml-[9px] font-700 flex items-baseline">
|
|
<span class="text-[20px] text-color" data-text="咨询学段">咨询学段</span>
|
|
<span class="text-[14px] text-color" data-text="(已标记)">(已标记)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[calc(100%-36px)] mt-[36px]">
|
|
<AskSectionChart :chart-data="askSectionData.stages || []" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import SvgComponent from "@/components/SvgComponent.vue";
|
|
import AskSectionChart from "@/views/components/chartsComponents/AskSectionChart.vue";
|
|
|
|
const headerLeftSvg = ref("");
|
|
const headerRightSvg = ref("");
|
|
|
|
const getHeaderLeftSvg = async () => {
|
|
const { default: svg } = await import("/src/assets/svg-img/header-bg-left.svg?raw");
|
|
headerLeftSvg.value = svg;
|
|
};
|
|
|
|
const getHeaderRightSvg = async () => {
|
|
const { default: svg } = await import("/src/assets/svg-img/header-bg-right.svg?raw");
|
|
headerRightSvg.value = svg;
|
|
};
|
|
|
|
const arrowLeftSvg = ref("");
|
|
const getArrowLeftSvg = async () => {
|
|
const { default: svg } = await import("/src/assets/svg-img/arrow-left.svg?raw");
|
|
arrowLeftSvg.value = svg;
|
|
};
|
|
|
|
const askSectionData = inject("askSectionData", ref({ stages: [] }));
|
|
|
|
onBeforeMount(() => {
|
|
getHeaderLeftSvg();
|
|
getHeaderRightSvg();
|
|
getArrowLeftSvg();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/styles/text-color.scss";
|
|
.custom-border {
|
|
border-image-slice: 27 27 27 27;
|
|
border-image-width: 1px 1px 2px 1px;
|
|
border-image-outset: 0px 0px 0px 0px;
|
|
border-image-repeat: stretch stretch;
|
|
border-image-source: url("src/assets/svg-img/border-image.png");
|
|
border-style: solid;
|
|
}
|
|
</style>
|