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"
>
<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()">

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

@@ -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;