diff --git a/data-room-ui/packages/BasicComponents/DigitalFlop/index.vue b/data-room-ui/packages/BasicComponents/DigitalFlop/index.vue
index 49ead3d2..ff9e8a85 100644
--- a/data-room-ui/packages/BasicComponents/DigitalFlop/index.vue
+++ b/data-room-ui/packages/BasicComponents/DigitalFlop/index.vue
@@ -19,8 +19,9 @@
color: option.color,
'border-radius': option.borderRadius + 'px',
'font-weight': option.fontWeight,
- 'margin-right':
- index !== option.data.length - 1 ? option.marginRight + 'px' : ''
+ 'margin-right': index !== option.data.length - 1 ? option.marginRight + 'px' : '',
+ '--line-height': option.lineStyle.height + 'px',
+ '--line-color': option.lineStyle.color
}"
>
{{ item }}
@@ -120,6 +121,17 @@ export default {
</script>
<style lang="scss" scoped>
+.content_item{
+ position: relative;
+ &::after{
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: var(--line-height);
+ transform: translateY( -cale(--line-height / 2) + 'px');
+ background-color: var(--line-color);
+ }
+}
.light-theme {
background-color: #ffffff;
color: #000000;
diff --git a/data-room-ui/packages/BasicComponents/DigitalFlop/setting.vue b/data-room-ui/packages/BasicComponents/DigitalFlop/setting.vue
index f06d8b1a..8a9ed8a4 100644
--- a/data-room-ui/packages/BasicComponents/DigitalFlop/setting.vue
+++ b/data-room-ui/packages/BasicComponents/DigitalFlop/setting.vue
@@ -172,6 +172,22 @@
clearable
/>
</el-form-item>
+ <!-- 中线宽度 -->
+ <el-form-item label="中线宽度">
+ <el-input-number
+ v-model="config.customize.lineStyle.height"
+ class="bs-el-input-number"
+ :min="0"
+ :step="1"
+ />
+ </el-form-item>
+ <!-- 中线颜色 -->
+ <el-form-item label="中线颜色">
+ <ColorPicker
+ v-model="config.customize.lineStyle.color"
+ :predefine="predefineThemeColors"
+ />
+ </el-form-item>
</div>
</el-form>
</div>
diff --git a/data-room-ui/packages/BasicComponents/DigitalFlop/settingConfig.js b/data-room-ui/packages/BasicComponents/DigitalFlop/settingConfig.js
index d045b9e9..bb72e6b1 100644
--- a/data-room-ui/packages/BasicComponents/DigitalFlop/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/DigitalFlop/settingConfig.js
@@ -48,8 +48,8 @@ const customConfig = {
bgColor: '#007aff',
fontSize: 100,
width: 100,
- borderRadius: 10,
- borderColor: '#fff',
+ borderRadius: 0,
+ borderColor: '',
borderWidth: 1,
formatter: 3,
fontWeight: 500,
@@ -59,7 +59,11 @@ const customConfig = {
numberDigits: 5,
placeHolder: '0',
height: 125,
- fontFamily: ''
+ fontFamily: 'ds-digitalbold',
+ lineStyle: {
+ height: 4,
+ color: '#000000'
+ }
}
}
export const dataConfig = {
diff --git a/data-room-ui/packages/BasicComponents/Input/index.vue b/data-room-ui/packages/BasicComponents/Input/index.vue
index dab95bee..e057b848 100644
--- a/data-room-ui/packages/BasicComponents/Input/index.vue
+++ b/data-room-ui/packages/BasicComponents/Input/index.vue
@@ -12,9 +12,9 @@
v-model="value"
type="text"
resize="both"
- class="input"
+ class="input-component"
:placeholder="config.customize.placeholderStyle.placeholder"
- :style="{ backgroundColor: config.customize.backgroundStyle.backgroundColor }"
+ :style="{ backgroundColor: config.customize.backgroundStyle.backgroundColor,'--input-placeholder-color': config.customize.placeholderStyle.placeholderColor, '--input-placeholder-font-size': config.customize.placeholderStyle.placeholderFontSize + 'px' }"
@input="handleInput"
@keyup.enter.native="keyupEnter"
>
@@ -116,6 +116,14 @@ export default {
}
</script>
+<style>
+/* 修改输入框的 placeholder 文字颜色 */
+input::placeholder {
+ color: red; /* 设置占位文字颜色为灰色 */
+}
+
+</style>
+
<style lang="scss" scoped>
.basic-component-input {
width: 100%;
@@ -125,12 +133,6 @@ export default {
white-space: nowrap;
align-self: center;
}
- // .title-top{
- // display: block;
- // text-align: center;
- // white-space: nowrap;
- // }
-
.el-input {
height: 100%;
width: 100%;
@@ -142,6 +144,10 @@ export default {
border: 1px solid #DCDFE6;
}
}
-
+ ::v-deep .el-input__inner::placeholder {
+ color: var(--input-placeholder-color);
+ font-size: var(--input-placeholder-font-size);
+ }
}
+
</style>
diff --git a/data-room-ui/packages/BasicComponents/Input/setting.vue b/data-room-ui/packages/BasicComponents/Input/setting.vue
index 61f660d8..31988146 100644
--- a/data-room-ui/packages/BasicComponents/Input/setting.vue
+++ b/data-room-ui/packages/BasicComponents/Input/setting.vue
@@ -41,7 +41,6 @@
<el-input-number
v-model="config.customize.titleStyle.fontSize"
class="bs-el-input-number"
- controls-position="right"
:min="12"
:max="100"
/>
@@ -62,7 +61,6 @@
<el-input-number
v-model="config.customize.titleStyle.marginRight"
class="bs-el-input-number"
- controls-position="right"
:min="0"
:max="100"
/>
@@ -72,7 +70,7 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
- <SettingTitle>旋转</SettingTitle>
+ <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
@@ -84,7 +82,6 @@
<el-input-number
v-model="config.customize.inputStyle.fontSize"
class="bs-el-input-number"
- controls-position="right"
:min="12"
:max="100"
/>
@@ -117,6 +114,20 @@
clearable
/>
</el-form-item>
+ <el-form-item label="占位符字体颜色">
+ <ColorPicker
+ v-model="config.customize.placeholderStyle.placeholderColor"
+ :predefine="predefineThemeColors"
+ />
+ </el-form-item>
+ <el-form-item label="占位符字体大小">
+ <el-input-number
+ v-model="config.customize.placeholderStyle.placeholderFontSize"
+ class="bs-el-input-number"
+ :min="12"
+ :max="100"
+ />
+ </el-form-item>
<el-form-item label="图标选择">
<IconPicker v-model="config.customize.icon.name" />
</el-form-item>
@@ -134,12 +145,6 @@
/>
</el-select>
</el-form-item>
- <!-- <el-form-item label="占位符字体颜色">
- <ColorPicker
- v-model="config.customize.placeholderStyle.placeholderColor"
- :predefine="predefineThemeColors"
- />
- </el-form-item> -->
<el-form-item label="边框颜色">
<ColorPicker
v-model="config.customize.borderStyle.borderColor"
@@ -150,7 +155,6 @@
<el-input-number
v-model="config.customize.borderStyle.borderWidth"
class="bs-el-input-number"
- controls-position="right"
:min="0"
:max="10"
/>
@@ -174,7 +178,6 @@
<el-input-number
v-model="config.customize.borderStyle.borderRadius"
class="bs-el-input-number"
- controls-position="right"
:min="0"
:max="100"
/>
@@ -192,7 +195,7 @@ import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
-import {predefineColors} from "data-room-ui/js/utils/colorList";
+import { predefineColors } from 'data-room-ui/js/utils/colorList'
export default {
name: 'InputSetting',
components: {
@@ -208,7 +211,7 @@ export default {
type: Object,
required: true
},
- predefineThemeColors: {
+ predefineThemeColors: {
type: Array,
default: () => predefineColors
}
diff --git a/data-room-ui/packages/BasicComponents/Input/settingConfig.js b/data-room-ui/packages/BasicComponents/Input/settingConfig.js
index 69a97835..adf5fe38 100644
--- a/data-room-ui/packages/BasicComponents/Input/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/Input/settingConfig.js
@@ -60,7 +60,9 @@ const customConfig = {
// 占位符
placeholder: '请输入',
// 占位符字体颜色
- placeholderColor: 'red'
+ placeholderColor: '#999999',
+ // 占位符字体大小
+ placeholderFontSize: 14
},
// 边框样式
borderStyle: {
diff --git a/data-room-ui/packages/BasicComponents/ScreenScrollBoard/index.vue b/data-room-ui/packages/BasicComponents/ScreenScrollBoard/index.vue
index 52fe05ca..93ae218f 100644
--- a/data-room-ui/packages/BasicComponents/ScreenScrollBoard/index.vue
+++ b/data-room-ui/packages/BasicComponents/ScreenScrollBoard/index.vue
@@ -120,7 +120,7 @@ export default {
<style lang="scss" scoped>
.light-theme{
- background-color: #FFFFFF;
+ background-color: #ffffff;
color: #000000;
}
.auto-theme{
diff --git a/data-room-ui/packages/BasicComponents/ScreenScrollRanking/index.vue b/data-room-ui/packages/BasicComponents/ScreenScrollRanking/index.vue
index c235856b..538de0de 100644
--- a/data-room-ui/packages/BasicComponents/ScreenScrollRanking/index.vue
+++ b/data-room-ui/packages/BasicComponents/ScreenScrollRanking/index.vue
@@ -72,7 +72,7 @@ export default {
<style lang="scss" scoped>
.light-theme{
- background-color: #FFFFFF;
+ background-color: #ffffff;
color: #000000;
}
.auto-theme{
diff --git a/data-room-ui/packages/BasicComponents/Select/index.vue b/data-room-ui/packages/BasicComponents/Select/index.vue
index 30fe8e05..ffeb6444 100644
--- a/data-room-ui/packages/BasicComponents/Select/index.vue
+++ b/data-room-ui/packages/BasicComponents/Select/index.vue
@@ -7,6 +7,7 @@
:placeholder="config.customize.placeholder"
clearable
:filterable="filterable"
+ :style="{'--input-placeholder-color':config.customize.placeholderColor,'--input-placeholder-font-size':config.customize.placeholderFontSize + 'px'}"
@visible-change="visibleChange"
@change="selectChange"
@mouseenter.native="mouseenter"
@@ -50,7 +51,7 @@ export default {
return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview')
}
},
- watch: { },
+ watch: {},
created () {
},
mounted () {
@@ -100,6 +101,8 @@ export default {
selectInputEl.style.fontSize = config.customize.fontSize + 'px'
// 字体颜色
selectInputEl.style.color = config.customize.fontColor
+ // 边框颜色
+ selectInputEl.style.borderColor = config.customize.borderColor
// 下拉图标
const selectDropdownIcon = document.querySelector(`.select-${config.code} .el-icon-arrow-up`)
selectDropdownIcon.style.fontSize = config.customize.fontSize + 'px'
@@ -131,8 +134,8 @@ export default {
}
// 下拉项hover颜色
const selectDropdownWrap = document.querySelector(`.select-popper-${this.innerConfig.code} .el-select-dropdown__wrap`)
- selectDropdownWrap.style.setProperty('--dropDownHoverFontColor', this.innerConfig.customize.dropDownHoverFontColor)
- selectDropdownWrap.style.setProperty('--dropDownHoverBackgroundColor', this.innerConfig.customize.dropDownHoverBackgroundColor)
+ selectDropdownWrap.style.setProperty('--drop-down-hover-font-color', this.innerConfig.customize.dropDownHoverFontColor)
+ selectDropdownWrap.style.setProperty('--drop-down-hover-background-color', this.innerConfig.customize.dropDownHoverBackgroundColor)
}
// 不是激活项的还是使用背景颜色
const selectDropdownItemEl = document.querySelectorAll(`.select-popper-${this.innerConfig.code} .el-select-dropdown__item`)
@@ -148,7 +151,7 @@ export default {
mouseenter () {
if (this.value) {
setTimeout(() => {
- // 清空图标
+ // 清空图标
const selectDropdownCloseIcon = document.querySelector(`.select-${this.innerConfig.code} .el-icon-circle-close`)
if (selectDropdownCloseIcon) {
selectDropdownCloseIcon.style.fontSize = this.innerConfig.customize.fontSize + 'px'
@@ -162,22 +165,24 @@ export default {
</script>
<style lang="scss">
-.basic-component-select{
- color: '';
+.basic-component-select {
.el-select-dropdown__wrap {
margin-bottom: 0px !important;
}
+
.el-select-group__wrap:not(:last-of-type)::after {
background-color: transparent !important;
}
- .popper__arrow{
+
+ .popper__arrow {
bottom: -6px !important;
- border-top-color:var(--color) !important;
- border-bottom-color:var(--color) !important;
- &::after{
+ border-top-color: var(--color) !important;
+ border-bottom-color: var(--color) !important;
+
+ &::after {
bottom: 0px !important;
- border-top-color:var(--color) !important;
- border-bottom-color:var(--color) !important;
+ border-top-color: var(--color) !important;
+ border-bottom-color: var(--color) !important;
}
}
}
@@ -190,23 +195,29 @@ export default {
::v-deep .el-input {
height: 100% !important;
- .el-select__caret{
+
+ .el-select__caret {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
+
// 选择器输入框样式
.el-input__inner {
height: 100% !important;
- border-color: none !important;
}
}
+ ::v-deep .el-input__inner::placeholder {
+ color: var(--input-placeholder-color);
+ font-size: var(--input-placeholder-font-size);
+ }
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
- color: var(--dropDownHoverFontColor) !important;
- background-color: var(--dropDownHoverBackgroundColor) !important;
+ color: var(--drop-down-hover-font-color) !important;
+ background-color: var(--drop-down-hover-background-color) !important;
}
+
.el-tag.el-tag--info {
color: var(--bs-el-text) !important;
}
diff --git a/data-room-ui/packages/BasicComponents/Select/setting.vue b/data-room-ui/packages/BasicComponents/Select/setting.vue
index 1373068c..504cfb87 100644
--- a/data-room-ui/packages/BasicComponents/Select/setting.vue
+++ b/data-room-ui/packages/BasicComponents/Select/setting.vue
@@ -19,7 +19,7 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
- <SettingTitle>旋转</SettingTitle>
+ <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
@@ -50,6 +50,29 @@
:predefine="predefineThemeColors"
/>
</el-form-item>
+ <!-- 边框颜色 -->
+ <el-form-item label="边框颜色">
+ <ColorPicker
+ v-model="config.customize.borderColor"
+ :predefine="predefineThemeColors"
+ />
+ </el-form-item>
+ <!-- 占位符字体颜色 -->
+ <el-form-item label="占位符字体颜色">
+ <ColorPicker
+ v-model="config.customize.placeholderColor"
+ :predefine="predefineThemeColors"
+ />
+ </el-form-item>
+ <!-- 占位符字体大小 -->
+ <el-form-item label="占位符字体大小">
+ <el-input-number
+ v-model="config.customize.placeholderFontSize"
+ class="bs-el-input-number"
+ :min="12"
+ :max="100"
+ />
+ </el-form-item>
</div>
<SettingTitle>下拉项</SettingTitle>
<!-- 选择器下拉框背景颜色 -->
@@ -93,7 +116,7 @@ import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetti
import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
-import {predefineColors} from "data-room-ui/js/utils/colorList";
+import { predefineColors } from 'data-room-ui/js/utils/colorList'
export default {
name: 'Border14Setting',
components: {
@@ -109,7 +132,7 @@ export default {
type: Object,
required: true
},
- predefineThemeColors: {
+ predefineThemeColors: {
type: Array,
default: () => predefineColors
}
diff --git a/data-room-ui/packages/BasicComponents/Select/settingConfig.js b/data-room-ui/packages/BasicComponents/Select/settingConfig.js
index c2352db0..07fabced 100644
--- a/data-room-ui/packages/BasicComponents/Select/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/Select/settingConfig.js
@@ -45,15 +45,21 @@ const customConfig = {
// 输入框字体大小
fontSize: 14,
// 输入框字体颜色
- fontColor: '#FFFFFF',
+ fontColor: '#ffffff',
+ // 边框颜色
+ borderColor: '#ffffff',
+ // 占位符字体颜色
+ placeholderColor: '#ffffff',
+ // 占位符字体大小
+ placeholderFontSize: 14,
// 下拉框背景颜色
dropDownBackgroundColor: '#35393F',
// 下拉框字体颜色
- dropDownFontColor: '#FFFFFF',
+ dropDownFontColor: '#ffffff',
// 下拉项hover背景颜色
dropDownHoverBackgroundColor: '#6A7E9D',
// 下拉项hover字体颜色
- dropDownHoverFontColor: '#FFFFFF'
+ dropDownHoverFontColor: '#ffffff'
}
}
export const dataConfig = {
diff --git a/data-room-ui/packages/EchartsRender/index.vue b/data-room-ui/packages/EchartsRender/index.vue
index e700751d..b8451fdd 100644
--- a/data-room-ui/packages/EchartsRender/index.vue
+++ b/data-room-ui/packages/EchartsRender/index.vue
@@ -498,7 +498,7 @@ export default {
<style lang="scss" scoped>
@import '../assets/style/echartStyle';
.light-theme{
- background-color: #FFFFFF;
+ background-color: #ffffff;
color: #000000;
}
.auto-theme{
diff --git a/data-room-ui/packages/PlotRender/index.vue b/data-room-ui/packages/PlotRender/index.vue
index e740022d..7a95550e 100644
--- a/data-room-ui/packages/PlotRender/index.vue
+++ b/data-room-ui/packages/PlotRender/index.vue
@@ -260,7 +260,7 @@ export default {
<style lang="scss" scoped>
@import '../assets/style/echartStyle';
.light-theme{
- background-color: #FFFFFF;
+ background-color: #ffffff;
color: #000000;
}
.auto-theme{