Просмотр исходного кода

feat:指标卡新增字体选择

liu.tao3 1 год назад
Родитель
Сommit
3be46db933

+ 1 - 0
data-room-ui/packages/BasicComponents/IndexCard/index.vue

@@ -32,6 +32,7 @@
         <span
           class="content-right-first"
           :style="{
+            'font-family': config.customize.fontFamily,
             'font-size': customize.firstSize + 'px',
             'height':customize.firstSize + 'px',
             color:customize.firstColor,

+ 21 - 1
data-room-ui/packages/BasicComponents/IndexCard/setting.vue

@@ -159,6 +159,23 @@
               class="bs-el-input-number"
               label="请输入首行文字大小"
             />
+          </el-form-item>
+           <el-form-item
+            label="文字类型"
+            label-width="100px"
+          >
+            <el-select
+              v-model="config.customize.fontFamily"
+              popper-class="bs-el-select"
+              class="bs-el-select"
+            >
+              <el-option
+                v-for="item in fontFamilyList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
           <el-form-item label-width="100px" label="首行字体颜色">
             <ColorPicker
@@ -218,7 +235,9 @@ import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
 import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import fontList from 'data-room-ui/js/utils/fontList'
 export default {
   name: 'BarSetting',
   components: {
@@ -265,7 +284,8 @@ export default {
       }
     ],
       // 预设主题色
-      predefineThemeColors: predefineColors
+      predefineThemeColors: predefineColors,
+      fontFamilyList: fontList,
     }
   },
   computed: {

+ 1 - 0
data-room-ui/packages/BasicComponents/IndexCard/settingConfig.js

@@ -52,6 +52,7 @@ const customConfig = {
     src: '',
     borderRadius: 0,
     borderWidth: 0,
+    fontFamily:'',
     lineDistance: 6,
     borderColor: '',
     gradientDirection:'to right',

+ 2 - 0
data-room-ui/packages/BasicComponents/IndexCard2/index.vue

@@ -41,6 +41,7 @@
         >{{ customize.secondLine }}</span>
         <span
           :style="{
+            'font-family': config.customize.fontFamily,
             'font-size': customize.secondSize + 'px',
             'height':customize.secondSize + 'px',
             color:customize.secondColor,
@@ -131,6 +132,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/fonts/numberFont/stylesheet.css";
 .content{
   display: flex;
   flex-direction: row;

+ 21 - 1
data-room-ui/packages/BasicComponents/IndexCard2/setting.vue

@@ -192,6 +192,23 @@
               class="bs-el-input-number"
               label="请输入第二行文字大小"
             />
+          </el-form-item>
+          <el-form-item
+            label="文字类型"
+            label-width="100px"
+          >
+            <el-select
+              v-model="config.customize.fontFamily"
+              popper-class="bs-el-select"
+              class="bs-el-select"
+            >
+              <el-option
+                v-for="item in fontFamilyList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
            <el-form-item label-width="100px" label="第二行字体颜色">
             <ColorPicker
@@ -215,10 +232,12 @@
 </template>
 <script>
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
 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 fontList from 'data-room-ui/js/utils/fontList'
 export default {
   name: 'BarSetting',
   components: {
@@ -265,7 +284,8 @@ export default {
       }
     ],
       // 预设主题色
-      predefineThemeColors: predefineColors
+      predefineThemeColors: predefineColors,
+      fontFamilyList: fontList,
     }
   },
   computed: {

+ 1 - 0
data-room-ui/packages/BasicComponents/IndicatorCard/index.vue

@@ -133,6 +133,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/fonts/numberFont/stylesheet.css";
 .content{
   display: flex;
   flex-direction: column;

+ 1 - 0
data-room-ui/packages/BasicComponents/IndicatorCard/setting.vue

@@ -189,6 +189,7 @@
 <script>
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
 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'

+ 1 - 0
data-room-ui/packages/BasicComponents/IndicatorCard2/index.vue

@@ -133,6 +133,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/fonts/numberFont/stylesheet.css";
 .content{
   display: flex;
   flex-direction: column;

+ 1 - 0
data-room-ui/packages/BasicComponents/IndicatorCard2/setting.vue

@@ -189,6 +189,7 @@
 <script>
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
 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'