添加颜色渐变

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})`}">
+					<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>
 				</div>
 				<div>
@@ -49,7 +49,24 @@
 								</div>
 							</div>
 						</div> -->
-						<!-- <div>1231239817239871923918723</div> -->
+						<div class="color_setting_operate">
+							<div class="color_setting_operate_item">
+								<div class="operate_item_box">
+									<div>线性</div>
+								</div>
+								<div class="operate_item_box">
+									<div>角度</div>
+								</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>
+								<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>
+						</div>
                     </div>
                     <!-- <div class="color_review_block">
                         <div class="clear_button" @click="clearCurrentColor()">Clear</div>
@@ -125,7 +142,7 @@ import GO from "@/tool/GO";
 import { defineComponent, h,ref,inject, nextTick } from 'vue'
 import { LoadingOutlined } from '@ant-design/icons-vue';
 import {getCookie} from '@/tool/cookie'
-import {getUploadUrl,rgbToHsv} from '@/tool/util'
+import {getUploadUrl,rgbToHsv,isMoible} from '@/tool/util'
 import {useStore} from 'vuex'
 import ColorThief from '@/tool/colorthief/colorthief'
 import { message,Upload} from 'ant-design-vue';
@@ -147,6 +164,15 @@ 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%'
+			},
+		])
         return {
             fileList,
             colorList,
@@ -154,6 +180,7 @@ export default defineComponent({
 			selectColorList,
 			driver__,
 			t,
+			gradientArr,
         }
     },
     watch:{
@@ -195,6 +222,25 @@ export default defineComponent({
                 return data
             }
         },
+		gradient(gradientArr){
+			return (gradientArr)=>{
+				let gradientStr = ''
+				gradientArr.sort((a, b) => {
+					let aArr = a.left.split('%')[0]
+					let bArr = b.left.split('%')[0]
+					return aArr - bArr;
+				});
+				gradientArr.forEach((item,index)=>{
+					let str = ','
+					if(gradientArr.length == index+1)str = ''
+					gradientStr += `${item.color} ${item.left}${str}` 
+
+				})
+				console.log('linear-gradient(50deg, '+gradientStr+')');
+				return 'linear-gradient(50deg, '+gradientStr+')'
+			}
+			
+		}
     },
     data(){
         return{
@@ -514,7 +560,31 @@ export default defineComponent({
             this.selectColor = {rgba:this.colorList[0],hex:hex}, //顔色选择器默认颜色
             this.store.commit('setColorboardList',colorList)
         },
-		
+		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,
+				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)
+				// event.target.style.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',)
+		}
 
     }
 })
@@ -842,31 +912,7 @@ export default defineComponent({
 						}
 					}
 
-					.sileder_color{
+					
-						margin-top:calc(1.3rem*1.2);
-
-						.vc-slider-swatches{
-							display:none
-						}
-						.vc-slider-hue-warp {
-							width: calc(16.5rem*1.2);
-							height: calc(2.4rem*1.2);
-							border-radius: calc(1.2rem*1.2);
-							overflow: hidden;
-
-							.vc-hue-picker{
-								width: calc(1.4rem*1.2);
-								height: calc(1.4rem*1.2);
-								border-radius: 50%;
-								transform: translate(calc(-0.7rem*1.2), calc(-0.2rem*1.2));
-							}
-						}
-						.vc-hue-pointer{
-							top: calc(0.5rem*1.2) !important;
-						}
-						
-					}
-
 					.color_block{
 						// margin-top: calc(1rem;
 						// display: flex;
@@ -880,7 +926,7 @@ export default defineComponent({
 						justify-content: space-between;
 						align-items: center;
 						.color_right{
-							width: calc(11rem*1.2);
+							width: 13rem;
 							font-size: calc(1.2rem*1.2);
 							color: #666666;
 							.color_rgb_block{
@@ -900,14 +946,14 @@ export default defineComponent({
 								align-items: center;
 							}
 							.color_HEX_block,.color_rgb_block{
-								padding: calc(.2rem*1.2) calc(.5rem*1.2);
+								padding: .25rem .6rem;
 								box-shadow: inset 0 0 0 1px #ccc;
-								border-radius: calc(.4rem*1.2);
+								border-radius: .5rem;
 								justify-content: space-around;
 								text-transform:uppercase;
 								.color_block_bg{
-									width: calc(1.5rem*1.2);
+									width: 1.8rem;
-									height: calc(1.5rem*1.2);
+									height: 2.5rem;
 									// margin-right: .5rem;
 									display: flex;
 									justify-content: space-between;
@@ -918,6 +964,51 @@ export default defineComponent({
 						}
 						
 					}
+					
+					.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;
+						}
+						.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;
+						}
+						.color_setting_operate_btn:hover{
+							border: .3rem solid;
+						}
+					}
 				}
                 .get_color_block{
                     display: flex;