Css 虚线：数字小部件背景色

数字小部件能否在同一个仪表板上多次使用

e、 g。 我想为每个团队成员显示一个当前分数，每个团队成员一个小部件，带有一个向上/向下箭头，将当前分数与最后一个分数进行比较，如果分数向上，小部件背景为绿色，如果分数向下，小部件背景为红色

My.rb文件从excel文件传递数据

每个小部件都显示正确的当前分数 每个小部件都显示正确的向上/向下箭头 所有的小部件都显示了我想要的相同但相反的颜色，尽管.coffee显示了相反的颜色

就好像检测背景颜色的循环在第一次通过后停止一样

错误还是坏代码？ 4.咖啡

class Dashing.Number4 extends Dashing.Widget

@accessor 'current', Dashing.AnimatedValue

@accessor 'difference', ->
if @get('last')
last = parseInt(@get('last'))
current = parseInt(@get('current'))
if last != 0
diff = Math.abs(Math.round((current - last) / last * 100))
"#{diff}%"
else
""

@accessor 'arrow', ->
if @get('last')
if parseInt(@get('current')) > parseInt(@get('last')) then 'fa fa-arrow-up' else 'fa fa-arrow-down'

constructor: ->
super

@onData(Dashing.lastEvents[@id]) if Dashing.lastEvents[@id]
onData: (data) ->
if parseInt(@get('current')) > parseInt(@get('last')) then $(@node).css('background-color', '#006600') else $(@node).css('background-color', '#660000')

编号4.scss

//
// ----------------------------------------------------------------------------
// Mixins
// ----------------------------------------------------------------------------
@mixin transition($transition-property, $transition-time, $method) {
-webkit-transition: $transition-property $transition-time $method;
-moz-transition: $transition-property $transition-time $method;
-o-transition: $transition-property $transition-time $method;
transition: $transition-property $transition-time $method;
}

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$value-color: #fff;

$title-color: rgba(255, 255, 255, 0.7);
$moreinfo-color: rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-number styles
// ----------------------------------------------------------------------------
.widget-number4 {

.title {
color: $title-color;
font-size: 40px;

 }

.value {
color: $value-color;

}

.change-rate {
font-weight: 500;
font-size: 30px;
color: $value-color;
}

.more-info {
color: $moreinfo-color;
font-size: 23px;
bottom: 40px;

}

.updated-at {
color: white;
font-size: 23px;
}

}

---

您可以在一个仪表板上多次使用一个小部件，但听起来您已经有了该部件

您需要淡出小部件，设置背景色，然后再次淡入。否则，您将不会看到背景颜色的更改，因为渲染已经发生

onData：（数据）->
如果@get（'last'）
如果parseInt（@get（'current'））>parseInt（@get（'last'）），那么$（@node.fadeOut（）.css（'background-color'，“#006600”）.fadeIn（）或者$（@node.fadeOut（）.css（'background-color'，“#660000”）.fadeIn（）

所有缩进都丢失了，这对咖啡脚本尤其不利。谢谢您的回复。我添加/替换了你的代码，每个小部件的背景都是“黑色”。有什么想法吗？你能把这份工作也发出去吗？