<template>
  <div id="dfzyjgk">
    <div class="rwk-right">
      <div class="top-div">
        <el-row
          :gutter="24"
          style="
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
          "
        >
          <el-col :span="6">
            <div class="div-type">
              <div class="top-type-span">
                <span>对象地区：</span>
              </div>
              <div class="top-type-div">
                <div
                  v-for="item in this.type_arr_country"
                  @click="dq_fun(item)"
                  :class="{
                    'active-CountryRegion': typeCountryRegion.value == item.value,
                  }"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
            <div class="div-type">
              <div class="top-type-span">
                <span>类型：</span>
              </div>
              <div class="top-type-div">
                <div
                  v-for="item in this.type_arr"
                  @click="MilitaryPolitics_fun(item)"
                  :class="{
                    'active-MilitaryPolitics':
                      typeMilitaryPolitics.value == item.value,
                  }"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
          </el-col>
          <div class="line-s"></div>
          <el-col :span="5" class="tm-div">
            <SelectTree :value="value_select" filterable :data="tree_data" @NodeClick="NodeClick"/>
          </el-col>
          <!-- <div class="line-s"></div> -->
          <!-- <el-col :span="5" class="jzxs">
            <div
              :class="['rk-jg-div', type_rw_jg == 0 ? 'active-tb' : '']"
              @click="qh_type_rwjg(0)"
            >
              <div class="tb-div"></div>
              <div class="tb-span">
                <span>人物库</span>
              </div>
            </div>
            <div
              :class="['rk-jg-div', type_rw_jg == 1 ? 'active-tb' : '']"
              @click="qh_type_rwjg(1)"
            >
              <div class="tb-div"></div>
              <div class="tb-span">
                <span>机构库</span>
              </div>
            </div>
          </el-col> -->
          <div class="line-s"></div>
          <el-col
            :span="5"
            style="position: relative; padding: 0px"
            class="serch-div"
          >
            <el-input placeholder="请输入番号或简称" v-model="input3"></el-input>
            <el-button
              type="primary"
              @click="query_qb(1)"
              style="
                position: absolute;
                right: 8px;
                top: 4px;
                line-height: 4px;
                border-radius: 20px;
                height: 30px;
                background: linear-gradient(to right, #89f7fe, #66a6ff);
              "
              >搜索</el-button
            >
          </el-col>
          <!-- <div class="line-s"></div> -->
          <el-col :span="2" style="max-width: calc(9% - 31px)" class="pub-col">
            <el-button
              type="primary"
              @click="query_zhcx()"
              style="
                line-height: 4px;
                border-radius: 20px;
                height: 30px;
                background: linear-gradient(to right, #89f7fe, #66a6ff);
              "
              >高级搜索</el-button
            >
          </el-col>
        </el-row>
      </div>
      <div class="bottom-div">
        <template v-for="(item, index) in rwkxx">
          <div
            class="rwxx-div animate__animated bk-bmdx-animation"
            :class="[
              index % 4 == 0
                ? 'animate__lightSpeedInLeft'
                : index % 4 == 1
                ? 'animate__zoomIn'
                : index % 4 == 2
                ? 'animate__zoomIn'
                : 'animate__lightSpeedInRight',
            ]"
            @click="rwxq(item, index)"
          >
            <div :class="['tilts', tab_actives == index ? 'table-active' : '']">
              <!-- <div class="zyx">
              <div>
                <span
                  :style="{
                    background:
                      item.extraProperty['重要性'] == '重要'
                        ? '#ff4444'
                        : '#ff9e44',
                  }"
                  >{{ item.extraProperty["重要性"] }}</span
                >
              </div>
            </div>
            <div class="zyx1">
              <div>
                <span>{{ item.class_qf == 1 ? "本机构" : "" }}</span>
              </div>
            </div> -->
              <div class="img-div">
                <img class="tx-bg" :src="item.info.avatarUrl==null?'':item.info.avatarUrl" :onerror="errimg" />
              </div>
              <div class="text-div">
                <div class="name-div">
                  <div class="top-span">
                    {{ item.info.jgfh.value }}
                  </div>
                  <div class="bottom-span">
                    {{ item.info.jgjc.value }}
                  </div>
                </div>
                <!-- <div class="xq-div">
                <div class="tag-group">
                  <el-tag
                    v-for="(items, index) in item.labels"
                    v-if="item.labels != ''"
                    :key="index"
                    :type="tags[index % tags.length].type"
                    effect="dark"
                  >
                    {{ items }}
                  </el-tag>
                </div>
              </div> -->
              </div>
            </div>
          </div>
        </template>
      </div>

      <div class="page-div">
        <el-pagination
          class="myPagination"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          :page-size="pageInfo.pageSize"
          :current-page="pageInfo.current_page"
          :total="pageInfo.total"
          @current-change="handleCurrentChange_lb"
          :page-sizes="[10, 20, 50, 100]"
        >
        </el-pagination>
      </div>
      <el-collapse-transition>
        <div class="gjcx-div" v-show="show">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
              <label>机构番号</label>
              <el-input
                v-model="formInline.name"
                placeholder="机构番号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <label>机构简称</label>
              <el-input
                v-model="formInline.jc"
                placeholder="机构简称"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <label>国家地区</label>
              <el-input
                v-model="formInline.gj"
                placeholder="国家地区"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <label>机构简介</label>
              <el-input
                v-model="formInline.jgjj"
                placeholder="机构简介"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <label>标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;签</label>
              <el-input v-model="formInline.bq" placeholder="标签"></el-input>
            </el-form-item>
            <el-form-item>
              <label>重&nbsp;&nbsp;要&nbsp;&nbsp;性</label>
              <el-input
                v-model="formInline.zyx"
                placeholder="重要性"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <div class="button-discusss" @click="zhcx(1)">查询</div>
              <div class="button-discusss" @click="gb_zhcx()">关闭</div>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>
<script>
import {
  get,
  post,
  fileUpload,
  delete_util,
  getCookie,
  delCookie,
} from "../../util/http_util";
import jh_bg from "../../assets/img/dfzy/zwtp.png";
import XLSX from "xlsx";
import { uuid } from "../../util/data_util";
import VanillaTilt from "vanilla-tilt";
import SelectTree from "./seleteTree.vue"
import "animate.css";
// import navs from "./jg_xq.vue";
import { imgUrl } from "../../api/publicUrl";
export default {
  // components: { navs },
  components: { SelectTree },
  data() {
    return {
      errimg: "this.src='" + jh_bg + "'",
      // currentRole_jg_data: "navs",
      clientDetails_jg_data: {},
      xzzd: [],
      wzmk_data: [],
      option_rwmb: [],
      option_value_rwmb: "",
      is_true: true,
      obj_name: "",
      fileList: [],
      file_types: ".XLSX",
      option_rwmb_pl: [],
      // folder: "dfzy-rwk", //头像上传文件夹
      fl_type: 2, //查询机构库下面的模板,机构库为2,4,6
      fileList_head: [],
      file_head: {},
      file_types_head: ".PNG,.JPG,.JPEG",
      mb_table_s: [],
      arr_mouldTables: [],
      arr_mouldTables_comment: [],

      filterText: "",
      tree_data: [],
      data_tree_node: "",
      name_edit: "",
      dialogVisible_edit: false,
      obj_jgxx: {},

      input3: "",
      pageInfo: {
        total: 0,
        pageSize: 10,
        current_page: 1,
      },
      rwkxx: [],
      jgName: "",
      jgName_public: 2,//判断当前是内网机构还是外网机构
      tags: [
        { type: "" },
        { type: "success" },
        { type: "info" },
        { type: "warning" },
        { type: "danger" },
      ],
      type_qf: 1,
      formInline: {
        name: "",
        jc: "",
        gj: "",
        jgjj: "",
        bq: "",
        zyx: "",
      },
      show: false,

      type_arr_country: [
        { name: "美国", value: "1" },
        { name: "英国", value: "2" },
        { name: "日本", value: "3" },
        { name: "台湾", value: "4" },
      ],
      type_arr: [
        { name: "军事", value: "1" },
        { name: "政治", value: "2" },
      ],
      type_rw_jg: 0,
      typeCountryRegion: {value:'',name:''},
      typeMilitaryPolitics: {value:'',name:''},
      tab_actives: "-1", //表格切换
      categoryId: null,
      valueTitle: "",
      value_select:4,
    };
  },
  methods: {
    query_zhcx() {
      this.show = !this.show;
    },
    zhcx(pageNum) {
      this.input3 = "";
      this.type_qf = 3;
      this.typeCountryRegion =  {value:'',name:''};
      this.typeMilitaryPolitics = {value:'',name:''};
      this.pageInfo.current_page = pageNum;
      let pageSize = this.pageInfo.pageSize;
      if(this.jgName_public==1){
        this.value_select = 1
      }else{
        this.value_select = 4
      }
      post(
        `api/rest/mongo/organization/queryOrganization?pageNum=${pageNum}&pageSize=${pageSize}`,
        {
          module: this.jgName_public == 1 ? "DF" : "DFWW",
          combinationSearch:{
            jgfh: this.formInline.name,
            jgjc: this.formInline.jc,
            gjdq: this.formInline.gj,
            jgjj: this.formInline.jgjj,
            bq: this.formInline.bq,
            zyx: this.formInline.zyx,
          }
        }
      ).then((res) => {
        this.rwkxx = [];
        setTimeout(() => {
          this.pageInfo.total = 0;
          if (res.records.length > 0) {
            res.records.forEach((item) => {
              this.rwkxx.push(item);
            });
            this.pageInfo.total = res.total;
          }
        }, 500);
      });
    },
    gb_zhcx() {
      this.show = false;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //查询tree数据
    query_tree_jg() {
      this.tree_data = [];
      get("api/rest/mongo/organization/queryTree?module=" + 'DF')
        .then((res) => {
          let arr = [
            {
              id: 1,
              label: "机构列表",
              level: 0,
              children: res,
            },
          ];
          this.tree_data = this.initData(arr, 1);
          get(
            "api/rest/mongo/organization/queryTree?module=" +
              "DFWW"
          )
            .then((res1) => {
              let arr1 = {
                id: 4,
                label: "外网机构列表",
                level: 0,
                type: 2,
                children: this.initData(res1, 2),
              };
              this.tree_data.push(arr1);
              this.value_select = 4;
            })
            .catch((err) => {
              this.$message.warning(err.message);
            });
        })
        .then((res) => {
          this.handleCurrentChange_lb(1);
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },
    query_tree() {
      get("api/rest/resource/queryCharacterMould?type=" + this.fl_type)
        .then((datas) => {
          this.option_rwmb = [];
          this.option_rwmb_pl = [];
          if (datas.length > 0) {
            datas.forEach((item) => {
              this.option_rwmb.push({ value: item.id, label: item.name });
              this.option_rwmb_pl.push({ value: item.id, label: item.name });
            });
          }
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },
    rwxq(item, index) {
      // this.tab_actives = index;
      this.$router.push({
        name: "敌方资源机构详情" + this.$route.meta.type_name,
        params: { key: item, types: true },
      });
    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.pageInfo.current_page = 1;
      this.handleCurrentChange_lb(1);
    },
    handleCurrentChange_lb(pageNum) {
      if (this.type_qf == 1) {
        this.query(pageNum);
      } else if (this.type_qf == 2) {
        this.query_qb(pageNum);
      } else {
        this.zhcx(pageNum);
      }
    },
    query_qb(pageNum) {
      this.formInline = {
        name: "",
        jc: "",
        gj: "",
        jgjj: "",
        bq: "",
      };
      this.type_qf = 2;
      this.pageInfo.current_page = pageNum;
      let pageSize = this.pageInfo.pageSize;
      let name = this.input3;
      if(this.jgName_public==1){
        this.value_select = 1
      }else{
        this.value_select = 4
      }

      post(
        `api/rest/mongo/organization/queryOrganization?pageNum=${pageNum}&pageSize=${pageSize}`,
        {
          module: this.jgName_public == 1 ? "DF" : "DFWW",
          name:name,
          type:this.typeMilitaryPolitics.name==''?null:this.typeMilitaryPolitics.name,
          nation:this.typeCountryRegion.name==''?null:this.typeCountryRegion.name,
        }
      ).then((res) => {
        this.rwkxx = [];
        setTimeout(() => {
          this.pageInfo.total = 0;
          if (res.records.length > 0) {
            res.records.forEach((item) => {
              this.rwkxx.push(item);
            });
            this.pageInfo.total = res.total;
          }
        });
      }, 500);
    },

    query(pageNum) {//查询当前机构下的子机构
      this.formInline = {
        name: "",
        jc: "",
        gj: "",
        jgjj: "",
        bq: "",
      };
      this.input3 = '';
      this.pageInfo.current_page = pageNum;
      let pageSize = this.pageInfo.pageSize;
      let ids = "";
      if (this.jgName != "1" && this.jgName != "" && this.jgName != "4") {
        ids = "&id=" + this.jgName;
      }
      let param_url = "";
      if (this.jgName_public == 1) {
        param_url = "api/rest/mongo/organization/queryChildren?pageNum=";
      } else if (this.jgName_public == 2) {
        param_url = "api/rest/mongo/organization/queryOnlineChildren?pageNum=";
      }
      get(
        param_url +
          pageNum +
          "&pageSize=" +
          pageSize +
          "&module=" +
          (this.jgName_public == "1" ? 'DF' : "DFWW") +
          ids
      )
        .then((res) => {
          this.rwkxx = [];
          setTimeout(() => {
            this.pageInfo.total = 0;
            if (res.records.length > 0) {
              res.records.forEach((item, index) => {
                  // if (
                  //   pageNum == 1 &&
                  //   this.jgName != "1" &&
                  //   this.jgName != "" &&
                  //   this.jgName != "4" &&
                  //   index == 0
                  // ) {
                  //   item.organization["class_qf"] = 1;
                  // } else {
                  //   item.organization["class_qf"] = 2;
                  // }
                  this.rwkxx.push(item);
              });
              this.pageInfo.total = res.total;
            }
          }, 500);
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },

    initData(orgList, type) {
      // 第一种
      if (orgList.length) {
        for (var i = 0; i < orgList.length; i++) {
          orgList[i].type = type;
          if (orgList[i].children.length) {
            // 如果有 children 则继续递归遍历
            this.initData(orgList[i].children, type);
          }
        }
      }
      return orgList;
    },
    jsonToArray(nodes) {
      var r = [];
      if (Array.isArray(nodes)) {
        for (var i = 0, l = nodes.length; i < l; i++) {
          r.push(nodes[i]); // 取每项数据放入一个新数组
          if (
            Array.isArray(nodes[i]["children"]) &&
            nodes[i]["children"].length > 0
          )
            // 若存在children则递归调用，把数据拼接到新数组中，并且删除该children
            r = r.concat(this.jsonToArray(nodes[i]["children"]));
          delete nodes[i]["children"];
        }
      }
      return r;
    },
    //查询当前节点的最顶层节点ID
    getparentNode(data) {
      if (data.data.parentCode == null) {
        return data.data.id;
      } else {
        return this.getparentNode(data.parent);
      }
    },
    /**国家地区切换 */
    dq_fun(e) {
      if(this.typeCountryRegion.value==e.value){
        this.typeCountryRegion = {value:'',name:''};
      }else{
        this.typeCountryRegion = e;
      }
      this.query_qb(1);
    },
    /**军事政治类型切换 */
    MilitaryPolitics_fun(e) {
      if(this.typeMilitaryPolitics.value==e.value){
        this.typeMilitaryPolitics = {value:'',name:''};
      }else{
        this.typeMilitaryPolitics = e;
      }
      this.query_qb(1);
    },
    /**人物机构切换 */
    qh_type_rwjg(e) {
      this.type_rw_jg = e;
    },
    NodeClick(val){
      if( JSON.stringify(val) == "{}"){
        this.value_select = undefined
        this.jgName = "1";
        this.jgName_public = 2;
      }else{
        this.value_select = val.id;
        this.jgName = val.id;
        this.jgName_public = val.type;
      }
      this.type_qf = 1;
      this.input3 = "";
      this.handleCurrentChange_lb(1);
    },
  },
  mounted() {

  },
  activated() {
    if (getCookie("dfzy_jgk") != 1) {
      this.filterText = "";
      this.jgName = '1';
      this.jgName_public = 2;
      this.rwkxx = [];
      this.query_tree_jg();
    } else {
      delCookie("dfzy_jgk");
    }
  },
  watch: {
    obj_name: function (val) {
      if (val != "") {
        this.is_true = false;
      } else {
        this.is_true = true;
      }
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    rwkxx(val) {
      // this.$nextTick(() => {
      //   VanillaTilt.init(document.querySelectorAll(".tilts"), {
      //     max: 30,
      //     speed: 400,
      //   });
      // });
    },
  },
};
</script>
<style lang="scss">
#dfzyjgk {
  width: 97%;
  height: 92%;
  margin: 1%;

  .rwk-right {
    width: calc(100% - 20px);
    height: 100%;
    float: left;
    margin-left: 20px;
    overflow: hidden;
    // border: 1px solid #125473;
    border-radius: 5px;
    box-sizing: border-box;
    position: relative;

    .top-div {
      width: calc(100% - 2px);
      height: 80px;
      border: 1px solid #3a5f94c9;
      font-weight: 600;
      margin-top: 10px;
      border-radius: 0px 15px;
      .serch-div {
        .el-input__inner {
          background: none;
          border: 1px solid #3a5f94c9;
          color: #ffff;
        }
        .el-select .el-input {
          width: 130px;
          background-color: #1c678a;
        }
        .el-input-group__append {
          border: unset;
        }
      }

      .tm-div {
      }
      .div-type {
        line-height: 25px;
        font-size: 13px;
        font-weight: 600;
        .top-type-span {
          width: 100px;
          float: left;
          margin: 2px 0px;
          text-align: right;
        }
        .top-type-div {
          width: calc(100% - 100px);
          float: left;
          div {
            float: left;
            margin: 2px 5px;
            padding: 0px 5px;
            cursor: pointer;
          }
          .active-CountryRegion {
            background: #9d893a;
          }
          .active-MilitaryPolitics {
            background: #9d893a;
          }
        }
      }
      .line-s {
        border: 1px solid white;
        width: 0px;
        height: calc(100% - 20px);
        box-shadow: 0px 0px 9px #18d3ef;
        margin: 10px 20px;
      }
      .jzxs {
        display: flex;
        justify-content: center;
        .rk-jg-div {
          width: 110px;
          float: left;
          cursor: pointer;
          margin: 0px 10px;
          .tb-div {
            width: 40px;
            height: 40px;
            background-image: url("../../assets/img/dfzy/new/2.png");
            background-size: 100% 100%;
            float: left;
            margin-right: 10px;
          }
          .tb-span {
            line-height: 40px;
            letter-spacing: 2px;
            font-size: 15px;
            font-weight: 600;
          }
        }
        .active-tb {
          .tb-div {
            background-image: url("../../assets/img/dfzy/new/1.png");
          }
          .tb-span {
            color: #d7b637;
          }
        }
      }
    }
    .bottom-div {
      width: 100%;
      height: calc(100% - 140px);
      overflow-y: auto;
      overflow-x: hidden;
      .rwxx-div {
        width: 23%;
        height: 160px;
        margin: 1%;
        float: left;
        .zyx {
          position: absolute;
          width: calc(100% - 37px);
          height: calc(100% - 79px);
          padding: 21px 23px;
          pointer-events: none;
          div {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            span {
              position: absolute;
              top: 9px;
              right: -13px;
              display: block;
              font-size: 12px;
              color: #ffffff;
              background: #36a8ff;
              width: 60px;
              line-height: 20px;
              text-align: center;
              transform: rotate(45deg);
              letter-spacing: 3px;
            }
          }
        }
        .zyx1 {
          position: absolute;
          width: calc(100% - 37px);
          height: calc(100% - 79px);
          padding: 21px 23px;
          pointer-events: none;
          div {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            span {
              position: absolute;
              top: 8px;
              left: -12px;
              display: block;
              font-size: 12px;
              color: #ffffff;
              background: #36a8ff;
              width: 60px;
              line-height: 20px;
              text-align: center;
              transform: rotate(-45deg);
              letter-spacing: 3px;
            }
          }
        }

        .tilts {
          width: 100%;
          height: 100%;
          background-image: url("../../assets/img/dfzy/new/4.png");
          background-size: 100% 100%;
          cursor: pointer;
          // transform: perspective(1000px);
          .img-div{
            animation:scaleDraw ease-in-out infinite 1.5s alternate;
          }
        }
        @keyframes scaleDraw {
          0%{
            transform: scale(1);
          }
          100%{
            transform: scale(1.1);
          }
        }
        
        .tilts:hover {
          // transform-style: preserve-3d;
          background-image: url("../../assets/img/dfzy/new/3.png");
          .name-div{
              background-image: url("../../assets/img/dfzy/new/5.png");
          } 
          .top-span {
            background: linear-gradient(to bottom, #fffe7f, #54ff88);
            -webkit-background-clip: text;
            color: transparent;
          }
        }
        .table-active {
          background-image: url("../../assets/img/dfzy/new/3.png");
          .name-div{
              background-image: url("../../assets/img/dfzy/new/5.png");
          } 
          // .top-span {
          //   background: linear-gradient(to bottom, #fffe7f, #54ff88);
          //   -webkit-background-clip: text;
          //   color: transparent;
          // }
        }
        .img-div {
          width: 70px;
          height: 70px;
          float: left;
          margin: 40px 3px 28px 40px;
          border: 2px solid white;
          border-radius: 50%;
          // transform: translateZ(20px);
          .tx-bg {
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
            border-radius: 50%;
          }
        }
        .text-div {
          width: calc(100% - 130px);
          height: 75px;
          float: left;
          margin-top: 40px;
          // transform: translateZ(20px);
          .name-div {
            width: 100%;
            height: 100%;
            background-image: url("../../assets/img/dfzy/new/6.png");
            background-size: 100% 100%;
            text-align: center;
            color: white;
            .top-span {
              font-size: 20px;
              font-weight: 900;
              letter-spacing: 5px;
              line-height: 50px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .bottom-span {
              width: 60%;
              margin-left: 20%;
              font-size: 12px;
              word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
          }
          .synopsis-div {
            color: #ffffff87;
            font-size: 15px;
            padding-right: 20px;
            padding-left: 20px;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            text-indent: 2em;
            word-break: break-all;
            white-space: pre-line;
          }
          .xq-div {
            width: calc(100% - 40px);
            padding-left: 28px;
            height: 20px;
            overflow: hidden;
            margin-top: 5px;
            float: left;
          }
          .el-tag {
            float: left;
            margin-right: 10px;
            height: 20px;
            padding: 0px 8px;
            line-height: 19px;
          }
        }
      }
    }
  }
  #_people .el-dialog {
    width: 1100px;
  }
  #_plscs {
    .el-select {
      margin-top: 20px;
      margin-left: 20px;
      float: left;
    }
    .upload-demo {
      margin-top: 20px;
      margin-left: 20px;
      float: left;
    }
    .ac {
      margin-top: 20px;
      margin-left: 20px;
    }

    .table-div {
      width: 100%;
      height: 500px;
      margin-top: 20px;
      margin-left: 0px;
      background: #e6e6e6;
      .el-table__body-wrapper {
        height: 452px;
        overflow-y: auto;
      }
      .cell {
        text-align: center;
      }
      .el-table tr {
        background-color: #1d2d46 !important;
        color: #ffffffc7;
      }
      .el-table td {
        border-bottom: 1px solid #127a89;
        border-right: unset;
      }
      .el-table--enable-row-hover .el-table__body tr:hover > td {
        background-color: #82848a78;
      }
      .el-table th {
        border: unset;
        background-color: #263b5d !important;
      }
      .el-table--fit {
        background: none !important;
        border: unset;
      }
      .el-icon-delete-solid {
        color: red;
        cursor: pointer;
        font-size: 18px;
      }
      .el-icon-edit {
        color: #1172d8;
        cursor: pointer;
        font-size: 20px;
      }
      .el-icon-delete {
        color: red;
        font-size: 20px;
        cursor: pointer;
      }
      .el-table--group::after,
      .el-table--border::after,
      .el-table::before {
        background-color: unset;
      }
    }
  }
  .el-dialog {
    background: #1d2d46 !important;
    .el-step__title.is-process {
      color: #e0a142;
    }
    .el-dialog__title {
      color: #ffffff;
    }
    .el-dialog__body {
      padding: 6px 20px;
      .el-form-item__label {
        color: #e8e8e8;
      }
      .el-cascader {
        width: 100%;
      }
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      height: 100%;
      width: 100%;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100%;
      height: 100%;
      line-height: 230px;
      text-align: center;
    }
    .avatar {
      width: 100%;
      height: 100%;
      display: block;
    }
    .right-left {
      width: calc(100% - 40px);
      float: left;
      background: rgba(41, 60, 90, 0.49);
      padding: 20px 20px 0px 20px;
      .title-div {
        float: left;
        width: 100%;
        height: 25px;
        background-size: 100% 100%;
        position: relative;
        margin-top: 10px;
        > span {
          position: absolute;
          font-weight: 700;
          font-size: 18px;
          color: #50d7ec;
          margin-left: 10px;
        }
        .el-button {
          float: right;
          margin-right: 10px;
        }
      }
      .mk-div {
        width: 100%;
        float: left;
        background: #fdfdfd0f;
        margin-bottom: 20px;
        .data-div {
          width: calc(100% - 40px);
          float: left;
          padding: 20px;
          .pub-div-data {
            margin: 10px calc(50% - 28px);
            color: #909399;
            font-size: 14px;
          }
          .el-table tr {
            background-color: #1d2d46 !important;
            color: #ffffffc7;
          }
          .el-table td {
            background-color: #253650 !important;
            color: #ffffffc7;
          }
          .el-table td {
            border-bottom: 1px solid #127a89;
            border-right: unset;
          }
          .el-table--enable-row-hover .el-table__body tr:hover > td {
            background-color: #82848a78;
          }
          .el-table th {
            border: unset;
            background-color: #263b5d !important;
          }
          .el-table--fit {
            background: none !important;
            border: unset;
          }
          .el-table--group::after,
          .el-table--border::after,
          .el-table::before {
            background-color: unset;
          }
          .el-table__header-wrapper table {
            width: 100% !important;
          }
          .el-table__body-wrapper {
            .el-table__empty-block {
              height: 20px !important;
            }
          }
        }
      }
      .table_jbxx {
        border-collapse: collapse;
        width: 100%;
        position: relative;
        margin-top: 10px;
        td {
          border: 1px solid #00648c;
          padding: 5px 12px;
          font-size: 14px;
          width: 200px;
        }
        .img-div {
          border: 3px solid #ffffff;
          width: 200px;
          height: 230px;
          img {
            background-size: 100% 100%;
          }
        }
        .pub-td1 {
          color: #007eff;
          font-weight: 900;
          width: 100px;
        }
        .pub-td2 {
          color: #8cd4ff;
        }
        .el-icon-remove {
          color: #ff4a4a;
          font-size: 20px;
          position: absolute;
          right: -31px;
          margin-top: 11px;
          cursor: pointer;
        }
        .el-icon-circle-plus {
          color: #ff4a4a;
          font-size: 20px;
          position: absolute;
          right: -31px;
          bottom: 12px;
          cursor: pointer;
        }
        .el-icon-edit {
          color: #5cde7c;
          font-size: 20px;
          position: absolute;
          right: 10px;
          margin-top: 11px;
          cursor: pointer;
        }
        .button-div {
          position: absolute;
          right: 40px;
          margin-top: 8px;
          position: absolute;
        }
      }
      .title-divs {
        float: left;
        height: 25px;
        width: calc(100% - 0px);
        // background-image: url("../../assets/img/dfzy/02.png");
        // background-size: 100% 100%;
      }
    }
  }
  #add_a,
  #edit_a {
    .el-dialog {
      width: 400px;
      background-color: #1d2d47;
      .el-dialog__header {
        text-align: center;
        .el-dialog__title {
          color: white;
        }
      }
      .el-dialog__body {
        padding: 30px 20px;
        .dialogContent {
          span {
            float: left;
            margin-top: 5.5px;
            color: white;
          }
          .el-input {
            width: 80%;
            input {
              height: 30px;
            }
          }
        }
      }
      .el-dialog__title {
        color: #ffffff;
      }
      .el-form-item__label {
        color: #dadada;
      }
      .button-preview {
        width: 100px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        margin-left: calc(50% - 110px);
        margin-top: 10px;
        text-align: center;
        cursor: pointer;
        background-image: url(../../assets/img/yqjc/40.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .button-cancel {
        width: 100px;
        height: 30px;
        line-height: 30px;
        margin-left: 20px;
        margin-top: 10px;
        text-align: center;
        cursor: pointer;
        background-image: url(../../assets/img/yqjc/41.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .el-upload-list__item-name [class^="el-icon"] {
        color: #2870ff;
        height: unset !important;
      }
      .el-upload__tip {
        color: #c7c7c7;
      }
      .el-upload-list__item-name {
        color: #4382ff;
      }
      .audio-class {
        margin-left: 75px;
      }
    }
  }
  .el-dialog {
    .el-input__inner {
      color: white !important;
      background: none !important;
      border: 1px solid #146a80 !important;
      box-shadow: 0 0 10px #1b6097;
    }
    .el-textarea__inner {
      color: white !important;
      background: none !important;
      border: 1px solid #146a80 !important;
      box-shadow: 0 0 10px #1b6097;
    }
  }
  .gjcx-div {
    width: 100%;
    position: absolute;
    top: 80px;
    // box-shadow: rgb(24, 110, 138) 0px 4px 6px;
    // background-image: linear-gradient(#21334f, rgb(23, 73, 109));
    // background-image: url("../../assets/img/dfzy/new/6.png");
    background-image: linear-gradient(to right, #111112, #2a607f, #221c2c);
    background-size: 100% 100%;
    .demo-form-inline {
      width: 60%;
      margin-left: 23%;
      padding-top: 15px;
      margin-bottom: 20px;
    }
    .el-input__inner {
      color: #ffffff;
      background: none !important;
      border: 1px solid #146a80 !important;
      box-shadow: 0 0 10px #1b6097;
    }
    .el-form-item {
      margin-bottom: 0px;
    }
    .button-discusss {
      width: 100px;
      height: 30px;
      line-height: 30px;
      float: left;
      font-size: 14px;
      margin-top: 20px;
      margin-left: 20px;
      text-align: center;
      cursor: pointer;
      background-image: url(../../assets/img/yqjc/40.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
