我的页面增加彩色按钮

im-uniapp/components/bar/arrow-bar.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="arrow-bar">
+		<text class="icon iconfont" :class="icon" :style="{color: textColor}"></text>
 		<text class="title">{{ title }}</text>
 		<uni-icons class="arrow" type="right" size="16"></uni-icons>
 	</view>
@@ -12,8 +13,27 @@ export default {
 		title: {
 			type: String,
 			required: true
+		},
+		icon: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			colors: ["#5daa31", "#c7515a", "#e03697", "#85029b",
+				"#c9b455", "#326eb6"]
 		}
 	},
+	computed:{
+		textColor() {
+			let hash = 0;
+			for (var i = 0; i < this.title.length; i++) {
+				hash += this.title.charCodeAt(i);
+			}
+			return this.colors[hash % this.colors.length];
+		}
+	}
 }
 </script>
 
@@ -21,16 +41,20 @@ export default {
 .arrow-bar {
 	width: 100%;
 	height: 90rpx;
-	font-size: 30rpx;
-	color: black;
+	font-size: $im-font-size;
+	color: $im-text-color;
 	margin-top: 5rpx;
 	background-color: white;
 	line-height: 90rpx;
 	display: flex;
-
+	
+	.icon {
+		margin-left: 40rpx;
+	}
+	
 	.title {
 		flex: 1;
-		margin-left: 40rpx;
+		margin-left: 10rpx;
 	}
 
 	.arrow {

im-uniapp/pages/mine/mine.vue

@@ -34,7 +34,7 @@
 			</view>
 		</uni-card>
 		<bar-group>
-			<arrow-bar title="修改密码" @tap="onModifyPassword()"></arrow-bar>
+			<arrow-bar title="修改密码" icon="icon-modify-pwd"  @tap="onModifyPassword()"></arrow-bar>
 		</bar-group>
 		<bar-group>
 			<btn-bar title="退出登录" type="danger" @tap="onQuit()"></btn-bar>

im-uniapp/static/icon/iconfont.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4272106 */
-  src: url('iconfont.ttf?t=1719727774055') format('truetype');
+  src: url('iconfont.ttf?t=1739084401359') format('truetype');
 }
 
 .iconfont {
@@ -11,6 +11,34 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-privacy-protocol:before {
+  content: "\e70a";
+}
+
+.icon-un-register:before {
+  content: "\e656";
+}
+
+.icon-modify-pwd:before {
+  content: "\e63c";
+}
+
+.icon-user-protocol:before {
+  content: "\e61a";
+}
+
+.icon-film:before {
+  content: "\e66b";
+}
+
+.icon-chat:before {
+  content: "\e624";
+}
+
+.icon-delete:before {
+  content: "\e605";
+}
+
 .icon-receipt:before {
   content: "\e601";
 }