1.看板地图背景色变浅

loulijun2021

2022-11-26 4e87920494fd491b6ec584bbd208879dda6d0d00

 src/views/kb/zhkb.vue

@@ -4,7 +4,7 @@
    <div class="kb_body">
      <div class="kb_background" />
      <div class="kb_background2" />
      <div class="kb_head">智能订单看板</div>
      <div class="kb_head">智能工厂综合管理</div>
      <!--      <div class="kb_headerPic" />-->
      <div class="kb_headerPic kb_flex_space_between">
        <div id="zhkbTop01" style="width: 800px;height:36px;" />
@@ -26,9 +26,9 @@
                <div>计划完成进度（外购） 30000吨</div>
              </div>
              <div class="kb_flex_space_between" style="padding: 0 15px;height: 20px;">
                <div style="color:#fff">生产类型</div>
                <div style="color:#fff">生产数量</div>
                <div style="color:#fff">完成进度</div>
                <div :style="{color:colorX}">生产类型</div>
                <div :style="{color:colorX}">生产数量</div>
                <div :style="{color:colorX}">完成进度</div>
              </div>
              <div>
                <div class="kb_flex_space_between">
@@ -59,25 +59,25 @@
            </div>
            <div class="ckgl kb_block horn kb_flex_column">
              <div style="height: 60px" class="kb_flex_space_between">
                <div style="width: 50%;">
                <div style="width: 188px">
                  <div class="middle_title">
                    <div class="icon">
                      <svg-icon icon-class="zncc" class="svg_class" />
                    </div>
                    <div style="margin-left: 30px;">
                      <div>8000吨</div>
                      <div style="color:#fff;">昨日入库数量</div>
                      <div :style="{color:colorX}">昨日入库数量</div>
                    </div>
                  </div>
                </div>
                <div style="width: 50%;">
                <div style="width: 324px">
                  <div class="middle_title">
                    <div class="icon">
                      <svg-icon icon-class="zncc" class="svg_class" />
                    </div>
                    <div style="margin-left: 30px;">
                      <div>10000吨</div>
                      <div style="color:#fff;">昨日出库数量</div>
                      <div :style="{color:colorX}">昨日出库数量</div>
                    </div>
                  </div>
                </div>
@@ -85,21 +85,23 @@
              </div>
              <div style="height: 190px;position: relative" class="kb_flex_space_between">
                <div id="zhkb12" style="width: 190px;padding: 0;" class="kb_block" />
                <div style="position: absolute;bottom: 40px;left: 55px;width: 100px;height: 30px;color: #fff">入库及时率
                <div style="position: absolute;bottom: 40px;left: 55px;width: 100px;height: 30px;color: #c7e7ff">入库及时率
                </div>

                <div style="width: 320px;margin-left: 10px;align-items: center" class="kb_block kb_flex_space_between">
                  <div class="kb_flex_column" style="position: relative">
                <div
                  style="width: 320px;margin-left: 10px;align-items: center;padding: 10px 20px"
                  class="kb_block kb_flex_space_between"
                >
                  <div class="kb_flex_column" style="position: relative;margin-top: -5px;">
                    <div style="position: absolute;left: 42px;top: 20px">0.01%</div>
                    <div class="box03" />
                    <div style="text-align: center">退货率</div>
                    <div style="text-align: center;margin-top: 5px;">退货率</div>
                  </div>
                  <div class="kb_flex_column" style="position: relative">
                  <div class="kb_flex_column" style="position: relative;margin-top: -5px;">
                    <div style="position: absolute;left: 42px;top: 20px">0.02%</div>
                    <div class="box03" />
                    <div style="text-align: center">损坏率</div>
                    <div style="text-align: center;margin-top: 5px;">损坏率</div>
                  </div>

                </div>
              </div>
              <div style="height: 280px;position: relative" class="kb_flex_column">
@@ -203,7 +205,6 @@
import {
  loadEcharts,
  zhkb01,
  zhkb02,
  zhkb03,
  zhkb04,
  zhkb05,
@@ -211,7 +212,7 @@
  zhkb07,
  zhkb08,
  zhkb09,
  zhkb10, zhkb11, zhkb12
  zhkb10, zhkb11
} from '@/utils/myEcharts'

import '@/utils/echarts-liquidfill.min.js'
@@ -235,49 +236,311 @@
    this.getAllEcharts()

    this.getzhkb02()
    // setInterval(() => {
    //   this.getzhkb02()
    // }, 10000)
    setInterval(() => {
      this.getzhkb02()
    }, 1000 * 16)

    this.getzhkb12()
    setInterval(() => {
      this.getzhkb12()
    }, 1000 * 11)

    this.getzhkb13()
    setInterval(() => {
      this.getzhkb13()
    }, 1000 * 19)

    // this.getzhkb11()
  },
  methods: {
    // 测试自动播放tooltip
    getzhkb11() {
      const option = {
        backgroundColor: 'transparent',
        // title: {
        //   text: '时段-进出港流量',
        //   left: '5%',
        //   top: '5%',
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: '18px'
        //   }
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: [
          {
            icon: 'react',
            right: '0%',
            top: '0%',
            textStyle: {
              color: '#fff',
              fontSize: 14
            },
            itemGap: 30,
            itemWidth: 30,
            itemHeight: 4,
            data: ['设备利用率', '设备开机率']
          }
        ],
        grid: {
          top: '10%',
          right: '5%',
          left: '1%',
          bottom: '0%',
          containLabel: true
        },
        yAxis: [
          {
            type: 'category',
            data: ['冷镦车间', '热墩车间', '达克罗车间', '磷化车间', '注塑车间'],
            axisLine: {
              lineStyle: {
                color: '#4E84AC'
                // width: 2
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              // margin: 10,
              color: '#09d8f2',
              textStyle: {
                fontSize: 16
              }
            }
          }
        ],
        xAxis: [
          {
            axisLabel: {
              formatter: '{value}',
              color: '#6895CA',
              textStyle: {
                fontSize: 16,
                color: this.colorX
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: '#4E84AC'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                // 使用深浅的间隔色
                color: '#184D9A'
              }
            }
          }
        ],
        series: [
          {
            name: '设备利用率',
            type: 'bar',
            barGap: '70%',
            data: [Math.ceil(30 + Math.random() * 20), Math.ceil(75 - Math.random() * 20), Math.ceil(77 - Math.random() * 20), Math.ceil(39 + Math.random() * 20), Math.ceil(85 - Math.random() * 20)],
            barWidth: 12,
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#00FFFF' //  0%  处的颜色
                    },
                    {
                      offset: 1,
                      color: '#00FF00' //  100%  处的颜色
                    }
                  ],
                  global: false //  缺省为  false
                },
                barBorderRadius: [30, 30, 30, 30],
                shadowColor: 'rgba(0,160,221,1)',
                shadowBlur: 4
              }
            },
            label: {
              normal: {
                show: true,
                // lineHeight: 20,
                // width: 80,
                // height: 20,
                verticalAlign: 'center',
                borderRadius: 200,
                position: 'right',
                color: '#00FF00',
                fontSize: 16
              }
            }
          },
          {
            name: '设备开机率',
            type: 'bar',
            data: [Math.ceil(90 - Math.random() * 20), 45 + Math.ceil(Math.random() * 20), Math.ceil(27 + Math.random() * 20), Math.ceil(20 + Math.random() * 60), Math.ceil(85 - Math.random() * 20)],
            barWidth: 12,
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#00FFFF' //  0%  处的颜色
                    },
                    {
                      offset: 1,
                      color: '#FFFF00' //  100%  处的颜色
                    }
                  ],
                  global: false //  缺省为  false
                },
                barBorderRadius: [30, 30, 30, 30],
                shadowColor: 'rgba(0,160,221,1)',
                shadowBlur: 4
              }
            },
            label: {
              normal: {
                show: true,
                // lineHeight: 20,
                // width: 80,
                // height: 20,
                borderRadius: 200,
                verticalAlign: 'center',
                // position: ['-0', '-20'],
                position: 'right',
                color: '#FFFF00',
                fontSize: 16
              }
            }
          }
        ]
      }

      const myChart = echarts.init(document.getElementById('zhkb11'))

      if (option.textStyle == null) {
        option.textStyle = {
          fontFamily: 'Microsoft YaHei',
          color: '#ffffff'
        }
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.clear()
      myChart.setOption(option, true)

      window.addEventListener('resize', function() {
        myChart.resize()
      })

      let index = 0
      setInterval(function() {
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: index
        })
        index++
        if (index > 4) {
          index = 0
        }
      }, 2000)
    },
    getAllEcharts() {
      loadEcharts('zhkb01', zhkb01())
      loadEcharts('zhkb03', zhkb03())
      loadEcharts('zhkb03_2', zhkb03())
      loadEcharts('zhkb03', zhkb03('螺母投入产出率'))
      loadEcharts('zhkb03_2', zhkb03('螺杆投入产出率'))
      loadEcharts('zhkb04', zhkb04())
      loadEcharts('zhkb05', zhkb05())
      loadEcharts('zhkb06', zhkb06())
      loadEcharts('zhkb06_2', zhkb06())
      loadEcharts('zhkb07_1', zhkb07())
      loadEcharts('zhkb07_2', zhkb07())
      loadEcharts('zhkb07_3', zhkb07())
      loadEcharts('zhkb07_4', zhkb07())
      loadEcharts('zhkb07_5', zhkb07())
      loadEcharts('zhkb07_6', zhkb07())
      loadEcharts('zhkb06', zhkb06('检验及时率'))
      loadEcharts('zhkb06_2', zhkb06('成品合格率'))
      loadEcharts('zhkb07_1', zhkb07('钢材故障', 96))
      loadEcharts('zhkb07_2', zhkb07('冷镦', 96))
      loadEcharts('zhkb07_3', zhkb07('热墩', 96))
      loadEcharts('zhkb07_4', zhkb07('热处理', 95))
      loadEcharts('zhkb07_5', zhkb07('达克罗', 95))
      loadEcharts('zhkb07_6', zhkb07('镀锌', 95))
      loadEcharts('zhkb08', zhkb08())
      loadEcharts('zhkb09', zhkb09())
      loadEcharts('zhkb10', zhkb10())
      loadEcharts('zhkb11', zhkb11())

      setInterval(() => {
        loadEcharts('zhkb01', zhkb01())
      }, 1000 * 10)
      setInterval(() => {
        loadEcharts('zhkb03', zhkb03('螺母投入产出率'))
        loadEcharts('zhkb03_2', zhkb03('螺杆投入产出率'))
      }, 1000 * 12)
      setInterval(() => {
        loadEcharts('zhkb04', zhkb04())
      }, 1000 * 14)
      setInterval(() => {
        loadEcharts('zhkb05', zhkb05())
      }, 1000 * 16)
      setInterval(() => {
        loadEcharts('zhkb06', zhkb06('检验及时率'))
        loadEcharts('zhkb06_2', zhkb06('成品合格率'))
      }, 1000 * 18)
      // setInterval(() => {
      //   loadEcharts('zhkb07_1', zhkb07())
      //   loadEcharts('zhkb07_2', zhkb07())
      //   loadEcharts('zhkb07_3', zhkb07())
      //   loadEcharts('zhkb07_4', zhkb07())
      //   loadEcharts('zhkb07_5', zhkb07())
      //   loadEcharts('zhkb07_6', zhkb07())
      // }, 1000 * 5)
      setInterval(() => {
        loadEcharts('zhkb08', zhkb08())
      }, 1000 * 20)
      setInterval(() => {
        loadEcharts('zhkb09', zhkb09())
      }, 1000 * 22)
      setInterval(() => {
        loadEcharts('zhkb10', zhkb10())
      }, 1000 * 24)
      setInterval(() => {
        loadEcharts('zhkb11', zhkb11())
      }, 1000 * 26)
    },
    getzhkb13() {
      const colorList = ['#47A2FF ', '#53C8D1', '#59CB74', '#FBD444', '#7F6AAD', '#585247', '#00FFFF', '#ff00ff', '#00ff00', '#ffff00', '#ff0000', '#0000ff']
      const data = [
        { name: '产品1', value: 100 },
        { name: '产品2', value: 200 },
        { name: '产品3', value: 300 },
        { name: '产品4', value: 400 },
        { name: '产品5', value: 500 },
        { name: '产品6', value: 550 },
        { name: '产品7', value: 570 },
        { name: '产品8', value: 570 },
        { name: '产品9', value: 570 },
        { name: '产品10', value: 570 },
        { name: '产品11', value: 570 },
        { name: '产品12', value: 570 }
        { name: 'LB01   100', value: 100 },
        { name: 'LB02   200', value: 200 },
        { name: 'LB03   300', value: 300 },
        { name: 'LB04   400', value: 400 },
        { name: 'LB05   500', value: 500 },
        { name: 'LB06   550', value: 550 },
        { name: 'LB07   570', value: 570 },
        { name: 'LB08   570', value: 570 },
        { name: 'LB09   570', value: 570 },
        { name: 'LB10   570', value: 570 },
        { name: 'LB11   570', value: 570 },
        { name: 'LB12   570', value: 570 }
      ]
      const option = {
        backgroundColor: 'transparent',
@@ -289,7 +552,7 @@
          containLabel: true
        },
        title: {
          text: '38%',
          text: 80 + Math.ceil(Math.random() * 10) + '%',
          // subtext: '3',
          textStyle: {
            fontSize: 26,
@@ -313,7 +576,7 @@
          left: '4%',
          top: '20%',
          itemGap: 20,
          // selectedMode: false,
          selectedMode: false,
          // icon: 'pin',
          icon: 'roundRect',
          data: data.map(r => r.name),
@@ -343,6 +606,7 @@
          {
            // name: 'title',
            type: 'pie',
            silent: true,
            radius: [60, 90],
            center: ['75%', '60%'],
            label: {
@@ -376,61 +640,62 @@
        myChart.resize()
      })

      var index = 0 // 播放所在下标
      var mTime = setInterval(function() {
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: index
        })
        index++
        if (index > data.length - 1) {
          index = 0
        }
      }, 2000)
      // var index = 0 // 播放所在下标
      // var mTime = setInterval(function() {
      //   myChart.dispatchAction({
      //     type: 'showTip',
      //     seriesIndex: 0,
      //     dataIndex: index
      //   })
      //   index++
      //   if (index > data.length - 1) {
      //     index = 0
      //   }
      // }, 2000)

      var currentIndex = -1 // 当前高亮图形在饼图数据中的下标
      var changePieInterval = setInterval(selectPie, 2000) // 设置自动切换高亮图形的定时器

      function highlightPie() { // 取消所有高亮并高亮当前图形
        // 遍历饼图数据，取消所有图形的高亮效果
        option.series[0].data.forEach((item, index) => {
          myChart.dispatchAction({
            type: 'downplay',
            // type: 'showTip',
            seriesIndex: 0,
            dataIndex: index
          })
        })

        // // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
      }

      myChart.on('mouseover', (params) => { // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
        clearInterval(changePieInterval)
        currentIndex = params.dataIndex
        highlightPie()
      })

      myChart.on('mouseout', (params) => { // 用户鼠标移出时，重新开始自动切换
        if (changePieInterval) {
          clearInterval(changePieInterval)
        }
        changePieInterval = setInterval(selectPie, 1000)
      })

      function selectPie() { // 高亮效果切换到下一个图形
        var dataLen = option.series[0].data.length
        currentIndex = (currentIndex + 1) % dataLen
        highlightPie()
      }
      // var currentIndex = -1 // 当前高亮图形在饼图数据中的下标
      // var changePieInterval = setInterval(selectPie, 2000) // 设置自动切换高亮图形的定时器
      //
      // function highlightPie() { // 取消所有高亮并高亮当前图形
      //   // 遍历饼图数据，取消所有图形的高亮效果
      //   option.series[0].data.forEach((item, index) => {
      //     myChart.dispatchAction({
      //       type: 'downplay',
      //       // type: 'showTip',
      //       seriesIndex: 0,
      //       dataIndex: index
      //     })
      //   })
      //
      //   // // 高亮当前图形
      //   myChart.dispatchAction({
      //     type: 'highlight',
      //     seriesIndex: 0,
      //     dataIndex: currentIndex
      //   })
      // }
      //
      // myChart.on('mouseover', (params) => { // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
      //   clearInterval(changePieInterval)
      //   currentIndex = params.dataIndex
      //   highlightPie()
      // })
      //
      // myChart.on('mouseout', (params) => { // 用户鼠标移出时，重新开始自动切换
      //   if (changePieInterval) {
      //     clearInterval(changePieInterval)
      //   }
      //   changePieInterval = setInterval(selectPie, 1000)
      // })
      //
      // function selectPie() { // 高亮效果切换到下一个图形
      //   var dataLen = option.series[0].data.length
      //   currentIndex = (currentIndex + 1) % dataLen
      //   highlightPie()
      // }
    },
    getzhkb12() {
      const value1 = Math.ceil(Math.random() * 10 + 60)
      const option = {
        backgroundColor: 'transparent',
        grid: {
@@ -441,11 +706,11 @@
          containLabel: true
        },
        title: {
          text: '85%',
          text: value1 + '%',
          x: '36%',
          y: '40%',
          textStyle: {
            color: '#fff',
            color: this.colorX,
            fontSize: 26
          }
        },
@@ -454,7 +719,7 @@
            type: 'liquidFill',
            radius: '80%',
            // data: [0.6],
            data: [0.6, 0.4, 0.2],
            data: [value1 / 100, 0.4, 0.2],
            backgroundStyle: {
              color: {
                type: 'radial',
@@ -753,19 +1018,24 @@
    },

    getzhkb02() {
      let a, b, c, d
      a = Math.ceil(Math.random() * 10 + 20)
      b = Math.ceil(Math.random() * 10 + 20)
      c = Math.ceil(Math.random() * 10 + 20)
      d = 100 - a - b - c
      const data = [
        {
          'name': '生产已排满',
          'value': 40
          'value': a
        }, {
          'name': '物料不足',
          'value': 10
          'value': b
        }, {
          'name': '插班',
          'value': 20
          'value': c
        }, {
          'name': '其它',
          'value': 30
          'value': d
        }]

      const colorArr = ['#00FFFF', '#FFFF00', '#00FF00', '#FF00FF']
@@ -786,7 +1056,7 @@
          //   color: ['#ff9d19']
          // },
          x: 'center',
          y: '-2%'
          y: '2%'
        },
        grid: {
          left: '0%',
@@ -797,8 +1067,9 @@
        },
        legend: {
          orient: 'vertical',
          top: 'middle',
          top: '30%',
          left: '5%',
          selectedMode: false,
          textStyle: {
            color: colorArr.map(r => r),
            fontSize: 16
@@ -809,10 +1080,12 @@
        series: [
          // 主要展示层的
          {

            left: 150,
            radius: ['40%', '61%'],
            center: ['50%', '50%'],
            center: ['50%', '60%'],
            type: 'pie',
            silent: true,
            label: {
              normal: {
                show: true,
@@ -840,7 +1113,7 @@
              normal: {
                show: true,
                length: 30,
                length2: 55
                length2: 30
              },
              emphasis: {
                show: true
@@ -854,8 +1127,9 @@
          {
            left: 150,
            radius: ['30%', '34%'],
            center: ['50%', '50%'],
            center: ['50%', '60%'],
            type: 'pie',
            silent: true,
            label: {
              normal: {
                show: false
@@ -883,13 +1157,15 @@
                color: '#09d8f2'
              }
            }]
          }, {
          },
          {
            left: 150,
            name: '外边框',
            type: 'pie',
            silent: true,
            clockWise: false, // 顺时加载
            hoverAnimation: false, // 鼠标移入变大
            center: ['50%', '50%'],
            center: ['50%', '60%'],
            radius: ['65%', '65%'],
            label: {
              normal: {
@@ -927,53 +1203,53 @@
        myChart.resize()
      })

      let currentIndex = -1 // 当前高亮图形在饼图数据中的下标
      let changePieInterval = setInterval(selectPie, 2000) // 设置自动切换高亮图形的定时器

      function highlightPie() { // 取消所有高亮并高亮当前图形
        // for (var idx in option.series[0].data) {
        //   // 遍历饼图数据，取消所有图形的高亮效果
        //   myChart.dispatchAction({
        //     type: 'downplay',
        //     seriesIndex: 0,
        //     dataIndex: idx
        //   })
        // }
        // 遍历饼图数据，取消所有图形的高亮效果
        option.series[0].data.forEach((item, index) => {
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: index
          })
        })

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
      }

      myChart.on('mouseover', (params) => { // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
        clearInterval(changePieInterval)
        currentIndex = params.dataIndex
        highlightPie()
      })

      myChart.on('mouseout', (params) => { // 用户鼠标移出时，重新开始自动切换
        if (changePieInterval) {
          clearInterval(changePieInterval)
        }
        changePieInterval = setInterval(selectPie, 1000)
      })

      function selectPie() { // 高亮效果切换到下一个图形
        var dataLen = option.series[0].data.length
        currentIndex = (currentIndex + 1) % dataLen
        highlightPie()
      }
      // let currentIndex = -1 // 当前高亮图形在饼图数据中的下标
      // var changePieInterval = setInterval(selectPie, 2000) // 设置自动切换高亮图形的定时器
      //
      // function highlightPie() { // 取消所有高亮并高亮当前图形
      //   // for (var idx in option.series[0].data) {
      //   //   // 遍历饼图数据，取消所有图形的高亮效果
      //   //   myChart.dispatchAction({
      //   //     type: 'downplay',
      //   //     seriesIndex: 0,
      //   //     dataIndex: idx
      //   //   })
      //   // }
      //   // 遍历饼图数据，取消所有图形的高亮效果
      //   option.series[0].data.forEach((item, index) => {
      //     myChart.dispatchAction({
      //       type: 'downplay',
      //       seriesIndex: 0,
      //       dataIndex: index
      //     })
      //   })
      //
      //   // 高亮当前图形
      //   myChart.dispatchAction({
      //     type: 'highlight',
      //     seriesIndex: 0,
      //     dataIndex: currentIndex
      //   })
      // }
      //
      // myChart.on('mouseover', (params) => { // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
      //   clearInterval(changePieInterval)
      //   currentIndex = params.dataIndex
      //   highlightPie()
      // })
      //
      // myChart.on('mouseout', (params) => { // 用户鼠标移出时，重新开始自动切换
      //   if (changePieInterval) {
      //     clearInterval(changePieInterval)
      //   }
      //   changePieInterval = setInterval(selectPie, 1000)
      // })
      //
      // function selectPie() { // 高亮效果切换到下一个图形
      //   var dataLen = option.series[0].data.length
      //   currentIndex = (currentIndex + 1) % dataLen
      //   highlightPie()
      // }

      // return myChart
    }
@@ -994,7 +1270,8 @@
  flex-direction: column;
  //color: #09d8f2;
  color: $color01;
  //background-color: 'transparent';
  //background: repeating-radial-gradient(circle, #000000, #444444 100%, #666666 100%);

}

.kb_background {
@@ -1003,8 +1280,9 @@
  width: 1920px;
  height: 887px;
  background: url('../../assets/images/body.jpg') no-repeat;
  z-index: -1;
  //opacity: 0.9;
  //z-index: -1;
  //opacity: 0.4;
  filter: brightness(50%);
}

.kb_background2 {
@@ -1013,8 +1291,9 @@
  width: 1920px;
  height: 887px;
  background: url('../../assets/images/body.jpg') no-repeat;
  z-index: -1;
  //opacity: 0.9;
  filter: brightness(50%);
  //z-index: -1;
  //opacity: 0.4;
}

.kb_flex {
@@ -1058,6 +1337,7 @@
  display: flex;
  //padding: 20px;
  padding: 0 20px 20px 20px;
  z-index: 2;
}

.kb_content_left {