徐烜 / bsth-ebus-h5_editor · Commits

Commit a9b53576843853ccf11065a8ee836b4547a5e386

Authored by 徐烜
1 parent e05967b8

电子站牌项目 

1、修改bsth-line-prop-panel.css 添加分割线css（中间带文字），具体看css中注释
2、修改bsth-line-chart-list，bsth-line-chart组件，添加分割线属性
Inline Side-by-side
Showing 3 changed files with 30 additions and 6 deletions
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart-list.js
  View file @a9b5357
... ... @@ -45,7 +45,7 @@ export default {
45 45 visible: false
46 46 }),
47 47 // --------------- 外层css属性 --------------- //
48   - _flag_2_: PropTypes.string({ label: '', component: null, extra: '外层css属性' }),
  48 + _flag_2_: PropTypes.string({ label: '', component: null, extra: function(h) {return (<hr data-label="外层css属性" class="bsth-line-item-divider"/>)} }),
49 49 margin_left: PropTypes.number({ label: '图左边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
50 50 margin_right: PropTypes.number({ label: '图右边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
51 51 margin_top: PropTypes.number({ label: '图上边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
... ... @@ -53,7 +53,7 @@ export default {
53 53 border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
54 54 background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
55 55 // --------------- 内部线路模拟图外层css属性 --------------- //
56   - _flag_3_: PropTypes.string({ label: '', component: null, extra: '内部线路模拟图外层css属性' }),
  56 + _flag_3_: PropTypes.string({ label: '', component: null, extra: function(h) {return (<hr data-label="内部线路模拟图外层css属性" class="bsth-line-item-divider"></hr>)} }),
57 57 line_chart_margin_left: PropTypes.number({ label: '图左边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
58 58 line_chart_margin_right: PropTypes.number({ label: '图右边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
59 59 line_chart_margin_top: PropTypes.number({ label: '图上边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
... ... @@ -61,7 +61,7 @@ export default {
61 61 line_chart_border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
62 62 line_chart_background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
63 63 // --------------- 内部线路模拟图内层css属性 --------------- //
64   - _flag_4_: PropTypes.string({ label: '', component: null, extra: '内部线路模拟图内层css属性' }),
  64 + _flag_4_: PropTypes.string({ label: '', component: null, extra: function(h) {return (<hr data-label="内部线路模拟图内层css属性" class="bsth-line-item-divider"></hr>)} }),
65 65 chart_left_padding: PropTypes.number({ label: '内部线路图距离左边padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
66 66 chart_right_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
67 67 chart_center_top_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 4, layout: { prefixCls: 'bsth-line' } }),
... ...
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart.js
  View file @a9b5357
... ... @@ -67,11 +67,11 @@ export default {
67 67 visible: false
68 68 }),
69 69 // 数据属性
70   - _flag_1_: PropTypes.string({ label: '', component: null, extra: '数据属性' }),
  70 + _flag_1_: PropTypes.string({ label: '', component: null, extra: function(h) {return (<hr data-label="数据属性" class="bsth-line-item-divider"></hr>)} }),
71 71 line_name: PropTypes.string({ label: '线路名称', defaultValue: '线路1', layout: { prefixCls: 'bsth-line' } }),
72 72 line_code: PropTypes.string({ label: '线路代码', defaultValue: 'ACODE', layout: { prefixCls: 'bsth-line' } }),
73 73 // 图外层css
74   - _flag_2_: PropTypes.string({ label: '', component: null, extra: '图外层css属性' }),
  74 + _flag_2_: PropTypes.string({ label: '', component: null, extra: function(h) {return (<hr data-label="图外层css属性" class="bsth-line-item-divider"></hr>)} }),
75 75 line_name_font_size: PropTypes.number({ label: '线路名称字体大小', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
76 76 line_name_font_color: PropTypes.color({ label: '线路名称字体颜色', defaultValue: '#babdbd', layout: { prefixCls: 'bsth-line' } }),
77 77 margin_left: PropTypes.number({ label: '图左边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
... ... @@ -81,7 +81,7 @@ export default {
81 81 border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
82 82 background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
83 83 // 图内层css
84   - _flag_3_: PropTypes.string({ label: '', component: null, extra: '图内层css属性' }),
  84 + _flag_3_: PropTypes.string({ label: '', component: null, extra: function(h) {return (<hr data-label="图内层css属性" class="bsth-line-item-divider"></hr>)} }),
85 85 chart_left_padding: PropTypes.number({ label: '内部线路图距离左边padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
86 86 chart_right_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
87 87 chart_center_top_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 4, layout: { prefixCls: 'bsth-line' } }),
... ...
front-end/h5/src/components/core/plugins/bsth/bsth-line-prop-panel.css
  View file @a9b5357
... ... @@ -36,3 +36,27 @@
36 36 top: -0.5px;
37 37 margin: 0 8px 0 2px;
38 38 }
  39 +
  40 +/**
  41 + 线路模拟图，线路模拟列表右侧属性面板使用的分割线
  42 + 1、定义一个属性 PropTypes.string label为空''，
  43 + 2、定义个extra属性 如下：extra: function(h) {return (<hr data-label="外层css属性" class="bsth-line-item-divider"/>)}
  44 + 3、如上，内部模版使用hr属性，使用 class=bsth-line-item-divider，定义属性data-label表示分割线中间的文字
  45 + */
  46 +.bsth-line-item-divider {
  47 + text-align:center;
  48 + line-height:0px;
  49 + background:blue;
  50 + margin-left: -20px;
  51 + margin-right: -70px;
  52 +}
  53 +
  54 +.bsth-line-item-divider::after {
  55 + content: attr(data-label);
  56 + font-weight:bold;
  57 + font-size:14px;
  58 + background:white;
  59 + z-index:2;
  60 + padding-left: 5px;
  61 + padding-right: 5px;
  62 +}
... ...