<template>
  <div class="common-box" :class="bgName">
    <div class="common-title" v-if="name">
      <img v-if="!showIcon" class="icon" src="@/assets/images/common/title-icon.png" alt="" />
      <span :class="['name',{orange:showIcon}]">{{name}}</span>
      <span class="sub-name"><slot name="title-left"></slot></span>
    </div>
    <slot></slot>
  </div>
</template>

<script setup>
import {ref} from 'vue'
const props = defineProps({
    name:{
        type:String,
        defalut:''
    },
    bgName:{
        type:String,
        defalut:''
    },
    showIcon:{
        type:Boolean,
        defalut:false
    },
})
</script>

<style lang="scss" scoped>
.common-box {
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  box-sizing: border-box;
  &.green{
    background: linear-gradient(180deg,#EDFFF4,#FFFFFF);
  }

  .common-title {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .icon{
      width: 14px;
      height: 8px;
      margin-right: 6px;
    }
    .name{
      font-size: 15px;
      margin-left: 6px;
      &.orange{
        color: #DB8D19;
      }
    }
    .sub-name{
      color: #999999;
      font-size: 13px;
    }
  }
}
</style>