feat: 标尺刻度调整

This commit is contained in:
pipipi-pikachu 2022-10-16 11:10:47 +08:00
parent d67b140d86
commit 82b6172e97

View File

@ -10,10 +10,10 @@
<div <div
class="ruler-marker-100" class="ruler-marker-100"
:class="{ 'hide': markerSize < 36, 'omit': markerSize < 72 }" :class="{ 'hide': markerSize < 36, 'omit': markerSize < 72 }"
v-for="marker in 10" v-for="marker in 20"
:key="`marker-100-${marker}`" :key="`marker-100-${marker}`"
> >
<span>{{marker * 100}}</span> <span>{{marker}}</span>
</div> </div>
</div> </div>
<div <div
@ -26,11 +26,11 @@
<div <div
class="ruler-marker-100" class="ruler-marker-100"
:class="{ 'hide': markerSize < 36, 'omit': markerSize < 72 }" :class="{ 'hide': markerSize < 36, 'omit': markerSize < 72 }"
v-for="marker in 10" v-for="marker in 20"
:key="marker" :key="marker"
:style="{ height: markerSize + 'px' }" :style="{ height: markerSize + 'px' }"
> >
<span>{{marker * 100}}</span> <span>{{marker}}</span>
</div> </div>
</div> </div>
</div> </div>
@ -76,12 +76,14 @@ const markerSize = computed(() => {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
overflow: hidden;
.ruler-marker-100 { .ruler-marker-100 {
height: 100%; height: 100%;
width: 10%;
line-height: 20px; line-height: 20px;
text-align: right; text-align: right;
flex: 1; flex-shrink: 0;
padding-right: 5px; padding-right: 5px;
position: relative; position: relative;