u-time-line.vue 752 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <template>
  2. <view class="u-time-axis">
  3. <slot/>
  4. </view>
  5. </template>
  6. <script>
  7. /**
  8. * timeLine 时间轴
  9. * @description 时间轴组件一般用于物流信息展示,各种跟时间相关的记录等场景。
  10. * @tutorial https://www.uviewui.com/components/timeLine.html
  11. * @example <u-time-line></u-time-line>
  12. */
  13. export default {
  14. name: "u-time-line",
  15. data() {
  16. return {}
  17. }
  18. }
  19. </script>
  20. <style lang="scss" scoped>
  21. @import "../../libs/css/style.components.scss";
  22. .u-time-axis {
  23. padding-left: 40 rpx;
  24. position: relative;
  25. }
  26. .u-time-axis::before {
  27. content: " ";
  28. position: absolute;
  29. left: 0;
  30. top: 12 rpx;
  31. width: 1px;
  32. bottom: 0;
  33. border-left: 1px solid #ddd;
  34. transform-origin: 0 0;
  35. transform: scaleX(0.5);
  36. }
  37. </style>