update#136137: [諮詢度表現] 顧問詳細資訊API 前端調整串接

Tomas

2022-03-09 e02d6534d2dba4b8adcbb80e37cc77bf8bddd26c

 PAMapp/components/Ui/UiField.vue

@@ -1,9 +1,11 @@
<template>
    <el-col :span="24" class="pam-field">
      <div class="pam-field-label">
        <div class="pam-field-title"><i :class="fieldIcon"></i>{{ fieldLabel }}</div>
    <el-col :span="fieldSpan" class="pam-field"
      v-if="fieldDisplayDevice === 'ALL'
      || fieldDisplayDevice === currentDevice">
      <div class="pam-field__label">
        <div class="pam-field__title" :style="{ 'font-size': fieldLabelSize }"><i :class="fieldIcon"></i>{{ fieldLabel }}</div>
      </div>
      <p class="pam-field-content pt-10">
      <p class="pam-field__content">
        <slot></slot>
      </p>
    </el-col>
@@ -12,14 +14,36 @@
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component
export default class UiCarousel extends Vue {
import UtilsService from '~/shared/services/utils.service';

  @Prop() span!: number;
  @Prop() icon!: string;
  @Prop() label!: string;
  @Prop() content!: string;
  // @Prop() displayDevice!: 'MOBILE' | 'DESKTOP';
@Component
export default class UiField extends Vue {

  @Prop()
  span!: number;

  @Prop()
  icon!: string;

  @Prop()
  label!: string;

  @Prop()
  content!: string;

  @Prop()
  labelSize?: number;

  @Prop()
  displayDevice!: 'MOBILE' | 'DESKTOP' | 'ALL';

  currentDevice: 'MOBILE' | 'DESKTOP' = 'MOBILE';

  //////////////////////////////////////////////////////////////////

  mounted(): void {
    this.currentDevice = UtilsService.isMobileDevice() ? 'MOBILE' : 'DESKTOP';
  }

  get fieldSpan(): number {
    return this.span || 24;
@@ -33,26 +57,38 @@
    return `${this.label}`;
  }

  get fieldDisplayDevice(): 'MOBILE' | 'DESKTOP' | 'ALL' {
    return this.displayDevice || 'ALL';
  }

  get fieldLabelSize(): string {
    return (this.labelSize || 16) + 'px';
  }

}
</script>


<style lang="scss" scoped>
.pam-field {
  display: flex;
  display       : flex;
  flex-direction: column;
  .pam-field-label {
    display: flex;
  .pam-field__label {
    align-items: center;
    display    : flex;
    .pam-icon {
      font-size: 12px;
    }
    .pam-field-title {
      font-size: 16px;
      font-weight: bold;
      display: flex;
    .pam-field__title {
      align-items: center;
      display    : flex;
      font-weight: bold;
    }
  }
  .pam-field__content {
    display    : flex;
    // padding-top: 10px;
    white-space: pre-line;
    line-height: 1.5;
  }
}
</style>