fix: 图标改用简洁线条风格符号

This commit is contained in:
Agent
2026-03-28 14:01:05 +00:00
parent 8c7e500fbb
commit f47f078357

View File

@@ -1,39 +1,51 @@
<template>
<view class="icon-box" :style="{ width: size + 'rpx', height: size + 'rpx' }">
<text :style="{ fontSize: (size * 0.55) + 'rpx', color: color }">{{ iconChar }}</text>
<view class="icon-box" :style="{ width: size + 'rpx', height: size + 'rpx', backgroundColor: bgColor, borderRadius: radius }">
<text :style="{ fontSize: fontSize, color: textColor }">{{ iconChar }}</text>
</view>
</template>
<script>
// 简洁线条图标(用 Unicode 符号)
const icons = {
home: '',
user: '用户',
chart: '',
product: '',
add: '',
search: '',
order: '',
edit: '',
check: '',
close: '',
stock: '',
alert: '',
in: '',
out: '',
customer: '',
money: '',
logout: '退',
right: '',
left: '',
down: '',
lock: '',
calendar: '',
setting: '',
wechat: '',
cash: '',
alipay: '',
plus: '',
flow: ''
home: '',
user: '',
chart: '',
product: '',
add: '+',
search: '',
order: '',
edit: '',
check: '',
close: '',
stock: '',
alert: '',
in: '',
out: '',
customer: '',
money: '¤',
logout: '',
right: '',
left: '',
down: '',
lock: '',
calendar: '',
setting: '',
wechat: '',
cash: '💵',
alipay: '💴',
plus: '+',
flow: ''
}
const colors = {
blue: '#1890ff',
green: '#52c41a',
red: '#ff4d4f',
orange: '#fa8c16',
purple: '#722ed1',
cyan: '#13c2c2',
pink: '#eb2f96',
gray: '#8c8c8c'
}
export default {
@@ -41,11 +53,20 @@ export default {
props: {
name: { type: String, required: true },
size: { type: [Number, String], default: 48 },
color: { type: String, default: '' }
color: { type: String, default: '' },
bgColor: { type: String, default: 'transparent' },
radius: { type: String, default: '0' },
theme: { type: String, default: '' } // blue, green, red, orange, purple, cyan, pink
},
computed: {
iconChar() {
return icons[this.name] || '?'
return icons[this.name] || ''
},
textColor() {
return this.color || (this.theme ? colors[this.theme] : '#666')
},
fontSize() {
return (this.size * 0.5) + 'rpx'
}
}
}
@@ -56,6 +77,5 @@ export default {
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
}
</style>