sales/todo-frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 图标改为彩色方块+汉字

Browse Source
This commit is contained in:
Agent
2026-03-28 14:12:23 +00:00
parent 7140e0049f
commit c07c81e479
1 changed files with 42 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/pages/index/index.vue
View File

@@ -18,35 +18,35 @@
<view class="menu-grid"> <view class="menu-grid">
<template v-if="isAdmin"> <template v-if="isAdmin">
<view class="menu-item" @click="goTo('/pages/order/create')"> <view class="menu-item" @click="goTo('/pages/order/create')">
<text class="menu-icon">✏️</text> <view class="menu-icon-box blue"><text class="icon-text">订</text></view>
<text class="menu-text">创建订单</text> <text class="menu-text">创建订单</text>
</view> </view>
<view class="menu-item" @click="goToTab('/pages/order/list')"> <view class="menu-item" @click="goToTab('/pages/order/list')">
<text class="menu-icon">📋</text> <view class="menu-icon-box green"><text class="icon-text">列</text></view>
<text class="menu-text">订单列表</text> <text class="menu-text">订单列表</text>
</view> </view>
<view class="menu-item" @click="goTo('/pages/order/search')"> <view class="menu-item" @click="goTo('/pages/order/search')">
<text class="menu-icon">🔍</text> <view class="menu-icon-box orange"><text class="icon-text">查</text></view>
<text class="menu-text">订单查询</text> <text class="menu-text">订单查询</text>
</view> </view>
<view class="menu-item" @click="goTo('/pages/order/return')"> <view class="menu-item" @click="goTo('/pages/order/return')">
<text class="menu-icon">↩️</text> <view class="menu-icon-box red"><text class="icon-text">退</text></view>
<text class="menu-text">退货</text> <text class="menu-text">退货</text>
</view> </view>
</template> </template>
<template v-else-if="isSales"> <template v-else-if="isSales">
<view class="menu-item" @click="goTo('/pages/order/create')"> <view class="menu-item" @click="goTo('/pages/order/create')">
<text class="menu-icon">✏️</text> <view class="menu-icon-box blue"><text class="icon-text">订</text></view>
<text class="menu-text">创建订单</text> <text class="menu-text">创建订单</text>
</view> </view>
<view class="menu-item" @click="goToTab('/pages/order/list')"> <view class="menu-item" @click="goToTab('/pages/order/list')">
<text class="menu-icon">📋</text> <view class="menu-icon-box green"><text class="icon-text">列</text></view>
<text class="menu-text">订单列表</text> <text class="menu-text">订单列表</text>
</view> </view>
</template> </template>
<template v-else-if="isCustomer"> <template v-else-if="isCustomer">
<view class="menu-item" @click="goToTab('/pages/order/list')"> <view class="menu-item" @click="goToTab('/pages/order/list')">
<text class="menu-icon">📋</text> <view class="menu-icon-box green"><text class="icon-text">列</text></view>
<text class="menu-text">我的订单</text> <text class="menu-text">我的订单</text>
</view> </view>
</template> </template>
@@ -59,29 +59,29 @@
<view class="menu-grid"> <view class="menu-grid">
<template v-if="isAdmin"> <template v-if="isAdmin">
<view class="menu-item" @click="goTo('/pages/product/manage')"> <view class="menu-item" @click="goTo('/pages/product/manage')">
<text class="menu-icon">📦</text> <view class="menu-icon-box purple"><text class="icon-text">商</text></view>
<text class="menu-text">商品管理</text> <text class="menu-text">商品管理</text>
</view> </view>
<view class="menu-item" @click="goTo('/pages/category/index')"> <view class="menu-item" @click="goTo('/pages/category/index')">
<text class="menu-icon">📂</text> <view class="menu-icon-box pink"><text class="icon-text">类</text></view>
<text class="menu-text">种类管理</text> <text class="menu-text">种类管理</text>
</view> </view>
<view class="menu-item" @click="goStock()"> <view class="menu-item" @click="goStock()">
<text class="menu-icon">🏭</text> <view class="menu-icon-box cyan"><text class="icon-text">库</text></view>
<text class="menu-text">库存管理</text> <text class="menu-text">库存管理</text>
</view> </view>
<view class="menu-item" @click="goTo('/pages/stock/in')"> <view class="menu-item" @click="goTo('/pages/stock/in')">
<text class="menu-icon">➕</text> <view class="menu-icon-box orange"><text class="icon-text">入</text></view>
<text class="menu-text">入库</text> <text class="menu-text">入库</text>
</view> </view>
<view class="menu-item" @click="goTo('/pages/stock/flow')"> <view class="menu-item" @click="goTo('/pages/stock/flow')">
<text class="menu-icon">📊</text> <view class="menu-icon-box green"><text class="icon-text">流</text></view>
<text class="menu-text">库存流水</text> <text class="menu-text">库存流水</text>
</view> </view>
</template> </template>
<template v-else-if="isSales"> <template v-else-if="isSales">
<view class="menu-item" @click="goTo('/pages/product/list')"> <view class="menu-item" @click="goTo('/pages/product/list')">
<text class="menu-icon">📦</text> <view class="menu-icon-box purple"><text class="icon-text">商</text></view>
<text class="menu-text">商品浏览</text> <text class="menu-text">商品浏览</text>
</view> </view>
</template> </template>
@@ -93,7 +93,7 @@
<text class="section-title">商品</text> <text class="section-title">商品</text>
<view class="menu-grid"> <view class="menu-grid">
<view class="menu-item" @click="goTo('/pages/product/list')"> <view class="menu-item" @click="goTo('/pages/product/list')">
<text class="menu-icon">📦</text> <view class="menu-icon-box purple"><text class="icon-text">商</text></view>
<text class="menu-text">商品浏览</text> <text class="menu-text">商品浏览</text>
</view> </view>
</view> </view>
@@ -232,11 +232,37 @@ export default {
padding: 16rpx 0; padding: 16rpx 0;
} }
.menu-icon { .menu-icon-box {
font-size: 50rpx; width: 90rpx;
height: 90rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12rpx; margin-bottom: 12rpx;
} }
.menu-icon-box.blue { background: #e8f4ff; }
.menu-icon-box.green { background: #f6ffed; }
.menu-icon-box.orange { background: #fff7e6; }
.menu-icon-box.red { background: #fff1f0; }
.menu-icon-box.purple { background: #f9f0ff; }
.menu-icon-box.pink { background: #fff0f6; }
.menu-icon-box.cyan { background: #e6f7ff; }
.icon-text {
font-size: 36rpx;
font-weight: bold;
}
.blue .icon-text { color: #1890ff; }
.green .icon-text { color: #52c41a; }
.orange .icon-text { color: #fa8c16; }
.red .icon-text { color: #ff4d4f; }
.purple .icon-text { color: #722ed1; }
.pink .icon-text { color: #eb2f96; }
.cyan .icon-text { color: #13c2c2; }
.menu-text { .menu-text {
font-size: 24rpx; font-size: 24rpx;
color: #666; color: #666;