icon size 144px opacity 20% how to complete

[xiaodanlee]

import './panel.less'

export default class Panel { constructor(obj){ this.theme = obj.theme; this.number = obj.number; } display(){ return(`

${this.theme}

        <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; }

[xiaodanlee]

inline 元素可以依靠 font-size 撑起来，但是块级元素需要宽高支持。 <span style=":before{content:"\sssss"},font-size"> 假如使用div，就要给 宽高