Skip to content

F
factory_front
Commit 05565f21 by qinjianhui
Options

fix: 样式修改

parent ce37c11e
Showing with 31 additions and 62 deletions
src/views/Dashboard.vue
<template> <template>
<div class="dashboard-wrapper"> <div class="dashboard-wrapper">
<div class="card-wrapper">
<div class="dashboard-title">核心数据看板</div> <div class="dashboard-title">核心数据看板</div>
<el-row class="card-container" :gutter="20"> <div class="card-container-wrapper">
<el-col :span="6"> <div class="card-container">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">今日新单（件/单）</div> <div class="card-title">今日新单（件/单）</div>
...@@ -25,8 +26,6 @@ ...@@ -25,8 +26,6 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<el-col :span="6">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">今日接单（件/单）</div> <div class="card-title">今日接单（件/单）</div>
...@@ -49,8 +48,6 @@ ...@@ -49,8 +48,6 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<el-col :span="6">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">未发货订单（单）</div> <div class="card-title">未发货订单（单）</div>
...@@ -69,8 +66,6 @@ ...@@ -69,8 +66,6 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<el-col :span="6">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">超时未发订单（单）</div> <div class="card-title">超时未发订单（单）</div>
...@@ -89,10 +84,8 @@ ...@@ -89,10 +84,8 @@
</div> </div>
</div> </div>
</div> </div>
</el-col> </div>
</el-row> <div class="card-container" :gutter="20">
<el-row class="card-container" :gutter="20">
<el-col :span="6">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">昨日发货数（单）</div> <div class="card-title">昨日发货数（单）</div>
...@@ -136,8 +129,6 @@ ...@@ -136,8 +129,6 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<el-col :span="6">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">24h发货率</div> <div class="card-title">24h发货率</div>
...@@ -165,8 +156,8 @@ ...@@ -165,8 +156,8 @@
> >
<div class="text-red"> <div class="text-red">
{{ {{
(statisticData?.compareLastDayShipmentRateOf24Hour ?? '-') + (statisticData?.compareLastDayShipmentRateOf24Hour ??
'%' '-') + '%'
}} }}
</div> </div>
<div class="up-icon"></div> <div class="up-icon"></div>
...@@ -184,8 +175,6 @@ ...@@ -184,8 +175,6 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<el-col :span="6">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">48h发货率</div> <div class="card-title">48h发货率</div>
...@@ -213,8 +202,8 @@ ...@@ -213,8 +202,8 @@
> >
<div class="text-red"> <div class="text-red">
{{ {{
(statisticData?.compareLastDayShipmentRateOf48Hour ?? '-') + (statisticData?.compareLastDayShipmentRateOf48Hour ??
'%' '-') + '%'
}} }}
</div> </div>
<div class="up-icon"></div> <div class="up-icon"></div>
...@@ -232,8 +221,6 @@ ...@@ -232,8 +221,6 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<el-col :span="6">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">发货超时率</div> <div class="card-title">发货超时率</div>
...@@ -266,8 +253,8 @@ ...@@ -266,8 +253,8 @@
> >
<div class="text-red"> <div class="text-red">
{{ {{
(statisticData?.compareLastDayOverTimeShipmentRate ?? '-') + (statisticData?.compareLastDayOverTimeShipmentRate ??
'%' '-') + '%'
}} }}
</div> </div>
<div class="up-icon"></div> <div class="up-icon"></div>
...@@ -285,10 +272,8 @@ ...@@ -285,10 +272,8 @@
</div> </div>
</div> </div>
</div> </div>
</el-col> </div>
</el-row> <div class="card-container">
<el-row class="card-container" :gutter="20">
<el-col :span="6">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">待创建物流（单）</div> <div class="card-title">待创建物流（单）</div>
...@@ -307,8 +292,6 @@ ...@@ -307,8 +292,6 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<el-col :span="6">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">待排单（单）</div> <div class="card-title">待排单（单）</div>
...@@ -327,8 +310,6 @@ ...@@ -327,8 +310,6 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<el-col :span="6">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">生产中（单）</div> <div class="card-title">生产中（单）</div>
...@@ -347,8 +328,6 @@ ...@@ -347,8 +328,6 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<el-col :span="6">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">待发货（单）</div> <div class="card-title">待发货（单）</div>
...@@ -367,8 +346,6 @@ ...@@ -367,8 +346,6 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<el-col :span="6">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">拦截申请（单）</div> <div class="card-title">拦截申请（单）</div>
...@@ -387,8 +364,6 @@ ...@@ -387,8 +364,6 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<el-col :span="6">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">异常单（单）</div> <div class="card-title">异常单（单）</div>
...@@ -407,10 +382,8 @@ ...@@ -407,10 +382,8 @@
</div> </div>
</div> </div>
</div> </div>
</el-col> </div>
</el-row> <div class="card-container">
<el-row class="card-container" :gutter="20">
<el-col :span="6">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">缺货中订单（单）</div> <div class="card-title">缺货中订单（单）</div>
...@@ -429,8 +402,6 @@ ...@@ -429,8 +402,6 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<el-col :span="6">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">缺货&lt;24h单（单）</div> <div class="card-title">缺货&lt;24h单（单）</div>
...@@ -449,8 +420,6 @@ ...@@ -449,8 +420,6 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<el-col :span="6">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">缺货&lt;48h单（单）</div> <div class="card-title">缺货&lt;48h单（单）</div>
...@@ -469,8 +438,6 @@ ...@@ -469,8 +438,6 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<el-col :span="6">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">缺货≥48h单（单）</div> <div class="card-title">缺货≥48h单（单）</div>
...@@ -489,8 +456,6 @@ ...@@ -489,8 +456,6 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<el-col :span="6">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">缺货库存SKU数</div> <div class="card-title">缺货库存SKU数</div>
...@@ -509,8 +474,6 @@ ...@@ -509,8 +474,6 @@
</div> </div>
</div> </div>
</div> </div>
</el-col>
<el-col :span="6">
<div class="card-item"> <div class="card-item">
<div class="card-item-header"> <div class="card-item-header">
<div class="card-title">缺货总件数</div> <div class="card-title">缺货总件数</div>
...@@ -529,8 +492,9 @@ ...@@ -529,8 +492,9 @@
</div> </div>
</div> </div>
</div> </div>
</el-col> </div>
</el-row> </div>
</div>
<div class="chart-wrapper" style="width: 100%"> <div class="chart-wrapper" style="width: 100%">
<el-radio-group <el-radio-group
v-model="chartTimes1" v-model="chartTimes1"
...@@ -1129,22 +1093,27 @@ onBeforeUnmount(() => { ...@@ -1129,22 +1093,27 @@ onBeforeUnmount(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.dashboard-title { .dashboard-title {
font-size: 22px; font-size: 20px;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
margin: 0px 0 10px 20px; padding: 10px 20px;
}
.card-wrapper {
background-color: #fff;
}
.card-container-wrapper {
padding: 0 20px 20px;
} }
.card-container { .card-container {
padding: 15px 0 0 10px;
width: 100%; width: 100%;
margin-bottom: 10px;
background-color: #fff; background-color: #fff;
border-radius: 5px; border-radius: 5px;
box-sizing: border-box; box-sizing: border-box;
display: grid;
:deep(.el-col) { grid-template-columns: repeat(4, 1fr);
margin-bottom: 15px; gap: 20px;
&:not(:last-child) {
margin-bottom: 20px;
} }
.card-item { .card-item {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment