页面调整

src/component/modules/generalModalCanvas.vue

@@ -0,0 +1,98 @@
+<template>
+	<div class="modalCanvas generalModel" ref="modalCanvas"></div>
+    <a-modal
+        class="modalCanvas_modal generalModel"
+        v-model:visible="addDetails"
+        :footer="null"
+		:get-container="() => $refs.modalCanvas"
+		width="75%"
+        :maskClosable="false"
+        :centered="true"
+        :closable="false"
+		:destroyOnClose="true"
+        wrapClassName="#app"
+        :keyboard="false"
+		:mask="false"
+    >
+		<div class="generalModel_btn">
+			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="#000"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="#000"/>
+					</svg>
+
+			</div>
+		</div>
+		
+		<div class="addDetails_center">
+			<generalMiniCanvas :imgUrl="imgUrl" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
+		</div>
+		<div></div>
+    </a-modal>
+</template>
+<script>
+import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
+import generalMiniCanvas from "../modules/generalMiniCanvas.vue";
+export default defineComponent({
+    components: {
+		generalMiniCanvas,
+    },
+	emits: ['setSloganData'],
+    setup(props,{emit}) {
+        let addDetail = reactive({
+			imgUrl:''
+		});
+        let addDetails = ref(false);
+		let init = (data,index)=>{
+			addDetails.value = true
+			addDetail.imgUrl = data.imgUrl || data.url
+        }
+		let submitBase64Data = (data)=>{
+			emit('setSloganData',data)
+			cancelDsign()
+		}
+		let cancelDsign = ()=>{
+			addDetails.value = false
+		}
+        return {
+			...toRefs(addDetail),
+			addDetails,
+			init,
+			submitBase64Data,
+			cancelDsign,
+        };
+    },
+    data() {
+        return {
+        };
+    },
+    mounted() {},
+    methods: {
+       
+    },
+});
+</script>
+<style lang="less" scoped>
+.modalCanvas{
+	width: 0;
+	height: 0;
+}
+.modalCanvas_modal {
+    .closeIcon {
+        z-index: 2;
+    }
+	
+	.addDetails_center{
+		position: relative;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		margin: 0 auto;
+	}
+	.exportCanvasBox_submit{
+		// margin-top: 2.4rem;
+		// text-align: center;
+	}
+}
+</style>