Jelajahi Sumber

refactor(workPage): 替换原生img为el-image优化预览体验

1. 为作业图片和问答图片模块替换为el-image组件,添加统一样式与内置预览功能
2. 注释旧的图片样式代码避免冲突
SanHQin 1 hari lalu
induk
melakukan
22a0bf742e

+ 1 - 1
src/components/pages/workPage/components/kwlPage.vue

@@ -37,7 +37,7 @@
       <!-- 任务附件:图片/视频预览 -->
       <div class="kwlTaskMedia" v-show="showTaskDesc" v-if="work.taskUrl && work.taskUrl.length > 0">
         <div class="kwlTaskMediaItem" v-for="(url, idx) in work.taskUrl" :key="'taskUrl-' + idx">
-          <img v-if="isImage(url)" :src="url" @click="$hevueImgPreview(url)" />
+          <el-image style="width: 100%; height: 6.25rem; border-radius: .5rem; cursor: pointer; border: .0625rem solid #e0e0e0; transition: transform 0.2s;" v-if="isImage(url)" :src="url" alt="" :preview-src-list="[url]" fit="cover" />
           <!-- 视频:缩略图 + 播放按钮,点击打开全屏弹窗 -->
           <div class="kwlVideoThumb" v-else-if="isVideo(url)" @click="previewVideo(url)">
             <video :src="url" muted></video>

+ 3 - 3
src/components/pages/workPage/components/questionsAndAnswers.vue

@@ -3,7 +3,7 @@
     <div class="qaa_title">{{ work.answerQ }}</div>
     <div class="qaa_img" v-if="work.imageList && work.imageList.length > 0">
       <div v-for="(item, index) in work.imageList" :key="index">
-        <img :src="item.url" alt="" @click="$hevueImgPreview(item.url)">
+        <el-image style="width: auto; height: 100%;cursor: pointer;max-height: 300px;" :src="item.url" alt="" :preview-src-list="[item.url]" fit="cover" />
       </div>
     </div>
     <div class="qaa_type">{{ lang.ssQAQuestion }}</div>
@@ -292,12 +292,12 @@ export default {
   margin: 10px;
 }
 
-.qaa_img>div>img {
+/* .qaa_img>div>img {
   width: auto;
   height: 100%;
   object-fit: cover;
   cursor: pointer;
-}
+} */