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