From ac594e4efb30ba28776d74b0fb08ab34d7c32023 Mon Sep 17 00:00:00 2001
From: HelenHuang <LinHuang@pollex.com.tw>
Date: 星期四, 30 十二月 2021 15:20:08 +0800
Subject: [PATCH] Merge branch 'Phase2'
---
PAMapp/components/Ui/UiField.vue | 55 ++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 42 insertions(+), 13 deletions(-)
diff --git a/PAMapp/components/Ui/UiField.vue b/PAMapp/components/Ui/UiField.vue
index f069cc7..44e9ff4 100644
--- a/PAMapp/components/Ui/UiField.vue
+++ b/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"><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,33 @@
<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()
+ displayDevice!: 'MOBILE' | 'DESKTOP' | 'ALL';
+
+ currentDevice: 'MOBILE' | 'DESKTOP' = 'MOBILE';
+
+ //////////////////////////////////////////////////////////////////
+
+ mounted(): void {
+ this.currentDevice = UtilsService.isMobileDevice() ? 'MOBILE' : 'DESKTOP';
+ }
get fieldSpan(): number {
return this.span || 24;
@@ -33,6 +54,10 @@
return `${this.label}`;
}
+ get fieldDisplayDevice(): 'MOBILE' | 'DESKTOP' | 'ALL' {
+ return this.displayDevice || 'ALL';
+ }
+
}
</script>
@@ -41,18 +66,22 @@
.pam-field {
display: flex;
flex-direction: column;
- .pam-field-label {
+ .pam-field__label {
display: flex;
align-items: center;
.pam-icon {
font-size: 12px;
}
- .pam-field-title {
+ .pam-field__title {
font-size: 16px;
font-weight: bold;
display: flex;
align-items: center;
}
}
+ .pam-field__content {
+ padding-top: 10px;
+ display: flex;
+ }
}
</style>
--
Gitblit v1.8.0