<template>
  <div id="dfzyrwk">
    <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"
            style="position: relative; padding: 0px"
            class="serch-div"
          >
            <el-input placeholder="请输入姓名或外文名" v-model="input3"></el-input>
            <el-button
              type="primary"
              @click="query(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="img-div">
                <img class="tx-bg" :src="item.avatarUrl==null?'':item.avatarUrl" :onerror="errimg" />
              </div>
              <div class="text-div">
                <div class="name-div">
                  <div class="top-span">
                    {{ item.xm.value }}
                  </div>
                  <div class="bottom-span">
                    {{ item.wwm.value }}
                  </div>
                </div>
                <!-- <div class="name-div">
                {{ item.baseProperty["姓名"] }}&emsp;&emsp;<span
                  v-text="item.military_rank"
                ></span
                >&emsp;&emsp;
                <span v-text="item.extraProperty['军衔等级']"></span>
                <div class="class1">{{ item.baseProperty["姓名"] }}</div>
                <div class="class1" style="margin-left: 20px">
                  {{ item.baseProperty["外文名"] }}
                </div>
              </div> -->
                <!-- <div class="synopsis-div">
                <span
                  v-text="
                    item.textarea['人物简介'] == '' ||
                    item.textarea['人物简介'] == undefined
                      ? '暂无简介'
                      : item.textarea['人物简介']
                  "
                ></span>
              </div> -->
                <!-- <div class="xq-div">
                <div class="tag-group">
                  <el-tag
                    v-for="(items, index) in item.label"
                    v-if="item.label != ''"
                    :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>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
              <el-input v-model="formInline.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item>
              <label>外文名</label>
              <el-input
                v-model="formInline.wwm"
                placeholder="外文名"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <label>行政职务</label>
              <el-input
                v-model="formInline.xzzw"
                placeholder="行政职务"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <label>人物简介</label>
              <el-input
                v-model="formInline.rwjj"
                placeholder="人物简介"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <label>标&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 { uuid } from "../../util/data_util";
import VanillaTilt from "vanilla-tilt";
import SelectTree from "./seleteTree.vue"
import "animate.css";
import { imgUrl } from "../../api/publicUrl";
export default {
  components: { SelectTree },
  data() {
    return {
      errimg: "this.src='" + jh_bg + "'",
      pageInfo: {
        total: 0,
        pageSize: 10,
        current_page: 1,
      },
      rwkxx: [],
      input3: "",
      sj_time: "",
      dq: "",
      tags: [
        { type: "" },
        { type: "success" },
        { type: "info" },
        { type: "warning" },
        { type: "danger" },
      ],
      jh_bg: jh_bg,

      form_add: [
        { comment: "目标属性", value: "" },
        { comment: "目标等级", value: "" },
        { comment: "岗位编号", value: "" },
        { comment: "人物编号", value: "" },
        { comment: "中文名", value: "" },
        { comment: "外文名", value: "" },
        { comment: "所在机构", value: "" },
        { comment: "职务", value: "" },
        { comment: "国家/地区", value: "" },
        { comment: "性别", value: "" },
        { comment: "出生日期", value: "" },
        { comment: "出生地", value: "" },
        { comment: "现职时间", value: "" },
        { comment: "人员类别", value: "" },
        { comment: "学历学位", value: "" },
        { comment: "家庭住址", value: "" },
        { comment: "联系电话", value: "" },
        { comment: "专长领域", value: "" },
        { comment: "社交媒体账号", value: "" },
        { comment: "photos", value: "" },
      ],
      dialogVisible_people: false,
      imageUrl: jh_bg,
      xzzd: [],
      wzmk_data: [],
      option_rwmb: [],
      option_value_rwmb: "",
      is_true: true,
      obj_name: "",
      // folder: "dfzy-rwk", //头像上传文件夹
      fl_type: 1, //查询人物库下面的模板,人物库为11
      fileList_head: [],
      file_head: {},
      file_types_head: ".PNG,.JPG,.JPEG",

      this_data: "",
      this_node: "",
      tree_data: [],
      filterText: "",
      defaultProps: {
        children: "children",
        label: "label",
      },

      dialogVisible_edit: false,
      name_edit: "",

      options: [],
      value_szjg: "",
      types: 1,
      idFirstEnter: "",
      formInline: {
        name: "",
        wwm: "",
        xzzw: "",
        rwjj: "",
        bq: "",
        zyx: "",
      },
      show: false,
      type_zhOrcx: 3,
      nodes_pub: {},
      i_pub: 0,
      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,
      value_selects:'',
    };
  },
  methods: {
    query_zhcx() {
      this.show = !this.show;
    },
    zhcx(pageNum) {
      if(this.types==1){
        this.value_select = 1
      }else{
        this.value_select = 4
      }
      this.input3 = '';
      this.typeCountryRegion = {value:'',name:''};
      this.typeMilitaryPolitics = {value:'',name:''};
      this.type_zhOrcx = 1;
      this.pageInfo.current_page = pageNum;
      let pageSize = this.pageInfo.pageSize;
      post(
        `api/rest/mongo/character/query?pageNum=${pageNum}&pageSize=${pageSize}`,
        {
          module: this.types == 1 ? "DF" : "DFWW",
          combinationSearch:{
            chineseName: this.formInline.name,
            foreignName: this.formInline.wwm,
            xzzw: this.formInline.xzzw,
            rwjj: this.formInline.rwjj,
            bq: this.formInline.bq,
            zyx: this.formInline.zyx,
          }
        }
      )
        .then((res) => {
          this.rwkxx = [];
          setTimeout(() => {
            this.rwkxx = res.records;
            this.pageInfo.total = res.total;
          }, 500);
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },
    gb_zhcx() {
      this.show = false;
    },
    //查询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);
        });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.pageInfo.current_page = 1;
      this.handleCurrentChange_lb(1);
    },
    //列表分页
    handleCurrentChange_lb(pageNum) {
      if (this.type_zhOrcx == 1) {
        this.zhcx(pageNum);
      } else if(this.type_zhOrcx ==2) {
        this.query_jg(pageNum);
      }else{
        this.query(pageNum);
      }
    },
    query_jg(pageNum) {
      this.formInline = {
        name: "",
        wwm: "",
        xzzw: "",
        rwjj: "",
        bq: "",
        zyx: "",
      };
      this.input3 = '';
      this.typeCountryRegion = {value:'',name:''};
      this.typeMilitaryPolitics = {value:'',name:''};
      this.type_zhOrcx = 2;
      this.pageInfo.current_page = pageNum;
      let pageSize = this.pageInfo.pageSize;
      post(
        `api/rest/mongo/character/query?pageNum=${pageNum}&pageSize=${pageSize}`,
        {
          module: this.types == 1 ? "DF" : "DFWW",
          orgId:this.value_select==1||this.value_select==4?null:this.value_selects,
        }
      )
        .then((res) => {
          this.rwkxx = [];
          setTimeout(() => {
            this.rwkxx = res.records;
            this.pageInfo.total = res.total;
          }, 500);
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },
    query(pageNum) {
      this.formInline = {
        name: "",
        wwm: "",
        xzzw: "",
        rwjj: "",
        bq: "",
        zyx: "",
      };
      if(this.types==1){
        this.value_select = 1
      }else{
        this.value_select = 4
      }
      this.type_zhOrcx = 3;
      this.pageInfo.current_page = pageNum;
      let pageSize = this.pageInfo.pageSize;
      post(
        `api/rest/mongo/character/query?pageNum=${pageNum}&pageSize=${pageSize}`,
        {
          module: this.types == 1 ? "DF" : "DFWW",
          name:this.input3,
          type:this.typeMilitaryPolitics.name,
          nation:this.typeCountryRegion.name,
        }
      )
        .then((res) => {
          this.rwkxx = [];
          setTimeout(() => {
            this.rwkxx = res.records;
            this.pageInfo.total = res.total;
          }, 500);
        })
        .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 },
      });
    },
    //查询当前节点的最顶层节点ID
    getparentNode(data) {
      if (data.data.parentCode == null) {
        return data.data.id;
      } else {
        return this.getparentNode(data.parent);
      }
    },
    query_tree() {
      get("api/rest/mongo/template/query")
        .then((datas) => {
          this.option_rwmb = [];
          if (datas.length > 0) {
            datas.forEach((item) => {
              this.option_rwmb.push({ value: item.id, label: item.name });
            });
          }
        })
        .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;
    },
    tree_json(nodes) {
      let r = [];
      for (let i = 0; i < nodes.length; i++) {
        r.push(nodes[i]); // 取每项数据放入一个新数组
        if (nodes[i].children && nodes[i].children.length > 0)
          // 若存在children则递归调用，把数据拼接到新数组中，并且删除该children
          r = r.concat(this.tree_json(nodes[i].children));
      }
      return r;
    },
    Change_select(value) {
      this.form_add[6].value = value + "";
    },
    /**国家地区切换 */
    dq_fun(e) {
      if(this.typeCountryRegion.value==e.value){
        this.typeCountryRegion = {value:'',name:''};
      }else{
        this.typeCountryRegion = e;
      }
      this.query(1);
    },
    /**军事政治类型切换 */
    MilitaryPolitics_fun(e) {
      if(this.typeMilitaryPolitics.value==e.value){
        this.typeMilitaryPolitics = {value:'',name:''};
      }else{
        this.typeMilitaryPolitics = e;
      }
      this.query(1);
    },
    /**人物机构切换 */
    qh_type_rwjg(e) {
      this.type_rw_jg = e;
    },
    NodeClick(val){
      if( JSON.stringify(val) == "{}"){
        this.value_select = undefined;
        this.value_selects = undefined;
        this.types = 2;
        this.jgName = "1";
      }else{
        this.value_select = val.id;
        this.value_selects = val.code;
        this.types = val.type;
        this.jgName = val.code == undefined ? val.id : val.code;
      }
      this.type_zhOrcx = 2;
      this.input3 = "";
      this.nodes_pub = val;
      this.handleCurrentChange_lb(1);
    },
  },
  mounted() {},
  watch: {
    obj_name: function (val) {
      if (val != "") {
        this.is_true = false;
      } else {
        this.is_true = true;
      }
    },
    dialogVisible_people: function (val) {
      if (!val) {
        this.is_true = false;
      }
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    rwkxx(val) {
      // this.$nextTick(() => {
      //   VanillaTilt.init(document.querySelectorAll(".tilts"), {
      //     max: 30,
      //     speed: 400,
      //   });
      // });
    },
  },
  activated() {
    if (getCookie("dfzy_rwk") != 1) {
      this.filterText = "";
      this.input3 = "";
      this.types = 2;
      this.query_tree_jg();
    } else {
      delCookie("dfzy_rwk");
    }
  },
  created() {
    let self = this;
    let code = 0;
    let code2 = 0;
    document.onkeydown = function (e) {
      let evn = e || event;
      let key = evn.keyCode || evn.which || evn.charCode;
      if (key === 13) {
        code = 1;
      }
      if (key === 9) {
        code2 = 1;
      }
      if (code === 1 && code2 === 1) {
        alert("Ctrl+tab");
        // this obj to do something
        code = 0;
        code2 = 0;
      }
    };
    document.onkeyup = function (e) {
      if (e.keyCode === 13) {
        code = 0;
      }
      if (e.keyCode === 9) {
        code2 = 0;
      }
    };
  },
};
</script>
<style lang="scss">
#dfzyrwk {
  width: 97%;
  height: 92%;
  margin: 1%;
  box-sizing: border-box;
  overflow: hidden;

  // .el-input__count {
  //   color: #229dbd;
  //   background: #1d2d4600;
  // }
  // .el-input__count-inner {
  //   color: #229dbd;
  //   background: #1d2d46;
  // }
  // .el-textarea__inner {
  //   color: white !important;
  //   background: none !important;
  //   border: 1px solid #146a80 !important;
  //   box-shadow: 0 0 10px #1b6097;
  //   white-space: pre-line;
  // }
  // .rwk-left {
  //   width: calc(15% - 10px);
  //   height: calc(100% - 40px);
  //   margin-top: 40px;
  //   margin-left: 10px;
  //   box-sizing: border-box;
  //   float: left;
  //   .el-input {
  //     position: relative;
  //     font-size: 14px;
  //     display: inline-block;
  //     width: 100%;
  //   }
  //   .el-button + .el-button {
  //     margin-left: 0px !important;
  //   }
  //   .el-tree {
  //     color: white;
  //     background: transparent;
  //     height: calc(100% - 50px);
  //     margin-top: 10px;
  //     overflow-y: auto;
  //     .el-tree-node__content {
  //       height: 40px;
  //       // .el-icon-circle-plus {
  //       //   display: none;
  //       // }
  //       // .el-icon-error {
  //       //   display: none;
  //       // }
  //       // .el-icon-upload {
  //       //   display: none;
  //       // }
  //       // .el-icon-edit-outline {
  //       //   display: none;
  //       // }
  //       // .list-span{
  //       //   display: none;
  //       // }
  //     }
  //     .el-tree-node {
  //       position: relative;
  //       padding-left: 0px; // 缩进量
  //     }
  //     .el-tree-node__children {
  //       padding-left: 15px; // 缩进量
  //     }

  //     // 竖线
  //     .el-tree-node::before {
  //       content: "";
  //       height: 100%;
  //       width: 1px;
  //       position: absolute;
  //       left: -3px;
  //       top: -17px;
  //       border-width: 1px;
  //       border-left: 1px solid #1895a2;
  //     }
  //     // 当前层最后一个节点的竖线高度固定
  //     .el-tree-node:last-child::before {
  //       height: 38px; // 可以自己调节到合适数值
  //     }

  //     // 横线
  //     .el-tree-node::after {
  //       content: "";
  //       width: 13px;
  //       height: 20px;
  //       position: absolute;
  //       left: -3px;
  //       top: 20px;
  //       border-width: 1px;
  //       border-top: 1px solid #1895a2;
  //     }

  //     // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  //     & > .el-tree-node::after {
  //       border-top: none;
  //     }
  //     & > .el-tree-node::before {
  //       border-left: none;
  //     }

  //     // 展开关闭的icon
  //     .el-tree-node__expand-icon {
  //       font-size: 16px;
  //       // 叶子节点（无子节点）
  //       &.is-leaf {
  //         color: transparent;
  //         // display: none; // 也可以去掉
  //       }
  //     }
  //   }
  //   .el-tree > .el-tree-node > .el-tree-node__content {
  //     height: 40px;
  //     background-image: url(../../assets/img/yqjc/24.png);
  //     background-repeat: no-repeat;
  //     background-size: 100% 100%;
  //     .el-icon-error {
  //       display: none !important;
  //     }
  //     .el-icon-edit-outline {
  //       display: none !important;
  //     }
  //   }
  //   .el-tree
  //     > .el-tree-node
  //     > .el-tree-node__children
  //     > .el-tree-node
  //     > .el-tree-node__content {
  //     height: 40px;
  //     // background-image: url(../../assets/img/yqjc/24.png);
  //     background-repeat: no-repeat;
  //     background-size: 100% 100%;
  //   }
  //   .el-tree > .el-tree-node > .el-tree-node__content > .el-tree-node__label {
  //     font-size: 16px !important;
  //   }
  //   .custom-tree-node {
  //     flex: 1;
  //     display: flex;
  //     align-items: center;
  //     justify-content: space-between;
  //     font-size: 14px;
  //     padding-right: 8px;
  //     width: 82%;
  //     .first-span {
  //       width: 100%;
  //       float: left;
  //       overflow: hidden;
  //       text-overflow: ellipsis;
  //       white-space: nowrap;
  //     }
  //     // .list-span{
  //     //   position: absolute;
  //     //   right: 20px;
  //     // }
  //   }
  //   .el-tree > .el-tree-node > .el-tree-node__children {
  //     background-color: #1d2d46ad !important;
  //     width: calc(100% - 15px);
  //     // height: calc(100% - 44px);
  //     // overflow: auto;
  //     // position: relative;
  //     // .el-tree-node{
  //     //   width: 300px;
  //     // }
  //   }
  //   .el-tree-node:focus > .el-tree-node__content {
  //     background-color: #00648a96 !important;
  //     // border-radius: 5px;
  //   }

  //   .el-tree-node__content:hover,
  //   .el-tree-node__content:focus {
  //     background-color: #00638a50 !important;
  //     // border-radius: 5px;
  //   }
  //   .el-tree--highlight-current
  //     .el-tree-node.is-current
  //     > .el-tree-node__content {
  //     background-color: #00648a96 !important;
  //     // border-radius: 5px;
  //   }
  //   .el-icon-circle-plus {
  //     font-size: 16px;
  //     color: #00a6f5;
  //   }
  //   .el-icon-edit-outline {
  //     font-size: 16px;
  //     color: #2ae209;
  //   }
  //   .el-icon-error {
  //     font-size: 16px;
  //     color: #ff5454;
  //   }
  //   .el-icon-upload {
  //     font-size: 16px;
  //     color: #2bce0e;
  //   }
  // }
  .rwk-right {
    width: calc(100% - 20px);
    height: 100%;
    float: left;
    margin-left: 20px;
    overflow: hidden;
    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;
        }
      }
      // .button-discuss {
      //   width: 100px;
      //   height: 30px;
      //   line-height: 30px;
      //   float: left;
      //   margin-top: 44px;
      // font-size: 14px;
      //   margin-left: 20px;
      //   text-align: center;
      //   cursor: pointer;
      //   background-image: url(../../assets/img/yqjc/40.png);
      //   background-repeat: no-repeat;
      //   background-size: 100% 100%;
      // }
      // .button-discuss1 {
      //   width: 120px;
      //   height: 30px;
      //   line-height: 30px;
      //   float: right;
      //   font-size: 14px;
      //   margin-top: 44px;
      //   margin-left: 20px;
      //   margin-right: 30px;
      //   text-align: center;
      //   cursor: pointer;
      //   background-image: url(../../assets/img/yqjc/40.png);
      //   background-repeat: no-repeat;
      //   background-size: 100% 100%;
      // }
      // .button-discuss2 {
      //   width: 100px;
      //   height: 30px;
      //   line-height: 30px;
      //   float: left;
      //   margin-top: 44px;
      //   margin-left: 20px;
      //   text-align: center;
      //   font-size: 14px;
      //   cursor: pointer;
      //   background-image: url(../../assets/img/yqjc/40.png);
      //   background-repeat: no-repeat;
      //   background-size: 100% 100%;
      // }
      // .sjxz {
      //   width: 400px;
      //   margin-top: 40px;
      //   margin-left: 20px;
      //   float: left;
      //   box-shadow: 0 0 10px #1b6097;
      //   .el-date-editor {
      //     background: none;
      //     span {
      //       color: white;
      //     }
      //     .el-range-input {
      //       color: white;
      //       background: none;
      //     }
      //   }
      //   .el-input__inner {
      //     border: 1px solid #146a80 !important;
      //   }
      // }
      // .select-dq {
      //   margin-top: 40px;
      //   margin-left: 20px;
      //   float: left;
      //   .el-input__inner {
      //     background: none;
      //     color: #ffff;
      //     border: 1px solid #0dada7b0;
      //     box-shadow: 0 0 10px #1b6097;
      //   }
      // }

      .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 2s 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");
          } 
        }
        .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;
  }
  .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-outline {
          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;
        margin-left: calc(50% - 110px);
        margin-top: 10px;
        font-size: 14px;
        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: linear-gradient(to right, #111112, #2a607f, #221c2c);
    .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>