pbl-teacher-table/src/components/pages/aiAddCourse/record.vue

<template>
  <div class="record_box">
    <div class="ca-b-o-main2" style="height: 25px;">
      <div class="select_box" v-if="audioUrlArray.length">
        <span>音频：</span>
        <el-select v-model="audioUrl">
          <el-option v-for="(item, index) in audioUrlArray" :key="index" :label="'音频'+(index+1)" :value="item">
            <div class="selectBox">
              <span>{{ '音频'+(index+1) }}</span>
              <div class="controlsBox">
                <span class="delSelect" @click.stop="delAudio(index)"></span>
              </div>
            </div>
          </el-option>
        </el-select>
      </div>
      <div class="select_box">
        <span>语言：</span>
        <el-select v-model="languageRadio">
          <el-option v-for="item in languageList"
            :key="item.label"
            :label="item.lang"
            :value="item.label">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="ca-b-o-main">
      <div
        class="ca-b-o-m-tape"
        v-show="controlsStatus == 0"
        @click.stop="onClickStartRecord()"
        v-loading="uploadFileLoading"
      >
        <span class="el-icon-microphone"></span>
        <div class="ca-b-o-m-t-text">点击开始录音</div>
      </div>
      <div
        class="ca-b-o-m-tapeTwo"
        v-show="controlsStatus == 2"
        v-loading="uploadFileLoading"
      >
        <mini-audio
          v-if="audioUrl"
          :audio-source="audioUrl"
          class="audio_class"
        ></mini-audio>
        <div
          style="
                width: 32px;
                height: 32px;
                margin-left: 20px;
                cursor: pointer;
                background-color: #3681fc;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
              "
          @click="onClickStartRecord()"
        >
          <img
            style="width: 10px; height: 16px"
            src="../../../assets/icon/classroomObservation/mai1.svg"
            alt=""
          />
        </div>
      </div>
      <div
        class="ca-b-o-m-TapeArea"
        v-show="controlsStatus == 1"
        v-loading="uploadFileLoading"
      >
        <div class="ca-b-o-m-i-left">
          <img
            style="height: 120%"
            src="@/assets/icon/classroomObservation/isTape.svg"
            alt=""
          />
          <div>
            <div v-if="recordedForm.status == 1" style="color: #ee3e3e">
              录音中...
            </div>
            <div v-if="recordedForm.status == 2" style="color: #6b798e">
              已暂停...
            </div>
            <span>{{ recordedForm.time }}</span>
          </div>
        </div>
        <div
          style="width: 100px; display: flex; justify-content: space-between"
        >
          <div
            class="lyStart"
            @click="onClickPauseOrContinueRecord()"
            v-loading="recordedForm.loading"
          >
            <img
              style="width: 12px; height: 12px"
              src="@/assets/icon/classroomObservation/lyStart.svg"
              alt=""
              v-if="recordedForm.status == 1"
            />
            <img
              style="width: 12px; height: 12px"
              src="@/assets/icon/classroomObservation/start.png"
              alt=""
              v-if="recordedForm.status == 2"
            />
          </div>
          <div
            class="lyStart"
            @click="onClickFinishRecord()"
            v-loading="recordedForm.loading"
          >
            <img
              style="width: 12px; height: 12px"
              src="@/assets/icon/classroomObservation/lyStop.svg"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
    <div class="text_box">
      <textarea
        :disabled="recordedForm.status == 1"
        ref="videoTextTextarea"
        rows="2"
        class="binfo_input binfo_textarea"
        style="height: 100%;"
        cols
        v-model="videoText"
        placeholder="等待录音中..."
      ></textarea>
    </div>
    <iframe
      allow="camera *; microphone *;display-capture;midi;encrypted-media;"
      src="https://beta.cloud.cocorobo.cn/browser/public/index.html"
      ref="iiframe"
      v-show="false"
    ></iframe>
  </div>
</template>

<script>
export default {
  props: {
    videoText2: {
      type: String
    },
    audioUrl2: {
      type: String
    }
  },
  data() {
    return {
      videoText: this.videoText2,
      recorderProvider: "microsoft", //shengyang
      uploadFileLoading: false,
      controlsStatus: 0, //0--点击开始录音  1--录音中   2--录音完毕预览  3--文字输��
      audioUrl: this.audioUrl2,
      audioUrlArray: [],
      languageRadio: 2, //设置选择语言
      // 设置list
      languageList: [
        { label: 2, lang: "普通话" },
        { label: 3, lang: "粤语" },
        { label: 13, lang: "英语" }
      ],
      recordedForm: {
        time: "00:00:00", //时间
        status: 0, //0--未录音  1--正在录音  2--暂停  3--录音结束
        timer: null,
        timeDuration: 0,
        audioBlob: [],
        startTime: 0,
        endTime: 0,
        textList: [],
        loading: false
      },
      progressData: {
        uploadLoading: false,
        value: 0
      }
    };
  },
  watch: {
    videoText(newValue) {
      this.$emit("update:videoText2", newValue);
    },
    // audioUrl(newValue) {
    //   this.$emit("update:audioUrl2", newValue);
    // },
    audioUrlArray(newValue) {
      this.$emit("update:audioUrl2", newValue.join(','));
    },
    videoText2(newValue) {
      this.videoText = newValue;
    },
    audioUrl2(newVal){
      if(newVal){
        this.audioUrlArray = newVal.split(",")
        if(!this.audioUrl){
          this.audioUrl = newVal.split(",")[0]
        }
        this.controlsStatus = 2
      }
    }
  },
  mounted() {
    this.videoText = this.videoText2;
  },
  methods: {
    delAudio(index){
      
      this.$confirm("是否确定删掉此音频？", "提醒", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          if(this.audioUrl == this.audioUrlArray[index] && this.audioUrlArray.length > 1){
            this.audioUrlArray.splice(index, 1)
            this.audioUrl = this.audioUrlArray[0]
          }else {
            this.audioUrlArray.splice(index, 1)
          }
          if(!this.audioUrlArray.length){
            this.audioUrl = ''
            this.controlsStatus = 0
          }
        })
        .catch(e => {
          console.log(e);
          console.log("不顶替");
        });
    },
    updateRecordedTime({ duration }) {
      // 更新currentTime，将秒数转换为时分秒格式
      let hours = Math.floor(duration / 3600);
      let minutes = Math.floor((duration % 3600) / 60);
      let seconds = Math.floor(duration % 60);
      // this.recordedForm.time = `${hours.toString().padStart(2, "0")}:${minutes
      // 	.toString()
      // 	.padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
      return `${hours
        .toString()
        .padStart(2, "0")}:${minutes
        .toString()
        .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
    },
    onClickStartRecord() {
      if (this.uploadFileLoading) return this.$message.info("请稍等...");
      // 开始录音
      if (this.audioUrl) {
        // this.$confirm("是否删掉此音频并开始录音？", "提醒", {
        //   confirmButtonText: "确定",
        //   cancelButtonText: "取消",
        //   type: "warning"
        // })
        //   .then(() => {
        this.recordedForm.status = 0;
        this.audioUrl = "";
        this.onClickStartRecord();
          // })
          // .catch(e => {
          //   console.log(e);
          //   console.log("不顶替");
          // });
      } else if (this.controlsStatus != 1 && this.recordedForm.status == 0) {
        this.controlsStatus = 1;
        this.recordedForm.status = 1;
        this.$message.success("已开始录音");
        this.recordedForm.timer = setInterval(() => {
          this.recordedForm.timeDuration += 1;
          this.recordedForm.time = this.updateRecordedTime({
            duration: this.recordedForm.timeDuration
          });
          // console.log(this.recordedForm);
        }, 1000);
        this.recordedForm.textList = [];
        this.recordedForm.timeDuration = 0;
        this.recordedForm.startTime = 1;
        this.recordedForm.endTime = 0;
        // this.onStartRecordWithMicrosoft();

        switch (this.recorderProvider) {
          case "microsoft":
            this.onStartRecordWithMicrosoft();
            break;
          case "shengyang":
            // this.onStartRecordWithShengyang();
            break;
          default:
            break;
        }
      } else if ([1, 2].includes(this.recordedForm.status)) {
        this.controlsStatus = 1;
        this.$message.info("还在录音中");
      }
    },
    // ============ start 微软录音转译
    onStartRecordWithMicrosoft() {
      let iiframe = this.$refs["iiframe"];
      iiframe.contentWindow.window.document.getElementById(
        "languageOptions"
      ).selectedIndex = this.languageRadio;
      iiframe.contentWindow.testdoContinuousPronunciationAssessment();
      // 录音开始
      let flag = true;
      iiframe.contentWindow.onRecognizing = (e, recognitionEventArgs) => {
        var result = recognitionEventArgs.result;
        // let e = {
        // 	privText:"测试测试"
        // }
        this.recordedForm.endTime = this.recordedForm.timeDuration;
        if (flag) {
          this.controlsStatus = 1;
          flag = false;
          this.uploadFileLoading = false;
        }
        // let privText = e.privText;
        let privText = result.text;
        if (privText == undefined || privText == "undefined") return;
        console.log("👇转译对象👇");
        console.log(e);
        console.log("👇转译结果👇");
        console.log(privText);
        this.recordedForm.startTime = this.recordedForm.timeDuration + 1;
        // this.videoText += privText;
        this.videoText = this.videoText.replace(/(^|[\r\n]+).*?\[\.\.\.\][\r\n]+/, `${privText} [...]\r\n`);
        // 将textarea滚动到最底部
        this.$nextTick(() => {
          this.$refs.videoTextTextarea.scrollTop = this.$refs.videoTextTextarea.scrollHeight;
        });
      };
    },
    async onPauseRecordWithMicrosoft() {
      let _resolve;
      const p = new Promise(resolve => (_resolve = resolve));
      let iiframe = this.$refs["iiframe"];
      iiframe.contentWindow.window.document
        .getElementById("scenarioStopButton")
        .click();
      // 录音借宿
      iiframe.contentWindow.onSessionStopped = (s, e) => {
        this.recordedForm.status = 2;
        this.$message.success("已停止录音");
        console.log("停止录音👇");
        console.log("停止录音", e);
        this.recordedForm.audioBlob.push(e.preaudio);
        iiframe.contentWindow.onSessionStopped = null;
        iiframe.contentWindow.onRecognizing = null;
        _resolve();
      };
      return p;
    },
    onClickPauseOrContinueRecord() {
      if (this.recordedForm.loading) return this.$message.info("请稍等");
      if (this.recordedForm.status == 1) {
        //暂停
        this.recordedForm.loading = true;
        clearInterval(this.recordedForm.timer);

        switch (this.recorderProvider) {
          case "microsoft":
            this.onPauseRecordWithMicrosoft().then(() => {
              this.recordedForm.loading = false;
            });
            break;
          case "shengyang":
            // this.onPauseRecordWithShengyang().then(() => {
            // this.recordedForm.status = 2;
            // this.$message.success("已停止录音");
            // this.recordedForm.loading = false;
            // });
            break;
          default:
            break;
        }
      } else if (this.recordedForm.status == 2) {
        //开始
        this.recordedForm.loading = true;
        this.controlsStatus = 1;
        this.recordedForm.status = 1;
        this.$message.success("已开始录音");
        this.recordedForm.loading = false;
        this.recordedForm.timer = setInterval(() => {
          this.recordedForm.timeDuration += 1;
          this.recordedForm.time = this.updateRecordedTime({
            duration: this.recordedForm.timeDuration
          });
        }, 1000);

        switch (this.recorderProvider) {
          case "microsoft":
            this.onContinueRecordWithMicrosoft();
            break;
          case "shengyang":
            // this.onContinueRecordWithShengyang();
            break;
          default:
            break;
        }
      }
    },
    onClickFinishRecord() {
      clearInterval(this.recordedForm.timer);
      switch (this.recorderProvider) {
        case "microsoft":
          this.onFinishRecordWithMicrosoft();
          break;
        case "shengyang":
          // this.onFinishRecordWithShengyang();
          break;
        default:
          break;
      }
    },
    onFinishRecordWithMicrosoft() {
      if (this.recordedForm.status == 1) {
        //正在录音时
        let iiframe = this.$refs["iiframe"];
        iiframe.contentWindow.window.document
          .getElementById("scenarioStopButton")
          .click();
        // 录音借宿
        iiframe.contentWindow.onSessionStopped = (s, e) => {
          this.recordedForm.status = 3;
          this.controlsStatus = 2;
          this.showGetTextLoading = false;
          this.$message.success("已结束录音");
          console.log("结束录音👇");
          console.log("结束录音", e);
          this.recordedForm.audioBlob.push(e.preaudio);
          let blob = new Blob(this.recordedForm.audioBlob, {
            type: "audio/wav"
          });
          let file = new File([blob], "recordedFile.wav", {
            type: "audio/wav"
          });
          this.uploadFile(file, { changeText: false, flag: true });
          iiframe.contentWindow.onSessionStopped = null;
          iiframe.contentWindow.onRecognizing = null;
        };
      } else if (this.recordedForm.status == 2) {
        //暂停录音时
        this.recordedForm.status = 3;
        this.controlsStatus = 2;
        this.showGetTextLoading = false;
        let blob = new Blob(this.recordedForm.audioBlob, {
          type: "audio/wav"
        });
        let file = new File([blob], "recordedFile.wav", { type: "audio/wav" });
        this.uploadFile(file, { changeText: false, flag: true });
      }
    },
    uploadFile(file, { changeText = true, flag = true }) {
      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 (file) {
        // this.loading = true;
        this.progressData.uploadLoading = true;
        this.progressData.value = 0;
        var params = {
          Key:
            file.name.split(".")[0] +
            new Date().getTime() +
            "." +
            file.name.split(".")[file.name.split(".").length - 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) {
            //这里可以写进度条
            _this.progressData.value = parseInt((evt.loaded * 100) / evt.total);
            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
          })
          .send(function(err, data) {
            if (err) {
              _this.$message.error("上传失败");
              _this.uploadFileLoading = false;
              _this.loading = false;
              _this.progressData.uploadLoading = false;
            } else {
              // 判断是不是音频文件
              const audioRegex = /\.(mp3|wav|ogg|flac|m4a)$/i;
              const txtRegex = /\.(txt|csv)$/i;
              const otherRegex = /\.(pdf|xlsx|doc|docx)$/i;
              {
                console.log(data.Location);
                if (audioRegex.test(data.Location)) {
                  _this.loading = false;
                  _this.recordedForm.audioBlob = [];
                  _this.recordedForm.time = "00:00:00";
                  _this.recordedForm.timeDuration = 0;
                  _this.progressData.uploadLoading = false;
                  _this.recordedForm.textList = [];
                  _this.changeAudioUrl(data.Location);
                }
              }
            }
          });
      }
    },
    changeAudioUrl(newValue) {
      if (!newValue) return;
      this.audioUrl = newValue;
      this.audioUrlArray.push(newValue)
      this.$forceUpdate()
      if (![1, 2].includes(this.pageStatus)) this.pageStatus = 1;
      this.controlsStatus = 2;
    },
    onContinueRecordWithMicrosoft() {
      let iiframe = this.$refs["iiframe"];
      iiframe.contentWindow.window.document.getElementById(
        "languageOptions"
      ).selectedIndex = this.languageRadio;
      iiframe.contentWindow.testdoContinuousPronunciationAssessment();
			// 录音开始
      let flag = true;
      // 录音开始
      iiframe.contentWindow.onRecognizing = (e, recognitionEventArgs) => {
        var result = recognitionEventArgs.result;
    
        this.recordedForm.endTime = this.recordedForm.timeDuration;

        if (flag) {
          this.controlsStatus = 1;
          flag = false;
          this.uploadFileLoading = false;
        }
        // let privText = e.privText;
        let privText = result.text;
        if (privText == undefined || privText == "undefined") return;
        console.log("👇转译对象👇");
        console.log(e);
        console.log("👇转译结果👇");
        console.log(privText);
        this.recordedForm.startTime = this.recordedForm.timeDuration + 1;
        // this.videoText += privText;
        this.videoText = this.videoText.replace(/(^|[\r\n]+).*?\[\.\.\.\][\r\n]+/, `${privText} [...]\r\n`);
        // 将textarea滚动到最底部
        this.$nextTick(() => {
          this.$refs.videoTextTextarea.scrollTop = this.$refs.videoTextTextarea.scrollHeight;
        });
      };
    }
  }
};
</script>

<style scoped>
.record_box {
  width: 100%;
  height: 500px;
  position: relative;
}

.ca-b-o-main {
  width: calc(100% - 20px);
  height: 50px;
  margin: 10px auto;
  border-radius: 5px;
  transition: 0.3s;
  position: relative;
}

.ca-b-o-main:hover {
  box-shadow: 0 5px 5px 5px #e1e8eb;
}

.ca-b-o-m-tape {
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #3681fc;
  border-radius: 16px;
  background-color: white;
  box-shadow: 0 5px 5px 5px #e6eaeb;
  transition: 0.3s;
}

.ca-b-o-m-tapeTwo {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #3681fc;
  box-sizing: border-box;
  padding: 0 20px;
  border-radius: 16px;
  background-color: white;
  box-shadow: 0 5px 5px 5px #e6eaeb;
  transition: 0.3s;
}

.ca-b-o-m-tapeTwo >>> .vueAudioBetter {
  width: 90%;
}

.ca-b-o-m-tape > span {
  margin-right: 10px;
  font-size: 22px;
}

.ca-b-o-m-tape:hover {
  color: #1467ee;
}

.ca-b-o-m-inputAre {
  width: 100%;
  min-height: 100%;
  height: auto;
  display: flex;
  align-items: flex-end;
  border-radius: 16px;
  background-color: white;
  box-shadow: 0 5px 5px 5px #e6eaeb;
  transition: 0.3s;
  position: absolute;
  bottom: 0;
}

.ca-b-o-m-TapeArea {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  border-radius: 16px;
  background-color: #f0f2f5;
  box-shadow: 0 5px 5px 5px #e6eaeb;
  transition: 0.3s;
  align-items: center;
  padding-right: 20px;
  box-sizing: border-box;
}

.ca-b-o-m-i-left {
  display: flex;
  align-items: center;
}

.ca-b-o-m-i-left > div > div {
  color: #ee3e3e;
  font-weight: bold;
}

.ca-b-o-m-i-left > div > span {
  font-size: 14px;
  margin-top: 5px;
}

.ca-b-o-m-i-left > img {
  margin-left: 10px;
  border-radius: 50%;
  margin-right: 20px;
}

.ca-b-o-m-left {
  flex: 1;
  height: auto;
  min-height: 64px;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  box-sizing: border-box;
  padding-left: 20px;
}

.ca-b-o-m-left > textarea {
  resize: none;
  min-height: 50px;
  margin: 7px 0;
  max-height: 500px;
  width: 100%;
  font-size: 18px;
  border: none;
  outline: none;
  resize: none;
  overflow: auto;
}

.ca-b-o-m-right {
  width: 100px;
  min-width: 80px;
  height: 64px;
  max-height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

#myTextarea::-webkit-input-placeholder {
  /* Chrome, Opera, Safari */
  font-size: 14px;
  /* 修改placeholder字体大小 */
  color: grey;
  /* 修改placeholder文字颜色 */
}

#myTextarea:-moz-placeholder {
  /* Firefox 18- */
  font-size: 14px;
  /* 修改placeholder字体大小 */
  color: grey;
  /* 修改placeholder文字颜色 */
  opacity: 1;
  /* 修复Firefox的透明度问题 */
}

#myTextarea::-moz-placeholder {
  /* Firefox 19+ */
  font-size: 14px;
  /* 修改placeholder字体大小 */
  color: grey;
  /* 修改placeholder文字颜色 */
  opacity: 1;
  /* 修复Firefox的透明度问题 */
}

#myTextarea:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  font-size: 14px;
  /* 修改placeholder字体大小 */
  color: grey;
  /* 修改placeholder文字颜色 */
}

/* .ca-b-o-m-right > span {
	width: 24px;
	height: 24px;
	background: url("../../../../assets/icon/classroomObservation/tapeIng.png")
		no-repeat;
	background-size: 100% 100%;
	cursor: pointer;
	margin-right: 10px;
} */

.ca-b-o-m-right > div {
  width: 52px;
  height: 30px;

  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 14px;
  border-radius: 5px;
  background-color: #1467ee;
  margin-right: 10px;
  cursor: pointer;
}

.ca-b-o-m-r-dsiableBtn {
  /* 禁止手势 */
  cursor: not-allowed !important;
  background-color: #aeccfe !important;
}

.lyStart {
  width: 38px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

.ca_b_o_m_roleList {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 230px);
  margin-bottom: 70px;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 15px;
}

.ca_b_o_m_rl_item {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  background-color: #f3f7fd;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
  box-sizing: border-box;
  padding: 10px;
}

.ca_b_o_m_rl_itemActive {
  background-color: #c3ddfa;
}

.ca_b_o_m_rl_i_left {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.ca_b-o_m_rl_i_top {
  display: flex;
}

.ca_b-o_m_rl_i_top > div {
  margin-left: 10px;
}

.ca_b-o_m_rl_i_top > div > span {
  font-size: 14px;
  margin-top: 5px;
  color: #6b798e;
}

.ca_b-o_m_rl_i_bottom {
  margin-top: 10px;
  width: 90%;
  overflow: hidden;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ca-top >>> .editorBar {
  height: 100%;
  position: relative;
  max-height: calc(100vh - 300px);
}

.ca-top >>> .editorBar .text {
  height: calc(100% - 42px);
  max-height: calc(100% - 42px);
  overflow: auto;
}

.chatAreaLoading {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.cal_box {
  width: 300px;
  height: 150px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 4px 4px #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 20px;
}

.cal_box > div:nth-child(1) {
  margin-bottom: 10px;
  font-size: 18px;
  display: flex;
  align-items: center;
}

.cal_box > div:nth-child(1) > img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.cal_box >>> .el-progress-bar__innerText {
  color: #fff !important;
}

.text_box {
  width: calc(100% - 20px);
  margin: 0 auto;
  height: calc(100% - 105px);
}

.binfo_input {
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  display: block;
  min-width: 0;
  outline: none;
  box-sizing: border-box;
  background: none;
  border: none;
  border-radius: 4px;
  background: #fff;
  font-size: 16px;
  resize: none;
  font-family: "Microsoft YaHei";
  min-height: 48px;
  /* border: 1px solid #3682fc00; */
  border: 1.5px solid #cad1dc;
}

.binfo_textarea {
  border: 1.5px solid #cad1dc;
  font-size: 16px;
  resize: none;
  /* background: #f6f6f6; */
  font-family: "Microsoft YaHei";
}

.binfo_input:focus-visible {
  border: 1.5px solid #3681fc !important;
}

.binfo_textarea::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}

/*定义滚动条轨道 内阴影+圆角*/
.binfo_textarea::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #eee;
}

/*定义滑块 内阴影+圆角*/
.binfo_textarea::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.1);
}

.audio_class {
  /* width: 100% !important; */
  /* height: 100% !important; */
  background: #ccc !important;
  margin: 0 !important;
}

.audio_class >>> .slider .process {
  background: #000;
}


.ca-b-o-main2 {
  width: calc(100% - 20px);
  height: 50px;
  margin: 10px auto;
  /* border-radius: 5px; */
  transition: 0.3s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.select_box >>> .el-inpu__inner{
  border: none;
}

.select_box{
  width: 150px;
  display: flex;
  align-items: center;
}

.select_box > span{
  min-width: fit-content;
}

.select_box + .select_box{
  margin-left: 10px;
}

.selectBox {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.controlsBox {
  display: flex;
  align-items: center;
  width: auto;
  height: 100%;
  display: none;
}

.selectBox:hover > .controlsBox {
  display: flex;
}

.delSelect {
  width: 16px;
  height: 16px;
  /* display: none; */
  align-items: center;
  justify-content: center;
  background: url("../../../assets/icon/classroomObservation/del.svg") no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  /* transform: translateY(7px); */
}
</style>