1.金华智研院看板 30%

小小儁爺

2024-07-01 f9537176ce96bfc13a7d6e26bb6f2ec17def9bfb

1.金华智研院看板   30%

 package.json

@@ -14,6 +14,7 @@
    "test:ci": "npm run lint && npm run test:unit"
  },
  "dependencies": {
    "@jiaminghi/data-view": "^2.10.0",
    "axios": "0.18.1",
    "core-js": "3.6.5",
    "echarts-liquidfill": "^3.1.0",

 src/assets/images/pic01.png

 src/main.js

@@ -33,6 +33,10 @@
// å¦‚果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

// å°†è‡ªåŠ¨æ³¨å†Œæ‰€æœ‰ç»„件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

Vue.config.productionTip = false

new Vue({

 src/permission.js

@@ -8,7 +8,7 @@

NProgress.configure({ showSpinner: false }) // NProgress Configuration

const whiteList = ['/login', '/kb', '/zhkb'] // no redirect whitelist
const whiteList = ['/login', '/kb', '/zhkb', '/xkd'] // no redirect whitelist

router.beforeEach(async(to, from, next) => {
  // start progress bar

 src/router/index.js

@@ -42,6 +42,11 @@
    hidden: true
  },
  {
    path: '/xkd',
    component: () => import('@/views/kb/xkd'),
    hidden: true
  },
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true

 src/utils/myEcharts.js

@@ -3731,3 +3731,773 @@
export function zhkb12() {

}

export function echart01() {
  return {
    // title: {
    //   text: '2019年销售水量和主营业务收入对比',
    //   textStyle: {
    //     align: 'center',
    //     color: '#fff',
    //     fontSize: 20
    //   },
    //   top: '3%',
    //   left: '10%'
    // },
    backgroundColor: 'transparent',
    grid: {
      left: '5%',
      right: '5%',
      bottom: '5%',
      top: '30%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        label: {
          show: true
        }
      }
    },
    legend: {
      data: ['成本', '效益'],
      top: '15%',
      textStyle: {
        color: '#ffffff'
      }
    },
    xAxis: [
      {
        type: 'category',
        data: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'],
        axisTick: {
          alignWithLabel: true
        },
        nameTextStyle: {
          color: '#82b0ec'
        },
        axisLine: {
          lineStyle: {
            color: '#82b0ec'
          }
        },
        axisLabel: {
          // margin: 5,
          textStyle: {
            // color: '#82b0ec'
            color: colorX,
            fontSize: 10
          }
        }
      }
    ],
    yAxis: [
      // {
      //   type: 'value',
      //   name: '亿元',
      //   nameTextStyle: {
      //     color: '#ebf8ac'
      //   },
      //   splitLine: {
      //     show: false
      //   },
      //   axisTick: {
      //     show: true
      //   },
      //   axisLine: {
      //     show: true,
      //     lineStyle: {
      //       color: '#FFFFFF'
      //     }
      //   },
      //   axisLabel: {
      //     show: true,
      //     textStyle: {
      //       color: '#ebf8ac'
      //     }
      //   }
      //
      // },

      {
        type: 'value',
        gridIndex: 0,
        min: 0,
        max: 100,
        splitNumber: 8,
        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
          }
        }
      },
      {
        type: 'value',
        name: '',
        nameTextStyle: {
          color: '#ebf8ac'
        },
        position: 'left',
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          formatter: '{value} %', // å³ä¾§Y轴文字显示
          textStyle: {
            color: colorX
          }
        }
      }
    ],
    series: [
      {
        name: '成本',
        type: 'line',
        yAxisIndex: 1, // ä½¿ç”¨çš„ y è½´çš„ index，在单个图表实例中存在多个 y轴的时候有用
        smooth: true, // å¹³æ»‘曲线显示
        showAllSymbol: true, // æ˜¾ç¤ºæ‰€æœ‰å›¾å½¢ã€‚
        // symbol: 'circle', // æ ‡è®°çš„图形为实心圆
        symbolSize: 5, // æ ‡è®°çš„大小
        itemStyle: {
          // æŠ˜çº¿æ‹ç‚¹æ ‡å¿—的样式
          color: '#058cff'
        },
        lineStyle: {
          color: '#058cff'
        },
        areaStyle: {
          color: 'rgba(5,140,255, 0.2)'
        },
        // data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5, 2.9, 2.8, 3, 5]

        data: [100, 98, 99, 100, 100, 99, 98, 96, 97, 100, 100, 99]
      },
      {
        name: '效益',
        type: 'bar',
        barWidth: 15,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#00FFE3'
            },
            {
              offset: 1,
              color: '#4693EC'
            }
            ])
          }
        },
        data: [28, 60, 30, 35, 27, 28, 33, 50, 29, 28, 36, 5]
        // data: [100, 98, 99, 100, 100, 99, 98, 96, 97, 100, 100, 99]

      }
    ]
  }
}

export function echart02() {
  var img = 'data:image/png;base64,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'

  var trafficWay = [
    {
      name: '压印',
      value: 20
    }, {
      name: '孔小',
      value: 10
    }, {
      name: '变形',
      value: 30
    }, {
      name: '划伤',
      value: 20
    }, {
      name: '披锋',
      value: 20
    }]

  var data = []
  var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
  for (var i = 0; i < trafficWay.length; i++) {
    data.push({
      value: trafficWay[i].value,
      name: trafficWay[i].name,
      itemStyle: {
        normal: {
          borderWidth: 5,
          shadowBlur: 20,
          borderColor: color[i],
          shadowColor: color[i]
        }
      }
    }, {
      value: 2,
      name: '',
      itemStyle: {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0
        }
      }
    })
  }
  var seriesOption = [{
    name: '',
    type: 'pie',
    clockWise: false,
    radius: [60, 66],
    hoverAnimation: false,
    itemStyle: {
      normal: {
        label: {
          show: true,
          position: 'outside',
          color: '#ddd',
          formatter: function(params) {
            var percent = 0
            var total = 0
            for (var i = 0; i < trafficWay.length; i++) {
              total += trafficWay[i].value
            }
            percent = ((params.value / total) * 100).toFixed(0)
            if (params.name !== '') {
              // return '缺陷名称：' + params.name + '\n' + '\n' + '占百分比：' + percent + '%'
              return params.name + ' ' + percent + '%'
            } else {
              return ''
            }
          }
        },
        labelLine: {
          length: 10,
          length2: 30,
          show: true,
          color: '#00ffff'
        }
      }
    },
    data: data
  }]
  const option = {
    backgroundColor: 'transparent',
    color: color,
    title: {
      text: '',
      top: '48%',
      textAlign: 'center',
      left: '49%',
      textStyle: {
        color: '#fff',
        fontSize: 22,
        fontWeight: '400'
      }
    },
    graphic: {
      elements: [{
        type: 'image',
        z: 3,
        style: {
          image: img,
          width: 88,
          height: 88
        },
        left: 'center',
        top: 'center',
        position: [100, 100]
      }]
    },
    tooltip: {
      show: false
    },
    // legend: {
    //   icon: 'circle',
    //   orient: 'horizontal',
    //   // x: 'left',
    //   data: ['压印', '孔小', '变形', '披锋'],
    //   right: 340,
    //   bottom: 150,
    //   align: 'right',
    //   textStyle: {
    //     color: '#fff'
    //   },
    //   itemGap: 20
    // },
    toolbox: {
      show: false
    },
    series: seriesOption
  }

  return option
}

export function echart03() {
  return {
    // title: {
    //   text: '2019年销售水量和主营业务收入对比',
    //   textStyle: {
    //     align: 'center',
    //     color: '#fff',
    //     fontSize: 20
    //   },
    //   top: '3%',
    //   left: '10%'
    // },
    backgroundColor: 'transparent',
    grid: {
      left: '5%',
      right: '5%',
      bottom: '5%',
      top: '20%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        label: {
          show: true
        }
      }
    },
    xAxis: [
      {
        type: 'category',
        data: ['压印', '孔小', '变形', '划伤', '披锋'],
        axisTick: {
          alignWithLabel: true
        },
        nameTextStyle: {
          color: '#82b0ec'
        },
        axisLine: {
          lineStyle: {
            color: '#82b0ec'
          }
        },
        axisLabel: {
          // margin: 5,
          textStyle: {
            // color: '#82b0ec'
            color: colorX,
            fontSize: 16
          }
        }
      }
    ],
    yAxis: [
      {
        boundaryGap: false,
        splitNumber: 4,
        type: 'value',
        // name: '%',
        nameTextStyle: {
          color: colorY,
          fontSize: 14,
          lineHeight: 20
        },
        axisLabel: {
          textStyle: {
            fontSize: 14,
            // color: '#7696c5'
            color: colorX
            // color: this.colorY
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#032c58'
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#032c58'
          }
        },
        axisTick: {
          show: true
        }
      }
    ],
    series: [
      {
        name: '数量',
        type: 'bar',
        barWidth: 25,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#00FFE3'
            },
            {
              offset: 1,
              color: '#4693EC'
            }
            ])
          }
        },
        data: [228, 260, 230, 235, 227, 228, 233]
        // data: [100, 98, 99, 100, 100, 99, 98, 96, 97, 100, 100, 99]

      }
    ]
  }
}

export function echart04() {
  const indicatorList = [{
    name: '人工智能图像识别'
  },
  {
    name: '开发者工具'
  },
  {
    name: '自动光学检测'
  },
  {
    name: '虚拟量测VM'
  },
  {
    name: '高频海量数据分析'
  }]
  const option = {
    backgroundColor: 'transparent',
    color: ['#0290ff', '#ffe533', '#ff4d4d', '#06f5bc'],
    tooltip: {
      show: false // å¼¹å±‚数据去掉
    },
    legend: {
      data: [
        {
          name: '使用率', icon: 'rect', itemStyle: {
            color: '#06f5bc', borderWidth: 0
          }
        },
        {
          name: '实际使用率', icon: 'rect', itemStyle: {
            color: '#0290ff', borderWidth: 0
          }
        }
      ],

      top: 30,
      show: true,
      y: '1',
      center: 0,
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 26,
      z: 3,
      // orient: 'horizontal',
      textStyle: {
        fontSize: 14,
        color: '#edf8ff'
      }
    },
    radar: {
      center: ['50%', '65%'], // å¤–圆的位置
      radius: '55%',
      name: {
        textStyle: {
          color: '#fff',
          fontSize: 14,
          fontWeight: 400,
          fontFamily: 'PingFangSC-Regular,PingFang SC',
          fontStyle: 'normal'
        }
      },
      // TODO:
      indicator: indicatorList,
      splitArea: {
        // åæ ‡è½´åœ¨ grid åŒºåŸŸä¸­çš„分隔区域，默认不显示。
        show: true,
        areaStyle: {
          // åˆ†éš”区域的样式设置。
          color: ['rgba(255,255,255,0)'] // åˆ†éš”区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
        }
      },
      axisLine: {
        // æŒ‡å‘外圈文本的分隔线样式
        lineStyle: {
          color: 'rgba(255,255,255,0)'
        }
      },
      splitLine: {
        lineStyle: {
          type: 'solid',
          color: '#0ac8ff', // åˆ†éš”线颜色
          width: 2 // åˆ†éš”线线宽
        }
      }
    },
    series: [
      {
        type: 'radar',
        data: [
          {
            value: [0, 0, 10, 30, 70],
            name: '使用率',
            areaStyle: {
              normal: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [{
                    offset: 0, color: '#00ffb4' // 0% å¤„的颜色
                  },
                  {
                    offset: 0.15, color: '#00ffb4' // 100% å¤„的颜色
                  },
                  {
                    offset: 0.75, color: '#00ffb4' // 100% å¤„的颜色
                  },
                  {
                    offset: 1, color: '#00ffb4' // 100% å¤„的颜色
                  }],
                  global: false // ç¼ºçœä¸º false
                }
              }
            },
            symbolSize: [6, 6],
            lineStyle: { // è¾¹ç¼˜é¢œè‰²
              //  width: 0
              color: 'rgba(13, 248, 172, 0.8)'
              // shadowBlur:8,
              // shadowColor:'#ff3838'
            },
            itemStyle: {
              color: '#fff',
              borderColor: '#00ffb4',
              borderWidth: 1,
              shadowBlur: 8,
              shadowColor: '#00ffb4'
            }
          },
          {
            value: [80, 80, 80, 70, 60],
            name: '实际使用率',
            areaStyle: {
              normal: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [{
                    offset: 0, color: 'rgba(0,194,255, 0.8)' // 0% å¤„的颜色
                  },
                  {
                    offset: 0.15, color: 'rgba(0,194,255, 0.8)' // 100% å¤„的颜色
                  },
                  {
                    offset: 0.75, color: 'rgba(0,194,255, 0.8)' // 100% å¤„的颜色
                  },
                  {
                    offset: 1, color: 'rgba(0,194,255, 0.8)' // 100% å¤„的颜色
                  }],
                  global: false // ç¼ºçœä¸º false
                }
              }
            },
            symbolSize: [6, 6],
            lineStyle: { // è¾¹ç¼˜é¢œè‰²
              //  width: 0
              color: 'rgba(0, 194, 255, 0.8)'
              // shadowBlur:8,
              // shadowColor:'#ff3838'
            },
            itemStyle: {
              color: '#fff',
              borderColor: '#00c8ff',
              borderWidth: 1,
              shadowBlur: 8,
              shadowColor: '#00c8ff'
            }
          }

        ]
      }
    ]
  }

  return option
}

export function echart05() {
  var img = 'data:image/png;base64,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'

  var trafficWay = [
    {
      name: '供应客户',
      value: 9
    }, {
      name: '现场管理者',
      value: 30
    }, {
      name: '工厂管理者',
      value: 25
    }, {
      name: '企业决策者',
      value: 23
    }, {
      name: '平台开发者',
      value: 14
    }]

  var data = []
  var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
  for (var i = 0; i < trafficWay.length; i++) {
    data.push({
      value: trafficWay[i].value,
      name: trafficWay[i].name,
      itemStyle: {
        normal: {
          borderWidth: 5,
          shadowBlur: 20,
          borderColor: color[i],
          shadowColor: color[i]
        }
      }
    }, {
      value: 2,
      name: '',
      itemStyle: {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0
        }
      }
    })
  }
  var seriesOption = [{
    name: '',
    type: 'pie',
    clockWise: false,
    radius: [60, 66],
    hoverAnimation: false,
    itemStyle: {
      normal: {
        label: {
          show: true,
          position: 'outside',
          color: '#ddd',
          formatter: function(params) {
            var percent = 0
            var total = 0
            for (var i = 0; i < trafficWay.length; i++) {
              total += trafficWay[i].value
            }
            percent = ((params.value / total) * 100).toFixed(0)
            if (params.name !== '') {
              // return '缺陷名称：' + params.name + '\n' + '\n' + '占百分比：' + percent + '%'
              return params.name + ' ' + percent + '%'
            } else {
              return ''
            }
          }
        },
        labelLine: {
          length: 10,
          length2: 30,
          show: true,
          color: '#00ffff'
        }
      }
    },
    data: data
  }]
  const option = {
    backgroundColor: 'transparent',
    color: color,
    title: {
      text: '',
      top: '48%',
      textAlign: 'center',
      left: '49%',
      textStyle: {
        color: '#fff',
        fontSize: 22,
        fontWeight: '400'
      }
    },
    graphic: {
      elements: [{
        type: 'image',
        z: 3,
        style: {
          image: img,
          width: 88,
          height: 88
        },
        left: 'center',
        top: 'center',
        position: [100, 100]
      }]
    },
    tooltip: {
      show: false
    },
    // legend: {
    //   icon: 'circle',
    //   orient: 'horizontal',
    //   // x: 'left',
    //   data: ['压印', '孔小', '变形', '披锋'],
    //   right: 340,
    //   bottom: 150,
    //   align: 'right',
    //   textStyle: {
    //     color: '#fff'
    //   },
    //   itemGap: 20
    // },
    toolbox: {
      show: false
    },
    series: seriesOption
  }

  return option
}

 src/views/kb/xkd.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,356 @@
<template>
  <div>

    <div class="kb_body">
      <div class="kb_background" />
      <div class="kb_background2" />
      <div class="kb_headerPic" />

      <div class="content">
        <div class="left content_block">
          <dv-border-box-12 class="block01 block">
            <div class="block_title">成本效益分析</div>
            <div id="echart01" style="width: 100%;height: 100%;" />
          </dv-border-box-12>
          <dv-border-box-12 class="block02 block">
            <div class="block_title">平台安全防护</div>
            <div id="zhkb12" style="width:160px;height:160px;margin-top:30px" />
            <div class="box03" />
            <div class="box03" />
            <div class="text2">累计拦截</div>
            <div class="text3">累计阻止</div>
            <div class="text4">874次</div>
            <div class="text5">874次</div>
          </dv-border-box-12>
          <dv-border-box-12 class="block02 block">
            <div class="block_title">自动缺陷分类系统</div>
            <div id="echart02" style="width: 100%;height: 100%;margin-top:20px" />
          </dv-border-box-12>
          <dv-border-box-12 class="block01 block">
            <div class="block_title">缺陷分类统计</div>
            <div id="echart03" style="width: 100%;height: 100%;" />
          </dv-border-box-12>

        </div>
        <div class="center content_block" />
        <div class="right content_block">
          <dv-border-box-12 class="block01 block">
            <div class="block_title">平台功能使用率</div>
            <div id="echart04" style="width: 100%;height: 100%;" />
          </dv-border-box-12>
          <dv-border-box-12 class="block02 block">
            <div class="block_title">用户类型</div>
            <div id="echart05" style="width: 100%;height: 100%;margin-top: 30px" />
          </dv-border-box-12>
          <dv-border-box-12 class="block02 block">
            <div class="block_title">成本效益分析</div>
            <div>内容区</div>
          </dv-border-box-12>
          <dv-border-box-12 class="block01 block">
            <div class="block_title">成本效益分析</div>
            <div>内容区</div>
          </dv-border-box-12>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts'
import '@/utils/world'
import { echart01, echart02, echart03, echart04, echart05, loadEcharts } from '@/utils/myEcharts'
import '@/utils/echarts-liquidfill.min.js'

export default {
  name: 'Index',
  data() {
    return {
      colorX: '#c7e7ff',
      colorY: '#7696c5'

    }
  },
  created() {
    setInterval(() => {
      location.reload()
    }, 1000 * 60 * 60 * 2)
  },
  mounted() {
    this.getEcharts()
  },
  methods: {
    getEcharts() {
      loadEcharts('echart01', echart01())
      this.getLiquidFill()
      loadEcharts('echart02', echart02())
      loadEcharts('echart03', echart03())
      loadEcharts('echart04', echart04())
      loadEcharts('echart05', echart05())
    },
    getLiquidFill() {
      const value1 = Math.ceil(Math.random() * 10 + 80)
      const option = {
        backgroundColor: 'transparent',
        grid: {
          left: '0%',
          right: '0%',
          bottom: '0%',
          top: '0%',
          containLabel: true
        },
        title: {
          text: value1 + '%',
          x: '33%',
          y: '40%',
          textStyle: {
            color: this.colorX,
            fontSize: 26
          }
        },
        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            // data: [0.6],
            // data: [value1 / 100, 0.4, 0.2],
            data: [0.6, 0.4, 0.2],
            backgroundStyle: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(0,24,55, 0)'
                  },
                  {
                    offset: 0.75,
                    color: 'rgba(0,24,55, 0)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(37,237,259, 1)'
                  }],
                globalCoord: false
              }
            },
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 0,
                borderColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(50,115,256, 1)'
                  }, {
                    offset: 0.5,
                    color: 'rgba(50,115,233, .75)'
                  }, {
                    offset: 1,
                    color: 'rgba(50,115,233, 1)'
                  }],
                  globalCoord: false
                }
              }
            },
            color: ['rgba(9,216,242, .8)', 'rgba(9,216,242, 0.6)', 'rgba(9,216,242, 0.4)'],
            // color: {
            // type: 'linear',
            // x: 0,
            // y: 0,
            // x2: 0,
            // y2: 1
            // colorStops: [{
            //   offset: 0,
            //   color: 'rgba(37,237,259, 1)'
            // }, {
            //   offset: 0.5,
            //   color: 'rgba(0,100,259, 0.5)'
            // }, {
            //   offset: 1,
            //   color: 'darkblue'
            // }
            // ]
            // globalCoord: false
            // },
            label: {
              normal: {
                formatter: ''
              }
            }
          }
        ]
      }
      const myChart = echarts.init(document.getElementById('zhkb12'))

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

      // ä½¿ç”¨åˆšæŒ‡å®šçš„配置项和数据显示图表。
      myChart.clear()
      myChart.setOption(option, true)

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

  }

}
</script>

<style lang="scss" scoped>
$kbBorderColor: rgba(9, 216, 242, 0.4);
.kb_body {
  width: 1920px;
  height: 1080px;
  background: #000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #09d8f2;
  justify-content: flex-start;

}

.kb_background {
  position: absolute;
  bottom: 0;
  width: 1920px;
  height: 887px;
  background: url('../../assets/images/body.jpg') no-repeat;
  opacity: 0.4;

}

.kb_background2 {
  position: absolute;
  top: 0;
  width: 1920px;
  height: 887px;
  background: url('../../assets/images/body.jpg') no-repeat;
  opacity: 0.4;
}

.kb_headerPic {
  //width: 1825px;
  height: 85px;
  background: url("../../assets/images/pic01.png") no-repeat;
  margin-left: 47.5px;
  z-index: 2;
}

.content {
  display: flex;
  justify-content: space-evenly;
}

.content_block {
  height: 995px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 5px;
}

.left {
  width: 460px;
}

.center {
  width: 1000px;

}

.right {
  width: 460px;
}

::v-deep .border-box-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.block {
  position: relative;
}

.block01 {
  width: 100%;
  height: 250px;
}

.block02 {
  width: 100%;
  height: 200px;
}

.block_title {
  background: linear-gradient(to right, #36a5cf, #000013);
  width: 200px;
  height: 20px;
  font-size: 16px;
  color: #fff;
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 2px 0 0 5px;
  border-radius: 3px;
  letter-spacing: 2px;
}

.box03 {
  width: 124px;
  height: 139px;
  background: url("../../assets/images/box03.png");
}

.text1{
  position: absolute;
  bottom: 10px;
  left: 72px;
}

.text2{
  position: absolute;
  bottom: 10px;
  left: 210px;
}

.text3{
  position: absolute;
  bottom: 10px;
  left: 336px;
}

.text4{
  position: absolute;
  top: 50px;
  left: 223px;
}

.text5{
  position: absolute;
  top: 50px;
  left: 346px;
}

</style>