1
This commit is contained in:
parent
335f61c0a1
commit
1b33520b61
@ -50,7 +50,53 @@ function handleResolutionChange(width, height) {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="main-container" ref="mainContainer" class="main-container">
|
<div id="main-container" ref="mainContainer" class="main-container">
|
||||||
<div id="main-container__fulleq"></div>
|
<div id="main-container__fulleq" style="background-color: #cc03">
|
||||||
|
<div class="absolute v-1 tag-container">
|
||||||
|
<span class="name-tag">M1上片</span>
|
||||||
|
<span class="name-tag">M2上片</span>
|
||||||
|
<span class="name-tag">M3上片</span>
|
||||||
|
<span class="name-tag">M4上片</span>
|
||||||
|
<span class="name-tag">M5上片</span>
|
||||||
|
<span class="name-tag">M6上片</span>
|
||||||
|
<span class="name-tag">M7上片</span>
|
||||||
|
</div>
|
||||||
|
<div class="absolute v-2 tag-container">
|
||||||
|
<span class="name-tag">M1磨边机</span>
|
||||||
|
<span class="name-tag">M2磨边机</span>
|
||||||
|
<span class="name-tag">M3磨边机</span>
|
||||||
|
<span class="name-tag">M4磨边机</span>
|
||||||
|
<span class="name-tag">M5磨边机</span>
|
||||||
|
<span class="name-tag">M6磨边机</span>
|
||||||
|
<span class="name-tag">M7磨边机</span>
|
||||||
|
</div>
|
||||||
|
<div class="absolute v-3 tag-container">
|
||||||
|
<span class="name-tag">M1清洗机</span>
|
||||||
|
<span class="name-tag">M2清洗机</span>
|
||||||
|
<span class="name-tag">M3清洗机</span>
|
||||||
|
<span class="name-tag">M4清洗机</span>
|
||||||
|
<span class="name-tag">M5清洗机</span>
|
||||||
|
<span class="name-tag">M6清洗机</span>
|
||||||
|
<span class="name-tag">M7清洗机</span>
|
||||||
|
</div>
|
||||||
|
<div class="absolute z-1 v-4 tag-container">
|
||||||
|
<span class="name-tag">Z1钻孔机</span>
|
||||||
|
<span class="name-tag">Z2钻孔机</span>
|
||||||
|
<span class="name-tag">Z3钻孔机</span>
|
||||||
|
<span class="name-tag">Z4钻孔机</span>
|
||||||
|
<span class="name-tag">Z5钻孔机</span>
|
||||||
|
<span class="name-tag">Z6钻孔机</span>
|
||||||
|
<span class="name-tag">Z7钻孔机</span>
|
||||||
|
</div>
|
||||||
|
<div class="absolute z-1 v-5 tag-container">
|
||||||
|
<span class="name-tag">S1清洗机</span>
|
||||||
|
<span class="name-tag">S2清洗机</span>
|
||||||
|
<span class="name-tag">S3清洗机</span>
|
||||||
|
<span class="name-tag">S4清洗机</span>
|
||||||
|
<span class="name-tag">S5清洗机</span>
|
||||||
|
<span class="name-tag">S6清洗机</span>
|
||||||
|
<span class="name-tag">S7清洗机</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<DatetimeTool />
|
<DatetimeTool />
|
||||||
<Tools @change-resolution="handleResolutionChange" />
|
<Tools @change-resolution="handleResolutionChange" />
|
||||||
<AppHeader />
|
<AppHeader />
|
||||||
@ -172,9 +218,100 @@ function handleResolutionChange(width, height) {
|
|||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
z-index: 10000;
|
||||||
background: url(./assets/full-lines.png) 100% / cover no-repeat;
|
background: url(./assets/full-lines.png) 100% / cover no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.name-tag {
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #ccc3;
|
||||||
|
backdrop-filter: blur(3px);
|
||||||
|
color: #000a;
|
||||||
|
font-size: 12px;
|
||||||
|
/* font-weight: 600; */
|
||||||
|
transition: background 0.1s ease-out;
|
||||||
|
user-select: none;
|
||||||
|
width: 72px;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
/* cursor: pointer; */
|
||||||
|
/* transform: rotate(-45deg); */
|
||||||
|
box-shadow: 0 0 5px 2px #0003;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .name-tag:hover {
|
||||||
|
background: #666c;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.tag-container > .name-tag:first-child {
|
||||||
|
bottom: 214px;
|
||||||
|
left: -128px;
|
||||||
|
}
|
||||||
|
.tag-container > .name-tag:nth-child(2) {
|
||||||
|
bottom: 182px;
|
||||||
|
left: -100px;
|
||||||
|
}
|
||||||
|
.tag-container > .name-tag:nth-child(3) {
|
||||||
|
bottom: 150px;
|
||||||
|
left: -88px;
|
||||||
|
}
|
||||||
|
.tag-container > .name-tag:nth-child(4) {
|
||||||
|
bottom: 118px;
|
||||||
|
left: -68px;
|
||||||
|
}
|
||||||
|
.tag-container > .name-tag:nth-child(5) {
|
||||||
|
bottom: 86px;
|
||||||
|
left: -52px;
|
||||||
|
}
|
||||||
|
.tag-container > .name-tag:nth-child(6) {
|
||||||
|
bottom: 32px;
|
||||||
|
left: -20px;
|
||||||
|
}
|
||||||
|
.tag-container > .name-tag:nth-child(7) {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.absolute {
|
||||||
|
position: absolute;
|
||||||
|
padding: 8px;
|
||||||
|
background: #f001;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-1 {
|
||||||
|
bottom: 160px;
|
||||||
|
left: 430px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-2 {
|
||||||
|
bottom: 200px;
|
||||||
|
left: 480px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-3 {
|
||||||
|
bottom: 250px;
|
||||||
|
left: 620px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-1 > .name-tag:first-child {
|
||||||
|
bottom: 205px;
|
||||||
|
left: -155px;
|
||||||
|
}
|
||||||
|
.z-1 > .name-tag:nth-child(2) {
|
||||||
|
bottom: 180px;
|
||||||
|
left: -130px;
|
||||||
|
}
|
||||||
|
.v-4 {
|
||||||
|
bottom: 300px;
|
||||||
|
left: 730px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-5 {
|
||||||
|
bottom: 340px;
|
||||||
|
left: 790px;
|
||||||
|
}
|
||||||
|
|
||||||
.pages-wrapper {
|
.pages-wrapper {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
Loading…
Reference in New Issue
Block a user