<template>
  <div class="lizi1">
<!--    <vue-particles-->
<!--            color="rgb(0,0,0,0)"-->
<!--            :particleOpacity="0"-->
<!--            :particlesNumber="0"-->
<!--            shapeType="circle"-->
<!--            :particleSize="4"-->
<!--            linesColor="#fff"-->
<!--            :linesWidth="1"-->
<!--            :lineLinked="true"-->
<!--            :lineOpacity="0"-->
<!--            :linesDistance="150"-->
<!--            :moveSpeed="0"-->
<!--            :hoverEffect="false"-->
<!--            hoverMode="grab"-->
<!--            :clickEffect="false"-->
<!--            clickMode="push"-->
<!--            class="lizi1">-->
<!--    </vue-particles>-->
    <div style="background:rgba(0,0,0,0.2);filter:blur(10); width: 2890px ;height: 1060px;">
      <div style="margin:0 0.5% 0.5% 0.5%;padding-bottom:1%;width: 100%;">
        <el-row>
          <el-col :span="24">
            <div style="height: 60px">
              <el-col :span="9">
                <div style="font-size: 32px;color: white;height: 60px;border-bottom:2px solid rgb(30, 144, 255);border-left:2px solid rgb(30, 144, 255);">
                    <img src="../img/title.png" style="margin-top: 5px; margin-left: 20px">
                </div>
              </el-col>
              <el-col :span="6" >
                <div style="font-size: 32px;color: white;text-align: center;height: 60px;margin-top: 8px">
                  CNC/DNC数字孪生加工单元
                </div>
              </el-col>
              <el-col :span="9">
                <div style="font-size: 24px;font-weight: bold;color: rgb(0, 133, 202);text-align: center;height: 60px;border-bottom:2px solid rgb(30, 144, 255);border-right:2px solid rgb(30, 144, 255);">
                    <div style="width: 350px;  position: absolute; left: 1360px; top: 15px">
                        创新驱动&nbsp;&nbsp;&nbsp;质量制胜&nbsp;&nbsp;&nbsp;人才强企
                    </div>
                </div>
              </el-col>
              <div class="slopingsideright" style="position: absolute"></div>
              <div class="slopingsideleft" style="position: absolute"></div>
              <div class="slopingsidertop" style="position: absolute"></div>
              <div class="slopingsidebottom" style="position: absolute"></div>
              <div class="leftsiderright" style="position: absolute"></div>
              <div class="leftsidertop" style="position: absolute"></div>
              <div class="rightsiderleft" style="position: absolute"></div>
              <div class="rightsidertop" style="position: absolute"></div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-row style="width: 100%;height: 990px;margin-top:0px;text-align: center;color:rgb(0, 30, 116)">
<!--              <iframe frameborder=0 scrolling=no :src= src style="width: 100%;height:980px;filter:blur(10);z-index: 999;padding: 5px"></iframe>-->
            </el-row>
          </el-col>
        </el-row>
      </div>
      <div style=" position: absolute;left:850px; top:400px;">
        <el-collapse-transition>
          <div v-show = show3>
            <div style="background-color: rgba(220, 38, 38, 0.1); text-align: center;color: black;">动态效果演示</div>
          </div>
        </el-collapse-transition>
      </div>
      <div class="data-box1" style=" position: absolute;left:19px; top:92px;width: 360px;height: 310px;">
<!--          <span class="borderLeft1 boxborder"></span>-->
<!--          <span class="borderLeft2 boxborder"></span>-->
<!--          <span class="borderRight1 boxborder"></span>-->
<!--          <span class="borderRight2 boxborder"></span>-->
          <div style="width: 340px;margin-top: 50px; margin-left: 10px">
              <table cellspacing="0px" align="center" style="table-layout:fixed;border-color: white!important;color: white!important; border-collapse:collapse;"  border="1 solid black" width="100%">
                  <tr style="height: 40px">
                      <td colspan="30" rowspan="1" style="text-align: center;">订单号</td>
                      <td colspan="70" rowspan="1" style="text-align: center;">{{ orderNumber }}</td>
                  </tr>
                  <tr style="height: 40px">
                      <td colspan="30" rowspan="1" style="text-align: center;">计划数</td>
                      <td colspan="70" rowspan="1" style="text-align: center;">{{ plannedNumber }}</td>
                  </tr>
                  <tr style="height: 40px">
                      <td colspan="30" rowspan="1" style="text-align: center;">日产量</td>
                      <td colspan="70" rowspan="1" style="text-align: center;">{{ dailyOutput }}</td>
                  </tr>
                  <tr style="height: 40px">
                      <td colspan="60" rowspan="1" style="text-align: center;">计划节拍（s）</td>
                      <td colspan="40" rowspan="1" style="text-align: center;">{{plannedBeat}}</td>
                  </tr>
                  <tr style="height: 40px">
                      <td colspan="60" rowspan="1" style="text-align: center;">当前节拍（s）</td>
                      <td colspan="40" rowspan="1" style="text-align: center;">{{ currentBeat }}</td>
                  </tr>
              </table>
          </div>
      </div>
      <div class="data-box1" style=" position: absolute;left:19px; top:417px;width: 360px;height: 310px;">
<!--        <span class="borderLeft1 boxborder"></span>-->
<!--        <span class="borderLeft2 boxborder"></span>-->
<!--        <span class="borderRight1 boxborder"></span>-->
<!--        <span class="borderRight2 boxborder"></span>-->
        <div id="myChart20" style="height: 250px; width: 360px"/>
      </div>
      <div class="data-box1" style=" position: absolute;left:19px; top:742px;width: 360px;height: 310px;">
<!--        <span class="borderLeft1 boxborder"></span>-->
<!--        <span class="borderLeft2 boxborder"></span>-->
<!--        <span class="borderRight1 boxborder"></span>-->
<!--        <span class="borderRight2 boxborder"></span>-->
        <div id="myChart21" style="height: 100%; width: 100%"/>
      </div>
      <div class="data-box1" style=" position: absolute;left:1534px; top:92px;width: 360px;height: 310px;">
<!--        <span class="borderLeft1 boxborder"></span>-->
<!--        <span class="borderLeft2 boxborder"></span>-->
<!--        <span class="borderRight1 boxborder"></span>-->
<!--        <span class="borderRight2 boxborder"></span>-->
          <div style="width: 340px;margin-top: 12px; margin-left: 10px">
              <table cellspacing="0px" align="center" style="table-layout:fixed;border-color: white!important;color: white!important;border-collapse:collapse;" border="1 solid black" width="100%">
                  <tr style="height: 35px">
                      <td colspan="100" rowspan="1" style="text-align: center;">设备监控</td>
                  </tr>
                  <tr style="height: 35px">
                      <td colspan="30" rowspan="1" style="text-align: center;">开机时间</td>
                      <td colspan="20" rowspan="1" style="text-align: center;">{{ startupTime }}</td>
                      <td colspan="30" rowspan="1" style="text-align: center;">运行时间</td>
                      <td colspan="20" rowspan="1" style="text-align: center;">{{ runningTime }}</td>
                  </tr>
                  <tr style="height: 40px">
                      <td colspan="50" rowspan="1" style="text-align: center;">运行模式</td>
                      <td colspan="50" rowspan="1" style="text-align: center;">{{ operationMode }}</td>
                  </tr>
                  <tr style="height: 35px">
                      <td colspan="50" rowspan="1" style="text-align: center;">加工程序号</td>
                      <td colspan="50" rowspan="1" style="text-align: center;">{{processingProgramNumber}}</td>
                  </tr>
                  <tr style="height: 35px">
                      <td colspan="30" rowspan="1" style="text-align: center;">进给倍率</td>
                      <td colspan="20" rowspan="1" style="text-align: center;">{{ feedRate }}</td>
                      <td colspan="30" rowspan="1" style="text-align: center;">主轴倍率</td>
                      <td colspan="20" rowspan="1" style="text-align: center;">{{ spindleMagnification }}</td>
                  </tr>
                  <tr style="height: 35px">
                      <td colspan="30" rowspan="1" style="text-align: center;">进给速度</td>
                      <td colspan="20" rowspan="1" style="text-align: center;">{{ feedSpeed }}</td>
                      <td colspan="30" rowspan="1" style="text-align: center;">主轴转速</td>
                      <td colspan="20" rowspan="1" style="text-align: center;">{{spindleSpeed}}</td>
                  </tr>
                  <tr style="height: 35px">
                      <td colspan="50" rowspan="1" style="text-align: center;">刀具切削时间</td>
                      <td colspan="50" rowspan="1" style="text-align: center;">{{ cuttingToolTime }}min</td>
                  </tr>
                  <tr style="height: 35px">
                      <td colspan="100" rowspan="1" style="text-align: center;">{{ GCode }}</td>
                  </tr>
              </table>
          </div>
        <!--        <div id="myChart24" style="height: 100%; width: 100%"/>-->
      </div>
      <div class="data-box1" style=" position: absolute;left:3244px; top:497px;width: 360px;height: 310px;" @click="changeData()">
<!--        <span class="borderLeft1 boxborder"></span>-->
<!--        <span class="borderLeft2 boxborder"></span>-->
<!--        <span class="borderRight1 boxborder"></span>-->
<!--        <span class="borderRight2 boxborder"></span>-->
        <div id="myChart22" style="height: 100%; width: 100%"/>
      </div>
      <div class="data-box1" style=" position: absolute;left:1534px; top:742px;width: 360px;height: 310px;">
<!--        <span class="borderLeft1 boxborder"></span>-->
<!--        <span class="borderLeft2 boxborder"></span>-->
<!--        <span class="borderRight1 boxborder"></span>-->
<!--        <span class="borderRight2 boxborder"></span>-->
        <div id="myChart23" style="height: 100%; width: 100%"/>
      </div>
    </div>

  </div>
</template>

<script>
// import { src } from '../../public/aa.js'
// import $ from 'jquery'

export default {
  data() {
    return {
      // src: src,
      src: localStorage.getItem('twinAddress'),
      orderNumber: 20042085500453,
      plannedNumber: 1204,
      dailyOutput: 200,
      plannedBeat: 3215,
      currentBeat: 2043,
      show3: false, // 动态效果演示
      efficiency: [98.2, 95, 96.5], // 效率 稼动率 良品率
      date: new Date(),
      month: '',
      day: '',
      minute: '',
      hour: '',
      second: '',
      week: '',
      loading: false,
      tableData: [],
      brokenLine: 100,
      toolLife: [1.5, 0.3, 0.24, 0.18, 1.35, 1.47, 0.6],
      // CNC监控
      startupTime: '8:30',
      runningTime: '2:30',
      operationMode: '自动',
      processingProgramNumber: 'T1005',
      feedRate: 1,
      spindleMagnification: 1,
      feedSpeed: 150,
      spindleSpeed: 1500,
      cuttingToolTime: 100,
      GCode: 'G0,X0,Y0'
    }
  },
  created() {
  },
  mounted() {
    this.init()
    // const _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    // this.timer = setInterval(() => {
    //   _this.date = new Date() // 修改数据date
    //   this.month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
    //   this.day = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
    //   this.hour = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
    //   this.minute = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
    //   this.second = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
    //   this.week = '日一二三四五六'.charAt(new Date().getDay())
    // }, 1000)
  },
  methods: {
    init() {
      this.drawLine51()
      this.drawLine50()
      this.drawLine52()
      this.drawLine53()
      // console.log(src)
      // this.getSrc()
      // this.drawLine54()
    },
    // getSrc() {
    //     $.getJSON('../../public/config.json', function(data) {
    //         // window.twinAddress = data.twinAddress
    //         console.log(data, '李显');
    //         // localStorage.setItem('twinAddress', data.src)
    //         // console.log(localStorage.getItem('twinAddress'))
    //     })
    // },
    changeData() {
      setInterval(() => {
        if (this.brokenLine === 100) {
          this.brokenLine = 300
          this.toolLife = [0.5, 1.3, 1.24, 1.18, 0.35, 0.47, 1.5]
          this.drawLine52()
        } else if (this.brokenLine === 200) {
          this.brokenLine = 100
          this.toolLife = [1, 0.8, 0.74, 1.4, 0.95, 1.5, 0.1]
          this.drawLine52()
        } else {
          this.brokenLine = 200
          this.toolLife = [1.5, 0.3, 0.24, 0.18, 1.35, 1.47, 0.6]
          this.drawLine52()
        }
      }, 1000)
    },
    // drawLine54() {
    //   // 基于准备好的dom，初始化echarts实例
    //   const myChart20 = this.$echarts.init(document.getElementById('myChart24'))
    //   // 绘制图表
    //   myChart20.setOption({
    //     title: {
    //       text: '能耗',
    //       textStyle: {
    //         color: 'white'
    //       }
    //     },
    //     tooltip: {
    //       trigger: 'axis',
    //       axisPointer: {
    //         type: 'cross',
    //         label: {
    //           backgroundColor: '#6a7985'
    //         }
    //       }
    //     },
    //     legend: {
    //       data: ['设备一', '设备二', '设备三']
    //     },
    //     toolbox: {
    //       feature: {
    //         saveAsImage: {}
    //       }
    //     },
    //     grid: {
    //       left: '3%',
    //       right: '4%',
    //       bottom: '3%',
    //       containLabel: true
    //     },
    //     xAxis: [
    //       {
    //         type: 'category',
    //         boundaryGap: false,
    //         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    //         axisLabel: {
    //           textStyle: {
    //             color: 'white'
    //           }
    //         }
    //       }
    //     ],
    //     yAxis: [
    //       {
    //         type: 'value',
    //         axisLabel: {
    //           textStyle: {
    //             color: 'white'
    //           }
    //         }
    //       }
    //     ],
    //     series: [
    //       {
    //         name: 'Video Ads',
    //         type: 'line',
    //         stack: 'Total',
    //         areaStyle: {},
    //         emphasis: {
    //           focus: 'series'
    //         },
    //         data: [150, 232, 201, 154, 190, 330, 410]
    //       },
    //       {
    //         name: 'Direct',
    //         type: 'line',
    //         stack: 'Total',
    //         areaStyle: {},
    //         emphasis: {
    //           focus: 'series'
    //         },
    //         data: [320, 332, 301, 334, 390, 330, 320]
    //       },
    //       {
    //         name: 'Search Engine',
    //         type: 'line',
    //         stack: 'Total',
    //         label: {
    //           show: true,
    //           position: 'top'
    //         },
    //         areaStyle: {},
    //         emphasis: {
    //           focus: 'series'
    //         },
    //         data: [820, 932, 901, 934, 1290, 1330, 1320]
    //       }
    //     ]
    //   })
    // },
    drawLine53() {
      // 基于准备好的dom，初始化echarts实例
      const myChart20 = this.$echarts.init(document.getElementById('myChart23'))
      // 绘制图表
      myChart20.setOption({
        title: {
          text: '智能预测性维护',
          textStyle: {
            color: 'white'
          },
          top: '6%',
          left: '6%'
        },
        // legend: {},
        tooltip: {},
        dataset: {
          source: [
            ['主轴', 43.3, 85.8, 93.7],
            ['刀具', 83.1, 73.4, 55.1],
            ['转盘', 86.4, 65.2, 82.5],
            ['摇臂', 72.4, 53.9, 39.1]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            textStyle: {
              color: 'white'
            }
          }
        },
        yAxis: {
          axisLabel: {
            textStyle: {
              color: 'white'
            }
          }
        },
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
      })
    },
    drawLine52() {
      // 基于准备好的dom，初始化echarts实例
      const myChart22 = this.$echarts.init(document.getElementById('myChart22'))
      // 绘制图表
      myChart22.setOption({
        title: {
          text: '刀具寿命监控 (实时扭矩曲线)',
          textStyle: {
            color: 'white'
          },
          top: '6%',
          left: '6%'
        },
        xAxis: {
          type: 'category',
          data: ['9:00', '9:30', '10:00', '10:30', '11:00', '11:30', '12:00'],
          axisLabel: {
            textStyle: {
              color: 'white'
            }
          }
        },
        yAxis: {
          style: 'white',
          type: 'value',
          axisLabel: {
            textStyle: {
              color: 'white'
            }
          }
        },
        series: [
          {
            data: this.toolLife,
            type: 'line',
            markLine: {
              silent: true,
              lineStyle: {
                color: 'red'
              },
              data: [
                {
                  yAxis: 1.2
                },
                {
                  yAxis: 0.3
                }
              ]
            }
          }

        ]
      })
    },
    drawLine50() {
      // 基于准备好的dom，初始化echarts实例
      const myChart20 = this.$echarts.init(document.getElementById('myChart21'))
      // 绘制图表
      myChart20.setOption({
        tooltip: {
          formatter: '{a} <br/>{c} {b}'
        },
        series: [
          {
            name: 'OEE',
            type: 'gauge',
            min: 0,
            max: 100,
            splitNumber: 10,
            radius: '90%',
            axisLine: { // 坐标轴线
              lineStyle: { // 属性lineStyle控制线条样式
                color: [[0.30, 'lime'], [0.70, '#1e90ff'], [1, '#ff4500']],
                width: 3
              }
            },
            axisLabel: { // 坐标轴小标记
              textStyle: { // 属性lineStyle控制线条样式
                fontWeight: 'bolder',
                color: '#fff',
                shadowColor: '#fff', // 默认透明
                shadowBlur: 10
              }
            },
            axisTick: { // 坐标轴小标记
              length: 10, // 属性length控制线长
              lineStyle: { // 属性lineStyle控制线条样式
                color: 'auto',
                shadowColor: '#fff', // 默认透���
                shadowBlur: 10
              }
            },
            splitLine: { // 分隔线
              length: 10, // 属性length控制线长
              lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                width: 3,
                color: '#fff',
                shadowColor: '#fff', // 默认透明
                shadowBlur: 10
              }
            },
            title: {
              textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 20,
                fontStyle: 'italic',
                color: '#fff',
                shadowColor: '#fff', // 默认透明
                shadowBlur: 10
              }
            },
            detail: {
              formatter: 'OEE：90%',
              shadowBlur: 5,
              offsetCenter: [0, '90%'], // x, y，单位px
              textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                color: '#fffaa6',
                fontSize: 18
              }
            },
            data: [90]
          }
        ]
      })
    },
    drawLine51() {
      // 基于准备好的dom，初始化echarts实例
      const myChart21 = this.$echarts.init(document.getElementById('myChart20'))
      // myChart1.clear()
      // 绘制图表
      myChart21.setOption({
        // backgroundColor: '#1b1b1b',
        tooltip: {
          formatter: '{a} <br/>{c} {b}'
        },
        toolbox: {
          show: true
        },
        series: [
          {
            startAngle: 180, // 开始角度 左侧角度
            endAngle: 0, // 结束角度 右侧
            name: '当班',
            type: 'gauge',
            z: 3,
            min: 0,
            max: 100,
            splitNumber: 10,
            radius: '120%',
            center: ['50%', '85%'], // 默认全局居中
            axisLine: { // 坐标轴线
              lineStyle: {
                color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                width: 3,
                shadowColor: '#fff', // 默认透明
                shadowBlur: 8// 属性lineStyle控制线条样式
              }
            },
            axisTick: { // 坐标轴小标记
              length: 10, // 属性length控制线长
              lineStyle: { // 属性lineStyle控制线条样式
                color: 'auto'
              }
            },
            splitLine: { // 分隔线
              length: 15, // 属性length控制线长
              lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                color: 'auto'
              }
            },
            axisLabel: {
              backgroundColor: 'auto',
              borderRadius: 2,
              color: '#eee',
              padding: 3,
              textShadowBlur: 2,
              textShadowOffsetX: 1,
              textShadowOffsetY: 1,
              textShadowColor: '#222'
            },
            title: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              offsetCenter: ['-45%', '-35%'], // 改变标题的位置
              fontWeight: 'bolder',
              fontSize: 14,
              fontStyle: 'italic',
              color: '#fff'
            },
            detail: {
              formatter: '当班完成率：30%',
              shadowBlur: 5,
              offsetCenter: ['-40%', '21%'], // x, y，单位px
              textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                color: '#fffaa6',
                fontSize: 14
              }
            },
            data: [{ value: 30, name: '当班' }]
          },
          {
            startAngle: 180, // 开始角度 左侧角度
            endAngle: 0, // 结束角度 右侧
            name: '今日',
            type: 'gauge',
            center: ['50%', '85%'], // 默认全局居中
            radius: '100%',
            min: 0,
            max: 100,
            splitNumber: 10,
            axisLine: { // 坐标轴线
              lineStyle: { // 属性lineStyle控制线条样式
                color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                shadowColor: '#fff', // 默认透明
                width: 5
              }
            },
            axisTick: { // 坐标轴小标记
              length: 10, // 属性length控制线长
              lineStyle: { // 属性lineStyle控制线条样式
                color: 'auto'
              }
            },
            axisLabel: {
              show: false
            },
            splitLine: { // 分隔线
              length: 15, // 属性length控制线长
              lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                color: 'auto'
              }
            },
            pointer: {
              width: 5
            },
            title: {
              offsetCenter: ['50%', '-50%'], // x, y，单位px
              color: '#fff'
            },
            detail: {
              formatter: '今日完成率：80%',
              shadowBlur: 5,
              offsetCenter: ['60%', '25%'], // x, y，单位px
              textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                color: '#fffaa6',
                fontSize: 14
              }
            },
            data: [{ value: 80, name: '今日' }]
          }
        ]
      })
    }
  }
}
</script>

<style>
  HTML{
    overflow: auto;
  }
  .boxborder{position:absolute;padding:10px;border-style: solid;border-color: rgb(20, 95, 245);}
  .borderLeft1{border-width: 4px 0 0 4px;top:-6px;left:-6px;}
  .borderLeft2{border-width: 4px 4px 0 0;top:-6px;right:-6px;}
  .borderRight1{border-width: 0 0 4px 4px;bottom:-6px;left:-6px;}
  .borderRight2{border-width: 0 4px 4px 0;bottom:-6px;right:-6px;}
  .lizi1{
    /*position: fixed;*/
    width:3840px;
    height: 1296px;
    background: url("../img/backgroundImg.jpg");
    background-size: 100%;
    /*background: rgb(0, 30, 116);  !* fallback for old browsers *!*/
    /*background: -webkit-linear-gradient(to right, rgb(0, 30, 116), rgb(0, 30, 116), rgb(0, 30, 116));  !* Chrome 10-25, Safari 5.1-6 *!*/
    /*background: linear-gradient(to right, rgb(0, 30, 116), rgb(0, 30, 116), rgb(0, 30, 116)); !* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!*/
  }
  body{
    margin:0;
    padding:0;
    width: 3840px;
    height: 1296px;
    overflow: hidden;
    position: relative;
  }
</style>
<style scoped>
    .data-box1 {
        /*border: 0px solid #032d60;*/
        -webkit-box-shadow: rgb(4, 98, 255) 0 0 10px;
        -moz-box-shadow: rgb(4, 98, 255) 0 0 10px;
        box-shadow: inset 0 0 30px rgb(4, 98, 255);
        position: relative;
    }
  .slopingsideright{
    background: rgb(30, 144, 255);
    position: absolute;
    margin-left: 59.4%;
    margin-top: 1.6%;
    height:0px;
    border: 1px solid rgb(30, 144, 255);
    width: 72px;
    transform:rotate(125deg);
    -o-transform:rotate(125deg);
    -moz-transform:rotate(125deg);
    -webkit-transform:rotate(125deg);
    -webkit-box-shadow: rgb(4, 98, 255) 0 0 10px;
    -moz-box-shadow: rgb(4, 98, 255) 0 0 10px;
    box-shadow: inset 0 0 30px rgb(4, 98, 255);
  }
  .slopingsideleft{
    background: rgb(30, 144, 255);
    position: absolute;
    margin-left: 36.8%;
    margin-top: 1.6%;
    height:0px;
    border: 1px solid rgb(30, 144, 255);
    width: 72px;
    transform:rotate(-125deg);
    -o-transform:rotate(-125deg);
    -moz-transform:rotate(-125deg);
    -webkit-transform:rotate(-125deg);
  }
  .slopingsidertop{
    background: rgb(30, 144, 255);
    position: absolute;
    margin-left: 37.6%;
    margin-top: 0%;
    height:0px;
    border: 1px solid rgb(30, 144, 255);
    width: 468px;
  }
  .leftsidertop{
    background: rgb(30, 144, 255);
    position: absolute;
    margin-left: 0%;
    margin-top: 0%;
    height:0px;
    border: 1px solid rgb(30, 144, 255);
    width: 665px;
  }
  .slopingsidebottom{
    background: rgb(30, 144, 255);
    position: absolute;
    margin-left: 39.8%;
    margin-top: 3.2%;
    height:0px;
    border: 1px solid rgb(30, 144, 255);
    width: 384px;
  }
  .leftsiderright{
    background: rgb(30, 144, 255);
    position: absolute;
    margin-left: 34.4%;
    margin-top: 1.5%;
    height:0px;
    border: 1px solid rgb(30, 144, 255);
    width: 70px;
    transform:rotate(-125deg);
    -o-transform:rotate(-125deg);
    -moz-transform:rotate(-125deg);
    -webkit-transform:rotate(-125deg);
  }
  .rightsiderleft{
    background: rgb(30, 144, 255);
    position: absolute;
    margin-left: 61.7%;
    margin-top: 1.5%;
    height:0px;
    border: 1px solid rgb(30, 144, 255);
    width: 70px;
    transform:rotate(125deg);
    -o-transform:rotate(125deg);
    -moz-transform:rotate(125deg);
    -webkit-transform:rotate(125deg);
  }
  .rightsidertop{
    background: rgb(30, 144, 255);
    position: absolute;
    margin-left: 64.7%;
    margin-top: 0%;
    height:0px;
    border: 1px solid rgb(30, 144, 255);
    width: 664px;
  }
  .rdda-div-tixing{
    float: left;
    width: 350px;
    height: 0px;
    border-bottom: 0px;
    border-top: 60px solid #155681;
    border-right: 60px solid transparent;
    border-left: 60px solid transparent;
    text-align: center;
    line-height: 60px;
  }
  .rdda-div-tixing div{
    font-size: 38px;
    color: #fff;
  }
  .trapezoid {
    /* 梯形 */
    width: 370px;
    height: 0px;
    border-top: 60px solid #f00;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
  }
  .el-input__inner {
    border: 0px;
    background-color: #012a61;
    font-size: 18px;
    color: white;
    text-align: center;
  }

  .Checkbox {
    position: absolute;
    visibility: hidden;
  }
  .Checkbox+label {
    position:absolute;
    width: 16px;
    height: 16px;
    border: 1px solid #A6A6A6;
    border-radius: 50%;
    background-color:#DEDEDE;
  }
  .Checkbox:checked+label:after {
    content: "";
    position: absolute;
    left: 2px;
    top:2px;
    width: 9px;
    height: 4px;
    border: 2px solid #424242;
    border-top-color: transparent;
    border-right-color: transparent;
    transform: rotate(-45deg);
    -ms-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
  }
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    /*background-color: transparent;*/
    /*background-color: red;*/
    background-color: rgba(220, 38, 38, 0.1);
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
</style>
