go-viee-fetch-Demo/src/packages/components/Charts/PublicSmallBorder/index.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-if="shouldShowSelect" :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 { computed, PropType } from 'vue'
import ConsumSelect from './select.vue'


interface SelectOption {
  selectValue: string
  dataset: Array<{
    label: string
    value: string
  }>
}
const props = defineProps({
  titleText: {
    type: String,
    required: true
  },
  selectOption: {
    type: Object as PropType<SelectOption | null>,
    default: null
  },
  selectStyleConfig: {
    default: () => ({
      showAngle: true
    }),
    required: false
  }
})

const emits = defineEmits(['change'])

const shouldShowSelect = computed(() => {
  return props.selectOption !== null &&
    props.selectOption !== undefined &&
    Array.isArray(props.selectOption.dataset) &&
    props.selectOption.dataset.length > 0
})

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: 9px;
      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; */
      max-width: 16em;
      overflow: hidden;
      text-overflow: ellipsis;
      /* background-color: aliceblue; */
    }

    .right-select {
      margin-left: 70px;
      margin-top: 8px;
      z-index: 10;
    }

  }

  .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>