repaireschool_guanli/src/views/evaluate/evaluate.vue

<template>
  <div class="content-box">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <span class="cameratxt">评价管理</span>
    </div>

    <div class="middle">
      <div class="filter">
        <div class="condition">
          <span>关键字 : </span>
          <el-input :clearable="true" v-model="searchInput.keyWord" class="w-50 m-2" placeholder="请输入工单号或姓名"
            style="width: 180px" />
        </div>
        <div class="condition">
          <span>评价时间 : </span>
          <el-date-picker v-model="searchInput.createTime" type="daterange" range-separator="-" start-placeholder="起始时间"
            end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :prefix-icon="Calendar"
            placeholder="请选择日期" :clearable="true" />
        </div>
        <div class="condition">
          <span>评价 : </span>
          <el-select clearable v-model="searchInput.star" class="m-2" placeholder="请选择评价星级" @change="selSchool">
            <el-option label="1星" :value="1" />
            <el-option label="2星" :value="2" />
            <el-option label="3星" :value="3" />
            <el-option label="4星" :value="4" />
            <el-option label="5星" :value="5" />
          </el-select>
        </div>

        <el-button style="margin-left: 20px" color="rgba(111, 182, 184, 1)" type="primary" class="search"
          @click="searchBtn"><el-icon>
            <Search />
          </el-icon> <span>查询</span></el-button>
      </div>
      <!-- 按钮列表 -->
      <div class="gongneng">
        <el-button color="rgba(111, 182, 184, 1)" class="import" type="primary" @click="importExcel"><img
            src="@/assets/import.png" style="width: 14px; height: 14px; margin-right: 4px" alt="" />
          <span>导出表单</span></el-button>
      </div>
    </div>
    <div class="footer">
      <el-table :row-class-name="tableRowClassName" :data="tableData.list" style="width: 100%" :header-cell-style="{
        background: 'rgba(240, 243, 247, 1)',
        height: '50px',
        border: 0,
      }">
        <el-table-column align="center" width="180" prop="recordNo" label="工单编号" />
        <el-table-column align="center" prop="userName" label="姓名" />
        <el-table-column align="center" prop="userPhone" label="电话" />
        <el-table-column align="center" width="180" prop="description" label="故障描述" show-overflow-tooltip />
        <el-table-column align="center" width="170" prop="reportTime" label="报修时间" />
        <el-table-column align="center" prop="maintenancerName" label="技术员" />
        <el-table-column align="center" label="评价星级" width="160">
          <template #default="{ row, index }">
            <el-rate v-model="row.star" allow-half color="rgba(234, 149, 24, 1)" size="large" disabled
              disabled-void-color="rgba(179, 179, 179, 1)" />
          </template>
        </el-table-column>
        <el-table-column align="center" width="160" show-overflow-tooltip prop="content" label="评价内容" />
        <el-table-column align="center" prop="createTime" width="180" label="评价时间" />
        <el-table-column align="center" label="操作" width="220">
          <template #default="scope">
            <div class="edit">
              <div class="look" @click="orderInfo(scope.row)">详情</div>
              <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled"
                icon-color="#f89626" title="是否删除这条评价?" @confirm="confirmEvent(scope.row)" @cancel="cancelEvent">
                <template #reference>
                  <div class="look">删除</div>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 详情弹窗 -->
    <el-dialog class="orderInfo" v-model="orderInfoVisible" :close-on-click-modal="false" :close-on-press-escape="false"
      title="评价详情" align-center width="760" :before-close="cancelOrderInfo">
      <div class="order_info">
        <!-- 工单详情 工单信息 -->
        <div class="title">
          <img src="@/assets/orderInfo.png" alt="" />
          <span>工单信息</span>
        </div>
        <div class="workNum">
          <div class="titles">工单编号:</div><span>{{ orderInfoData.recordNo }}</span>
        </div>
        <div class="workNum">
          <div class="titles">报修姓名:</div><span>{{ orderInfoData.userName }}</span>
        </div>
        <div class="workNum">
          <div class="titles">报修电话:</div><span>{{ orderInfoData.userPhone }}</span>
        </div>
        <div class="workNum">
          <div class="titles">故障类型:</div><span>{{ orderInfoData.articleName }}</span>
        </div>
        <div class="workNum">
          <div class="titles">故障描述:</div><span>{{ orderInfoData.description }}</span>
        </div>
        <div class="workNum">
          <div class="titles">报修区域:</div><span>{{ orderInfoData.areaName }}{{ orderInfoData.address }}</span>
        </div>
        <div class="workNum">
          <div class="titles">报修录音:</div>
          <div class="audio" @click="bofang">
            <img src="@/assets/audio.png" alt="" />
            <div class="audioNum">{{ orderInfoData.voiceLength }}"</div>
            <!-- <button class="butt" @click="bofang">确认</button> -->
            <audio ref="audio" class="aud" :src="orderInfoData.voice"></audio>
          </div>
        </div>
        <div class="workNum">
          <div class="titles">报修时间:</div><span>{{ orderInfoData.reportTime }}</span>
        </div>
        <div class="workNum">
          <div class="titles">评价内容:</div><span>{{ orderInfoData.content }}</span>
        </div>
        <div class="workNum">
          <div class="titles">评价时间:</div><span>{{ orderInfoData.createTime }}</span>
        </div>
        <div class="workNums">
          <div class="titles">评价星级:</div>
          <el-rate v-model="orderInfoData.star" allow-half color="rgba(234, 149, 24, 1)" size="large" disabled
            disabled-void-color="rgba(179, 179, 179, 1)" />
        </div>
        <!-- 工单详情 报修进度 -->
        <div class="title">
          <img src="@/assets/repairsInfo.png" alt="" />
          <span>报修进度</span>
        </div>
        <!-- <div class="workNum">
            <span class="titles">维修总时长:</span
            ><span>{{ orderInfoData.totalTime }}</span>
          </div>
          <div class="workNum">
            <span class="titles">维修耗时:</span
            ><span>{{ orderInfoData.time }}</span>
          </div> -->
        <div class="steps">
          <el-steps direction="vertical" :active="orderInfoData.tracks.length">
            <el-step v-for="(i, index) in orderInfoData.tracks">
              <template v-slot:icon>
                <img style="width: 20px; height: 20px" src="@/assets/step_common.png" alt="" />
              </template>
              <template v-slot:title>
                <span>{{ i.state }}</span>
              </template>
              <template v-slot:description>
                <div class="content">
                  <span>[{{ i.userZzstr }}]{{ i.userName }}{{ i.userPhone }}
                    {{ i.createTime }}</span>
                </div>
                <div>
                  <div>{{ i.content }}</div>
                  <!-- 评价图片 -->
                  <div v-if="i.images" class="evaluateImg">
                    <div v-for="(item, index) in i.images">
                      <img @click="lookImg(item)" :key="index" :src="item" alt="" />
                    </div>
                  </div>
                  <!-- 评价录音 -->
                  <div v-if="i.voice" class="audio" @click="audioPlay(i)">
                    <img src="@/assets/audio.png" alt="" />
                    <div class="audioNum">{{ i.voiceLength }}"</div>
                    <!-- <button class="butt" @click="bofang">确认</button> -->
                    <audio :id="`audio${i.id}`" class="aud" :src="i.voice"></audio>
                  </div>
                </div>
              </template>
            </el-step>
          </el-steps>
        </div>
      </div>
    </el-dialog>
    <!-- 分页组件 -->
    <div class="pageSize">
      <span></span>
      <el-pagination background :current-page="currentPage" :page-size="pageSize"
        layout="total, prev, pager, next, jumper, slot" :total="total" @update:current-page="handleCurrentChange" />
    </div>
    <div class="bgImg" v-if="bgImg">
      <img @click="bgImg = false" :src="bgImgurl" alt="" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick, onBeforeMount, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Calendar } from "@element-plus/icons-vue";
import vidiconsApi from "@/api/vidicons.js";
import { dayjs } from "element-plus";
import lodash from "lodash";
import axios from "axios";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();
// 表格数据
const tableData = reactive({ list: [] });

// 详情   (-----------------------------------------------)
const orderInfoVisible = ref(false); // 控制工单详情
// 录音
const audio = ref();
const orderInfoData = ref({
  recordNo: "", // 工单编号
  userName: "", // 报修姓名
  userPhone: "", // 报修电话
  articleName: "", // 故障类型
  description: "", // 故障描述
  articleId: "", // 报修类型
  address: "", // 报修区域
  areaName: "",// 报修校区地址
  voice: "", // 报修录音
  voiceLength: "", // 报修录音时长
  reportTime: "", // 报修时间
  totalTime: "", // 维修总时长
  time: "", // 维修耗时
  content: "", // 评价内容
  createTime: "", // 评价时间
  star: "", // 评价星级
  tracks: [],
});
const bgImg = ref(false)// 点击查看图片
const bgImgurl = ref() // 点击查看图片地址

const searchInput = reactive({
  keyWord: "",
  createTime: "",
  star:""
}); // 搜索按钮数据
5;

const currentPage = ref(1); // 当前页
const pageSize = ref(10);
const total = ref(); // 当前总数

// 查看评价数据列表
const getList = async (message) => {
  // let data = new FormData();
  // if (searchInput.createTime == null) {
  //   searchInput.createTime = "";
  // }
  // data.set("car_number", searchInput.carnumber);
  // data.set("create_time", searchInput.createTime); //前面的key记得对应！
  // data.set("page", currentPage.value);
  // data.set("rows", pageSize.value); //前面的key记得对应！
  // let res = await adminApi.adminLogin(data);
  let data;
  if (searchInput.createTime) {
    data = {
      currentPage: currentPage.value, // 当前页
      pageCount: pageSize.value, // 一页数据条数
      keyWord: searchInput.keyWord, // 关键字
      startTime: searchInput.createTime[0],
      endTime: searchInput.createTime[1],
      star:searchInput.star
    };
  } else {
    data = {
      currentPage: currentPage.value, // 当前页
      pageCount: pageSize.value, // 一页数据条数
      keyWord: searchInput.keyWord, // 关键字
      star:searchInput.star
    };
  }

  let res = await axios({
    method: "get",
    url: api.value + "/repairEvaluate/queryPageRepairEvaluate",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "评价数据");
  if (res.data.code == 200) {
    tableData.list = res.data.data.list;
    if (message) {
      ElMessage({
        type: "success",
        showClose: true,
        message: message,
        center: true,
      });
    }
    // currentPage.value = res.data.currentPage;
    total.value = res.data.data.totalCount;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
    if (res.data.code == 570) {
      sessionStorage.removeItem("token")
      router.push({
        path: `/login`,
      });
    }
  }
};

// 搜索功能
const searchBtn = lodash.debounce(async () => {
  getList("查询成功");
}, 300);

// 工单详情按钮  (工单详情-----------------------------------)
const orderInfo = async (row) => {
  orderInfoVisible.value = true;
  orderInfoData.value.createTime = row.createTime;
  orderInfoData.value.star = row.star;
  orderInfoData.value.content = row.content;
  let data = { recordId: row.recordId };
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/details",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "详情数据");
  if (res.data.code == 200) {
    orderInfoData.value.recordNo = res.data.data.recordNo;
    orderInfoData.value.userName = res.data.data.userName;
    orderInfoData.value.userPhone = res.data.data.userPhone;
    orderInfoData.value.description = res.data.data.description;
    orderInfoData.value.address = res.data.data.address;
    orderInfoData.value.areaName = res.data.data.areaName;
    orderInfoData.value.articleName = res.data.data.articleName;
    orderInfoData.value.voice = res.data.data.voice;
    orderInfoData.value.voiceLength = res.data.data.voiceLength;
    orderInfoData.value.reportTime = res.data.data.reportTime;
    orderInfoData.value.totalTime = res.data.data.totalTime;
    orderInfoData.value.time = res.data.data.time;
    orderInfoData.value.tracks = res.data.data.tracks;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 取消工单详情按钮
const cancelOrderInfo = () => {
  orderInfoVisible.value = false;
};
// 工单详情 点击音频
const bofang = () => {
  orderInfoData.value.tracks.forEach((item) => {
    // console.log(item.id);
    let audioId = document.getElementById(`audio${item.id}`);
    if (item.voice) {
      // console.log(item.id);
      audioId.load();
    }
  });
  console.log(audio.value.duration, "音频总时长");
  // audio.value.pause(); //  暂停pause

  if (audio.value.paused == true) {
    audio.value.play();
  } else {
    audio.value.pause();
  }
};

// 步骤条中的播放
const audioPlay = (i) => {
  audio.value.load();
  orderInfoData.value.tracks.forEach((item) => {
    // console.log(item.id);
    let audioId = document.getElementById(`audio${item.id}`);
    if (item.voice) {
      // console.log(item.id);
      audioId.load();
    }
  });
  let audioId = document.getElementById(`audio${i.id}`);
  // console.log(audioId, i.state);
  if (audioId.paused == true) {
    audioId.play();
  } else {
    audioId.pause();
    // clearInterval(timer);
    // timer = null;
  }
};
// 点击工单步骤中的图片查看
const lookImg = (item) => {
  bgImg.value = true
  bgImgurl.value = item
}

// 工单详情删除按钮  (工单详情-----------------------------------)
// const orderInfo = (row) => {
//   orderInfoVisible.value = true;
//   orderInfoData.list = row;
// };

// // 取消工单详情按钮
// const cancelOrderInfo = () => {
//   orderInfoVisible.value = false;
// };
// // 工单详情 点击音频
// const bofang = () => {
//   let music1 = new Audio();
//   music1 = gaobai;
//   audio.value.src = music1;
//   // imgUrl.value = "@/assets/gaobai.mp3";
//   audio.value.play();
// };
// 删除评价功能  (--------------------------------------------------)

// 确定删除
const confirmEvent = async (row) => {
  let data = {
    id: row.id,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/repairEvaluate/deleteRepairEvaluateById",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "删除评价成功");
  if (res.data.code == 200) {
    if (tableData.list.length == 1 && currentPage.value != 1) {
      currentPage.value = currentPage.value - 1;
    }
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 取消删除
const cancelEvent = () => {
  ElMessage({
    type: "info",
    showClose: true,
    message: "取消删除",
    center: true,
  });
};

//导出功能
const importExcel = async () => {
  let datas = {
    keyWord: searchInput.keyWord, // 关键字
  };
  if (searchInput.createTime) {
    datas.startTime = searchInput.createTime[0];
    datas.endTime = searchInput.createTime[1];
  }
  let res = await axios({
    method: "get",
    url: api.value + "/repairEvaluate/toRepairEvaluateExcel",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: datas,
    responseType: "blob",
  });
  console.log(res, "导出评价表单");
  if (res.status == 200) {
    let name = `评价管理表单`;
    var content = res.data;
    // var data = new Blob([content],{type:"application/octet-stream;charset=utf-8"});
    // var data = new Blob([content], {
    //   type: "application/vnd.ms-excel;charset=utf-8",
    // });
    var data = new Blob([content]);
    var downloadUrl = window.URL.createObjectURL(data);
    var anchor = document.createElement("a");
    anchor.href = downloadUrl;
    anchor.download = name + ".xlsx";
    anchor.click();
    window.URL.revokeObjectURL(data);
    ElMessage({
      type: "success",
      showClose: true,
      message: "导出成功",
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: "导出失败",
      center: true,
    });
  }
};
// 表格斑马纹颜色修改
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even";
  } else if (rowIndex % 2 !== 0) {
    return "odd";
  }
  return "";
};
// 分页
const handleCurrentChange = (value) => {
  // console.log(value);
  currentPage.value = value;
  getList();
};

onBeforeMount(() => {
  api.value = store.state.user.api;
  getList();
});
onUnmounted(() => {
  // document.removeEventListener("keyup", Enters);
});
</script>

<style scoped lang="scss">
.content-box {
  width: 97.5%;
  height: 89%;
  margin: 20px auto;
  background-color: #fff;
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 3px 10px rgba(213, 228, 252, 1);

  .left {
    // width: calc(100wh - 40px);
    display: flex;
    align-items: center;
    height: 60px;
    margin: 0 30px;
    border-bottom: 1px solid #ccc;
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-weight: 600;

    span {
      margin-right: 20px;
      cursor: pointer;
    }

    .is_active {
      color: rgba(111, 182, 184, 1);
    }
  }

  .middle {
    width: 96%;
    margin: 0 auto;

    color: #000;

    // border-bottom: 1px solid rgb(231, 231, 231);
    .filter {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin: 10px 0 0 0;

      .search {
        color: #fff;
      }

      .condition {
        display: flex;
        align-items: center;
        margin: 10px 30px 10px 0;

        :deep(.el-input .el-input__inner) {
          font-size: 16px;
        }

        span {
          margin: 0 10px 0 0;
        }
      }
    }

    .gongneng {
      margin: 10px 0 15px 0;

      span {
        color: #fff;
      }
    }

    :deep(.cont) {
      width: 60%;
      margin: 20px auto;
    }

    :deep(.download) {
      display: flex;
      align-items: center;
      margin: 10px;
    }

    :deep(.download span) {
      font-size: 16px;
      margin-left: 20px;
    }

    :deep(.cont .el-button) {
      margin-left: 60px;
      margin-bottom: 30px;
    }

    :deep(.cont .accomplish) {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    :deep(.cont .accomplish .el-button) {
      width: 50%;
      margin: 0;
    }
  }

  .footer {
    width: 96%;
    height: 550px;
    margin: 10px auto 30px;

    .el-table--fit {
      height: 100%;

      :deep(.el-table__header-wrapper) {
        background-color: #000;
        font-size: 16px;

        tr {
          color: #000;
        }
      }

      :deep(.el-table__row) {
        height: 50px;
        font-size: 16px;
        color: #000;

        .el-rate__icon {
          //评分图标大小
          font-size: 25px;
        }
      }

      :deep(.el-table__row td) {
        padding: 0;
        border: 0;
      }

      .el-button--primary {
        margin-left: 5px;
      }

      :deep(.el-table__body .even) {
        background-color: #fff;
      }

      :deep(.el-table__body .odd) {
        background-color: rgba(240, 243, 247, 1);
      }

      :deep(.edit) {
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(111, 182, 184, 1);
      }

      :deep(.look) {
        padding: 0 10px;
        cursor: pointer;
      }

      //   :deep(.look):hover {
      //     color: red;
      //   }
    }
  }

  // 详情样式
  :deep(.orderInfo) {
    height: 800px;
    overflow: hidden;
    border-radius: 11px;

    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;

      .el-dialog__headerbtn {
        outline: none;
      }
    }

    .el-dialog__body {
      height: 720px;
      overflow: auto;
      padding: 0px 20px 10px 20px;

      .order_info {
        .title {
          display: flex;
          align-items: center;
          margin: 25px 0 10px 0;

          img {
            width: 20px;
            height: 20px;
            margin-right: 10px;
          }

          span {
            color: #000;
            font-size: 18px;
            font-weight: 800;
          }
        }

        // 工单详情 排列模式样式
        .workNum {
          display: flex;
          align-items: center;
          margin-bottom: 12px;
          font-size: 16px;

          .audio {
            width: 98px;
            height: 30px;
            border-radius: 42.41px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 1.68px rgba(0, 0, 0, 0.25);
            display: flex;
            align-items: center;
            cursor: pointer;

            img {
              width: 18px;
              height: 18px;
              margin-left: 5px;
            }

            .audioNum {
              font-size: 16px;
            }
          }

          .titles {
            color: rgba(128, 128, 128, 1);
            font-weight: 200;
            display: inline-block;
            width: 80px;
          }

          span:nth-child(2) {
            color: #000;
            font-weight: 600;
            width: 640px;
          }
        }

        .workNums {
          display: flex;
          align-items: center;
          margin-bottom: 12px;
          font-size: 16px;

          .el-rate__item {
            .el-icon {
              font-size: 25px;
            }
          }

          .titles {
            color: rgba(128, 128, 128, 1);
            font-weight: 200;
            display: inline-block;
            width: 80px;
          }
        }

        // 工单详情 步骤条样式
        .steps {
          .el-step {

            // margin: 15px 0;
            .el-step__main {
              display: flex;
              margin-bottom: 15px;

              span {
                font-size: 16px;
              }

              .el-step__title {
                padding: 0 10px 0 0;

                span {
                  background-color: rgba(111, 182, 184, 1);
                  color: #fff;
                  padding: 1px 3px;
                  border-radius: 3px;
                  display: block;
                }
              }
            }

            .el-step__description {
              .content {
                margin-top: 7px;
              }

              .evaluateImg {
                width: 500px;
                margin: 10px 0;
                display: flex;
                flex-wrap: wrap;

                img {
                  width: 80px;
                  // height: 40px;
                  margin: 5px 10px 0 0;
                }
              }

              .audio {
                width: 98px;
                height: 30px;
                border-radius: 42.41px;
                background: rgba(255, 255, 255, 1);
                box-shadow: 0px 0px 1.68px rgba(0, 0, 0, 0.25);
                display: flex;
                align-items: center;
                cursor: pointer;

                img {
                  width: 18px;
                  height: 18px;
                  margin-left: 5px;
                }

                .audioNum {
                  font-size: 16px;
                  color: #000;
                }
              }
            }
          }
        }
      }
    }
  }

  .pageSize {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 30px;

    span {
      color: #000;
    }

    .el-pagination {

      // width: 1600px;
      :deep(.el-pagination__total) {
        color: #000;
      }

      :deep(.el-pagination__goto) {
        color: #000;
      }

      :deep(.el-pagination__classifier) {
        color: #000;
      }

      :deep(.el-input__wrapper) {
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        box-shadow: none;
      }

      :deep(.el-pager li) {
        margin: 0 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }

      :deep(.el-pager li.is-active) {
        background-color: rgba(111, 182, 184, 1);
      }

      :deep(.btn-prev) {
        margin-right: 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }

      :deep(.btn-next) {
        margin-left: 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }
    }
  }

  .bgImg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99999999;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;

    img {
      height: 100%;
    }
  }
}

.el-input {
  width: 192px;
}
</style>