slibra-official-web/components/IconPanel.vue

<script setup lang="ts">
defineProps<{
  iconName: string;
  title: string;
  desc: string;
  subDesc?: string;
	titleKey: string;
	descKey: string;
	subDescKey?:string
}>();
</script>

<template>
  <div class="icon-panel">
    <BaseIcon :name="iconName" width="48" height="48" />
    <p class="title font-bold">{{ $t(titleKey) }}</p>
    <span class="desc" v-html="$t(descKey)"></span>
    <span class="desc" v-if="subDesc">{{ $t(subDescKey) }}</span>
  </div>
</template>

<style scoped lang="scss">
.icon-panel {
  @include flex(y, center, center);

  .title {
    margin: 10px 0;
    font-size: 20px;
    line-height: 28px;
  }

  .desc {
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #565E66;
  }
}
.en {
  .title {
    text-align: center;
    font-size: 14px;
  }
}
@media  screen and (min-width: 768px){
	.en{
		.icon-panel{
			.title{
				// font-size: 18px;
			}
		}
	}
}
</style>