注释渐变色功能和作品广场

2024-05-16 09:41:16 +08:00
parent 4d86e782e6
commit 051b9e4f38
24 changed files with 1561 additions and 262 deletions
--- a/src/component/Detail/DesignDetail.vue
+++ b/src/component/Detail/DesignDetail.vue
@@ -107,8 +107,9 @@
 							</div>
 							<div class="img_block_item centent" @click.stop="openCurrent(3)">
 								<div class="color_item">
-									<div class="color_content" :style="{background:`rgba(${current?.color?.r},${current?.color?.g},${current?.color?.b},${current?.color?.a?current?.color.a:1})`}"></div>
-									<div class="color_content_body">
+									<div v-if="!current?.gradient" class="color_content" :style="{background:`rgba(${current?.color?.r},${current?.color?.g},${current?.color?.b},${current?.color?.a?current?.color.a:1})`}"></div>
+									<div class="color_content" v-else :style="{height:'10rem','background-image':current?.gradient?`linear-gradient(${current?.gradient.angle}deg,${setGradient(current?.gradient)}`:'none'}"></div>
+									<div v-if="!current?.gradient" class="color_content_body">
 										<div class="color_des">{{current?.color?.tcx}}</div>
 										<div class="color_des">{{current?.color?.name}}</div>
 									</div>
@@ -155,7 +156,7 @@ import Draggable from 'vuedraggable'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { Https } from "@/tool/https";
 import { Modal,message } from 'ant-design-vue';
-import {getUploadUrl,isMoible} from '@/tool/util'
+import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
 import { useStore } from "vuex";
 import { openGuide,driverObj__ } from "@/tool/guide";
 import GO from '@/tool/GO';
@@ -254,6 +255,25 @@ export default defineComponent({
 			designOrder:false,
        }
    },
+	computed:{
+		setGradient(){
+			return (gradient)=>{
+				let gradientStr = ''
+				gradient.gradientList.sort((a, b) => {
+					let aArr = a.left.split('%')[0]
+					let bArr = b.left.split('%')[0]
+					return aArr - bArr;
+				});
+				gradient.gradientList.forEach((item,index)=>{
+					let str = ','
+					if(gradient.gradientList.length == index+1)str = ''
+					gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` 
+
+				})
+				return `${gradientStr}`
+			}
+		},
+	},
 	watch:{
 		designItemDetail:{
 			handler: async function(newVal,oldVal) {
@@ -647,10 +667,11 @@ export default defineComponent({
 			let num = -1
 			// let zIndex = 10
 			designItemDetail.clothes.forEach((item:any,index:number) => {
-				let clothesItem = {
+				let clothesItem:any = {
 					color: `${item.color.r} ${item.color.g} ${item.color.b}`,
 					id:item.id,
 					path:item.minIOPath,
+					gradient:{},
 					changed:item.changed?item.changed:false,
 					designType:item.designType?item.designType:"Library",
 					offset:item.layersObject?.[1]?.offset == null?[0,0]:item.layersObject[1].offset,
@@ -663,6 +684,13 @@ export default defineComponent({
 					priority:item.priority,
 					type:item.type,
 				}
+				if(item.gradient){
+					let gradient = item.gradient
+					gradient.colorImg = setGradual(item.gradient,320,700)
+					clothesItem.gradient = item.gradient
+				}else{
+					delete clothesItem.gradient
+				}
 				if(!item.id && sub){
 					num = index
 				}else{
@@ -877,9 +905,10 @@ export default defineComponent({
 			this.designItemDetail.clothes.forEach((item:any)=>{
 				item.clothesOpen = false
 			})
-			let color
+			let color,gradient
 			if(this.designItemDetail.clothes[0]){
 				color = this.designItemDetail.clothes[0].color
+				gradient = this.designItemDetail.clothes[0].gradient
 			}else{
 				color = {
 					"id": '',
@@ -900,6 +929,7 @@ export default defineComponent({
 				"path": "",
 				"minIOPath": "",
 				"color": color,
+				gradient:gradient,
 				"printObject": {
 					"ifSingle": null,
 					"prints": [
@@ -956,6 +986,7 @@ export default defineComponent({
 			}
 			data.designSingleItemDTOList[this.currentIndex] = {
 				color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`,
+
 				id:this.current.id?this.current.id:'',
 				changed:this.current.changed?this.current.changed:false,
 				designType:this.current.designType?this.current.designType:'Library',
--- a/src/component/Detail/DesignDetailAlter.vue
+++ b/src/component/Detail/DesignDetailAlter.vue
@@ -190,6 +190,31 @@
 							</div>
 							
 						</div> -->
+						<!-- <div class="color_setting_operateSingle">
+							<div class="started_btn" @click="setOperate">
+								{{ colorList[selectIndex]?.gradient?.gradientList>1? 'Gradual Change':'Single'}}
+							</div>
+						</div> -->
+						<div class="color_setting_operate" v-if="colorList[selectIndex]?.gradient?.gradientShow">
+							<div class="color_setting_operate_item color_setting_operate_control">
+								<div class="operate_item_box">
+									<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 :style="{'transform':`rotate(${colorList[selectIndex].gradient.angle}deg)`}"></div>
+									</div>
+								</div>
+								<div class="operate_item_box operate_item_delete">
+									<i class="fi fi-rr-trash" @click="deleteGradientItem"></i>
+								</div>
+							</div>
+							<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>
+						</div>
                    </div>
                </div>

@@ -285,6 +310,7 @@ export default defineComponent({
 		let openClick = ref(1);
 		let searchPictureName = ref('')
 		
+		
 		let total = ref(0)
        let pageSize = ref(10)
        let currentPage = ref(1)
@@ -305,6 +331,34 @@ export default defineComponent({
 		let sketchCatecoryList = computed(()=>{
 			return store.state.Workspace.workspacePosition
 		})
+		let colorList = ref([{},{},{},{},{},{},{},{},{}])
+		let selectIndex = ref(0)
+		let gradient = ref({
+			gradientList:[
+				{
+					rgba:{
+						r:117,
+						g:119,
+						b:255,
+						a:1,
+					},
+					left:'0%'
+				},{
+					rgba:{
+						r:0,
+						g:222,
+						b:152,
+						a:1,
+					},
+					left:'100%'
+				},
+			],
+			angle:45,
+			selectIndex:-1,
+			gradientShow:false,
+		})
+		provide('colorList',colorList)
+		provide('selectIndex',selectIndex)
 		let {t} = useI18n()
        return{
            store,
@@ -329,6 +383,9 @@ export default defineComponent({
 			driver__,
 			body,
 			sketchCatecoryList,
+			colorList,
+			selectIndex,
+			gradient,
 			t,
        }
    },
@@ -362,7 +419,6 @@ export default defineComponent({
            tcxColor:'',
 			selectColorList: [],
 			colorFileList: [],
-			selectIndex:0,
 			indicator : h(LoadingOutlined, {
                style: {
                    fontSize: '2.4rem',
@@ -416,22 +472,63 @@ export default defineComponent({
                return data
            }
        },
+		setGradient(){
+			// return this.setGradientAngle(gradient)
+			return (gradient)=>{
+				let gradientStr = ''
+				gradient.gradientList.sort((a, b) => {
+					let aArr = a.left.split('%')[0]
+					let bArr = b.left.split('%')[0]
+					return aArr - bArr;
+				});
+				gradient.gradientList.forEach((item,index)=>{
+					let str = ','
+					if(gradient.gradientList.length == index+1)str = ''
+					gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` 
+
+				})
+				return `${gradientStr}`
+			}
+			
+		}
    },
 	mounted(){
 	},
 	watch:{
-        selectColor(newVal,oldVal){
-			let DesignDetailEnd = this.$refs.DesignDetailEnd
-            DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = newVal
-            let colorList = DesignDetailEnd.colorList.filter((v) => v && Object.keys(v).length)
-            this.setColorboardList(colorList)
+        // selectColor(newVal,oldVal){
+        //     this.colorList[this.selectIndex] = newVal
+        //     let colorList = this.colorList.filter((v) => v && Object.keys(v).length)


-			clearInterval(this.getPantongNameTime)
-			this.getPantongNameTime = setTimeout(() => {
-				this.getPantongName(newVal.rgba)
-			}, 100);
-        },
+		// 	clearInterval(this.getPantongNameTime)
+		// 	this.getPantongNameTime = setTimeout(() => {
+		// 		this.getPantongName(newVal.rgba)
+		// 	}, 100);
+        // },
+		selectColor:{
+			handler(newVal,oldVal){
+				if(typeof newVal?.rgba?.r !== 'number' && typeof newVal?.rgba?.r !== 'string'){
+					this.colorList[this.selectIndex] = {}
+					return	
+				}
+				this.colorList[this.selectIndex].rgba = newVal.rgba
+				this.colorList[this.selectIndex].hex = newVal.hex
+				if(this.colorList[this.selectIndex]?.gradient && this.colorList[this.selectIndex]?.gradient?.selectIndex>-1 && this.colorList[this.selectIndex]?.gradient?.gradientShow){
+					this.colorList[this.selectIndex].gradient.gradientList[this.colorList[this.selectIndex].gradient.selectIndex].rgba = {
+						r:newVal.rgba.r,
+						g:newVal.rgba.g,
+						b:newVal.rgba.b,
+						a:1,
+					}
+				}
+				// console.log(JSON.parse(JSON.stringify(this.colorList)),JSON.parse(JSON.stringify(newVal)));
+				clearInterval(this.getPantongNameTime)
+				this.getPantongNameTime = setTimeout(() => {
+					this.getPantongName(newVal.rgba)
+				}, 100);
+			},
+			immediate: true
+		},
 		workspaceCom(newVal,oldVal){
 			this.workspace = newVal
 			this.upload.gender = newVal?.sexEnum?.name
@@ -480,7 +577,8 @@ export default defineComponent({
 					b:Number(arr.b),
 					a:Number(arr.a?arr.a:1),
 				},
-				hex:this.rgbaToHex([arr.r,arr.g,arr.b,arr.a?arr.a:1])
+				hex:this.rgbaToHex([arr.r,arr.g,arr.b,arr.a?arr.a:1]),
+				gradient:this.current.gradient
 			}
 			this.uploadList = []
 			if (num == 1) {
@@ -496,6 +594,19 @@ export default defineComponent({
 				this.clothesList = []
 				this.getLibraryList()
 			}
+			this.store.state.UploadFilesModule.allBoardData.colorBoards.forEach((item,index) => {
+			    this.colorList[index+1] = {
+					gradient:item.gradient,
+					rgba:item.rgbValue,
+					tcx:item.tcx,
+					name:item.name,
+				}
+				if(item.gradient){
+					this.colorList[index+1].gradient = item.gradient
+				}else{
+					delete this.colorList[index+1].gradient
+				}
+			})
 			let DesignDetailEnd = this.$refs.DesignDetailEnd
 			DesignDetailEnd.init(num)
 			this.workspaceCom = computed(()=>{
@@ -567,7 +678,7 @@ export default defineComponent({
 		terminate(){
 			let DesignDetailEnd = this.$refs.DesignDetailEnd
 			this.select = false
-			DesignDetailEnd.selectIndex = 0
+			this.selectIndex = 0
 			DesignDetailEnd.type_ = 0
 			this.colorFileList = []
 			this.selectColorList = []
@@ -581,7 +692,7 @@ export default defineComponent({
 			this.uploadList = []
 			this.apparelList = []
 			this.printList = []
-			DesignDetailEnd.colorList = [{},{},{},{},{},{},{},{},{}]
+			this.colorList = [{},{},{},{},{},{},{},{},{}]
 			// DesignDetailEnd.colorList = [{}]
 			DesignDetailEnd.sketchImg={}
 			this.terminate()
@@ -749,7 +860,92 @@ export default defineComponent({
            ).catch(res=>{
            });
        },
+		setOperate(){
+			console.log(this.selectColor);
+			this.selectColor.rgba = this.selectColor?.rgba?.r?this.selectColor.rgba:{r:0,g:0,b:0,a:1}
+			this.gradient.selectIndex = 0
+			this.gradient.gradientShow = true
+			this.colorList[this.selectIndex].rgba = this.selectColor.rgba
+			if(!this.colorList[this.selectIndex].gradient){
+				if(this.selectColor.rgba.r){
+					this.gradient.gradientList[this.gradient.selectIndex].rgba = {
+						r:this.selectColor.rgba.r,
+						g:this.selectColor.rgba.g,
+						b:this.selectColor.rgba.b,
+						a:1,
+					}
+				}
+				this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
+			}else{
+				this.selectColor = {rgba:this.colorList[this.selectIndex].gradient.gradientList[0].rgba}
+				this.colorList[this.selectIndex].gradient = ''
+			}
+			let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
+		},
+		mousedownGradient(event,item,index){
+			event.stopPropagation();
+			this.colorList[this.selectIndex].gradient.selectIndex = index
+			let gradientRgba = item.rgba
+			let rgba = [gradientRgba.r,gradientRgba.g,gradientRgba.b,gradientRgba.a?gradientRgba.a:1]
+			let hex = this.rgbaToHex(rgba)
+            this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
+			// isMoible()  true为移动端
+			let gradientWidth = document.querySelector('.detail_modal_body_select .color_setting_operate_bg').clientWidth
+			let position = {
+				x: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)
+				left = (left<0?0:left>100?100:left)
+				item.left = left+'%'
+			}
+			let mouseupGradient = ()=>{
+				window.removeEventListener('mousemove',mousedownGradient)
+				window.removeEventListener('mouseup',mouseupGradient)
+			}
+			window.addEventListener('mousemove',mousedownGradient)
+			window.addEventListener('mouseup',mouseupGradient)
+			// event.target.addEventListener('touchmove',)
+		},
+		mousedownGradientAngle(event){
+			event.stopPropagation();
+			// isMoible()  true为移动端
+			let domPosition = event.target.getBoundingClientRect()
+			let position = {
+				x:domPosition.x+domPosition.width/2,
+				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
+				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)
+			}
+			window.addEventListener('mousemove',mousedownGradientAngle)
+			window.addEventListener('mouseup',mouseupGradientAngle)
+		},
+		deleteGradientItem(){
+			if(this.colorList[this.selectIndex].gradient.gradientList.length <= 2)return
+			this.colorList[this.selectIndex].gradient.gradientList.splice(this.colorList[this.selectIndex].gradient.selectIndex,1)
+		},
+		addGradient(event){
+			let gradientWidth = event.target.clientWidth
+			let left = event.offsetX/gradientWidth
+			this.colorList[this.selectIndex].gradient.gradientList.push({
+				rgba:this.selectColor.rgba,
+				left:left.toFixed(2)*100+'%'
+			})
+		},
   //通过tcx获取颜色
 		getTcxColor(){
            if(!this.tcxColor){
@@ -764,10 +960,9 @@ export default defineComponent({
 						let hex = this.rgbaToHex([rv.r,rv.g,rv.b,rv.a? rv.a :1])
 						this.reviewColor = rv?.r + ''? {rgba:{r:rv.r,g:rv.g,b:rv.b,a:1},hex:hex} : {hex:''}
 						this.selectColor  = this.reviewColor
-						DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] =  {r:rv.r, g:rv.g, b:rv.b}
+						this.colorList[this.selectIndex] =  {r:rv.r, g:rv.g, b:rv.b}
 						this.pantongName = rv.name
-						let colorList =DesignDetailEnd.colorList.filter((v) => Object.keys(v).length)
-						this.setColorboardList(colorList)
+						let colorList =this.colorList.filter((v) => Object.keys(v).length)
 						this.getColorBg = true
 					}else{
 						message.info(this.t('DesignDetailAlter.jsContent6'))
@@ -794,8 +989,8 @@ export default defineComponent({
 				Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
 					.then((rv) => {
 						if (rv) {
-							this.selectColor.tcx = rv[0].tcx
-							this.selectColor.name = rv[0].name
+							this.colorList[this.selectIndex].tcx = rv[0].tcx
+							this.colorList[this.selectIndex].name = rv[0].name
 							resolve();
 						}
 					})
@@ -804,19 +999,7 @@ export default defineComponent({
 					});
 			});
 		},
-		setColorboardList(colorList){
-			
-            let  newColorList = colorList.map((v)=>{
-                let data = {
-                    id:'',
-                    name:'',
-                    rgbValue:v
-                }
-				
-                return data
-            })
-
-        },
+	
        fileUploadChange(data){
            let file = data.file
            let fileData = file.originFileObj
@@ -1129,6 +1312,7 @@ export default defineComponent({

 	.detail_color{
 		// height: calc(100% - 5.4rem*1.2));
+		&.detail_color::-webkit-scrollbar{display: none;}
 		height: 100%;
 		overflow-y: auto;
 		overflow-x: hidden;
@@ -1273,10 +1457,9 @@ export default defineComponent({
 				}
 			}
 			.color_setting_block{
-				width: calc(17.5rem*1.2);
 				margin: auto;
 				background: linear-gradient(70deg, #eee4f3, #f3f4e6);
-
+				width: 24rem;
 				border-radius: calc(1rem*1.2);
 				overflow: hidden;
 				// box-shadow: 2px 2px 8px #000;
@@ -1286,14 +1469,15 @@ export default defineComponent({
 					box-shadow:none;
 				}
 				.chrome_color{
-					width: calc(17.5rem*1.2);
+					width: 24rem;
 					// height: 16.5rem*1.2);
 					overflow: hidden;

 					.vc-chrome-saturation-wrap{
 						height: 100%;
-						width: calc(16rem*1.2);
-						height: calc(16rem*1.2);
+						// width: calc(16rem*1.2);
+						width: 100%;
+						height: calc(14rem*1.2);
 						max-height: calc(17rem*1.2);
 						max-width: calc(17rem*1.2);
 						margin: calc(.7rem*1.2) auto;
@@ -1424,6 +1608,98 @@ export default defineComponent({
 						height: calc(1rem*1.2);
 					}
 				}
+				.color_setting_operateSingle{
+						text-align: center;
+						margin: 1rem 0;
+					}
+					.color_setting_operate{
+						*{
+							-webkit-touch-callout: none; /* iOS Safari */
+							-webkit-user-select: none; /* Safari */
+							-moz-user-select: none; /* Firefox */
+							-ms-user-select: none; /* Internet Explorer/Edge */
+							user-select: none;
+						}
+						.color_setting_operate_item{
+							display: flex;
+							justify-content: space-around;
+							align-items: center;
+							.operate_item_box{
+							}
+						}
+						.color_setting_operate_control{
+							.operate_item_delete,.operate_item_angle{
+								cursor: pointer;
+							}
+							.operate_item_delete{
+								i{
+								display: flex;
+									font-size: 3rem;
+								}
+							}
+							.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%;
+							margin: 1.2rem 10%;
+							border-radius: 10%;
+							position: relative;
+							height: 2.5rem;
+							.color_setting_operate_bg{
+								border-radius: .5rem;
+								width: 100%;
+								height: 2.5rem;
+								background: #fff;
+								position: absolute;
+							}
+						}
+						.color_setting_operate_btn{
+							position: absolute;
+							top: 50%;
+							transform: translate(-50%,-50%);
+							left: 0;
+							width: 1rem;
+							height: 110%;
+							border: .2rem solid;
+							border-radius: .5rem;
+							cursor: pointer;
+							box-sizing: content-box;
+							z-index: 2;
+							&.active{
+								border: .3rem solid;
+							}
+						}
+						.color_setting_operate_btn:hover{
+							border: .3rem solid;
+						}
+					}

 				.sileder_color{
 					margin-top:calc(1.3rem*1.2);
--- a/src/component/Detail/DesignDetailEnd.vue
+++ b/src/component/Detail/DesignDetailEnd.vue
@@ -73,9 +73,10 @@
 			<div class="modal_img">
 				<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
 					<div :title="color?.name?color?.name:''" @click="selectColorItem(index,color)" @dblclick="setSelectColorItem(color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
-						<div class="color_content" :style="{'background-color':`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`}">
+						<div v-if="!color?.gradient" class="color_content" :style="{'background-color':`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`}">
 						</div>
-						<div class="color_content_body">
+						<div class="color_content" v-else :style="{height:'100%','background-image':color?.gradient?`linear-gradient(${color?.gradient.angle}deg,${setGradient(color?.gradient)}`:'none'}"></div>
+						<div v-if="!color?.gradient" class="color_content_body">
 							<div class="color_des">{{color.tcx}}</div>
 							<div class="color_des">{{ color.name }}</div>
 						</div>
@@ -103,7 +104,7 @@ import DesignPrintOperation from './DesignPrintOperation.vue';
 import DesignPrintOperationMobile from './DesignPrintOperationMobile.vue';
 import { message,Upload} from 'ant-design-vue';
 import { openGuide,driverObj__ } from "@/tool/guide";
-import {isMoible} from '@/tool/util'
+import {isMoible,setGradual} from '@/tool/util'
 import { useI18n } from 'vue-i18n';

 export default defineComponent({
@@ -128,8 +129,9 @@ export default defineComponent({

 		//颜色
 		// let colorList = ref([{}])
-		let colorList = ref([{},{},{},{},{},{},{},{},{}])
-
+		// let colorList = ref([{},{},{},{},{},{},{},{},{}])
+        let colorList = inject('colorList')//父组件传过来的数据
+        let selectIndex = inject('selectIndex')//父组件传过来的数据
 		//加载中
 		let loadingShow = ref(false)

@@ -148,6 +150,7 @@ export default defineComponent({
 			overallSingle,
 			systemDesignerPercentage,
 			colorList,
+			selectIndex,
 			loadingShow,
 			t,
        }
@@ -156,11 +159,29 @@ export default defineComponent({
        return{

 			//颜色
-            selectIndex:0,//选中的文件索引
 			getRGBA:{},
 			selectColor:{},
        }
    },
+	computed:{
+		setGradient(){
+			return (gradient)=>{
+				let gradientStr = ''
+				gradient.gradientList.sort((a, b) => {
+					let aArr = a.left.split('%')[0]
+					let bArr = b.left.split('%')[0]
+					return aArr - bArr;
+				});
+				gradient.gradientList.forEach((item,index)=>{
+					let str = ','
+					if(gradient.gradientList.length == index+1)str = ''
+					gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` 
+
+				})
+				return `${gradientStr}`
+			}
+		}
+	},
    methods:{
 		//点击判断
 		init(num){
@@ -210,24 +231,19 @@ export default defineComponent({

 		//颜色
 		selectColorItem(index,color){
-			let hex
-			let parent = this.$parent
 			this.selectIndex = index
-            this.$parent.selectIndex = index
+			// if(this.$parent.selectColor?.rgba?.r == color?.rgba?.r && this.$parent.selectColor.rgba.g == color?.rgba?.g && this.$parent.selectColor.rgba.b == color?.rgba?.b){
+			// 	return
+			// }
 			if(color.rgba?.r){
-				hex = parent.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b])
+				this.$parent.selectColor = color
 			}else{
-				this.$parent.selectColor = {}
-				return
+				this.$parent.selectColor.isClick = {}
 			}
 			//判断是否对一个颜色重复点击
-			if(this.$parent.selectColor?.rgba?.r == color?.rgba?.r && this.$parent.selectColor.rgba.g == color?.rgba?.g && this.$parent.selectColor.rgba.b == color?.rgba?.b){
-				return
-			}
 			
-            this.$parent.selectColor =  {rgba:{r:color.rgba?.r,g:color.rgba?.g,b:color.rgba?.b,a:color.rgba?.a},hex:hex}
-            this.$parent.tcxColor = ''
-			this.$parent.pantongName = ''
+            // this.$parent.selectColor.tcxColor = ''
+			// this.$parent.selectColor.pantongName = ''
        },
 		setSelectColorItem(color){
 			let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
@@ -304,13 +320,20 @@ export default defineComponent({
 				data.designSingleItemDTOList[index].printObject.ifSingle = false
 				data.designSingleItemDTOList[index].printObject.prints = []
 			}else if(this.type_ == 3){
-				if(this.$parent.selectColor?.rgba?.r == undefined){
+				if(this.colorList[this.selectIndex]?.rgba?.r == undefined){
 					message.info(this.t('DesignDetailEnd.jsContent2'))
 					return
 				}
-				let color = `${this.$parent.selectColor.rgba.r} ${this.$parent.selectColor.rgba.g} ${this.$parent.selectColor.rgba.b}`
+				let color = `${this.colorList[this.selectIndex].rgba.r} ${this.colorList[this.selectIndex].rgba.g} ${this.colorList[this.selectIndex].rgba.b}`
 				data.designSingleItemDTOList[index].color = color
 			}
+			if(this.colorList[this.selectIndex].gradient){
+				let gradient = this.colorList[this.selectIndex].gradient
+				gradient.colorImg = setGradual(gradient,320,700)
+				data.designSingleItemDTOList[index].gradient = gradient
+			}else{
+				delete data.designSingleItemDTOList[index].gradient
+			}
 			data.designSingleItemDTOList[index].designType = this.sketchImg.designType?this.sketchImg.designType:this.current.designType
 			data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
 			this.loadingShow = true
@@ -321,6 +344,11 @@ export default defineComponent({
 						if(item.type != 'body'){
 							if(item.id == designItemDetail.clothes[index].id || item.id == this.sketchImg.id_){
 								designItemDetail.clothes[index].color = item.color
+								if(item.gradient){
+									designItemDetail.clothes[index].gradient = item.gradient
+								}else{
+									delete designItemDetail.clothes[index].gradient
+								}
 								designItemDetail.clothes[index].designType = item.designType
 								designItemDetail.clothes[index].layersObject = item.layersObject
 								designItemDetail.clothes[index].minIOPath = item.minIOPath
--- a/src/component/Detail/setDesignItem.vue
+++ b/src/component/Detail/setDesignItem.vue
@@ -299,7 +299,7 @@ export default defineComponent({
 				w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)
 				h = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
 				width = w+'px'
-				// height = w*num+'px'
+				height = w*num+'px'
 			}else if(this.direction == 'top'){
 				num = width/height
 				this.frontBack.front[this.imgDomIndex].style.top = 'auto'
@@ -309,19 +309,19 @@ export default defineComponent({
 				h = (this.frontBack.front[this.imgDomIndex].centers.top - e.y)
 				
 				height = h+'px'
-				// width = h*num+'px'
+				width = h*num+'px'
 			}else if(this.direction == 'bottom'){
 				num = width/height
 				h = (e.y - this.frontBack.front[this.imgDomIndex].centers.top)
 				height = h+'px'
-				// width = h*num+'px'
+				width = h*num+'px'
 			}else if(this.direction == 'left'){
 				this.frontBack.front[this.imgDomIndex].style.left = 'auto'
 				this.frontBack.front[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
 				w = (this.frontBack.front[this.imgDomIndex].centers.left - e.x)
 				
 				width = w+'px'
-				// height = w*num+'px'
+				height = w*num+'px'
 			}
 			//判断尺寸是否到边
 			this.frontBack.front[this.imgDomIndex].style.width = width