slibra-official-web/components/BaseCard.vue

<script setup lang="ts">
import { withDefaults } from 'vue';
import type { CSSProperties } from 'vue'

interface Props {
  cardWrapperStyle?: CSSProperties,
  title?: string,
  isText?: boolean,
  subTitle?: string,
  langKey?: string,
  subLangKey?: string
 }

withDefaults(defineProps<Props>(),{
  cardWrapperStyle: () => ({}),
  isText: () => false,
  langKey: () => 'empty',
  subLangKey: () => 'empty'
})

</script>

<template>
  <div class="layout-container " :style="cardWrapperStyle">
    <div class="layout-main px-[10px] md:px-[0px]">
      <h4 :class="['layout-title',isText ? 'pb-[18px]' : 'pb-[48px]', 'text-[28px]', 'md:text-[32px]']" v-if="!!title">{{ $t(langKey) }}</h4>
      <p v-if="subTitle" class="sub-title pb-[48px]">{{ $t(subLangKey) }}</p>
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
.layout-container {
  padding: 88px 0;

  .layout-main {
    max-width: 1080px;
    margin: 0 auto;

    .layout-title {
      font-size: 32px;
      line-height: 44px;
      font-weight: bold;
      text-align: center;
      color: $t-color-primary;
    }
    .sub-title {
      font-size: 18px;
      line-height: 26px;
      text-align: center;
      color: #666666;
    }
  }
}
@media  screen and (max-width: 944px){
	.en{
		.layout-container{
			.layout-main{
				.layout-title{
					font-size: 26px !important;
				}
			}
		}
	}
}
.en{
	.layout-container{
		.layout-main {
			max-width: 1380px;
		}
	}
}

</style>