fix: 图标改用专业符号(不是emoji不是汉字)
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
@@ -1,81 +1,61 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="icon-box" :style="{ width: size + 'rpx', height: size + 'rpx', backgroundColor: bgColor, borderRadius: radius }">
|
<text class="iconfont" :style="{ fontSize: size + 'rpx', color: color }">{{ iconChar }}</text>
|
||||||
<text :style="{ fontSize: fontSize, color: textColor }">{{ iconChar }}</text>
|
|
||||||
</view>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// 简洁线条图标(用 Unicode 符号)
|
// 使用专业图标符号(不是emoji,不是汉字)
|
||||||
const icons = {
|
const icons = {
|
||||||
home: '⌂',
|
home: '⌂', // 首页
|
||||||
user: '⊙',
|
user: '⊙', // 用户
|
||||||
chart: '◐',
|
chart: '◐', // 图表
|
||||||
product: '▦',
|
product: '▦', // 商品
|
||||||
add: '+',
|
add: '+', // 添加
|
||||||
search: '◎',
|
search: '◎', // 搜索
|
||||||
order: '☰',
|
order: '☰', // 订单
|
||||||
edit: '✎',
|
edit: '✎', // 编辑
|
||||||
check: '✓',
|
check: '✓', // 确认
|
||||||
close: '✕',
|
close: '✕', // 关闭
|
||||||
stock: '⌖',
|
stock: '⌖', // 库存
|
||||||
alert: '⚡',
|
alert: '⚡', // 警告
|
||||||
in: '↓',
|
in: '↓', // 入
|
||||||
out: '↑',
|
out: '↑', // 出
|
||||||
customer: '☺',
|
customer: '☺', // 客户
|
||||||
money: '¤',
|
money: '¤', // 钱
|
||||||
logout: '↺',
|
logout: '↺', // 退出
|
||||||
right: '›',
|
right: '›', // 右
|
||||||
left: '‹',
|
left: '‹', // 左
|
||||||
down: '⌄',
|
down: '⌄', // 下
|
||||||
lock: '⌘',
|
lock: '⌘', // 锁
|
||||||
calendar: '▦',
|
calendar: '▦', // 日历
|
||||||
setting: '⚙',
|
setting: '⚙', // 设置
|
||||||
wechat: '✉',
|
wechat: '✉', // 微信
|
||||||
cash: '💵',
|
cash: '¤', // 现金
|
||||||
alipay: '💴',
|
alipay: '¤', // 支付宝
|
||||||
plus: '+',
|
plus: '+', // 加
|
||||||
flow: '↔'
|
flow: '↔' // 流水
|
||||||
}
|
|
||||||
|
|
||||||
const colors = {
|
|
||||||
blue: '#1890ff',
|
|
||||||
green: '#52c41a',
|
|
||||||
red: '#ff4d4f',
|
|
||||||
orange: '#fa8c16',
|
|
||||||
purple: '#722ed1',
|
|
||||||
cyan: '#13c2c2',
|
|
||||||
pink: '#eb2f96',
|
|
||||||
gray: '#8c8c8c'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Icon',
|
name: 'Icon',
|
||||||
props: {
|
props: {
|
||||||
name: { type: String, required: true },
|
name: { type: String, required: true },
|
||||||
size: { type: [Number, String], default: 48 },
|
size: { type: [Number, String], default: 32 },
|
||||||
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: {
|
computed: {
|
||||||
iconChar() {
|
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'
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.icon-box {
|
.iconfont {
|
||||||
display: flex;
|
font-family: sans-serif;
|
||||||
align-items: center;
|
font-weight: normal;
|
||||||
justify-content: center;
|
font-style: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user