pbl-app/src/views/classObserve/homePage.vue

<template>
  <div class="observe">
    <div class="top">
      <div class="Title">
        课堂观察
      </div>
      <div>
        <img src="../../assets/images/classObserve/CocoClass.png" alt="" />
      </div>
    </div>
    <div class="brief">
      <div class="txt">您好，我是 CocoClass 课堂观察</div>
      <div class="txt2">基于课堂录音和实录文稿进行分析，为您提供不同启发。</div>
    </div>
    <div class="FunctionalArea">
      <div class="tit">
        <div>课程名称</div>
        <span @click="BindForm(2)">
          <img src="../../assets/images/classObserve/lianjie.png" alt="" />
        </span>
      </div>
      <div class="teaInfo" @click="BindForm(3)">
        <div class="teaName">王老师</div>
        <div class="classInfo">9年级</div>
        <div class="classInfo">科学</div>
        <img src="../../assets/images/classObserve/fillInfo.png" alt="" />
      </div>
      <div class="chat">
        <div class="chatTxt">
          请用日常生活为主题，跟我进行英语对话， 这里是语音同步转文字， 这里是语音同步转文字这里是语音同转文字这｜...
          请用日常生活为主题，跟我进行英语对话， 这里是语音同步转文字， 这里是语音同步转文字这里是语音同转文字这｜...
        </div>
        <img src="../../assets/images/classObserve/waveanimation.png" alt="" />
        <div class="time">00:08</div>
      </div>
      <div class="controlArea">
        <img @click="goChat" src="../../assets/images/classObserve/rootper.png" alt="" />
        <img src="../../assets/images/classObserve/langcut.png" alt="" />
        <img @click="ctrlRecord" v-if="isParse" src="../../assets/images/classObserve/endLang.png" alt="" />
        <img @click="ctrlRecord" v-else src="../../assets/images/classObserve/recording.png" alt="" />
        <img src="../../assets/images/classObserve/suspend.png" alt="" />
        <div @click="historyBtn" style="position: relative;">
          <span
            style="position: absolute;top: -5px;right: -9px;color: rgba(54, 129, 252, 1);width: 15px;font-size: 10px;"
            >99</span
          >
          <img src="../../assets/images/classObserve/book.png" alt="" />
        </div>
      </div>
      <div class="selectBtn">
        <button :disabled="isParse" class="btn1" @click="BindForm(5)">
          选择模版
          <div v-if="isParse" class="one"></div>
        </button>
        <button :disabled="isParse" class="btn2" @click="analysis">
          一键分析
          <div v-if="isParse" class="one"></div>
        </button>
      </div>
    </div>

    <van-action-sheet v-model="historyShow" title="历史记录">
      <div class="historyList">
        <div class="con" v-for="item in 10" :key="item">
          <div class="tit">课程信息</div>
          <van-popover placement="bottom-end" v-model="abuShow" trigger="click">
            <div class="abu">
              <div class="abuBtn">
                <img src="../../assets/images/classObserve/edit.png" alt="" />
                <span>重命名</span>
              </div>
              <div class="abuBtn">
                <img src="../../assets/images/classObserve/del.png" alt="" />
                <span>删除</span>
              </div>
            </div>
            <template #reference>
              <img src="../../assets/images/classObserve/colD.png" alt="" />
            </template>
          </van-popover>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
export default {
  props: {
    page: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      isParse: false,
      historyShow: false,
      abuShow: false
    }
  },
  methods: {
  
    goChat() {
      this.$router.push({ path: '/aiChat', query: {} })
    },
    historyBtn() {
      this.historyShow = true
    },
    // 绑定表单
    BindForm(val) {
      this.$emit('cutPage', val)
    },
    
    ctrlRecord() {
      this.isParse = !this.isParse
    },

    analysis() {
      console.log(22)
      this.$router.push({ path: '/outcome', query: {} })
    }
  }
}
</script>

<style lang="scss" scoped>
.observe {
  background-color: #e0eafb;
  height: calc(100% - 50px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: auto;
}
/deep/.van-action-sheet {
  min-height: 80% !important;
}
.top {
  width: 100%;
  box-sizing: border-box;
  padding-top: 15px;
  background-color: rgba(54, 129, 252, 1);
  flex: 1;
  box-sizing: border-box;
  border-radius: 0 0 23% 23%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  img {
    display: block;
  }
  .Title {
    font-size: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
  }
}
.brief {
  width: 100%;
  padding-bottom: 20px;
  .txt {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(54, 129, 252, 1);
    font-size: 18px;
    font-weight: 600;
  }
  .txt2 {
    display: flex;
    justify-content: center;
    color: rgba(65, 80, 109, 0.6);
    font-size: 12px;
  }
}
.FunctionalArea {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
  .tit {
    display: flex;
    justify-content: space-between;
    div {
      font-weight: 600;
      font-size: 22px;
      color: rgba(0, 0, 0, 0.9);
    }
    img {
      width: 20px;
      object-fit: contain;
    }
  }
  .teaInfo {
    display: flex;
    justify-content: flex-start;
    padding: 10px 0;
    .teaName {
      padding-right: 10px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.6);
    }
    .classInfo {
      background-color: rgba(255, 255, 255, 0.55);
      font-size: 10px;
      border-radius: 3px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      margin-right: 10px;
      color: rgba(0, 0, 0, 0.6);
    }
  }
}
.chat {
  .chatTxt {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    -webkit-line-clamp: 4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    color: rgba(0, 0, 0, 0.6);
  }
  img {
    width: 100%;
  }
  .time {
    color: rgba(54, 129, 252, 1);
    font-size: 12px;
    display: flex;
    justify-content: center;
  }
}
.controlArea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  img {
    object-fit: contain;
  }
}
.selectBtn {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;

  .one {
    background-color: rgba(249, 245, 245, 0.7);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
  }
  .btn1 {
    position: relative;
    width: 45%;
    overflow: hidden;
    padding: 15px 0;
    border-radius: 13px;
    border: none;
    color: rgba(0, 0, 0, 0.9);
    font-weight: 550;
    font-size: 16px;
    background-color: #fff;
  }
  .btn2 {
    width: 45%;
    position: relative;
    padding: 15px 0;
    border-radius: 13px;
    overflow: hidden;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(54, 129, 252, 1);
    font-weight: 550;
    font-size: 16px;
  }
}
.historyList {
  box-sizing: border-box;
  padding: 10px 20px;

  .con {
    display: flex;
    border-bottom: 1px #ccc solid;
    justify-content: space-between;
    padding: 15px 0;
    .tit {
      font-weight: 400;
      font-size: 16px;
    }
  }
}
.abu {
  background-color: #fff;
  width: 100px;
  border-radius: 6px;
  padding: 10px 10px;
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 16px 24px 2px rgba(0, 0, 0, 0.04);
  box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
  .abuBtn {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    font-size: 12px;
    font-weight: 400;
    img {
      margin-right: 5px;
    }
  }
}
</style>