<template>
  <div class="inner_box border border-card-shadow rounded-2xl px-7 pt-8 pb-6 bg-white mt-5">
    <div class=" bg-app-blue rounded-full w-6 h-6 inline-block mr-2 align-middle relative">
      <img :src="path" class=" w-3 h-3 absolute inset-0 m-auto">
    </div>
    <span :title="title" class=" text-app-blue font-semibold text-base align-middle">{{title}}</span>
    <p class=" text-gray-700 text-sm text-justify pt-3">
      <slot></slot>
    </p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Icon from "@/components/common/Icon.vue"

export default defineComponent({
  components:{ Icon },
  props:{
    path:{
      type:String,
      default:''
    },
    title:{
      type:String,
      default:''
    }
  },
  setup () {
    

    return {}
  }
})
</script>

<style scoped>
.inner_box{
  box-shadow: 4px 9px #D6DBF8 ;
}
</style>