web/bulletin-board-style1.git

New file
			@@ -0,0 +1,112 @@
			<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>