<!--
 * @Author: your name
 * @Date: 2022-01-11 13:44:17
 * @LastEditTime: 2023-07-12 17:13:16
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /test/hello-world/src/views/Home.vue
-->
<template>
  <div class="home bigwindow" @click='windowClick'>
    <div class="goSystem" @click="$router.push('/index')">进入管理系统</div>
    <div id="map"></div>
    <!-- <Center :show="show" :centerData="centerData" /> -->
    <UserCenter
      :title="centerTitle"
      :show="userCenterShow"
      ref="userCenter"
      :detcetorList="detcetorList"
      :userId="centerUserId"
      :total="centerTotal"
      :pageSize="20"
    />
    <OtherCenter
      :title="centerTitle"
      :show="otherCenterShow"
      ref="otherCenter"
      :detcetorList="detcetorList"
      :userId="centerUserId"
      :total="centerTotal"
      :pageSize="20"
    />
    <PipeColor />
    <PipeSelect @transmit="getPipeSelectMessage"  @closeMediumPressureLine="clearBigWindowsSelectPipe"/>

    <!-- 底部按钮 -->
    <!-- <div class="home-div">
      <img src="../../assets/firstimage/bottombk.svg" alt="" style="backdrop-filter: blur(4px);" />
      <div class="listingsSty fangy">
        <div
          @click="allCompany"
          :class="selarr.length == 2 ? 'active' : ''"
          class="firsty"
        >
          全部
        </div>
        <div
          class="firsty"
          :class="selarr.indexOf(item.val) >= 0 ? 'active' : ''"
          v-for="(item, index) in typeList"
          :key="item.val"
          @click="sel(index, item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div> -->
    <Bottom v-if="enterpriseId==-2" @listChange="listChange" ref='Bottom'/>
    <!-- 设备按钮 -->
    <div class="typelist-div">
      <div
        class="list"
        v-for="(item, index) in arr"
        :key="index"
        :class="selarr1.indexOf(item.val) >= 0 ? 'active' : ''"
        @click="sel1(index, item)"
      >
        <img
          :src="item.imgurl"
          style="margin-top: 2px; float: left; margin-right: 3px"
        />
        {{ item.name }}
      </div>
    </div>

    <!-- 弹框 -->
    <div
      id=""
      style="position: fixed; top: 0; right: 0; width: 100px; height: 100px"
    >
      <!-- <markerInfoWindow></markerInfoWindow> -->
    </div>

    <!-- 头部 -->
    <div class="banner-test">
      <!-- <dv-decoration-5 style="width:100%;height:100%;" /> -->
      <img  v-if="this.enterpriseId==-2" src="../../assets/bigWindowOld/images/zibk.png" alt="" />
      <img  v-else src="../../assets/bigWindowOld/images/20230805152711.png" alt="" />

    </div>

    <!-- 左边 -->
    <div class="leftbar">
      <leftBar ref="mychild2"></leftBar>
    </div>

    <!-- 右边 -->
    <div class="rightbar">
      <rightBar ref="mychild"></rightBar>
    </div>
    <!-- <img src="../../assets/images/leftbk.svg" alt=""> -->
    <!-- 左上角天气 -->
    <div
      class="weather"
      style="
        position: fixed;
        top: 0;
        margin-top: 25px;
        margin-left: 15px;
        left: 0;
        z-index: 999;
        height: 50px;
      "
    >
      <!-- <iframe src="../../static/weather.html" frameborder="0"></iframe> -->
      <!-- <iframe
        scrolling="no"
        src="https://tianqiapi.com/api.php?style=tz&skin=pitaya&color=fff"
        frameborder="0"
        width="450"
        height="30"
        allowtransparency="true"
      ></iframe> -->
      <!-- <iframe scrolling="no" src="https://yiketianqi.com/api.php?style=ty&skin=pitaya" frameborder="0" width="300" height="75" allowtransparency="true"></iframe> -->
    </div>

    <!-- 右上角时间 -->
    <div
      class="right-time"
      style="
        position: fixed;
        top: 0;
        margin-top: 25px;
        margin-right: 15px;
        right: 0;
        z-index: 999;
        width: 200px;
        height: 50px;
        color: #fff;
      "
    >
      <div style="height: 20px; width: 100%; float: right; font-size: 14px">
        {{ nowDate }}&nbsp;{{ nowtime }}&nbsp;{{ nowweek }}
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { EditorMap } from "@/utils/mapClassForBigOld/map";
import { mapGetters, mapActions } from "vuex";
import { listDetectorInfo } from "@/api/detector/detectorInfo";
import { detectorUserList,massMarksDetectorUserList,labelsLayerMarksDetectorUserList } from "@/api/detector/detectorUser";
import {
  pipeData,
  tiaoyaxiang,
  famen,
  changzhan,
  jiankong,
  user,
  alarmtime,
} from "@/utils/mapClass/config.js";
import {
  getPipe,
  getTyx,
  getFm,
  getCz,
  getVideo,
  getUser,
  getEnterprise,
  userAlarm,
  getTcqDevice,
  getYhq,
  deviceUser
} from "@/api/bigWindowOld/getDevice";
import Line from "@/components/bigWindowOld/Line.vue";
import VideoView from "@/components/bigWindowOld/VideoView.vue";
import Device from "@/components/bigWindowOld/Device.vue";
import Cz from "@/components/bigWindowOld/Cz.vue";
import User from "@/components/bigWindowOld/User.vue";
import UserCenter from "@/components/bigWindowOld/UserCenter.vue";
import OtherCenter from "@/components/bigWindowOld/OtherCenter.vue";
import Company from "@/components/bigWindowOld/Company.vue";
import PipeColor from "@/components/bigWindowOld/PipeColor.vue";
import yhqUser from "@/components/bigWindowOld/yhqUser.vue";
import { getUserProfile } from "@/api/system/user";

// import markerInfoWindow from './components/markerInfoWindow.vue'
import leftBar from "@/components/bigWindowOld/leftBar.vue";
import rightBar from "@/components/bigWindowOld/rightBar.vue";
import Bottom from "./components/Bottom.vue";
import { mapState } from 'vuex'
import MediumPressureLineVue from '../../components/bigWindowOld/MediumPressureLine.vue';
import PipeSelect from '../../components/bigWindowOld/PipeSelect.vue';
export default {
  name: "Home",
  components: {
    leftBar,
    rightBar,
    // Center,
    UserCenter,
    OtherCenter,
    PipeColor,
    PipeSelect,
    Bottom,
  },
  data() {
    return {
      map: null,
      show: false,
      // centerData: null,
      selarr: [1, 2, 3],
      weather: "",
      lower: "",
      higher: "",
      nowDate: "",
      nowweek: "",
      nowtime: "", // 当前日期
      typeList: [
        {
          val: 1,
          name: "中燃翔科",
        },
        {
          val: 2,
          name: "中诚然气",
        },
        {
          val: 3,
          name: "中燃韵科",
        },
      ],
      //      2:"调压箱",
      // 3:"阀门",
      // 4:"厂站",
      // 5:"监控",
      // 6:"用户",
      arr: [
        {
          val: 2,
          ischeck: false,
          imgurl: require("@/assets/bigWindowOld/firstimage/tiaoyaxiang.png"),
          name: "调压箱",
        },
        {
          val: 3,
          ischeck: false,
          imgurl: require("@/assets/bigWindowOld/firstimage/famen.png"),
          name: "阀门井",
        },
        {
          val: 4,
          ischeck: false,
          imgurl: require("@/assets/bigWindowOld/firstimage/changzhan.png"),
          name: "场 站",
        },
        {
          val: 6,
          ischeck: false,
          imgurl: require("@/assets/bigWindowOld/firstimage/user.png"),
          name: "居民用户",
        },
        {
          val: 61,
          ischeck: false,
          imgurl: require("@/assets/bigWindowOld/firstimage/syUser.svg"),
          name: "商业用户",
        },
        {
          val: 5,
          ischeck: false,
          imgurl: require("@/assets/bigWindowOld/firstimage/jiankong.png"),
          name: "监 控",
        },
        {
          val: 18,
          ischeck: false,
          imgurl: require("@/assets/bigWindowOld/firstimage/yhq.svg"),
          name: "餐饮单位液化气用户",
        },
      ],
      selarr1: [],
      // 用户的center数据
      detcetorList: [],
      centerUserId: null,
      centerTotal: null,
      userCenterShow: false,
      centerTitle: "",
      queryParams2: {
        enterpriseType: 1,
      },
      // 其他设备的center数据
      // 除了这个值，用来显示隐藏，其他值与user共用
      otherCenterShow: false,

      // 报警轮询timer
      alarmTimer: null,
    };
  },

  computed: {
    ...mapGetters(["company", "systemSetting","enterpriseId"]),
    companyLength() {
      return this.typeList.length;
    },
  },
  watch: {
    selarr(newValue) {
      if (newValue.length == this.companyLength) {
        // this.$refs.mychild.choice(0);
        // this.$refs.mychild2.choice(0);
      }
    },
  },
  async mounted() {
    // console.log(99999999999999)
    //   getPipe().then(res=>{
    //   console.log("成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功",res)
    // }).catch(res=>{
    //   console.log(123)
    // })
    // return;

    const path = eval(this.systemSetting.map_center);
    this.map = new EditorMap(
      "map",
      {
        center: path,
        // mapStyle: "amap://styles/4651b4007b4adfcf5015dd154459ab46",
        mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
        zoom: 12,
      },
      this
    );

    getUserProfile().then(response => {
        var user = response.data;
        if(user.deptId ==13){
          this.map.setCenter(["117.908541","39.688353"])
        }
      });

    console.log("--");
    // 这是测试，用本地数据
    if (this.systemSetting.prod_test === "test") {
      this.addPipeLine(pipeData, Line);
      this.addDevice(tiaoyaxiang, Device);
      this.addDevice(famen, Device);
      this.addDevice(changzhan, Cz);
      this.addDevice(user, User);
      this.addDevice(jiankong, VideoView);
    } else {
      // 调用状态管理器方法获取公司信息每次都要调取,因为每次进来都是更新的
      this.GetCompany();
      // 过滤出来id 6跟12 的不要
      this.typeList = this.company
        .filter((item) => item.conpanyId != 6 && item.conpanyId != 12)
        .map((item) => ({
          val: item.conpanyId,
          name: item.companyName,
        }));
      this.selarr = this.company
        .filter((item) => item.conpanyId != 6 && item.conpanyId != 12)
        .map((item) => item.conpanyId);
      // this.selarr1 = this.arr.map((item) => item.val);
      this.arr.forEach((item) => (item.ischeck = true));
      // getPipe() getTyx() getFm() getCz() getVideo() getUser()
      await this.goMap(getEnterprise, this.addDevice, Company, true);
      // this.goMap(getPipe, this.addPipeLine, Line, true);
      //管道
      this.goMediumPressureLineMap(getPipe, this.addMediumPipeLine, Line,MediumPressureLineVue, true);
      //调压箱
      this.labelsLayerMarksTysGoMap(getTyx, Device, false);
      //阀门井
      this.labelsLayerMarksFmjGoMap(getFm, Device, false);
      //场站
      this.labelsLayerMarksCzGoMap(getCz,Cz, false);
      //监控
      this.labelsLayerMarksVideoGoMap(getVideo,VideoView, false);
      //this.goMap(getYhq, this.addDevice2, yhqUser, false); //液化气用户上图
      if (this.enterpriseId==-2){
        this.labelsLayerMarksDeviceUserGoMap(deviceUser, yhqUser, false); //用户上图
      }

      // 用户要等一下 因为有报警数据
      this.labelsLayerMarksDetectorUserGoMap(labelsLayerMarksDetectorUserList,User, false).then((res) => {
        // 先查一下，然后开启定时器
        this.userAlarm();
        this.alarmTimer = setInterval(() => {
          this.userAlarm();
          // console.log("查询报警");
        }, alarmtime);
      });
    }
    this.currentTime();
    this.$refs.mychild.choice(this.selarr);
    this.$refs.mychild2.choice(this.selarr);
    // alert(this.enterpriseId);
    // console.log(this.enterpriseId)
  },
  methods: {
    ...mapActions({
      GetCompany: "bigWindowCompany/GetCompany",
    }),
    windowClick(){
      this.$refs.Bottom.selectUpClear();
    },
    // 点击了 大屏端 管道搜索的清除键
    clearBigWindowsSelectPipe(){
      this.map.infowindowClose();
    },
    getPipeSelectMessage(data,id) {
      let arrArea = data.split(',');
      this.map.setCenter([arrArea[0],arrArea[1]])
      this.map.filterSelectPipe(id,MediumPressureLineVue,arrArea[0],arrArea[1]);
    },
    // 管道上图
    addPipeLine(data, component) {
      for (let comp in data) {
        data[comp].forEach((pipe) => {
          this.map.addPipeLine(pipe, component);
        });
      }
    },
    // 管道上图
    addMediumPipeLine(data, component,mediumComponent) {
      for (let comp in data) {
        data[comp].forEach((pipe) => {
          this.map.addMediumPipeLine(pipe, component,mediumComponent);
        });
      }
    },
    // 设备上图
    addDevice(data, component, show) {
      for (let comp in data) {
        data[comp].forEach((pipe) => {
          this.map.addDevice(pipe, component, show);
        });
      }
    },
    addDevice2(data, component, show) {
      // console.log("data33333333333333333",data);
      for (let comp in data) {
        data[comp].forEach((pipe) => {
          pipe.iconType = 18;
          this.map.addDevice(pipe, component, show);
        });
      }
    },
    addDevice3(data, component, show) {
      for (let comp in data) {
        data[comp].forEach((pipe) => {
          if (pipe.userType == 1) {
            pipe.iconType = 6;
          } else if (pipe.userType == 2) {
            pipe.iconType = 61;
          }

          this.map.addDevice(pipe, component, show);
        });
      }
    },
    goMediumPressureLineMap(httpFunc, addFunc, component,mediumComponent, show){
      return httpFunc().then((res) => {
        // 给用户加icontype
        if (res.data && !res.data[0].iconType) {
          res.data.forEach((item) => {
            item.iconType = 6;
          });
        }
        // 根据数据格式不同，赋值不同，如果是个数组，就用res，如果不是就用res.data
        let config = {};
        if (Array.isArray(res)) {
          config = { data: res };
          // 给视频设备的conpanyType变成null,因为视频不受企业控制
          if (res[0].iconType == 5) {
            res.forEach((item) => {
              item.companyType = null;
            });
          }
        } else {
          config = { data: res.data || res.rows };
        }
        addFunc(config, component, mediumComponent,show);
        return config.iconType;
      });
    },
    
    labelsLayerMarksDeviceUserGoMap(httpFunc,component,show){
      return httpFunc().then((res) => {
        const mapData = res.data;
        this.map.labelsLayerMarksDeviceUserGoMap(mapData, component, show);
      })
    }
    ,
    labelsLayerMarksVideoGoMap(httpFunc,component,show){
      return httpFunc().then((res) => {
        const mapData = res.data;
        this.map.labelsLayerMarksVideoGoMap(mapData, component, show);
      })
    }
    ,
    labelsLayerMarksCzGoMap(httpFunc,component,show){
      return httpFunc().then((res) => {
        const mapData = res.data;
        this.map.labelsLayerMarksCzGoMap(mapData, component, show);
      })
    }
    ,
    labelsLayerMarksFmjGoMap(httpFunc,component,show){
      return httpFunc().then((res) => {
        const mapData = res.data;
        this.map.labelsLayerMarksFmjGoMap(mapData, component, show);
      })
    }
    ,
    labelsLayerMarksTysGoMap(httpFunc,component,show){
      return httpFunc().then((res) => {
        const mapData = res.data;
        this.map.labelsLayerMarksTysGoMap(mapData, component, show);
      })
    }
    ,
    labelsLayerMarksDetectorUserGoMap(httpFunc, component, show) {
      return httpFunc().then((res) => {  
        const mapData = res.data; 
        this.map.labelsLayerMarksDetectorUserList(mapData, component, show); 
      });
    },
    goMap(httpFunc, addFunc, component, show) {
      return httpFunc().then((res) => {
        // 根据数据格式不同，赋值不同，如果是个数组，就用res，如果不是就用res.data
        let config = {};
        if (Array.isArray(res)) {
          config = { data: res };
          // 给视频设备的conpanyType变成null,因为视频不受企业控制
          if (res[0].iconType == 5) {
            res.forEach((item) => {
              item.companyType = null;
            });
          }
        } else {
          config = { data: res.data || res.rows };
        }

        addFunc(config, component, show);
        return config.iconType;
      });
    },
    userAlarm() {
      userAlarm().then((res) => {
        console.log("报警", res.data);
        if (res.data.length > 0) {
          // 报警
          res.data.forEach((item) => {
            this.map.deviceAlarm(item);
          });
          // 看看谁告消警
        }
        this.map.relieveAlarm(res.data);
      });
    },

    myCenterShow(boolean) {
      this.show = boolean;
    },
    // centerDataFunc(centerData) {
    //   this.centerData = centerData;
    //   console.log(centerData);
    //   this.show = true;
    // },
    // 更改下方列表
    listChange(arr) {
      console.log(arr)
      // return;
      this.selarr=[...arr]
      this.map.allfilter(this.selarr, this.selarr1);
      this.map.infowindowClose();
      this.show = false;
      this.$refs.mychild2.choice(this.selarr);
      this.$refs.mychild.choice(this.selarr);
    },
    // 睇下列表更改
    allCompany() {
      if (this.selarr.length == 2) {
        this.selarr = [];
      } else {
        this.selarr = this.company
          .filter((item) => item.conpanyId != 6 && item.conpanyId != 12)
          .map((item) => item.conpanyId);
      }

      // this.map.companyFilter(this.selarr);
      this.map.allfilter(this.selarr, this.selarr1);
      this.map.infowindowClose();
      this.show = false;
      this.$refs.mychild2.choice(this.selarr);
      this.$refs.mychild.choice(this.selarr);
    },
    sel(index, item) {
      this.map.infowindowClose();
      this.show = false;
      const ind = this.selarr.indexOf(item.val);
      if (ind >= 0) {
        this.selarr.splice(ind, 1);
        if (item.val == 3) {
          // this.$refs.mychild.choice(1);
          // this.$refs.mychild2.choice(1);
        } else {
          // this.$refs.mychild.choice(item.val + 1);
          // this.$refs.mychild2.choice(item.val + 1);
        }
      } else {
        this.selarr.push(item.val);
        // this.$refs.mychild.choice(item.val);
        // this.$refs.mychild2.choice(item.val);
      }
      // this.map.companyFilter(this.selarr);
      this.map.allfilter(this.selarr, this.selarr1);
      this.$refs.mychild2.choice(this.selarr);
      this.$refs.mychild.choice(this.selarr);
    },

    sel1(index, item) {
      const ind = this.selarr1.indexOf(item.val);
      if (ind >= 0) {
        this.selarr1.splice(ind, 1);
      } else {
        this.selarr1.push(item.val);
      }
      this.map.allfilter(this.selarr, this.selarr1);
    },
    //用户的设备center
    getDetectorInfoList(httpFunc, queryParams, title) {
      console.log(queryParams);
      return httpFunc(queryParams).then((res) => {
        if (res.code == 200) {
          this.detcetorList = res.rows;
          this.centerUserId = queryParams.userId;
          // 总数据
          this.centerTotal = res.total;
          // this.$refs.userCenter.fade = "fade";
          this.otherCenterShow = false;
          this.userCenterShow = true;
          this.centerTitle = title;
          // 传递回去
          return res.code;
        }
      });
    },
    // 调压箱，阀门，场站睇下的设备
    getTcqDevice(queryParams, title) {
      console.log(queryParams);
      return getTcqDevice(queryParams).then((res) => {

        this.detcetorList = res;
        this.centerUserId = queryParams.devId;
        // 总数据
        this.centerTotal = res.length;
        // this.$refs.userCenter.fade = "fade";
        this.userCenterShow = false;

        this.otherCenterShow = true;
        this.centerTitle = title;
        // 传递回去
        return res.code;
      });
    },
    currentTime() {
      setInterval(() => {
        this.formatDate();
      }, 1000);
    },
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowtime = `${hour}:${minute}:${second}`;
      this.nowweek = `${weekArr[week]}`;
      this.nowDate = `${year}年${month}月${day}`;
    },
  },
  // 销毁定时器
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
    }
    // 报警
    if (this.alarmTimer) {
      clearInterval(this.alarmTimer);
    }
  },
};
</script>
<style lang="scss" scoped>
.home {
  position: relative;
  height: 100vh;
}
.goSystem {
  position: fixed;
  z-index: 9999;
  top: 50px;
  right: 20px;
  font-size: 14px;
  color: #3cc4ff;
  cursor: pointer;
  padding: 3px 10px;
  border: 1px solid rgb(57, 68, 124);
  background: #12268e33;
  /* &:hover {
    color: #00ffff;
  } */
}
#map {
  position: absolute;
  top: 0px;
  bottom: 0;
  width: 100%;
}
.banner-test {
  width: 100%;
  height: 85px;
  position: relative;
  top: -10px;
  z-index: 998;
  text-align: center;
  background: url("../../assets/bigWindowOld/firstimage/topbk.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  backdrop-filter: blur(4px);
}
.banner-test img {
  width: 450px;
  margin-top: 25px;
}

.leftbar {
  width: 565px;
  height: 93%;
  position: fixed;
  top: 70px;
  z-index: 999;
  background: url("../../assets/bigWindowOld/firstimage/le.png");
  background-size: 105% 100%;
  background-repeat: no-repeat;
  margin-left: -20px;
  pointer-events: none;
}
.rightbar {
  width: 585px;
  height: 93%;
  position: fixed;
  top: 70px;
  z-index: 999;
  right: 0;
  background: url("../../assets/bigWindowOld/firstimage/ri.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-right: -20px;
  pointer-events: none;
}
.home-div {
  width: 40%;
  height: 70px;
  position: fixed;
  bottom: 0;
  margin-left: 30%;
  // z-index: 1000;
  img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    bottom: -10px;
  }
}
.listingsSty {
  /* height: 25px; */
  // position: fixed;
  margin-left: 25%;
  width: 50%;
  display: flex;
  justify-content: space-between;
  padding-top: 25px;
  // font-family: 'arialbd';
}
.firsty {
  // width: 15%;
  min-width: 80px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  color: #fff;
  font-size: 16px;
  // float: left;
  // margin-left: 8%;
  cursor: pointer;
  // font-family: 'arialbd';
  -webkit-transition: all 1.5s ease;

  transition: all 1.5s ease;
}
.active {
  color: #00ffff;
  /* background: url(../../assets/mapinages/background.png); */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-shadow: 0 0 20px #00ffff, 0 0 35px #00ffff;
}

.weather-icon {
  float: left;
  width: 30px !important;
  height: 30px !important;
  margin-top: 10px !important;
  margin-left: 10px !important;
  padding-right: 5px;
}
.tttt {
  background-image: -webkit-linear-gradient(
    bottom,
    rgb(134, 185, 233),
    #ffffff
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.typelist-div {
  width: 755px;
  height: 50px;
  z-index: 9999;
  position: fixed;
  top: 0;
  margin-top: 90px;
  margin-left: calc((100% - 755px) / 2);
}
.list {
  z-index: 9999;
  float: left;
  margin-left: 15px;
  color: #fff;
  line-height: auto;
  text-align: center;
  /* background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
  box-shadow: inset 0px 1px 2px 1px #125c9b; */
  font-size: 12px;
  padding: 1px 10px;
  cursor: pointer;
  line-height: 26px;
  border: 1px solid rgb(57, 68, 124);
  background: #12268e33;
  border-radius: 3px;
}

.list.active {
  /* background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
  box-shadow: inset 0px 1px 2px 1px #125c9b; */
  font-size: 12px;
  color: #00ffff;
  border: 1px solid #0f6ca1;
  box-shadow: inset 0px 0px 10px 1px #0f6ca1;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.list img {
  width: 20px;
}
</style>
