ykxiao
/
DemuMesDataV
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adaptive display unit

This commit is contained in:
jiaming743 2019-08-29 17:47:14 +08:00
parent 5376f01e3c
commit 0f9b00b525
1 changed files with 11 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/capsuleChart/src/main.vue
View File

@ -11,18 +11,16 @@
class="capsule-item"
v-for="(capsule, index) in capsuleLength"
:key="index"
:style="`width: calc(100% - ${mergedConfig.unit ? 30 : 0}px)`"
>
<div :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"></div>
</div>
<div class="unit-label">
<div class="unit-container">
<div v-for="(label, index) in labelData" :key="label + index">{{ label }}</div>
</div>
<div class="unit-text" v-if="mergedConfig.unit">{{ mergedConfig.unit }}</div>
<div v-for="(label, index) in labelData" :key="label + index">{{ label }}</div>
</div>
</div>
<div class="unit-text" v-if="mergedConfig.unit">{{ mergedConfig.unit }}</div>
</template>
</div>
</template>
@ -161,22 +159,21 @@ export default {
}
.unit-label {
height: 20px;
font-size: 12px;
display: flex;
flex-direction: row;
line-height: 20px;
font-size: 12px;
align-items: center;
justify-content: space-between;
}
.unit-text {
width: 30px;
text-align: right;
}
.unit-container {
flex: 1;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
font-size: 12px;
line-height: 20px;
margin-left: 10px;
}
}
</style>