<template>
  <div id="flfg1">
    <div class="top-div">
      <el-input
        v-model="wd_name"
        suffix-icon="el-icon-search"
        placeholder="请输入关键字"
      ></el-input>
      <el-select v-model="wd_classify" clearable placeholder="请选择文档类别">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div class="block sjxz">
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="sc_time"
          type="daterange"
          range-separator="至"
          start-placeholder="上传起始时间"
          end-placeholder="上传结束时间"
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
      </div>
      <div class="toggle-switch">
        <el-switch
          style="display: block"
          v-model="toggle_value"
          active-color="#09e8e4"
          inactive-color="#409eff"
          active-text="全文检索"
          inactive-text="列表检索"
        >
        </el-switch>
      </div>
      <div class="button-discuss" @click="searchs">搜索</div>

      <div class="button-discuss1" @click="handleAdd()">新增</div>
    </div>
    <div class="bottom-div">
      <transition name="el-zoom-in-top" v-on:after-leave="afterLeave_lb">
        <div v-if="toggle_value_lb" class="transition-box">
          <div class="table-div">
            <el-table
              :data="tableData"
              height="100%"
              border
              style="width: 100%"
            >
              <el-table-column type="index" label="序号" width="80">
              </el-table-column>
              <el-table-column
                prop="dict_item.name"
                label="文档类别"
                width="250"
              >
              </el-table-column>
              <el-table-column prop="name" label="文档名称" width="250">
              </el-table-column>
              <el-table-column prop="description" label="简要描述">
              </el-table-column>
              <el-table-column prop="create_time" label="上传时间" width="220">
              </el-table-column>
              <el-table-column
                prop="files[0].type"
                label="文档类型"
                width="110"
              >
              </el-table-column>
              <el-table-column
                prop="cz"
                label="操作"
                width="150"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <i
                    class="el-icon-view"
                    @click="handleView(scope.$index, scope.row)"
                    title="预览"
                  ></i
                  >&nbsp;
                  <i
                    class="el-icon-download"
                    @click="handleDownload(scope.$index, scope.row)"
                    title="下载"
                  ></i
                  >&nbsp;
                  <i
                    class="el-icon-edit"
                    @click="handleEdit(scope.$index, scope.row)"
                    title="编辑"
                  ></i
                  >&nbsp;
                  <i
                    class="el-icon-delete-solid"
                    @click="handleDelete(scope.$index, scope.row)"
                    title="删除"
                  ></i>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="page-div">
            <el-pagination
              class="myPagination"
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="pageSize"
              :current-page="current_page"
              @current-change="handleCurrentChange_lb"
            >
            </el-pagination>
          </div>
        </div>
      </transition>
      <transition name="el-zoom-in-bottom" v-on:after-leave="afterLeave_qw">
        <div v-if="toggle_value_qw" class="transition-box">
          <div class="bottom-content">
            <div class="content-title">
              <span
                >为您提供<span class="new-num" v-text="totals_qw"></span
                >条数据</span
              >
            </div>
            <div class="content-text">
              <div class="content-news" v-for="(item, index) in get_files">
                <div class="news-title">
                  <div class="first-div">
                    <span
                      >文档名称：<span
                        v-text="item.fileInfo.name_document"
                        class="span_cl"
                      ></span
                    ></span>
                  </div>
                  <div class="last-div">
                    <span
                      >文件原名称：<span
                        v-text="item.fileInfo.name"
                        class="span_cl"
                      ></span
                    ></span>
                  </div>
                </div>
                <div class="news-content" v-html="item.highLight"></div>
                <div class="news-info">
                  <span class="news-info-from"
                    >类型：<span v-text="item.fileInfo.label"></span></span
                  >&emsp;
                  <span class="news-info-channel"
                    >上传时间：<span v-text="item.create_time"></span></span
                  >&emsp;
                  <div class="news-info-tool">
                    <i
                      class="el-icon-view views"
                      @click="handleView_qwss(item)"
                      title="预览"
                    ></i>
                    &nbsp;
                    <i
                      class="el-icon-download"
                      @click="handleDownload_qwss(item)"
                      title="下载"
                    ></i>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="page-div">
            <div class="pagination-div">
              <el-pagination
                class="myPagination"
                background
                layout="prev, pager, next"
                :total="totals_qw"
                :current-page="current_page_qw"
                @current-change="handleCurrentChange_qw"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </transition>
    </div>
    <el-dialog
      title="新增法律法规文档"
      :visible.sync="centerDialogVisible_add"
      width="30%"
      center
      class="xzwd"
    >
      <el-form
        ref="form"
        :model="form_add"
        label-width="80px"
        style="margin-bottom: 0px"
      >
        <el-form-item label="文档名称">
          <el-input
            v-model="form_add.name"
            maxlength="20"
            show-word-limit
            placeholder="请输入文档名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="文档类别">
          <el-select v-model="form_add.region" placeholder="请选择文档类别">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文档描述">
          <el-input
            type="textarea"
            placeholder="请输入文档描述"
            v-model="form_add.ms"
            maxlength="100"
            show-word-limit
            :rows="4"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="选择文件" style="margin-bottom: 0px">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="uploadUrl"
            :file-list="form_add.fileList"
            :on-change="handleChange"
            :show-file-list="true"
            :auto-upload="false"
            :multiple="false"
            :on-remove="handleRemove"
            :accept="format_files"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件</el-button
            >
            <!-- <el-button
              style="margin-left: 10px"
              size="small"
              type="success"
              @click="submitUpload"
              >上传到服务器</el-button
            > -->
            <div slot="tip" class="el-upload__tip">允许上传doc、PPT、等等</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible_add = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="编辑法律法规文档"
      :visible.sync="centerDialogVisible_edit"
      width="30%"
      center
    >
      <el-form ref="form" :model="form_edit" label-width="80px">
        <el-form-item label="文档名称">
          <el-input
            v-model="form_edit.name"
            maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="文档类别">
          <el-select v-model="form_edit.region" placeholder="请选择文档类别">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文档描述">
          <el-input
            type="textarea"
            placeholder="请输入文档描述"
            v-model="form_edit.ms"
            maxlength="100"
            show-word-limit
            :rows="4"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible_edit = false">取 消</el-button>
        <el-button type="primary" @click="submit_bj">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="centerDialogVisible_video" center>
      <div style="height: 400px; position: relative">
        <video
          id="video"
          class=""
          preload="meta"
          controls
          width="100%"
          object-fit="fill"
          height="100%"
          controlslist="nodownload"
          :src="video_src"
          disablePictureInPicture
        ></video>
      </div>
    </el-dialog>

    <el-dialog
      :title="title_sound"
      :visible.sync="centerDialogVisible_sound"
      center
      width="500px"
    >
      <audio
        controls
        id="sound_id"
        :src="sound_src"
        controlslist="nodownload"
        class="audio-class"
      ></audio>
    </el-dialog>

    <el-dialog
      :title="title_txt"
      :visible.sync="centerDialogVisible_txt"
      center
      width="800px"
    >
      <iframe
        id="txt_id"
        width="100%"
        height="500px"
        :src="txt_src"
        style="background: white"
      ></iframe>
    </el-dialog>
  </div>
</template>
<script>
import {
  lastIndexOf,
  get,
  post,
  fileUpload,
  delete_util,
  startLoading,
  endLoading,
  download,
  format_file,
  arr_video_format,
  arr_sound_format,
} from "../../util/http_util";
import { getCookie } from "../../util/cookie_util";
import { uuid } from "../../util/data_util";
export default {
  data() {
    return {
      centerDialogVisible_add: false,
      centerDialogVisible_edit: false,
      centerDialogVisible_video: false,
      centerDialogVisible_sound: false,
      centerDialogVisible_txt: false,
      title: "", //视频播放页面的titile
      title_sound: "", //音频播放页面的titile
      title_txt: "",
      video_src: "",
      sound_src: "",
      txt_src: "",
      sc_time: "", //上传时间参数
      wd_name: "", //文档名称
      wd_classify: "", //文档类别
      tableData: [],
      options: [],
      value: "", //请选择文件大类默认选中值
      uploadUrl: "",
      form_add: {
        name: "",
        region: "",
        fileList: [],
        ms: "",
      },
      form_edit: {
        name: "",
        region: "",
        ms: "",
      },
      total: 0,
      pageSize: 10,
      current_page: 1,
      paramData: {},
      type_classify: "0001", //全局变量，判断是法律法规的页面
      edit_ids: "", //编辑页面传id
      toggle_value: false, //切换按钮
      toggle_value_lb: true,
      toggle_value_qw: false,
      totals_qw: 0,
      pageSize_qw: 10,
      current_page_qw: 1,
      format_files: "",
      get_files: [],
    };
  },
  methods: {
    //列表动画效果结束让全文动画开始
    afterLeave_lb(el) {
      let _this = this;
      _this.toggle_value_qw = true;
    },
    //全文动画效果结束让列表动画开始
    afterLeave_qw(el) {
      let _this = this;
      _this.toggle_value_lb = true;
    },
    //搜索table数据
    searchs(pageNum) {
      let _this = this;
      if (!_this.toggle_value) {
        _this.handleCurrentChange_lb(1);
      } else {
        _this.handleCurrentChange_qw(1);
      }
    },
    //列表分页
    handleCurrentChange_lb(pageNum) {
      let _this = this;
      let startTime = "";
      let endTime = "";
      if (_this.sc_time != "" && _this.sc_time != null) {
        startTime = _this.sc_time[0];
        endTime = _this.sc_time[1];
      }
      _this.paramData = {
        beginTime: startTime == "" ? null : startTime,
        endTime: endTime == "" ? null : endTime,
        name: _this.wd_name == "" ? null : _this.wd_name,
        code: _this.wd_classify == "" ? null : _this.wd_classify,
        pageNum: pageNum,
        pageSize: _this.pageSize,
        type: _this.type_classify,
      };
      startLoading();
      _this.tableData = [];
      _this.total = 0;
      post("api/rest/document/queryDoc", _this.paramData).then((data) => {
        if (data.list.length != 0) {
          _this.tableData = data.list;
        }
        _this.total = data.totals;
        _this.current_page = pageNum;
        endLoading();
      });
    },
    //列表分页
    handleCurrentChange_qw(pageNum) {
      let _this = this;
      let startTime = "";
      let endTime = "";
      if (_this.sc_time != "" && _this.sc_time != null) {
        startTime = _this.sc_time[0];
        endTime = _this.sc_time[1];
      }
      if (_this.wd_name == "") {
        this.$message({
          type: "warning",
          message: "关键字不能为空!",
        });
        return;
      }
      let paramDatas = {
        content: _this.wd_name == "" ? null : _this.wd_name,
        // code: _this.wd_classify == "" ? null : _this.wd_classify,
        // starttime: startTime,
        // endtime: endTime,
        // type: _this.type_classify,
      };
      startLoading();
      _this.get_files = [];
      _this.totals_qw = 0;
      post(
        "api/rest/fulltext/searchFiles?pageNum=" +
          pageNum +
          "&pageSize=" +
          _this.pageSize,
        paramDatas
      )
        .then((data) => {
          if (data.list.length != 0) {
            data.list.forEach((item, index) => {
              // _this.options.forEach((items) => {
              //   if (item.fileInfo.code == items.value) {
              //     data.list[index].fileInfo.label = items.label;
              //   }
              // });
              // data.list[index].fileInfo.name = data.list[
              //   index
              // ].fileInfo.name.substring(
              //   0,
              //   lastIndexOf(data.list[index].fileInfo.name, ".")
              // );
              data.list[index].create_time = new Date(
                data.list[index].create_time
              ).Format("yyyy-MM-dd HH:mm:ss");
            });
            _this.get_files = data.list;
            _this.totals_qw = data.totals;
            _this.current_page_qw = pageNum;
          }
          endLoading();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //table数据预览
    handleView(index, row) {
      let _this = this;
      //用户判断此格式是否是视频格式
      let video_type = false;
      //用户判断此格式是否是音频格式
      let sound_type = false;
      arr_video_format().forEach((name) => {
        if (name.toUpperCase() == row.files[0].type.toUpperCase()) {
          video_type = true;
        }
      });
      arr_sound_format().forEach((name) => {
        if (name.toUpperCase() == row.files[0].type.toUpperCase()) {
          sound_type = true;
        }
      });
      if (video_type) {
        _this.title = "正在播放视频---" + row.name;
        _this.centerDialogVisible_video = true;
        setTimeout(function () {
          // let path_srt = "api/rest/document/download/";
          // path_srt = path_srt + _this.type_folder + '/'+row.file.uuid;
          // _this.video_src = path_srt;
          _this.video_src = `api/rest/file/playVideo/Document?objectName=${row.file.uuid}`
          if (document.getElementById("video").currentTime != 0)
            document.getElementById("video").currentTime = 0;
        }, 500);
      } else if (sound_type) {
        _this.title_sound = "正在播放音频---" + row.name;
        _this.centerDialogVisible_sound = true;
        setTimeout(function () {
          let path_srt = "api/rest/document/download/";
          path_srt = path_srt + _this.type_folder + '/'+row.file.uuid;
          _this.sound_src = path_srt;
          if (document.getElementById("sound_id").currentTime != 0)
            document.getElementById("sound_id").currentTime = 0;
        }, 500);
      } else {
        let path_srt =
          "api/rest/document/pdf/flfg/" + row.files[0].uuid + ".pdf";
        window.open(path_srt);
      }
    },
    //table_全文搜索预览
    handleView_qwss(item) {
      let path_srt =
        "api/rest/document/pdf/flfg/" + item.fileInfo.files[0].uuid + ".pdf";
      window.open(path_srt);
    },
    //table数据下载
    handleDownload(index, row) {
      let path_srt = "api/rest/document/download/flfg/" + row.files[0].uuid;
      download(path_srt, row.files[0].name);
    },
    //table_全文搜索下载
    handleDownload_qwss(item) {
      let path_srt =
        "api/rest/document/download/flfg/" + item.fileInfo.files[0].uuid;
      download(path_srt, item.fileInfo.files[0].name);
    },
    //table数据编辑弹出框展示
    handleEdit(index, row) {
      console.log(1);
      this.form_edit = {
        name: row.name,
        region: row.dict_code,
        ms: row.description,
      };
      this.edit_ids = row.id;
      this.centerDialogVisible_edit = true;
    },
    //table数据删除
    handleDelete(index, row) {
      let _this = this;
      let ids = row.id;
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delete_util(
            "api/rest/document/delDoc/" +
              ids +
              "?folder=flfg&name=" +
              row.files[0].uuid
          )
            .then((data) => {
              if (data == 1) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败!",
                });
              }
              _this.handleCurrentChange_lb(1);
            })
            .catch((err) => {
              this.$message(err.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // console.log(index, row);
    },

    //新增弹出框弹出
    handleAdd() {
      let _this = this;
      //设置下拉框默认选择第一条
      _this.form_add.region = _this.options[0].value;
      this.centerDialogVisible_add = true;
    },

    //编辑弹出框确定
    submit_bj() {
      let _this = this;
      let params = {
        id: _this.edit_ids,
        description: _this.form_edit.ms,
        name: _this.form_edit.name,
        dict_code: _this.form_edit.region,
      };
      post("api/rest/document/updDoc", params).then((data) => {
        if (data == 1) {
          this.$message({
            type: "success",
            message: "修改成功!",
          });
        } else {
          this.$message({
            type: "error",
            message: "修改失败!",
          });
        }
        _this.handleCurrentChange_lb(1);
        this.centerDialogVisible_edit = false;
      });
    },
    //新增弹出框确定（文件上传）
    submitUpload() {
      //此处是获取选择的下拉框（文件类别）的laber，如：国际法
      if (this.form_add.name == "") {
        this.$message({
          type: "warning",
          message: "文件名称不能为空!",
        });
        return;
      }
      if (this.form_add.fileList.length == 0) {
        this.$message({
          type: "warning",
          message: "未选择文件!",
        });
        return;
      } else {
        let fd = new FormData();
        let file_ext = this.form_add.fileList[0].name.substring(
          lastIndexOf(this.form_add.fileList[0].name, ".") + 1,
          this.form_add.fileList[0].name.length
        );
        let fileInfo = {
          create_id: this.$store.getters.userInfo.account,
          description: this.form_add.ms,
          dict_code: this.form_add.region,
          files: [
            {
              name: this.form_add.fileList[0].name,
              size: this.form_add.fileList[0].size,
              type: file_ext,
              uuid: uuid() + "." + file_ext,
            },
          ],
          id: "",
          name: this.form_add.name,
        };
        fd.append("info", JSON.stringify(fileInfo));
        fd.append("folder", "flfg");
        fd.append("file", this.form_add.fileList[0].raw);
        fileUpload("api/rest/document/upload", fd).then((data) => {
          this.centerDialogVisible_add = false;
          this.handleCurrentChange_lb(1);
        });
      }
    },

    //上传文件中的删除
    handleRemove(index, row) {
      this.form_add.fileList = [];
    },
    //选择文件
    handleChange(file, fileList) {
      if (fileList.length > 0) {
        this.form_add.fileList = [fileList[fileList.length - 1]]; // 这一步，是展示最后一次选择的文件
        //选中文件，将文件名绑定到文档名称中
        // this.form_add.name = file.name;
        // if (lastIndexOf(file.name, ".") != -1) {
        //   this.form_add.name = file.name.substring(0, lastIndexOf(file.name, "."));
        // }
      }
    },
  },
  mounted() {
    let _this = this;
    _this.format_files = format_file();
    //默认查询数据
    // _this.searchs(1);
    _this.options = [];
    get("api/rest/3z/dictitem/queryDictItem/" + _this.type_classify).then(
      (data) => {
        if (data.length != 0) {
          data.forEach((item) => {
            _this.options.push({ value: item.code, label: item.name });
          });
        }
      }
    );
  },
  watch: {
    //全文检索和列表检索开关监听
    toggle_value: function (s) {
      if (!s) this.toggle_value_qw = s;
      else this.toggle_value_lb = !s;
    },
    //新增弹出框隐藏事件
    centerDialogVisible_add: function (s) {
      if (!s) {
        this.form_add = {
          name: "",
          region: this.options[0].value,
          fileList: [],
        };
      }
    },
    //视频预览弹出框隐藏事件
    centerDialogVisible_video: function (s) {
      if (!s) {
        this.video_src = "";
        document.getElementById("video").pause();
      }
    },
    //音频预览弹出框隐藏事件
    centerDialogVisible_sound: function (s) {
      if (!s) {
        this.sound_src = "";
        document.getElementById("sound_id").pause();
      }
    },
    //TXT预览弹出框隐藏事件
    centerDialogVisible_txt: function (s) {
      if (!s) {
        this.txt_src = "";
      }
    },
  },
};
</script>
<style lang="scss">
#flfg1 {
  width: calc(100% - 55px);
  height: calc(100% - 70px);
  margin: 20px;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  background-image: url("../../assets/img/wfzy/01.png");
  background-size: 100% 100%;
  .el-input__count {
    color: #229dbd;
    background: #1d2d4600;
  }
  .el-input__count-inner {
    color: #229dbd;
    background: #1d2d46;
  }
  .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;
  }
  .top-div {
    width: 100%;
    height: 90px;
    .el-input {
      float: left;
      width: 200px;
      margin-right: 30px;
      margin-top: 30px;
      .el-input__inner {
        background: none;
        color: #ffff;
        border: 1px solid #146a80 !important;
        box-shadow: 0 0 10px #1b6097;
      }
    }
    .el-select {
      float: left;
    }
    .sjxz {
      width: 350px;
      margin-top: 30px;
      float: left;
      .el-date-editor {
        background: none;
        span {
          color: white;
        }
        .el-range-input {
          color: white;
          background: none;
        }
      }
      .el-input__inner {
        border: 1px solid #146a80 !important;
      }
    }
    .button-discuss {
      width: 100px;
      height: 30px;
      line-height: 30px;
      float: left;
      margin-top: 35px;
      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: 100px;
      height: 30px;
      line-height: 30px;
      float: right;
      margin-top: 35px;
      margin-right: 20px;
      font-size: 14px;
      text-align: center;
      cursor: pointer;
      background-image: url(../../assets/img/yqjc/40.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .toggle-switch {
      float: left;
      margin-top: 40px;
      margin-left: 20px;
      .el-switch__label.is-active {
        color: #409eff !important;
      }
      .el-switch__label {
        display: unset;
        color: #5a5a5a;
        span {
          font-size: 15px;
        }
      }
    }
  }
  .bottom-div {
    width: 100%;
    height: calc(100% - 85px);
    box-shadow: 0 0 10px #1b6097;
    .table-div {
      width: 100%;
      height: calc(100% - 50px);
      .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-download {
        color: #1172d8;
        cursor: pointer;
        font-size: 20px;
      }
      .el-icon-edit {
        color: #1172d8;
        cursor: pointer;
        font-size: 20px;
      }
      .el-icon-view {
        color: #00ffff;
        font-size: 20px;
        cursor: pointer;
      }
      .el-table--group::after,
      .el-table--border::after,
      .el-table::before {
        background-color: unset;
      }
    }
    .bottom-content {
      width: 100%;
      height: calc(100% - 50px);
      .content-title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        box-sizing: border-box;
        background: #263b5d;
        .new-num {
          color: #09c69c;
        }
      }
      .content-text {
        width: 100%;
        height: calc(100% - 40px);
        padding: 10px;
        overflow-y: auto;
        box-sizing: border-box;
        .content-news {
          border-bottom: 1px solid #156677;
          .news-title {
            width: 100%;
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
            cursor: pointer;
            box-sizing: border-box;
            .first-div {
              font-size: 18px;
              float: left;
            }
            .last-div {
              font-size: 15px;
              float: left;
              margin-left: 50px;
            }
            .span_cl {
              color: #28d0ff;
            }
          }
          .news-content {
            font-size: 18px;
            text-indent: 25px;
            margin-top: 10px;
            cursor: pointer;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            color: #08addb;
            em {
              color: red;
              font-size: 22px;
              font-style: normal;
              font-weight: 600;
            }
          }
          .news-info {
            width: 100%;
            height: 30px;
            margin-top: 10px;
            .news-info-from {
              margin-left: 20px;
              span {
                color: #28d0ff;
              }
            }
            .news-info-channel {
              margin-left: 20px;
              span {
                color: #28d0ff;
              }
            }
            .news-info-time {
              margin-left: 20px;
            }
            .news-info-feeling {
              margin-left: 20px;
            }
            .news-info-tool {
              width: 100px;
              float: right;
            }
            .el-icon-download {
              color: #1172d8;
              cursor: pointer;
              font-size: 20px;
            }
            .views {
              color: #00ffff;
              font-size: 20px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  .el-dialog {
    background: #1d2d46 !important;
    .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;
    }
  }
  /deep/ .el-list-enter-active,
  /deep/ .el-list-leave-active {
    transition: none;
  }

  /deep/ .el-list-enter,
  /deep/ .el-list-leave-active {
    opacity: 0;
  }
  /deep/ .el-upload-list {
    height: 40px;
  }
  .slide-fade-enter-active {
    transition: all 0.3s ease;
  }
  .slide-fade-leave-active {
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
  }
  .slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
  }
  .xzwd {
    .el-dialog__body {
      padding: 25px 25px 0px;
    }
  }
}
</style>