{"remainingRequest":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\2023\\yancheng0718\\yanchengPowerSupply\\src\\component\\lineDetail.vue?vue&type=style&index=1&id=5c3a7f99&prod&lang=less&","dependencies":[{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\src\\component\\lineDetail.vue","mtime":1689642397091},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\css-loader\\index.js","mtime":1689642389821},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1689642396087},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\postcss-loader\\src\\index.js","mtime":1689642393431},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\less-loader\\dist\\cjs.js","mtime":1689642392421},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1689642389292},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js","mtime":1689642396086}],"contextDependencies":[],"result":["\r\n.el-select-dropdown {\r\n  background-color: rgb(14, 30, 46) !important;\r\n  border: 1px solid rgba(45, 143, 148, 0.5) !important;\r\n\r\n  .el-select-dropdown__item {\r\n    color: #fff !important;\r\n  }\r\n\r\n  .el-select-dropdown__item.hover,\r\n  .el-select-dropdown__item:hover {\r\n    background-color: rgb(18, 54, 87) !important;\r\n  }\r\n}\r\n",{"version":3,"sources":["lineDetail.vue"],"names":[],"mappings":";AAgyBA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA","file":"lineDetail.vue","sourceRoot":"src/component","sourcesContent":["<template>\r\n  <div class=\"lineContent\">\r\n    <!-- 配电线路弹窗 -->\r\n    <div class=\"lineDetail\">\r\n      <!-- <div class=\"title\">配电路线详情</div> -->\r\n      <div class=\"close\">\r\n        <img @click=\"handleClose\" src=\"@/assets/images/close.png\" style=\"cursor: pointer\" />\r\n      </div>\r\n\r\n      <div class=\"table user_skills\">\r\n\r\n        <div class=\"search\">\r\n          <el-select v-model=\"value1\" placeholder=\"请选择\" style=\"margin-left: 30px\">\r\n            <el-option v-for=\"(item, index) in districtList\" :key=\"item.index\" :label=\"item\" :value=\"item\">\r\n            </el-option>\r\n          </el-select>\r\n          <el-select v-model=\"value2\" placeholder=\"请选择\" style=\"margin-left: 10px\">\r\n            <el-option v-for=\"(item, index) in taiwanList\" :key=\"item.index\" :label=\"item\" :value=\"item\">\r\n            </el-option>\r\n          </el-select>\r\n          <el-input style=\"margin-left: 10px;\" placeholder=\"模糊中文搜索\" v-model.trim=\"searchData\"\r\n            @keyup.enter.native=\"search\">\r\n            <!-- <i slot=\"suffix\" class=\"el-input-icon el-icon-search\" @click=\"search\"></i> -->\r\n          </el-input>\r\n\r\n\r\n          <div class=\"searchBtn\" @click=\"search\"></div>\r\n          <div class=\"refurbish\" @click=\"refurbish\"></div>\r\n        </div>\r\n\r\n        <el-table @row-click=\"rowHandle\" :data=\"lineList\" style=\"width: 100%; height: calc(100% - 80px);\r\n                        overflow-y: scroll;\r\n                        position: relative;\r\n                      \" :header-cell-style=\"{ 'text-align': 'center' }\" :cell-style=\"{ 'text-align': 'center' }\" stripe>\r\n          <el-table-column prop=\"line_name\" label=\"序号\" align=\"center\" width=\"60\">\r\n            <template slot-scope=\"scope\">\r\n              {{ scope.$index + 1 }}\r\n            </template>\r\n          </el-table-column>\r\n          <el-table-column prop=\"qushu\" label=\"区域\" align=\"center\">\r\n            <!-- <template slot-scope=\"scope\">\r\n              <div>\r\n                  \r\n              </div>\r\n            </template> -->\r\n          </el-table-column>\r\n          <el-table-column prop=\"taiqu\" label=\"变电站\" align=\"center\">\r\n          </el-table-column>\r\n          <el-table-column prop=\"line_name\" label=\"线路名称\" align=\"center\" width=\"170\">\r\n            <!-- <template slot-scope=\"scope\">\r\n              <div>\r\n                  \r\n              </div>\r\n            </template> -->\r\n          </el-table-column>\r\n          <el-table-column prop=\"url_init\" label=\"原状\" align=\"center\">\r\n            <template slot-scope=\"scope\">\r\n              <div v-if=\"scope.row.url_init\" class=\"cad-icon\" @click.stop=\"openInit(scope.row)\"></div>\r\n            </template>\r\n          </el-table-column>\r\n          <el-table-column prop=\"url_dest\" label=\"目标\" align=\"center\">\r\n            <template slot-scope=\"scope\">\r\n              <div v-if=\"scope.row.url_dest\" class=\"cad-icon\" @click.stop=\"openCad(scope.row)\"></div>\r\n            </template>\r\n          </el-table-column>\r\n          <el-table-column prop=\"url_nigai\" label=\"本年度拟改\" align=\"center\">\r\n            <template slot-scope=\"scope\">\r\n              <div v-if=\"scope.row.url_nigai\" class=\"cad-icon\"></div>\r\n            </template>\r\n          </el-table-column>\r\n          <el-table-column prop=\"nigai_state\" label=\"当前状态\" align=\"center\">\r\n            <template slot-scope=\"scope\">\r\n              <div :class=\"'circle' + scope.row.nigai_state\"></div>\r\n            </template>\r\n          </el-table-column>\r\n        </el-table>\r\n      </div>\r\n    </div>\r\n    <div class=\"right-dialog\" v-show=\"rightDialog\">\r\n      <div class=\"closeBtn\">\r\n        <img @click=\"handleClose1\" src=\"@/assets/images/close.png\" style=\"cursor: pointer\" />\r\n      </div>\r\n      <!-- 标题 -->\r\n      <div class=\"title\">拟改图对比</div>\r\n      <div class=\"funBtn\">\r\n        <div class=\"initBtn\">\r\n          <!-- <el-button icon=\"el-icon-zoom-in\" @click.native=\"enlargeBtn0()\"\r\n            >放大</el-button\r\n          >\r\n          <el-button icon=\"el-icon-zoom-out\" @click=\"reduceBtn0()\"\r\n            >缩小</el-button\r\n          > -->\r\n          <span class=\"title\">{{ title }}</span>\r\n        </div>\r\n\r\n        <div class=\"nigaiBtn\">\r\n          <!-- <el-button icon=\"el-icon-zoom-in\" @click=\"enlargeBtn1()\"\r\n            >放大</el-button\r\n          >\r\n          <el-button icon=\"el-icon-zoom-out\" @click=\"reduceBtn1()\"\r\n            >缩小</el-button\r\n          > -->\r\n          <span class=\"title\">拟改图</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"pdf-content\">\r\n        <div class=\"left-content\" id=\"leftContent\">\r\n          <!-- <iframe\r\n            :src=\"pdfUrl\"\r\n            width=\"100%\"\r\n            height=\"100%\"\r\n            scrolling=\"no\"\r\n            frameborder=\"no\"\r\n          ></iframe> -->\r\n          <!-- <pdf ref=\"pdf\" :src=\"pdfUrl\"></pdf> -->\r\n          <iframe :src=\"init\" frameborder=\"0\" width=\"100%\" height=\"100%\" scrolling=\"no\"></iframe>\r\n        </div>\r\n\r\n        <div class=\"right-content\" >\r\n          <!-- <pdf ref=\"pdf1\" :src=\"pdfUrl1\"></pdf>\r\n          -->\r\n          <iframe :src=\"nigai\" ref=\"iframeId\" frameborder=\"0\" width=\"100%\" height=\"100%\" scrolling=\"no\"></iframe>\r\n\r\n          <!-- <iframe\r\n            ref=\"iframe\"\r\n            id=\"iframe\"\r\n            :src=\"pdfUrl1\"\r\n            width=\"100%\"\r\n            height=\"100%\"\r\n            scrolling=\"no\"\r\n            frameborder=\"no\"\r\n          >\r\n          </iframe> -->\r\n        </div>\r\n      </div>\r\n      <!-- <div class=\"footer\"> -->\r\n      <!-- <div class=\"text-detail\">说明文字:</div> -->\r\n      <!-- 说明文字 -->\r\n      <!-- <div class=\"text-content\">\r\n          <el-input type=\"textarea\" placeholder=\"说明文字\" v-model=\"textarea\">\r\n          </el-input>\r\n        </div>\r\n      </div> -->\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { getLine } from \"../api/index\";\r\n// import Mx from \"mxdraw\";\r\nimport pdf from \"vue-pdf\";\r\nexport default {\r\n  name: \"lineDetail\",\r\n  props: [\"lineItem\"],\r\n  components: {\r\n    pdf,\r\n  },\r\n  data() {\r\n    return {\r\n      init: '',\r\n      nigai: '',\r\n      // 说明文字 ，文本域\r\n      textarea: \"\",\r\n      // 搜索文字\r\n      searchData: \"\",\r\n      //\r\n      lineList: null,\r\n      pdfUrl: \"\",\r\n      rightDialog: false,\r\n      // cad: \"/assets/cad/cad.dwg\",\r\n      pdfUrl1: \"\", //nigai图\r\n      districtList: [], //区属列表\r\n      value1: \"\",\r\n      taiwanList: [], //台区列表\r\n      value2: \"\",\r\n      // 原状图\r\n      scale: 100,\r\n      scale1: 100, //拟改图\r\n\r\n      title: '原状图',\r\n      host: '',\r\n      cadFile: ''\r\n    };\r\n  },\r\n  methods: {\r\n\r\n\r\n    // 放大按钮 原状\r\n    enlargeBtn0() {\r\n      this.scale += 5;\r\n      this.$nextTick(() => {\r\n        this.$refs.pdf.$el.style.width = parseInt(this.scale) + \"%\";\r\n        //  console.log(this,'and',this.$refs.pdf.$el.style.width);\r\n      });\r\n    },\r\n    // 放大按钮 拟改\r\n    enlargeBtn1() {\r\n      this.scale1 += 5;\r\n      // debugger\r\n      this.$nextTick(() => {\r\n        this.$refs.pdf1.$el.style.width = parseInt(this.scale1) + \"%\";\r\n      });\r\n      // debugger\r\n    },\r\n    reduceBtn0() {\r\n      if (this.scale == 100) {\r\n        return;\r\n      }\r\n      this.scale += -5;\r\n      this.$nextTick(() => {\r\n        this.$refs.pdf.$el.style.width = parseInt(this.scale) + \"%\";\r\n        //  console.log(this,'and',this.$refs.pdf.$el.style.width);\r\n      });\r\n    },\r\n    reduceBtn1() {\r\n      if (this.scale1 == 100) {\r\n        return;\r\n      }\r\n      this.scale1 += -5;\r\n      this.$nextTick(() => {\r\n        this.$refs.pdf1.$el.style.width = parseInt(this.scale1) + \"%\";\r\n      });\r\n    },\r\n    rowHandle(event) {\r\n      this.init = ''\r\n      this.nigai = ''\r\n\r\n      // console.log(event, '行数据');\r\n      if (event.url_init != '') {\r\n        let init = event.url_init.split('/')[4];\r\n        this.init = this.cadFile + '?file=' + init + '&&time=' + new Date().getTime()\r\n      }\r\n      if (event.url_nigai != '') {\r\n        let nigai = event.url_nigai.split('/')[4];\r\n        // console.log(init, nigai, '数据');\r\n        // http://localhost:3000/mxweb3d.html?file=%E5%8E%9F%E8%A3%85%E5%9B%BE_20230309170721326.dwg\r\n        // this.cadFile + '?file='\r\n        // this.nigai = 'http://localhost:3000/mxweb3d.html?file=' + nigai\r\n        this.nigai = this.cadFile + '?file=' + nigai + '&&time=' + new Date().getTime()\r\n      }\r\n      this.title = '原状图'\r\n      this.rightDialog = true;\r\n      // if (init == undefined || nigai == undefined) {\r\n      //   return;\r\n      // }\r\n      // 原装图\r\n      // var initUrl =\r\n      //   \"/app\" + \"/\" + init.split(\"/\")[3] + \"/\" + init.split(\"/\")[4];\r\n      // var nigaiUrl =\r\n      //   \"/app\" + \"/\" + nigai.split(\"/\")[3] + \"/\" + nigai.split(\"/\")[4];\r\n      // // console.log(initUrl,'原装图');\r\n      // this.$nextTick(() => {\r\n      //   // console.log(this.$refs.iframe);\r\n      //   // document.querySelector('iframe').src = e\r\n      //   // 原状图\r\n      //   if (initUrl != \"\") {\r\n      //     this.pdfUrl = initUrl;\r\n      //   }\r\n      //   if (nigaiUrl != \"\") {\r\n      //     this.pdfUrl1 = nigaiUrl;\r\n      //   }\r\n\r\n      // this.rightDialog = true;\r\n      // });\r\n    },\r\n\r\n    handleClose() {\r\n      this.$parent.lineItem = null;\r\n      this.$parent.lineShow = \"\";\r\n    },\r\n    // 关闭右侧弹窗\r\n    handleClose1() {\r\n      this.rightDialog = false;\r\n      this.init = ''\r\n        this.nigai = ''\r\n    },\r\n    getCadFile() {\r\n\r\n      getLine({ action: 'cad' }).then(res => {\r\n        // console.log(res, 'cad请求数据');\r\n        if (res.data.state == true) {\r\n          this.cadFile = res.data.data\r\n        }\r\n      })\r\n    },\r\n    // 打开cad\r\n    openCad(event) {\r\n      this.init = ''\r\n      this.nigai = ''\r\n      if (event.url_dest != '') {\r\n        let dest = event.url_dest.split('/')[4];\r\n        this.init = this.cadFile + '?file=' + dest\r\n      }\r\n      if (event.url_nigai != '') {\r\n        let nigai = event.url_nigai.split('/')[4];\r\n        this.nigai = this.cadFile + '?file=' + nigai +'&&time=' + new Date().getTime()\r\n      }\r\n\r\n\r\n      // http://localhost:3000/mxweb3d.html?file=%E5%8E%9F%E8%A3%85%E5%9B%BE_20230309170721326.dwg\r\n\r\n\r\n      // console.log(url, 'cad');\r\n      // 目标\r\n      this.rightDialog = true;\r\n      this.title = '目标图'\r\n    },\r\n    // 原状图\r\n    openInit(event) {\r\n      this.$nextTick(() => {\r\n        this.init = ''\r\n        this.nigai = ''\r\n      // document.getElementById('iframeId').contentWindow.location.reload(true);\r\n      if (event.url_init != '') {\r\n        let init = event.url_init.split('/')[4];\r\n        this.init = this.cadFile + '?file=' + init + '&&time=' + new Date().getTime()\r\n      }\r\n      if (event.url_nigai != '') {\r\n        let nigai = event.url_nigai.split('/')[4];\r\n        // console.log(init, nigai, '数据');\r\n        // http://localhost:3000/mxweb3d.html?file=%E5%8E%9F%E8%A3%85%E5%9B%BE_20230309170721326.dwg\r\n\r\n        this.nigai = this.cadFile + '?file=' + nigai + '&&time=' + new Date().getTime()\r\n\r\n      }\r\n      this.title = '原状图'\r\n      this.rightDialog = true;\r\n      })\r\n\r\n      \r\n    },\r\n    // 回城进行搜索\r\n    search() {\r\n      if (this.searchData == \"\") {\r\n        getLine({\r\n          action: \"pdxl\",\r\n          // linename: \"\",\r\n          qushu: this.value1,\r\n          taiqu: this.value2,\r\n        }).then(({ data }) => {\r\n          // console.log(data, '数据');\r\n          this.lineList = data.data;\r\n        });\r\n        // return;\r\n      } else {\r\n        // 把searchData带着，发请求获取有关联的数据并呈现在页面中\r\n        getLine({\r\n          action: \"pdxl\",\r\n          linename: this.searchData,\r\n          qushu: this.value1,\r\n          taiqu: this.value2,\r\n        }).then(({ data }) => {\r\n          console.log(data, '数据');\r\n          this.lineList = data.data;\r\n        });\r\n      }\r\n    },\r\n    refurbish() {\r\n      this.lineList = this.lineItem;\r\n      // 点击还原初始\r\n      this.searchData = \"\";\r\n      this.value1 = ''\r\n      this.value2 = ''\r\n    },\r\n  },\r\n  created() {\r\n    this.getCadFile()\r\n    // console.log(location.host,'.......');\r\n    this.host = location.host\r\n    this.lineList = this.lineItem;\r\n    // 获取区属的请求\r\n    getLine({ action: \"qushu\" }).then(({ data }) => {\r\n      // console.log(data, \"区属的数据\");\r\n      if (data.state == true) {\r\n        this.districtList = data.data; //区属赋值\r\n        // this.value1 = data.data[0];\r\n      }\r\n    });\r\n    // 获取台区的请求\r\n    if (this.value1 != \"\") {\r\n      getLine({ action: \"taiqu\", qushu: this.value1 }).then(({ data }) => {\r\n        // console.log(data, \"台区的数据\");\r\n        if (data.state == true) {\r\n          this.taiwanList = data.data; //台区赋值\r\n        }\r\n      });\r\n    }\r\n  },\r\n  watch: {\r\n    // 监听input输入框，若没东西了，就回复默认状态\r\n    searchData: function (newnew, oldold) {\r\n      if (newnew == \"\") {\r\n        this.lineList = this.lineItem;\r\n        // 发请求回到初始列表数据状态\r\n        // console.log(\"搜索框没东西了，回复初始状态\");\r\n      }\r\n    },\r\n    value1: function (newVal, old) {\r\n      // console.log(newVal, \"数据\");\r\n      if (newVal) {\r\n        getLine({ action: \"taiqu\", qushu: newVal }).then(({ data }) => {\r\n          // console.log(data, \"台区的数据\");\r\n          if (data.state == true) {\r\n            this.taiwanList = data.data; //台区赋值\r\n            // this.value2 = data.data[0];\r\n          }\r\n        });\r\n      }\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style lang=\"less\" scoped>\r\n/deep/ .el-textarea__inner {\r\n  background-color: rgba(16, 40, 49, 38);\r\n  border-color: #164a75;\r\n}\r\n\r\n.cad-icon {\r\n  width: 25px;\r\n  height: 22px;\r\n  background-image: url(\"../assets/images/cadIcon.png\");\r\n  background-size: 100% 100%;\r\n  // text-align: center;\r\n  margin: 0 auto;\r\n}\r\n\r\n.circle0 {\r\n  width: 20px;\r\n  height: 20px;\r\n  // background-color: tomato;\r\n  border: 2px solid #fff;\r\n  border-radius: 50%;\r\n  margin: 0 auto;\r\n}\r\n\r\n.circle1 {\r\n  width: 20px;\r\n  height: 20px;\r\n  background-color: red;\r\n  // border: 2px solid #fff;\r\n  border-radius: 50%;\r\n  margin: 0 auto;\r\n}\r\n\r\n.circle2 {\r\n  width: 20px;\r\n  height: 20px;\r\n  background-color: green;\r\n  // border: 2px solid #fff;\r\n  border-radius: 50%;\r\n  margin: 0 auto;\r\n}\r\n\r\n.lineContent {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.lineDetail {\r\n  width: 30%;\r\n  height: 95%;\r\n  position: relative;\r\n  background: url(\"../assets/images/leftLine.png\") no-repeat;\r\n  background-size: 100% 100%;\r\n  -webkit-animation: fadeInDown 0.3s;\r\n  animation: fadeInDown 0.3s;\r\n  padding: 15px 25px;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-content: space-between;\r\n\r\n  .close {\r\n    position: absolute;\r\n    right: 4%;\r\n    top: 4%;\r\n  }\r\n\r\n  .table {\r\n    width: 100%;\r\n    height: 95%;\r\n    // border: 1px solid red;\r\n    background: url(\"../assets/images/intervalFrame.png\") no-repeat;\r\n    background-size: 100% 100%;\r\n    padding: 15px 20px;\r\n  }\r\n}\r\n\r\n// 右边弹框\r\n.right-dialog {\r\n  position: relative;\r\n  width: 67%;\r\n  height: 95%;\r\n  background: url(\"../assets/images/linetail-right.png\") no-repeat;\r\n  background-size: 100% 100%;\r\n  margin-left: 30px;\r\n  padding: 1%;\r\n  box-sizing: border-box;\r\n\r\n  &>.title {\r\n    position: absolute;\r\n    top: 1%;\r\n    left: 2%;\r\n  }\r\n\r\n  // align-items: center;\r\n  .funBtn {\r\n    display: flex;\r\n    // justify-content: space-between;\\\r\n    // background-color: #fff;\r\n    margin-top: 2%;\r\n    justify-content: space-between;\r\n\r\n    .initBtn,\r\n    .nigaiBtn {\r\n      width: 49.5%;\r\n      text-align: center;\r\n      // background-color: #fff;\r\n\r\n    }\r\n\r\n    .title {\r\n      // margin-left: 25%;\r\n      font-size: 23px;\r\n      color: #fff;\r\n      margin-bottom: 1%;\r\n    }\r\n\r\n  }\r\n\r\n  .pdf-content {\r\n    width: 100%;\r\n    height: 92%;\r\n    display: flex;\r\n    justify-content: space-between;\r\n\r\n    .right-content,\r\n    .left-content {\r\n      width: 49.5%;\r\n      height: 100%;\r\n      position: relative;\r\n      // background-color: #fff;\r\n      // overflow-y: scroll;\r\n      // background: #000;\r\n      // border-radius: 40px;\r\n      // overflow: scroll;\r\n    }\r\n\r\n    .left-content {\r\n      // background-color: tomato;\r\n      // span {\r\n      //   width: 100% !important;\r\n      //   height: 100% !important;\r\n      //   // /deep/ canvas {\r\n      //   //   height: 100% !important;\r\n      //   // }\r\n      // }\r\n    }\r\n  }\r\n\r\n  .rightBtn {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    z-index: 999;\r\n    // background-color: tomato;\r\n  }\r\n\r\n  // 标题\r\n  .title {\r\n    font-size: 28px;\r\n    font-weight: 700;\r\n    color: transparent;\r\n    -webkit-background-clip: text;\r\n    background-clip: text;\r\n    display: inline-block;\r\n    background-image: -webkit-gradient(linear,\r\n        left top,\r\n        left bottom,\r\n        from(#ffffff),\r\n        to(#56f4fe));\r\n    background-image: linear-gradient(to bottom, #ffffff, #56f4fe);\r\n  }\r\n\r\n  .closeBtn {\r\n    // width: 100%;\r\n    // height: 4%;\r\n    // background-color: turquoise;\r\n    // display: flex;\r\n    // align-items: center;\r\n    // justify-content: flex-end;\r\n    position: absolute;\r\n    right: 0.3%;\r\n    top: 3%;\r\n    z-index: 1000;\r\n\r\n    img {\r\n      margin-right: 20px;\r\n    }\r\n\r\n    // position: absolute;\r\n    // right: 2%;\r\n    // top: 3%;\r\n  }\r\n\r\n  .footer {\r\n    height: 10%;\r\n    width: 100%;\r\n    // background-color: #ffffff;\r\n    display: flex;\r\n    // align-items: center;\r\n  }\r\n\r\n  // .text-detail {\r\n  //   width: 10%;\r\n  //   height: 100%;\r\n  //   display: flex;\r\n  //   align-items: center;\r\n  //   justify-content: center;\r\n  // }\r\n  .text-content {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    /deep/ .el-textarea {\r\n      height: 90%;\r\n\r\n      /deep/ textarea {\r\n        background-color: transparent;\r\n        border-top: 2px solid #fff;\r\n        border-bottom: 2px solid #fff;\r\n        border-left: none;\r\n        border-right: none;\r\n        border-color: #2e7680 !important;\r\n        height: 100%;\r\n        color: #fff;\r\n        font-size: 18px;\r\n      }\r\n\r\n      background-color: transparent !important;\r\n    }\r\n\r\n  }\r\n}\r\n\r\n.user_skills {\r\n  .search {\r\n    text-align: left;\r\n    margin: 20px 0;\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    .searchBtn,\r\n    .refurbish {\r\n      width: 122px;\r\n      height: 39px;\r\n      background-image: url(\"../assets/images/search.png\");\r\n      background-size: 100% 100%;\r\n      margin-left: 10px;\r\n    }\r\n\r\n    .refurbish {\r\n      background-image: url(\"../assets/images/refurbish.png\");\r\n      margin-left: 10px;\r\n    }\r\n\r\n    // /deep/ .el-input__suffix {\r\n    //   display: flex;\r\n    //   align-items: center;\r\n    // }\r\n    .el-input {\r\n      width: 260px;\r\n    }\r\n\r\n    ::v-deep .el-input__inner {\r\n      background-color: transparent !important;\r\n      border-color: #2e7680 !important;\r\n      border-left: none !important;\r\n      color: #fff !important;\r\n      border-right: none !important;\r\n    }\r\n  }\r\n\r\n  /**\r\n  表格有滚动效果但是不显示滚动条 */\r\n  /deep/ .el-table::-webkit-scrollbar {\r\n    display: none !important;\r\n  }\r\n\r\n  /deep/ .el-select .el-input {\r\n    width: 100px;\r\n  }\r\n\r\n  /deep/ .is-scrolling-none {\r\n    overflow: hidden;\r\n    overflow-y: auto;\r\n    overflow-x: scroll;\r\n    height: calc(100% - 56px);\r\n  }\r\n\r\n  /deep/ .is-scrolling-none::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n\r\n  /deep/.el-table--scrollable-y ::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n\r\n  /deep/.el-table--scrollable-x ::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n\r\n  /deep/ .el-table {\r\n    background-color: transparent !important;\r\n  }\r\n\r\n  /deep/ .el-table th {\r\n    background-color: transparent !important;\r\n  }\r\n\r\n  /deep/ .el-table__header {\r\n    height: 48px;\r\n    background: url(\"../assets/images/intervalTable.png\") no-repeat;\r\n    background-size: 100% 100%;\r\n    // margin-bottom: 48px;\r\n    // position: absolute;\r\n    // top: 0;\r\n    // left: 0;\r\n  }\r\n\r\n  /deep/ .el-table__header th {\r\n    border: none;\r\n    padding: 0;\r\n    height: 40px;\r\n\r\n    .cell {\r\n      height: 100%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-around;\r\n    }\r\n\r\n    &.el-table__cell.is-leaf {\r\n      border: none !important;\r\n    }\r\n  }\r\n\r\n  /deep/ .el-table tr {\r\n    background-color: transparent !important;\r\n    height: 55px;\r\n    font-size: 18px !important;\r\n  }\r\n\r\n  /deep/ .el-table--enable-row-transition .el-table__body td,\r\n  .el-table .cell {\r\n    background-color: transparent !important;\r\n    border: none;\r\n    color: #ffffff;\r\n  }\r\n\r\n  /deep/ .el-table__body td .cell {\r\n    white-space: nowrap !important;\r\n    // word-break: break-all;\r\n  }\r\n\r\n  /deep/ .el-table th.el-table__cell>.cell {\r\n    color: rgb(86, 254, 226);\r\n  }\r\n\r\n  /deep/.el-table .el-table__cell {\r\n    padding: 5px 0;\r\n  }\r\n\r\n  &::before {\r\n    //去除底部白线\r\n    left: 0;\r\n    bottom: 0;\r\n    width: 100%;\r\n    height: 0px;\r\n  }\r\n}\r\n\r\n.el-table::before {\r\n  background-color: transparent;\r\n}\r\n\r\n::v-deep .el-table .el-table__body tr.el-table__row td {\r\n  background: rgba(79, 218, 255, 0.1) !important;\r\n}\r\n\r\n::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {\r\n  background: rgba(79, 218, 255, 0.06) !important;\r\n}\r\n</style>\r\n<style lang=\"less\">\r\n.el-select-dropdown {\r\n  background-color: rgb(14, 30, 46) !important;\r\n  border: 1px solid rgba(45, 143, 148, 0.5) !important;\r\n\r\n  .el-select-dropdown__item {\r\n    color: #fff !important;\r\n  }\r\n\r\n  .el-select-dropdown__item.hover,\r\n  .el-select-dropdown__item:hover {\r\n    background-color: rgb(18, 54, 87) !important;\r\n  }\r\n}\r\n</style>\r\n"]}]}