aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
X1627315083
2024-04-23 11:54:53 +08:00
parent ee5d5075b1
commit e6e5308fd1
2 changed files with 92 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/component/Detail/DesignPrintOperation.vue
View File

@@ -13,7 +13,7 @@
:mask="true" :mask="true"
> >
<div class="designOpenrtion_content"> <div class="designOpenrtion_content">
<div class="modal_title_text"> <div class="design_title_text">
<div>{{ $t('DesignPrintOperation.Placement') }}</div> <div>{{ $t('DesignPrintOperation.Placement') }}</div>
</div> </div>
<div class="design_closeIcon" @click.stop="closeModal()"> <div class="design_closeIcon" @click.stop="closeModal()">

118
src/component/HomePage/ColorboardUpload.vue
View File

@@ -6,7 +6,7 @@
</div> </div>
<div class="modal_img"> <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 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> </div>
<div> <div>
@@ -50,21 +50,24 @@
</div> </div>
</div> --> </div> -->
<div class="color_setting_operate"> <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 class="operate_item_box">
<div>线性</div> <div>线性</div>
</div> </div>
<div class="operate_item_box"> <div class="operate_item_box operate_item_angle">
<div>角度</div> <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>
<div class="operate_item_box"> <div class="operate_item_box">
<div>删除</div> <div>删除</div>
</div> </div>
</div> </div>
<div class="color_setting_operate_item color_setting_operate_input"> <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>
<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> </div>
</div> </div>
@@ -164,15 +167,19 @@ export default defineComponent({
}) })
let driver__ = inject('driver__') let driver__ = inject('driver__')
let {t} = useI18n() let {t} = useI18n()
let gradientArr = ref([ let gradient = ref({
{ gradientList:[
color:'rgb(244, 187, 51)', {
left:'0%' color:'rgb(244, 187, 51)',
},{ left:'0%'
color:'rgb(39, 193, 191)', },{
left:'100%' color:'rgb(39, 193, 191)',
}, left:'100%'
]) },
],
angle:45,
selectIndex:-1,
})
return { return {
fileList, fileList,
colorList, colorList,
@@ -180,7 +187,7 @@ export default defineComponent({
selectColorList, selectColorList,
driver__, driver__,
t, t,
gradientArr, gradient,
} }
}, },
watch:{ watch:{
@@ -222,22 +229,22 @@ export default defineComponent({
return data return data
} }
}, },
gradient(gradientArr){ setGradient(gradient){
return (gradientArr)=>{ return (gradient)=>{
let gradientStr = '' let gradientStr = ''
gradientArr.sort((a, b) => { gradient.gradientList.sort((a, b) => {
let aArr = a.left.split('%')[0] let aArr = a.left.split('%')[0]
let bArr = b.left.split('%')[0] let bArr = b.left.split('%')[0]
return aArr - bArr; return aArr - bArr;
}); });
gradientArr.forEach((item,index)=>{ gradient.gradientList.forEach((item,index)=>{
let str = ',' let str = ','
if(gradientArr.length == index+1)str = '' if(gradient.gradientList.length == index+1)str = ''
gradientStr += `${item.color} ${item.left}${str}` gradientStr += `${item.color} ${item.left}${str}`
}) })
console.log('linear-gradient(50deg, '+gradientStr+')'); console.log(`linear-gradient(${gradient.angle}deg, ${gradientStr})`);
return 'linear-gradient(50deg, '+gradientStr+')' return `${gradientStr}`
} }
} }
@@ -560,12 +567,12 @@ export default defineComponent({
this.selectColor = {rgba:this.colorList[0],hex:hex}, //顔色选择器默认颜色 this.selectColor = {rgba:this.colorList[0],hex:hex}, //顔色选择器默认颜色
this.store.commit('setColorboardList',colorList) this.store.commit('setColorboardList',colorList)
}, },
clickGradient(index){
},
mousedownGradient(event,item){ mousedownGradient(event,item){
// console.log(event.target.getBoundingClientRect());
// console.log(event.target.style.left.split('%'));
event.stopPropagation(); event.stopPropagation();
// isMoible() true为移动端 // isMoible() true为移动端
// if
let gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth let gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth
let position = { let position = {
x:event.x, x:event.x,
@@ -584,8 +591,33 @@ export default defineComponent({
window.addEventListener('mousemove',mousedownGradient) window.addEventListener('mousemove',mousedownGradient)
window.addEventListener('mouseup',mouseupGradient) window.addEventListener('mouseup',mouseupGradient)
// event.target.addEventListener('touchmove',) // 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> </script>
@@ -977,6 +1009,35 @@ export default defineComponent({
display: flex; display: flex;
justify-content: space-around; 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{ .color_setting_operate_input{
width: 80%; width: 80%;
// padding: 0 10%; // padding: 0 10%;
@@ -1004,6 +1065,9 @@ export default defineComponent({
cursor: pointer; cursor: pointer;
box-sizing: content-box; box-sizing: content-box;
z-index: 2; z-index: 2;
&.active{
border: .3rem solid;
}
} }
.color_setting_operate_btn:hover{ .color_setting_operate_btn:hover{
border: .3rem solid; border: .3rem solid;