From 21df61612c3af131f495a83bd6c715b6df45b57b Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期五, 03 十一月 2023 10:27:51 +0800
Subject: [PATCH] 物料详情，运输详情的组件开发
---
src/views/dashboard/components/MaterialDetails.vue | 54 +++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 39 insertions(+), 15 deletions(-)
diff --git a/src/views/dashboard/components/MaterialDetails.vue b/src/views/dashboard/components/MaterialDetails.vue
index 9801f76..1df2fdc 100644
--- a/src/views/dashboard/components/MaterialDetails.vue
+++ b/src/views/dashboard/components/MaterialDetails.vue
@@ -16,23 +16,26 @@
</div>
</div>
<div class="details-b">
- <el-scrollbar always class="scroller">
- <div class="details-b-t">杩愯緭璇︽儏</div>
- <div class="details-b-b">
+ <div class="details-b-t">杩愯緭璇︽儏</div>
+
+ <div class="details-b-b">
+ <el-scrollbar always class="scroller">
<el-steps finish-status="success" class="steps" direction="vertical">
<el-step v-for="(item, index) in materialObj.materialFlow" :key="index" icon="">
<template #title>
{{ item.label }}
</template>
<template #description>
- {{ item.date }}
- {{ item.name }}
- {{ item.deviceName }}
+ <div class="details-date">{{ item.date }}</div>
+ <div class="details-name">
+ {{ item.name }}
+ <span>{{ item.deviceName }}</span>
+ </div>
</template>
</el-step>
</el-steps>
- </div>
- </el-scrollbar>
+ </el-scrollbar>
+ </div>
</div>
</div>
</BaseModal>
@@ -94,7 +97,7 @@
</script>
<style scoped lang="scss">
$status-default: #03d203f0;
-$status-running: #f76c0f;
+$status-running: #33ccff;
$status-ready: #13235a;
$status-done: #0dfde6;
.details-box {
@@ -145,12 +148,12 @@
line-height: 30px;
height: 30px;
width: 100%;
+ margin-bottom: 20px;
}
.details-b-b {
width: 100%;
- height: calc(100% - 30px);
- overflow-x: auto;
- margin-top: -5px;
+ height: calc(100% - 60px);
+ overflow-y: auto;
padding: 0 20px;
.steps {
height: 100%;
@@ -158,12 +161,33 @@
width: 16px;
height: 16px;
}
+ :deep(.el-step__icon.is-text) {
+ border-color: $status-running !important;
+ }
+ :deep(.el-step__icon-inner) {
+ display: none !important;
+ }
.el-step__title {
line-height: 25px;
- font-size: 14px;
+ font-size: 18px;
}
- .el-step__title.is-process {
- color: #a8abb2;
+ // .el-step__title.is-process {
+ // color: #a8abb2;
+ // }
+ }
+ .details-date {
+ color: #fff;
+ font-size: 14px;
+ line-height: 20px;
+ margin-top: 5px;
+ }
+ .details-name {
+ color: #fff;
+ font-size: 14px;
+ line-height: 20px;
+ margin: 10px 0 20px;
+ span {
+ margin-left: 15px;
}
}
}
--
Gitblit v1.8.0