fix

src/component/HomePage/ColorboardUpload.vue

@@ -67,7 +67,7 @@
 							<div class="color_setting_operate_item color_setting_operate_input">
 								<div class="color_setting_operate_bg" :style="{'background-image':`linear-gradient(90deg,${setGradient(gradient)})`}">
 								</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 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':`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`}" @click="clickGradient(index)" @mousedown="mousedownGradient($event,item)" @touchstart="mousedownGradient($event,item)"></div>
 							</div>
 						</div>
                     </div>
@@ -170,10 +170,20 @@ export default defineComponent({
 		let gradient = ref({
 			gradientList:[
 				{
-					color:'rgb(244, 187, 51)',
+					rgba:{
+						r:117,
+						g:119,
+						b:255,
+						a:1,
+					},
 					left:'0%'
 				},{
-					color:'rgb(39, 193, 191)',
+					rgba:{
+						r:0,
+						g:222,
+						b:152,
+						a:1,
+					},
 					left:'100%'
 				},
 			],
@@ -200,8 +210,20 @@ export default defineComponent({
         // },
 		selectColor:{
 			handler(newVal,oldVal){
+				console.log(newVal);
 				this.colorList[this.selectIndex] = newVal.rgba
 				let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
+				console.log(newVal);
+				if(this.gradient.selectIndex>-1){
+					this.gradient.gradientList[this.gradient.selectIndex].color = `rgb(${newVal.rgba.r},${newVal.rgba.g},${newVal.rgba.b})`
+					this.gradient.gradientList[this.gradient.selectIndex].rgba = {
+						r:newVal.rgba.r,
+						g:newVal.rgba.g,
+						b:newVal.rgba.b,
+						a:1,
+					}
+					console.log(this.gradient);
+				}
 				this.setColorboardList(colorList)
 				// this.clearSelectColor()
 			},
@@ -240,7 +262,7 @@ export default defineComponent({
 				gradient.gradientList.forEach((item,index)=>{
 					let str = ','
 					if(gradient.gradientList.length == index+1)str = ''
-					gradientStr += `${item.color} ${item.left}${str}` 
+					gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` 
 
 				})
 				console.log(`linear-gradient(${gradient.angle}deg, ${gradientStr})`);
@@ -568,7 +590,11 @@ export default defineComponent({
             this.store.commit('setColorboardList',colorList)
         },
 		clickGradient(index){
-
+			this.gradient.selectIndex = index
+			let gradientRgba = this.gradient.gradientList[index].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} //顔色选择器默认颜色
 		},
 		mousedownGradient(event,item){
 			event.stopPropagation();