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

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

@@ -7,10 +7,12 @@
<div class="detailText">Color pelette</div>
<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-show="!item.gradient" class="background" :style="{'background-color':item.hex}"></div>
<div v-show="!item.gradient" class="text">{{ item.hex }}</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 v-if="item" class="box">
<div v-show="!item.gradient" class="background" :style="{'background-color':item.hex}"></div>
<div v-show="!item.gradient" class="text">{{ item.hex }}</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 class="detailText">Choose color from image</div>
@@ -79,7 +81,7 @@ export default defineComponent({
tcxToColor:'',
})
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)
newVal.name = data.name
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?.b == colorData.allBoardData.colorBoards?.[index]?.rgba?.[2] &&
JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(colorData.allBoardData.colorBoards?.[index]?.gradient)
&& colorData.selectDetail.color.rgba?.r
){
if(!isOneChecked){
isOneChecked = true
@@ -120,7 +123,7 @@ export default defineComponent({
colorData.selectColor = item
colorData.colorList.index = index
}
}else{
}else if(colorData.selectDetail.color.rgba?.r){
if(!isNoSelect){
item = {
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)=>{
colorData.colorList.index = index
if(item.rgba){
if(item?.rgba){
colorData.selectColor = item
}else{
// colorData.colorList.list[colorData.selectDetail.id][index] = {}
@@ -269,19 +272,21 @@ export default defineComponent({
&.active{
border: 2px solid #000;
}
> .background{
flex: 1;
height: 7rem;
width: 100%;
}
> .text{
font-weight: 600;
line-height: 2rem;
text-align: center;
}
> .backgroundImg{
width: 100%;
height: 100%;
>.box{
> .background{
flex: 1;
height: 7rem;
width: 100%;
}
> .text{
font-weight: 600;
line-height: 2rem;
text-align: center;
}
> .backgroundImg{
width: 100%;
height: 100%;
}
}
}
}