|
@@ -0,0 +1,183 @@
|
|
|
+<template>
|
|
|
+ <div :class="rulerPosition == 'horizontal' ? 'jd-ruler' : 'jd-ruler-left'">
|
|
|
+ <template v-if="rulerPosition == 'horizontal'">
|
|
|
+ <div class="ruler-top-txt">
|
|
|
+ <template v-for="i in rulerWidth">
|
|
|
+ <div v-if="i == 1" class="txt-item">0</div>
|
|
|
+ <div v-else-if="i % 10 == 0" class="txt-item">{{ i }}</div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="ruler-top">
|
|
|
+ <template v-for="i in rulerWidth">
|
|
|
+ <div v-if="(i - 1) % 10 == 0 || i == rulerWidth" class="ruler-group"></div>
|
|
|
+ <div v-else-if="(i - 1) % 5 == 0" class="ruler-middle"></div>
|
|
|
+ <div v-else class="ruler-item"></div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="rulerPosition == 'vertical'">
|
|
|
+ <div class="ruler-left-txt">
|
|
|
+ <template v-for="i in rulerHeight">
|
|
|
+ <div v-if="i == 1" class="txt-item-left">0</div>
|
|
|
+ <div v-else-if="i % 10 == 0" class="txt-item-left">{{ i }}</div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="ruler-left">
|
|
|
+ <template v-for="i in rulerHeight">
|
|
|
+ <div v-if="(i - 1) % 10 == 0" class="ruler-group-left"></div>
|
|
|
+ <div v-else-if="(i - 1) % 5 == 0" class="ruler-middle-left"></div>
|
|
|
+ <div v-else class="ruler-item-left"></div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "RulerView",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ rulerWidth: 210,
|
|
|
+ rulerHeight: 297
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: ["rulerPosition"],
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ methods: {}
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style rel="stylesheet/scss" lang="scss">
|
|
|
+.jd-ruler-left {
|
|
|
+ padding: 0 10px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-content: center;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.jd-ruler {
|
|
|
+ padding: 0 10px;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.ruler-top {
|
|
|
+ width: 21cm;
|
|
|
+ height: 23px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.ruler-left {
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-right: 8px;
|
|
|
+ height: 29.7cm;
|
|
|
+}
|
|
|
+
|
|
|
+.ruler-top-txt {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ position: absolute;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-top: 3px;
|
|
|
+ color: #bebebe;
|
|
|
+}
|
|
|
+
|
|
|
+.ruler-left-txt {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-left: -8px;
|
|
|
+ color: #bebebe;
|
|
|
+}
|
|
|
+
|
|
|
+.txt-item:first-child {
|
|
|
+ margin-left: -5mm;
|
|
|
+}
|
|
|
+
|
|
|
+.txt-item {
|
|
|
+ width: 1cm;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.txt-item-left {
|
|
|
+ height: 1cm;
|
|
|
+ margin-right: 3px;
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.txt-item-left:first-child {
|
|
|
+ margin-top: -6mm;
|
|
|
+}
|
|
|
+
|
|
|
+.ruler-group {
|
|
|
+ width: 1mm;
|
|
|
+ height: 6px;
|
|
|
+ margin-top: 17px;
|
|
|
+ border-left: 1px solid #2c3e50;
|
|
|
+ border-bottom: 1px solid #2c3e50;
|
|
|
+}
|
|
|
+
|
|
|
+.ruler-group-left {
|
|
|
+ width: 6px;
|
|
|
+ height: 1mm;
|
|
|
+ margin-left: 7px;
|
|
|
+ border-right: 1px solid #2c3e50;
|
|
|
+ border-top: 1px solid #2c3e50;
|
|
|
+}
|
|
|
+
|
|
|
+.ruler-group:last-child {
|
|
|
+ width: 1mm;
|
|
|
+ height: 6px;
|
|
|
+ margin-top: 17px;
|
|
|
+ border-left: 1px solid #2c3e50;
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+
|
|
|
+.ruler-middle {
|
|
|
+ width: 1mm;
|
|
|
+ height: 4px;
|
|
|
+ margin-top: 19px;
|
|
|
+ border-left: 1px solid #2c3e50;
|
|
|
+ border-bottom: 1px solid #2c3e50;
|
|
|
+}
|
|
|
+
|
|
|
+.ruler-middle-left {
|
|
|
+ width: 4px;
|
|
|
+ height: 1mm;
|
|
|
+ margin-left: 9px;
|
|
|
+ border-right: 1px solid #2c3e50;
|
|
|
+ border-top: 1px solid #2c3e50;
|
|
|
+}
|
|
|
+
|
|
|
+.ruler-item {
|
|
|
+ width: 1mm;
|
|
|
+ height: 2px;
|
|
|
+ margin-top: 21px;
|
|
|
+ border-left: 1px solid #2c3e50;
|
|
|
+ border-bottom: 1px solid #2c3e50;
|
|
|
+}
|
|
|
+
|
|
|
+.ruler-item-left {
|
|
|
+ width: 2px;
|
|
|
+ height: 1mm;
|
|
|
+ margin-left: 11px;
|
|
|
+ border-right: 1px solid #2c3e50;
|
|
|
+ border-top: 1px solid #2c3e50;
|
|
|
+}
|
|
|
+</style>
|