修改

src/components/DragResizeRotate/DragResizeRotate.vue

@@ -1,8 +1,8 @@
 <template>
     <VueDragResizeRotate :x="drapJson.x" :y="drapJson.y" class-name-handle="my-handle-class-dd handle" class-name-active="my-active-class-dd" class-name="my-class-dd" :w="drapJson.w" :h="drapJson.h" :r="drapJson.r" :parent="true" @resizing="onResize" @resizestop="onResizeStop" @activated="onActivated" @deactivated="onDeactivated" @dragging="onDrag" @dragstop="onDragStop">
         <slot>
-            <div class="w-100% h-100% d-flex a-c j-c p-rtv" style="background-color: rgba(116, 251, 229, .1)">
-                <span>点击事件区域</span>
+            <div class="w-100% h-100% d-flex a-c j-c p-rtv" style="background-color: rgba(116, 251, 229, .3)">
+                <span></span>
                 <div class="f-s-18 c-danger delete-icon_box" @click.stop="deleteItem">
                     <el-icon>
                         <CircleCloseFilled />

src/components/TelViewTem/TelViewTem.vue

@@ -3,7 +3,9 @@
         <img class="bg-src" :src="bgSrc" />
         <!-- 拖动选区样式 -->
         <div v-if="isDragging" class="drag-area" :style="dragAreaStyle"></div>
-        <slot></slot>
+        <div class="pro-content">
+          <slot></slot>
+        </div>
     </div>
 </template>
 
@@ -28,20 +30,7 @@ const endPoint = ref({ x: 0, y: 0 });
 const imgHeight = ref(props.minHeight);
 const imgWidth = ref(props.width);
 
-watch(() => props.bgSrc, (val) => {
-  if (val) {
-    const img = new window.Image();
-    img.src = val;
-    img.onload = () => {
-      console.log('Image loaded:', img.width, img.height);
-      imgHeight.value = img.height;
-      imgWidth.value = img.width;
-    };
-  } else {
-    imgHeight.value = props.minHeight;
-    imgWidth.value = props.width;
-  }
-}, { immediate: true });
+
 
 const containerStyle: any = computed(() => {
   if (props.bgSrc) {
@@ -135,6 +124,7 @@ function onMouseUp() {
   position: relative;
 }
 .drag-area {
+  position: relative;
   z-index: 100;
   transition: none;
 }
@@ -145,5 +135,13 @@ function onMouseUp() {
   pointer-events: none;
   height: auto;
   object-fit: contain;
+  z-index: -1;
+}
+.pro-content {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
 }
 </style>

src/views/training/models/meeting-tpl-h5.vue

@@ -1,7 +1,7 @@
 <template>
     <template v-if="form.img">
         <div class="flex1" style="overflow: auto;">
-            <TelViewTem @selectArea="selectArea" :enableDraw="enableDraw" bgColor="#f7f7f7" :bgSrc="form.img">
+            <TelViewTem @selectArea="selectArea" :enableDraw="enableDraw" bgColor="#fff" :bgSrc="form.img">
                 <DragResizeRotate v-if="form.bgm" v-model="form.bgmRact" @activated="activatedBgm($event)" @deactivated="deactivatedBgm">
                     <div class="w-100% h-100% d-flex j-c a-c">
                         <img src="@/assets/images/bg_music_icon.png" />

src/views/training/models/meeting-tpl-list.vue

@@ -80,6 +80,7 @@ const clickSetIndex = async (item: any) => {
 .item-hover {
     cursor: pointer;
     &:hover {
+        background-color: rgba(#2A6D52, .3);
         .bg-img-item_view {
             border-color: var(--el-color-primary);
         }
@@ -88,6 +89,7 @@ const clickSetIndex = async (item: any) => {
         }
     }
     &.checked {
+         background-color: rgba(#2A6D52, .3);
         .bg-img-item_view {
             border-color: var(--el-color-primary);
         }

src/views/training/ptpl/edit/index.vue

@@ -19,13 +19,13 @@
                 </div>
             </div>
             <div class="flex1 ov-hd d-flex">
-                <div class="bg-#f8f8f8 w-200 box-sizing-border over-auto">
+                <div class="bg-#fff w-200 box-sizing-border over-auto">
                     <MeetingTplList v-if="meetid" :meetid="meetid" @selectItem="selectItem" :list="list"
                         @setIndex="setIndexTpl" @addMeetingTpls="addMeetingTpls" @delete="deleteListTpl"
                         @changeLabel="changeLabel"></MeetingTplList>
                 </div>
-                <div class="flex1 ov-hd d-flex flex-cln a-c">
-                    <div v-if="form.id" @click="changeLabel(form)" class="w-750 pd2-10-0 f-w-5">
+                <div class="flex1 ov-hd d-flex flex-cln a-c bg-#f7f7f7">
+                    <div v-if="form.id" @click="changeLabel(form)" class="w-750 pd2-10-0 f-w-5 f-s-18">
                         {{ form?.label }}
                         <el-icon>
                             <EditPen />
@@ -34,7 +34,7 @@
                     <MeetingTplH5 v-if="form.id" v-model="form" @activated="activated"
                         @deleteItemEvents="deleteItemEvents" @muisc="setMuisc"></MeetingTplH5>
                 </div>
-                <div class="bg-#f8f8f8 w-240">
+                <div class="bg-#fff w-240">
                     <MeetingTplEvents v-if="curEvent" v-model="curEvent" :dict="dict" @save="saveEevent" :list="list">
                     </MeetingTplEvents>
                 </div>
@@ -75,6 +75,8 @@ const saveEevent = (item: any) => {
     const index = form.value.events.findIndex((it: any) => it.id === item.id);
     if (index === -1) return;
     form.value.events[index] = item;
+    // 保存成功
+    proxy?.$modal.msgSuccess('保存成功');
 };
 const deleteItemEvents = (item: any) => {
     if (curEvent.value?.id === item.id) {