123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 |
- <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>
|