语音阅读小窗

闫增涛

2024-07-02 92845ee4a3898c4c65bc85bbbe777e4595897e3d

 src/views/readerPages/webHome.vue

@@ -141,7 +141,7 @@
              <div>附加题</div>
              <div :class="exercisesType == 'additional' ? 'text' : 'line'"></div>
            </div>
            <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('AFC1A288') > -1" />
            <!-- <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('AFC1A288') > -1" />
            <div
              class="tabItem hover"
              @click="selectExercisesType('wrong')"
@@ -149,8 +149,8 @@
            >
              <div>错题本</div>
              <div :class="exercisesType == 'wrong' ? 'text' : 'line'"></div>
            </div>
            <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('A434F2C0') > -1" />
            </div> -->
            <!-- <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('A434F2C0') > -1" />
            <div
              class="tabItem hover"
              @click="selectExercisesType('collection')"
@@ -158,7 +158,7 @@
            >
              <div>收藏夹</div>
              <div :class="exercisesType == 'collection' ? 'text' : 'line'"></div>
            </div>
            </div> -->
          </div>
        </div>
        <!-- 目录 -->
@@ -363,14 +363,14 @@
                        v-else-if="item.icon && activeClassify != 'image'"
                      />
                      <!-- <el-icon v-else-if="activeClassify == 'image'" size="30"></el-icon> -->
                      <el-icon v-else-if="activeClassify == 'audio'" size="30"><Headset /></el-icon>
                      <el-icon v-else-if="activeClassify == 'video'" size="30"
                      <!-- <el-icon v-else-if="activeClassify == 'audio'" size="30"><Headset /></el-icon> -->
                      <!-- <el-icon v-else-if="activeClassify == 'video'" size="30"
                        ><VideoCamera
                      /></el-icon>
                      <el-icon v-else-if="activeClassify == 'other'" size="30"><Files /></el-icon>
                      <el-icon v-else-if="activeClassify == 'exercises'" size="30"
                        ><Tickets
                      /></el-icon>
                      /></el-icon> -->
                      <!-- <el-icon v-else-if="activeClassify == 'other'" size="30"><Files /></el-icon> -->
                      <img src="@/assets/images/resource/yp-mr.png"  v-else-if="activeClassify == 'audio'" />
                      <img src="@/assets/images/resource/sp-mr.png"  v-else-if="activeClassify == 'video'" />
                      <img src="@/assets/images/resource/qt-mr.png"  v-else-if="activeClassify == 'other'" />
                      <div class="handleBox" v-if="showHandle == index">
                        <div class="delImg">
                          <el-icon
@@ -535,6 +535,11 @@
            </div>
          </div>
        </div>
        <!-- 题库底部收藏夹和错题集 -->
        <ul class="question-bottom" v-if="activeMenu == '题库'">
            <li @click="selectExercisesType('collection')">收藏夹</li>
            <li @click="selectExercisesType('wrong')">错题本</li>
          </ul>
        <!-- 菜单内容收起 -->
        <div class="menuStateBox" v-if="menuState.open">
          <svg
@@ -810,6 +815,10 @@
            </div>
          </div>
        </div>
        <!-- 语音阅读组件 -->
         <!-- <div class="voice-reader">
          <voiceReader />
         </div> -->
      </div>
      <!-- 教学组件 -->
      <div class="toolBox">
@@ -1237,6 +1246,10 @@
    :type="examinationData.type"
    :infoType="examinationData.infoType"
  />
  <!-- 计算器 -->
   <el-dialog title="计算器" align-center v-model="calculatorVisble" width="40%">
    
   </el-dialog>
</template>

<script setup lang="ts">
@@ -1258,6 +1271,7 @@
import dictionary from '@/views/components/dictionary.vue'
import newWord from '@/views/components/newWord.vue'
import wrongQuestion from '@/views/components/wrongQuestion.vue'
import voiceReader from '@/views/components/voiceReader.vue'
import { ElMessage, ElMessageBox, valueEquals } from 'element-plus'
import logo from '@/assets/images/header/logo.png'
import mulu from '@/assets/images/menu/mulu.png'
@@ -2201,6 +2215,8 @@
              })
            }
        }
      } else {
        resourceDataList.value = []
      }
    })
  } else {
@@ -2340,18 +2356,19 @@
//错题本
const wrongQuestionVisble = ref(false)
const selectExercisesType = (type) => {
  exercisesType.value = type
  searchText.value = ''

  if (type == 'exercises') {
    getExercisesList()
      exercisesType.value = type
      searchText.value = ''
  } else if (type == 'additional') {
    getAdditionalList()
      exercisesType.value = type
      searchText.value = ''
  } else if (type == 'wrong') {
    openExaminationDialog(true, {}, 'errorQuestion')
    questionList.value = []
  } else {
    openExaminationDialog(true, {}, 'collectQuestion')
    questionList.value = []
  }
}
// 题列表点击
@@ -2690,6 +2707,7 @@
const siweiVisble = ref(false)
const modelToolVisble = ref(false)
const shengciVisble = ref(false)
const calculatorVisble = ref(false)
const activeTool = ref(0)
const toolState = reactive({
  open: true
@@ -2718,6 +2736,10 @@
      case '生词卡片':
        resourceUrl.value = bookConfig.value.resourceUrl
        shengciVisble.value = true
        break
      case '计算器':
      calculatorVisble.value = true
      break
    }
  } else {
    ElMessageBox.confirm('请先登录！', {
@@ -4112,6 +4134,7 @@
      }
    }
    .menuContent {
      // position: relative;
      width: 300px;
      flex-shrink: 0;
      height: calc(100vh - 48px);
@@ -4531,6 +4554,29 @@
      .screenshotList {
        height: calc(100% - 60px);
        overflow-y: auto;
      }
      .questionList {
        height:83%
      }
      .question-bottom {
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: space-evenly;
        width:300px;
        padding:20px 0;
        background-color:#fff;
        li {
          cursor: pointer;
          width: 65px;
          height:65px;
          border:1px solid #cfcfcf;
          border-radius:10px;
          background-color:#f9f9f9;
          display:flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .menuStateBox {
@@ -5097,4 +5143,9 @@
    width: 100%;
  }
}
.voice-reader {
  position:absolute;
  bottom:30px;
  left:50px;
}
</style>