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

优化功能菜单：正方形图标+去掉描述文字
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Agent
2026-03-27 02:47:47 +00:00
parent 3f9420d026
commit 42df88b654
1 changed files with 18 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -55,90 +55,57 @@
<!-- 管理员菜单 -->
<template v-if="isAdmin">
<view class="menu-card" @click="goTo('/pages/product/manage')">
<view class="menu-card-icon blue">
<Icon name="product" :size="40" color="#fff" />
</view>
<Icon name="product" :size="48" color="#fff" />
<text class="menu-card-title">商品管理</text>
<text class="menu-card-desc">管理商品库存</text>
</view>
<view class="menu-card" @click="goTo('/pages/category/index')">
<view class="menu-card-icon purple">
<Icon name="setting" :size="40" color="#fff" />
</view>
<Icon name="setting" :size="48" color="#fff" />
<text class="menu-card-title">种类管理</text>
<text class="menu-card-desc">管理商品种类</text>
</view>
<view class="menu-card" @click="goTo('/pages/order/create')">
<view class="menu-card-icon green">
<Icon name="edit" :size="40" color="#fff" />
</view>
<Icon name="edit" :size="48" color="#fff" />
<text class="menu-card-title">创建订单</text>
<text class="menu-card-desc">新增销售订单</text>
</view>
<view class="menu-card" @click="goToTab('/pages/order/list')">
<view class="menu-card-icon orange">
<Icon name="order" :size="40" color="#fff" />
</view>
<Icon name="order" :size="48" color="#fff" />
<text class="menu-card-title">订单列表</text>
<text class="menu-card-desc">查看所有订单</text>
</view>
<view class="menu-card" @click="goStock()">
<view class="menu-card-icon red">
<Icon name="stock" :size="40" color="#fff" />
</view>
<Icon name="stock" :size="48" color="#fff" />
<text class="menu-card-title">库存管理</text>
<text class="menu-card-desc">库存预警监控</text>
</view>
</template>
<!-- 销售菜单 -->
<template v-else-if="isSales">
<view class="menu-card" @click="goTo('/pages/product/list')">
<view class="menu-card-icon blue">
<Icon name="product" :size="40" color="#fff" />
</view>
<Icon name="product" :size="48" color="#fff" />
<text class="menu-card-title">商品浏览</text>
<text class="menu-card-desc">查看商品列表</text>
</view>
<view class="menu-card" @click="goTo('/pages/order/create')">
<view class="menu-card-icon green">
<Icon name="edit" :size="40" color="#fff" />
</view>
<Icon name="edit" :size="48" color="#fff" />
<text class="menu-card-title">创建订单</text>
<text class="menu-card-desc">新增销售订单</text>
</view>
<view class="menu-card" @click="goToTab('/pages/order/list')">
<view class="menu-card-icon orange">
<Icon name="order" :size="40" color="#fff" />
</view>
<Icon name="order" :size="48" color="#fff" />
<text class="menu-card-title">订单列表</text>
<text class="menu-card-desc">查看所有订单</text>
</view>
</template>
<!-- 顾客菜单 -->
<template v-else-if="isCustomer">
<view class="menu-card" @click="goTo('/pages/product/list')">
<view class="menu-card-icon blue">
<Icon name="product" :size="40" color="#fff" />
</view>
<Icon name="product" :size="48" color="#fff" />
<text class="menu-card-title">商品浏览</text>
<text class="menu-card-desc">查看商品列表</text>
</view>
<view class="menu-card" @click="goToTab('/pages/order/list')">
<view class="menu-card-icon orange">
<Icon name="order" :size="40" color="#fff" />
</view>
<Icon name="order" :size="48" color="#fff" />
<text class="menu-card-title">我的订单</text>
<text class="menu-card-desc">查看订单记录</text>
</view>
</template>
<!-- 游客菜单 -->
<template v-else-if="isGuest">
<view class="guest-card" @click="goTo('/pages/login/index')">
<view class="guest-icon">
<Icon name="user" :size="80" color="#fff" />
</view>
<Icon name="user" :size="80" color="#fff" />
<text class="guest-text">点击登录</text>
<text class="guest-desc">登录后使用完整功能</text>
</view>
</template>
</view>
@@ -417,21 +384,24 @@ export default {
/* 手机端 - 2列布局 */
.menu-card {
aspect-ratio: 1;
width: 44%;
background: #fff;
border-radius: 24rpx;
padding: 30rpx;
padding: 20rpx;
margin: 10rpx;
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* 平板/PC端 - 横版布局，超过4个换行 */
/* 平板/PC端 */
@media (min-width: 768px) {
.menu-card {
width: 22%;
margin: 10rpx;
width: 18%;
padding: 30rpx;
}
}