样式适配

src/assets/style/style.css

@@ -886,6 +886,12 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
   overflow: hidden;
   box-sizing: border-box;
 }
+.ant-select-dropdown .ant-select-item {
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+  padding: 0.8rem 1.8rem;
+  min-height: 3.2rem;
+}
 .generalModel {
   -moz-user-select: none;
   -webkit-user-select: none;

src/assets/style/style.less

@@ -970,6 +970,15 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 		overflow: hidden;
 		box-sizing: border-box;
 	}
+	.ant-select-item{
+		font-size: 1.6rem;
+		line-height: 2.4rem;
+		padding: .8rem 1.8rem;
+		min-height: 3.2rem;
+		.ant-select-item-option-content{
+			
+		}
+	}
 }
 
 .generalModel{//自带关闭的页面

src/component/DetailCopy/model/modelPosition.vue

@@ -485,6 +485,7 @@ export default defineComponent({
 					float: left;
 					user-select:none;
 					-webkit-user-drag: none;
+					object-fit: cover;
 				}
 				.modal_imgItem{
 					position: absolute;

src/component/Events/eventsDetail.vue

@@ -101,7 +101,7 @@ export default defineComponent({
 				eventLangData = eventDataCn
 			}
 			eventLangData.eventsItem.forEach((item:any)=>{
-				if(item.id == router.currentRoute.value.query.id){
+				if(item.id == router.currentRoute.value.query.eventId){
 					filter.eventsDetail = item;
 				}
 			})

src/component/HomePage/Generate.vue

@@ -728,11 +728,6 @@ export default defineComponent({
 								if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
 									message.info(this.t('Generate.effectPoor'));
 								}else{
-									nextTick().then(()=>{
-										if(this.driver__.driver){
-											driverObj__.moveNext()
-										}
-									})
 								}
 								
 								this.store.dispatch('getCredits')

src/component/HomePage/scaleImage.vue

@@ -687,7 +687,7 @@ export default defineComponent({
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				z-index: 2;
+				z-index: 99;
 				.operate_icon{
 					font-size: 1.8rem;
 					color: #fff;

src/component/LoginPage/login/enterprise.vue

@@ -247,7 +247,7 @@
 <script lang="ts">
 import { defineComponent, ref, onMounted, reactive,toRefs } from "vue";
 import { Https } from "@/tool/https";
-import { isEmail } from "@/tool/util";
+import { isEmail,getUniversalZoomLevel } from "@/tool/util";
 import { setCookie, WriteCookie } from "@/tool/cookie";
 import { message } from "ant-design-vue";
 import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
@@ -574,8 +574,7 @@ export default defineComponent({
 				}
 				if(rv.email)userid.email = rv.email
 				this.store.commit("upUserDetail", userid);
-				
+				if ((window.innerWidth * getUniversalZoomLevel()) < 768) {
-				if (window.innerWidth < 768) {
 					message.info(
 						"If you need to design, please log in using an iPad or computer."
 					);
@@ -716,11 +715,16 @@ export default defineComponent({
                 box-sizing: border-box;
                 label {
                     display: flex;
+					align-items: center;
                     span {
                         font-size: 1.6rem;
                         margin-left: 10px;
                         font-weight: normal;
                     }
+					input{
+						width: 1.5rem;
+						height: 1.5rem;
+					}
                     &.active {
                         pointer-events: none;
                         input {

src/component/LoginPage/login/personal.vue

@@ -261,7 +261,7 @@
 <script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
 import { Https } from "@/tool/https";
-import { isEmail } from "@/tool/util";
+import { isEmail,getUniversalZoomLevel } from "@/tool/util";
 import { setCookie, WriteCookie } from "@/tool/cookie";
 import { message } from "ant-design-vue";
 import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
@@ -561,7 +561,7 @@ export default defineComponent({
 				if(rv.email)userid.email = rv.email
 				this.store.commit("upUserDetail", userid);
 				
-				if (window.innerWidth < 768) {
+				if (window.innerWidth * getUniversalZoomLevel() < 768) {
 					message.info(
 						"If you need to design, please log in using an iPad or computer."
 					);
@@ -702,11 +702,16 @@ export default defineComponent({
                 box-sizing: border-box;
                 label {
                     display: flex;
+					align-items: center;
                     span {
                         font-size: 1.6rem;
-                        margin-left: 10px;
+                        margin-left: 1rem;
                         font-weight: normal;
                     }
+					input{
+						width: 1.5rem;
+						height: 1.5rem;
+					}
                     &.active {
                         pointer-events: none;
                         input {

src/component/LoginPage/login/school.vue

@@ -246,7 +246,7 @@
 <script lang="ts">
 import { defineComponent, ref, onMounted, reactive,toRefs } from "vue";
 import { Https } from "@/tool/https";
-import { isEmail } from "@/tool/util";
+import { isEmail,getUniversalZoomLevel } from "@/tool/util";
 import { setCookie, WriteCookie } from "@/tool/cookie";
 import { message } from "ant-design-vue";
 import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
@@ -576,7 +576,7 @@ export default defineComponent({
 				if(rv.email)userid.email = rv.email
 				this.store.commit("upUserDetail", userid);
 				
-				if (window.innerWidth < 768) {
+				if (window.innerWidth * getUniversalZoomLevel()  < 768) {
 					message.info(
 						"If you need to design, please log in using an iPad or computer."
 					);
@@ -717,11 +717,16 @@ export default defineComponent({
                 box-sizing: border-box;
                 label {
                     display: flex;
+					align-items: center;
                     span {
                         font-size: 1.6rem;
                         margin-left: 10px;
                         font-weight: normal;
                     }
+					input{
+						width: 1.5rem;
+						height: 1.5rem;
+					}
                     &.active {
                         pointer-events: none;
                         input {

src/component/WorksPage/Falls.vue

@@ -138,6 +138,7 @@ export default defineComponent({
 		},
 	},
 		mounted () {
+			
 			this.resize()
 			window.addEventListener("resize", this.resize);
 			let domFalls = document.querySelector('.Falls')
@@ -333,6 +334,14 @@ export default defineComponent({
 					top: 10px;
 					right: 10px;
 					left: auto;
+					@media (max-width: 1200px) {
+						top: 1rem;
+						right: 1rem;
+						padding: 0 .5rem;
+						border-radius: .4rem;
+						margin-right: .2rem;
+						font-size: 1.2rem;
+					}
 				}
 			}
 			.falls_item_bottom{
@@ -379,10 +388,16 @@ export default defineComponent({
 								overflow: hidden;
 								text-overflow: ellipsis;
 								white-space: nowrap;
+								@media (max-width: 1200px) {
+									font-size: 1.6rem;
+								}
 							}
 							span{
 								font-size: 12px;
 								color: #525252;
+								@media (max-width: 1200px) {
+									font-size: 1.2rem;
+								}
 							}
 						}
 					}
@@ -406,6 +421,9 @@ export default defineComponent({
 							i{
 								// font-size: 1.8rem;
 								font-size: 12px;
+								@media (max-width: 1200px) {
+									font-size: 1.2rem;
+								}
 							}
 							svg,i{
 								color: #9e9ea7;
@@ -413,10 +431,17 @@ export default defineComponent({
 								// width: 10px;
 								// height: 10px;
 								margin-right: 5px;
+								@media (max-width: 1200px) {
+									margin-right: .5rem;
+								}
 							}
 							span{
 								margin-left: 3px;
 								font-size: 12px;
+								@media (max-width: 1200px) {
+									margin-left: .3rem;
+									font-size: 1.2rem;
+								}
 							}
 						}
 					}

src/component/home/chat/index.vue

@@ -554,6 +554,7 @@ export default defineComponent({
 							border-radius: .4rem;
 							cursor: pointer;
 							margin-left: 1rem;
+							white-space: nowrap;
 							&.active{
 								background: #000;
 								color: #fff;

src/component/home/design/collection/PrintboardUpload.vue

@@ -928,8 +928,8 @@ export default defineComponent({
 						right: 1rem;
 						top: 1rem;
 						// opacity: 0;
-						width: 3.5rem;
+						width: 3rem;
-						height: 3.5rem;
+						height: 3rem;
 						transition: all 0.3s ease-in-out;
 					}
 					&.modal_imgItem:nth-child(even) {
@@ -942,10 +942,10 @@ export default defineComponent({
 					}
 					.pin_block{
 						position: absolute;
-						left: 1rem;
+						left: .5rem;
 						top: 1rem;
-						width: 8rem;
+						width: 7rem;
-						height: 3.5rem;
+						height: 3rem;
 						border-radius: 3rem;
 						background: rgba(0,0,0,.7);
 						color: #fff;
@@ -960,8 +960,8 @@ export default defineComponent({
 							padding-left: .2rem;
 						}
 						i{
-							width: 3rem;
+							width: 2.5rem;
-							height: 3rem;
+							height: 2.5rem;
 							border-radius: 50%;
 							display: flex;
 							align-items: center;
@@ -974,7 +974,7 @@ export default defineComponent({
 							}
 						}
 						span{
-							font-size: 1.8rem;
+							font-size: 1.4rem;
 							font-weight: 600;
 						}
 					}

src/component/home/design/collection/SketchboardUpload.vue

@@ -882,8 +882,8 @@ export default defineComponent({
 						right: 1rem;
 						top: 1rem;
 						// opacity: 0;
-						width: 3.5rem;
+						width: 3rem;
-						height: 3.5rem;
+						height: 3rem;
 						transition: all 0.3s ease-in-out;
 					}
 					&.modal_imgItem:nth-child(even) {
@@ -900,10 +900,10 @@ export default defineComponent({
 					}
 					.pin_block{
 						position: absolute;
-						left: 1rem;
+						left: .5rem;
 						top: 1rem;
-						width: 8rem;
+						width: 7rem;
-						height: 3.5rem;
+						height: 3rem;
 						border-radius: 3rem;
 						background: rgba(0,0,0,.7);
 						color: #fff;
@@ -918,8 +918,8 @@ export default defineComponent({
 							padding-left: .2rem;
 						}
 						i{
-							width: 3rem;
+							width: 2.5rem;
-							height: 3rem;
+							height: 2.5rem;
 							border-radius: 50%;
 							display: flex;
 							align-items: center;
@@ -932,7 +932,7 @@ export default defineComponent({
 							}
 						}
 						span{
-							font-size: 1.8rem;
+							font-size: 1.4rem;
 							font-weight: 600;
 						}
 					}

src/component/home/design/index.vue

@@ -74,7 +74,7 @@
 												>
 												</a-select>
 											</div>
-											<div @click="setUnfold" class="generalModel_state_item smail" style="margin-right: 1rem;">
+											<div class="generalModel_state_item smail" style="margin-right: 1rem;">
 												<span>Unfold :</span>
 												<a-switch v-model:checked="isUnfold" @change="setUnfold" />
 											</div>
@@ -876,6 +876,7 @@ export default defineComponent({
 					if(str == 'like'){
 						likeDesignCollectionList.value.forEach((item:any)=>{
 							if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
+								if(!item?.childList)item.childList = []
 								item.childList.push(design)
 							}
 						})
@@ -991,7 +992,6 @@ export default defineComponent({
 
 		}
 		const setUnfold = ()=>{
-			designData.isUnfold = !designData.isUnfold
 			if(!designData.isUnfold){
 				designData.selectLikeDesign = designData.oldSelectLikeDesign || []
 			}
@@ -1021,6 +1021,9 @@ export default defineComponent({
 			}else{
 				if(designData.selectLikeDesign.length == 0){
 					designData.selectLikeDesign = likeDesignCollectionList.value
+					nextTick(()=>{
+						setSystemDesigner(0)
+					})
 					return
 				}
 				const parents = designData.selectLikeDesign.filter((item:any) => item.resultType === 'Design');
@@ -1171,6 +1174,24 @@ export default defineComponent({
 		this.observerData.observer.unobserve(this.$refs.rightContentBlockBox);
 	},
 	async mounted() {
+		if(window.innerWidth < 1200){
+			this.widthList = [
+				{
+					label:'Medium',
+					value:70,
+				},{
+					label:'Large',
+					value:150,
+				},{
+					label:'Extra-large',
+					value:200,
+				}
+			]	
+			this.widthValue = {
+					label:'Medium',
+					value:70,
+				}
+		}
 		window.addEventListener('beforeunload', (event)=>{
 			this.store.commit("clearAllCollection");
 		});
@@ -1415,7 +1436,6 @@ export default defineComponent({
 				marketingSketchFiles,
 				moodboardPosition,
 			} = this.store.state.UploadFilesModule.allBoardData;
-			console.log(JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData)))
 			this.randomNum()
 			let modelList = [] as any;
 			let workspace:any = this.store.state.Workspace.probjects
@@ -1582,6 +1602,7 @@ export default defineComponent({
 				designPythonOutfitId:design.designOutfitId,
 				groupDetailId: design.groupDetailId || design.id,
 				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+				projectId:this.store.state.Workspace.probjects.id,
 			};
 			if(type != 'Design'){
 				this.setNoDesignLike(design,index,type,'disLike')

src/component/home/index.vue

@@ -65,6 +65,7 @@ export default defineComponent({
 				}else{
 					data.openType = ''
 					data.dataLoad = false
+					return
 				}
 				// if((query.history || query.id) != (oldQuery.history || oldQuery.id)){
 				// }

src/component/home/newProject/index.vue

@@ -441,6 +441,7 @@ export default defineComponent({
 						background: #efeff1;
 						width: 25rem;
 						height: 4.8rem;
+						font-size: 1.6rem;
 						margin-right: 1.2rem;
 						border-radius: 1.6rem;
 						cursor: pointer;

src/component/mainPage/signUp/registerModel.vue

@@ -277,7 +277,7 @@
 <script lang="ts">
 import { defineComponent,ref,reactive,toRefs ,onMounted} from "vue";
 import { Https } from "@/tool/https";
-import { isEmail } from "@/tool/util";
+import { isEmail,getUniversalZoomLevel } from "@/tool/util";
 import { setCookie ,WriteCookie } from "@/tool/cookie";
 import { message } from "ant-design-vue";
 import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
@@ -579,7 +579,7 @@ export default defineComponent({
 				if(rv.email)userid.email = rv.email
 				this.store.commit("upUserDetail", userid);
 				
-				if (window.innerWidth < 768) {
+				if (window.innerWidth * getUniversalZoomLevel() < 768) {
 					message.info(
 						"If you need to design, please log in using an iPad or computer."
 					);
@@ -782,11 +782,16 @@ export default defineComponent({
                     box-sizing: border-box;
 					label{
 						display: flex;
+						align-items: center;
 						span{
 							font-size: 1.6rem;
 							margin-left: 10px;
 							font-weight: normal;
 						}
+						input{
+							width: 1.5rem;
+							height: 1.5rem;
+						}
 						&.active{
 							pointer-events:none;
 							input{

src/component/modules/generalMiniCanvas.vue

@@ -1,843 +1,142 @@
 <template>
-    <div class="generalMiniCanvas">
+	<div class="generalCanvas">
-		<div class="addDetails_canvasCenter">
+		<div class="canvasBox" ref="canvasBox">
-			<div class="generalMiniCanvas_input generalMiniCanvas_item" :class="{spread:spreadState}">
+			<editCanvas v-if="canvasLoad" :config="canvasConfig" :clothingImageUrl="imgUrl" ref="editCanvas"></editCanvas>
-				<div class="generalMiniCanvas_input_item brushwork" v-show="canvasState == 'pencil'">
-					<span >{{ $t('exportModel.Brushwork') }}:</span>
-					<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
-						style="width: 20rem"
-						@change="brushworkChange"
-						>
-						<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
-							<img :src="item.url" alt="">
-						</a-select-option>
-					</a-select>
-				</div>
-				<div class="generalMiniCanvas_input_item" v-show="(canvasState != 'move' && canvasState != 'liquidation' && canvasState != 'movePosition' && canvasState != 'zoomIn' && canvasState != 'zoomOut' && brushworkValue != 'RibbonBrush' && brushworkValue != 'LongfurBrush')">
-					<span>{{ $t('exportModel.Size') }}</span>
-					<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
-				</div>
-				<div class="generalMiniCanvas_input_item" v-show="canvasState == 'liquidation'">
-					<span>{{ $t('exportModel.Size') }}</span>{{ canvasPencilWidth.routes }}
-					<input type="range" @change="routesChange('routes')" min="1" max="100" v-model="canvasPencilWidth.routes">
-				</div>
-				<div class="generalMiniCanvas_input_item" v-show="canvasState == 'liquidation'">
-					<span>{{ $t('exportModel.density') }}</span>
-					<input type="range" @change="routesChange('density')" min="1" max="100" v-model="canvasPencilWidth.density">
-				</div>
-				<div class="generalMiniCanvas_input_item" v-show=" canvasState == 'pencil'">
-					<span>{{ $t('exportModel.Color') }}</span>
-					<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
-				</div>
-				
-			</div>
-			<div class="exportCanvasBox_center_data">
-				<div class="generalMiniCanvas_btn generalMiniCanvas_item" :class="{spread:spreadState}">
-					<!-- <div @click="setOperation('')" class="generalMiniCanvas_btn_item">
-						<div>新增</div>
-					</div> -->
-					<i class="icon iconfont icon-chehui" @click="canvasGeneral.historyState('')"></i>
-					<i class="icon iconfont icon-fanchehui" @click="canvasGeneral.historyState('reverse')"></i>
-					<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasState == 'movePosition'}"></i>
-					<!-- <i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i> -->
-					<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
-					<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
-					<!-- <i class="icon iconfont icon-IC-yehua" @click="setOperation('liquidation')"></i> -->
-					<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
-					<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
-					<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasState == 'zoomIn'}"></i>
-					<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasState == 'zoomOut'}"></i>
-				</div>
-				
-				<div class="exportCanvasBox_center_box">
-					<div class="exportCanvasBox_center">
-						
-					</div>
-					<!-- <div v-show="arrows.show" class="moveDom" :style="arrows.domStyle"></div>
-					<div v-show="arrows.show" class="jiantouDom" :style="arrows.jiantouStyle"> </div> -->
-					<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
-				</div>
-			</div>
-			
 		</div>
-		<div class="exportCanvasBox_submit" @click="setSubmit(false)">
+		<div class="mark_loading" v-show="isShowMark">
-			<div class="started_btn">
+			<a-spin size="large" />
-				{{ $t('addDetails.submit') }}
-			</div>
 		</div>
-		<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
 	</div>
 </template>
 <script>
-import { defineComponent, ref, reactive, watch, onMounted, onBeforeUnmount, nextTick, toRefs } from "vue";
+import {defineComponent, toRefs, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
-import creditsDetail from "@/component/Pay/creditsDetail.vue";
+} from "vue";
-import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
+import {message} from 'ant-design-vue'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
-import canvasGeneral from "@/tool/canvasGeneral";
+import canvasGeneral from "@/tool/canvasGeneralCopy";
-import { getMousePosition } from "@/tool/mdEvent";
+import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
-import liquefaction from "@/component/modules/liquefaction.vue";
+
+
 export default defineComponent({
     components: {
-		creditsDetail,
+		editCanvas,
-		liquefaction
     },
-	emits: ['submitBase64Data'],
+	props:{
-	props: {
+		imgUrl:{
-		imgUrl: {
+			type:String,
-			type: String,
+			default:''
-			default: ''
+		}
-		},
 	},
-	// watch: {
+	emits:['submitBase64Data'],
-	// 	// imgUrl: function(newVal, oldVal) {
-	// 	// 	console.log(newVal);
-	// 	// 	// 当propertyName数据发生变化时，执行相应的操作
-	// 	// }
-	// 	imgUrl(newVal, oldVal) {
-	// 		console.log(`imgUrl changed from ${oldVal} to ${newVal}`);
-	// 	},
-	// },
     setup(props,{emit}) {
-        let presentState = ref('paypal');
+		const { t } = useI18n();
-        let showPayOrder = ref(false);
+		const store = useStore();
-        let loadingShow = ref(false);
+		const isShowMark = ref(false)
-        let { t } = useI18n();
+		const component = reactive({
-        let canvas = reactive({});
-		let scale = 2;
-		let ratio = [1,1]
-		let exportWH = 512
-		let pencilbtnStyle = ref({
-			background:'',
-			width:0+'px',
-			height:0+'px',
-			display:'none',
-			left:0+'px',
-			top:0+'px',
 		})
-		let canvasBtn = reactive({
+		const data = reactive({
-			canvasState:'move',
+			canvasLoad:false,
-			canvasPencilWidth:{
+			canvasConfig:{
-				pencil:20,
+
-				eraser:20,
-				routes:30,
-				density:30,
 			},
-			canvasPencilColor:'#000000',
-			spreadState:false,
 		})
-		let canvasWH = ref(0);
+		const dataDom = reactive({
-		let arrows = ref({
+			editCanvas:null,
-			show:false,
+			canvasBox:null,
-			domStyle:{
-				left:0,
-				top:0,
-				width:0,
-				height:0,
-			},
-			jiantouStyle:{
-				height:'1px',
-				transform:`translateY(-100%) rotate(${90}deg)`,
-			}
-		})
-		watch(
-		() => props.imgUrl,  
-		(newValue, oldValue) => {
-			init()
 		})
+		const openSetData = ()=>{
+			data.canvasLoad = true
+		}
+		const addImage = (value)=>{
+			console.log(value)
+			dataDom.editCanvas.addImageToLayer(value.imgUrl)
+		}
+		const addBottomImage = (value)=>{
+			dataDom.editCanvas.changeFixedImage(value)
+		}
+		const getData = async ()=>{
 		
-		onMounted(()=>{
+		}
-			init()
+		const getCanvasData = ()=>{
-		})
+			
-		onBeforeUnmount(()=>{
+			return canvasExport
-			canvasGeneral.canvasClear()
+		}
-		})
+        onMounted(() => {
-		let reverseCanvasState = ref([])//存放canvas操作
+			if(props.imgUrl){
-		let normalCanvasState = ref([])//存放canvas操作
+				let img = new Image()
-		let canvasState = ref()//存放canvas操作
+				img.onload = ()=>{
-		let keyDown = []//监听键盘的 keydown 和 keyup 事件
+					let domHeight = dataDom.canvasBox.offsetHeight
-		let isMovePostion = false
+					let imgHeight = img.height
-		let init = ()=>{
+					data.canvasConfig.height = domHeight
-			normalCanvasState.value = []
+					data.canvasConfig.width = imgHeight/domHeight * img.width
-			reverseCanvasState.value = []
+					// canvasWH.value = height
-            showPayOrder.value = true;
+					// // canvasBox.style.width = height+'px'
-			ratio = [1,1]
+					// let wScale = 1
-			nextTick(()=>{
+					// let hScale = 1
-				let canvasBox = document.querySelector(".generalMiniCanvas .exportCanvasBox_center");
+					// if(img.width>img.height){
-				document.removeEventListener('mousemove', mouseMove);
+					// 	hScale = img.height/img.width
-				document.removeEventListener('touchmove', touchmove);
+					// 	exportWH = img.width
-
+					// }else{
-				let img = new Image();
+					// 	wScale = img.width/img.height
-				img.onload = async function(){
+					// 	exportWH = img.height
-					loadingShow.value = true
+					// }
-					let height = canvasBox.offsetHeight;
+					// ratio = [wScale,hScale]
-					canvasWH.value = height
+					// canvas = canvasGeneral.canvasInit(canvasBox,{
-					// canvasBox.style.width = height+'px'
+					// 	width:canvasWH.value * wScale,
-					let wScale = 1
+					// 	height:canvasWH.value * hScale,
-					let hScale = 1
+					// })
-					if(img.width>img.height){
+					// canvas.selection = false;
-						hScale = img.height/img.width
+					// dataDom.editCanvas.addImageToLayer(img)
-						exportWH = img.width
+					data.canvasLoad = true
-					}else{
-						wScale = img.width/img.height
-						exportWH = img.height
-					}
-					ratio = [wScale,hScale]
-					canvas = canvasGeneral.canvasInit(canvasBox,{
-						width:canvasWH.value * wScale,
-						height:canvasWH.value * hScale,
-					})
-					canvas.selection = false;
-					// canvas.set({
-					// 	backgroundColor: 'lightblue'
-					// });
-					scale = img.height/canvas.height
-					pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
-					
-					fabric.Object.prototype.cornerSize = 10
-					fabric.Object.prototype.transparentCorners = false 
-					await fabric.Image.fromURL(props.imgUrl, async function(img) {
-						// 设置背景图对象的宽度和高度与 canvas 相同
-						img.scaleToWidth(canvas.width);
-						img.scaleToHeight(canvas.height);
-						img.set({
-							scaleX: canvas.width / img.width,
-							scaleY: canvas.height / img.height
-						});
-						// 将背景图添加到 canvas 的底层
-						await canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
-						if(!fabric.Object.prototype.controls.deleteControl){
-							JSSetRemoveImage(deleteObj)
-						}else{
-							fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
-						}
-						setPencilWidth()
-						canvasGeneral.updateCanvasState()
-					},{ crossOrigin: "Anonymous" });
-					// 鼠标抬起事件
-					canvas.on('mouse:up', function(event) {
-						if(isMovePostion)isMovePostion = false
-						// if(canvasBtn.canvasState != 'move')canvasGeneral.updateCanvasState('mouseUp')
-					});
-					canvas.on("mouse:down", event=>setCanvasDown(event));
-					canvas.on('mouse:wheel', opt => {
-						const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
-						let zoom = canvas.getZoom() // 获取画布当前缩放值
-						zoom *= 0.999 ** delta
-						if (zoom > 20) zoom = 20
-						if (zoom < 0.01) zoom = 0.01
-						canvas.zoomToPoint(
-							{ // 关键点
-							x: opt.e.offsetX,
-							y: opt.e.offsetY
-							},
-							zoom
-						)
-						opt.e.preventDefault()
-						opt.e.stopPropagation()
-						upDataPencilWidth(zoom)
-					})
-					canvas.on("mouse:move", event=>setCanvasMove(event));
-
-					//画布上移动
-					document.addEventListener('mousemove', mouseMove);
-					document.addEventListener('touchmove', touchmove);
-					setOperation('pencil')
-					img.remove()
 				}
 				img.src = props.imgUrl
-				
-			})
-        }
-		let clearCanvas = ()=>{
-		    canvasBtn.canvasState = 'move'
-		    canvasBtn.spreadState = false
-			canvasGeneral.canvasClear()
-		}
-		let mouseMove = (event)=>{
-			let e = getMousePosition(event,false)
-			setDomMove(e)
-		}
-		let touchmove = (event)=>{
-			let e = getMousePosition(event,true)
-			setDomMove(e)
-		}
-		let setDomMove = (event)=>{
-			if(canvas.isDrawingMode){
-				canvas.setCursor('none');
-			}
-			let canvasCenterBox = document.querySelector(".generalMiniCanvas .exportCanvasBox_center_box");
-			if(!canvasCenterBox)return
-			let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
-			let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
-			pencilbtnStyle.value.left = parentX + "px"
-			pencilbtnStyle.value.top =  parentY+'px'
-		}
-		let setCanvasMove = (event) =>{
-			if(canvasBtn.canvasState == 'movePosition' && isMovePostion)setCanvasPosition(event)
-		}
-		let lastPosX = 0
-		let lastPosY = 0
-		let setCanvasDown = (event)=>{
-			if(canvasBtn.canvasState == 'movePosition'){
-				isMovePostion = true;
-				lastPosX = event.pointer.x;
-				lastPosY = event.pointer.y;
-				return
-			}
-			if(canvasBtn.canvasState == 'zoomIn' || canvasBtn.canvasState == 'zoomOut'){
-				setCanvasZoom(event)
-				return
-			}
-		}
-		let setCanvasPosition = (event)=>{
-			const e = event;
-            const vpt = canvas.viewportTransform;
-
-            vpt[4] += e.pointer.x - lastPosX; // 更新水平偏移
-            vpt[5] += e.pointer.y - lastPosY; // 更新垂直偏移
-
-            canvas.requestRenderAll(); // 请求重绘画布
-            lastPosX = e.pointer.x;
-            lastPosY = e.pointer.y;
-		}
-		let setCanvasZoom = (opt)=>{
-			let zoom = canvas.getZoom() // 获取画布当前缩放值
-			let num = -100
-			if(canvasBtn.canvasState == 'zoomOut') num = 100
-			zoom *= 0.999 ** num
-			if (zoom > 20) zoom = 20
-			if (zoom < 0.01) zoom = 0.01
-			// console.log(zoom);
-			canvas.zoomToPoint(
-				{ // 关键点
-				x: opt.pointer.x,
-				y: opt.pointer.y
-				},
-				zoom
-			)
-			opt.e.preventDefault()
-			opt.e.stopPropagation()
-			upDataPencilWidth(zoom)
-		}
-		let setOperation = (str)=>{
-			canvasBtn.canvasState = str
-			let canvasCenterBox = document.querySelector(".generalMiniCanvas .exportCanvasBox_center_box");
-			let classList = canvasCenterBox.className.split(' ');
-			canvasCenterBox.className = 'exportCanvasBox_center_box'
-			if(str == 'move'){
-				setMove()
-				pencilbtnStyle.value.display = `none`
-				canvasCenterBox.className = 'exportCanvasBox_center_box'
-			}else if(str == 'pencil'){
-				setPencil()
-				pencilbtnStyle.value.display = `block`
-				canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
-			}else if(str == 'eraser'){
-				setEraser()
-				pencilbtnStyle.value.display = `block`
-				canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
-			}else if(str == 'liquidation'){
-				canvas.isDrawingMode = false
-				canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
-			}else if(str == 'zoomIn' || str == 'zoomOut'){
-				pencilbtnStyle.value.display = `none`
-				canvas.isDrawingMode = false
-				canvas.forEachObject((obj) =>obj.selectable = false);
-				canvasCenterBox.className = 'exportCanvasBox_center_box'
-			}else if(str == 'movePosition'){
-				canvas.isDrawingMode = false
-				pencilbtnStyle.value.display = `none`
-				canvas.forEachObject((obj) =>obj.selectable = false);
-				canvasCenterBox.className = 'exportCanvasBox_center_box cursorMove'
-			}
-		}
-		let brushworkValue = ref('PencilBrush')
-		let brushworkChange = (value)=>{
-			brushworkValue.value = value
-			setPencil()
-		}
-		let setMove = ()=>{
-			canvas.isDrawingMode = false
-			canvas.forEachObject((obj) =>obj.selectable = true);
-		}
-		let brushList = ref([
-			{
-				value:'PencilBrush',
-				url:'/image/brush/PencilBrush.jpg'
-			},{
-				value:'Marking',
-				url:'/image/brush/PencilBrush-2.jpg'
-			},{
-				value:'InkBrush',
-				url:'/image/brush/InkBrush.jpg'
-			},{
-				value:'CrayonBrush',
-				url:'/image/brush/CrayonBrush.jpg'
-			},{
-				value:'RibbonBrush',
-				url:'/image/brush/RibbonBrush.jpg'
-			},{
-				value:'MarkerBrush',
-				url:'/image/brush/MarkerBrush.jpg'
-			},{
-				value:'WritingBrush',
-				url:'/image/brush/WritingBrush.jpg'
-			},{
-				value:'LongfurBrush',
-				url:'/image/brush/LongfurBrush.jpg'
-			},{
-				value:'SpraypaintBrush',
-				url:'/image/brush/SpraypaintBrush.jpg'
-			},
-		])
-		let setPencil = ()=>{
-			let pencil
-			canvas.isDrawingMode = true//开启绘画模式
-			if(brushworkValue.value == 'PencilBrush'){
-				pencil = new fabric.PencilBrush(canvas,{}); //普通笔
-			}else if(brushworkValue.value == 'Marking'){
-				pencil = new fabric.PencilBrush(canvas,); //记号笔
-			}else if(brushworkValue.value == 'InkBrush'){
-				pencil = new fabric.InkBrush(canvas,{}); //油画笔
-			}else if(brushworkValue.value=='CrayonBrush'){
-				pencil = new fabric.CrayonBrush(canvas,{}); //蜡笔
-			}else if(brushworkValue.value == 'RibbonBrush'){
-				pencil = new fabric.RibbonBrush(canvas,{width: 1,}); //色带
-			}else if(brushworkValue.value == 'MarkerBrush'){
-				pencil = new fabric.MarkerBrush(canvas,{}); //书写笔
-				// pencil = new fabric.PenBrush(canvas,{}); //书写笔
-			}else if(brushworkValue.value == 'WritingBrush'){
-				pencil = new fabric.WritingBrush(canvas,{}); //毛笔
-			}else if(brushworkValue.value == 'LongfurBrush'){
-				pencil = new fabric.LongfurBrush(canvas,{width: 1,}); //色带
-			}else if(brushworkValue.value == 'SpraypaintBrush'){
-				pencil = new fabric.SpraypaintBrush(canvas,{}); //长毛刷
-			}
-			
-            canvas.freeDrawingBrush = pencil
-			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
-
-			pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
-			canvas.freeDrawingBrush.isEraser = false
-			setPencilWidth()
-			pencilColor()
-		}
-		let setEraser = ()=>{
-			canvas.isDrawingMode = true
-			let eraser = new fabric.EraserBrush(canvas)
-            canvas.freeDrawingBrush = eraser
-			canvas.requestRenderAll();
-			canvas.freeDrawingBrush.isEraser = true
-			pencilbtnStyle.value.background = `rgb(255,255,255)`
-			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
-			setPencilWidth()
-		}
-		let upDataPencilWidth = (zoom)=>{
-			if(canvasBtn.canvasPencilWidth[canvasBtn?.canvasState]){
-				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]) / zoom;
-			}
-		}
-		let deleteObj = ()=> {
-			// if(!canvas.getActiveObjects()){
-			// 	return
-			// }
-			let target = canvas.getActiveObjects()
-			target.forEach((item)=>{
-				canvas.fxRemove(item, {
-					onComplete(){
-					canvas.discardActiveObject(); // 丢弃当前选中的对象
-					canvas.renderAll(); // 重新渲染 Canvas
-					}
-				})
-				canvas.FX_DURATION = 300
-			})
-		}
-		let setTimeOut = {
-		    pencilWidth:null,
-			color:null,
-		}
-		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
-			clearTimeout(setTimeOut.pencilWidth)
-			setTimeOut.pencilWidth = setTimeout(()=>{
-				let zoom = canvas.getZoom() // 获取画布当前缩放值
-				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]) / zoom
-				pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
-				pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
-				if(brushworkValue.value == 'RibbonBrush' || brushworkValue.value == 'LongfurBrush'){
-					canvas.freeDrawingBrush.width = 1;
-					pencilbtnStyle.value.height = 1+'px'
-					pencilbtnStyle.value.width = 1+'px'
-				}
-			},300)
-		}
-		let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
-			clearTimeout(setTimeOut.color)
-			// clearTimeout(setTimeOut.colorHistory)
-			setTimeOut.color = setTimeout(()=>{
-				pencilColor()
-			},200)
-			// setTimeOut.colorHistory = setTimeout(()=>{
-			// 	colorHistoryList.value.push(canvasPencilColor.value)
-			// },1000)
-		}
-		let hexToRgba=(hex, alpha)=> {
-			const r = parseInt(hex.slice(1, 3), 16);
-			const g = parseInt(hex.slice(3, 5), 16);
-			const b = parseInt(hex.slice(5, 7), 16);
-			return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-		}
-		let pencilColor = ()=>{
-			if(canvas.freeDrawingBrush.isEraser){
-				canvas.freeDrawingBrush.color = '#FFFFFF';
 			}else{
-				pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
+				data.canvasLoad = true
-				if(brushworkValue.value == 'Marking'){
-					console.log(canvasBtn.canvasPencilColor);
-					console.log(hexToRgba(canvasBtn.canvasPencilColor,.5));
-					canvas.freeDrawingBrush.color = hexToRgba(canvasBtn.canvasPencilColor,.5)
-				}else{
-					canvas.freeDrawingBrush.color = canvasBtn.canvasPencilColor
-				}
 			}
-		}
+		});
-		let routesChange = (str)=>{
+		onBeforeUnmount(()=>{
-			canvasBtn.canvasPencilWidth[str] = Math.round(canvasBtn.canvasPencilWidth[str]/10)*10;
+			data.canvasLoad = false
-			if (canvasBtn.canvasPencilWidth[str] < 10) {
+			// canvasGeneral.canvasClear()
-				canvasBtn.canvasPencilWidth[str] = 10; // 设置为最小值
+		})
-			} else if (canvasBtn.canvasPencilWidth[str] > 100) {
-				canvasBtn.canvasPencilWidth[str] = 100; // 设置为最大值
-			}
-		}
-		let setSubmit = (liquefation)=>{
-			return new Promise((resolve,reject)=>{
-				var allObjects = canvas.getObjects();
-				// return
-				// if(allObjects.length == 0){
-				// 	return message.info(t('addDetails.jsContent1'))
-				// }
-				var canvasDom = document.createElement("canvas");
-				let exportCanvas = new fabric.Canvas(canvasDom, {
-					backgroundColor: "#FFFFFF",
-					width: exportWH * ratio[0],
-					height: exportWH * ratio[1],
-					isDrawingMode: false, // 开启绘图模式
-				});
-				canvas.backgroundImage.clone(async (back)=>{
-					back.set({
-						scaleX:1,
-						scaleY:1,
-						left:back.left*scale,
-						top:back.top*scale ,
-					})
-					exportCanvas.backgroundImage = back
-					await new Promise((resolve, reject) => {
-						if(allObjects.length == 0)resolve('')
-						allObjects.forEach((item,index)=>{
-							// let obj = fabric.util.object.clone(item);
-							if(item.type == 'circle')return
-							let obj 
-							item.clone((cloned)=>{
-								console.log(cloned);
-								obj = cloned
-								console.log(obj.set);
-								if(obj.set){
-									obj.set(
-										{
-											scaleX:(item.scaleX?item.scaleX:1)*scale,
-											scaleY:(item.scaleY?item.scaleY:1)*scale,
-											left:item.left*scale,
-											top:item.top*scale,
-										}
-									)
-								}
-								// else{
-								// 	console.log(item.width,scale);
-									
-								// 	obj.width = (item.width?item.width:1)*scale
-								// 	obj.height = (item.height?item.height:1)*scale
-								// 	obj.left = item.left*scale
-								// 	obj.top = item.top*scale
-
-								// }
-								exportCanvas.add(obj)
-								if(index == allObjects.length - 1){
-									resolve('')
-								}
-							})
-							
-						})
-					})
-					let position = JSON.parse(JSON.stringify(canvas.viewportTransform))
-					position[4] *= scale
-					position[5] *= scale
-					//设置画布当前那位置和缩放
-					// exportCanvas.viewportTransform = position
-					let data = exportCanvas.toDataURL("image/png");
-					if(liquefation){
-						return resolve(data)
-					}
-					cancelDsign()
-					clearCanvas()
-					emit('submitBase64Data',data)
-					resolve('')
-				})
-			})
-			
-		}
-		let cancelDsign = ()=>{
-			showPayOrder.value = false
-		}
-		let liquefactionData = ref(null)
-		let liquefaction = ref(null)
-		let submitLiquefaction = (rv)=>{
-			// const originalWidth = liquefactionData.value.width // 保存原始宽度
-			// const originalHeight = liquefactionData.value.height; // 保存原始高度
-			canvas.viewportTransform = [1,0,0,1,0,0]
-			fabric.Image.fromURL(rv, function(img) {
-				// 设置背景图对象的宽度和高度与 canvas 相同
-				img.scaleToWidth(canvas.width);
-				img.scaleToHeight(canvas.height);
-				img.set({
-					scaleX: canvas.width / img.width,
-					scaleY: canvas.height / img.height
-				});
-				// 将背景图添加到 canvas 的底层
-				canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
-				if(!fabric.Object.prototype.controls.deleteControl){
-					JSSetRemoveImage(deleteObj)
-				}else{
-					fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
-				}
-				setPencilWidth()
-				canvasGeneral.updateCanvasState()
-			},{ crossOrigin: "Anonymous" });
-		}
-		let setLiquefaction =async ()=>{
-			// const activeObjects = canvas.backgroundImage // 获取选中的对象
-			// console.log(setSubmit(true));
-			let activeObjects = await setSubmit(true)
-			if (activeObjects) {
-				liquefactionData.value = activeObjects
-				liquefaction.value.init(activeObjects)
-			} else {
-				// message.info(useI18.t('exportModel.jsContent6'))
-				return null;
-			}
-		}
         return {
-            presentState,
+			...toRefs(data),
-            showPayOrder,
+			...toRefs(dataDom),
-			loadingShow,
+			isShowMark,
-            t,
+			addImage,
-			pencilbtnStyle,
+			getData,
-			...toRefs(canvasBtn),
+			getCanvasData,
-			arrows,
-
-			liquefactionData,
-			liquefaction,
-			init,
-			setOperation,
-			setPencilWidth,
-			setPencilColor,
-			setSubmit,
-			cancelDsign,
-			submitLiquefaction,
-			setLiquefaction,
-			routesChange,
-			brushList,
-			brushworkValue,
-			brushworkChange,
-			canvasGeneral,
         };
     },
-    data() {
+    data(prop) {
         return {
-        };
+		};
+    },
+	computed: {
+	},
+    watch: {
+      
     },
     mounted() {},
+
     methods: {
-       
+		
-    },
+	},
 });
 </script>
-<style lang="less">
+<style lang="less" scoped>
-
+.generalCanvas{
-.generalMiniCanvas{
-	position: relative;
-	height: 100%;
-	display: flex;
 	width: 100%;
-	// flex-direction: column;
+	height: 100%;
-	margin: 0 auto;
+	position: relative;
-	flex-direction: row;
+	display: flex;
-	flex: 1;
+	flex-direction: column;
 	overflow: hidden;
-	.generalMiniCanvas_item{
+	padding-top: 4rem;
-		// position: relative;
+	> .canvasBox{
-		background: #fff;
-		position: absolute;
-		
-		display: flex;
-		// border: 0.2rem solid #c4c4c4;
-		width: 25rem;
-		border-radius: 4px; /* 设置圆角半径 */
-		flex-wrap: wrap;
-		.generalMiniCanvas_btn_item{
-			display: flex;
-			align-items: center;
-			padding: 1rem 0;
-		}
-	}
-	.generalMiniCanvas_input,.generalMiniCanvas_btn{
-		z-index: 2;
-		padding: 1rem 1.5rem;
-		position: relative;
-		width: auto;
-		flex-wrap: nowrap;
-		flex-direction: column;
-	}
-	.generalMiniCanvas_input{
-		flex-direction: row;
-		align-items: center;
-		margin-left: 7rem;
-		height: 6rem;
-		.generalMiniCanvas_input_item{
-			display: flex;
-			margin-right: 3rem;
-			align-items: center;
-			&.brushwork{
-				img{
-					width: 100%;
-					max-height: 100%;
-					object-fit: contain;
-				}
-			}
-			span{
-				margin-right: 1rem;
-			}
-		}
-		.generalMiniCanvas_input_item:last-child{
-			margin-right: 0;
-		}
-	}
-	.generalMiniCanvas_btn{
-		
-			input{
-				// width: 100%;
-				width: 30rem;
-				// margin-top: 1rem;
-				flex: 1;
-			}
-			.icon-xiala{
-				position: absolute;	
-				width: 2rem;
-				bottom: 0;
-				transform: translate(-50%, 90%);
-				left: 50%;
-				width: 6rem;
-				background: #fff;
-				text-align: center;
-				cursor: pointer;
-				&.icon-xiala::before{
-					transition: all .3s;
-				}
-				&.btnRotate::before{
-					transform: rotate(180deg);
-					display: block;
-				}
-			}
-			i{
-				font-size: 2.5rem;
-				cursor: pointer;
-				width: 4rem;
-				height: 4rem;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				&.active{
-					border: 1px solid;
-					border-radius: .4rem;
-				}
-			}
-			&.spread{
-				transform: translate(-50%,0);
-			}
-		}
-	.addDetails_canvasCenter{
-		flex: 1;
-		overflow: hidden;
-		display: flex;
-		// flex-direction: column;
-		// flex-direction: row;
-		position: relative;
-		margin: 0 auto;
-		flex-direction: column;
-	}
-	.exportCanvasBox_center_data{
-		flex: 1;
-		display: flex;
-		overflow: hidden;
-	}
-	.exportCanvasBox_center_box{
-		padding: 3rem;
-		height: 100%;
 		flex: 1;
 		position: relative;
-		overflow: hidden;
-		width: 100%;
-		background: #e6e6e6;
-		cursor: inherit;
-		&.cursorNone:hover{
-			cursor: none;
-		}
-		&.cursorMove:hover{
-			cursor: move;
-			canvas{
-				cursor: move !important;
-			}
-		}
-		.editFrontBack_pencilbtn{
-			position: absolute;
-			z-index: 1;
-			border-radius: 50%;
-			border: 1px solid #000;
-			pointer-events: none;
-			transform: translate(-50%,-50%);
-		}
 	}
-	.exportCanvasBox_center{
-		height: 100%;
-		flex: 1;
-		position: relative;
-		overflow: hidden;
-		background: #e6e6e6;
-		// overflow: scroll;
-		.canvas-container{
-			left: 50%;
-			top: 50%;
-			transform: translate(-50%,-50%);
-		}
-		.editFrontBack_pencilbtn{
-			position: absolute;
-			z-index: 1;
-			border-radius: 50%;
-			border: 1px solid #000;
-			pointer-events: none;
-			transform: translate(-50%,-50%);
-		}
-	}
-	.exportCanvasBox_center:hover{
-		.generalMiniCanvas_btn{
-			// transform: translate(-50%,-101%);
-			// &.spread{
-			// 	transform: translate(-50%,0);
-			// }
-		}
-	}
-}
-.exportCanvasBox_submit{
-	margin-top: auto;
-	margin-left: 1rem;
-	text-align: center;
 }
 </style>

src/main.ts

@@ -22,7 +22,7 @@ import 'swiper/css/pagination';
 // import "@/tool/fabric.min.js";
 const app = createApp(App);
 flexible()
-
+// alert(window.innerWidth)
 import { getCookie, setCookie } from "@/tool/cookie";
 document.addEventListener('touchstart', function(event) {
 	event.preventDefault(); // 阻止长按选中

src/tool/flexible.js

@@ -1,11 +1,16 @@
+import { getUniversalZoomLevel } from "@/tool/util";
+
 let flexible = (designWidth, maxWidth,minWidth) =>{
     var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid;
     designWidth = designWidth || 1920;
     maxWidth = maxWidth || 2560;
-    minWidth = minWidth || 1024;
+    minWidth = minWidth || 500;
+    // minWidth = minWidth || 1024;
     function refreshRem() {
         var width = docEl.getBoundingClientRect().width;
         var height = docEl.getBoundingClientRect().height;
+		width = getUniversalZoomLevel() * width
+		height = getUniversalZoomLevel() * height
         maxWidth = maxWidth || 1920;
 		if(width/height>1.98) width = height * 1.98;
         width > maxWidth && (width = maxWidth);

src/tool/util.js

@@ -5,7 +5,18 @@ const isEmail = (email) => {
 	let result = reg.test(email)
 	return result
 }
-
+function getUniversalZoomLevel() {
+	// 现代浏览器方案
+	if (window.visualViewport) {
+		return window.visualViewport.scale;
+	}
+	// 备用方案1
+	if (window.devicePixelRatio) {
+		return window.devicePixelRatio;
+	}
+	// 备用方案2（不精确）
+	return window.outerWidth / window.innerWidth;
+}
 const getUploadUrl = () => {
 	let url = process.env.VUE_APP_BASE_URL || ''
 	// let url = "http://18.167.251.121:10086"
@@ -569,6 +580,7 @@ function segmentImage(markerImage,fullImage,size){
 export {
 	isEmail,
 	getUploadUrl,
+	getUniversalZoomLevel,
 	rgbaToHex,
 	getMinioUrl,
 	base64ToFile,

src/views/HomeMain.vue

@@ -35,7 +35,7 @@
 								<div v-for="historyTypeItem in historyData.updateTimeType" :key="historyTypeItem">
 									<div class="timeType" v-if="historyTypeItem == 'Todaylist' && item.Todaylist.length>0">Today</div>
 									<div class="timeType" v-if="historyTypeItem == 'Yesterdaylist' && item.Yesterdaylist.length>0">Yesterday</div>
-									<div class="timeType" v-if="historyTypeItem == 'WithinAWeeklist' && item.WithinAWeeklist.length>0">Within a wseek</div>
+									<div class="timeType" v-if="historyTypeItem == 'WithinAWeeklist' && item.WithinAWeeklist.length>0">Within a week</div>
 									<div class="timeType" v-if="historyTypeItem == 'EarlierTodaylist' && item.EarlierTodaylist.length>0">Earlier</div>
 									<div v-for="childItem,index in item[historyTypeItem]" class="detailItem history" @click="setHistory(item,childItem)" :class="{active:openTypeChild == childItem.id}">
 										<div class="text" style="width: 100%;">
@@ -844,13 +844,13 @@ export default defineComponent({
             };
 			await Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
 				// WriteCookie("token");
+				clonAllCookie()
 			});
 			this.$router.replace("/");
 			this.store.commit('createDetail')
 			this.store.commit('createProbject')
 
 			// WriteCookie("token");
-			clonAllCookie()
 			// window.location.reload()
             
         },
@@ -983,6 +983,11 @@ export default defineComponent({
 				border-radius: 2rem;
 				&.history{
 					flex: 1;
+					> .detailBox{
+						>.detail{
+							min-height: 10rem;
+						}
+					}
 				}
 				> .titleBox{
 					padding: 1.2rem;
@@ -1027,7 +1032,6 @@ export default defineComponent({
 					> .detail{
 						position: relative;
 						height: 100%;
-						min-height: 10rem;
 						> img{
 							width: 100%;
 						}
@@ -1421,7 +1425,7 @@ export default defineComponent({
 						height: 6rem;
 						width: 6rem;
 						position: relative;
-						transform-origin: top;
+						// transform-origin: top;
 						overflow: hidden;
 						z-index: 2;
 						left: 0;
@@ -1429,9 +1433,10 @@ export default defineComponent({
 						cursor: pointer;
 						background: #fff;
 						img{
+							background: #000;
 							width: 100%;
 							height: 100%;
-							object-fit: contain;
+							object-fit: cover;
 						}
 						// transition: all .3s;
 					}

src/views/HomeView/Events.vue

@@ -123,7 +123,7 @@ export default defineComponent({
 		let {t} = useI18n()
 		let openEventsDetail = (item:any)=>{
 			let path = router.currentRoute._value.path.split('/')[1]
-			router.push(`/${path}/eventsDetail?id=${item.id}`)
+			router.push(`/${path}/eventsDetail?eventId=${item.id}`)
 			// router.push(`${path}?id=${item.id}`)
 		}
 		onMounted (()=>{
@@ -244,7 +244,7 @@ export default defineComponent({
 			display: flex;
 			flex-wrap: wrap;
 			.page_content_item{
-				max-width: 25%;
+				width: 25%;
 				padding: 2rem;
 				@media (max-width: 768px) {
 					max-width: 100%;
@@ -265,6 +265,7 @@ export default defineComponent({
 					color: #5f5f5f;
 				}
 				.page_content_item_title{
+					font-size: 1.6rem;
 					text-overflow: ellipsis; /* 显示省略号 */
 					overflow: hidden; /* 溢出隐藏 */
 					display: -webkit-box;

src/views/HomeView/Works.vue

@@ -10,7 +10,7 @@
 			<div v-show="!isScroll" class="modal_title_text_assistant gallery_btn white" :class="{active:'NewYear_2025' == worksSelect}" @click="setWorksSelect({value:'NewYear_2025'})">NewYear_2025</div>
 		</div> -->
         <div class="page_content" ref="autoscrollDom">
-			<Falls ref="fall" @loadend="isShowMark = false" @setPortfolioLike="setPortfolioLike" :isScroll="isScroll" @getImgScale="getImgScale"></Falls>
+			<Falls ref="fall" @loadend="isShowMark = false" :itemWidth="failWidth" @setPortfolioLike="setPortfolioLike" :isScroll="isScroll" @getImgScale="getImgScale"></Falls>
 			<div class="page_loading_box" v-show="!isNoData">
 				<span class="page_loading" v-show="!isShowMark"></span>
 				<span v-show="isShowMark">
@@ -72,6 +72,7 @@ export default defineComponent({
 		let filter:any = reactive({
 			worksSelect: 'all',
 			isNull:true,
+			failWidth:300,
 			worksType: [
 				{
 					name: useI18n().t('works.all'),
@@ -163,16 +164,57 @@ export default defineComponent({
 		}
 		let getImgScale = (item:any)=>{
 			let newScaleModel = null
-			if(window.innerWidth < 768){
+			if(getScreenOrientation() == 'landscape'){
-				newScaleModel = newScaleImageMobile
-			}else{
 				newScaleModel = newScaleImage
 				newScaleModel.value.scaleImageMask = true
-
+			}else{
+				newScaleModel = newScaleImageMobile
 			}
 			newScaleModel.value.init(item)
 			
 		}
+		function getScreenOrientation() {
+			// 优先使用标准API
+			if (screen.orientation) {
+				return screen.orientation.type.includes('portrait') ? 'portrait' : 'landscape';
+			}
+			// 回退到宽高比检测
+			return window.innerWidth > window.innerHeight ? 'landscape' : 'portrait';
+			}
+
+			// 监听方向变化
+			function setupOrientationListener(callback) {
+			// 标准事件
+			const handleOrientationChange = () => {
+				callback(getScreenOrientation());
+			};
+
+			// 优先使用标准API
+			if (screen.orientation) {
+				screen.orientation.addEventListener('change', handleOrientationChange);
+			} 
+			// 回退到resize事件
+			else {
+				window.addEventListener('resize', handleOrientationChange);
+			}
+			// 返回清除监听的方法
+			return () => {
+				if (screen.orientation) {
+				screen.orientation.removeEventListener('change', handleOrientationChange);
+				} else {
+				window.removeEventListener('resize', handleOrientationChange);
+				}
+			};
+			}
+			const cleanup = setupOrientationListener((orientation) => {
+				if (orientation === 'portrait') {
+					// 竖屏逻辑
+					return 'portrait'
+				} else {
+					// 横屏逻辑
+					return 'landscape'
+				}
+		});
 		let getPorfolio = ()=>{
 			let data = filter.getListDate
 			if(filter.isShowMark && !filter.isNoData)return
@@ -253,6 +295,7 @@ export default defineComponent({
 			{ immediate: true } // 立即触发一次以处理初始参数
 			);
 		onMounted (()=>{
+			if(window.innerWidth < 1200)filter.failWidth = 120
 			nextTick(()=>{
 				setPorfolioDom()
 			})