


<template>
  <div style="position: absolute;">

    <div style="display: flex;" v-if="type===1">
      <div class="" :style="{borderLeft:(index+'')==='0'?'1px solid #000':''}" v-for="(it,index) in width" style="position: relative;display: flex;height: 0.28cm;margin-top: 10px;align-items: end;">
        <div class="" v-if="index===0" style="width: 21px;text-align: center;position: absolute;left: -11.5px;top: -15px;">0</div>
        <div class="" style="width: 21px;text-align: center;position: absolute;left: calc(1.07cm - 11.5px - 3px);top: -15px;">{{it}}</div>
        <div class="inner-border" style="width: calc(1mm - 0.52px);height: 0.15cm;border-bottom: 1px solid #000;border-right: 1px solid #000;"></div>
        <div class="inner-border" style="width: calc(1mm - 0.52px);height: 0.15cm;border-bottom: 1px solid #000;border-right: 1px solid #000;"></div>
        <div class="inner-border" style="width: calc(1mm - 0.52px);height: 0.15cm;border-bottom: 1px solid #000;border-right: 1px solid #000;"></div>
        <div class="inner-border" style="width: calc(1mm - 0.52px);height: 0.15cm;border-bottom: 1px solid #000;border-right: 1px solid #000;"></div>
        <div class="inner-border" style="width: calc(1mm - 0.52px);height: 0.23cm;border-bottom: 1px solid #000;border-right: 1px solid #000;"></div>
        <div class="inner-border" style="width: calc(1mm - 0.52px);height: 0.15cm;border-bottom: 1px solid #000;border-right: 1px solid #000;"></div>
        <div class="inner-border" style="width: calc(1mm - 0.52px);height: 0.15cm;border-bottom: 1px solid #000;border-right: 1px solid #000;"></div>
        <div class="inner-border" style="width: calc(1mm - 0.52px);height: 0.15cm;border-bottom: 1px solid #000;border-right: 1px solid #000;"></div>
        <div class="inner-border" style="width: calc(1mm - 0.52px);height: 0.15cm;border-bottom: 1px solid #000;border-right: 1px solid #000;"></div>
        <div class="inner-border" style="width: calc(1mm - 0.52px);height: 0.28cm;border-bottom: 1px solid #000;border-right: 1px solid #000;"></div>
      </div>
    </div>

        <div v-if="type===2" style="width: max-content;">
          <div :style="{borderTop:(index+'')==='0'?'1px solid #000':''}" v-for="(it,index) in width" style="position: relative;width: 0.28cm;margin-left: 14px;">
            <div v-if="index===0" style="width: 21px;text-align: center;position: absolute;left:-14.5px;top: -12.5px;transform: rotate(-90deg)">0</div>
            <div style="width: 21px;text-align: center;position: absolute;left: -14.5px;top: calc(1.125cm - 12.5px - 4px);transform: rotate(-90deg)">{{it}}</div>
            <div style="margin-left:0.13cm;height: calc(1mm - 0.52px);width: 0.15cm;border-right: 1px solid #000;border-bottom: 1px solid #000;"></div>
            <div style="margin-left:0.13cm;height: calc(1mm - 0.52px);width: 0.15cm;border-right: 1px solid #000;border-bottom: 1px solid #000;"></div>
            <div style="margin-left:0.13cm;height: calc(1mm - 0.52px);width: 0.15cm;border-right: 1px solid #000;border-bottom: 1px solid #000;"></div>
            <div style="margin-left:0.13cm;height: calc(1mm - 0.52px);width: 0.15cm;border-right: 1px solid #000;border-bottom: 1px solid #000;"></div>
            <div style="margin-left:0.06cm;height: calc(1mm - 0.52px);width: 0.22cm;border-right: 1px solid #000;border-bottom: 1px solid #000;"></div>
            <div style="margin-left:0.13cm;height: calc(1mm - 0.52px);width: 0.15cm;border-right: 1px solid #000;border-bottom: 1px solid #000;"></div>
            <div style="margin-left:0.13cm;height: calc(1mm - 0.52px);width: 0.15cm;border-right: 1px solid #000;border-bottom: 1px solid #000;"></div>
            <div style="margin-left:0.13cm;height: calc(1mm - 0.52px);width: 0.15cm;border-right: 1px solid #000;border-bottom: 1px solid #000;"></div>
            <div style="margin-left:0.13cm;height: calc(1mm - 0.52px);width: 0.15cm;border-right: 1px solid #000;border-bottom: 1px solid #000;"></div>
            <div style="height: 1mm;width: 0.28cm;border-right: 1px solid #000;border-bottom: 1px solid #000;"></div>
          </div>
        </div>
  </div>
</template>

<style scoped>
 .inner-border{
   /*-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;*/
 }
</style>

<script>
export default {
  name: 'ruler',
  props: {
    type:{
      type:Number,
      default:1 /*1:水平的  2:垂直的*/
    },
    width:{
      type:Number,
      default: 10
    }
  },
  data() {
    return {
    }
  },
  methods: {

  },
  created () {

  },
}
</script>

