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