暂时提交

components/zy/filterDropdown.vue

@@ -1,7 +1,14 @@
 <template>
-	<view class="HMfilterDropdown" :class="{'setDropdownBottom':maskVisibility}" :style="{'top':menuTop+'rpx'}"
+	<view class="HMfilterDropdown" :class="{'setDropdownBottom':maskVisibility}" :style="{
+		'top': menuTop+'rpx',
+		'--active-color': activeColor,
+		'--menu-text-color': menuTextColor,
+		'--submit-btn-bg': submitBtnBg,
+		'--submit-btn-color': submitBtnColor,
+		'--reset-btn-color': resetBtnColor
+	}"
 		@touchmove.stop.prevent="discard" @tap.stop="discard">
-		<view class="nav">
+		<view class="nav" :style="{'background': navBgGradient}">
 			<block v-for="(item,index) in menu" :key="index">
 				<view class="first-menu" :class="{'on':showPage==index}" @tap="togglePage(index)">
 					<text class="name">{{item.name}}</text>
@@ -141,6 +148,36 @@
 			dataFormat: {
 				value: String,
 				default: 'Array'
+			},
+			// 导航栏背景渐变色
+			navBgGradient: {
+				type: String,
+				default: 'linear-gradient(-90deg, rgb(207,240,255), rgb(179,217,255) 0% 99%)'
+			},
+			// 激活/高亮颜色（选中状态、按钮等）
+			activeColor: {
+				type: String,
+				default: '#f44336'
+			},
+			// 菜单文字默认颜色
+			menuTextColor: {
+				type: String,
+				default: '#000000'
+			},
+			// 提交按钮背景色
+			submitBtnBg: {
+				type: String,
+				default: '#f44336'
+			},
+			// 提交按钮文字色
+			submitBtnColor: {
+				type: String,
+				default: '#fff'
+			},
+			// 重置按钮文字色
+			resetBtnColor: {
+				type: String,
+				default: '#f44336'
 			}
 		},
 		watch: {
@@ -578,23 +615,22 @@
 		height: 44px;
 		border-bottom: solid 1rpx #eee;
 		z-index: 12;
-		background: linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);
 		flex-direction: row;
 
 		.first-menu {
 			width: 100%;
 			font-size: 15px;
-			color: #000000;
+			color: var(--menu-text-color, #000000);
 			flex-direction: row;
 			align-items: center;
 			justify-content: center;
 			transition: color .2s linear;
 
 			&.on {
-				color: #f44336;
+				color: var(--active-color, #f44336);
 
 				.iconfont {
-					color: #f44336;
+					color: var(--active-color, #f44336);
 				}
 			}
 
@@ -659,7 +695,7 @@
 				>.iconfont {
 					display: none;
 					font-size: 18px;
-					color: #f44336;
+					color: var(--active-color, #f44336);
 				}
 			}
 		}
@@ -689,7 +725,7 @@
 				border-bottom: solid 1rpx #e5e5e5;
 
 				&.on {
-					color: #f44336;
+					color: var(--active-color, #f44336);
 
 					>.menu-name {
 						>.iconfont {
@@ -712,12 +748,12 @@
 					>.iconfont {
 						display: none;
 						font-size: 18px;
-						color: #f44336;
+						color: var(--active-color, #f44336);
 					}
 				}
 
 				&.on {
-					color: #f44336;
+					color: var(--active-color, #f44336);
 
 					>.menu-name {
 						>.iconfont {
@@ -751,7 +787,7 @@
 
 						&.on {
 							border-color: #f6c8ac;
-							color: #f44336;
+							color: var(--active-color, #f44336);
 						}
 
 						.iconfont {
@@ -792,8 +828,8 @@
 					flex-wrap: wrap;
 
 					.on {
-						border-color: #f44336;
-						background-color: #f44336;
+						border-color: var(--active-color, #f44336);
+						background-color: var(--active-color, #f44336);
 						color: #fff;
 					}
 
@@ -829,18 +865,18 @@
 				width: 320rpx;
 				height: 42px;
 				border-radius: 42px;
-				border: 2rpx solid #f44336;
+				border: 2rpx solid var(--active-color, #f44336);
 				align-items: center;
 				justify-content: center;
 			}
 
 			.reset {
-				color: #f44336;
+				color: var(--reset-btn-color, #f44336);
 			}
 
 			.submit {
-				color: #fff;
-				background-color: #f44336;
+				color: var(--submit-btn-color, #fff);
+				background-color: var(--submit-btn-bg, #f44336);
 			}
 		}
 	}