hookehuyr

fix 细节处理

<!--
* @Date: 2022-08-29 14:31:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-02 17:17:26
* @LastEditTime: 2024-09-03 10:20:07
* @FilePath: /data-table/src/components/DividerField/index.vue
* @Description: 分隔线组件
-->
<template>
<div class="divider-field-page">
<div v-if="styleType === 'type1'" class="type1">
<div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">字段标题</div>
<div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ dividerTitle }}</div>
</div>
<div v-if="styleType === 'type2'" class="type2">
<div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">字段标题</div>
<div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ dividerTitle }}</div>
<div :style="{ borderTop: '1px dashed', borderColor: bgColor }"></div>
</div>
<div v-if="styleType === 'type3'" class="type3">
<div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">字段标题</div>
<div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ dividerTitle }}</div>
<div :style="{ borderTop: '1px solid', borderColor: bgColor }"></div>
</div>
<div v-if="styleType === 'type4'" class="type4">
<div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">字段标题</div>
<div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ dividerTitle }}</div>
<div :style="{ borderTop: '2px solid', borderColor: bgColor }"></div>
</div>
<div v-if="styleType === 'type5'" class="type5">
<div class="sep-line">
<div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor}">
<span>字段标题</span>
<span>{{ dividerTitle }}</span>
</div>
<div class="sep-right">
<div class="right-triangle" :style="{ backgroundColor: bgColor}"></div>
......@@ -37,14 +37,14 @@
</div>
</div>
<div v-if="styleType === 'type6'" class="type6">
<div class="sep-style-select-field-label" :style="{ color: titleColor }">字段标题</div>
<div class="sep-style-select-field-label" :style="{ color: titleColor }">{{ dividerTitle }}</div>
<div class="sep-style-select-item">
<div class="sep-line">
<div class="sep-bg-wrapper">
<div class="sep-bg" :style="{ borderColor: bgColor }"></div>
</div>
<div class="sep-label" style="background-color: rgb(250, 129, 24);">
<span>字段标题</span>
<span>{{ dividerTitle }}</span>
</div>
</div>
</div>
......@@ -55,7 +55,7 @@
<div class="sep-bg" :style="{ backgroundColor: bgColor}"></div>
</div>
<div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor }">
<span>字段标题</span>
<span>{{ dividerTitle }}</span>
</div>
</div>
</div>
......@@ -64,7 +64,7 @@
<div class="sep-bg" :style="{ backgroundColor: bgColor}"></div>
<div class="sep-center">
<div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor }">
<span>字段标题</span>
<span>{{ dividerTitle }}</span>
</div>
<div class="left-triangle" :style="{ backgroundColor: bgColor}"></div>
<div class="left-border" :style="{ backgroundColor: bgColor}"></div>
......@@ -83,7 +83,7 @@
<div class="left-line2" :style="{ borderColor: bgColor }"></div>
</div>
<div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor}">
<span>字段标题</span>
<span>{{ dividerTitle }}</span>
</div>
<div class="right-wrapper">
<div class="right-block" :style="{ backgroundColor: bgColor}"></div>
......@@ -94,7 +94,7 @@
</div>
</div>
</div>
<div class="fx-sub-html">这里是字段的描述信息</div>
<div class="fx-sub-html" v-html="desc"></div>
</div>
</template>
......@@ -111,6 +111,9 @@ const titleColor = ref('');
const styleType = ref('type5');
const dividerTitle = ref('分割标题');
const desc = ref('<b>描述信息</b>');
onMounted(() => {
// styleObj.value = {
// color: props.item.component_props.color,
......