From e6e5308fd1087f7f83eea5b625cc276dd0d3f3b5 Mon Sep 17 00:00:00 2001
From: X1627315083 <1627315083@qq.com>
Date: Tue, 23 Apr 2024 11:54:53 +0800
Subject: [PATCH] fix

---
 src/component/Detail/DesignPrintOperation.vue |   2 +-
 src/component/HomePage/ColorboardUpload.vue   | 118 ++++++++++++++----
 2 files changed, 92 insertions(+), 28 deletions(-)

diff --git a/src/component/Detail/DesignPrintOperation.vue b/src/component/Detail/DesignPrintOperation.vue
index e0082b40..68be3558 100644
--- a/src/component/Detail/DesignPrintOperation.vue
+++ b/src/component/Detail/DesignPrintOperation.vue
@@ -13,7 +13,7 @@
             :mask="true"
         >
             <div class="designOpenrtion_content">
-				<div class="modal_title_text">
+				<div class="design_title_text">
 					<div>{{ $t('DesignPrintOperation.Placement') }}</div>
 				</div>
 				<div class="design_closeIcon" @click.stop="closeModal()">
diff --git a/src/component/HomePage/ColorboardUpload.vue b/src/component/HomePage/ColorboardUpload.vue
index cde5ed2d..51b51083 100644
--- a/src/component/HomePage/ColorboardUpload.vue
+++ b/src/component/HomePage/ColorboardUpload.vue
@@ -6,7 +6,7 @@
 			</div>
 			<div class="modal_img">
 				<div class="modal_img_item" v-for="color,index in colorList" :class="[ index == 1?'Guide_1_11_1':'',driver__.driver?'showEvents':'']" :key="color" >
-					<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`,'background-image':gradient(gradientArr)}">
+					<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`,'background-image':`linear-gradient(${gradient.angle}deg,${setGradient(gradient)})`}">
 					</div>
 				</div>
 				<div>
@@ -50,21 +50,24 @@
 							</div>
 						</div> -->
 						<div class="color_setting_operate">
-							<div class="color_setting_operate_item">
+							<div class="color_setting_operate_item color_setting_operate_control">
 								<div class="operate_item_box">
 									<div>线性</div>
 								</div>
-								<div class="operate_item_box">
-									<div>角度</div>
+								<div class="operate_item_box operate_item_angle">
+									<div class="operate_item_angle_box" @mousedown="mousedownGradientAngle($event)" @touchstart="mousedownGradientAngle($event)">
+										<div :style="{'transform':`rotate(${gradient.angle}deg)`}"></div>
+									</div>
+									<!-- <input type="number"> -->
 								</div>
 								<div class="operate_item_box">
 									<div>删除</div>
 								</div>
 							</div>
 							<div class="color_setting_operate_item color_setting_operate_input">
-								<div class="color_setting_operate_bg" :style="{'background-image':gradient(gradientArr)}">
+								<div class="color_setting_operate_bg" :style="{'background-image':`linear-gradient(90deg,${setGradient(gradient)})`}">
 								</div>
-								<div v-for="item in gradientArr" :key="item" class="color_setting_operate_btn" :style="{'left':item.left,'background-color':item.color}" @mousedown="mousedownGradient($event,item)" @touchstart="mousedownGradient"></div>
+								<div v-for="item,index in gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == gradient.selectIndex}" :style="{'left':item.left,'background-color':item.color}" @click="clickGradient(index)" @mousedown="mousedownGradient($event,item)" @touchstart="mousedownGradient($event,item)"></div>
 							</div>
 						</div>
                     </div>
@@ -164,15 +167,19 @@ export default defineComponent({
 		})
 		let driver__ = inject('driver__')
 		let {t} = useI18n()
-		let gradientArr = ref([
-			{
-				color:'rgb(244, 187, 51)',
-				left:'0%'
-			},{
-				color:'rgb(39, 193, 191)',
-				left:'100%'
-			},
-		])
+		let gradient = ref({
+			gradientList:[
+				{
+					color:'rgb(244, 187, 51)',
+					left:'0%'
+				},{
+					color:'rgb(39, 193, 191)',
+					left:'100%'
+				},
+			],
+			angle:45,
+			selectIndex:-1,
+		})
         return {
             fileList,
             colorList,
@@ -180,7 +187,7 @@ export default defineComponent({
 			selectColorList,
 			driver__,
 			t,
-			gradientArr,
+			gradient,
         }
     },
     watch:{
@@ -222,22 +229,22 @@ export default defineComponent({
                 return data
             }
         },
-		gradient(gradientArr){
-			return (gradientArr)=>{
+		setGradient(gradient){
+			return (gradient)=>{
 				let gradientStr = ''
-				gradientArr.sort((a, b) => {
+				gradient.gradientList.sort((a, b) => {
 					let aArr = a.left.split('%')[0]
 					let bArr = b.left.split('%')[0]
 					return aArr - bArr;
 				});
-				gradientArr.forEach((item,index)=>{
+				gradient.gradientList.forEach((item,index)=>{
 					let str = ','
-					if(gradientArr.length == index+1)str = ''
+					if(gradient.gradientList.length == index+1)str = ''
 					gradientStr += `${item.color} ${item.left}${str}` 
 
 				})
-				console.log('linear-gradient(50deg, '+gradientStr+')');
-				return 'linear-gradient(50deg, '+gradientStr+')'
+				console.log(`linear-gradient(${gradient.angle}deg, ${gradientStr})`);
+				return `${gradientStr}`
 			}
 			
 		}
@@ -560,12 +567,12 @@ export default defineComponent({
             this.selectColor = {rgba:this.colorList[0],hex:hex}, //顔色选择器默认颜色
             this.store.commit('setColorboardList',colorList)
         },
+		clickGradient(index){
+
+		},
 		mousedownGradient(event,item){
-			// console.log(event.target.getBoundingClientRect());
-			// console.log(event.target.style.left.split('%'));
 			event.stopPropagation();
 			// isMoible()  true为移动端
-			// if
 			let gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth
 			let position = {
 				x:event.x,
@@ -584,8 +591,33 @@ export default defineComponent({
 			window.addEventListener('mousemove',mousedownGradient)
 			window.addEventListener('mouseup',mouseupGradient)
 			// event.target.addEventListener('touchmove',)
+		},
+		mousedownGradientAngle(event){
+			event.stopPropagation();
+			// isMoible()  true为移动端
+			console.log(event.target.getBoundingClientRect());
+			let domPosition = event.target.getBoundingClientRect()
+			console.log(domPosition.x+domPosition.width/2);
+			let position = {
+				x:domPosition.x+domPosition.width/2,
+				y:domPosition.y+domPosition.height/2,
+			}
+			let angle = this.gradient.angle
+			let mousedownGradientAngle = (e)=>{
+				let X = position.x 
+				let Y = position.y
+				let x = e.x - X
+				let y = Y - e.y
+				angle = Math.atan2(x,y)*(180 / Math.PI)
+				this.gradient.angle = angle
+			}
+			let mouseupGradientAngle = ()=>{
+				window.removeEventListener('mousemove',mousedownGradientAngle)
+				window.removeEventListener('mouseup',mouseupGradientAngle)
+			}
+			window.addEventListener('mousemove',mousedownGradientAngle)
+			window.addEventListener('mouseup',mouseupGradientAngle)
 		}
-
     }
 })
 </script>
@@ -977,6 +1009,35 @@ export default defineComponent({
 							display: flex;
 							justify-content: space-around;
 						}
+						.color_setting_operate_control{
+							.operate_item_angle{
+								.operate_item_angle_box{
+									border-radius: 50%;
+									width: 4rem;
+									height: 4rem;
+									border: solid 2px #39215b;
+									display: flex;
+									align-items: center;
+									justify-content: center;
+									cursor: pointer;
+									>div{
+										height: 100%;
+										width: 1rem;
+										position: relative;
+										pointer-events:none;
+									}
+									>div::before{
+										position: absolute;
+										content: "";
+										top: 0.2rem;
+										width: 1rem;
+										height: 1rem;
+										border-radius: 50%;
+										background: #39215b;
+									}
+								}
+							}
+						}
 						.color_setting_operate_input{
 							width: 80%;
 							// padding: 0 10%;
@@ -1004,6 +1065,9 @@ export default defineComponent({
 							cursor: pointer;
 							box-sizing: content-box;
 							z-index: 2;
+							&.active{
+								border: .3rem solid;
+							}
 						}
 						.color_setting_operate_btn:hover{
 							border: .3rem solid;