~admin/mdc-front.git

			@@ -1,7 +1,7 @@
			<!--
			* @Date: 2024-01-05 22:26:22
			* @LastEditors: Sneed
			* @LastEditTime: 2024-01-21 16:44:56
			* @LastEditTime: 2024-01-27 18:51:34
			* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/mapPreviewDetail/index.vue
			-->
			<template>
			@@ -69,6 +69,7 @@
			<div class="right_1">
			<p>工段: 204</p>
			<p>名称: YKXXXXX</p>
			<div class="line"></div>
			<ul>
			<li>
			<img src="./img/sd.png" alt="">
			@@ -106,35 +107,41 @@
			</div>
			</li>
			</ul>
			<p>机床状态</p>
			<p>待机原因</p>
			<div class="line"></div>
			<p>机床状态:
			<span class="img-status" v-if="status === 'STOP'">停机</span>
			<span class="img-status run" v-if="status === 'RUN'">运行</span>
			<span class="img-status standby" v-if="status === 'IDLE'">待机</span>
			<span class="img-status alerm" v-if="status === 'ALARM'">报警</span>
			</p>
			<p>待机原因: 保养方式出现问题</p>
			</div>
			<div class="right_2">
			<p>加工数据</p>
			<ul>
			<li>
			<span>程序名称</span>
			<span>程序名称</span>
			<span>程序名称:</span>
			<span>XXX</span>
			</li>
			<li>
			<span>程序名称</span>
			<span>程序名称</span>
			<span>零件号:</span>
			<span>XXX</span>
			</li>
			<li>
			<span>程序名称</span>
			<span>程序名称</span>
			<span>控制模型:</span>
			<span>XXX</span>
			</li>
			<li>
			<span>程序名称</span>
			<span>程序名称</span>
			<span>工序号:</span>
			<span>XXX</span>
			</li>
			<li>
			<span>程序名称</span>
			<span>程序名称</span>
			<span>主轴转速:</span>
			<span>XXX</span>
			</li>
			<li>
			<span>程序名称</span>
			<span>程序名称</span>
			<span>进给速度:</span>
			<span>XXX</span>
			</li>
			</ul>
			</div>
			@@ -166,7 +173,8 @@
			},
			data() {
			return {
			name: '车间列表 / 2厂 / YYYYYYYYss'
			name: '车间列表 / 2厂 / YYYYYYYYss',
			status: 'RUN',// RUN IDLE ALARM
			}
			},
			methods: {
			@@ -273,6 +281,7 @@
			background: linear-gradient(130deg, #FF3333 0%, #F2BF24 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			cursor: pointer;

			}

			@@ -298,6 +307,7 @@
			height: 197px;
			background: url('./img/circle.png');
			position: relative;
			background-size: contain;

			span:first-child {
			position: absolute;
			@@ -340,6 +350,7 @@
			width: 180px;
			height: 180px;
			background: url('./img/yq.png');
			background-size: contain;

			span.zz {
			position: absolute;
			@@ -392,21 +403,96 @@
			width: 100%;
			height: 418px;
			background: url('./img/right_1.png');
			padding: 0 14px;
			overflow: hidden;

			&>p {
			font-size: 21px;
			font-family: PingFangSC, PingFang SC;
			color: #C3E1E1;
			line-height: 32px;
			padding-left: 34px;
			padding-right: 14px;
			position: relative;
			}

			&>p:first-child {
			margin-top: 32px;
			margin-bottom: 12px;

			}

			&>p:last-child {
			margin-top: 14px;
			margin-bottom: 12px;

			}

			p::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 14px;
			transform: translateY(-50%);
			width: 7px;
			height: 7px;
			border-radius: 7px;
			background: linear-gradient(180deg, #9AFEFE 0%, #4B78CD 100%);
			}

			div.line {
			margin-top: 14px;
			height: 0;
			border-bottom: 1px dashed #C3E1E1;
			margin-bottom: 14px;
			}

			ul {
			list-style: none;
			display: flex;
			flex-wrap: wrap;

			li {
			display: flex;
			align-items: center;
			padding: 4px 12px;
			font-size: 12px;

			img {
			width: 46px;
			height: 46px;
			margin-right: 12px;
			}
			}

			li~li {
			// margin: 0 12px;
			}
			}
			}

			.right_2 {

			margin-top: 16px;
			width: 100%;
			height: 208px;
			background: url('./img/right_2.png');
			p {
			font-size: 16px;
			color: #F7F8FA;
			line-height: 22px;
			padding: 8px 14px;
			}
			ul {
			list-style: none;
			display: flex;
			flex-wrap: wrap;
			li {
			flex: 0 0 auto;
			width: 50%;
			padding: 14px;
			}
			}
			}

			.right_2 {
			@@ -424,4 +510,29 @@
			}
			}
			}
			}

			.img-status {
			position: absolute;
			width: 68px;
			height: 30px;
			margin-left: 14px;
			color: #000;
			font-size: 12px;
			background: rgba(216, 216, 216, 0.09);
			border-radius: 15px;
			text-align: center;
			}

			.img-status.standby {
			background: linear-gradient(130deg, #FF3333 0%, #F2BF24 100%);
			}

			.img-status.run {
			background: linear-gradient(130deg, #EAF224 0%, #3DF297 100%);
			}

			.img-status.alerm {
			background: #FF3333;
			color: #fff;
			}</style>