//底部导航
"tabBar":{
"borderStyle":"white",
"backgroundColor":"#fafafc",
"selectedColor":"#55aaff",
"color":"#000000",
"list":[
{
"iconPath":"/static/images/index/index.png",
"selectedIconPath":"/static/images/index/index-fill.png",
"text":"首页",
"pagePath":"pages/tabbar/index/index"
},
{
"iconPath":"/static/images/index/user.png",
"selectedIconPath":"/static/images/index/user-fill.png",
"text":"个人信息",
"pagePath":"pages/tabbar/userInfo/userInfo"
}
]
}将全局样式转变成局部样式 <template>
<!-- 完全移除搜索区域后的页面结构 -->
<view class="warehouse-container">
<!-- 顶部导航栏保持不变 -->
<view class="header">
<!-- 用户信息等保持不变 -->
</view>
<!-- 欢迎横幅保持不变 -->
<view class="welcome-banner">
<view class="banner-content">
<view class="welcome-title">
<text class="welcome-text">欢迎使用</text>
<text class="system-name">智慧仓储管理系统</text>
</view>
<text class="welcome-subtitle">高效 · 精准 · 智能化管理您的仓库</text>
</view>
<image src="/static/wave.png" class="banner-wave" />
</view>
<!-- 核心功能区 -->
<view class="main-functions">
<!-- 功能网格 -->
<view class="function-grid">
<view
v-for="(item, index) in functions"
:key="index"
class="grid-item"
@tap="navigateTo(item.path)"
>
<view class="icon-wrapper">
<uni-icons :type="item.icon" size="50" color="#5e8fff"></uni-icons>
</view>
<text class="item-label">{{ item.label }}</text>
</view>
</view>
<!-- 库存概览 -->
<!-- <view class="inventory-section">
<view class="section-header">
<text class="section-title">库存概览</text>
<text class="view-all" @tap="navToInventory">查看全部 ></text>
</view>
<view class="inventory-metrics">
<view class="metric-card">
<text class="metric-value">1,256</text>
<text class="metric-label">库存种类</text>
</view>
<view class="metric-card warning">
<text class="metric-value">48</text>
<text class="metric-label">库存预警</text>
</view>
<view class="metric-card">
<text class="metric-value">¥256,890</text>
<text class="metric-label">库存总值</text>
</view>
</view>
</view> -->
<!-- 最近操作记录 -->
<!-- <view class="recent-activity">
<view class="section-header">
<text class="section-title">最近操作</text>
</view>
<view class="activity-list">
<view class="activity-item">
<uni-icons type="arrow-up" size="32" color="#52c41a"></uni-icons>
<view class="activity-detail">
<text class="activity-title">A4打印纸入库</text>
<text class="activity-time">今天 10:30</text>
</view>
<text class="activity-quantity">+500箱</text>
</view> -->
<!-- 更多活动项 -->
<!-- </view> -->
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
functions: [
{ icon: 'plus', label: '新增入库', path: '/pages/tabbar/storageManagement/newOrder' },
{ icon: 'minus', label: '新增出库', path: '/pages/outbound/create' },
{ icon: 'list', label: '库存查询', path: '/pages/tabbar/storageManagement/selectOrder' },
// { icon: 'stats-bars', label: '库存统计', path: '/pages/report/stock' },
// { icon: 'alert', label: '库存预警', path: '/pages/warning/list' },
// { icon: 'person', label: '供应商管理', path: '/pages/supplier/list' }
]
}
},
methods: {
navigateTo(path) {
uni.navigateTo({ url: path
})
},
navToInventory() {
uni.navigateTo({ url: '/pages/inventory/list' })
}
}
}
</script>
<style lang="scss">
/* 全局样式保留 */
.warehouse-container {
padding: 30rpx;
background-color: #f5f7fa;
min-height: 100vh;
}
/* 欢迎横幅样式保留 */
.welcome-banner {
position: relative;
height: 240rpx;
background: linear-gradient(135deg, #5e8fff, #6b7de9);
border-radius: 25rpx;
margin-bottom: 40rpx;
overflow: hidden;
box-shadow: 0 15rpx 30rpx rgba(94, 143, 255, 0.35);
.banner-content {
padding: 40rpx 35rpx;
position: relative;
z-index: 2;
}
.welcome-title {
display: flex;
flex-direction: column;
margin-bottom: 15rpx;
}
.welcome-text {
font-size: 36rpx;
color: rgba(255, 255, 255, 0.9);
font-weight: 400;
}
.system-name {
font-size: 46rpx;
color: #ffffff;
font-weight: bold;
letter-spacing: 1rpx;
}
.welcome-subtitle {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.85);
}
.banner-wave {
position: absolute;
bottom: 0;
width: 100%;
height: 80rpx;
z-index: 1;
}
}
/* 功能网格样式 */
.function-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30rpx;
margin-bottom: 50rpx;
.grid-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 35rpx 0;
background: #ffffff;
border-radius: 25rpx;
box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
&:active {
transform: scale(0.96);
box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.08);
}
}
.icon-wrapper {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background: rgba(94, 143, 255, 0.12);
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20rpx;
}
.item-label {
font-size: 30rpx;
color: #5a6573;
font-weight: 500;
}
}
/* 库存概览样式 */
// .inventory-section {
// background: #ffffff;
// border-radius: 25rpx;
// padding: 35rpx;
// margin-bottom: 40rpx;
// box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
// .section-header {
// display: flex;
// justify-content: space-between;
// align-items: center;
// margin-bottom: 35rpx;
// }
// .section-title {
// font-size: 36rpx;
// font-weight: 600;
// color: #2c3e50;
// }
// .view-all {
// font-size: 28rpx;
// color: #5e8fff;
// font-weight: 500;
// }
// .inventory-metrics {
// display: grid;
// grid-template-columns: repeat(3, 1fr);
// gap: 25rpx;
// }
// .metric-card {
// background: #f8faff;
// border-radius: 20rpx;
// padding: 30rpx 20rpx;
// text-align: center;
// border: 1rpx solid #e6eeff;
// &.warning {
// background: #fff8f6;
// border-color: #ffccc7;
// }
// .metric-value {
// display: block;
// font-size: 38rpx;
// font-weight: 700;
// color: #2c3e50;
// margin-bottom: 10rpx;
// }
// .metric-label {
// font-size: 26rpx;
// color: #7a8599;
// }
// }
// }
/* 最近操作样式 */
// .recent-activity {
// background: #ffffff;
// border-radius: 25rpx;
// padding: 35rpx;
// box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
// .activity-list {
// .activity-item {
// display: flex;
// align-items: center;
// padding: 30rpx 0;
// border-bottom: 1rpx solid #f0f2f7;
// &:last-child {
// border-bottom: none;
// }
// }
// .activity-detail {
// flex: 1;
// margin-left: 25rpx;
// }
// .activity-title {
// display: block;
// font-size: 32rpx;
// color: #2c3e50;
// margin-bottom: 8rpx;
// }
// .activity-time {
// font-size: 26rpx;
// color: #a0a7b3;
// }
// .activity-quantity {
// font-size: 32rpx;
// font-weight: 600;
// color: #52c41a;
// }
// }
// }
</style>
最新发布