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

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

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