monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit e76c4ed10d96f21b0438abf44cd13021189b2b81 2 parents 76dab81e 2f00968e

Merge branch 'master-V32-LH' into 'master' 

杭州-故障诊断-消息推送弹框模板



See merge request !252
Inline Side-by-side
Showing 6 changed files with 224 additions and 24 deletions
@@ -20,6 +20,7 @@ layui.extend({ @@ -20,6 +20,7 @@ layui.extend({
20 ,view = layui.view 20 ,view = layui.view
21 ,defaultIndex = '' 21 ,defaultIndex = ''
22 22
  23 +
23 // 根据 路由渲染页面 24 // 根据 路由渲染页面
24 ,renderPage = function(){ 25 ,renderPage = function(){
25 var show = location.search.substr(1).split("&")[0].split("=")[1]; 26 var show = location.search.substr(1).split("&")[0].split("=")[1];
@@ -361,6 +362,7 @@ layui.extend({ @@ -361,6 +362,7 @@ layui.extend({
361 }); 362 });
362 }; 363 };
363 364
  365 +
364 //系统登录后建立长连接监控实时告警信息 366 //系统登录后建立长连接监控实时告警信息
365 layui.use(['jquery','msgTips','sockjs','stomp', 'laytpl'], function () { 367 layui.use(['jquery','msgTips','sockjs','stomp', 'laytpl'], function () {
366 var msgTips = layui.msgTips 368 var msgTips = layui.msgTips
@@ -448,28 +450,54 @@ layui.extend({ @@ -448,28 +450,54 @@ layui.extend({
448 if (queryResult) { 450 if (queryResult) {
449 content = laytpl(content).render(queryResult); 451 content = laytpl(content).render(queryResult);
450 } 452 }
451 - setTimeout(function () {  
452 - new msgTips({  
453 - dom: ".right-bottom-tips",  
454 - title: title,  
455 - message: `<p style="line-height: 40px">${content}</p>`,  
456 - duration: 10000,  
457 - space: 10,  
458 - firstSpace: 8,  
459 - limit: 8,  
460 - margin: 15,  
461 - direction: 'right bottom',  
462 - timingFun: 'ease',  
463 - width: '300px',  
464 - toastType: toastType,  
465 - type: 'click',  
466 - action: function () {  
467 - if (hash) {  
468 - location.hash = hash; 453 + //判断是否为故障诊断的三种类型
  454 + if(toastType=='faultinfo'||toastType=='FAULTPROGRESS'||toastType=='FAULTOVER'){
  455 + setTimeout(function () {
  456 + new msgTips({
  457 + dom: ".right-bottom-tips",
  458 + title: title,
  459 + message: `<p style="line-height: 30px;background: url(/src/style/img/fault.png) no-repeat;background-size: 70%;height: 178px;padding: 10px;background-position-x: right;padding-left: 106px;padding-top: 96px;">${content}</p>`,
  460 + duration: 10000,
  461 + space: 10,
  462 + firstSpace: 8,
  463 + limit: 8,
  464 + margin: 15,
  465 + direction: 'right bottom',
  466 + timingFun: 'ease',
  467 + width: '300px',
  468 + toastType: toastType,
  469 + type: 'click',
  470 + action: function () {
  471 + if (hash) {
  472 + location.hash = hash;
  473 + }
469 } 474 }
470 - }  
471 - })  
472 - }, delay); 475 + })
  476 + }, delay);
  477 + }else{
  478 + setTimeout(function () {
  479 + new msgTips({
  480 + dom: ".right-bottom-tips",
  481 + title: title,
  482 + message: `<p style="line-height: 40px">${content}</p>`,
  483 + duration: 10000,
  484 + space: 10,
  485 + firstSpace: 8,
  486 + limit: 8,
  487 + margin: 15,
  488 + direction: 'right bottom',
  489 + timingFun: 'ease',
  490 + width: '300px',
  491 + toastType: toastType,
  492 + type: 'click',
  493 + action: function () {
  494 + if (hash) {
  495 + location.hash = hash;
  496 + }
  497 + }
  498 + })
  499 + }, delay);
  500 + }
473 } 501 }
474 502
475 503
@@ -26,6 +26,7 @@ layui.define(['layer', 'laytpl', 'form'], function (exports) { @@ -26,6 +26,7 @@ layui.define(['layer', 'laytpl', 'form'], function (exports) {
26 } else { 26 } else {
27 minus = ""; 27 minus = "";
28 } 28 }
  29 +
29 if ($('.ez_tips').size() == 0 || $('.ez_tips').size() < options.limit) { 30 if ($('.ez_tips').size() == 0 || $('.ez_tips').size() < options.limit) {
30 31
31 var container = "<div class='ez_tips "+options.toastType+"' style="+firstDirection+":"+options.margin+"px;transform:translateX("+minus+"110%)></div>" 32 var container = "<div class='ez_tips "+options.toastType+"' style="+firstDirection+":"+options.margin+"px;transform:translateX("+minus+"110%)></div>"
@@ -94,9 +95,77 @@ layui.define(['layer', 'laytpl', 'form'], function (exports) { @@ -94,9 +95,77 @@ layui.define(['layer', 'laytpl', 'form'], function (exports) {
94 $(newContent).css('cursor','pointer').on(options.type,options.action); 95 $(newContent).css('cursor','pointer').on(options.type,options.action);
95 } 96 }
96 },1); 97 },1);
  98 + $(options.dom).append(newContainer);
  99 + } else if(options.toastType=='faultinfo'){
  100 + var container = "<div class='fault_ez_tips "+options.toastType+"' style="+firstDirection+":"+options.margin+"px;bottom: 319px;transform:translateX("+minus+"110%);></div>"
  101 +
  102 + var head = "<div class='faultTitle faultClearfix'><i class='faultTips_icon_l fl'></i><i class='FaultTips_icon_r close'></i></div>";
  103 +
  104 + var content = "<div class='FaultTips-message' style='cursor: pointer; display: flex;justify-content: flex-end;'></div>"
  105 +
  106 + var newHead = $(head).append(options.title);
  107 +
  108 + var newContent = $(content).append(options.message)
  109 +
  110 + var newContainer = $(container).append(newHead,newContent);
  111 +
  112 + setTimeout(function () {
  113 + var timer;
  114 + function timeOut () {
  115 + $(newContainer).removeClass('active');
  116 + setTimeout(function () {
  117 + $(newContainer).remove();
  118 + }, 700)
  119 + };
  120 + timer = setTimeout(timeOut, options.duration);
  121 + var newTimes;
  122 + var times = Date.now();
  123 + $(newContainer).css({
  124 + 'transition-timing-function':options.timingFun,
  125 + 'width':options.width,
  126 + });
  127 + var height = $(newContainer).outerHeight(true);
  128 + var len = $('.ez_tips').size();
  129 + if (len >= 2) {
  130 + for (var i = 1; i < len; i++) {
  131 + if (!$('.ez_tips').hasClass('length1')) {
  132 + $(newContainer).css(lastDirection,options.firstSpace + 'px');
  133 + $(newContainer).addClass('active length1');
  134 + break;
  135 + } else if (!$('.ez_tips').hasClass('length'+ (i+1))) {
  136 + $(newContainer).css(lastDirection,i * height + options.space * i + options.firstSpace + 'px');
  137 + $(newContainer).addClass('active length'+(i+1));
  138 + break; // break一定要加,否则每次点击都会循环到结束,导致一个目标div可能同时有length1 length2.....等多个类名
  139 + }
  140 + }
  141 + } else {
  142 + $(newContainer).css(lastDirection,options.firstSpace + 'px');
  143 + $(newContainer).addClass('active length1');
  144 + }
  145 + $(newContainer).on('mouseenter', function (event) {
  146 + event.stopPropagation();
  147 + $(newHead).find('.close').addClass('active');
  148 + clearTimeout(timer);
  149 + newTimes = Date.now() - times;
  150 + });
  151 + $(newContainer).on('mouseleave', function (event) {
  152 + event.stopPropagation();
  153 + $(newHead).find('.close').removeClass('active');
  154 + timer = setTimeout(timeOut, options.duration - newTimes);
  155 + });
  156 + $(newHead).find('.close').click(function () {
  157 + $(newContainer).removeClass('active');
  158 + setTimeout(function () {
  159 + $(newContainer).remove();
  160 + },700)
  161 + });
  162 + if (options.action) {
  163 + $(newContent).css('cursor','pointer').on(options.type,options.action);
  164 + }
  165 + },1);
97 166
98 $(options.dom).append(newContainer); 167 $(options.dom).append(newContainer);
99 - } else { 168 + }else{
100 return; 169 return;
101 } 170 }
102 171
@@ -111,4 +180,5 @@ layui.define(['layer', 'laytpl', 'form'], function (exports) { @@ -111,4 +180,5 @@ layui.define(['layer', 'laytpl', 'form'], function (exports) {
111 } 180 }
112 exports('msgTips', MsgTips); 181 exports('msgTips', MsgTips);
113 layui.link('../../src/style/css/tips.css') 182 layui.link('../../src/style/css/tips.css')
  183 + layui.link('../../src/style/css/tipsFault.css')
114 }) 184 })
@@ -26,8 +26,8 @@ @@ -26,8 +26,8 @@
26 padding:5px 5px 15px 5px; 26 padding:5px 5px 15px 5px;
27 transition: all .7s; 27 transition: all .7s;
28 font-size: 14px; 28 font-size: 14px;
29 - box-shadow: 0 0 8px #999;  
30 - border:1px solid #8e7e7e; 29 + /*box-shadow: 0 0 8px #999;*/
  30 + /*border:1px solid #8e7e7e;*/
31 } 31 }
32 .ez_tips.info { 32 .ez_tips.info {
33 background-color: #2f96b4; 33 background-color: #2f96b4;
  1 +.faultClearfix:after {
  2 + visibility: hidden;
  3 + display: block;
  4 + font-size: 0;
  5 + content: " ";
  6 + clear: both;
  7 + height: 0;
  8 +}
  9 +@font-face {font-family: "iconfont";
  10 + src: url('../font/iconfont.eot?t=1545291398330'); /* IE9*/
  11 + src: url('../font/iconfont.eot?t=1545291398330#iefix') format('embedded-opentype'), /* IE6-IE8 */
  12 + url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAATwAAsAAAAAB1gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY870isY21hcAAAAYAAAABXAAABhmgk0b9nbHlmAAAB2AAAASIAAAE4K/A34GhlYWQAAAL8AAAALwAAADYTohMMaGhlYQAAAywAAAAcAAAAJAfeA4RobXR4AAADSAAAAAwAAAAMDAAAAGxvY2EAAANUAAAACAAAAAgANgCcbWF4cAAAA1wAAAAeAAAAIAEQAE5uYW1lAAADfAAAAUUAAAJtPlT+fXBvc3QAAATEAAAAKwAAAD14rrqieJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeVT7bxdzwv4EhhrmBoQEozAiSAwD04A0WeJztkMERgCAMBPcAeTgW4sOCfNmHrVEQbWAStAtvZnPJBT4BFiAbh1FAF8J1WqrIM2vkJd5Uc5H63dsY8LlJtqvmyf+p8muLur9T8mtNom8T9ACizRISAHicLY+/TsJQFMbPx61WUm6lSlsaiUhji0jSQQIslFQSdCurpMaEXdwM3ZxNdLOsdHR1lBcor+E7uIpexZOcnD/fl/PLIUYi2CT3QYx26YAItXZtX4V8CLOPrgfmoS4aMarACJP14m2eSVI2T1aMrZJ4IUmLeJYyluL6Er6UJf9y9vXI0o0yi9M/DNH3K7tnER1Tk86JHA8+xH0P9rYsmHrptwhUa0Nv9XPulu3WWyqcjg+x6XT7ODNMwxQGvWSyW6OMcWiFNyLHKBs7KBg8VaIgiJSU6xzrp72qEivV9aeFi54mF9wTtyBr/hDWgx023scvzXav1z5NrpaN0FYsk8MfiUd9cNO6K3JefA6Gy8G0kteOXKem5SvTwXIY/AAGcUEEAAB4nGNgZGBgAOJZq2oE4/ltvjJwszCAwA3H9DYE/X8FCwNzNJDLwcAEEgUAF4AJoQB4nGNgZGBgbvjfwBDDwgACQJKRARUwAwBHCQJsBAAAAAQAAAAEAAAAAAAAAAA2AJx4nGNgZGBgYGZwAmIQYAJiLiBkYPgP5jMAAA9SAV8AAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgJmRiZGZkYWBJTHTzIInMzm/IjOvIjMRSDEwAABGIwaAAA==') format('woff'),
  13 + url('../font/iconfont.ttf?t=1545291398330') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  14 + url('../font/iconfont.svg?t=1545291398330#iconfont') format('svg'); /* iOS 4.1- */
  15 + }
  16 +.fault_ez_tips {
  17 + position: fixed;
  18 + -webkit-border-radius: 5px;
  19 + -moz-border-radius: 5px;
  20 + border-radius: 5px;
  21 + z-index:9999999;
  22 + color: #fff;
  23 + opacity: .8;
  24 + background-position: 15px center;
  25 + background-repeat: no-repeat;
  26 + padding:5px 5px 15px 5px;
  27 + transition: all .7s;
  28 + font-size: 14px;
  29 + /*box-shadow: 0 0 8px #999;*/
  30 + /*border:1px solid #8e7e7e;*/
  31 +}
  32 +.fault_ez_tips.info {
  33 + background-color: #2f96b4;
  34 + bottom: 319px;
  35 +}
  36 +.fault_ez_tips.warning {
  37 + background-color: #f89406;
  38 +}
  39 +.fault_ez_tips.error {
  40 + background-color: #bd362f;
  41 +}
  42 +.fault_ez_tips.success {
  43 + background-color: #51a351;
  44 +}
  45 +.fault_ez_tips .faultTips_icon_l {
  46 + width: 10px;
  47 + height: 10px;
  48 +}
  49 +.fault_ez_tips.info .faultTips_icon_l {
  50 + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=);
  51 +}
  52 +.fault_ez_tips.success .faultTips_icon_l {
  53 + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==);
  54 +}
  55 +.fault_ez_tips.warning .faultTips_icon_l {
  56 + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=);
  57 +}
  58 +.fault_ez_tips.error .faultTips_icon_l {
  59 + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=);
  60 +}
  61 +.fault_ez_tips .FaultTips_icon_r.close {
  62 + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABY0lEQVRIS7XVsUtVURgA8N/LTMQCachBEEXQhpBoEBVsiCCJXF3cFaFBGmxqcRGCaMgGGxvERnHwP2gUdHRwUhAcpNXlyJHz5PJ4997ntXvgcuFy+H7nO9937mmEEK7QrabRCCFcor+m+CJwgpE6gX3M1Ql8w6c6gQX8qRMYxGkJ8BN/8Rtdmbn/8B4beN0uRiN+DCEcYqIAuUgBXmAnITH4GzzDLh4VAR/xoySLiMzgJX7hbVnwGK+ZwROcIb6LxjlmEbHpopU3g9wAaZu+Y7VOYAjH6MlBqm9RJot1fGkDlBV5Dw9zi5wB4uqPMNYyuahN3+FrYZtmg4UQnuMAvf/j8N0WuQX5kDrkwX2RtkDqqiVs1QYkZAWbqJxJbgaZws9jG4+rZFMKpExi4eO9MXxXpCMgIX2I/6w1PO0U6hjIbFmElhM0UAbdGchA8fe8iM8Yz4MqAy3nZhRTmEzPq+b9cA2H83u5C1cF7AAAAABJRU5ErkJggg==);
  63 +}
  64 +.fault_ez_tips.info:hover,.fault_ez_tips.warning:hover,.fault_ez_tips.error:hover,.fault_ez_tips.success:hover {
  65 + box-shadow: 0 0 8px #000;
  66 + opacity: 1;
  67 +}
  68 +.fault_ez_tips.active {
  69 + transform: translateX(0)!important;
  70 +}
  71 +.fault_ez_tips .faultTitle {
  72 + padding-bottom:10px;
  73 + text-align: center;
  74 + position: relative;
  75 +}
  76 +.fault_ez_tips .faultTitle > i.faultTips_icon_l{
  77 + position: absolute;
  78 + width: 24px;
  79 + height: 24px;
  80 + left: 0;
  81 + top: 0;
  82 +}
  83 +.fault_ez_tips .faultTitle > i.FaultTips_icon_r.close{
  84 + position: absolute;
  85 + width: 24px;
  86 + height: 24px;
  87 + right: -25;
  88 + top: 0;
  89 + cursor: pointer;
  90 + opacity: 0;
  91 + transition: opacity .5s;
  92 +}
  93 +.fault_ez_tips .faultTitle > i.FaultTips_icon_r.close.active {
  94 + opacity: 1;
  95 +}
  96 +.fault_ez_tips i {
  97 + font-style: normal;
  98 +}
  99 +.fault_ez_tips .FaultTips-message .num {
  100 + color: #fff000;
  101 +}
  102 +