fix

src/component/HomePage/NewCollectionReview.vue

@@ -35,8 +35,9 @@
 
         <div class="img_block_item">
             <div class="color_item"  v-for="(color) in allBoardData?.colorBoards" :key="color">
-                <div class="color_content" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b},${color?.rgbValue?.a})`}"></div>
-                <div class="color_content_body">
+                <div class="color_content" v-if="!color?.gradient" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b},${color?.rgbValue?.a})`}"></div>
+                <div class="color_content" v-else :style="{height:'11rem','background-image':color?.gradient?`linear-gradient(${color?.gradient.angle}deg,${setGradient(color?.gradient)}`:'none'}"></div>
+                <div class="color_content_body" v-if="!color?.gradient">
                     <div class="color_des">{{color.tcx}}</div>
                     <div class="color_des">{{color.name}}</div>
                 </div>
@@ -122,7 +123,26 @@ export default defineComponent({
 		},
 		
 	},
-	
+	computed: {
+		setGradient(){
+			return (gradient:any)=>{
+				let gradientStr = ''
+				gradient.gradientList.sort((a:any, b:any) => {
+					let aArr = a.left.split('%')[0]
+					let bArr = b.left.split('%')[0]
+					return aArr - bArr;
+				});
+				gradient.gradientList.forEach((item:any,index:any)=>{
+					let str = ','
+					if(gradient.gradientList.length == index+1)str = ''
+					gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` 
+
+				})
+				return `${gradientStr}`
+			}
+			
+		}
+	},
 	mounted () {
 	},
     methods: {