lzga-ui/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-select v-model="type" class="cen—top-left">
            <el-option value="1" label="公共文档">公共文档</el-option>
            <el-option value="2" label="部门文档">部门文档</el-option>
            <el-option value="3" label="个人文档">个人文档</el-option>
          </el-select>

          <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">
          <div class="one" @click="checkRouteAndNavigate('/home/doc/personal')" style="cursor: pointer;">
              <p>个人文档</p>
              <img src="../../assets/img/MMB1.png" alt="" />
          </div>
          <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="120">
          </el-table-column>
          <el-table-column prop="createTime" label="收到时间" width="160">
          </el-table-column>
          <el-table-column prop="docType" label="文件类型" width="80">
          </el-table-column>
          <el-table-column prop="docLevel" label="文件级别" width="80" :formatter="fileLevelData">
          </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="handlePreview(scope.row)">预览</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="right">
        <div class="right-top">
          <h3>最近发送的文件</h3>
          <p @click="mores2">更多</p>
        </div>
        <el-table :data="tableData2" stripe style="width: 99%" class="right-main" height="calc(100vh * (230 / 1080))">
          <el-table-column prop="docName" label="文件名" width="180">
          </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="docLevel" label="文件级别" width="80" :formatter="fileLevelData">
          </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="handlePreview(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 store from "@/store";
  import "@/styles1/element-ui1.scss";

  import {
    listLevel
  } from "@/api/doc/level";
  import {
    officeType
  } from "@/api/doc/info";
  import {
    delShare1,
    delShare2,
    notice,
    msg
  } from "@/api/doc/share1";
  export default {
    data() {
      return {
        //文件等级数据
        levelOptions: [],
        //内容详细弹窗
        look1: false,
        //内容详细弹窗内容
        details: "",
        //中间通知列表
        notices: [],
        //中间消息列表
        msg: [],
        //搜索
        type: "1",
        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: {

      /**
       * 检查权限并导航到指定路由
       * @param {string} routePath - 目标路由路径
       */
      checkRouteAndNavigate(routePath) {
        if (this.checkRouteAccess(routePath)) {
          this.$router.push(routePath);
        }
      },

      /**
       * 检查路由访问权限
       * @param {string} routePath - 要检查的路由路径
       */
      checkRouteAccess(routePath) {
        // 获取用户角色
        const userRoles = store.getters.roles;

        // 定义角色对应的路由权限（根据你的实际业务调整）
        const rolePermissions = {
          admin: ['/home/doc/personal', '/home/doc/dept', '/home/doc/public', '/home/setting/ocr'],
          user: ['/home/doc/personal'],
          deptManager: ['/home/doc/personal', '/home/doc/dept']
        };

        // 检查当前用户的角色是否有访问该路由的权限
        const hasPermission = userRoles.some(role => {
          const permissions = rolePermissions[role] || [];
          return permissions.includes(routePath);
        });

        if (!hasPermission) {
          this.$modal.msgWarning('您没有访问该功能的权限');
          return false;
        }

        return true;
      },
      //通知内容更多
      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,
            data2: this.type
          },
        });
        // sessionStorage.setItem("suju", this.input);
      },
      //底部左边表格更多跳转
      mores() {
        this.$router.push("/home/page/more");
      },
      //底部右边表格更多跳转
      mores2() {
        this.$router.push("/home/page/more2");
      },

      //底部表格数据
      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);
        });
        //获取文件级别数据
        listLevel().then((response) => {
          this.levelOptions = response.rows;
        });
      },

      /**处理文档级别数据*/
      fileLevelData(row, col, value) {
        try {
          const obj = this.levelOptions.find((item) => item.levelId == value);
          return obj.levelName;
        } catch (e) {}
      },
      // 滚轮滑动放大缩小
      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 if (officeType.some(item => item == row.docType)) {
          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);
        } else {
          this.$modal.msgWarning("该文件不支持预览");
        }
      },
      //验证账号密码
      // 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 * (804 / 1920));
        height: calc(100vh * (600 / 1080));
        // background: aqua;
        position: relative;

        .cen—top {
          width: calc(100vw * (700 / 1920));
          height: calc(100vh * (40 / 1080));
          // background: salmon;
          // overflow: hidden;
          margin-left: calc(100vw * (61 / 1920));
          display: flex;
          align-items: center;

          .cen—top-left {
            width: calc(100vw * (130 / 1920));
            height: calc(100vh * (36 / 1080));
            // background: seagreen;
            margin-right: calc(100vw * (5 / 1920));
            font-size: 12px;
            color: #2e8aecff;
            display: flex;
            align-items: center;

            ::v-deep .el-input--medium .el-input__inner {
              height: 26px;
              line-height: 26px;
              font-size: 12px;
            }

            ::v-deep .el-input__suffix {
              height: 120%;
            }

            .el-dropdown-link {
              cursor: pointer;
              color: #409eff;
            }

            .el-icon-arrow-down {
              font-size: 12px;
            }
          }

          .cen—top-right {
            width: calc(100vw * (526 / 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 * (420 / 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 * (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;
            }
          }
        }

        .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>