File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="component-wrap flex-column justify-center">
<p
class="data-caption cursor mb10"
:id="parent.layoutNm + '-MainTitle'"
data-type="text"
@click="optionChangeClick"
:style="styleObj('-MainTitle')"
>
{{ parent.componentOption[parent.layoutNm + "-MainTitle"].textData }}
</p>
<div class="flex justify-between align-center">
<div class="flex50">
<p
class="data-title cursor"
:id="parent.layoutNm + '-Title1'"
data-type="text"
@click="optionChangeClick"
:style="styleObj('-Title1')"
>
{{ parent.componentOption[parent.layoutNm + "-Title1"].textData }}
</p>
</div>
<div class="flex50">
<p
class="data-number text-rg cursor"
:id="parent.layoutNm + '-Value1'"
data-type="column"
@click="optionChangeClick"
:style="styleObj('-Value1')"
>
{{ parent.componentOption[parent.layoutNm + "-Value1"].columnData }}
<span class="data-unit ml5" :style="styleObj('-Value1')">
{{ parent.componentOption[parent.layoutNm + "-Value1"].unitData }}
</span>
</p>
</div>
</div>
<div class="flex justify-between align-center">
<div class="flex50">
<p
class="data-title cursor"
:id="parent.layoutNm + '-Title2'"
data-type="text"
@click="optionChangeClick"
:style="styleObj('-Title2')"
>
{{ parent.componentOption[parent.layoutNm + "-Title2"].textData }}
</p>
</div>
<div class="flex50">
<p
class="data-number text-rg cursor"
:id="parent.layoutNm + '-Value2'"
data-type="column"
@click="optionChangeClick"
:style="styleObj('-Value2')"
>
{{ parent.componentOption[parent.layoutNm + "-Value2"].columnData }}
<span class="data-unit ml5 point-none" :style="styleObj('-Value2')">
{{ parent.componentOption[parent.layoutNm + "-Value2"].unitData }}
</span>
</p>
</div>
</div>
<div class="flex justify-between align-center">
<div class="flex50">
<p
class="data-title cursor"
:id="parent.layoutNm + '-Title3'"
data-type="text"
@click="optionChangeClick"
:style="styleObj('-Title3')"
>
{{ parent.componentOption[parent.layoutNm + "-Title3"].textData }}
</p>
</div>
<div class="flex50">
<p
class="data-number text-rg cursor"
:id="parent.layoutNm + '-Value3'"
data-type="column"
@click="optionChangeClick"
:style="styleObj('-Value3')"
>
{{ parent.componentOption[parent.layoutNm + "-Value3"].columnData }}
<span class="data-unit ml5 point-none" :style="styleObj('-Value3')">
{{ parent.componentOption[parent.layoutNm + "-Value3"].unitData }}
</span>
</p>
</div>
</div>
<div class="flex justify-between align-center">
<div class="flex50">
<p
class="data-title cursor"
:id="parent.layoutNm + '-Title4'"
data-type="text"
@click="optionChangeClick"
:style="styleObj('-Title4')"
>
{{ parent.componentOption[parent.layoutNm + "-Title4"].textData }}
</p>
</div>
<div class="flex50">
<p
class="data-number text-rg cursor"
:id="parent.layoutNm + '-Value4'"
data-type="column"
@click="optionChangeClick"
:style="styleObj('-Value4')"
>
{{ parent.componentOption[parent.layoutNm + "-Value4"].columnData }}
<span class="data-unit ml5 point-none" :style="styleObj('-Value4')">
{{ parent.componentOption[parent.layoutNm + "-Value4"].unitData }}
</span>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
parent: {
type: Object,
required: true,
},
optionChangeClick: {
type: Function,
},
componentOptn: {
type: Object,
required: true,
},
},
methods: {
optionChangeClick: function (e) {
this.$emit("parentInfo", this.parent);
this.optionChangeClick(e);
},
baseSetting: function () {
this.parent["componentOption"][this.parent.layoutNm + "-MainTitle"] =
JSON.parse(JSON.stringify(this.componentOptn));
this.parent["componentOption"][this.parent.layoutNm + "-Title1"] =
JSON.parse(JSON.stringify(this.componentOptn));
this.parent["componentOption"][this.parent.layoutNm + "-Title2"] =
JSON.parse(JSON.stringify(this.componentOptn));
this.parent["componentOption"][this.parent.layoutNm + "-Title3"] =
JSON.parse(JSON.stringify(this.componentOptn));
this.parent["componentOption"][this.parent.layoutNm + "-Title4"] =
JSON.parse(JSON.stringify(this.componentOptn));
this.parent["componentOption"][this.parent.layoutNm + "-Value1"] =
JSON.parse(JSON.stringify(this.componentOptn));
this.parent["componentOption"][this.parent.layoutNm + "-Value2"] =
JSON.parse(JSON.stringify(this.componentOptn));
this.parent["componentOption"][this.parent.layoutNm + "-Value3"] =
JSON.parse(JSON.stringify(this.componentOptn));
this.parent["componentOption"][this.parent.layoutNm + "-Value4"] =
JSON.parse(JSON.stringify(this.componentOptn));
},
styleObj: function (name) {
return {
fontSize:
this.parent.componentOption[this.parent.layoutNm + name].textSize +
"pt",
fontWeight:
this.parent.componentOption[this.parent.layoutNm + name].textStyle ===
"bold"
? "bold"
: "",
fontStyle:
this.parent.componentOption[this.parent.layoutNm + name].textStyle ===
"normal"
? "normal"
: "",
textAlign:
this.parent.componentOption[this.parent.layoutNm + name].textAlign,
};
},
},
mounted() {
this.baseSetting();
},
};
</script>
<style scoped>
.point-none {
pointer-events: none;
}
</style>