修复中国色底部部分颜色部件不展示和引入更多颜色

components/ColorPanel/ColorPanel.vue

@@ -2,10 +2,11 @@
 	<view>
 		<view class="panel container" :style="panelColor">
 			<view :style="canvasHexStyle" @click="onClickCanvas">
-				<view >
+				
+				<view class="">
 					{{name}}
 				</view>
-				<view>
+				<view class="">
 					#{{hex}}
 				</view>
 				<view class="rgb-text">
@@ -95,7 +96,7 @@
 				uni.setClipboardData({
 					data: "#" + this.hex,
 				});
-				// 调用父组件的函数
+				// 通知父组件数据发生变化
 				this.$emit("clickPanel",this.hex);
 			},
 		},
@@ -137,8 +138,8 @@
 	}
 
 	.panel {
-		height: 70px;
+		height: 60px;
-		width: 110px;
+		width: 100px;
 		border-radius: 10px;
 		border-color: #484848;
 		border-style: dashed;

pages.json

@@ -9,7 +9,7 @@
 			"path": "pages/chineseColor/chineseColor",
 			"style": {
 				"navigationBarTitleText": "中国色",
-				"enablePullDownRefresh": false
+				"enablePullDownRefresh": true
 			}
 
 		}

pages/chineseColor/chineseColor.vue

@@ -1,15 +1,15 @@
 <template>
 	<view>
-		<uni-search-bar @confirm="search" v-model="searchValue" @input="input" @cancel="cancel" @clear="clear" placeholder="请输入色彩名称">
-		</uni-search-bar>
-
 		<uni-transition ref="trans" mode-class="fade" :duration="0" :show="true" >
-
+			<uni-search-bar @confirm="search" v-model="searchValue" @cancel="cancel" @clear="clear" @input="input"
+				placeholder="请输入色彩名称">
+			</uni-search-bar>
 			<view class="content">
 				<view class="card-padding">
-					<uni-row>
+					<uni-row style="padding-bottom: 50px">
-						<uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2" v-for="(item,index) in colors" :key="index">
+						<uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2" v-for="(item,index) in colors" 
-							<ColorPanel :hsb="item.hsb" @clickPanel="onClickPanel" :name="item.name"></ColorPanel>
+						:key="index">
+							<ColorPanel :hsb="hsb(item.hexadecimal.substring(1,))" name="item.name" @clickPanel="onClickPanel" :name="item.name"></ColorPanel>
 							<view style="padding-bottom: 10px;"></view>
 						</uni-col>
 					</uni-row>
@@ -31,19 +31,19 @@
 			}
 		},
 		onReady() {
-			this.$refs.trans.init({
+			// this.$refs.trans.init({
-				duration: 2000,
+			// 	duration: 2000,
-				timingFunction: 'ease-in-out',
+			// 	timingFunction: 'ease-in-out',
-				delay: 500,
+			// 	delay: 500,
-			});
+			// });
 		},
 		methods: {
 			onClickPanel(hex) {
-				this.$refs.trans.step({
+				// this.$refs.trans.step({
-					backgroundColor: "#" + hex,
+				// 	backgroundColor: "#" + hex,
-				});
+				// });
-				// 开始执行动画
+				// // 开始执行动画
-				this.$refs.trans.run(() => {});
+				// this.$refs.trans.run(() => {});
 			},
 			input(res) {
 				if (res === "") {
@@ -62,7 +62,56 @@
 				res.value = "";
 				this.colors = chineseColors;
 			},
+			// focus(res) {
+			// 	res.value = "";
+			// 	this.colors = chineseColors;
+			// },
+			// 将hex转换为rgb
+			hexToRgb(hex) {
+				// 将hex切割为rgb数组
+				const hexArr = hex.match(/[\s\S]{1,2}/g) || []
+				// 转换为10进制数组
+				const rgbArr = hexArr.map(hex => parseInt(hex, 16));
+				return {
+					r: rgbArr[0],
+					g: rgbArr[1],
+					b: rgbArr[2],
+					a: 1,
+				}
+			},
+			// 将rgb转化为hsb
+			hsb(hex) {
+				const rgb = this.hexToRgb(hex);
+				let hsb = {
+					h: 0,
+					s: 0,
+					b: 0,
+				};
+				let min = Math.min(rgb.r, rgb.g, rgb.b);
+				let max = Math.max(rgb.r, rgb.g, rgb.b);
+				let delta = max - min;
+				hsb.b = max;
+				hsb.s = max != 0 ? 255 * delta / max : 0;
+				if (hsb.s != 0) {
+					if (rgb.r === max) {
+						hsb.h = (rgb.g - rgb.b) / delta;
+					} else if (rgb.g === max) {
+						hsb.h = 2 + (rgb.b - rgb.r) / delta;
+					} else {
+						hsb.h = 4 + (rgb.r - rgb.g) / delta;
 					}
+				} else {
+					hsb.h = -1;
+				}
+				hsb.h *= 60;
+				if (hsb.h < 0) hsb.h = 0;
+			
+				hsb.s *= 100 / 255;
+				hsb.b *= 100 / 255;
+				return hsb;
+			}
+		}
+		
 	}
 </script>
 
@@ -70,6 +119,7 @@
 	.content {
 		width: 100vw;
 		height: 100vh;
+	
 	}
 
 	.card-padding {