yangzifeng/shzg_projectManage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页样式调整

Browse Source
This commit is contained in:
zx
2026-02-05 08:30:36 +08:00
parent 00af708be9
commit c318e667cb
5 changed files with 89 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
src/views/index.vue
View File

@@ -1,110 +1,61 @@
<template>
<div class="dashboard app-container">
<el-row :gutter="24">
<el-col :span="4">
<div class="boxNum" style="background: linear-gradient(to right bottom, #ec4786, #b955a4)">
<div style="font-size: 18px;">月项目数(入库)</div>
<div class="boxNum_icon">
<el-icon size="24">
<OfficeBuilding />
</el-icon>
<div>{{ countObj.monthInCount }}</div>
<el-col :span="12">
<div class="inOrOutBox" style="background-color: #FDF6E3;">
<div class="inOrOutBox_left">
<div style="font-size: 20px; font-weight:bold; color:#333333; ">月入库统计</div>
<div class="itemBox">
<div>
<p style="font-size: 14px;color:#606266">项目数 </p>
<p style="font-size: 20px; font-weight:500; ">{{ countObj.monthInCount }} </p>
</div>
<div>
<p style="font-size: 14px;color:#606266 ">条目数 </p>
<p style="font-size: 20px;font-weight:500;">{{ countObj.monthInProjectCount }} </p>
</div>
<div>
<p style="font-size: 14px; color:#606266">总金额 </p>
<p style="font-size: 20px; font-weight:500;">{{ countObj.monthInAmount }} </p>
</div>
</div>
</div>
<div class="inOrOutBox_icon">
<img src="../assets/images/inbound.png" alt="">
</div>
</div>
</el-col>
<el-col :span="4">
<div class="boxNum" style="background: linear-gradient(to right bottom, #865ec0, #5144b4);">
<div style="font-size: 18px;">月条目数(入库)</div>
<div class="boxNum_icon">
<el-icon size="24">
<OfficeBuilding />
</el-icon>
<div>{{ countObj.monthInProjectCount }}</div>
<el-col :span="12">
<div class="inOrOutBox" style="background-color: #EBF5FF;">
<div class="inOrOutBox_left">
<div style="font-size: 20px; font-weight:bold;color:#333333 ">月出库统计</div>
<div class="itemBox">
<div>
<p style="font-size: 14px;color:#606266 ">项目数 </p>
<p style="font-size: 20px;font-weight:500; ">{{ countObj.monthOutCount }} </p>
</div>
<div>
<p style="font-size: 14px; color:#606266">条目数 </p>
<p style="font-size: 20px; font-weight:500;">{{ countObj.monthOutProjectCount }} </p>
</div>
<div>
<p style="font-size: 14px; color:#606266">总金额 </p>
<p style="font-size: 20px; font-weight:500;">{{ countObj.monthOutAmount }} </p>
</div>
</div>
</div>
<div class="inOrOutBox_icon">
<img src="../assets/images/outbound.png" alt="">
</div>
</div>
</el-col>
<el-col :span="4">
<div class="boxNum" style="background: linear-gradient(to right bottom, #56cdf3, #719de3);">
<div style="font-size: 18px;">月总金额(入库)</div>
<div class="boxNum_icon">
<el-icon size="24">
<OfficeBuilding />
</el-icon>
<div>{{ countObj.monthInAmount }}</div>
</div>
</div>
</el-col>
<!-- <el-col :span="3">
<div class="boxNum" style="background: linear-gradient(to right bottom, #fcbc25, #f68057);">
<div style="font-size: 18px;">月总数(入库)</div>
<div class="boxNum_icon">
<el-icon size="24"><OfficeBuilding /></el-icon>
<div>{{ countObj.inSummary.totalQty }}</div>
</div>
</div>
</el-col> -->
<el-col :span="4">
<div class="boxNum" style="background: linear-gradient(to right bottom, #ec4786, #b955a4)">
<div style="font-size: 18px;">月项目数(出库)</div>
<div class="boxNum_icon">
<el-icon size="24">
<OfficeBuilding />
</el-icon>
<div>{{ countObj.monthOutCount }}</div>
</div>
</div>
</el-col>
<el-col :span="4">
<div class="boxNum" style="background: linear-gradient(to right bottom, #865ec0, #5144b4);">
<div style="font-size: 18px;">月条目数(出库)</div>
<div class="boxNum_icon">
<el-icon size="24">
<OfficeBuilding />
</el-icon>
<div>{{ countObj.monthOutProjectCount }}</div>
</div>
</div>
</el-col>
<el-col :span="4">
<div class="boxNum" style="background: linear-gradient(to right bottom, #56cdf3, #719de3);">
<div style="font-size: 18px;">月总金额(出库)</div>
<div class="boxNum_icon">
<el-icon size="24">
<OfficeBuilding />
</el-icon>
<div>{{ countObj.monthOutAmount }}</div>
</div>
</div>
</el-col>
<!-- <el-col :span="3">
<div class="boxNum" style="background: linear-gradient(to right bottom, #fcbc25, #f68057);">
<div style="font-size: 18px;">月总数(出库)</div>
<div class="boxNum_icon">
<el-icon size="24"><OfficeBuilding /></el-icon>
<div>{{ countObj.outSummary.totalQty }}</div>
</div>
</div>
</el-col> -->
</el-row>
<el-row :gutter="24" style="margin-top: 20px;">
<!-- <el-col :span="6">
<div class="main">
<div class="titleBox">
<div class="line"></div>
<div class="name">
<div>仓库概览</div>
</div>
</div>
<div class="main_progress" style="margin-top: 35px;">总库位100</div>
<el-progress :show-text="false" :stroke-width="20" :percentage="70" />
<div class="main_progress">已用库位100</div>
<el-progress :show-text="false" :stroke-width="20" :percentage="70" />
<div class="main_progress">可用库位100</div>
<el-progress :show-text="false" :stroke-width="20" :percentage="70" />
</div>
</el-col> -->
<el-col :span="8">
<div class="main">
<div class="titleBox">
@@ -291,9 +242,12 @@
<div class="line"></div>
<div class="name">
<div>入库类型统计</div>
<el-date-picker v-model="dateInventoryTypeObj" type="daterange" range-separator="至"
start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" style="margin: 0 20px;" />
<el-button type="primary" @click="getInventoryTypeList">搜索</el-button>
<div>
<el-date-picker v-model="dateInventoryTypeObj" type="daterange" range-separator="至"
start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" style="margin: 0 20px;" />
<el-button type="primary" @click="getInventoryTypeList">搜索</el-button>
</div>
</div>
</div>
<div class="echartsBox" style="margin-top: 20px;" id="echartsInventoryType"></div>
@@ -305,9 +259,11 @@
<div class="line"></div>
<div class="name">
<div>出库类型统计</div>
<el-date-picker v-model="dateOutInventoryTypeObj" type="daterange" range-separator="至"
start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" style="margin: 0 20px;" />
<el-button type="primary" @click="getOutInventoryTypeList">搜索</el-button>
<div>
<el-date-picker v-model="dateOutInventoryTypeObj" type="daterange" range-separator="至"
start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" style="margin: 0 20px;" />
<el-button type="primary" @click="getOutInventoryTypeList">搜索</el-button>
</div>
</div>
</div>
<div class="echartsBox" style="margin-top: 20px;" id="echartsOutInventoryType"></div>
@@ -1163,6 +1119,34 @@ const getChartInventoryType = (data, id) => {
background-color: #F5F5F5;
padding: 32rpx;
.itemBox {
display: flex;
justify-content: space-between;
margin-top: 8px;
}
.inOrOutBox {
padding: 20px;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
.inOrOutBox_left {
width: 60%;
}
.inOrOutBox_icon {
img {
width: 80px;
height: 80px;
opacity: 0.3;
}
}
}
.boxNum {
height: 100px;
width: 100%;
@@ -1196,9 +1180,11 @@ const getChartInventoryType = (data, id) => {
}
.name {
width: 100%;
margin-left: 8px;
display: flex;
align-items: center;
justify-content: space-between;
height: 28px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;