<template>
  <div class="vertical-line"
       :style="{top:fixTop}">
    <div class="inner"
         :style="{backgroundColor:bgColor,width:lineWidth,height:lineHeight}"></div>
  </div>
</template>

<script>

/**
* @author: 过飞
* @createData: 2020年09月01日 15:28:38
* @version：v1.0
*
* @desc: 功能描述
*/
export default {
  name: 'VertitalLine',

  components: {},

  mixins: [],

  props: {
    lineWidth: {
      type: String,
      required: true,
      defalut: '4px'
    },
    lineHeight: {
      type: String,
      required: true,
      defalut: '4px'
    },
    bgColor: {
      type: String,
      default: '#fff'
    },
    fixTop: {
      type: String,
      required: true,
      defalut: '0px'
    }
  },

  data() {
    return {

    }
  },

  computed: {},

  watch: {},

  created() { },

  mounted() { },

  methods: {}

}
</script>
<style lang="scss" scoped >
.vertical-line {
  display: inline-block;
  position: relative;
  width: 4px;
  vertical-align: middle;
  margin: 0 6px 0;

  .inner {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
  }
}
</style>
