fix: 卡片改为纯白底,图标和文字改为深色,简洁美观
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user