You need to sign in or sign up before continuing.
hookehuyr

fix 样式调整

<!--
* @Date: 2022-08-29 14:31:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-02 14:47:57
* @LastEditTime: 2024-09-02 17:17:26
* @FilePath: /data-table/src/components/DividerField/index.vue
* @Description: 分隔线组件
-->
<template>
<div class="divider-field-page">
<div v-if="styleType === 'type1'" class="type1"></div>
<div v-if="styleType === 'type1'" class="type1">
<div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">字段标题</div>
</div>
<div v-if="styleType === 'type2'" class="type2">
<div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">字段标题</div>
<div :style="{ borderTop: '1px dashed', borderColor: bgColor }"></div>
......@@ -45,7 +47,6 @@
<span>字段标题</span>
</div>
</div>
<!-- <div class="fx-sub-html">这里是字段的描述信息</div> -->
</div>
</div>
<div v-if="styleType === 'type7'" class="type7">
......@@ -108,7 +109,7 @@ const styleBorder = ref({});
const bgColor = ref('');
const titleColor = ref('');
const styleType = ref('type8');
const styleType = ref('type5');
onMounted(() => {
// styleObj.value = {
......@@ -135,6 +136,11 @@ onMounted(() => {
.divider-field-page {
padding: 1rem 1rem 0 1rem;
.type5 {
-webkit-transform: scale(.8);
transform: scale(.8);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
width: 125%;
.sep-line {
display: -webkit-box;
display: -ms-flexbox;
......@@ -259,6 +265,11 @@ onMounted(() => {
}
}
.type7 {
-webkit-transform: scale(.8);
transform: scale(.8);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
width: 125%;
.sep-line {
height: 28px;
position: relative;
......@@ -295,6 +306,11 @@ onMounted(() => {
}
}
.type8 {
-webkit-transform: scale(.8);
transform: scale(.8);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
width: 125%;
.sep-line {
-webkit-box-pack: center;
-ms-flex-pack: center;
......