fix: 图标改用简洁线条风格符号
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user