value-change-detail.vue

<template>
  <div class="value-change-detail">
    <div class="value-block">{{value.oldDesc || 'null'}}</div>
    <div class="arrow"><Icon type="md-arrow-round-forward" /></div>
    <div class="value-block">{{value.newDesc || 'null'}}</div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      default: () => ({}),
      type: Object,
    },
  }
}
</script>

<style lang="less" scoped>
.value-change-detail {
  display: flex;
  .value-block {
    width: 45%;
  }
  .arrow {
    width: 10%;
    height: 100%;
    align-self: center;
    color: #0DA2E6;
  }
}
</style>