<template>

    <div style="height: 100%">
        <div>
            <div class="item1">
              <span class="dot">
                <span class="dot-inner"></span>
              </span>
              <span>报警信息</span>
              <div class="fong-div" style="width: 8px;height: 12px;background-color: #2c888899;float: right;margin-top: 10px;transform: skewX(-25deg)"></div>
              <div class="fong-div" style="width: 8px;height: 12px;background-color: #24b1b1b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div>
              <div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div>
            </div>
        </div>
            <div class="left">
                <div
                  class="bottom right-bottom-data-left"
                  @mouseover="tableEnter"
                  @mouseout="timerAni"
                >
                  <el-table
                    size="mini"
                    :data="tableData"
                    :height="tableHeight"
                    class="el-bottom"
                    ref="table"
                  >
                    <el-table-column prop="unitName" label="所在单位" width="80">
                      <template slot-scope="scope">
                        <div class="ddd" :title="scope.row.unitName">
                          {{ scope.row.unitName }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="detectorType" label="设备类型" width="80">
                      <template slot-scope="scope">
                        <div class="ddd" :title="scope.row.detectorType">
                          {{ scope.row.detectorType }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="statusName" label="预警信息" width="80">
                      <template slot-scope="scope">
                        <div class="ddd" :title="scope.row.statusName">
                          {{ scope.row.statusName }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="alarmTime" label="预警时间" width="140">
                    </el-table-column>
                    <el-table-column prop="handledStatus" label="状态">
                      <template slot-scope="scope">
                        <div class="ddd" :title="scope.row.handledStatus">
                          {{ scope.row.handledStatus }}
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>

<!-- <div style="width: 100%;height: 200px;background-color: #44d7dc;">
    <el-table
          size="mini"
          :data="tableData"
          style="width: 100%"
          :height="tableHeight"
          class="el-bottom"
          ref="table"
        >
          <el-table-column prop="unitName" label="所在单位" width="100">
            
          </el-table-column>
          <el-table-column prop="detectorType" label="设备类型" width="">
            
          </el-table-column>
          <el-table-column prop="statusName" label="预警信息" width="">
            
          </el-table-column>
          <el-table-column prop="alarmTime" label="预警时间" width="160">
          </el-table-column>
          <el-table-column prop="handledStatus" label="状态" width="">
            
          </el-table-column>
        </el-table>
</div> -->
        <div>
            <div class="item1" style="margin-top: 10px;">
                <span class="dot">
                    <span class="dot-inner"></span>
                </span>
                <span>资源统计</span>
                <div class="fong-div" style="width: 8px;height: 12px;background-color: #2c888899;float: right;margin-top: 10px;transform: skewX(-25deg)"></div>
                <div class="fong-div" style="width: 8px;height: 12px;background-color: #24b1b1b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div>
                <div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div>
            </div>
        </div>
        <div class="echarts-one" style="margin-top: 10px;width: 430px;margin-left: 10px;">
            <div id="myChartone" :style="{width: '420px', height: '240px'}"></div>
        </div>
        <!-- <div>
            <div class="item1">
              <span class="dot">
                <span class="dot-inner"></span>
              </span>
              <span>投诉统计</span>
              <div class="fong-div" style="width: 8px;height: 12px;background-color: #2c888899;float: right;margin-top: 10px;transform: skewX(-25deg)"></div>
              <div class="fong-div" style="width: 8px;height: 12px;background-color: #24b1b1b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div>
              <div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div>
            </div>
        </div>
        <div class="divfen" style="width: 100%;height: 280px;margin-top: 10px">
            <div style="width: 50%;height: 100%">
                <div id="main31" style="width: 100%;height: 66%"></div>
                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;">
                    ● 已处理：{{datanow.tousuevery1}}
                </div>
                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;color: #ff4040">
                    ● 未处理：{{datanow.tousuevery2}}
                </div>
            </div>
            <div style="width: 50%;height: 100%">
                <div id="main32" style="width: 100%;height: 66%"></div>
                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;color: #0000ff">
                    ● 在线数量：{{datanow.deviceevery1}}
                </div>
                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;color: #ffff00">
                    ● 离线数量：{{datanow.deviceevery2}}
                </div>
                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;color: #ff4040">
                    ● 报警数量：{{datanow.deviceevery3}}
                </div>
            </div>
        </div> -->
        <div>
            <div class="item1">
              <span class="dot">
                <span class="dot-inner"></span>
              </span>
              <span>用户安全监控设备</span>
              <div class="fong-div" style="width: 8px;height: 12px;background-color: #2c888899;float: right;margin-top: 10px;transform: skewX(-25deg)"></div>
              <div class="fong-div" style="width: 8px;height: 12px;background-color: #24b1b1b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div>
              <div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div>
            </div>
        </div>
        <div class="outuser">
            <div class="outuserone">
                <p>燃气用户数量</p>
                <span class="outuserspan">12345</span>
            </div>
            <div class="outusertwo">
                <p>安全设备数量</p>
                <span class="outuserspan">12345</span>
            </div>
        </div>
        <div id="huan" style="width: 450px;height: 170px;"></div>
        <div class="inyuan">
            <div style="letter-spacing:2px;">设备总数</div>
            <span style="font-family: 'arialbd';letter-spacing:2px;color: #00FFFF;font-size: 20px;">12345</span>
        </div>
        <div class="usernum">
            <div class="usernumin in1">
                 <span> ● </span>
                 <span style="color: #fff;">在线数量 </span>
                 <span style="font-family: 'arialbd';letter-spacing:2px;"> : 1234</span>
            </div>
            <div class="usernumin in2">
                <span> ● </span>
                <span style="color: #fff;">离线数量 </span>
                <span style="font-family: 'arialbd';letter-spacing:2px;"> : 1234</span>
           </div>
           <div class="usernumin in3">
                <span> ● </span>
                <span style="color: #fff;">报警数量 </span>
                <span style="font-family: 'arialbd';letter-spacing:2px;"> : 1234</span>
            </div>
        </div>
    </div>
</template>

<script>
    // 引入基本模板
    import * as echarts from 'echarts';
    import { alarmData } from "@/api/detector/detectorInfo";
    export default {
        // components: {
        //     RightPic,
        // },
        data () {
            return {
                timer: null,
                repeatFinshed: false,
                tableHeight: 230,
                tableData: [],
                scrollHeight: 0,
                dataall:{
                    xunchaAllOne1: 1,
                    xunchaAllOne2: 3,
                    xunchaAllOne3: 8,
                    xunchaAllOne4: 3,
                    xunchaAllTwo1: 2,
                    xunchaAllTwo2: 2,
                    xunchaAllTwo3: 2,
                    xunchaAllTwo4: 6,
                    xunList1:[
                        { value: 678,name: '30.4%' },
                        { value: 1548,name: '69.6%' }
                    ],
                    xunList11:[
                        { value: 1048 },
                        { value: 335}
                    ],
                    xunoneevery1:1048,
                    xunoneevery2:355,
                    xunList2:[
                        { value: 678,name: '28.5%' },
                        { value: 1548,name: '71.5%' }
                    ],
                    xunList22:[
                        { value: 1048 },
                        { value: 335}
                    ],
                    xuntwoevery1:1674,
                    xuntwoevery2:552,
                    shigu1:[820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290],
                    shigu2:[452, 786, 456, 732, 458, 165, 198,489, 158, 358, 345, 675],
                    shigu3:[ 932, 901, 198,489, 158, 358, 345, 675,  901, 934, 1290, 888],
                    tousu:[{ value: 1048, name: '已处理' },
                        { value: 255, name: '未处理' }
                    ],
                    tousuNum:1303,
                    tousuevery1:1048,
                    tousuevery2:255,
                    divice:[
                        { value: 31, name: '在线数量' },
                        { value: 19, name: '离线数量' },
                        { value: 1, name: '报警数量' }
                    ],
                    deviceNum:51,
                    deviceevery1:31,
                    deviceevery2:19,
                    deviceevery3:1,
                    zhuzhuang:[16,13,27,2]
                },
                dataone:{
                    xunchaAllOne1: 0,
                    xunchaAllOne2: 3,
                    xunchaAllOne3: 8,
                    xunchaAllOne4: 3,
                    xunchaAllTwo1: 0,
                    xunchaAllTwo2: 7,
                    xunchaAllTwo3: 2,
                    xunchaAllTwo4: 6,
                    xunList1:[
                        { value: 224,name: '32.3%' },
                        { value: 641,name: '67.7%' }
                    ],
                    xunList11:[
                        { value: 338 },
                        { value: 112}
                    ],
                    xunoneevery1:335,
                    xunoneevery2:141,
                    xunList2:[
                        { value: 224,name: '29.1%' },
                        { value: 544,name: '78.9%' }
                    ],
                    xunList22:[
                        { value: 354 },
                        { value: 111}
                    ],
                    xuntwoevery1:511,
                    xuntwoevery2:199,
                    shigu1:[223, 44, 332, 321, 458, 456, 653,122, 345, 133, 421, 123],
                    shigu2:[123, 234, 456, 567, 235, 12,89, 158, 158, 145, 175,224],
                    shigu3:[ 432, 301, 108,189, 18, 158, 145, 175,  401, 334, 590, 388],
                    tousu:[{ value: 322, name: '已处理' },
                        { value: 181, name: '未处理' }
                    ],
                    tousuNum:503,
                    tousuevery1:322,
                    tousuevery2:181,
                    divice:[
                        { value: 11, name: '在线数量' },
                        { value: 8, name: '离线数量' },
                        { value: 1, name: '报警数量' }
                    ],
                    deviceNum:21,
                    deviceevery1:11,
                    deviceevery2:8,
                    deviceevery3:1,
                    zhuzhuang:[8,3,11,1]
                },
                datatwo:{
                    xunchaAllOne1: 0,
                    xunchaAllOne2: 4,
                    xunchaAllOne3: 2,
                    xunchaAllOne4: 1,
                    xunchaAllTwo1: 0,
                    xunchaAllTwo2: 6,
                    xunchaAllTwo3: 7,
                    xunchaAllTwo4: 5,
                    xunList1:[
                        { value: 224,name: '30.4%' },
                        { value: 400,name: '69.6%' }
                    ],
                    xunList11:[
                        { value: 212 },
                        { value: 209}
                    ],
                    xunoneevery1:335,
                    xunoneevery2:141,
                    xunList2:[
                        { value: 224,name: '28.5%' },
                        { value: 300,name: '71.5%' }
                    ],
                    xunList22:[
                        { value: 475 },
                        { value: 200}
                    ],
                    xuntwoevery1:475,
                    xuntwoevery2:200,
                    shigu1:[653,122, 345, 133, 456, 653,122, 345, 133, 421, 123,500],
                    shigu2:[432, 301, 456, 567, 235, 12, 145, 175,  401, 334, 590, 388],
                    shigu3:[ 123, 234, 108,189, 18, 158, 123, 234, 456, 567, 235, 12],
                    tousu:[{ value: 344, name: '已处理' },
                        { value: 121, name: '未处理' }
                    ],
                    tousuNum:322,
                    tousuevery1:211,
                    tousuevery2:111,
                    divice:[
                        { value: 2, name: '在线数量' },
                        { value: 4, name: '离线数量' },
                        { value: 0, name: '报警数量' }
                    ],
                    deviceNum:6,
                    deviceevery1:2,
                    deviceevery2:4,
                    deviceevery3:0,
                    zhuzhuang:[2,5,7,1]
                },
                datathree:{
                    xunchaAllOne1: 0,
                    xunchaAllOne2: 5,
                    xunchaAllOne3: 7,
                    xunchaAllOne4: 9,
                    xunchaAllTwo1: 0,
                    xunchaAllTwo2: 8,
                    xunchaAllTwo3: 8,
                    xunchaAllTwo4: 9,
                    xunList1:[
                        { value: 124,name: '30.4%' },
                        { value: 400,name: '69.6%' }
                    ],
                    xunList11:[
                        { value: 212 },
                        { value: 309}
                    ],
                    xunoneevery1:335,
                    xunoneevery2:141,
                    xunList2:[
                        { value: 224,name: '28.5%' },
                        { value: 300,name: '71.5%' }
                    ],
                    xunList22:[
                        { value: 475 },
                        { value: 200}
                    ],
                    xuntwoevery1:475,
                    xuntwoevery2:200,
                    shigu1:[653,122, 345, 133, 456, 653,122, 345, 133, 421, 123,500],
                    shigu2:[432, 301, 456, 567, 456, 653,122, 175,  401, 334, 590, 388],
                    shigu3:[ 334, 590, 388, 133, 456, 123, 234, 653,122, 345, 133],
                    tousu:[{ value: 124, name: '已处理' },
                        { value: 111, name: '未处理' }
                    ],
                    tousuNum:335,
                    tousuevery1:124,
                    tousuevery2:111,
                    divice:[
                        { value: 12, name: '在线数量' },
                        { value: 6, name: '离线数量' },
                        { value: 0, name: '报警数量' }
                    ],
                    deviceNum:24,
                    deviceevery1:12,
                    deviceevery2:6,
                    deviceevery3:0,
                    zhuzhuang:[6,5,9,0]
                },
                datanow:{}
            };
        },
        mounted(){
            // this.$nextTick(()=>{
            //     this.getScrollHeight();
            // })
           this.getAlarm();
            // this.datanow = this.dataall;
            // this.drawLine(this.datanow);
            // this.drawLine2(this.datanow);
            this.drawLine3();
            

        },
        methods: {
            getAlarm() {
                alarmData().then(response => {
                    this.tableData=response.data.pageData;
                    // console.log(response.data)
                    // this.user = response.data;
                    this.$nextTick(()=>{
                        this.getScrollHeight();
                    })
                });
            },
            getScrollHeight() {
                const selectWrap = this.$refs.table.$el.querySelector(
                ".el-table__body-wrapper"
                );
                // 列表
                const select = this.$refs.table.$el
                .querySelector(".el-table__body-wrapper")
                .querySelector(".el-table__body");
                
                
               
                setTimeout(()=>{
                    // 列表容器高度
                const { height: heightWrapper } = selectWrap.getBoundingClientRect();
                // 列表高度
                const { height: heightSelect } = select.getBoundingClientRect();
                // 滚动条的高度 = 列表高度-列表容器高度
                    this.scrollHeight = heightSelect - heightWrapper;
                    
                },1)
                
        
                this.timerAni();
            },
            timerAni() {

                const selectWrap = this.$refs.table.$el.querySelector(
                ".el-table__body-wrapper"
                );
                this.timer = setInterval(() => {
                    // console.log(selectWrap.scrollTop)
                if (selectWrap.scrollTop == this.scrollHeight) {
                    selectWrap.scrollTop = 1;
                }
                selectWrap.scrollTop += 1;
                }, 100);
            },
            tableEnter() {
                console.log(123);
                clearInterval(this.timer);
            },
            choice(index){
                console.log("===="+index)
                if(index==0){
                    this.datanow = this.dataall;
                    this.drawLine(this.datanow);
                    // this.drawLine2(this.datanow);
                    this.drawLine3(this.datanow);
                }else
                if(index==1){
                    this.datanow = this.dataone;
                    this.drawLine(this.datanow);
                    // this.drawLine2(this.datanow);
                    this.drawLine3(this.datanow);
                }else if(index==2){
                    this.datanow = this.datatwo;
                    this.drawLine(this.datanow);
                    // this.drawLine2(this.datanow);
                    this.drawLine3(this.datanow);
                }else if(index==3){
                    this.datanow = this.datathree;
                    this.drawLine(this.datanow);
                    // this.drawLine2(this.datanow);
                    this.drawLine3(this.datanow);
                }
            },
            drawLine(data){
          // 基于准备好的dom，初始化echarts实例
          let myChart1 = this.$echarts.init(document.getElementById('myChartone'))
          // 绘制图表
          myChart1.setOption({
              tooltip: {
                  trigger: "item"
              },
              grid: {
                  top: "8%",
                  left: "8%",
                  right: "8%",
                  bottom: "13%",
                  containLabel: true
              },
              xAxis: {
                  data: ["阀井","调压箱","场站","监控"],
                  type: 'category',
                  // data: category,
                  splitLine: {show: false},
                  axisLine: {
                      show: false,
                      lineStyle:{
                          color: '#bbb6b6'
                      }
                  },
                  axisTick: {
                      show: false
                  },
                  offset: 10,
                  nameTextStyle: {
                      fontSize: 15
                  }
              },
               yAxis: {
                  type: 'value',
                  axisLine: {
                      show: false,
                      lineStyle:{
                          color: '#688AB6'
                      }
                  },
                  axisTick: {
                      show: false
                  },
                  splitLine: {
                      show: true,
                      lineStyle:{
                          type:'dashed',
                          color: '#464646'
                      }
                  }
              },
              series: [
                  {
                      name: "资源数量统计",
                      type: "bar",
                      showSymbol: false,
                      hoverAnimation: false,
                      data: data.zhuzhuang,
                      barWidth: 18, //柱图宽度
                      // barCategoryGap:'60%',
                      itemStyle:{
            　　　　　　　　normal:{
                            label:{
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: '#688AB6',
                                    fontSize: 12
                                }
                            },
                              barBorderRadius: [5,5,0,0],
            　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
            　　　　　　　　　　color: function (params){
            　　　　　　　　　　　　//我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
            　　　　　　　　　　　　  var colorList = [['#00ffff','#00fbfb80','#112238'],['#198EF0','#198ef099','#112238']];
                                    var index=params.dataIndex;
                                    if(params.dataIndex >= colorList.length){
                                    index=params.dataIndex-colorList.length;
                                    }

            　　　　　　　　　　　  return new echarts.graphic.LinearGradient(0, 0, 0, 1,[
            　　　　　　　　　　　　　　       {offset: 0, color: colorList[index][0]},
            　　　　　　　　　　　　　　       {offset: 0.5, color: colorList[index][1]},
            　　　　　　　　　　　　　　       {offset: 1, color: colorList[index][2]}
            　　　　　　　　　　　　　     ]);
            　　　　　　　　　　}
                        }
                      }
                  },{
                      name:'资源数量统计',
                      tooltip:{
                      show:true
                      },
                      type: 'bar',
                      barWidth:10,
                  },{
                      name:'b',
                      tooltip:{
                      show:false
                      },
                  },{
                      name:'d',
                      tooltip:{
                      show:false
                      },
                  }
              ]
          });
      },
            
            drawLine3(data){
                // 基于准备好的dom，初始化echarts实例
                let myChart31 = echarts.init(document.getElementById('huan'))
                // let myChart32 = echarts.init(document.getElementById('main32'))
                // 绘制图表
                myChart31.setOption({
                    color: ['#FF4040', '#F0C41B', '#188DF0'],
                    grid: {
                        left: 0,
                        // right: 0,
                        bottom: 0,
                        top:0,
                        containLabel: true
                    },
                    // grid: {
                    //     bottom: 150,
                    //     left: 100,
                    //     right: '10%'
                    // },
                    
                    series: [
                        // 主要展示层的
                        {
                            radius: ['75%', '65%'],
                            center: ['50%', '50%'],
                            type: 'pie',
                            itemStyle: {
                                borderRadius: 20,
                            },
                            label: {
                                normal: {
                                    show: false,
                                    textStyle: {
                                        fontSize: 13,
                                    },
                                    position: 'outside'
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false,
                                    length: 20,
                                    length2: 35
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            name: "民警训练总量",
                            data: [{"name": "报警数量","value": 10}, 
                                {"name": "离线数量","value": 30}, 
                                { "name": "在线数量","value": 100},  ],
                        },
                        // 边框的设置
                        {
                            name: '外边框',
                            type: 'pie',
                            clockWise: false, //顺时加载
                            hoverAnimation: false, //鼠标移入变大
                            center: ['50%', '50%'],
                            radius: ['80%', '80%'],
                            label: {
                                normal: {
                                    show: false
                                }
                            },
                            data: [{
                                value: 9,
                                name: '',
                                itemStyle: {
                                    normal: {
                                        borderWidth: 2,
                                        borderColor: '#61bad3'
                                    }
                                }
                            }]
                        },
                    ]
                });
                // myChart32.setOption({
                //     title: {
                //         text: '设备数量:'+data.deviceNum,
                //         left: 'center',
                //         textStyle: {
                //             color: "#0ff"
                //         }
                //     },
                //     tooltip: {
                //         trigger: 'item'
                //     },
                //     series: [
                //         {
                //             name: '设备概况',
                //             type: 'pie',
                //             radius: ['50%', '70%'],
                //             center: ['50%', '60%'],
                //             avoidLabelOverlap: false,
                //             label: {
                //                 show: false,
                //                 position: 'center'
                //             },
                //             emphasis: {
                //                 label: {
                //                     show: true,
                //                     fontSize: '40',
                //                     fontWeight: 'bold'
                //                 }
                //             },
                //             labelLine: {
                //                 show: false
                //             },
                //             data:data.divice,
                //             color:["#188df0","#ffff00","#FF4040"]
                //         }
                //     ]
                // });
            }
        }
    }
</script>

<style scoped>
.titleTex{
    height: 30px;
    width: 100%;
    color: aqua;
    text-align: center;
    line-height: 30px;
    margin-top: 10px;
}
.divall{
    height: 100%;
    width: 100%;
}
.divfen{
    display:flex;
    justify-content:center;
    align-items:center;
}
.numdiv{
    background: #47aed5;
    color: white;
    width: 27px;
    font-size: 30px;
}
.item1{
    width: 93%;
    height: 30px;
    font-size: 18px;
    line-height: 30px;
    color: #ffffff;
    padding-left: 10px;
    font-weight: 700;
    font-style: italic;
    margin-left: 10px;
    background-image: linear-gradient(to left, #112238, rgb(49 151 195 / 70%) 50%, #112238);
}
.dot {
        display: inline-block;
        position: relative;
        width: 10px;
        height: 10px;
        background: rgb(30, 185, 190);
        border-radius: 50%;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 2px;
    }

    .dot-inner {
        background: #44d7dc;
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        -webkit-animation: vabDot 1.2s ease-in-out infinite;
        animation: vabDot 1.2s ease-in-out infinite;
    }
    @-webkit-keyframes vabDot {
        0% {
            opacity: .6;
            transform: scale(.8)
        }

        to {
            opacity: 0;
            transform: scale(2.4)
        }
    }

    @keyframes vabDot {
        0% {
            opacity: .6;
            transform: scale(.8)
        }

        to {
            opacity: 0;
            transform: scale(2.4)
        }
    }
    .outuser{
        width: 450px;
        height: 60px;
    }
    .outuserone{
        width: 50%;
        height: 100%;
        text-align: center;
        float: left;
        color: #E8F2FF;
    }
    .outusertwo{
        width: 50%;
        height: 100%;
        text-align: center;
        float: right;
        color: #E8F2FF;
    }
    .outuserspan{
        font-family: 'arialbd';
        font-size: 28px;
        color: #00FFFF;
        letter-spacing:8px;
    }
    .usernum{
        width: 100%;
        height: 20px;
    }
    .usernumin{
        float: left;
        margin-left: 15px;
        font-size: 15px;
    }
    .in1{
        color: #188DF0;
    }
    .in2{
        color: #F0C41B;
    }
    .in3{
        color: #FF4040;
    }
    .inyuan{
        width: 106px;
        height: 106px;
        border-radius: 50%;
        border: 2px solid #125c9b;
        position: fixed;
        margin-bottom: 10px;
        margin-top: -138px;
        margin-left: 172px;
        font-size: 15px;
        color: #fff;
        text-align: center;
        line-height: 25px;
        padding: 28px 0px 0px 0px;
        background-image: linear-gradient(to left, #112238, #003E8D, #112238);
    }
    .b_list{
        height: 100%;
        overflow: hidden;
    }
  .left{
    margin-top: 10px;
    width: 440px;
    margin-left: 20px;
  }
</style>
