lzga-doc/src/views1/Page/PageView.vue

<template>
  <div class="containe">
    <div class="top">
      <div class="left">
        <div class="left1">
          <div class="left-top">
            <h3>通知</h3>
            <p @click="leftMores">更多</p>
          </div>
          <ul class="left-main">
            <li v-for="item in notices" :key="item.id">
              <div class="one">通知标题：{{ item.msgTitle }}</div>
              <div class="two">发送时间：{{ item.createTime }}</div>
              <div>发<span class="three">送</span>人：{{ item.createBy }}</div>
              <div class="four">
                <p class="four1">通知内容:</p>
                <p class="four2" v-html="item.msgContent"></p>
              </div>
              <div class="five">
                <span @click="looks(item.msgContent)">查看详细</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="cen">
        <div class="cen—top">
          <!-- <el-dropdown class="cen—top-left">
            <span class="el-dropdown-link">
              全部文档<i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人文档</el-dropdown-item>
              <el-dropdown-item>部门文档</el-dropdown-item>
              <el-dropdown-item>公共文档</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
          <div class="cen—top-right">
            <div class="cen—top-div">
              <el-input
                type="text"
                placeholder="请输入文档信息"
                v-model="input"
                class="searchs"
                @keyup.enter.native="jumpSearch"
              ></el-input>
              <div class="cen—top-but" @click="jumpSearch">快速搜索</div>
              <img
                src="../../assets/img/ri：search-2-line@2x.png"
                class="cen—top-img"
              />
            </div>
          </div>
        </div>
        <div class="cen—bottom">
          <router-link :to="{ path: '/home/doc/personal' }" class="one">
            <p>个人文档</p>
            <img src="../../assets/img/MMB1.png" alt="" />
          </router-link>
          <router-link :to="{ path: '/home/doc/dept' }" class="two">
            <p>部门文档</p>
            <img src="../../assets/img/MMB2.png" alt="" />
          </router-link>
          <router-link :to="{ path: '/home/doc/public' }" class="three">
            <p>公共文档</p>
            <img src="../../assets/img/MMB3.png" alt="" />
          </router-link>
          <router-link :to="{ path: '/home/setting/ocr' }" class="four">
            <p>文字识别</p>
            <img src="../../assets/img/MMB4.png" alt="" />
          </router-link>
        </div>
      </div>
      <div class="right">
        <div class="right1">
          <div class="right-top">
            <h3>消息</h3>
            <p @click="rightMores">更多</p>
          </div>
          <ul class="right-main">
            <li v-for="item in msg" :key="item.id">
              <div class="one">消息标题：{{ item.msgTitle }}</div>
              <div class="two">消息时间：{{ item.createTime }}</div>
              <div>发<span class="three">送</span>人：{{ item.createBy }}</div>
              <div class="four">
                <p class="four1">消息内容:</p>
                <p class="four2" v-html="item.msgContent"></p>
              </div>
              <div class="five">
                <span @click="looks(item.msgContent)">查看详细</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <div class="left-top">
          <h3>最近收到的文件</h3>
          <p @click="mores">更多</p>
        </div>
        <el-table
          :data="tableData1"
          stripe
          style="width: 99%"
          class="left-main"
          height="calc(100vh * (230 / 1080))"
        >
          <el-table-column prop="docName" label="文件名" width="180">
          </el-table-column>
          <el-table-column prop="user" label="发件人" width="140">
          </el-table-column>
          <el-table-column prop="createTime" label="收到时间" width="160">
          </el-table-column>
          <el-table-column prop="docType" label="文件类型" width="100">
          </el-table-column>
          <el-table-column prop="isSecret" label="机密" width="50">
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="isSecretRole(scope.row)"
                >预览</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="right">
        <div class="right-top">
          <h3>最近发送的文件</h3>
        </div>
        <el-table
          :data="tableData2"
          stripe
          style="width: 99%"
          class="right-main"
          height="calc(100vh * (230 / 1080))"
        >
          <el-table-column prop="docName" label="文件名" width="200">
          </el-table-column>
          <el-table-column prop="createTime" label="收到时间" width="180">
          </el-table-column>
          <el-table-column prop="docType" label="文件类型" width="120">
          </el-table-column>
          <el-table-column prop="isSecret" label="机密" width="50">
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="isSecretRole(scope.row)"
                >预览</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 预览对话框 -->
    <div class="dhk" v-if="preview">
      <video :src="vid" controls v-if="vid1"></video>
      <audio :src="aud" controls v-if="aud1"></audio>

      <div class="image-container" v-if="img1">
        <el-image
          :src="imgg"
          ref="imageRef"
          style="max-width: 100%"
          @mousewheel.prevent="gunlun"
        />
        <el-button-group>
          <el-button
            icon="el-icon-refresh-left"
            @click="rotate(-90)"
            title="向左旋转"
          ></el-button>
          <el-button
            icon="el-icon-refresh-right"
            @click="rotate(90)"
            title="向右旋转"
          ></el-button>
          <el-button
            icon="el-icon-zoom-in"
            @click="scale(0.1)"
            title="放大"
          ></el-button>
          <el-button
            icon="el-icon-zoom-out"
            @click="scale(-0.1)"
            title="缩小"
          ></el-button>
        </el-button-group>
      </div>
      <el-button class="gb" icon="el-icon-close" circle @click="gb" />
    </div>
    <!-- 是否机密文件 -->
    <div class="jm" v-if="check">
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        label-width="100px"
        class="login-form"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            type="text"
            v-model="loginForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item style="width: 100%">
          <el-button
            size="medium"
            type="primary"
            style="width: 30%"
            @click="submitForm"
          >
            提交
          </el-button>
        </el-form-item>
      </el-form>

      <el-button
        class="gb1"
        icon="el-icon-close"
        size="small"
        circle
        @click="gb1"
      />
    </div>

    <!-- 查看详细 -->
    <el-dialog
      title="内容详细"
      :visible.sync="look1"
      width="30%"
      custom-class="el-dialog6"
    >
      <div class="main" v-html="details"></div>
      <span slot="footer" class="dialog-footer1">
        <el-button type="primary" @click="look1 = false">确 定</el-button>
        <el-button @click="look1 = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Cookies from "js-cookie";

import "@/styles1/element-ui1.scss";

import { delShare1, delShare2, notice, msg } from "@/api/doc/share1";
export default {
  data() {
    return {
      //内容详细弹窗
      look1: false,
      //内容详细弹窗内容
      details: "",
      //中间通知列表
      notices: [],
      //中间消息列表
      msg: [],
      //搜索
      input: "",
      //机密文件的账号密码内容
      loginForm: {
        username: "",
        password: "",
      },
      //机密文件的账号密码验证规则
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的用户名" },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
        ],
      },

      //底部左边表格数据
      tableData1: [],
      //底部右边表格数据
      tableData2: [],
      //预览图片的旋转
      scalePercentage: 1,
      //预览图片的缩放
      rotationAngle: 0,

      // 预览界面
      preview: false,

      // 机密界面
      check: false,

      //视频路径和显示
      vid: "",
      vid1: false,
      //音频路径和显示
      aud: "",
      aud1: false,
      //图片路径和显示
      imgg: "",
      img1: false,
      // 临时保存当前点击行 row
      currentRow: {},
    };
  },
  mounted() {
    this.getList();
    this.noticesList();
    this.msgList();
    this.loginForm.username = sessionStorage.getItem("name");
  },
  methods: {
    //通知内容更多
    leftMores() {
      this.$router.push("/home/page/leftmores");
    },
    //消息内容更多
    rightMores() {
      this.$router.push("/home/page/rightmores");
    },
    //内容详细
    looks(val) {
      this.look1 = true;
      this.details = val;
    },
    //中间通知列表
    noticesList() {
      notice().then((response) => {
        this.notices = response.rows;
        // console.log(response.rows);
      });
    },
    //中间通知列表
    msgList() {
      msg().then((response) => {
        this.msg = response.rows;
      });
    },

    // 搜索跳转
    jumpSearch() {
      this.$router.push({path:"/home/retrieval",query:{datas:this.input} });
      // sessionStorage.setItem("suju", this.input);
    },
    //底部表格更多跳转
    mores() {
      this.$router.push("/home/page/more");
    },

    //底部表格数据
    getList() {
      //左边表格
      delShare1(this.queryParams).then((response) => {
        // console.log(response.rows,'111111111');
        // 给定义的列表空数组赋值
        this.tableData1 = response.rows;
        //改变是否机密的值
        var newisSecret = this.tableData1.map((item) => item.isSecret);
        // console.log(a);
        newisSecret = response.rows.map(
          (i) => (i.isSecret = i.isSecret == 1 ? "是" : "否")
        );
        // console.log(newisSecret);
      });
      //右边边表格
      delShare2(this.queryParams).then((response) => {
        // console.log(response.rows,'111111111');
        // 给定义的列表空数组赋值
        this.tableData2 = response.rows;
        //改变是否机密的值
        var newisSecret = this.tableData2.map((item) => item.isSecret);
        // console.log(a);
        newisSecret = response.rows.map(
          (i) => (i.isSecret = i.isSecret == 1 ? "是" : "否")
        );
        // console.log(newisSecret);
      });
    },
    // 滚轮滑动放大缩小
    gunlun(e) {
      const image = this.$refs.imageRef.$el.querySelector("img");
      if (e.deltaY > 0) {
        // console.log("鼠标向下滚动，图片缩小");
        this.scalePercentage -= 0.1;
        image.style.transform = `scale(${this.scalePercentage})`;
      } else {
        // console.log("鼠标向上滚动，图片放大");
        this.scalePercentage += 0.1;
        image.style.transform = `scale(${this.scalePercentage})`;
      }
    },
    //预览图片的缩放
    rotate(angle) {
      this.rotationAngle += angle;
      const image = this.$refs.imageRef.$el.querySelector("img");
      image.style.transform = `rotate(${this.rotationAngle}deg)`;
    },
    //预览图片的旋转
    scale(delta) {
      this.scalePercentage += delta;
      const image = this.$refs.imageRef.$el.querySelector("img");
      image.style.transform = `scale(${this.scalePercentage})`;
    },

    // 预览关闭
    gb() {
      this.preview = false;
    },

    // 检验关闭
    gb1() {
      this.check = false;
    },

    // 是否机密
    isSecretRole(row) {
      this.currentRow = row;
      // console.log(`row=${row}`);
      if (row.isSecret == "是") {
        this.check = true;
      }else{
        this.handlePreview(row)
      }
    },

    //预览
    handlePreview(row) {
      row = this.currentRow;
      //图片后缀名
      var pictures = ["jpeg", "tiff", "raw", "bmp", "gif", "png", "jpg"];
      //音频后缀名
      var audios = [
        "mid",
        "mp3",
        "wav",
        "wma",
        "ra",
        "ogg",
        "flac",
        "aac",
        "ape",
      ];
      //视频后缀名
      var videos = [
        "asf",
        "avi",
        "mp4",
        "ogm",
        "ifo",
        "mpg",
        "mov",
        "mpeg",
        "mpg",
        "vob",
        "wmv",
        "rm",
        "rmvb",
      ];

      //判断后缀名
      if (videos.some((item) => item == row.docType)) {
        this.preview = true;
        this.vid1 = true;
        this.aud1 = false;
        this.img1 = false;
        this.vid = row.docPath;
      } else if (audios.some((item) => item == row.docType)) {
        this.preview = true;
        this.aud1 = true;
        this.vid1 = false;
        this.img1 = false;
        this.aud = row.docPath;
      } else if (pictures.some((item) => item == row.docType)) {
        this.preview = true;
        this.aud1 = false;
        this.vid1 = false;
        this.img1 = true;
        this.imgg = row.docPath;
      } else {
        row.isEdit = false;
        this.$tab.openPage(
          window.open(
            "/individual/Pre/user/" + row.docId + "?row=" + JSON.stringify(row),
            "_blank"
          )

          // window.open("/individual/Pre/user/" + row.docId +"/title/"+ row.docName, '_blank'),
        );
        // console.log(111);
      }
      // console.log(row.docPath);
      // console.log(vid);
    },
    //验证账号密码
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get("rememberMe");
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password:
          password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
      };
    },

    //验证账号密码
    submitForm(row) {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), {
              expires: 30,
            });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
          }
          this.$store
            .dispatch("Login", this.loginForm)
            .then(() => {
              // 登录成功
              this.currentLoginStatus = 1;
              // 关闭登录界面
              this.check = false;
              // console.log("登录成功", "关闭登录界面");

              // console.log("预览界面");
              this.handlePreview(row);
            })
            .catch(() => {
              this.currentLoginStatus = 0;
            });
        }
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.containe {
  color: #7ea4c8ff;
  font-size: 0.14rem;
  font-family: PingFang SC-Medium, PingFang SC;
  background: url(../../assets/img/background.png);
  background-size: 100% 100%;
  padding-top: calc(100vh * (50 / 1080));
  .top {
    width: 100%;
    height: calc(100vh * (600 / 1080));
    padding-left: calc(100vw * (34 / 1920));
    padding-right: calc(100vw * (30 / 1920));
    display: flex;
    justify-content: space-between;
    .left {
      //滚动条样式
      ::-webkit-scrollbar {
        width: 3.5px;
      }
      ::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0);
      }
      ::-webkit-scrollbar-thumb {
        background: #2e8aec;
        border-radius: 3px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #2e8aec;
      }
      width: calc(100vw * (395 / 1920));
      height: calc(100vh * (568 / 1080));
      background: url(../../assets/img/main_BG_left.png);
      background-size: calc(100vw * (395 / 1920)) calc(100vh * (568 / 1080));
      padding-left: 10px;
      padding-top: 5px;
      .left1 {
        width: calc(100vw * (375 / 1920));
        height: calc(100vh * (556 / 1080));
        .left-top {
          width: calc(100vw * (365 / 1920));
          height: calc(100vh * (40 / 1080));
          margin-top: 5px;
          padding-left: calc(100vw * (20 / 1920));
          padding-right: calc(100vw * (20 / 1920));
          background: url(../../assets/img/main_left_decorate.png);
          background-size: calc(100vw * (365 / 1920)) calc(100vh * (40 / 1080));
          display: flex;
          justify-content: space-between;
          align-items: center;
          h3 {
            font-weight: bold;
            font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
            color: #ffffff;
          }
          p {
            padding-right: 10px;
            color: #2e8aecff;
            font-family: PingFang SC-Medium;
            &:hover {
              cursor: pointer;
            }
          }
        }
      }
      .left-main {
        width: calc(100vw * (365 / 1920));
        height: calc(100vh * (480 / 1080));
        list-style: none;
        padding: 0;
        margin-top: calc(100vh * (10 / 1080));
        overflow: auto;
        li {
          width: calc(100vw * (360 / 1920));
          height: calc(100vh * (230 / 1080));
          background: rgba(18, 32, 80, 0.4);
          border-radius: 2px 2px 2px 2px;
          opacity: 1;
          margin-bottom: calc(100vh * (10 / 1080));
          div {
            padding-top: 8px;
            padding-left: 20px;
            padding-right: 5px;
          }
          .one {
            padding-top: 12px;
          }
          .three {
            padding-left: calc(100vw * (6 / 1920));
            padding-right: calc(100vw * (6 / 1920));
          }
          .five {
            display: flex;
            justify-content: space-evenly;
            color: #2e8aecff;
            padding-top: calc(100vh * (20 / 1080));
            &:hover {
              cursor: pointer;
            }
          }
          .four {
            display: flex;
            padding-top: calc(100vh * (10 / 1080));
            .four1 {
              width: calc(100vw * (60 / 1920));
            }
            .four2 {
              width: calc(100vw * (250 / 1920));
              height: calc(100vh * (55 / 1080));
              // background: salmon;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 3;
              word-break: break-all;
              display: -webkit-box;
              -webkit-box-orient: vertical;
            }
          }
        }
      }
    }
    .right {
      //滚动条样式
      ::-webkit-scrollbar {
        width: 3.5px;
      }
      ::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0);
      }
      ::-webkit-scrollbar-thumb {
        background: #2e8aec;
        border-radius: 3px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #2e8aec;
      }
      width: calc(100vw * (395 / 1920));
      height: calc(100vh * (568 / 1080));
      background: url(../../assets/img/main_BG_left.png);
      background-size: calc(100vw * (395 / 1920)) calc(100vh * (568 / 1080));
      padding-left: 10px;
      padding-top: 5px;
      .right1 {
        width: calc(100vw * (375 / 1920));
        height: calc(100vh * (556 / 1080));
        .right-top {
          width: calc(100vw * (365 / 1920));
          height: calc(100vh * (40 / 1080));
          margin-top: 5px;
          padding-left: calc(100vw * (20 / 1920));
          padding-right: calc(100vw * (20 / 1920));
          background: url(../../assets/img/main_left_decorate.png);
          background-size: calc(100vw * (365 / 1920)) calc(100vh * (40 / 1080));
          display: flex;
          justify-content: space-between;
          align-items: center;
          h3 {
            font-weight: bold;
            font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
            color: #ffffff;
          }
          p {
            padding-right: 10px;
            color: #2e8aecff;
            font-family: PingFang SC-Medium;
            &:hover {
              cursor: pointer;
            }
          }
        }
      }
      .right-main {
        width: calc(100vw * (365 / 1920));
        height: calc(100vh * (480 / 1080));
        list-style: none;
        padding: 0;
        margin-top: calc(100vh * (10 / 1080));
        overflow: auto;
        li {
          width: calc(100vw * (360 / 1920));
          height: calc(100vh * (230 / 1080));
          background: rgba(18, 32, 80, 0.4);
          border-radius: 2px 2px 2px 2px;
          opacity: 1;
          margin-bottom: calc(100vh * (10 / 1080));
          div {
            padding-top: 8px;
            padding-left: 20px;
            padding-right: 5px;
          }
          .one {
            padding-top: 12px;
          }
          .three {
            padding-left: calc(100vw * (6 / 1920));
            padding-right: calc(100vw * (6 / 1920));
          }
          .five {
            display: flex;
            justify-content: space-evenly;
            color: #2e8aecff;
            padding-top: calc(100vh * (20 / 1080));
            &:hover {
              cursor: pointer;
            }
          }
          .four {
            display: flex;
            padding-top: calc(100vh * (10 / 1080));
            .four1 {
              width: calc(100vw * (60 / 1920));
            }
            .four2 {
              width: calc(100vw * (250 / 1920));
              height: calc(100vh * (55 / 1080));
              // background: salmon;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 3;
              word-break: break-all;
              display: -webkit-box;
              -webkit-box-orient: vertical;
            }
          }
        }
      }
    }
    .cen {
      width: calc(100vw * (784 / 1920));
      height: calc(100vh * (600 / 1080));
      // background: aqua;
      position: relative;
      .cen—top {
        width: calc(100vw * (633 / 1920));
        height: calc(100vh * (40 / 1080));
        // background: salmon;
        // overflow: hidden;
        margin-left: calc(100vw * (81 / 1920));
        display: flex;
        align-items: center;
        .cen—top-left {
          width: calc(100vw * (90 / 1920));
          height: calc(100vh * (36 / 1080));
          // background: seagreen;
          margin-right: calc(100vw * (5 / 1920));
          font-size: 12px;
          color: #2e8aecff;
          display: flex;
          align-items: center;
          .el-dropdown-link {
            cursor: pointer;
            color: #409eff;
          }
          .el-icon-arrow-down {
            font-size: 12px;
          }
        }
        .cen—top-right {
          width: calc(100vw * (536 / 1920));
          height: calc(100vh * (36 / 1080));
          margin-left: calc(100vw * (60 / 1920));
          // background: skyblue;
          .cen—top-div {
            position: relative;
            .cen—top-img {
              // background-size: calc(100vw * (24 / 1920)) calc(100vh * (24/ 1080));
              width: calc(100vw * (24 / 1920));
              height: calc(100vh * (24 / 1080));
              position: absolute;
              left: calc(100vw * (15 / 1920));
              top: calc(100vh * (7 / 1080));
            }
            .searchs {
              width: calc(100vw * (436 / 1920));
              ::v-deep .el-input__inner {
                height: calc(100vh * (36 / 1080)) !important;
                padding-left: calc(100vw * (50 / 1920));
                background: #14265e80;
                border: 1px solid #01d1ffff;
                color: #7ea4c8ff;
              }
            }
            .cen—top-but {
              width: calc(100vw * (100 / 1920));
              height: calc(100vh * (36 / 1080));
              display: inline-block;
              text-align: center;
              line-height: calc(100vh * (36 / 1080));
              background: #01d1ff80;
              color: #ffffffcc;
              vertical-align: top;
              &:hover {
                cursor: pointer;
              }
            }
          }
        }
      }
      .cen—bottom {
        width: calc(100vw * (784 / 1920));
        height: calc(100vh * (477 / 1080));
        background: url(../../assets/img/MMB.png);
        background-size: calc(100vw * (784 / 1920)) calc(100vh * (477 / 1080));
        margin-top: calc(100vh * (80 / 1080));
        position: relative;
        font-size: 0.18rem;
        color: #ffffffff;
        font-weight: 400;
        p {
          font-size: 0.18rem;
          font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
          font-weight: bold;
          color: #ffffff;
        }
        .one {
          position: absolute;
          display: flex;
          flex-direction: column;
          align-items: center;
          left: calc(100vw * (172 / 1920));
          top: -30px;
          width: calc(100vw * (140 / 1920));
          height: calc(100vh * (153 / 1080));
          img {
            width: 100%;
            height: calc(100vh * (130 / 1080));
          }
        }
        .two {
          position: absolute;
          display: flex;
          flex-direction: column;
          align-items: center;
          left: calc(100vw * (442 / 1920));
          top: -30px;
          width: calc(100vw * (140 / 1920));
          height: calc(100vh * (153 / 1080));
          img {
            width: 100%;
            height: calc(100vh * (130 / 1080));
          }
        }
        .three {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: absolute;
          left: calc(100vw * (36 / 1920));
          top: calc(100vh * (150 / 1080));
          width: calc(100vw * (140 / 1920));
          height: calc(100vh * (153 / 1080));
          img {
            width: 100%;
            height: calc(100vh * (130 / 1080));
          }
        }
        .four {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: absolute;
          right: calc(100vw * (57 / 1920));
          top: calc(100vh * (150 / 1080));
          width: calc(100vw * (140 / 1920));
          height: calc(100vh * (153 / 1080));
          img {
            width: 100%;
            height: calc(100vh * (130 / 1080));
          }
        }
      }
    }
  }
  .bottom {
    width: 100%;
    height: calc(100vh * (304 / 1080));
    background-size: cover;
    margin-top: calc(100vh * (30 / 1080));
    padding-left: calc(100vw * (30 / 1920));
    padding-right: calc(100vw * (34 / 1920));
    display: flex;
    justify-content: space-between;
    .left {
      width: calc(100vw * (920 / 1920));
      height: calc(100vh * (304 / 1080));
      background: url(../../assets/img/footer.png);
      background-size: calc(100vw * (920 / 1920)) calc(100vh * (304 / 1080));
      padding-left: 10px;
      .left-top {
        width: calc(100vw * (880 / 1920));
        height: calc(100vh * (40 / 1080));
        color: #ffffff;
        margin-top: 10px;
        background: url(../../assets/img/main_left_decorate.png);
        background-size: calc(100vw * (880 / 1920)) calc(100vh * (40 / 1080));
        display: flex;
        justify-content: space-between;
        align-items: center;
        h3 {
          padding-left: 10px;
          font-size: 0.2rem;
          font-weight: bold;
          font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
        }
        p {
          padding-right: 10px;
          font-size: 0.2rem;
          color: #2e8aecff;
          font-family: PingFang SC-Medium;
          &:hover {
            cursor: pointer;
          }
        }
      }
      .left-main {
        margin-top: calc(100vh * (8 / 1080));
        color: #7ea4c8ff;
        background: transparent;
        height: calc(100vh * (230 / 1080));
        // overflow: auto;
        font-size: 0.14rem;
      }
      //滚动条样式
      ::-webkit-scrollbar {
        width: 3.5px;
      }
      ::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0);
      }
      ::-webkit-scrollbar-thumb {
        background: #2e8aec;
        border-radius: 3px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #2e8aec;
      }
    }
    .right {
      width: calc(100vw * (920 / 1920));
      height: calc(100vh * (304 / 1080));
      background: url(../../assets/img/footer.png);
      background-size: calc(100vw * (920 / 1920)) calc(100vh * (304 / 1080));
      padding-left: 10px;
      .right-top {
        width: calc(100vw * (900 / 1920));
        height: calc(100vh * (40 / 1080));
        color: #ffffff;
        margin-top: 10px;
        background: url(../../assets/img/main_left_decorate.png);
        background-size: cover;
        h3 {
          padding-top: calc(100vh * (10 / 1080));
          padding-left: 10px;
          margin: 0;
          font-size: 0.2rem;
          font-weight: bold;
          font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
        }
      }
      .right-main {
        margin-top: calc(100vh * (8 / 1080));
        color: #7ea4c8ff;
        background: transparent;
        height: calc(100vh * (230 / 1080));
        // overflow: auto;
        font-size: 0.14rem;
      }
      //滚动条样式
      ::-webkit-scrollbar {
        width: 3.5px;
      }
      ::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0);
      }
      ::-webkit-scrollbar-thumb {
        background: #2e8aec;
        border-radius: 3px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #2e8aec;
      }
    }
  }

  //预览弹窗
  .dhk {
    width: calc(100vw * (1200 / 1920));
    height: calc(100vh * (850 / 1080));
    // background: salmon;
    background: #0f1540ff;
    position: absolute;
    top: 10%;
    left: 20%;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;

    .gb {
      position: absolute;
      top: 0;
      right: 0;
    }

    video {
      width: calc(100vw * (1440 / 1920));
      height: calc(100vh * (810 / 1080));
    }

    .el-image {
      width: calc(100vw * (960 / 1920));
      height: calc(100vh * (720 / 1080));
    }

    .el-button-group {
      position: absolute;
      bottom: 0;
      left: 35%;
    }
  }

  //机密验证界面
  .jm {
    width: calc(100vw * (530 / 1920));
    height: calc(100vh * (370 / 1080));
    // background: salmon;
    background: url(../../assets/img/Group-585.png);
    background-size: calc(100vw * (530 / 1920)) calc(100vh * (370 / 1080));
    padding-top: calc(100vh * (50 / 1080));
    padding-left: calc(100vw * (30 / 1920));
    position: absolute;
    top: 25%;
    left: 35%;
    z-index: 99;
    display: flex;
    // justify-content: center;
    align-items: center;
    .gb1 {
      position: absolute;
      top: 10%;
      right: 8%;
    }
    .el-button-group {
      position: absolute;
      top: 10%;
      right: 1%;
    }
  }
}
::v-deep .el-icon-arrow-down:before {
  display: none;
}

//table样式
::v-deep .el-table th {
  background: #016c9aa6;
  color: #2e8aecff;
}
::v-deep .el-table tr {
  background: transparent;
}
::v-deep
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background: transparent;
}
//table顶部白线消失处理
::v-deep .el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #006c9aff;
  padding: 0;
}
//table底下白线消失处理
::v-deep .el-table {
  color: #ffffffff;
}
::v-deep .el-table::before {
  width: 0;
}
//tr下面边框
::v-deep .el-table td.el-table__cell {
  border-bottom: 1px solid #083b61ff;
  padding: 8px 0;
}
::v-deep .el-table tbody tr:hover > td {
  background-color: #016c9a78 !important;
}
//预览弹出框样式
::v-deep .el-form-item__label {
  color: #2e8aecff;
}

::v-deep .el-input__inner {
  background-color: transparent;
  border: 1px solid #01d1ffff;
  color: #ffffffcc;
}
//底部表格超出显示滚动条
::v-deep .el-table--scrollable-x .el-table__body-wrapper{
 overflow: auto;
}

//通知内容详细
::v-deep .el-dialog6 {
  width: calc(100vw * (800 / 1920)) !important;
  height: calc(100vh * (950 / 1080)) !important;
  background: url(../../assets/img/Group-585.png);
  background-size: calc(100vw * (800 / 1920)) calc(100vh * (950 / 1080));
  .el-dialog__title {
    color: #ffffff;
  }
  .main {
    margin-top: calc(100vh * (40 / 1080));
    width: calc(100vw * (640 / 1920));
    height: calc(100vh * (680 / 1080));
    // background: salmon;
    color: #7ea4c8ff;
    overflow: auto;
  }
}
</style>

<style>
/* 中间下拉菜单样式 */
.el-dropdown-menu {
  background-color: #0f1540;
  border: 1px solid #0f1540ff;
}
.el-dropdown-menu__item {
  color: #006c9aff;
}
.el-dropdown-menu__item:hover {
  background: #01d1ff3b !important;
}
</style>