u-time-line.vue 765 B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  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. }
  20. </script>
  21. <style lang="scss" scoped>
  22. @import "../../libs/css/style.components.scss";
  23. .u-time-axis {
  24. padding-left: 40rpx;
  25. position: relative;
  26. }
  27. .u-time-axis::before {
  28. content: " ";
  29. position: absolute;
  30. left: 0;
  31. top: 12rpx;
  32. width: 1px;
  33. bottom: 0;
  34. border-left: 1px solid #ddd;
  35. transform-origin: 0 0;
  36. transform: scaleX(0.5);
  37. }
  38. </style>