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

颜色问题部署

Browse Source
This commit is contained in:
X1627315083
2025-05-08 15:20:22 +08:00
parent 135c8cfeb7
commit 8bc0a52ab8
4 changed files with 41 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.dev
View File

@@ -6,7 +6,7 @@ NODE_ENV = 'development'
VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk' VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
# VUE_APP_BASE_URL = 'https://www.api.aida.com.hk' # VUE_APP_BASE_URL = 'https://www.api.aida.com.hk'
# 徐佩 # 徐佩
# VUE_APP_BASE_URL = 'http://192.168.1.3:5567' # VUE_APP_BASE_URL = 'http://192.168.31.118:5567'
# 海波 # 海波
# VUE_APP_BASE_URL = 'http://192.168.1.7:5567' # VUE_APP_BASE_URL = 'http://192.168.1.7:5567'

8
src/component/DetailCopy/designDetail.vue
View File

@@ -168,9 +168,9 @@ export default defineComponent({
}else{ }else{
item.color = { item.color = {
rgba:{ rgba:{
r:255, r:undefined,
g:255, g:undefined,
b:255, b:undefined,
} }
} }
} }
@@ -264,7 +264,7 @@ export default defineComponent({
let isCurrent = list[i].id == detailData?.selectDetail?.id let isCurrent = list[i].id == detailData?.selectDetail?.id
let data:any = { let data:any = {
changed:false, changed:false,
color:(detailData.currentDetailType == 'color' && isCurrent)?(newData?.rgba?`${newData.rgba.r} ${newData.rgba.g} ${newData.rgba.b}`:''):`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`, color:(detailData.currentDetailType == 'color' && isCurrent)?(newData?.rgba?.r?`${newData.rgba.r} ${newData.rgba.g} ${newData.rgba.b}`:''):(list[i].color.rgba.r?`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:''),
designType:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.designType:list[i].designType, designType:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.designType:list[i].designType,
id:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.id:list[i].id, id:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.id:list[i].id,
// maskMinioUrl:'', // maskMinioUrl:'',

45
src/component/DetailCopy/detailLeft/colorBox/index.vue
View File

@@ -7,10 +7,12 @@
<div class="detailText">Color pelette</div> <div class="detailText">Color pelette</div>
<div class="colorBox"> <div class="colorBox">
<div v-for="item,index in colorList.list[selectDetail.id]" @click="setSelectColor(item,index)" class="colorBoxItem" :class="{active:colorList.index == index}"> <div v-for="item,index in colorList.list[selectDetail.id]" @click="setSelectColor(item,index)" class="colorBoxItem" :class="{active:colorList.index == index}">
<div v-show="!item.gradient" class="background" :style="{'background-color':item.hex}"></div> <div v-if="item" class="box">
<div v-show="!item.gradient" class="text">{{ item.hex }}</div> <div v-show="!item.gradient" class="background" :style="{'background-color':item.hex}"></div>
<div v-show="!item.gradient" class="text">{{ item.name }}</div> <div v-show="!item.gradient" class="text">{{ item.hex }}</div>
<div v-show="item.gradient" class="backgroundImg" :style="{'background-image':`linear-gradient(${item.gradient?.angle}deg,${setGradient(item.gradient)})`}"></div> <div v-show="!item.gradient" class="text">{{ item.name }}</div>
<div v-show="item.gradient" class="backgroundImg" :style="{'background-image':`linear-gradient(${item.gradient?.angle}deg,${setGradient(item.gradient)})`}"></div>
</div>
</div> </div>
</div> </div>
<div class="detailText">Choose color from image</div> <div class="detailText">Choose color from image</div>
@@ -79,7 +81,7 @@ export default defineComponent({
tcxToColor:'', tcxToColor:'',
}) })
watch(()=>colorData.selectColor,async (newVal,oldVal)=>{ watch(()=>colorData.selectColor,async (newVal,oldVal)=>{
if(!newVal?.name && newVal.rgba){ if(!newVal?.name && newVal.rgba && newVal.rgba?.r){
let data:any = await getColorName(newVal.rgba) let data:any = await getColorName(newVal.rgba)
newVal.name = data.name newVal.name = data.name
newVal.tcx = data.tcx newVal.tcx = data.tcx
@@ -111,6 +113,7 @@ export default defineComponent({
colorData.selectDetail.color.rgba?.g == colorData.allBoardData.colorBoards?.[index]?.rgba?.[1] && colorData.selectDetail.color.rgba?.g == colorData.allBoardData.colorBoards?.[index]?.rgba?.[1] &&
colorData.selectDetail.color.rgba?.b == colorData.allBoardData.colorBoards?.[index]?.rgba?.[2] && colorData.selectDetail.color.rgba?.b == colorData.allBoardData.colorBoards?.[index]?.rgba?.[2] &&
JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(colorData.allBoardData.colorBoards?.[index]?.gradient) JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(colorData.allBoardData.colorBoards?.[index]?.gradient)
&& colorData.selectDetail.color.rgba?.r
){ ){
if(!isOneChecked){ if(!isOneChecked){
isOneChecked = true isOneChecked = true
@@ -120,7 +123,7 @@ export default defineComponent({
colorData.selectColor = item colorData.selectColor = item
colorData.colorList.index = index colorData.colorList.index = index
} }
}else{ }else if(colorData.selectDetail.color.rgba?.r){
if(!isNoSelect){ if(!isNoSelect){
item = { item = {
hex:rgbaToHex([colorData.selectDetail.color.rgba.r,colorData.selectDetail.color.rgba.g,colorData.selectDetail.color.rgba.b]), hex:rgbaToHex([colorData.selectDetail.color.rgba.r,colorData.selectDetail.color.rgba.g,colorData.selectDetail.color.rgba.b]),
@@ -174,7 +177,7 @@ export default defineComponent({
} }
const setSelectColor = (item:any,index:number)=>{ const setSelectColor = (item:any,index:number)=>{
colorData.colorList.index = index colorData.colorList.index = index
if(item.rgba){ if(item?.rgba){
colorData.selectColor = item colorData.selectColor = item
}else{ }else{
// colorData.colorList.list[colorData.selectDetail.id][index] = {} // colorData.colorList.list[colorData.selectDetail.id][index] = {}
@@ -269,19 +272,21 @@ export default defineComponent({
&.active{ &.active{
border: 2px solid #000; border: 2px solid #000;
} }
> .background{ >.box{
flex: 1; > .background{
height: 7rem; flex: 1;
width: 100%; height: 7rem;
} width: 100%;
> .text{ }
font-weight: 600; > .text{
line-height: 2rem; font-weight: 600;
text-align: center; line-height: 2rem;
} text-align: center;
> .backgroundImg{ }
width: 100%; > .backgroundImg{
height: 100%; width: 100%;
height: 100%;
}
} }
} }
} }

20
src/component/DetailCopy/model/modelPosition.vue
View File

@@ -8,7 +8,7 @@
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="item.style"> <div class="detail_modal_item_front" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="item.style">
<img :src="item.imageUrl" alt=""> <img :src="item.imageUrl" alt="">
</div> </div>
<div class="designOpenrtion_btn"> <div class="designOpenrtion_btnBox">
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))"> <ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li> <li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li> <li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
@@ -68,7 +68,7 @@ export default defineComponent({
watch(()=>selectItem.selectDetail,(newValue,oldValue)=>{ watch(()=>selectItem.selectDetail,(newValue,oldValue)=>{
if(newValue.id == oldValue?.id)return if(newValue.id == oldValue?.id)return
selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id) selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
}) },{immediate: true,})
const getDetailListDom = reactive({ const getDetailListDom = reactive({
libraryList:null as any, libraryList:null as any,
}) })
@@ -400,9 +400,9 @@ export default defineComponent({
height: auto; height: auto;
position: relative; position: relative;
height: 100%; height: 100%;
// display: flex; display: flex;
// align-items: center; align-items: center;
// justify-content: center; justify-content: center;
>img{ >img{
z-index: 2; z-index: 2;
position: relative; position: relative;
@@ -420,10 +420,10 @@ export default defineComponent({
height: 100%; height: 100%;
width: 100%; width: 100%;
img{ img{
// width: 100%;
// height: 100%;
width: 100%; width: 100%;
height: auto; height: 100%;
// width: 100%;
// height: auto;
float: left; float: left;
user-select:none; user-select:none;
-webkit-user-drag: none; -webkit-user-drag: none;
@@ -438,8 +438,10 @@ export default defineComponent({
.designOpenrtion_print{ .designOpenrtion_print{
z-index: 1 !important; z-index: 1 !important;
} }
> .designOpenrtion_btn{ > .designOpenrtion_btnBox{
z-index: 99; z-index: 99;
width: 100%;
height: 100%;
left: 0; left: 0;
ul{ ul{
list-style: none; list-style: none;