time-axis

time-axis 时间轴，结合timeaxis-item使用

组件结构

  1. <template>
  2.     <view class="tui-timeaxis-class tui-time-axis">
  3.         <slot></slot>
  4.     </view>
  5. </template>

组件脚本

  1. <script>
  2.     export default {
  3.         name:"tuiTimeAxis",
  4.         data() {
  5.             return {
  7.             };
  8.         }
  9.     }
  10. </script>

组件样式

  1. <style>
  2.     .tui-time-axis {
  3.         padding-left: 20px;
  4.         box-sizing: border-box;
  5.         position: relative;
  6.     }
  8.     .tui-time-axis::before {
  9.         content: " ";
  10.         position: absolute;
  11.         left: 0;
  12.         top: 0;
  13.         width: 1px;
  14.         bottom: 0;
  15.         border-left: 1px solid #ddd;
  16.         -webkit-transform-origin: 0 0;
  17.         transform-origin: 0 0;
  18.         -webkit-transform: scaleX(0.5);
  19.         transform: scaleX(0.5);
  20.     }
  21. </style>

脚本说明

  1.  props: 
  2.      无
  4.  methods:
  5.    无

示例

  1. ... 此处省略n行,下载源码查看