diff --git a/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue b/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
index e0c94a7..53ccd7c 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
@@ -1,15 +1,809 @@
 <template>
-  <div>
-    Cpu
+  <div style="height: 100%;">
+    <div class="cpu-search">
+      <a-row type="flex" :gutter="10">
+        <a-col flex="265px">
+          <span class="item-label">Server</span>
+          <a-select style="width:180px"
+            v-model="queryParams.server" 
+            placeholder="select..."
+            :filter-option="filterOption"
+            show-arrow 
+            :options="serverOptions" 
+            @change="onServerChange"
+          >
+            <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+          </a-select>
+        </a-col>
+        <a-col flex="265px">
+          <span class="item-label">Time</span>
+          <a-select style="width:180px"
+            v-model="queryParams.timer" 
+            placeholder="select..."
+            show-arrow 
+            :options="timerOptions" 
+            @change="onTimeChange"
+          >
+            <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+          </a-select>
+        </a-col>
+        <a-col flex="265px">
+          <a-range-picker
+            :show-time="true"
+            :default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
+            @change="onRangeDateChange" 
+          />
+        </a-col>
+      </a-row>
+      <div class="cpu-search-btns">
+        <a-button class="cpu-search-btns-ant">Create Alert Rules</a-button>
+      </div>
+    </div>
+    <div class="cpu-content">
+      <a-row :gutter="[20,15]" style="height: 100%;">
+        <a-col :span="12" style="height: calc(50% + 10px);">
+          <div class="cpu-content-item">
+            <BoxTitle title="CPU utilizatior">
+              <template slot="right">
+                 <ul>
+                    <li><span>Avg:</span>7.43%</li>
+                    <li><span>Min:</span>7.43%</li>
+                    <li><span>Max:</span>7.43%</li>
+                 </ul>
+              </template>
+              <template slot="other">
+                <img src="@/assets/images/abnormalAlarm/big.png" @click="handelZoom('CPU utilizatior',option1)" alt="">
+              </template>
+            </BoxTitle>
+            <div class="cpu-content-item-chart" id="chart1"></div>
+          </div>
+        </a-col>
+        <a-col :span="12" style="height: calc(50% + 10px);">
+          <div class="cpu-content-item">
+            <BoxTitle title="Percentage of free system space">
+              <template slot="right">
+                 <ul>
+                    <li><span>Avg:</span>7.43%</li>
+                    <li><span>Min:</span>7.43%</li>
+                    <li><span>Max:</span>7.43%</li>
+                 </ul>
+              </template>
+              <template slot="other">
+                <img src="@/assets/images/abnormalAlarm/big.png" @click="handelZoom('Percentage of free system space',option2)" alt="">
+              </template>
+            </BoxTitle>
+            <div class="cpu-content-item-chart" id="chart2"></div>
+          </div>
+        </a-col>
+        <a-col :span="12" style="height: calc(50% + 10px);">
+          <div class="cpu-content-item">
+            <BoxTitle title="Interrupt and episodic switching">
+              <template slot="other">
+                <img src="@/assets/images/abnormalAlarm/big.png" @click="handelZoom('Interrupt and episodic switching',option3)" alt="">
+              </template>
+            </BoxTitle>
+            <div class="cpu-content-item-info">
+              <a-row style="height: 30px;" type="flex">
+                <a-col flex="170px">Processor interrupt(s)</a-col>
+                <a-col flex="100px">Avg:<span>7.43%</span></a-col>
+                <a-col flex="100px">Min:<span>7.43%</span></a-col>
+                <a-col flex="100px">Max:<span>7.43%</span></a-col>
+                <a-col><div style="background: #00a8ff;" class="li-icon"></div><i>Processor interrupt</i></a-col>
+              </a-row>
+              <a-row style="height: 30px;" type="flex">
+                <a-col flex="170px">Situational switching(s)</a-col>
+                <a-col flex="100px">Avg:<span>7.43%</span></a-col>
+                <a-col flex="100px">Min:<span>7.43%</span></a-col>
+                <a-col flex="100px">Max:<span>7.43%</span></a-col>
+                <a-col><div style="background: #73b54b;" class="li-icon"></div><i>Situational switching(s)</i></a-col>
+              </a-row>
+            </div>
+            <div class="cpu-content-item-chart3" id="chart3"></div>
+          </div>
+        </a-col>
+        <a-col :span="12" style="height: calc(50% + 10px);">
+          <div class="cpu-content-item">
+            <BoxTitle title="CPU usage of diferent cores">
+              <template slot="other">
+                <img src="@/assets/images/abnormalAlarm/big.png" @click="handelZoom('CPU usage of diferent cores',option4)" alt="">
+              </template>
+            </BoxTitle>
+            <div class="cpu-content-item-chart" id="chart4"></div>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+    <a-modal 
+      :title="modalTitle" 
+      :width="1000" 
+      v-model="visible" 
+      @cancel="onCancel"
+    >
+      <div class="modal-content" id="common"></div>
+    </a-modal>
   </div>
 </template>
 
 <script>
-  export default {
-    
-  }
+import moment from 'moment';
+import * as echarts from 'echarts'
+import dateFormat from '@/components/jeecg/JEasyCron/format-date'
+import BoxTitle from '../../components/boxTitle.vue';
+import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
+export default {
+  components: {
+    BoxTitle,
+  },
+  data() {
+    return {
+      queryParams: {
+        server: undefined,
+        timer: "1h",
+        startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
+        endDate: dateFormat(new Date(), 'yyyy-MM-dd')
+      },
+      serverOptions: [],
+      timerOptions: [
+        {label: "1Hours",value: "1h"},
+        {label: "2Hours",value: "2h"},
+        {label: "3Hours",value: "3h"},
+      ],
+      option1:{},
+      option2:{},
+      option3:{},
+      option4: {},
+      colorList: [
+        "#c13a28", "#ff8a00", "#cbae7f", "#c9bd2b", "#81b477", "#488672",
+        "#55d9d1", "#49a8f0", "#2859ed", "#9e54ec", "#7e16a3", "#e6437d"
+      ],
+      legendList: [
+        "CPU0,10", "CPU0,11", "CPU0,8", "CPU0,9", "CPU0,1", "CPU0,2","",
+        "CPU0,0", "CPU0,5", "CPU0,6", "CPU0,3", "CPU0,4", "CPU0,7"
+      ],
+      xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      visible: false,
+      modalTitle: "",
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.drawChart1()
+        this.drawChart2()
+        this.drawChart3()
+        this.drawChart4()
+      },0)
+    })
+  },
+  methods: {
+    moment,
+    filterOption(input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      );
+    },
+    getServerList() {
+      getAction("/sysServer/sourceList").then(res => {
+        if (res.success) {
+          this.serverOptions = res.result.map(item => {
+            return {
+              label: item.sourceName,
+              value: item.sourceId
+            }
+          })
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    onServerChange(val) {
+      console.log(val);
+    },
+    onTimeChange(val) {
+      console.log(val);
+    },
+    onRangeDateChange(date, dateString) {
+      this.queryParams.startDate = dateString[0]
+      this.queryParams.endDate = dateString[1]
+    },
+    drawChart1() {
+      let myLine = echarts.init(document.getElementById("chart1"))
+      this.option1 = {
+        color:["#0096ff"],
+        grid: {
+          left: 25,
+          right: 0,
+          top: 15,
+          bottom: 0,
+          containLabel: true
+        },
+        legend: {
+          icon: "roundRect",
+          itemHeight: 12, // 图例icon高度
+          itemWidth: 12, // 图例icon宽度
+          top: 0,
+          right: 0,
+          textStyle: {
+            color: "#ade6ee",
+            lineHeight: 12,
+
+            rich: {
+              a: {
+                verticalAlign: 'middle',
+              },
+            },
+            padding:[0,-2,-4,0],
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show:false
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(115, 191, 255, 0.2)"
+            }
+          },
+          axisLabel: {
+            color: "rgba(173, 230, 238, 1)",
+            formatter: (value,index)=>{
+              if(index === 0) {
+                return '        ' + value;
+              }
+              if(index === this.xData.length -1) {
+                return value + '        ';
+              }
+              return value
+            }
+          },
+          boundaryGap: false,
+          data: this.xData
+        },
+        yAxis: {
+          type: 'value',
+          name: "CPU utilization(%)",
+          nameLocation: "middle",
+          nameTextStyle: {
+            color: "#5b9cba",
+            fontFamily: "ArialMT",
+            fontSize: 14
+          },
+          nameGap: 30,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(115, 191, 255, 0.2)"
+            }
+          },
+          axisLine: {
+            show:true,
+            lineStyle: {
+              color: "rgba(115, 191, 255, 0.5)"
+            }
+          },
+          axisLabel: {
+            color: "rgba(173, 230, 238, 1)"
+          },
+        },
+        series: [
+          {
+            type: 'line',
+            symbol: 'none',
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#0096ff" },
+                  { offset: 1, color: "rgba(0, 150, 255,0.2)" },
+                ]),
+              },
+            },
+            data: [5, 23, 12, 48, 15, 27, 56]
+          }
+        ]
+      };
+      myLine.setOption(this.option1)
+      window.addEventListener("resize", function () {
+        myLine.resize();
+      })
+    },
+    drawChart2() {
+      let myLine = echarts.init(document.getElementById("chart2"))
+      this.option2 = {
+        color:["#f1e852"],
+        grid: {
+          left: 25,
+          right: 0,
+          top: 15,
+          bottom: 0,
+          containLabel: true
+        },
+        legend: {
+          icon: "roundRect",
+          itemHeight: 12, // 图例icon高度
+          itemWidth: 12, // 图例icon宽度
+          top: 0,
+          right: 0,
+          textStyle: {
+            color: "#ade6ee",
+            lineHeight: 12,
+
+            rich: {
+              a: {
+                verticalAlign: 'middle',
+              },
+            },
+            padding:[0,-2,-4,0],
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show:false
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(115, 191, 255, 0.2)"
+            }
+          },
+          axisLabel: {
+            color: "rgba(173, 230, 238, 1)",
+            formatter: (value,index)=>{
+              if(index === 0) {
+                return '        ' + value;
+              }
+              if(index === this.xData.length -1) {
+                return value + '        ';
+              }
+              return value
+            }
+          },
+          boundaryGap: false,
+          data: this.xData
+        },
+        yAxis: {
+          type: 'value',
+          name: "system space(%)",
+          nameLocation: "middle",
+          nameTextStyle: {
+            color: "#5b9cba",
+            fontFamily: "ArialMT",
+            fontSize: 14
+          },
+          nameGap: 30,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(115, 191, 255, 0.2)"
+            }
+          },
+          axisLine: {
+            show:true,
+            lineStyle: {
+              color: "rgba(115, 191, 255, 0.5)"
+            }
+          },
+          axisLabel: {
+            color: "rgba(173, 230, 238, 1)"
+          },
+        },
+        series: [
+          {
+            type: 'line',
+            symbol: 'none',
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#f1e852" },
+                  { offset: 1, color: "rgba(241, 232, 82,0.2)" },
+                ]),
+              },
+            },
+            data: [5, 23, 12, 48, 15, 27, 56]
+          }
+        ]
+      };
+      myLine.setOption(this.option2)
+      window.addEventListener("resize", function () {
+        myLine.resize();
+      })
+    },
+    drawChart3() {
+      let myLine = echarts.init(document.getElementById("chart3"))
+      this.option3 = {
+        grid: {
+          left: 25,
+          right: 0,
+          top: 10,
+          bottom: 10,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show:false
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(64, 105, 121, 0.5)"
+            }
+          },
+          axisLabel: {
+            color: "rgba(173, 230, 238, 1)",
+            formatter: (value,index)=>{
+              if(index === 0) {
+                return '        ' + value;
+              }
+              if(index === this.xData.length -1) {
+                return value + '        ';
+              }
+              return value
+            }
+          },
+          boundaryGap: false,
+          data: this.xData
+        },
+        yAxis: {
+          type: 'value',
+          name: "s",
+          nameLocation: "middle",
+          nameTextStyle: {
+            color: "#5b9cba",
+            fontFamily: "ArialMT",
+            fontSize: 14
+          },
+          nameGap: 30,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(64, 105, 121, 0.5)"
+            }
+          },
+          axisLine: {
+            show:true,
+            lineStyle: {
+              color: "rgba(115, 191, 255, 0.5)"
+            }
+          },
+          axisLabel: {
+            color: "rgba(173, 230, 238, 1)"
+          },
+        },
+        series: [
+          {
+            type: 'line',
+            name: 'Email',
+            symbol: 'none',
+            itemStyle:{ normal:{color:"#00a8ff"}},
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#00a8ff" },
+                  { offset: 1, color: "rgba(255,255,255,0)" },
+                ]),
+              },
+            },
+            data: [150, 230, 224, 218, 135, 147, 260],
+          },
+          {
+            type: 'line',
+            name: 'Eml',
+            symbol: 'none',
+            itemStyle:{ normal:{color:"#73b54b"}},
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#73b54b" },
+                  { offset: 1, color: "rgba(255,255,255,0)" },
+                ]),
+              },
+            },
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+          }
+        ]
+      };
+      myLine.setOption(this.option3)
+      window.addEventListener("resize", function () {
+        myLine.resize();
+      })
+    },
+    drawChart4() {
+      let myLine = echarts.init(document.getElementById("chart4"))
+      this.option4 = {
+        color:this.colorList,
+        grid: {
+          left: 25,
+          right: 0,
+          top: 70,
+          bottom: 10,
+          containLabel: true
+        },
+        legend: {
+          icon: "roundRect",
+          itemHeight: 12, // 图例icon高度
+          itemWidth: 12, // 图例icon宽度
+          top: 10,
+          right: 0,
+          textStyle: {
+            color: "#9ab1bc",
+            width: 65,
+            lineHeight: 12,
+            rich: {
+              a: {
+                verticalAlign: 'middle',
+              },
+            },
+            padding:[0,-2,-4,0],
+          },
+          data: this.legendList, // 不需要''换行
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show:false
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(64, 105, 121, 0.5)"
+            }
+          },
+          axisLabel: {
+            color: "rgba(173, 230, 238, 1)",
+            formatter: (value,index)=>{
+              if(index === 0) {
+                return '        ' + value;
+              }
+              if(index === this.xData.length -1) {
+                return value + '        ';
+              }
+              return value
+            }
+          },
+          boundaryGap: false,
+          data: this.xData
+        },
+        yAxis: {
+          type: 'value',
+          name: "CPU usage(%)",
+          nameLocation: "middle",
+          nameTextStyle: {
+            color: "#5b9cba",
+            fontFamily: "ArialMT",
+            fontSize: 14
+          },
+          nameGap: 30,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(64, 105, 121, 0.5)"
+            }
+          },
+          axisLine: {
+            show:true,
+            lineStyle: {
+              color: "rgba(115, 191, 255, 0.5)"
+            }
+          },
+          axisLabel: {
+            color: "rgba(173, 230, 238, 1)"
+          },
+        },
+        series: [
+          {
+            type: 'line',
+            name:"CPU0,10",
+            symbol: 'none',
+            data: [15, 30, 24, 28, 13, 14, 20],
+          },
+          {
+            type: 'line',
+            name:"CPU0,11",
+            symbol: 'none',
+            data: [82, 92, 91, 34, 12, 30, 20],
+          },
+          {
+            type: 'line',
+            name:"CPU0,8",
+            symbol: 'none',
+            data: [2, 9, 11, 24, 12, 20, 25],
+          },
+          {
+            type: 'line',
+            name:"CPU0,9",
+            symbol: 'none',
+            data: [8, 19, 32, 4, 22, 13, 50],
+          },
+          {
+            type: 'line',
+            name:"CPU0,1",
+            symbol: 'none',
+            data: [53, 62, 71, 14, 16, 37, 24],
+          },
+          {
+            type: 'line',
+            name:"CPU0,2",
+            symbol: 'none',
+            data: [62, 54, 49, 64, 62, 45, 29],
+          },
+          {
+            type: 'line',
+            name:"CPU0,0",
+            symbol: 'none',
+            data: [15, 30, 24, 28, 13, 14, 20],
+          },
+          {
+            type: 'line',
+            name:"CPU0,5",
+            symbol: 'none',
+            data: [82, 92, 91, 34, 12, 30, 20],
+          },
+          {
+            type: 'line',
+            name:"CPU0,6",
+            symbol: 'none',
+            data: [2, 9, 11, 24, 12, 20, 25],
+          },
+          {
+            type: 'line',
+            name:"CPU0,3",
+            symbol: 'none',
+            data: [8, 19, 32, 4, 22, 13, 50],
+          },
+          {
+            type: 'line',
+            name:"CPU0,4",
+            symbol: 'none',
+            data: [53, 62, 71, 14, 16, 37, 24],
+          },
+          {
+            type: 'line',
+            name:"CPU0,7",
+            symbol: 'none',
+            data: [62, 54, 49, 64, 62, 45, 29],
+          }
+        ]
+      };
+      myLine.setOption(this.option4)
+      window.addEventListener("resize", function () {
+        myLine.resize();
+      })
+    },
+    drawLine(option) {
+      this.myLine = echarts.init(document.getElementById("common"))
+      this.myLine.setOption(option)
+      window.addEventListener("resize", function () {
+        this.myLine.resize();
+      })
+    },
+    handelZoom(str, option) {
+      console.log(option);
+      this.modalTitle = str
+      this.visible = true
+      this.$nextTick(() => {
+        this.drawLine(option)
+      })
+    },
+    onCancel() {
+      this.visible = false
+      this.myLine.clear()
+    }
+  },
+}
 </script>
 
-<style lang="scss" scoped>
-
+<style lang="less" scoped>
+.cpu-search{
+  height: 50px;
+  border-top: 1px solid rgba(13, 235, 201, 0.3);
+  border-bottom: 1px solid rgba(13, 235, 201, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+  background: rgba(12, 235, 201, 0.05);
+  .ant-row-flex{
+    flex-flow: nowrap;
+  }
+  /deep/ .ant-calendar-range-picker-separator{
+    color: white;
+  }
+  .item-label{
+    display: inline-block;
+    font-size: 16px;
+    font-family: ArialMT;
+    color: #ade6ee;
+    line-height: 32px;
+    height: 32px;
+    margin-right: 10px;
+  }
+  &-btns{
+    &-ant{
+      background: #1397a3;
+      border: none;
+    }
+  }
+}
+.cpu-content{
+  height: calc(100% - 60px);
+  margin-top: 10px;
+  overflow: hidden;
+  &-item{
+    width: 100%;
+    height: 100%;
+    // background: #ade6ee;
+    &-chart{
+      width: 100%;
+      height: calc(100% - 40px);
+    }
+    &-chart3{
+      width: 100%;
+      height: calc(100% - 100px);
+    }
+    ul{
+      list-style:none;
+      margin-right: 30px;
+      li{
+        float: left;
+        font-family: ArialMT;
+        font-size: 14px;
+        font-weight: normal;
+        color: #ffffff;
+        margin-left: 10px;
+        span{
+          color: #00e9fe;
+          background: none;
+          padding: 0 5px;
+        }
+      }
+    }
+    &-info{
+      height: 60px;
+      font-family: ArialMT;
+      font-size: 14px;
+      font-weight: normal;
+      color: #00e9fe;
+      margin-left: 85px;
+      .li-icon{
+        display: inline-block;
+        vertical-align: middle;
+        width: 12px;
+        height: 12px;
+        border-radius: 4px;
+        margin-right: 5px;
+      }
+      i{
+        font-style: normal;
+        font-size: 14px;
+        font-weight: normal;
+        color: #9ab1bc;
+      }
+      span{
+        color: #ffffff;
+        background: none;
+        margin-left: 5px;
+      }
+      .ant-row-flex{
+        // justify-content: flex-end;
+        flex-flow: nowrap;
+      }
+    }
+    &-legend{
+      height: 60px;
+      font-family: ArialMT;
+      font-size: 14px;
+      font-weight: normal;
+      color: #9ab1bc;
+    }
+  }
+}
+/deep/.ant-modal-title{
+  letter-spacing: 1px;
+}
+/deep/.ant-modal-footer{
+  display: none;
+}
+.modal-content{
+  width: 100%;
+  height: 600px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue b/src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue
index d4606ec..079f1ca 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue
@@ -62,7 +62,6 @@ export default {
           textStyle: {
             color: "#ade6ee",
             lineHeight: 12,
-
             rich: {
               a: {
                 verticalAlign: 'middle',
@@ -70,7 +69,6 @@ export default {
             },
             padding:[0,-2,-4,0],
           }
-          // itemStyle
         },
         xAxis: {
           type: 'category',
@@ -82,6 +80,12 @@ export default {
               color: "rgba(115, 191, 255, 0.2)"
             }
           },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(115, 191, 255, 0.2)"
+            }
+          },
           axisLabel: {
             color: "rgba(173, 230, 238, 1)",
             formatter: (value,index)=>{
@@ -106,6 +110,7 @@ export default {
             }
           },
           axisLine: {
+            show:true,
             lineStyle: {
               color: "rgba(115, 191, 255, 0.5)"
             }
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue b/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue
index e87c7a0..b640cb4 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue
@@ -628,7 +628,6 @@ export default {
         width: 12px;
         height: 12px;
         border-radius: 4px;
-        background: red;
         margin-right: 5px;
       }
     }