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>
          </div>
          <ul class="left-main">
            <li>
              <div class="one">通知标题：7月报表收集</div>
              <div class="two">截止时间：2022-07-17</div>
              <div class="three">通知类型：文档搜集</div>
              <div class="four">
                <p class="four1">通知内容:</p>
                <p>文档搜集文档搜集文档搜集文档搜集文档搜集...</p>
              </div>
              <div class="five">
                <span>查看详细</span>
                <span>上传文件</span>
              </div>
            </li>
          </ul>
          <ul class="left-main">
            <li>
              <div class="one">通知标题：7月报表收集</div>
              <div class="two">截止时间：2022-07-17</div>
              <div class="three">通知类型：文档搜集</div>
              <div class="four">
                <p class="four1">通知内容:</p>
                <p>文档搜集文档搜集文档搜集文档搜集文档搜集...</p>
              </div>
              <div class="five">
                <span>查看详细</span>
                <span>上传文件</span>
              </div>
            </li>
          </ul>
          <ul class="left-main">
            <li>
              <div class="one">通知标题：7月报表收集</div>
              <div class="two">截止时间：2022-07-17</div>
              <div class="three">通知类型：文档搜集</div>
              <div class="four">
                <p class="four1">通知内容:</p>
                <p>文档搜集文档搜集文档搜集文档搜集文档搜集...</p>
              </div>
              <div class="five">
                <span>查看详细</span>
                <span>上传文件</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">
              <input
                type="text"
                placeholder="请输入文档信息"
                class="cen—top-input"
              />
              <span class="cen—top-but">快速搜索</span>
              <img
                src="../../assets/img/ri：search-2-line@2x.png"
                class="cen—top-img"
              />
            </div>
          </div>
        </div>
        <div class="cen—bottom">
          <div class="one">
            <p>个人文档</p>
            <img src="../../assets/img/MMB1.png" alt="" />
          </div>
          <div class="two">
            <p>部门文档</p>
            <img src="../../assets/img/MMB2.png" alt="" />
          </div>
          <div class="three">
            <p>公共文档</p>
            <img src="../../assets/img/MMB3.png" alt="" />
          </div>
          <div class="four">
            <p>文档设置</p>
            <img src="../../assets/img/MMB4.png" alt="" />
          </div>
        </div>
      </div>
      <div class="right">
        <div class="left1">
          <div class="left-top">
            <h3>通知</h3>
          </div>
          <ul class="left-main">
            <li>
              <div class="one">通知标题：7月报表收集</div>
              <div class="two">截止时间：2022-07-17</div>
              <div class="three">通知类型：文档搜集</div>
              <div class="four">
                <p class="four1">通知内容:</p>
                <p>文档搜集文档搜集文档搜集文档搜集文档搜集...</p>
              </div>
              <div class="five">
                <span>查看详细</span>
                <span>上传文件</span>
              </div>
            </li>
          </ul>
          <ul class="left-main">
            <li>
              <div class="one">通知标题：7月报表收集</div>
              <div class="two">截止时间：2022-07-17</div>
              <div class="three">通知类型：文档搜集</div>
              <div class="four">
                <p class="four1">通知内容:</p>
                <p>文档搜集文档搜集文档搜集文档搜集文档搜集...</p>
              </div>
              <div class="five">
                <span>查看详细</span>
                <span>上传文件</span>
              </div>
            </li>
          </ul>
          <ul class="left-main">
            <li>
              <div class="one">通知标题：7月报表收集</div>
              <div class="two">截止时间：2022-07-17</div>
              <div class="three">通知类型：文档搜集</div>
              <div class="four">
                <p class="four1">通知内容:</p>
                <p>文档搜集文档搜集文档搜集文档搜集文档搜集...</p>
              </div>
              <div class="five">
                <span>查看详细</span>
                <span>上传文件</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <div class="left-top">
          <h3>最近收到的文件</h3>
        </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%" />
        <el-button-group>
          <el-button icon="el-icon-refresh" @click="rotate(-90)"></el-button>
          <el-button
            icon="el-icon-refresh-right"
            @click="rotate(90)"
          ></el-button>
          <el-button icon="el-icon-zoom-in" @click="scale(0.1)"></el-button>
          <el-button icon="el-icon-zoom-out" @click="scale(-0.1)"></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="password"
            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" circle @click="gb1" />
    </div>
  </div>
</template>

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

import { delShare1, delShare2 } from "@/api/doc/share1";
export default {
  data() {
    return {
      //机密文件的账号密码内容
      loginForm: {
        username: "admin",
        password: "admin123",
      },
      //机密文件的账号密码验证规则
      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: {},
    };
  },
  methods: {
    //底部表格数据
    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);
      });
    },
    //预览图片的缩放
    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})`;
    },

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

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

    //预览
    handlePreview() {
      const previewRow = this.currentRow;
      // console.log("handlePreview started");

      //图片后缀名
      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 == previewRow.docType)) {
        this.preview = true;
        this.vid1 = true;
        this.aud1 = false;
        this.img1 = false;
        this.vid = previewRow.docPath;
      } else if (audios.some((item) => item == previewRow.docType)) {
        this.preview = true;
        this.aud1 = true;
        this.vid1 = false;
        this.img1 = false;
        this.aud = previewRow.docPath;
      } else if (pictures.some((item) => item == previewRow.docType)) {
        this.preview = true;
        this.aud1 = false;
        this.vid1 = false;
        this.img1 = true;
        this.imgg = previewRow.docPath;
      } else {
        this.$tab.openPage(
          window.open("/individual/Pre/user/" + previewRow.docId, "_blank"),
          localStorage.setItem("docName", previewRow.docName)
        );
      }
    },

    //验证账号密码
    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) {
      //     login(this.loginForm.username, this.loginForm.password).then(

      //     );
      //   }
      // });
      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;
            });
        }
      });
    },
  },

  mounted() {
    this.getList();
  },
};
</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,
    .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;
      .left1 {
        width: calc(100vw * (375 / 1920));
        height: calc(100vh * (556 / 1080));
        overflow: auto;
        .left-top {
          width: calc(100vw * (365 / 1920));
          height: calc(100vh * (40 / 1080));
          font-size: 16px;
          font-weight: 400;
          color: #ffffff;
          margin-top: 5px;
          background: url(../../assets/img/main_left_decorate.png);
          background-size: calc(100vw * (365 / 1920)) calc(100vh * (40 / 1080));
          position: sticky;
          left: 0;
          top: 0;
          h3 {
            padding-top: 6px;
            padding-left: 10px;
            margin: 0;
            font-size: 0.2rem;
            font-weight: 400;
          }
        }
      }
      .left-main {
        list-style: none;
        padding: 0;
        margin-top: 10px;
        li {
          width: calc(100vw * (365 / 1920));
          height: calc(100vh * (230 / 1080));
          background: rgba(18, 32, 80, 0.4);
          border-radius: 2px 2px 2px 2px;
          opacity: 1;
          div {
            padding-top: 8px;
            padding-left: 20px;
            padding-right: 5px;
          }
          .one {
            padding-top: 12px;
          }
          .five {
            display: flex;
            justify-content: space-evenly;
            color: #2e8aecff;
            padding-top: 8px;
          }
          .four {
            display: flex;
            .four1 {
              width: calc(100vw * (90 / 1920));
            }
          }
        }
      }
    }
    .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-cen {
          //   width: calc(100vw * (96 / 1920));
          //   height: calc(100vh * (136 / 1080));
          //   background: #0f1540ff;
          //   position: absolute;
          //   top: 30px;
          //   left: 25px;
          //   list-style: none;
          //   padding: 0 calc(100vw * (3 / 1920));
          //   padding-top: calc(100vh * (10 / 1080));
          //   border: 1px solid #00000040;
          //   border-radius: 2px 2px 2px 2px;
          //   z-index: 99;
          //   // display: none;
          //   li {
          //   padding: calc(100vh * (6 / 1080)) calc(100vw * (10 / 1920));
          //   }
          // }
        }
        .cen—top-right {
          width: calc(100vw * (536 / 1920));
          height: calc(100vh * (36 / 1080));
          // 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));
            }
            .cen—top-input {
              width: calc(100vw * (436 / 1920));
              height: calc(100vh * (36 / 1080));
              padding-left: calc(100vw * (53 / 1920));
              background: #14265e80;
              border: 1px solid #01d1ffff;
            }
            .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;
            }
          }
        }
      }
      .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;
        .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));
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
        margin-top: 10px;
        background: url(../../assets/img/main_left_decorate.png);
        background-size: cover;
        h3 {
          padding-top: 3px;
          padding-left: 10px;
          margin: 0;
        }
      }
      .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));
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
        margin-top: 10px;
        background: url(../../assets/img/main_left_decorate.png);
        background-size: cover;
        h3 {
          padding-top: 3px;
          padding-left: 10px;
          margin: 0;
        }
      }
      .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 * (1500 / 1920));
    height: calc(100vh * (850 / 1080));
    // background: salmon;
    background: #0f1540ff;
    position: absolute;
    top: 10%;
    left: 10%;
    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;
      top: 10%;
      right: 1%;
    }
  }

  .jm {
    width: calc(100vw * (530 / 1920));
    height: calc(100vh * (370 / 1080));
    // background: salmon;
    background: #0f1540ff;
    position: absolute;
    top: 25%;
    left: 35%;
    z-index: 99;
    display: flex;
    // justify-content: center;
    align-items: center;
    .gb1 {
      position: absolute;
      top: 0;
      right: 0;
    }
    .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;
}
</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>