Open xiaodanlee opened 6 years ago
import './panel.less'
export default class Panel { constructor(obj){ this.theme = obj.theme; this.number = obj.number; } display(){ return(`
<div class="number">${this.number}</div> </div>`); }
}
.flex{ display:-webkit-flex; display:flex;
.flex_row{ -webkit-flex-direction: row; flex-direction: row; }
.flex_column{ -webkit-flex-direction: column; flex-direction: column; } .flex_transition{ -webkit-transition: width 0.7s ease-out; transition:width 0.7s ease-out; }
.panel{ .flex; .flex_column; color:white; &.Building_color{ background-color: #FF9A2A; } &.Idle_color{ background-color: #7FBC39; } &.Building{ font-size:128px; opacity: 20%; text-align: center; } &.Idle{ font-size:128px; opacity: 20%; text-align: center; } &.theme{ text-align: left; font:18px bold; padding:5px; } &.number{ text-align: right; font:48px; padding:8px; } }
.panelT{ .flex; .flex_row; justify-content:space-around; align-items:center; align-content: center; margin:auto; }
.panelT > div{ -webkit-flex:1 auto 1; flex:1 auto 1; .flex; .flex_column; align-items:center; align-content: center; }
.panelList > div { -webkit-flex:1 auto; flex:1 auto; }
.name{ font-size:12px; padding:2px; }
.number{ margin:4px; font-size:20px; }
inline 元素可以依靠 font-size 撑起来,但是块级元素需要宽高支持。 <span style=":before{content:"\sssss"},font-size"> 假如使用div,就要给 宽高
import './panel.less'
export default class Panel { constructor(obj){ this.theme = obj.theme; this.number = obj.number; } display(){ return(`
}
.flex{ display:-webkit-flex; display:flex;
}
.flex_row{ -webkit-flex-direction: row; flex-direction: row; }
.flex_column{ -webkit-flex-direction: column; flex-direction: column; } .flex_transition{ -webkit-transition: width 0.7s ease-out; transition:width 0.7s ease-out; }
.panel{ .flex; .flex_column; color:white; &.Building_color{ background-color: #FF9A2A; } &.Idle_color{ background-color: #7FBC39; } &.Building{ font-size:128px; opacity: 20%; text-align: center; } &.Idle{ font-size:128px; opacity: 20%; text-align: center; } &.theme{ text-align: left; font:18px bold; padding:5px; } &.number{ text-align: right; font:48px; padding:8px; } }
.panelT{ .flex; .flex_row; justify-content:space-around; align-items:center; align-content: center; margin:auto; }
.panelT > div{ -webkit-flex:1 auto 1; flex:1 auto 1; .flex; .flex_column; align-items:center; align-content: center; }
.panelList > div { -webkit-flex:1 auto; flex:1 auto; }
.name{ font-size:12px; padding:2px; }
.number{ margin:4px; font-size:20px; }
inline 元素可以依靠 font-size 撑起来,但是块级元素需要宽高支持。 <span style=":before{content:"\sssss"},font-size"> 假如使用div,就要给 宽高