<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/components/CommonCard/CommonCard.vue
 * @Date: 2022-08-08 11:36:50
 * @Description: 
 * @LastEditTime: 2023-04-04 11:32:56
 * @LastEditors: 李佐宁
-->
<script setup lang="ts">
import { mapMapping } from "@/assets/map/provinceData";
const mapData = reactive(mapMapping());
interface CommonCardProps {
  title?: string;
  unit?: string;
}
const { title = "" } = defineProps<CommonCardProps>();
</script>

<template>
  <div class="ya-card commonCard">
    <div class="title-box">
      <div v-if="title" class="title">
        <div>{{ title }}</div>
      </div>
      <div class="ya_right">
        <slot name="headerSlot"></slot>
        <div class="unit" v-if="unit">
          <div>单位：{{ unit }}</div>
          <div class="untit-bottom"></div>
        </div>
      </div>
      <!-- </div> -->
    </div>
    <div class="title-center">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ya-card {
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  height: 100%;

  box-shadow: inset 0px 1px 32px 0px rgba(16, 204, 252, 0.18);
  border: 1px solid rgba(84, 229, 252, 0.15);
  // 四个角样式
  background: linear-gradient(
        to bottom,
        #33cdfa 0px,
        #33cdfa 1px,
        transparent 1px,
        transparent 100%
      )
      left top no-repeat,
    linear-gradient(
        to right,
        #33cdfa 0px,
        #33cdfa 1px,
        transparent 1px,
        transparent 100%
      )
      left top no-repeat,
    linear-gradient(
        to bottom,
        #33cdfa 0px,
        #33cdfa 1px,
        transparent 1px,
        transparent 100%
      )
      right top no-repeat,
    linear-gradient(
        to left,
        #33cdfa 0px,
        #33cdfa 1px,
        transparent 1px,
        transparent 100%
      )
      right top no-repeat,
    linear-gradient(
        to top,
        #33cdfa 0px,
        #33cdfa 1px,
        transparent 1px,
        transparent 100%
      )
      left bottom no-repeat,
    linear-gradient(
        to right,
        #33cdfa 0px,
        #33cdfa 1px,
        transparent 1px,
        transparent 100%
      )
      left bottom no-repeat,
    linear-gradient(
        to top,
        #33cdfa 0px,
        #33cdfa 1px,
        transparent 1px,
        transparent 100%
      )
      right bottom no-repeat,
    linear-gradient(
        to left,
        #33cdfa 0px,
        #33cdfa 1px,
        transparent 1px,
        transparent 100%
      )
      right bottom no-repeat;

  background-color: rgba(9, 81, 135, 0.14);
  background-size: 1.5rem 1.5rem;
  .title-box {
    min-width: 0;
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: baseline;

    background-image: url("@/assets/image/card/card-title-bg.png");
    background-repeat: no-repeat;
    background-size: 101px 100%;

    .title {
      font-size: 18px;
      font-weight: 400;
      font-family: YouSheBiaoTiHei;
      color: #1ad7ff;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-shadow: 0px 0px 7px rgba(5, 252, 255, 0.64);
      background: linear-gradient(180deg, #ffffff 0%, #1ad7ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      position: relative;
      margin-left: 40px;
      border-bottom: 1px solid #1ad7ff;
      margin-bottom: 1px;
      height: 32px;
      display: flex;
      justify-content: space-between;
    }
    .unit {
      font-size: 14px;
      flex: 1;
      font-weight: 400;
      color: #8cecff;
      width: 73px;
      text-align: center;
      .untit-bottom {
        width: 73px;
        height: 3px;
        background: linear-gradient(
          90deg,
          rgba(140, 236, 255, 0) 0%,
          #8cecff 52%,
          rgba(140, 236, 255, 0) 100%
        );
      }
    }
  }
  // .title-flex {
  //   display: flex;
  //   justify-content: space-between;
  //   flex: 1;
  //   position: relative;
  // }
  .title-center {
    // height: 100%;
    flex: 1;
  }
}
</style>
