From fde71d2ccfc68c929106a8a1eeb69b42ed00e855 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期二, 31 十月 2023 17:09:28 +0800
Subject: [PATCH] Merge branch 'wn' of http://192.168.5.5:10010/r/web/bulletin-board-style1 into dev

---
 src/views/dashboard/components/ProcessInfo.vue |  113 +++++++++++++++++++++++++++++++++++++
 src/views/dashboard/index.vue                  |    8 ++
 src/views/dashboard/components/PersonInfo.vue  |   15 +++--
 3 files changed, 129 insertions(+), 7 deletions(-)

diff --git a/src/views/dashboard/components/PersonInfo.vue b/src/views/dashboard/components/PersonInfo.vue
index 95693e4..72df2e2 100644
--- a/src/views/dashboard/components/PersonInfo.vue
+++ b/src/views/dashboard/components/PersonInfo.vue
@@ -56,26 +56,29 @@
   width: 100%;
   height: 60px;
   line-height: 60px;
-  margin-bottom: 10px;
+  margin-top: 10px;
   border-radius: 10px;
   background: $status-default;
   color: #fff;
+  overflow: hidden;
 
   .person-l {
+    width: 80px;
+    height: 40px;
+    line-height: 40px;
+    padding: 10px 0px;
+    text-align: center;
     float: left;
-    margin-right: 10px;
     font-size: 40px;
   }
 
   .person-r {
+    width: calc(100% - 80px);
     font-size: 20px;
     font-weight: 600;
-    margin-right: 10px;
-    // background: pink;
-    padding-top: 10px;
-
     span {
       color: $status-star;
+      margin-left: 10px;
     }
   }
 }
diff --git a/src/views/dashboard/components/ProcessInfo.vue b/src/views/dashboard/components/ProcessInfo.vue
new file mode 100644
index 0000000..18d6995
--- /dev/null
+++ b/src/views/dashboard/components/ProcessInfo.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="process-info">
+    <div class="item-l-bng">
+      <img src="~@/assets/images/process-model.png" />
+    </div>
+    <div class="item-r">
+      <div class="item-r-t font_weight">{{ process.number }}</div>
+      <div class="item-r-b">{{ process.name }}</div>
+      <div class="item-r-b">{{ process.name }}</div>
+    </div>
+    <div class="tip-r">
+      <img src="~@/assets/images/process-tip.png" />
+    </div>
+    <div class="tip-current">褰撳墠浣跨敤</div>
+    <div class="btn">
+      <el-button type="primary" class="color_organge"> 鏇存柊宸ヨ壓</el-button>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, toRefs } from 'vue'
+export interface ProcessInfoProps {
+  process?: process
+}
+
+const props = defineProps<ProcessInfoProps>()
+const { process } = toRefs(props)
+</script>
+
+<style scoped lang="scss">
+$status-running: #f76c0f;
+$status-done: #2c5dbb82;
+.font_weight {
+  font-weight: 600;
+}
+.process-info {
+  width: calc(50% - 35px);
+  height: 110px;
+  padding: 23px 10px 10px;
+  background: $status-done;
+  border-radius: 8px;
+  float: left;
+  overflow: hidden;
+  font-size: 15px;
+  position: relative;
+  margin-bottom: 30px;
+
+  &:nth-of-type(odd) {
+    margin-right: 30px;
+  }
+
+  .item-l-bng {
+    width: 40px;
+    float: left;
+    margin-right: 20px;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .item-r {
+    width: calc(100% - 60px);
+    float: left;
+    line-height: 25px;
+    color: #fff;
+    font-size: 16px;
+    cursor: pointer;
+
+    .item-r-t {
+      font-size: 16px;
+    }
+
+    .item-r-b {
+      font-size: 14px;
+    }
+  }
+
+  .tip-r {
+    position: absolute;
+    top: 5px;
+    right: 15px;
+    width: 20px;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .tip-current {
+    background: green;
+    color: #fff;
+    position: absolute;
+    top: 0px;
+    left: 70px;
+    width: auto;
+    padding: 2px 15px;
+    font-size: 12px;
+    border-radius: 0px 0px 6px 6px;
+  }
+
+  .btn {
+    width: 100px;
+    position: absolute;
+    right: 0px;
+    bottom: 10px;
+    .el-button--primary {
+      background: $status-running;
+      border: 0 !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 9036baa..e086940 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -12,7 +12,9 @@
         <el-tab-pane label="鍔犲伐淇℃伅" name="鍔犲伐淇℃伅">
           <ProcessingInfo style="margin-top: 6px" :task="activeTask"></ProcessingInfo>
         </el-tab-pane>
-        <el-tab-pane label="宸ヨ壓淇℃伅" name="宸ヨ壓淇℃伅">Config</el-tab-pane>
+        <el-tab-pane label="宸ヨ壓淇℃伅" name="宸ヨ壓淇℃伅">
+          <ProcessInfo :process="process"></ProcessInfo>
+        </el-tab-pane>
         <el-tab-pane label="鐗╂枡娓呭崟" name="鐗╂枡娓呭崟">Role</el-tab-pane>
       </el-tabs>
     </template>
@@ -42,6 +44,7 @@
 import ChannelCollapse from '@/views/dashboard/components/ChannelCollapse.vue'
 import type { Worker } from '@/api/task'
 import PersonInfo from '@/views/dashboard/components/PersonInfo.vue'
+import ProcessInfo from '@/views/dashboard/components/ProcessInfo.vue'
 import type { LabelValue } from '@/views/dashboard/components/TaskTabs.vue'
 import TaskTabs from '@/views/dashboard/components/TaskTabs.vue'
 import CurrentDateTime from '@/views/dashboard/components/CurrentDateTime.vue'
@@ -61,6 +64,9 @@
     phone: '111'
   } as unknown as Worker
 })
+const process = computed(() => {
+  return { name: '宸ヨ壓鍚嶇О', number: '111' }
+})
 const taskTabsList = [
   {
     label: '鏈畬鎴�',

--
Gitblit v1.8.0