<template>
|
<el-col :span="24" class="pam-field">
|
<div class="pam-field-label">
|
<div class="pam-field-title"><i :class="fieldIcon"></i>{{ fieldLabel }}</div>
|
</div>
|
<p class="pam-field-content pt-10">
|
<slot></slot>
|
</p>
|
</el-col>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, Prop } from 'vue-property-decorator';
|
|
@Component
|
export default class UiCarousel extends Vue {
|
|
@Prop() span!: number;
|
@Prop() icon!: string;
|
@Prop() label!: string;
|
@Prop() content!: string;
|
// @Prop() displayDevice!: 'MOBILE' | 'DESKTOP';
|
|
get fieldSpan(): number {
|
return this.span || 24;
|
}
|
|
get fieldIcon(): string {
|
return `pam-icon icon-${this.icon}`;
|
}
|
|
get fieldLabel(): string {
|
return `${this.label}`;
|
}
|
|
}
|
</script>
|
|
|
<style lang="scss" scoped>
|
.pam-field {
|
display: flex;
|
flex-direction: column;
|
.pam-field-label {
|
display: flex;
|
align-items: center;
|
.pam-icon {
|
font-size: 12px;
|
}
|
.pam-field-title {
|
font-size: 16px;
|
font-weight: bold;
|
display: flex;
|
align-items: center;
|
}
|
}
|
}
|
</style>
|
