fix

2024-05-22 10:45:52 +08:00
parent a757eebded
commit 5d7ccd08da
14 changed files with 652 additions and 338 deletions
--- a/src/component/HomePage/ColorboardUpload.vue
+++ b/src/component/HomePage/ColorboardUpload.vue
@@ -60,7 +60,7 @@
 									<div>Alignment</div>
 								</div>
 								<div class="operate_item_box operate_item_angle">
-									<div class="operate_item_angle_box" @mousedown="mousedownGradientAngle($event)" @touchstart="mousedownGradientAngle($event)">
+									<div class="operate_item_angle_box" @mousedown="mousedownGradientAngle($event,'mousedown')" @touchstart="mousedownGradientAngle($event,'touchstart')">
 										<div :style="{'transform':`rotate(${colorList[selectIndex].gradient.angle}deg)`}"></div>
 									</div>
 									<!-- <input type="number"> -->
@@ -72,7 +72,7 @@
 							<div class="color_setting_operate_item color_setting_operate_input">
 								<div class="color_setting_operate_bg" @click="addGradient($event)" :style="{'background-image':colorList[selectIndex]?.gradient?`linear-gradient(90deg,${setGradient(colorList[selectIndex].gradient)})`:'none'}">
 								</div>
-								<div v-for="item,index in colorList[selectIndex].gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == colorList[selectIndex].gradient.selectIndex}" :style="{'left':item.left,'background-color':`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`}" @mousedown="mousedownGradient($event,item,index)" @touchstart="mousedownGradient($event,item,index)"></div>
+								<div v-for="item,index in colorList[selectIndex].gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == colorList[selectIndex].gradient.selectIndex}" :style="{'left':item.left,'background-color':`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`}" @mousedown="mousedownGradient($event,item,index,'mousedown')" @touchstart="mousedownGradient($event,item,index,'touchstart')"></div>
 							</div>
 						</div>
                    </div>
@@ -163,6 +163,7 @@ export default defineComponent({
 		Sketch,
    },
    setup(){
+		// console.log(isMoible());
        let fileList = ref([])
        let colorList = ref([{},{},{},{},{},{},{},{}])
        let selectColor = ref({
@@ -621,7 +622,13 @@ export default defineComponent({
 			if(this.colorList[this.selectIndex].gradient.gradientList.length <= 2)return
 			this.colorList[this.selectIndex].gradient.gradientList.splice(this.colorList[this.selectIndex].gradient.selectIndex,1)
 		},
-		mousedownGradient(event,item,index){
+		mousedownGradient(event,item,index,str){
+			let moible = isMoible()
+			if(moible && str == 'mousedown'){
+				return
+			}else if(!moible && str == 'touchstart'){
+				return
+			}
 			event.stopPropagation();
 			this.colorList[this.selectIndex].gradient.selectIndex = index
 			let gradientRgba = item.rgba
@@ -631,23 +638,39 @@ export default defineComponent({
 			// isMoible()  true为移动端
 			let gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth
 			let position = {
-				x:event.x,
+				x:moible?event.touches[0].screenX:event?.x,
 				left:event.target.style.left?event.target.style.left.split('%')[0]:0
 			}
 			let mousedownGradient = (e)=>{
-				let left = (e.x - position.x)/gradientWidth*100+Number(position.left)
+				let left = ((moible?e.touches[0].screenX:e.x) - position.x)/gradientWidth*100+Number(position.left)
 				left = (left<0?0:left>100?100:left)
 				item.left = left+'%'
 			}
 			let mouseupGradient = ()=>{
-				window.removeEventListener('mousemove',mousedownGradient)
-				window.removeEventListener('mouseup',mouseupGradient)
+				if(moible){
+					window.removeEventListener('touchmove',mousedownGradient)
+					window.removeEventListener('touchend',mouseupGradient)
+				}else{
+					window.removeEventListener('mousemove',mousedownGradient)
+					window.removeEventListener('mouseup',mouseupGradient)
+				}
+			}
+			if(moible){
+				window.addEventListener('touchmove',mousedownGradient)
+				window.addEventListener('touchend',mouseupGradient)
+			}else{
+				window.addEventListener('mousemove',mousedownGradient)
+				window.addEventListener('mouseup',mouseupGradient)
 			}
-			window.addEventListener('mousemove',mousedownGradient)
-			window.addEventListener('mouseup',mouseupGradient)
 			// event.target.addEventListener('touchmove',)
 		},
-		mousedownGradientAngle(event){
+		mousedownGradientAngle(event,str){
+			let moible = isMoible()
+			if(moible && str == 'mousedown'){
+				return
+			}else if(!moible && str == 'touchstart'){
+				return
+			}
 			event.stopPropagation();
 			// isMoible()  true为移动端
 			let domPosition = event.target.getBoundingClientRect()
@@ -656,22 +679,33 @@ export default defineComponent({
 				y:domPosition.y+domPosition.height/2,
 			}
 			let angle
+
 			let mousedownGradientAngle = (e)=>{
 				let X = position.x 
 				let Y = position.y
-				let x = e.x - X
-				let y = Y - e.y
+				let x = (moible?e.touches[0].clientX:e?.x) - X
+				let y = Y -( moible?e.touches[0].clientY:e?.y)
 				angle = Math.atan2(x,y)*(180 / Math.PI)
 				// this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
 				this.colorList[this.selectIndex].gradient.angle = angle

 			}
 			let mouseupGradientAngle = ()=>{
-				window.removeEventListener('mousemove',mousedownGradientAngle)
-				window.removeEventListener('mouseup',mouseupGradientAngle)
+				if(moible){
+					window.removeEventListener('touchmove',mousedownGradientAngle)
+					window.removeEventListener('touchend',mouseupGradientAngle)
+				}else{
+					window.removeEventListener('mousemove',mousedownGradientAngle)
+					window.removeEventListener('mouseup',mouseupGradientAngle)
+				}
+			}
+			if(moible){
+				window.addEventListener('touchmove',mousedownGradientAngle)
+				window.addEventListener('touchend',mouseupGradientAngle)
+			}else{
+				window.addEventListener('mousemove',mousedownGradientAngle)
+				window.addEventListener('mouseup',mouseupGradientAngle)
 			}
-			window.addEventListener('mousemove',mousedownGradientAngle)
-			window.addEventListener('mouseup',mouseupGradientAngle)
 		},
 		setOperate(){
 			// this.colorList[this.selectIndex]
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -52,6 +52,7 @@
 					:maxlength='inputShow?0:9999'
 					v-model="searchPictureName"
 					@keydown.enter="getgenerate()"
+					@click="inputFocus()"
 				/>
 				<i class="icon iconfont icon-xiala" :class="{active:isTextarea}" @click.stop="setTextareaShow"></i>
 				<textarea 
@@ -67,7 +68,7 @@
 					{{ $t('Generate.Generate') }}
 					<!-- <div v-show="isGenerate"><a-spin size="large" /></div> -->
 				</div>
-				<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
+				<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" @click="getgenerate">
 					<i class="fi fi-br-loading"></i>
 				</div>
 				<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn">
@@ -75,7 +76,23 @@
 				</div>
 				<span ref="inputShowText"></span>
 			</div>
-            
+            <div class="search_keyword" v-show="isInputFocus" @click.stop="">
+				<div class="search_keyword_center">
+					<div class="search_keyword_center_left">
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+						<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
+					</div>
+				</div>
+			</div>
        </div>
        <div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img Guide_1_6">
            <div class="upload_item">
@@ -311,7 +328,8 @@ export default defineComponent({
                type2: prop.msg,
            },
 			workspaceCom:{},
-			isTextarea:false
+			isTextarea:false,
+			isInputFocus:false,
        };
    },
 	
@@ -650,6 +668,9 @@ export default defineComponent({
 		},
 		setTextareaShow(){
 			this.isTextarea = !this.isTextarea
+		},
+		cliSetKeyword(){
+			
 		},
 		ifMaximumLength(){
 			clearTimeout(this.inputTime)
@@ -666,7 +687,17 @@ export default defineComponent({
 				}
 			},500)
 		},
-		
+		inputFocus(){
+			if(this.isInputFocus) return
+		    this.isInputFocus = true
+			let setDomCli = ()=>{
+				this.isInputFocus = false
+				document.removeEventListener('click',setDomCli)
+			}
+			setTimeout(()=>{
+				document.addEventListener('click',setDomCli)
+			},200)
+		},
        fileUploadChange(data: any) {
            let file = data.file;
 			let bor = true
--- a/src/component/HomePage/layout.vue
+++ b/src/component/HomePage/layout.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
 	<a-modal
-            class="layout_modal"
+            class="layout_modal generalModel"
            v-model:visible="layout"
            :footer="null"
            width="78%"
@@ -18,8 +18,10 @@
 						<div class="layout_title">{{ $t('layout.MoodBoardDesign') }}</div>
 					</div>
 				</div>
-				<div class="collection_closeIcon" @click.stop="cancelDsign()">
-					<i class="fi fi-rr-cross-small"></i>
+				<div class="generalModel_btn">
+					<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+						<i class="fi fi-rr-cross-small"></i>
+					</div>
 				</div>
 				<div class="layout_nav">
 					<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @mousedown="setpitch(item,index)">
@@ -641,16 +643,6 @@ export default defineComponent({

 <style lang="less">
 .layout_modal {
-	-moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    -khtml-user-select: none;
-    user-select: none;
-	.ant-modal-content{
-		// transform: scale(1.2);
-		// transform-origin: center !important;
-	}
-	// max-width: 1150px;
    .ant-modal-body {
        padding: 0;
 		// height: calc(65vh - 6.4rem);
@@ -681,29 +673,7 @@ export default defineComponent({
 				color: rgba(0,0,0,.45);
 			}
 		}
-		.collection_closeIcon{
-			position: absolute;
-			top: calc(2rem*1.2);
-			right: calc(2rem*1.2);
-			cursor: pointer;
-			width: calc(4rem*1.2);
-			height: calc(4rem*1.2);
-			display: flex;
-			align-items: center;
-			justify-content: center;
-
-			.fi-rr-cross-small::before{
-				padding: calc(.2rem*1.2);
-				border-radius: 5px;
-				border: solid 2px rgba(0, 0, 0, 0.25);
-				transition: 1s all;
-				color: rgba(0, 0, 0, 0.55);
-			}
-			&.collection_closeIcon:hover .fi-rr-cross-small::before{
-				border: solid 2px rgba(0, 0, 0, 0.55);
-				color: rgba(0, 0, 0, 1);
-			}
-		}
+		
 		.layout_nav{
 			display: flex;
 			margin-top: calc(2rem*1.2);
--- a/src/component/HomePage/layoutMobile.vue
+++ b/src/component/HomePage/layoutMobile.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
 	<a-modal
-            class="layoutMobile_modal"
+            class="layoutMobile_modal generalModel"
            v-model:visible="layout"
            :footer="null"
            width="78%"
@@ -18,8 +18,10 @@
 						<div class="layoutMobile_title">{{ $t('layout.MoodBoardDesign') }}</div>
 					</div>
 				</div>
-				<div class="collection_closeIcon" @touchstart.stop="cancelDsign()">
-					<i class="fi fi-rr-cross-small"></i>
+				<div class="generalModel_btn">
+					<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+						<i class="fi fi-rr-cross-small"></i>
+					</div>
 				</div>
 				<div class="layoutMobile_nav">
 					<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @touchstart.stop="setpitch(item,index)">
@@ -672,25 +674,9 @@ export default defineComponent({

 <style lang="less">
 .layoutMobile_modal {
-	-moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    -khtml-user-select: none;
-    user-select: none;
-	.ant-modal-content{
-		// transform: scale(1.2);
-		// transform-origin: center !important;
-	}
-	// max-width: 1150px;
-    .ant-modal-body {
-        padding: 0;
-		// height: calc(65vh - 6.4rem);
-		height: calc(65rem*1.2);
-    }
 	.ant-modal-content{
 		border-radius: calc(1rem*1.2);
 	}
-
    .layoutMobile_content {
        // background: #f2f3fb;
        // padding-bottom: 2.9rem*1.2);
@@ -712,29 +698,7 @@ export default defineComponent({
 				color: rgba(0,0,0,.45);
 			}
 		}
-		.collection_closeIcon{
-			position: absolute;
-			top: calc(2rem*1.2);
-			right: calc(2rem*1.2);
-			cursor: pointer;
-			width: calc(4rem*1.2);
-			height: calc(4rem*1.2);
-			display: flex;
-			align-items: center;
-			justify-content: center;
-
-			.fi-rr-cross-small::before{
-				padding: calc(.2rem*1.2);
-				border-radius: 5px;
-				border: solid 2px rgba(0, 0, 0, 0.25);
-				transition: 1s all;
-				color: rgba(0, 0, 0, 0.55);
-			}
-			&.collection_closeIcon:hover .fi-rr-cross-small::before{
-				border: solid 2px rgba(0, 0, 0, 0.55);
-				color: rgba(0, 0, 0, 1);
-			}
-		}
+	
 		.layoutMobile_nav{
 			display: flex;
 			margin-top: calc(2rem*1.2);
--- a/src/component/HomePage/scaleImage.vue
+++ b/src/component/HomePage/scaleImage.vue
@@ -1,6 +1,6 @@
 <template>
 		<a-modal
-            class="scaleImage_modal"
+            class="scaleImage_modal generalModel"
            v-model:visible="scaleImage"
            :footer="null"
            width="78%"
@@ -11,11 +11,11 @@
 			:keyboard="false"
 			:destroyOnClose="true"
        >
-		<div class="scaleImage_btn">
-			<div class="collection_closeIcon left" @click.stop="cancelDsign()">
+		<div class="generalModel_btn">
+			<div class="generalModel_closeIcon left" @click.stop="cancelDsign()">
 				<i class="fi fi-rr-cross-small"></i>
 			</div>
-			<div class="collection_closeIcon" @click.stop="download()">
+			<div class="generalModel_closeIcon" @click.stop="download()">
 				<i class="fi fi-rr-down-to-line"></i>
 			</div>
 		</div>
@@ -168,62 +168,10 @@ export default defineComponent({

 <style lang="less">
 .scaleImage_modal {
-	-moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    -khtml-user-select: none;
-    user-select: none;
-	position: relative;
-	border-radius: 1rem;
-	overflow: hidden;
 	.ant-modal-body {
-        padding: 0;
-		// height: calc(65vh - 6.4rem);
-		height: calc(65rem*1.2);
-		// background-color: #181818;
 		display: flex;
 		flex-direction: column;
    }
-	.ant-modal-btn{
-		
-	}
-	.fi-rr-down-to-line,.fi-rr-arrow-small-right,.fi-rr-arrow-small-left{
-		font-size: 2rem;
-	}
-    .scaleImage_btn {
-		.collection_closeIcon{
-			position: absolute;
-			top: calc(2rem*1.2);
-			right: calc(2rem*1.2);
-			cursor: pointer;
-			width: calc(4rem*1.2);
-			height: calc(4rem*1.2);
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			&.left{
-				left: calc(2rem*1.2);
-			}
-			.fi-rr-cross-small::before{
-				padding: calc(.2rem*1.2);
-				border-radius: 5px;
-				border: solid 2px rgba(0, 0, 0, 0.22);
-				transition: .3s all;
-				color: rgba(0, 0, 0, 0.7);
-			}
-			&.collection_closeIcon:hover .fi-rr-cross-small::before{
-				border: solid 2px rgba(0, 0, 0, 5);
-				color: rgba(0, 0, 0, 1);
-			}
-			.fi-rr-down-to-line{
-				transition: .3s all;
-				color: rgba(0, 0, 0, .5);
-			}
-			.fi-rr-down-to-line:hover{
-				color: rgba(0, 0, 0, 1);
-			}
-		}
-	}
 	.scaleImage_content{
 		display: flex;
 		justify-content: center;