部分页面样式调整

src/component/DetailCopy/canvas/index.vue

@@ -19,13 +19,22 @@
 				</div> -->
 				<div class="contet">
 					<div class="canvas" v-if="!isEditFrontBack" @click.stop>
-						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
+						<editCanvas v-if="canvasLoad && currentView === 'canvasEditor'" :config="canvasConfig" 
 							:clothingImageUrl="selectDetail.undividedLayer" 
 							isFixedErasable
 							:clothing-image-opts="{
 								imageMode:'contains',
 							}"
-							ref="editCanvas"></editCanvas>
+							ref="editCanvas">
+							<template #customTools="{ toolButtonProps }">
+								<!-- 也可以直接使用普通的按钮 -->
+								 {{toolButtonProps}}
+								<div class="custom-tool-btn" @click="setCurrentView('redGreenExample')">
+									<i class="fi fi-sr-layers"></i>
+									<div class="tool-tooltip">Edit the front and back sections</div>
+								</div>
+							</template>
+						</editCanvas>
 						<!-- <canvasContent ref="canvasContent"></canvasContent> -->
 					</div>
 					<div class="editFrontBack" v-if="isEditFrontBack" @click.stop>
@@ -35,7 +44,7 @@
 							
 							ref="editFrontBack">
 						</editFrontBack> -->
-						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
+						<editCanvas v-if="canvasLoad && currentView === 'redGreenExample'" :config="canvasConfig" 
 							:enabledRedGreenMode="true"
 							:clothingImageUrl="selectDetail.undividedLayer" 
 							:redGreenImageUrl="frontBack.front[imgDomIndex].maskUrl"
@@ -43,7 +52,14 @@
 							:clothing-image-opts="{
 								imageMode:'contains',
 							}"
-							ref="editCanvasBackFront"></editCanvas>
+							ref="editCanvasBackFront">
+							<template #customTools="{ toolButtonProps }">
+								<div class="custom-tool-btn" @click="setCurrentView('canvasEditor')">
+									<i class="fi fi-sr-layers"></i>
+									<div class="tool-tooltip">Edit the front and back sections</div>
+								</div>
+							</template>
+						</editCanvas>
 					</div>
 				</div>
 				
@@ -111,6 +127,7 @@ export default defineComponent({
 			canvasLoad:false,
 			canvasConfig:{
 			} as any,
+			currentView:'canvasEditor',
 		})
 		watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
 			detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
@@ -215,6 +232,9 @@ export default defineComponent({
 			})
 
 		}
+		const setCurrentView = (str:string)=>{
+			detailData.currentView = str
+		}
 		onBeforeUnmount(()=>{
 			console.log(12312)
 			sessionStorage.removeItem('frontBackEdit');
@@ -237,6 +257,7 @@ export default defineComponent({
 			privewDetail,
 			setFrontBackColor,
 			frontBackChange,
+			setCurrentView,
         }
     },
 	provide() {
@@ -338,4 +359,56 @@ export default defineComponent({
 		}
 		
 	}
+	
+.custom-tool-btn {
+  position: relative;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  color: #333;
+  transition: all 0.2s ease;
+}
+
+.custom-tool-btn:hover {
+  background-color: #f0f0f0;
+}
+
+.custom-tool-btn:hover .tool-tooltip {
+  display: block;
+}
+
+.tool-tooltip {
+  display: none;
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  margin-left: 8px;
+  white-space: nowrap;
+  font-size: 12px;
+  z-index: 10;
+}
+
+.tool-tooltip:before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 100%;
+  margin-top: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent rgba(0, 0, 0, 0.7) transparent transparent;
+}
+
 </style>