<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.product }}</div>
|
<div class="item-r-b">{{ process.procedure }}</div>
|
</div>
|
<div v-if="process.isUpdate" class="tip-r">
|
<img src="~@/assets/images/process-tip.png" />
|
</div>
|
<div v-if="process.isUpdate" class="tip-current">当前使用</div>
|
<div class="btn">
|
<el-button type="primary" class="color_organge"> 更新工艺 </el-button>
|
</div>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { toRefs } from 'vue'
|
const props = defineProps<{
|
process: { product: '产品名称'; number: '111'; procedure: '工艺名称'; isUpdate: true }
|
}>()
|
const { process } = toRefs(props)
|
</script>
|
|
<style scoped lang="scss">
|
$status-running: #f76c0f;
|
$status-done: #2c5dbb82;
|
$status-ready: #00ff00f0;
|
.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: $status-ready;
|
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>
|
