fix: 卡片改为纯白底,图标和文字改为深色,简洁美观

This commit is contained in:
Agent
2026-03-28 13:10:53 +00:00
parent 6bce9ad6cf
commit 05e37b3abe

View File

@@ -7,7 +7,7 @@
<text class="username">{{ userInfo.username || '用户' }}</text> <text class="username">{{ userInfo.username || '用户' }}</text>
</view> </view>
<view class="role-badge" :class="roleClass"> <view class="role-badge" :class="roleClass">
<Icon name="user" :size="24" color="#fff" /> <Icon name="user" :size="24" color="#667eea" />
<text class="role-text">{{ roleText }}</text> <text class="role-text">{{ roleText }}</text>
</view> </view>
</view> </view>
@@ -56,37 +56,37 @@
<!-- 管理员菜单 --> <!-- 管理员菜单 -->
<template v-if="isAdmin"> <template v-if="isAdmin">
<view class="menu-card" @click="goTo('/pages/order/create')"> <view class="menu-card" @click="goTo('/pages/order/create')">
<Icon name="edit" :size="36" color="#fff" /> <Icon name="edit" :size="36" color="#667eea" />
<text class="menu-card-title">创建订单</text> <text class="menu-card-title">创建订单</text>
</view> </view>
<view class="menu-card" @click="goToTab('/pages/order/list')"> <view class="menu-card" @click="goToTab('/pages/order/list')">
<Icon name="order" :size="36" color="#fff" /> <Icon name="order" :size="36" color="#667eea" />
<text class="menu-card-title">订单列表</text> <text class="menu-card-title">订单列表</text>
</view> </view>
<view class="menu-card" @click="goTo('/pages/order/search')"> <view class="menu-card" @click="goTo('/pages/order/search')">
<Icon name="search" :size="36" color="#fff" /> <Icon name="search" :size="36" color="#667eea" />
<text class="menu-card-title">订单查询</text> <text class="menu-card-title">订单查询</text>
</view> </view>
<view class="menu-card" @click="goTo('/pages/order/return')"> <view class="menu-card" @click="goTo('/pages/order/return')">
<Icon name="right" :size="36" color="#fff" /> <Icon name="right" :size="36" color="#667eea" />
<text class="menu-card-title">退货</text> <text class="menu-card-title">退货</text>
</view> </view>
</template> </template>
<!-- 销售菜单 --> <!-- 销售菜单 -->
<template v-else-if="isSales"> <template v-else-if="isSales">
<view class="menu-card" @click="goTo('/pages/order/create')"> <view class="menu-card" @click="goTo('/pages/order/create')">
<Icon name="edit" :size="36" color="#fff" /> <Icon name="edit" :size="36" color="#667eea" />
<text class="menu-card-title">创建订单</text> <text class="menu-card-title">创建订单</text>
</view> </view>
<view class="menu-card" @click="goToTab('/pages/order/list')"> <view class="menu-card" @click="goToTab('/pages/order/list')">
<Icon name="order" :size="36" color="#fff" /> <Icon name="order" :size="36" color="#667eea" />
<text class="menu-card-title">订单列表</text> <text class="menu-card-title">订单列表</text>
</view> </view>
</template> </template>
<!-- 顾客菜单 --> <!-- 顾客菜单 -->
<template v-else-if="isCustomer"> <template v-else-if="isCustomer">
<view class="menu-card" @click="goToTab('/pages/order/list')"> <view class="menu-card" @click="goToTab('/pages/order/list')">
<Icon name="order" :size="36" color="#fff" /> <Icon name="order" :size="36" color="#667eea" />
<text class="menu-card-title">我的订单</text> <text class="menu-card-title">我的订单</text>
</view> </view>
</template> </template>
@@ -98,44 +98,44 @@
<!-- 管理员菜单 --> <!-- 管理员菜单 -->
<template v-if="isAdmin"> <template v-if="isAdmin">
<view class="menu-card" @click="goTo('/pages/product/manage')"> <view class="menu-card" @click="goTo('/pages/product/manage')">
<Icon name="product" :size="36" color="#fff" /> <Icon name="product" :size="36" color="#667eea" />
<text class="menu-card-title">商品管理</text> <text class="menu-card-title">商品管理</text>
</view> </view>
<view class="menu-card" @click="goTo('/pages/category/index')"> <view class="menu-card" @click="goTo('/pages/category/index')">
<Icon name="setting" :size="36" color="#fff" /> <Icon name="setting" :size="36" color="#667eea" />
<text class="menu-card-title">种类管理</text> <text class="menu-card-title">种类管理</text>
</view> </view>
<view class="menu-card" @click="goStock()"> <view class="menu-card" @click="goStock()">
<Icon name="stock" :size="36" color="#fff" /> <Icon name="stock" :size="36" color="#667eea" />
<text class="menu-card-title">库存管理</text> <text class="menu-card-title">库存管理</text>
</view> </view>
<view class="menu-card" @click="goTo('/pages/stock/in')"> <view class="menu-card" @click="goTo('/pages/stock/in')">
<Icon name="plus" :size="36" color="#fff" /> <Icon name="plus" :size="36" color="#667eea" />
<text class="menu-card-title">入库</text> <text class="menu-card-title">入库</text>
</view> </view>
<view class="menu-card" @click="goTo('/pages/stock/flow')"> <view class="menu-card" @click="goTo('/pages/stock/flow')">
<Icon name="flow" :size="36" color="#fff" /> <Icon name="flow" :size="36" color="#667eea" />
<text class="menu-card-title">库存流水</text> <text class="menu-card-title">库存流水</text>
</view> </view>
</template> </template>
<!-- 销售菜单 --> <!-- 销售菜单 -->
<template v-else-if="isSales"> <template v-else-if="isSales">
<view class="menu-card" @click="goTo('/pages/product/list')"> <view class="menu-card" @click="goTo('/pages/product/list')">
<Icon name="product" :size="36" color="#fff" /> <Icon name="product" :size="36" color="#667eea" />
<text class="menu-card-title">商品浏览</text> <text class="menu-card-title">商品浏览</text>
</view> </view>
</template> </template>
<!-- 顾客菜单 --> <!-- 顾客菜单 -->
<template v-else-if="isCustomer"> <template v-else-if="isCustomer">
<view class="menu-card" @click="goTo('/pages/product/list')"> <view class="menu-card" @click="goTo('/pages/product/list')">
<Icon name="product" :size="36" color="#fff" /> <Icon name="product" :size="36" color="#667eea" />
<text class="menu-card-title">商品浏览</text> <text class="menu-card-title">商品浏览</text>
</view> </view>
</template> </template>
<!-- 游客菜单 --> <!-- 游客菜单 -->
<template v-else-if="isGuest"> <template v-else-if="isGuest">
<view class="guest-card" @click="goTo('/pages/login/index')"> <view class="guest-card" @click="goTo('/pages/login/index')">
<Icon name="user" :size="80" color="#fff" /> <Icon name="user" :size="80" color="#667eea" />
<text class="guest-text">点击登录</text> <text class="guest-text">点击登录</text>
</view> </view>
</template> </template>
@@ -167,7 +167,7 @@
<!-- 退出登录 --> <!-- 退出登录 -->
<view class="logout-section" v-if="!isGuest"> <view class="logout-section" v-if="!isGuest">
<button class="logout-btn" @click="logout"> <button class="logout-btn" @click="logout">
<Icon name="logout" :size="32" color="#fff" style="margin-right: 10rpx" /> <Icon name="logout" :size="32" color="#667eea" style="margin-right: 10rpx" />
退出登录 退出登录
</button> </button>
</view> </view>
@@ -424,7 +424,7 @@ export default {
.menu-card { .menu-card {
width: 18%; width: 18%;
aspect-ratio: 1; aspect-ratio: 1;
background: linear-gradient(135deg, #e0e5ec 0%, #ffffff 100%); background: #ffffff;
border-radius: 12rpx; border-radius: 12rpx;
margin: 8rpx; margin: 8rpx;
display: flex; display: flex;
@@ -432,7 +432,7 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 6rpx; padding: 6rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
} }
.menu-card:active { .menu-card:active {
@@ -441,7 +441,7 @@ export default {
.menu-card-title { .menu-card-title {
font-size: 20rpx; font-size: 20rpx;
color: #fff; color: #333;
font-weight: bold; font-weight: bold;
margin-top: 6rpx; margin-top: 6rpx;
} }
@@ -488,6 +488,7 @@ export default {
} }
.menu-card-title { .menu-card-title {
color: #333;
font-size: 28rpx; font-size: 28rpx;
font-weight: bold; font-weight: bold;
color: #333; color: #333;