| public/map/popup/html/FlareClusterLayer_v3 copy.html | ●●●●● patch | view | raw | blame | history | |
| public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js | ●●●●● patch | view | raw | blame | history | |
| public/map/widgets/supervisoryMap/SupervisoryMap.js | ●●●●● patch | view | raw | blame | history | |
| public/map/widgets/supervisoryMap/template.html | ●●●●● patch | view | raw | blame | history | |
| src/page/crumbsL/crumbsL.vue | ●●●●● patch | view | raw | blame | history | |
| src/page/index/top/index.vue | ●●●●● patch | view | raw | blame | history | |
| src/store/modules/user.js | ●●●●● patch | view | raw | blame | history | |
| src/views/clientManagement/clientManagement.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/dataL/dataL.vue | ●●●●● patch | view | raw | blame | history |
public/map/popup/html/FlareClusterLayer_v3 copy.html
@@ -251,7 +251,7 @@ }, methods: { looks() { window.parent.parent.location.hash = `#/dataL/dataL?id=${this.ourData.id}&deviceName=${this.ourData.deviceName}&deviceNumber=${this.ourData.deviceNumber}&deviceType=${this.ourData.deviceType}&ownership=${this.ourData.ownership}&ownerId=&devicestate=${this.ourData.devicestate}&stime=${this.ourData.stime}&parentId=${this.ourData.parentId}&jd=${this.ourData.jd}&wd=${this.ourData.wd}&street=${this.ourData.street}&dtype=${this.ourData.dtype}&serialNumber=${this.ourData.serialNumber}&stype=&channelNumber=${this.ourData.channelNumber}&pay=&expireTime=${this.ourData.expireTime}&heartbeat=${this.ourData.heartbeat}&province=${this.ourData.province}&city=${this.ourData.city}&district=${this.ourData.district}&state=&reason=&deptId=${this.ourData.deptId}&onePhone=${this.ourData.onePhone}&twoPhone=${this.ourData.twoPhone}&oneId=${this.ourData.oneId}&twoId=&threeId=&oneContacts=${this.ourData.oneContacts}&twoContacts=${this.ourData.twoContacts}&type=${this.ourData.type}&beginTime=&endTime=&pid=${this.ourData.pid}&onlineStatus=${this.ourData.onlineStatus}&jtype=${this.ourData.jtype}&threePhone=${this.ourData.threePhone}&threeContacts=${this.ourData.threeContacts}`; window.parent.parent.location.hash = `#/dataL/dataL?id=${this.ourData.id}&deviceName=${this.ourData.deviceName}&deviceNumber=${this.ourData.deviceNumber}&deviceType=${this.ourData.deviceType}&ownership=${this.ourData.ownership}&ownerId=&devicestate=${this.ourData.devicestate}&stime=${this.ourData.stime}&parentId=${this.ourData.parentId}&jd=${this.ourData.jd}&wd=${this.ourData.wd}&street=${this.ourData.street}&dtype=${this.ourData.dtype}&serialNumber=${this.ourData.serialNumber}&stype=&channelNumber=${this.ourData.channelNumber}&pay=&expireTime=${this.ourData.expireTime}&heartbeat=${this.ourData.heartbeat}&province=${this.ourData.province}&city=${this.ourData.city}&district=${this.ourData.district}&state=${this.ourData.state}&reason=&deptId=${this.ourData.deptId}&onePhone=${this.ourData.onePhone}&twoPhone=${this.ourData.twoPhone}&oneId=${this.ourData.oneId}&twoId=&threeId=&oneContacts=${this.ourData.oneContacts}&twoContacts=${this.ourData.twoContacts}&type=${this.ourData.type}&beginTime=&endTime=&pid=${this.ourData.pid}&onlineStatus=${this.ourData.onlineStatus}&jtype=${this.ourData.jtype}&threePhone=${this.ourData.threePhone}&threeContacts=${this.ourData.threeContacts}`; }, getdatas(dat) { public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js
@@ -230,7 +230,7 @@ // return value; // } // ); var as = evt.graphic.attributes; for (let key in as) { if (typeof as[key] == 'object') { @@ -251,7 +251,7 @@ // console.log(cache); cache = null; var fCard = (posi, setdata,winSize) => { // 弹窗函数 var fCard = (posi, setdata, winSize) => { // 弹窗函数 var that = this, url = './popup/html/FlareClusterLayer_v3.html', clickD = null, @@ -266,103 +266,103 @@ }); that.layuiLayer.close(that.layuiLayer.index); // layer.alert('layer 新皮肤'); // that.layuiLayer.open({ // title: '', // type: 2, // shadeClose: false, // shade: false, // skin: 'demo-class', // // id: 'onelyOne', // maxmin: false, //开启最大化最小化按钮 // area: ['200px', '75px'], // // area: 'auto', // offset: posi, // skin: 'flare', // closeBtn: 0, //关闭按钮,可通过配置1和2来展示,0关闭 // content: [url, 'no'], // resize: false, // scrollbar: false, // // tipsMore: true, //允许多个tipe // // content: num, // success: function (layero, index) {//成功后添加全局点击关闭 // // console.log(evt.graphic.attributes); // $("#layui-layer-iframe" + index).contents().find("#input1").val(setdata); // // console.log(layero, index); // that.indexs = index; // that.layuiLayer.open({ // title: '', // type: 2, // shadeClose: false, // shade: false, // skin: 'demo-class', // // id: 'onelyOne', // maxmin: false, //开启最大化最小化按钮 // area: ['200px', '75px'], // // area: 'auto', // offset: posi, // skin: 'flare', // closeBtn: 0, //关闭按钮,可通过配置1和2来展示,0关闭 // content: [url, 'no'], // resize: false, // scrollbar: false, // // tipsMore: true, //允许多个tipe // // content: num, // success: function (layero, index) {//成功后添加全局点击关闭 // // console.log(evt.graphic.attributes); // $("#layui-layer-iframe" + index).contents().find("#input1").val(setdata); // // console.log(layero, index); // that.indexs = index; // var isclickD = true // , endx = null // , endy = null; // layero[0].style.position = 'absolute'; // var isclickD = true // , endx = null // , endy = null; // layero[0].style.position = 'absolute'; // downs = document.onmousedown = () => { //鼠标按下事件 // // console.log('down');//start // // downs = document.onmousedown = null; // var mx = window.event.clientX//鼠标初始位置 // , my = window.event.clientY // , cx = this.offset[1].replace("px", "")//初始位置 // , cy = this.offset[0].replace("px", ""); // downs = document.onmousedown = () => { //鼠标按下事件 // // console.log('down');//start // // downs = document.onmousedown = null; // var mx = window.event.clientX//鼠标初始位置 // , my = window.event.clientY // , cx = this.offset[1].replace("px", "")//初始位置 // , cy = this.offset[0].replace("px", ""); // //判断鼠标是否在地图上 // // console.log(mx,'+',my); // if (mx > 359 && mx < 1543 && my > 5 && my < 818) { // // console.log('on map') // if (endx != null && endy != null) { // cx = endx; // cy = endy; // } // moves = document.onmousemove = () => {//鼠标移动事件 // // console.log('move');//move // // console.log(this.offset) // var ux = window.event.clientX//记录实时位置 // , uy = window.event.clientY; // endx = +cx + (ux - mx)// 初始位置+(鼠标初始位置-实时位置) // endy = +cy + (uy - my); // layero[0].style.left = endx + 'px'; // layero[0].style.top = endy + 'px'; // // console.log(+cx, +cy,'初始位置'); // // console.log(mx, my,'鼠标初始位置'); // // console.log(ux, uy,'记录实时位置'); // // console.log(ux, uy,'最后位置'); // isclickD = false; // ups = document.onmouseup = () => {//鼠标抬起事件 // // console.log('up');//end // // downs = document.onmousedown = null; // moves = document.onmousemove = null; // ups = document.onmouseup = null; // var timess = setTimeout(() => { // clearTimeout(timess); // timess = null; // isclickD = true; // }, 1); // } // } // } // } // clickD = document.onclick = () => { // if (isclickD) { // parent[0].layer.close(index); // parent[0].layer.close(+index + 1); // // parent[0].layer.closeAll(); // // console.log(111111111111) // clickD = document.onclick = null; // } // } // //判断鼠标是否在地图上 // // console.log(mx,'+',my); // if (mx > 359 && mx < 1543 && my > 5 && my < 818) { // // console.log('on map') // if (endx != null && endy != null) { // cx = endx; // cy = endy; // } // moves = document.onmousemove = () => {//鼠标移动事件 // // console.log('move');//move // // console.log(this.offset) // var ux = window.event.clientX//记录实时位置 // , uy = window.event.clientY; // endx = +cx + (ux - mx)// 初始位置+(鼠标初始位置-实时位置) // endy = +cy + (uy - my); // layero[0].style.left = endx + 'px'; // layero[0].style.top = endy + 'px'; // // console.log(+cx, +cy,'初始位置'); // // console.log(mx, my,'鼠标初始位置'); // // console.log(ux, uy,'记录实时位置'); // // console.log(ux, uy,'最后位置'); // isclickD = false; // ups = document.onmouseup = () => {//鼠标抬起事件 // // console.log('up');//end // // downs = document.onmousedown = null; // moves = document.onmousemove = null; // ups = document.onmouseup = null; // var timess = setTimeout(() => { // clearTimeout(timess); // timess = null; // isclickD = true; // }, 1); // } // } // } // } // clickD = document.onclick = () => { // if (isclickD) { // parent[0].layer.close(index); // parent[0].layer.close(+index + 1); // // parent[0].layer.closeAll(); // // console.log(111111111111) // clickD = document.onclick = null; // } // } // var mouseWheel = that.map.on("mouse-wheel", myMouseWheelHandler); // var mouseWheel = that.map.on("mouse-wheel", myMouseWheelHandler); // function myMouseWheelHandler(event) { // // console.log("Mouse wheel value = " + event.value); // parent[0].layer.close(index); // parent[0].layer.close(+index + 1); // mouseWheel.remove(); // } // function myMouseWheelHandler(event) { // // console.log("Mouse wheel value = " + event.value); // parent[0].layer.close(index); // parent[0].layer.close(+index + 1); // mouseWheel.remove(); // } // }, // end: function () { //关闭事件 // }, // end: function () { //关闭事件 // } // }); // } // }); // that.layuiLayer.open({ //第二个iframe // title: '', // type: 2, @@ -433,11 +433,11 @@ // console.log(evt.screenY); var winSize = [+window.innerHeight / 2 - 242 + 'px', +window.innerWidth - 380 + 'px'] // console.log(winSize,4454645634536); fCard(offsetMy, setdata,winSize); fCard(offsetMy, setdata, winSize); mySelf.onceTimeMethod = setTimeout(() => { mySelf.onceTimeMethod = null; }, mySelf.onceTime); } else {}; } else { }; } else { // var taxLotExtent = evt.graphic.geometry.getExtent(); @@ -784,8 +784,9 @@ }, _clusterData: function () { //此函数当前仅适用于不使用预聚集数据的情况 //this function currently only applies if not using preclustered data // console.log('改变111111111111111') if (this.preClustered) { return; } @@ -871,9 +872,10 @@ cl.singles.push(obj); } } for (i = 0, len = this.gridClusters.length; i < len; i++) { if (this.gridClusters[i].clusterCount === 1) { // console.log(this.gridClusters) this._createSingle(this.gridClusters[i].singles[0]); } else if (this.gridClusters[i].clusterCount > 0) { this._createCluster(this.gridClusters[i]); @@ -929,15 +931,21 @@ this.singles.push(single); delete single.graphic; var symbol; if (single.jtype == 1) { symbol = new esri.symbol.PictureMarkerSymbol("./images/yj-jingbao.png", 40, 40); // console.log(single.state); if (single.state != '') { symbol = new esri.symbol.PictureMarkerSymbol("./images/by-jingbao.png", 40, 40); } else { if (single.onlineStatus == 1) { symbol = new esri.symbol.PictureMarkerSymbol("./images/zx-jingbao.png", 40, 40); if (single.jtype == 1) { symbol = new esri.symbol.PictureMarkerSymbol("./images/yj-jingbao.png", 40, 40); } else { symbol = new esri.symbol.PictureMarkerSymbol("./images/dx-jingbao.png", 40, 40); if (single.onlineStatus == 1) { symbol = new esri.symbol.PictureMarkerSymbol("./images/zx-jingbao.png", 40, 40); } else { symbol = new esri.symbol.PictureMarkerSymbol("./images/dx-jingbao.png", 40, 40); } } } var point = new Point(single[this.xPropertyName], single[this.yPropertyName], this.spatialRef); var attributes = lang.clone(single); @@ -1031,11 +1039,11 @@ //add a text element for the label to display the count and add to the group var shapeCenter = this._getShapeCenter(cluster.graphicShape); var textShape = groupShape.createText({ x: shapeCenter.x, y: shapeCenter.y + (this.textSymbol.font.size / 2 - 2), text: cluster.clusterCount, align: 'middle' }) x: shapeCenter.x, y: shapeCenter.y + (this.textSymbol.font.size / 2 - 2), text: cluster.clusterCount, align: 'middle' }) .setFont({ size: this.textSymbol.font.size, family: this.textSymbol.font.family, @@ -1159,10 +1167,10 @@ //create a transparent circle that contains the boundary of the flares, this is to make sure the mouse events don't fire moving in between flares var conCircleRadius = (center.x - (bbox.x - radius - buffer)) + radius; //get the radius of the circle to contain everything var containerCircle = groupShape.createCircle({ cx: center.x, cy: center.y, r: conCircleRadius }) cx: center.x, cy: center.y, r: conCircleRadius }) //.setStroke({ width: 1, color: "000" }) .setFill(new Color([0, 0, 0, 0])); containerCircle.rawNode.setAttribute("class", "flare-object cluster-object"); @@ -1463,11 +1471,11 @@ var textShapes = []; for (var i = 0, len = lines.length; i < len; i++) { var textShape = tooltipGroup.createText({ x: xPos, y: yPos + (i * 10), text: lines[i], align: 'middle' }) x: xPos, y: yPos + (i * 10), text: lines[i], align: 'middle' }) .setFill("#000") .setFont({ size: 8, @@ -1481,12 +1489,12 @@ var rectPadding = 2; var textBox = tooltipGroup.getBoundingBox(); var rectShape = tooltipGroup.createRect({ x: textBox.x - rectPadding, y: textBox.y - rectPadding, width: textBox.width + (rectPadding * 2), height: textBox.height + (rectPadding * 2), r: 0 }) x: textBox.x - rectPadding, y: textBox.y - rectPadding, width: textBox.width + (rectPadding * 2), height: textBox.height + (rectPadding * 2), r: 0 }) .setFill(new Color([255, 255, 255, 0.9])) .setStroke({ color: "#000", @@ -1622,11 +1630,11 @@ //Have to add the flare text after the flare group animation otherwise Edge just reloads the page and dies for some reason? if (this.shape.flareText) { var flareText = this.shape.createText({ x: this.shape.flareText.location.x, y: this.shape.flareText.location.y, text: this.shape.flareText.text, align: 'middle' }) x: this.shape.flareText.location.x, y: this.shape.flareText.location.y, text: this.shape.flareText.text, align: 'middle' }) .setFill(layer.textSymbol.color) .setFont({ size: this.shape.flareText.textSize, public/map/widgets/supervisoryMap/SupervisoryMap.js
@@ -816,11 +816,47 @@ type: 'GET', dataType: 'JSON', success: function (data) { var result = data.data; console.log(result) var oldData = data.data var result = []; // console.log(result) var str = ''; that.entitysData = []; that.analysisAddEntitys.clear(); if(deviceType == ''){ result = oldData; }else if(deviceType == '在线'){ for (var key in oldData){ // console.log(oldData[key]); if(oldData[key].state == '' && oldData[key].jtype != 1 && oldData[key].onlineStatus == 1){ result.push(oldData[key]); } } }else if(deviceType == '离线'){ for (var key in oldData){ // console.log(oldData[key]); if(oldData[key].state == '' && oldData[key].jtype != 1 && oldData[key].onlineStatus != 1){ result.push(oldData[key]); } } }else if(deviceType == '警报'){ for (var key in oldData){ // console.log(oldData[key]); if(oldData[key].state == '' && oldData[key].jtype == 1){ result.push(oldData[key]); } } }else if(deviceType == '故障'){ for (var key in oldData){ // console.log(oldData[key]); if(oldData[key].state != ''){ result.push(oldData[key]); } } } for (var a, i = 0; i < result.length; i++) { that.createEntitysAnalysis(that.analysisAddEntitys, that.entitysData, '设备信息', { lgtd: result[i].jd, public/map/widgets/supervisoryMap/template.html
@@ -24,6 +24,7 @@ <li>全部</li> <li>在线</li> <li>警报</li> <li>故障</li> <li>离线</li> </ul> </div> src/page/crumbsL/crumbsL.vue
@@ -4,16 +4,29 @@ <div class="titles">您的位置:</div> <!-- <button @click="cc">cccc</button> --> <!-- <el-breadcrumb-item style="position: relative;top: -3px;left: 5px">您的位置:</el-breadcrumb-item> --> <el-breadcrumb separator="/"> <!-- <el-breadcrumb-item v-show="!onceRouter" :to="{ path: '/wel/index' }">首页</el-breadcrumb-item> --> <!-- <el-breadcrumb-item v-show="!onceRouter" :to="{ path: '/wel/index' }">首页</el-breadcrumb-item> --> <!-- <el-breadcrumb separator="/"> <el-breadcrumb-item :to="item.path" v-for="item of breadListLast" :key="item.path" style="border: hotpink 1px solid" > {{ item.name }} </el-breadcrumb-item> </el-breadcrumb> </el-breadcrumb> --> <div class="ourCrumbsl" v-for="(item, index) of breadListLast" :key="item.path" > <div class="aaa" v-show="breadListLast.length != index + 1"> <a href="javascript:;" @click="$router.push({ path: item.path})">{{ item.name }}</a> /  </div> <div class="bbb" v-show="breadListLast.length == index + 1"> <div>{{ item.name }}</div> </div> </div> </div> <!-- <router-view></router-view> --> </div> @@ -64,9 +77,11 @@ methods: { loadChange(states) { //导航栏进就是一级路由,其他页面push if (this.isrf) {//刷新读取localStorage if (this.isrf) { //刷新读取localStorage this.breadListLast = JSON.parse(localStorage.getItem("crumbsl")); } else {//关闭重写 } else { //关闭重写 var path = this.$route.path, p = path.split("/").pop(), n = this.$route.name, @@ -92,8 +107,8 @@ //判断是否有重复项,有则删除其后路由↓ var ourP = this.breadListLast; for (var os in ourP) { if(n == '首页'){ n = '数据模式' if (n == "首页") { n = "数据模式"; } if (ourP[os].name == n && os != ourP.length - 1) { this.breadListLast.splice( @@ -104,11 +119,11 @@ } } // console.log(p, n, "写入多级面包屑"); } this.sOld = s; // window.localStorage.crumbsl = this.breadListLast; localStorage.setItem("crumbsl", JSON.stringify(this.breadListLast)); } }, loadChange2(states) { @@ -285,8 +300,15 @@ console.log("首次被加载"); window.name = "isReload"; // 在首次进入页面时我们可以给window.name设置一个固定值 } else if (window.name == "isReload") { this.isrf = true; console.log("页面被刷新"); var abb = localStorage.getItem("crumbsl"); if (abb) { this.isrf = true; console.log("页面被刷新"); } else { this.isrf = false; console.log("页面被刷新,但后台没有数据"); } } this.loadChange("moun"); }, @@ -305,8 +327,19 @@ background: #fff; .titles { position: absolute; top: 17px; top: 17.15px; left: 5px; font-weight: 400; } .ourCrumbsl { // border: hotpink 1px solid; float: left; font-weight: 400; position: relative; top: -3px; a{ font-weight: 400; } } } } src/page/index/top/index.vue
@@ -97,6 +97,7 @@ ></i> </div> </el-tooltip> <!-- 顶部导航用户图片位置 --> <img class="top-bar__img" :src="userInfo.avatar" /> <el-dropdown> <span class="el-dropdown-link"> src/store/modules/user.js
@@ -103,11 +103,12 @@ }) }, //获取用户信息 GetUserInfo({commit}) { GetUserInfo({commit}) {//获取用户信息liu++ return new Promise((resolve, reject) => { getUserInfo().then((res) => { const data = res.data.data; commit('SET_ROLES', data.roles); console.log(data); resolve(data); }).catch(err => { reject(err); src/views/clientManagement/clientManagement.vue
@@ -570,7 +570,7 @@ "form.map": { // form是表单或者表格绑定的数据集,v-model='form' handler(val) { debugger if (val) { this.form.wd = val.latitude; this.form.jd = val.longitude; src/views/dataL/dataL.vue
@@ -8,11 +8,25 @@ {{ name.length > 14 ? name.substr(0, 14) + "···" : name }} </p> <div class="l-t-state"> <!-- dataState: ["掉线", "在线", "故障", "预警"], if (s != "") { states = "故障"; } else { if (j != 1) { if (o == 1) { states = "在线"; } else { states = "掉线"; } } else { states = "预警"; } }--> <span :class="{ 'l-t-s-grey': state == dataState[0], 'l-t-s-green': state == dataState[1], 'l-t-s-yewllo': state == dataState[3], 'l-t-s-yewllo': state == dataState[2], 'l-t-s-red': state == dataState[3], 'l-t-s-yuan': true, }" @@ -468,7 +482,7 @@ <div class="r-one"> <div class="r-heard"> <div class="r-heard-top">部署信息</div> <button @click="modifyl" class="r-but-top">修改</button> <!-- <button @click="modifyl" class="r-but-top">修改</button> --> </div> <div class="r-body"> <div class="r-b-top"> @@ -951,25 +965,24 @@ var data = res.data.data.records[0]; var setimgl = null; //插入图片api获取图片 // this.stetDetails(data); getImg(imgdadta,'post').then((res) => { // this.stetDetails(data); getImg(imgdadta, "post").then((res) => { // console.log(res.data.data.length != 0) var imgdatas = []; if(res.data.data.length != 0){ imgdatas = res.data.data[0].paddress.split(','); }else{ if (res.data.data.length != 0) { imgdatas = res.data.data[0].paddress.split(","); } else { } // console.log(imgdatas); // imgdatas = [ //最多5张照片 // "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57", // "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57", // "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57", // imgdatas = [ //最多5张照片 // "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57", // "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57", // "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57", // "https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE", // "https://web.byisf.com/minio/jfpt/upload/depl/ad049799e7024c529b9c890d3ba434bc.JPEG", // ]; setimgl = imgdatas.length == 0? ['no'] : imgdatas; // "https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE", // "https://web.byisf.com/minio/jfpt/upload/depl/ad049799e7024c529b9c890d3ba434bc.JPEG", // ]; setimgl = imgdatas.length == 0 ? ["no"] : imgdatas; this.stetDetails(data, setimgl); }); // console.log(data); @@ -988,16 +1001,34 @@ o = this.a.onlineStatus, s = this.a.state, j = this.a.jtype; if (o == 0) { states = "掉线"; } else if (o == 1) { states = "在线"; } else if (s != "") { // if (o == 0) { // states = "掉线"; // } else if (o == 1) { // states = "在线"; // } else if (s != "") { // states = "故障"; // } else if (j != 2) { // states = "预警"; // } if (s != "") { states = "故障"; } else if (j != 2) { states = "预警"; } else { if (j != 1) { if (o == 1) { states = "在线"; } else { states = "掉线"; } } else { states = "预警"; } } this.state = "无数据" && states; // console.log(o, 1000); // console.log(s, 1000); // console.log(j, 1000); // console.log(states, 1000); this.state = states; this.evaluate = "空气质量"; this.machineCode = "无数据" && this.a.deviceNumber; @@ -1254,16 +1285,16 @@ border: 1px solid transparent; } .l-t-s-grey { background-color: rgb(187, 187, 187); background-color: #CDCDCD; } .l-t-s-green { background-color: rgb(41, 202, 135); background-color: #32C1A2; } .l-t-s-yewllo { background-color: rgb(240, 181, 20); background-color: #F49966; } .l-t-s-red { background-color: rgba(247, 28, 28, 0.877); background-color: #F35B5B; } } }