136 lines
2.6 KiB
Vue
136 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<div class="go-small-border">
|
||
|
|
<div class="header flex">
|
||
|
|
<img src="./assets/Header.svg" alt="标题" class="svg ih">
|
||
|
|
<span class="title">
|
||
|
|
{{ titleText }}
|
||
|
|
</span>
|
||
|
|
<span class="right-select">
|
||
|
|
<ConsumSelect v-show="selectOption.show" :options="selectOption.dataset"
|
||
|
|
:selectedValue="selectOption.selectValue" @change="handleSelectChange"
|
||
|
|
:select-style-config="selectStyleConfig" />
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="content flex">
|
||
|
|
<img src="./assets/Background.svg" alt="" class="svg ic">
|
||
|
|
<slot>
|
||
|
|
</slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import ConsumSelect from './select.vue'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
titleText: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
selectOption: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({
|
||
|
|
show: false,
|
||
|
|
selectValue: 'day',
|
||
|
|
dataset: [
|
||
|
|
{
|
||
|
|
label: '当天',
|
||
|
|
value: 'day'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '本周',
|
||
|
|
value: 'week'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '当月',
|
||
|
|
value: 'month'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '本季度',
|
||
|
|
value: 'quarter'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '当年',
|
||
|
|
value: 'year'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
}, selectStyleConfig: {
|
||
|
|
default: () => ({
|
||
|
|
showAngle: true
|
||
|
|
}),
|
||
|
|
required: false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const emits = defineEmits(['change'])
|
||
|
|
const handleSelectChange = (value: any) => {
|
||
|
|
emits('change', value)
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.go-small-border {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.flex {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
position: relative;
|
||
|
|
height: 35px;
|
||
|
|
width: 90%;
|
||
|
|
/* background-color: antiquewhite; */
|
||
|
|
align-items: center;
|
||
|
|
padding-bottom: 2px;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.ih {
|
||
|
|
top: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
margin-left: 70px;
|
||
|
|
margin-top: 8px;
|
||
|
|
z-index: 10;
|
||
|
|
white-space: nowrap;
|
||
|
|
font-family: 'CustomFont';
|
||
|
|
font-style: italic;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
color: #eee;
|
||
|
|
text-shadow: 1px 3px 10px #000000;
|
||
|
|
font-size: 16px;
|
||
|
|
/* background-color: #eee; */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
height: calc(100% - 30px);
|
||
|
|
/* min-height: calc(100% - 15px); */
|
||
|
|
margin-top: 2px;
|
||
|
|
width: 90%;
|
||
|
|
padding: 5px 10px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
position: relative;
|
||
|
|
/* background-color: aquamarine; */
|
||
|
|
|
||
|
|
.ic {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.svg {
|
||
|
|
position: absolute;
|
||
|
|
height: 99%;
|
||
|
|
width: 100%;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|