feat: 排名表组件添加相关样式配置

main
wu.jian2 1 year ago
parent 8f7a1c36d1
commit d7041ae46f

@ -8,6 +8,16 @@
class="ranking-box"
:class="{'light-theme':customTheme === 'light','auto-theme':customTheme =='dark'}"
:config="option"
:style="{
'--rank-font-size':customize.rankFontSize + 'px',
'--rank-color':customize.rankColor,
'--info-name-font-size':customize.infoNameFontSize + 'px',
'--info-name-color':customize.infoNameColor,
'--ranking-value-font-size':customize.rankingValueFontSize + 'px',
'--ranking-value-color':customize.rankingValueColor,
'--inside-column-color':customize.insideColumnColor,
'--ranking-column-border-bottom-color':customize.rankingColumnBorderBottomColor
}"
@click="rowClick"
/>
</div>
@ -43,6 +53,9 @@ export default {
return { ...this.config.customize, data: this.config.option.data }
},
set (value) {}
},
customize(){
return this.config.customize
}
},
watch: {
@ -133,5 +146,26 @@ export default {
background: #dddddd !important;
border-radius: 10px;
}
::v-deep .dv-scroll-ranking-board{
.ranking-info{
.rank{
font-size: var(--rank-font-size);
color: var(--rank-color);
}
.info-name{
font-size: var(--info-name-font-size);
color: var(--info-name-color);
}
.ranking-value{
font-size: var(--ranking-value-font-size);
color: var(--ranking-value-color);
}
}
.ranking-column{
border-bottom: 2px solid var(--ranking-column-border-bottom-color);
.inside-column{
background-color: var(--inside-column-color);
}
}
}
</style>

@ -11,7 +11,7 @@
:model="config.customize"
label-position="left"
class="setting-body bs-el-form"
label-width="100px"
label-width="120px"
>
<SettingTitle>标题</SettingTitle>
<div class="lc-field-body">
@ -78,12 +78,67 @@
:inactive-value="false"
/>
</el-form-item>
<el-form-item label="序号字体颜色">
<ColorPicker
v-model="config.customize.rankColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label="序号字体大小">
<el-input-number
v-model="config.customize.rankFontSize"
:min="12"
class="bs-el-input-number"
label="请输入字体大小"
/>
</el-form-item>
<el-form-item label="左侧数据字体颜色">
<ColorPicker
v-model="config.customize.infoNameColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label="左侧数据字体大小">
<el-input-number
v-model="config.customize.infoNameFontSize"
:min="12"
class="bs-el-input-number"
label="请输入字体大小"
/>
</el-form-item>
<el-form-item label="右侧数据字体颜色">
<ColorPicker
v-model="config.customize.rankingValueColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label="右侧数据字体大小">
<el-input-number
v-model="config.customize.rankingValueFontSize"
:min="12"
class="bs-el-input-number"
label="请输入字体大小"
/>
</el-form-item>
<el-form-item label="内部列颜色">
<ColorPicker
v-model="config.customize.insideColumnColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label="底部边框颜色">
<ColorPicker
v-model="config.customize.rankingColumnBorderBottomColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
</div>
</el-form>
</el-form>
</div>
</template>
<script>
import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
@ -93,6 +148,7 @@ export default {
name: 'BarSetting',
components: {
PosWhSetting,
ColorPicker,
SettingTitle,
BorderSetting,
RotateSetting

@ -44,7 +44,15 @@ const customConfig = {
carousel: 'single',
unit: '',
sort: true,
valueFormatter: undefined
valueFormatter: undefined,
rankFontSize: 13,
rankColor: '#1370fb',
infoNameFontSize: 13,
infoNameColor: '#ffffff',
rankingValueFontSize: 13,
rankingValueColor: '#fff',
insideColumnColor: '#1370fb',
rankingColumnBorderBottomColor: '#1370fb',
}
}
export const dataConfig = {

Loading…
Cancel
Save