修改画板和图片热区文字

src/views/book/courseware/create/components/question/drawing/Drawing.vue

@@ -16,7 +16,7 @@
         @updateFileList="updateFileList"
       />
       <div class="image-size">
-        <span>图片大小</span
+        <span>画板大小</span
         ><el-input-number v-model="data.image_width" :step="100" :min="200" :max="800" /><el-input-number
           v-model="data.image_height"
           :step="100"

src/views/book/courseware/create/components/question/image_text/ImageText.vue

@@ -16,7 +16,7 @@
         @updateFileList="updateFileList"
       />
       <div class="image-size">
-        <span>图片大小</span
+        <span>热区大小</span
         ><el-input-number v-model="data.image_width" :step="100" :min="200" :max="800" /><el-input-number
           v-model="data.image_height"
           :step="100"
@@ -43,114 +43,123 @@
       </el-radio-group>
       <div
         v-if="data.image_list[0]"
-        :id="'selectableArea' + randomId"
         :style="{
-          width: data.image_width + 'px',
-          height: data.image_height + 'px',
-          background: 'url(' + data.image_list[0].file_url + ') center / contain no-repeat',
-          position: 'relative',
+          width: data.image_width + 2 + 'px',
+          height: data.image_height + 2 + 'px',
+
+          border: '1px dotted rgb(220, 223, 230)',
         }"
-        @mousedown="startSelection"
-        @mousemove="updateSelection"
-        @mouseup="endSelection"
-        @mouseleave="endSelection"
       >
         <div
-          v-if="isSelecting"
+          :id="'selectableArea' + randomId"
           :style="{
-            position: 'absolute',
-            top: `${startY}px`,
-            left: `${startX}px`,
-            width: `${endX - startX}px`,
-            height: `${endY - startY}px`,
-            border: isText ? '2px solid #165DFF' : '2px solid #f90',
+            width: data.image_width + 'px',
+            height: data.image_height + 'px',
+            background: 'url(' + data.image_list[0].file_url + ') center / contain no-repeat',
+            position: 'relative',
           }"
-        ></div>
-        <div
-          v-for="(itemh, indexh) in data.text_list"
-          :key="indexh"
-          :style="{
-            position: 'absolute',
-            top: `${itemh.y}`,
-            left: `${itemh.x}`,
-            width: `${itemh.width}`,
-            height: `${itemh.height}`,
-            border: indexh === hotspotsActiveIndex ? '2px solid #f00' : '2px solid #165DFF',
-          }"
-          @click="handleAcitveSelect('text', indexh)"
+          @mousedown="startSelection"
+          @mousemove="updateSelection"
+          @mouseup="endSelection"
+          @mouseleave="endSelection"
         >
-          <label
+          <div
+            v-if="isSelecting"
             :style="{
               position: 'absolute',
-              top: '-13px',
-              right: '-13px',
-              width: '26px',
-              height: '26px',
-              border: indexh === hotspotsActiveIndex ? '2px solid #f00' : '2px solid #165DFF',
-              textAlign: 'center',
-              borderRadius: '50%',
-              boxShadow: ' 0px 5px 5px -3px #0000001A',
-              background: '#fff',
-              color: indexh === hotspotsActiveIndex ? '#f00' : '#165DFF',
+              top: `${startY}px`,
+              left: `${startX}px`,
+              width: `${endX - startX}px`,
+              height: `${endY - startY}px`,
+              border: isText ? '2px solid #165DFF' : '2px solid #f90',
             }"
-            >{{ indexh + 1 }}</label
-          >
-          <span
+          ></div>
+          <div
+            v-for="(itemh, indexh) in data.text_list"
+            :key="indexh"
             :style="{
               position: 'absolute',
-              bottom: '0',
-              left: '0',
-              borderRadius: '0 2px 0 0',
-              background: indexh === hotspotsActiveIndex ? '#f00' : '#165DFF',
-              color: '#fff',
-              fontSize: '12px',
-              padding: '0 3px',
+              top: `${itemh.y}`,
+              left: `${itemh.x}`,
+              width: `${itemh.width}`,
+              height: `${itemh.height}`,
+              border: indexh === hotspotsActiveIndex ? '2px solid #f00' : '2px solid #165DFF',
             }"
-            >文字框</span
+            @click="handleAcitveSelect('text', indexh)"
           >
-        </div>
-        <div
-          v-for="(itemh, indexhs) in data.input_list"
-          :key="indexhs"
-          :style="{
-            position: 'absolute',
-            top: `${itemh.y}`,
-            left: `${itemh.x}`,
-            width: `${itemh.width}`,
-            height: `${itemh.height}`,
-            border: indexhs === inputActiveIndex ? '2px solid #ff0000' : '2px solid #f90',
-          }"
-          @click="handleAcitveSelect('input', indexhs)"
-        >
-          <label
+            <label
+              :style="{
+                position: 'absolute',
+                top: '-13px',
+                right: '-13px',
+                width: '26px',
+                height: '26px',
+                border: indexh === hotspotsActiveIndex ? '2px solid #f00' : '2px solid #165DFF',
+                textAlign: 'center',
+                borderRadius: '50%',
+                boxShadow: ' 0px 5px 5px -3px #0000001A',
+                background: '#fff',
+                color: indexh === hotspotsActiveIndex ? '#f00' : '#165DFF',
+              }"
+              >{{ indexh + 1 }}</label
+            >
+            <span
+              :style="{
+                position: 'absolute',
+                bottom: '0',
+                left: '0',
+                borderRadius: '0 2px 0 0',
+                background: indexh === hotspotsActiveIndex ? '#f00' : '#165DFF',
+                color: '#fff',
+                fontSize: '12px',
+                padding: '0 3px',
+              }"
+              >文字框</span
+            >
+          </div>
+          <div
+            v-for="(itemh, indexhs) in data.input_list"
+            :key="indexhs"
             :style="{
               position: 'absolute',
-              top: '-13px',
-              right: '-13px',
-              width: '26px',
-              height: '26px',
+              top: `${itemh.y}`,
+              left: `${itemh.x}`,
+              width: `${itemh.width}`,
+              height: `${itemh.height}`,
               border: indexhs === inputActiveIndex ? '2px solid #ff0000' : '2px solid #f90',
-              textAlign: 'center',
-              borderRadius: '50%',
-              boxShadow: ' 0px 5px 5px -3px #0000001A',
-              background: '#fff',
-              color: '#f90',
-            }"
-            >{{ indexhs + 1 }}</label
-          >
-          <span
-            :style="{
-              position: 'absolute',
-              bottom: '0',
-              left: '0',
-              borderRadius: '0 2px 0 0',
-              background: indexhs === inputActiveIndex ? '#f00' : '#f90',
-              color: '#fff',
-              fontSize: '12px',
-              padding: '0 3px',
             }"
-            >输入框</span
+            @click="handleAcitveSelect('input', indexhs)"
           >
+            <label
+              :style="{
+                position: 'absolute',
+                top: '-13px',
+                right: '-13px',
+                width: '26px',
+                height: '26px',
+                border: indexhs === inputActiveIndex ? '2px solid #ff0000' : '2px solid #f90',
+                textAlign: 'center',
+                borderRadius: '50%',
+                boxShadow: ' 0px 5px 5px -3px #0000001A',
+                background: '#fff',
+                color: '#f90',
+              }"
+              >{{ indexhs + 1 }}</label
+            >
+            <span
+              :style="{
+                position: 'absolute',
+                bottom: '0',
+                left: '0',
+                borderRadius: '0 2px 0 0',
+                background: indexhs === inputActiveIndex ? '#f00' : '#f90',
+                color: '#fff',
+                fontSize: '12px',
+                padding: '0 3px',
+              }"
+              >输入框</span
+            >
+          </div>
         </div>
       </div>
       <template v-if="data.image_list[0] && data.text_list.length > 0">
@@ -226,6 +235,7 @@
           </li>
         </ul>
       </template>
+      <div style="height: 5px"></div>
       <el-button @click="handleChangeContent">生成分词</el-button>
       <el-button v-if="data.mp3_list.length > 0" size="small" @click="handleTimes">{{
         data.word_time.length === 0 ? '自动生成字幕时间' : '重新生成字幕时间'

src/views/book/courseware/preview/components/image_text/ImageTextPreview.vue

@@ -340,7 +340,7 @@ export default {
   z-index: 1;
   font-size: 0;
   cursor: pointer;
-  border: 3px solid transparent;
+  border: 2px solid transparent;
 
   &.active {
     border-color: #ff1616;