mt-fe-group/11-mes-new
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
lb
2022-11-11 14:05:56 +08:00
parent c88648e8d2
commit ec12c84830
12 changed files with 338 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/views/3DOverview/components/TechyAnalysisBar.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="quality-analysis-bar" :class="`border-${color}`">
<div class="placeholder-block-wrapper">
<div class="justify-end">
<div class="flex justify-end">
<div class="placeholder-block" :class="`block-${color}-1`" />
<div class="placeholder-block" :class="`block-${color}-2`" />
<div class="placeholder-block" :class="`block-${color}-3`" />
@@ -22,7 +22,7 @@ export default {
filters: {
amountFilter: val => {
const sVal = val.toString()
return sVal.length > 10 ? sVal.slice(0, 8) + '...' : sVal
return sVal.length > 7 ? sVal.slice(0, 6) + '...' : sVal
}
},
props: {
@@ -57,45 +57,43 @@ export default {
.quality-analysis-bar {
border-radius: 2px;
padding: 2px;
padding: calc(2px * var(--beilv));
display: flex;
}
.border-green {
border: 1px solid #35abad;
border: 2px solid #35abad;
}
.border-blue {
border: 1px solid #49b2ff;
border: 2px solid #49b2ff;
}
.border-orange {
border: 1px solid #ffb94d;
border: 2px solid #ffb94d;
}
.border-pink {
border: 1px solid #ed879f;
border: 2px solid #ed879f;
}
.placeholder-block-wrapper {
flex-grow: 1;
overflow: hidden;
min-width: 32px;
min-width: calc(32px * var(--beilv));
position: relative;
display: flex;
justify-content: center;
}
.placeholder-block-wrapper > div {
width: 200px;
width: calc(300px * var(--beilv));
position: absolute;
top: 0;
right: 0;
display: flex;
}
.placeholder-block {
width: 20px;
height: 20px;
margin-left: 3px;
/* border-radius: 1px; */
width: calc(20px * var(--beilv));
height: calc(20px * var(--beilv));
margin-left: calc(3px * var(--beilv));
}
.block-green-5 {
@@ -175,24 +173,24 @@ export default {
.quality-analysis-bar__name {
text-align: center;
white-space: nowrap;
white-space: normal;
overflow-wrap: break-word;
overflow: hidden;
color: white;
display: inline-block;
padding: 3px 8px;
font-size: 14px;
line-height: 12px;
padding: calc(3px * var(--beilv)) calc(8px * var(--beilv));
font-size: calc(14px * var(--beilv));
line-height: calc(12px * var(--beilv));
}
.quality-analysis-bar__amount {
color: rgba(255, 255, 255, 0.725);
display: inline-block;
/* min-width: 35%; */
width: 50%;
width: 35%;
text-align: left;
padding: 3px 0;
font-size: 14px;
line-height: 12px;
padding: calc(3px * var(--beilv)) 0;
font-size: calc(14px * var(--beilv));;
line-height: calc(12px * var(--beilv));;
}
</style>