pbl-teacher-table/src/components/pages/Grid.vue

<template>
  <div class="pb_content g_body">
    <div>
      <el-image class="coin coin1" :src="require('../../assets/grid/coin1.png')" fit="cover"></el-image>
      <el-image class="coin coin2" :src="require('../../assets/grid/coin2.png')" fit="cover"></el-image>
      <el-image class="coin coin3" :src="require('../../assets/grid/coin3.png')" fit="cover"></el-image>
      <el-image class="coin coin4" :src="require('../../assets/grid/coin4.png')" fit="cover"></el-image>
    </div>
    <div class="grid_member">
      <div class="member_imgbox">
        <el-image
          v-for="item in 4"
          :key="item"
          class="member_img"
          :src="require('../../assets/grid/portal.png')"
          fit="cover"
        ></el-image>
      </div>
      <el-button type="text" @click="dialogVisible2 = true">邀请成员</el-button>
      <el-button type="text">成员</el-button>
      <el-button type="text" v-if="RoomInfo.userid == userid" @click="dismiss">解散房间</el-button>
    </div>
    <div
      v-for="(item,index) in data"
      :key="index"
      class="g_box"
      @mouseover="pIndex = index"
      @mouseleave="pIndex = ''"
    >
      <div
        :class="{'left-popover':index<3,'right-popover':index==3,'top-popover':index>3,'visibleO':pIndex === index && item && (item.video || item.photo)}"
      >
        <div class="pChild" @click="check(index)">
          <el-image :src="require('../../assets/grid/upload.png')" fit="cover"></el-image>
          <span>修改</span>
        </div>
        <div class="pChild" @click="deleteGrid(index)">
          <el-image :src="require('../../assets/grid/deleteT.png')" fit="cover"></el-image>
          <span>删除</span>
        </div>
        <div class="pChild" @click="check(index,2)">
          <el-image :src="require('../../assets/grid/edit.png')" fit="cover"></el-image>
          <span>添加备注</span>
        </div>
      </div>
      <div
        v-if="item && item.remarks"
        :class="{'remark-right-popover':index>12 && index!=15,'remark-left-popover':index==15,'remark-bottom-popover':index<12,'visibleO':pIndex === index && item && item.remarks}"
      >
        <div class="Rbox" v-for="(x,y) in item.remarks" :key="y">
          <div v-if="x.remarks!=''" style="display:flex">
            <el-image class="Rportal" :src="require('../../assets/grid/portal.png')" fit="cover"></el-image>
            <div class="RContent">
              <div>{{x.username}}</div>
              <div>{{x.remarks}}</div>
            </div>
          </div>
          <div v-else-if="x.remarks==''&& y==0">{{x.username}}暂无备注</div>
        </div>
      </div>
      <el-image v-if="item && item.photo" v-viewer class="photo_img" :src="item.photo" fit="cover"></el-image>
      <video-player
        v-else-if="item && item.video"
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="item.video"
        style="width: 85%;"
      ></video-player>
      <el-image
        v-else
        class="add_img"
        :src="require('../../assets/grid/add.png')"
        fit="cover"
        @click="check(index,3)"
      ></el-image>
    </div>
    <el-dialog
      title="上传文件"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="800px"
      :before-close="handleClose"
      class="look_notice"
    >
      <div slot="title" class="header-title">
        <div class="title_add_student">上传文件</div>
      </div>
      <div>
        <div class="upload_box" v-show="!file.userid || file.userid == userid">
          <el-image class="list_img" :src="require('../../assets/grid/list.png')" fit="cover"></el-image>
          <div class="upload_content">
            <div
              @click="addEvent($event)"
              @mouseover="file.photo ? deleteVisible1 = true:''"
              @mouseleave="file.photo ? deleteVisible1 = false:''"
            >
              <el-image
                class="delete_img"
                :src="require('../../assets/grid/delete.png')"
                fit="cover"
                v-if="deleteVisible1"
                @click.stop="deleteFile(1)"
              ></el-image>
              <el-image
                class="upload_img"
                :src="file.photo ? file.photo : require('../../assets/grid/image.png')"
                fit="cover"
              ></el-image>
              <input
                type="file"
                accept="image/*"
                style="display: none"
                ref="pathClear1"
                @change="beforeUpload($event, 1)"
              />
            </div>
            <div
              style="margin-left: 20px;"
              @click="addEvent($event)"
              @mouseover="file.video ? deleteVisible2 = true:''"
              @mouseleave="file.video ? deleteVisible2 = false:''"
            >
              <el-image
                class="delete_img"
                :src="require('../../assets/grid/delete.png')"
                fit="cover"
                v-if="deleteVisible2"
                @click.stop="deleteFile(2)"
              ></el-image>
              <el-image
                class="upload_img"
                :src="file.video ? require('../../assets/grid/videoH.png') : require('../../assets/grid/video.png')"
                fit="cover"
              ></el-image>
              <input
                type="file"
                accept="video/mp4, video/quicktime, video/x-msvideo"
                style="display: none"
                ref="pathClear2"
                @change="beforeUpload($event, 2)"
              />
            </div>
          </div>
        </div>
        <div class="textarea_box">
          <div class="textarea_title">添加描述</div>
          <el-input
            type="textarea"
            v-model="remarks"
            placeholder="请输入描述..."
            class="textarea_content"
            :rows="5"
            resize="none"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="close" @click="addGrid()" type="primary">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="邀请成员"
      :visible.sync="dialogVisible2"
      :append-to-body="true"
      width="400px"
      :before-close="handleClose"
      class="look_notice invite_dialog"
    >
      <div slot="title" class="header-title">
        <div class="title_add_student">邀请成员</div>
      </div>
      <div>
        <div class="invite_box">
          <div class="invite_title" ref="inviteT">{{userinfo.name}}邀请您参加思维网格</div>
          <div class="line"></div>
          <div class="invite_link">
            <div ref="invite1">复制链接加入房间：</div>
            <div ref="invite2">https://baidu.com</div>
          </div>
          <div class="invite_num" ref="invite3">
            房间号：
            <span>{{RoomInfo.num}}</span>
          </div>
          <div class="invite_num" ref="invite4">复制房间号信息，打开思维网格输入即可加入。</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          class="close tag-read"
          @click="copy"
          type="primary"
          :data-clipboard-text="copyText"
        >一键复制信息</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="创建/加入房间"
      :visible.sync="dialogVisible3"
      :append-to-body="true"
      width="400px"
      :before-close="handleClose2"
      class="look_notice invite_dialog room_dialog"
    >
      <div slot="title" class="header-title">
        <div class="title_add_student">创建/加入房间</div>
      </div>
      <div class="addRoom_box">
        <div>
          <el-input v-model="goNum" placeholder="请输入要加入的房间号"></el-input>
          <div class="room_b">备注：输入房间号点击加入房间或点击创建房间直接创建房间</div>
          <div class="room_btn">
            <el-button class="roomBtn" type="primary" @click="goRoom(goNum)">加入房间</el-button>
            <el-button class="roomBtn" type="primary" @click="checkNum">创建房间</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <div v-if="proVisible" class="mask">
      <div class="progressBox">
        <div class="lbox">
          <img :src="require('../../assets/loading.gif')" />上传中，请稍后
        </div>
        <el-progress
          :text-inside="true"
          :stroke-width="20"
          :percentage="progress"
          style="width:80%"
        ></el-progress>
      </div>
    </div>
  </div>
</template>

<script>
import Clipboard from "clipboard";
export default {
  data() {
    return {
      timer: null,
      userinfo: [],
      RoomInfo: [],
      copyText: "",
      userid: this.$route.query.userid,
      data: [],
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: true,
      deleteVisible1: false,
      deleteVisible2: false,
      dialogImgVisible: false,
      dialogImageUrl: "",
      remarks: "",
      goNum: "",
      numNum: "",
      file: {},
      gIndex: "",
      pIndex: "",
      proVisible: false,
      progress: 0,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
            src: "", //url地址require("../../assets/media/aaa.mp4")
          },
        ],
        // poster: require("../../assets/tu31.png"), //你的封面地址
        // poster: dataRes.imgUrl, //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: true, //全屏按钮
        },
      },
      playerO: {},
    };
  },
  methods: {
    copy() {
      this.copyText =
        this.$refs.inviteT.innerHTML +
        "\n" +
        this.$refs.invite1.innerHTML +
        "\n" +
        this.$refs.invite2.innerHTML +
        "\n" +
        this.$refs.invite3.innerText +
        "\n" +
        this.$refs.invite4.innerHTML;
      var clipboard = new Clipboard(".tag-read");
      clipboard.on("success", (e) => {
        this.$message.success("复制成功");
        console.log("复制成功");
        clipboard.destroy(); // 释放内存
      });
      clipboard.on("error", (e) => {
        console.log("不支持复制,该浏览器不支持自动复制");
        clipboard.destroy(); // 释放内存
      });
    },
    handleClose(done) {
      this.restart();
      done();
    },
    handleClose2(done) {
      // done();
    },
    restart() {
      this.file = {};
      this.gIndex = "";
      this.remarks = "";
      if (this.$refs.pathClear1) {
        this.$refs.pathClear1.value = "";
        this.$refs.pathClear2.value = "";
      }
    },
    deleteGrid(index) {
      if (this.data[index].userid != this.userid) {
        this.$message.error("你不是上传人无权限删除");
        return;
      }
      this.$confirm("确定删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.data[index] = "";
          this.updateRoomData();
          this.$forceUpdate();
        })
        .catch(() => {});
    },
    updateRoomData() {
      let params = [
        {
          data: JSON.stringify(this.data),
          idL: this.RoomInfo.id,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "updateRoomData", params)
        .then((res) => {})
        .catch((err) => {});
    },
    check(index, type) {
      this.gIndex = index;
      if (this.data[index].userid != this.userid && type != 2 && type != 3) {
        this.$message.error("你不是上传人无权限修改");
        return;
      }
      if (this.data[index] && this.data[index].userid == this.userid) {
        if (this.data[index].userid != this.userid) {
          this.$message.error("你不是上传人无权限修改");
          return;
        }
        this.file = {
          photo: this.data[index].photo,
          userid: this.data[index].userid,
          video:
            this.data[index].video &&
            this.data[index].video.sources &&
            this.data[index].video.sources[0].src,
        };
        this.remarks = this.data[index].remarks[0].remarks;
      } else if (this.data[index] && type == 2) {
        this.file = {
          userid: this.data[index].userid,
        };
        for (var i = 0; i < this.data[index].remarks.length; i++) {
          if (this.data[index].remarks[i].userid == this.userid) {
            this.remarks = this.data[index].remarks[i].remarks;
            break;
          }
        }
        this.remarks = this.remarks ? this.remarks : "";
      }
      this.dialogVisible = true;
    },
    addEvent(e) {
      var el = e.currentTarget;
      el.getElementsByTagName("input")[0].click();
    },
    deleteFile(type) {
      if (type == 1) {
        this.file.photo = "";
        this.deleteVisible1 = false;
        this.$refs.pathClear1.value = "";
      } else {
        this.file.video = "";
        this.deleteVisible2 = false;
        this.$refs.pathClear2.value = "";
      }
      this.$forceUpdate();
    },
    addGrid() {
      if (!this.file.userid || this.file.userid == this.userid) {
        if (!this.file.video && !this.file.photo) {
          this.$message.error("至少上传一个视频或者一张图片");
          return;
        }
        if(!this.data[this.gIndex]){
          this.data[this.gIndex] = {}
        }
        if (this.file.photo) {
          this.data[this.gIndex].photo = this.file.photo;
        } else {
          // this.playerOptions.sources[0].src = ""
          var video = JSON.parse(JSON.stringify(this.playerOptions));
          video.sources[0].src = this.file.video;
          this.data[this.gIndex].video = video;
        }
        if (this.data[this.gIndex].remarks) {
          this.data[this.gIndex].remarks[0] = {
            remarks: this.remarks,
            userid: this.userinfo.userid,
            username: this.userinfo.name,
          };
        } else {
          this.data[this.gIndex].remarks = [
            {
              remarks: this.remarks,
              userid: this.userinfo.userid,
              username: this.userinfo.name,
            },
          ];
        }
        this.data[this.gIndex].userid = this.userinfo.userid;
      } else {
        if (!this.remarks) {
          this.$message.error("备注不能为空");
          return;
        }
        var a = 0;
        for (var i = 0; i < this.data[this.gIndex].remarks.length; i++) {
          if (this.data[this.gIndex].remarks[i].userid == this.userid) {
            a++;
            this.data[this.gIndex].remarks[i] = {
              remarks: this.remarks,
              userid: this.userinfo.userid,
              username: this.userinfo.name,
            };
            break;
          }
        }
        if (a < 1) {
          this.data[this.gIndex].remarks.push({
            remarks: this.remarks,
            userid: this.userinfo.userid,
            username: this.userinfo.name,
          });
        }
      }

      this.updateRoomData();
      this.dialogVisible = false;
      this.$forceUpdate();
      this.restart();
    },
    beforeUpload(event, type) {
      // debugger;
      if (this.file.photo && type != 1) {
        this.$message.error("只能上传一个视频或者一张图片");
        this.$refs.pathClear2.value = "";
        return;
      } else if (this.file.video && type != 2) {
        this.$message.error("只能上传一个视频或者一张图片");
        this.$refs.pathClear1.value = "";
        return;
      }
      var file = event.target.files[0];
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域

      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
      var _this = this;
      if (type == 1) {
        var mediaFormatList = ["png", "jpg", "jpeg"];
        if (
          mediaFormatList.indexOf(
            file.name
              .split(".")
              [file.name.split(".").length - 1].toLocaleLowerCase()
          ) == "-1"
        ) {
          _this.$message.error("请上传jpg或者png的图片格式文件");
          return;
        }
      } else {
        var mediaFormatList = ["mp4"];
        if (
          mediaFormatList.indexOf(
            file.name
              .split(".")
              [file.name.split(".").length - 1].toLocaleLowerCase()
          ) == "-1"
        ) {
          _this.$message.error("请上传mp4视频格式文件");
          return;
        }
      }
      _this.progress = 0;
      _this.proVisible = true;
      if (file) {
        var params = {
          Key:
            file.name.split(".")[0] +
            new Date().getTime() +
            "." +
            file.name.split(".")[1],
          ContentType: file.type,
          Body: file,
          "Access-Control-Allow-Credentials": "*",
          ACL: "public-read",
        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
        var options = {
          partSize: 2048 * 1024 * 1024,
          queueSize: 2,
          leavePartsOnError: true,
        };
        bucket
          .upload(params, options)
          .on("httpUploadProgress", function (evt) {
            //这里可以写进度条
            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
            _this.progress = parseInt((evt.loaded * 80) / evt.total);
          })
          .send(function (err, data) {
            this.progress = 100;
            setTimeout(() => {
              _this.proVisible = false;
            }, 1000);
            if (err) {
              _this.$message.error("上传失败");
            } else {
              if (type == 1) {
                _this.file.photo = data.Location;
              } else {
                _this.file.video = data.Location;
              }
              _this.$forceUpdate();
              console.log(data.Location);
            }
          });
      }
    },
    getUser() {
      let params = { uid: this.userid };
      this.ajax
        .get(this.$store.state.api + "getUser", params)
        .then((res) => {
          this.userinfo = res.data[0][0];
          console.log(res.data[0][0]);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    MathRand() {
      var Num = "";
      for (var i = 0; i < 6; i++) {
        Num += Math.floor(Math.random() * 10);
      }
      return Num;
    },
    checkNum() {
      this.numNum = this.MathRand();
      let params = {
        num: this.numNum,
      };
      this.ajax
        .get(this.$store.state.api + "checkRoomNum", params)
        .then((res) => {
          console.log(res.data[0].length);
          if (res.data[0].length) {
            this.checkNum();
          } else {
            this.addRoom();
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    addRoom() {
      let params = [
        {
          uid: this.userid,
          n: this.numNum,
          d: JSON.stringify(this.data),
        },
      ];
      this.ajax
        .post(this.$store.state.api + "insertRoom", params)
        .then((res) => {
          this.$message.success("创建成功");
          this.selectRoom(this.userid);
        })
        .catch((err) => {
          this.$message.error("创建失败");
          console.error(err);
        });
    },
    selectRoom(uid) {
      let params = {
        uid: uid,
      };
      this.ajax
        .get(this.$store.state.api + "selectRoom", params)
        .then((res) => {
          if (res.data[0].length) {
            this.RoomInfo = res.data[0][0];
            this.data = JSON.parse(res.data[0][0].data);
            this.dialogVisible3 = false;
            this.dialogVisible2 = true;
            this.timer = setInterval(() => {
              this.selectRoom2(uid);
            }, 5000);
          } else {
            // this.$message.error("此房间不存在或已被解散");
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    goRoom(uid) {
      let params = {
        uid: uid,
      };
      this.ajax
        .get(this.$store.state.api + "selectRoom", params)
        .then((res) => {
          if (res.data[0].length) {
            this.$message.success("加入成功");
            this.RoomInfo = res.data[0][0];
            this.data = JSON.parse(res.data[0][0].data);
            this.dialogVisible3 = false;
            this.dialogVisible2 = true;
            this.timer = setInterval(() => {
              this.selectRoom2(uid);
            }, 5000);
          } else {
            this.$message.error("此房间不存在或已被解散");
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectRoom2(uid) {
      let params = {
        uid: uid,
      };
      this.ajax
        .get(this.$store.state.api + "selectRoom", params)
        .then((res) => {
          this.RoomInfo = res.data[0][0];
          this.data = JSON.parse(res.data[0][0].data);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    dismiss() {
      this.$confirm("确定解散房间吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = [
            {
              id: this.RoomInfo.id,
            },
          ];
          this.ajax
            .post(this.$store.state.api + "dismiss", params)
            .then((res) => {
              this.$message.success("解散成功");
              this.$router.go(0);
            })
            .catch((err) => {
              console.error(err);
            });
        })
        .catch(() => {});
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  created() {
    for (var i = 0; i < 16; i++) {
      this.data.push("");
    }
    this.getUser();
    this.selectRoom(this.userid);
  },
};
</script>

<style scoped>
.g_body {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  min-height: 750px;
}
.coin {
  position: absolute;
  width: 50px;
  z-index: 1;
}
.coin1 {
  top: 10px;
  left: 20px;
}
.coin2 {
  top: 10px;
  right: 20px;
}
.coin3 {
  bottom: 10px;
  left: 20px;
}
.coin4 {
  bottom: 10px;
  right: 20px;
}
.g_box {
  background: rgb(227 228 232);
  width: calc(100% / 4 - 15px);
  height: calc(100% / 4 - 15px);
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* overflow: hidden; */
  position: relative;
}
.photo_img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.g_box .add_img {
  width: 100px;
  display: none;
}
.g_box:hover .add_img {
  display: block;
}
.look_notice >>> .el-dialog__header {
  padding: 10px 20px;
  text-align: center;
  background: #32455b;
}
.look_notice >>> .el-dialog__title {
  font-size: 14px !important;
  color: #fff !important;
}
.look_notice >>> .el-dialog__headerbtn {
  font-size: 20px !important;
  top: 10px;
}
.look_notice >>> .el-form-item__label {
  margin-left: 65px;
}
.look_notice >>> .el-form-item {
  display: flex;
}
.look_notice >>> .el-form-item__content {
  margin: 0 !important;
}
.look_notice >>> .el-dialog__footer {
  text-align: center !important;
}
.look_notice >>> .el-dialog {
  min-width: 450px;
  background: #f3f3f3;
}
.notice_content {
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  font-size: 18px;
  line-height: 35px;
  text-indent: 35px;
  min-width: 385px;
}
.roomBtn {
  background: rgb(112 183 79);
  /* padding: 0 !important; */
  border: none;
}
.close {
  width: 150px;
  height: 40px;
  border-radius: 30px;
  line-height: 30px;
  font-size: 14px;
  background: rgb(112 183 79);
  padding: 0 !important;
  border: none;
}
.header-title {
  display: flex;
}
.logoImg {
  width: 30px;
}
.logoImg > img {
  width: 100%;
  height: 100%;
}
.title_add_student {
  /* margin: 0 auto; */
  color: #fff;
}

.grid_member {
  position: absolute;
  background: #fff;
  right: 70px;
  top: 18px;
  min-width: 320px;
  height: 50px;
  border-radius: 5px;
  padding-right: 10px;
  display: flex;
  align-items: center;
  z-index: 1;
  user-select: none;
}

.member_imgbox {
  display: flex;
  align-items: center;
  margin: 0 10px;
  width: 185px;
}
.member_img {
  height: 40px;
  width: 40px;
  border-radius: 50px;
  overflow: hidden;
  display: block;
  background: aliceblue;
}
.member_img + .member_img {
  margin-left: 8px;
}

.upload_box {
  border-radius: 5px;
  background: #fff;
  position: relative;
}

.upload_box .list_img {
  position: absolute;
  top: 10px;
  left: 10px;
}

.upload_box .upload_content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 0 20px;
}
.upload_box .upload_content div {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.delete_img {
  position: absolute !important;
  width: 25px;
  transform: translate(50%, -50%);
  top: 0;
  z-index: 1;
  right: 0;
}
.upload_img {
  width: 306px;
  height: 206px;
}
.textarea_box {
  background: #fff;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.textarea_title {
  width: 95%;
  margin: 0 auto;
  font-size: 16px;
}

.textarea_content {
  width: 95%;
  margin: 10px auto 0;
  border-radius: 10px;
}

.textarea_content >>> .el-textarea__inner {
  background: rgb(243, 243, 243);
  border: none;
}

.invite_dialog >>> .el-dialog__body {
  padding: 15px 20px;
}
.room_dialog >>> .el-dialog {
  margin-top: 50vh !important;
  transform: translateY(-50%);
  min-width: unset;
}
.invite_box {
  font-size: 16px;
  background: #fff;
  border-radius: 5px;
  padding: 30px 0 150px;
}

.invite_title {
  width: 90%;
  margin: 0 auto 20px;
}

.line {
  width: 95%;
  border-top: 1px solid rgb(230, 230, 230);
  margin: 0 auto;
}

.invite_link {
  width: 90%;
  margin: 20px auto 30px;
}
.invite_link div + div {
  margin-top: 15px;
}

.invite_num {
  width: 90%;
  margin: 0 auto 50px;
}
.invite_num span {
  color: rgb(112 183 79);
  font-size: 28px;
}
.addRoom_box {
  background: #fff;
  padding: 30px 20px;
  border-radius: 5px;
}
.room_b {
  margin: 5px 0 30px;
  /* width:300px; */
}
.room_btn {
  display: flex;
  justify-content: space-around;
}

.mask {
  background-color: rgba(0, 0, 0, 0);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progressBox {
  width: 500px;
  height: 180px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 6px 1px #bfbfbf;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.progressBox .lbox {
  height: 100px;
  font-size: 19px;
  display: flex;
  align-items: center;
}

.progressBox .lbox img {
  width: 40px;
  margin-right: 20px;
}

.progressBox >>> .el-progress-bar__outer {
  background-color: #d1dfff !important;
}

.top-popover {
  position: absolute;
  top: -50px;
  left: 0;
  background: #fff;
  display: flex;
  height: 45px;
  align-items: center;
  padding: 0px 10px 0 20px;
  border-radius: 5px;
  box-shadow: 0 1px 3px 1px rgb(202, 202, 202);
  z-index: 10;
  transition: 0.5s all;
  opacity: 0;
  visibility: hidden;
}

.top-popover .pChild {
  display: flex;
  align-items: center;
}
.top-popover .pChild + .pChild {
  margin-left: 10px;
}

.left-popover {
  position: absolute;
  top: 0px;
  right: -65px;
  background: #fff;
  display: flex;
  width: 45px;
  align-items: center;
  padding: 10px 5px 20px;
  border-radius: 5px;
  box-shadow: 0 1px 3px 1px rgb(202, 202, 202);
  z-index: 10;
  flex-direction: column;
  justify-content: center;
  transition: 0.5s all;
  opacity: 0;
  visibility: hidden;
}
.left-popover .pChild {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.left-popover .pChild span {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.left-popover .pChild + .pChild {
  margin-top: 10px;
}

.right-popover {
  position: absolute;
  top: 0px;
  left: -65px;
  background: #fff;
  display: flex;
  width: 45px;
  align-items: center;
  padding: 10px 5px 20px;
  border-radius: 5px;
  box-shadow: 0 1px 3px 1px rgb(202, 202, 202);
  z-index: 10;
  flex-direction: column;
  justify-content: center;
  transition: 0.5s all;
  opacity: 0;
  visibility: hidden;
}
.right-popover .pChild {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.right-popover .pChild span {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.right-popover .pChild + .pChild {
  margin-top: 10px;
}

.visibleO {
  opacity: 1 !important;
  visibility: visible !important;
}

.remark-bottom-popover {
  position: absolute;
  bottom: 0px;
  left: 0;
  background: #fff;
  max-height: 150px;
  width: 100%;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 1px 3px 1px rgb(202, 202, 202);
  z-index: 10;
  transition: 0.5s all;
  box-sizing: border-box;
  transform: translateY(calc(100% + 5px));
  overflow: auto;
  opacity: 0;
  visibility: hidden;
}

.Rbox {
  display: flex;
  word-break: break-all;
}

.Rbox + .Rbox {
  border-top: 1px solid rgb(233, 233, 233);
  margin-top: 10px;
  padding-top: 10px;
}

.Rportal {
  height: 45px;
  min-width: 45px;
  border-radius: 50px;
  overflow: hidden;
  display: block;
  background: aliceblue;
  user-select: none;
}

.RContent {
  margin-left: 10px;
}

.RContent div:nth-child(1) {
  user-select: none;
  color: rgb(80, 80, 80);
  margin-bottom: 5px;
  font-size: 14px;
}
.RContent div:nth-child(2) {
  font-family: "微软雅黑";
  font-size: 15px;
}

.remark-right-popover {
  position: absolute;
  top: 0;
  right: 0;
  background: #fff;
  max-height: 100%;
  width: 300px;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 1px 3px 1px rgb(202, 202, 202);
  z-index: 10;
  transition: 0.5s all;
  box-sizing: border-box;
  transform: translateX(calc(100% + 5px));
  overflow: auto;
  opacity: 0;
  visibility: hidden;
}

.remark-left-popover {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  max-height: 100%;
  width: 300px;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 1px 3px 1px rgb(202, 202, 202);
  z-index: 10;
  transition: 0.5s all;
  box-sizing: border-box;
  transform: translateX(calc(-100% - 5px));
  overflow: auto;
  opacity: 0;
  visibility: hidden;
}
</style>