diff --git a/packages/devui-vue/devui/time-axis/__tests__/time-axis.spec.ts b/packages/devui-vue/devui/time-axis/__tests__/time-axis.spec.ts
index 6fd410f8cd1286d1c876fbd52c4cf0a281f76e80..d12597cc15bcea98085e26bc74ccb59581939436 100644
--- a/packages/devui-vue/devui/time-axis/__tests__/time-axis.spec.ts
+++ b/packages/devui-vue/devui/time-axis/__tests__/time-axis.spec.ts
@@ -1,8 +1,131 @@
 import { mount } from '@vue/test-utils';
-import { TimeAxis } from '../index';
-
+import DTimeAxis from '../src/time-axis';
+import DTimeAxisItem from '../src/components/time-axis-item'
 describe('time-axis test', () => {
-  it('time-axis init render', async () => {
-    // todo
+  const wrapper = mount({
+    components: { DTimeAxis, DTimeAxisItem },
+    template: `
+    <d-time-axis>
+      <d-time-axis-item time="2021-11-9">测试1</d-time-axis-item>
+      <d-time-axis-item type="primary">
+        <div>测试2</div>
+        <template #time><div>2021-11-10</div></template>
+        <template #dot><i class="icon-right-o" /></template>
+        <template #extra><span>附加元素</span><template>
+      </d-time-axis-item>
+      <d-time-axis-item time="2021-11-11" type="success">测试3</d-time-axis-item>
+      <d-time-axis-item time="2021-11-12" type="warning">测试4</d-time-axis-item>
+      <d-time-axis-item time="2021-11-13" type="error">测试5</d-time-axis-item>
+    </d-time-axis>
+      `,
+    setup() {
+      return
+    }
+  });
+  const timeAxisItems = wrapper.findAll('.devui-time-axis-item')
+
+  it('should render correctly', async () => {
+    //渲染的dom元素是有这个class
+    expect(wrapper.classes()).toContain('devui-time-axis')
+    //渲染正确子节点数
+    expect(timeAxisItems.length).toBe(5)
+    //看时间是否正确
+    expect(timeAxisItems[0].find('.devui-time-axis-item-time').text()).toBe('2021-11-9')
+    //看内容是否正确
+    expect(timeAxisItems[0].find('.devui-time-axis-item-content').text()).toBe('测试1')
+  })
+
+  it('Custom content should be displayed', async () => {
+    //有自定义的时间节点
+    expect(timeAxisItems[1].find('.devui-time-axis-item-time div').html()).toBe('<div>2021-11-10</div>')
+    //有自定义的内容
+    expect(timeAxisItems[1].find('.devui-time-axis-item-content div').html()).toBe('<div>测试2</div>')
+    //显示自定义时间点
+    expect(timeAxisItems[1].find('.devui-time-axis-item-dot i').exists()).toBe(true)
+    //显示时间点间的附加元素
+    expect(timeAxisItems[1].find('.devui-time-axis-item-line-extra span').html()).toBe('<span>附加元素</span>')
+  })
+
+  it('type should be rendered correctly', async () => {
+    expect(timeAxisItems[0].find('.devui-time-axis-item-dot').classes()).toContain('devui-time-axis-item-type-primary')
+    expect(timeAxisItems[2].find('.devui-time-axis-item-dot').classes()).toContain('devui-time-axis-item-type-success')
+    expect(timeAxisItems[3].find('.devui-time-axis-item-dot').classes()).toContain('devui-time-axis-item-type-warning')
+    expect(timeAxisItems[4].find('.devui-time-axis-item-dot').classes()).toContain('devui-time-axis-item-type-error')
+
+  })
+
+  it('position should be rendered correctly', async () => {
+
+    const wrapper = mount({
+      components: { DTimeAxis, DTimeAxisItem },
+      template: `
+    <d-time-axis mode="alternative">
+      <d-time-axis-item time="2021-11-9">测试1</d-time-axis-item>
+      <d-time-axis-item time="2021-11-10">测试2</d-time-axis-item>
+      <d-time-axis-item time="2021-11-11" position="right">测试3</d-time-axis-item>
+      <d-time-axis-item time="2021-11-11" position="top">测试3</d-time-axis-item>
+    </d-time-axis>
+      `,
+      setup() {
+        return
+      }
+    });
+    let timeAxisItems = wrapper.findAll('.devui-time-axis-item')
+    //内容是否在正确的位置
+    expect(timeAxisItems[0].find('.devui-time-axis-item-data-left .devui-time-axis-item-content').exists()).toBe(true)
+    expect(timeAxisItems[1].find('.devui-time-axis-item-data-right .devui-time-axis-item-content').exists()).toBe(true)
+    expect(timeAxisItems[2].find('.devui-time-axis-item-data-right .devui-time-axis-item-content').exists()).toBe(true)
+    //设置横向时间轴
+    await wrapper.setProps({ direction: 'horizontal' })
+    timeAxisItems = wrapper.findAll('.devui-time-axis-item')
+    expect(timeAxisItems[0].find('.devui-time-axis-item-data-bottom .devui-time-axis-item-content').exists()).toBe(true)
+    expect(timeAxisItems[1].find('.devui-time-axis-item-data-top .devui-time-axis-item-content').exists()).toBe(true)
+    expect(timeAxisItems[3].find('.devui-time-axis-item-data-top .devui-time-axis-item-content').exists()).toBe(true)
+
+  })
+
+  it('time-position should be rendered correctly', async () => {
+    const wrapper = mount({
+      components: { DTimeAxis, DTimeAxisItem },
+      template: `
+    <d-time-axis time-position="bottom">
+      <d-time-axis-item time="2021-11-9">测试1</d-time-axis-item>
+      <d-time-axis-item time="2021-11-10" time-position="left">测试2</d-time-axis-item>
+    </d-time-axis>
+      `,
+      setup() {
+        return
+      }
+    });
+    const timeAxisItems = wrapper.findAll('.devui-time-axis-item')
+    //时间是否在正确的位置
+    expect(timeAxisItems[0].find('.devui-time-axis-item-data-left .devui-time-axis-item-time').exists()).toBe(false)
+    expect(timeAxisItems[0].find('.devui-time-axis-item-axis .devui-time-axis-item-time').exists()).toBe(true)
+    expect(timeAxisItems[1].find('.devui-time-axis-item-data-left .devui-time-axis-item-time').exists()).toBe(true)
+    expect(timeAxisItems[1].find('.devui-time-axis-item-axis .devui-time-axis-item-time').exists()).toBe(false)
+  })
+
+  it('line-style should be rendered correctly', async () => {
+    const wrapper = mount({
+      components: { DTimeAxis, DTimeAxisItem },
+      template: `
+    <d-time-axis>
+      <d-time-axis-item time="2021-11-9" line-style="solid">测试1</d-time-axis-item>
+      <d-time-axis-item time="2021-11-10" line-style="dashed">测试2</d-time-axis-item>
+      <d-time-axis-item time="2021-11-11" line-style="dotted">测试3</d-time-axis-item>
+      <d-time-axis-item time="2021-11-12" line-style="none">测试4</d-time-axis-item>
+      <d-time-axis-item time="2021-11-13">测试5</d-time-axis-item>
+    </d-time-axis>
+      `,
+      setup() {
+        return
+      }
+    });
+    const timeAxisItemAxis = wrapper.findAll('.devui-time-axis-item .devui-time-axis-item-axis')
+    expect(timeAxisItemAxis[0].find('.devui-time-axis-item-line').classes()).toContain('devui-time-axis-item-line-style-solid')
+    expect(timeAxisItemAxis[1].find('.devui-time-axis-item-line').classes()).toContain('devui-time-axis-item-line-style-dashed')
+    expect(timeAxisItemAxis[2].find('.devui-time-axis-item-line').classes()).toContain('devui-time-axis-item-line-style-dotted')
+    expect(timeAxisItemAxis[3].find('.devui-time-axis-item-line').classes()).toContain('devui-time-axis-item-line-style-none')
+    expect(timeAxisItemAxis[4].find('.devui-time-axis-item-line').classes()).toContain('devui-time-axis-item-line-style-none')
   })
 })
diff --git a/packages/devui-vue/devui/time-axis/index.ts b/packages/devui-vue/devui/time-axis/index.ts
index 4edffd52dcf3f043fddd35c818a481b3b56ace4e..e5c509402abb90f2e5ca9a7a9bc086b0b39c32e2 100644
--- a/packages/devui-vue/devui/time-axis/index.ts
+++ b/packages/devui-vue/devui/time-axis/index.ts
@@ -1,17 +1,20 @@
 import type { App } from 'vue'
 import TimeAxis from './src/time-axis'
+import TimeAxisItem from './src/components/time-axis-item'
 
 TimeAxis.install = function(app: App): void {
   app.component(TimeAxis.name, TimeAxis)
+  app.component(TimeAxisItem.name, TimeAxisItem)
 }
 
-export { TimeAxis }
+export { TimeAxis,TimeAxisItem }
 
 export default {
   title: 'TimeAxis 时间轴',
   category: '数据展示',
-  status: '10%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  status: '已完成',
   install(app: App): void {
         app.use(TimeAxis as any)
+        app.use(TimeAxisItem as any)
   }
 }
diff --git a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.scss b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.scss
deleted file mode 100644
index a819cfa1e9d10077233442134348da064ea7eb5f..0000000000000000000000000000000000000000
--- a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.scss
+++ /dev/null
@@ -1,160 +0,0 @@
-@import '../../../../style/theme/color';
-
-.devui-time-axis-item-type {
-  &-primary {
-    border: 2px solid $devui-placeholder;
-    border-radius: 50%;
-  }
-
-  &-right {
-    i {
-      color: $devui-success;
-    }
-  }
-
-  &-danger {
-    path {
-      fill: $devui-danger;
-    }
-
-    circle {
-      fill: $devui-light-text;
-    }
-  }
-
-  &-warning {
-    i {
-      color: $devui-warning;
-    }
-  }
-
-  &-running {
-    line-height: 16px;
-    text-align: center;
-    animation: devui-time-axis-running 1.5s linear infinite;
-    border: 2px solid $devui-success;
-    border-radius: 50%;
-  }
-}
-
-.devui-time-axis-item-vertical-time-bottom {
-  display: flex;
-
-  .devui-time-axis-item-axis {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .devui-time-axis-item-dot {
-    &,
-    & > svg {
-      width: 18px;
-      height: 18px;
-    }
-
-    & > i {
-      font-size: 18px;
-    }
-  }
-
-  .devui-time-axis-item-custom-dot {
-    width: 18px;
-    height: 18px;
-    text-align: center;
-  }
-
-  .devui-time-axis-item-line-time-bottom {
-    position: relative;
-    height: calc(100% - 36px);
-    border-left-width: 2px;
-    border-left-color: $devui-dividing-line;
-  }
-
-  .devui-time-axis-line-style {
-    &-dashed {
-      border-left-style: dashed;
-    }
-
-    &-solid {
-      border-left-style: solid;
-    }
-
-    &-none {
-      border-left-style: none;
-    }
-  }
-
-  .devui-time-axis-middle-zone {
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .devui-time-axis-item-data-time-bottom {
-    margin-left: 12px;
-    margin-bottom: 40px;
-  }
-
-  .devui-time-axis-item-template {
-    margin-left: 12px;
-    margin-bottom: 24px;
-  }
-}
-
-@keyframes devui-time-axis-running {
-  0% {
-    transform: rotate(0deg);
-    color: $devui-success;
-    border-color: $devui-success;
-  }
-
-  50% {
-    transform: rotate(180deg);
-    color: $devui-success;
-    border-color: $devui-success;
-  }
-
-  100% {
-    transform: rotate(360deg);
-    color: $devui-success;
-    border-color: $devui-success;
-  }
-}
-
-.devui-time-axis-item-data-hidden {
-  visibility: hidden;
-}
-
-:host.devui-time-axis-item-horizontal-no-line {
-  width: auto !important;
-
-  .devui-time-axis-item-data-horizontal-top {
-    width: max-content;
-  }
-
-  .devui-time-axis-item-data-horizontal-bottom {
-    width: max-content;
-  }
-}
-
-:host.devui-time-axis-item-vertical-no-line {
-  .devui-time-axis-item-data-time-bottom {
-    margin-bottom: 0;
-  }
-
-  .devui-time-axis-item-data-vertical-left {
-    margin-bottom: 0;
-  }
-
-  .devui-time-axis-item-data-vertical-right {
-    margin-bottom: 0;
-  }
-}
-
-.devui-time-axis-item-horizontal-align-center {
-  position: relative;
-  width: fit-content;
-  transform: translateX(-50%);
-  left: 8px;
-}
diff --git a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
index 15fae5660100e80a3e8a2117a88a9f22a9fc2952..53ec882a0516ebc7cf4af289034cbb685e725f50 100644
--- a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
+++ b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
@@ -1,32 +1,89 @@
-import {defineComponent} from 'vue'
-
-import {timeAxisItemProps, TimeAxisItemProps} from './types'
-import './index.scss'
+import {defineComponent, inject} from 'vue'
+import type {TimeAxisRootType} from '../../time-axis-types'
+import DIcon from '../../../../icon/src/icon'
+import {timeAxisItemProps, TimeAxisItemProps, Type} from './types'
 
 export default defineComponent({
-    name: 'DTimeAxisItem',
-    props: timeAxisItemProps,
-    emits: [],
-    setup(props: TimeAxisItemProps, ctx) {
-        const itemClass = 'devui-time-axis-item'
-        return () => {
-            return (
-                <div class={itemClass}>
-                    <div class={`${itemClass}-data-left ${itemClass}-data-top`}>
-                        <span>
-                        {props.time}
-                        </span>
-                    </div>
-                    <div class={`${itemClass}-axis`}>
-                        <div class={`${itemClass}-line ${itemClass}-line-style-solid`}></div>
-                        <div class={`${itemClass}-dot ${itemClass}-type-primary`} style={{borderColor: props.dotColor}}></div>
-                        <div class={`${itemClass}-line ${itemClass}-line-style-solid`}></div>
-                    </div>
-                    <div class={`${itemClass}-data-right ${itemClass}-data-bottom`}>
-                        {props.text}
-                    </div>
-                </div>
-            )
+  name: 'DTimeAxisItem',
+  components: {DIcon},
+  props: timeAxisItemProps,
+  emits: [],
+  setup(props: TimeAxisItemProps, ctx) {
+    const timeAxis: TimeAxisRootType = inject('timeAxis')
+    const itemClass = 'devui-time-axis-item'
+    const renderTime = () => {
+      return (
+        <div class={`${itemClass}-time`}>
+          {
+            ctx.slots.time
+              ? ctx.slots.time?.()
+              : props.time
+          }
+        </div>
+      )
+    }
+    const renderContent = () => {
+      return (
+        <div class={`${itemClass}-content`}>
+          {ctx.slots.default?.(props)}
+        </div>
+      )
+    }
+    const renderPosition = (types: string[]) => {
+      //如果有设置position的话，就直接用position的内容
+      if (types.includes(props.position)) {
+        return renderContent()
+      } else {
+        //如果是horizontal直接返回时间
+        if (timeAxis.props.direction === 'horizontal') {
+          return renderTime()
+        } else {
+          //如果有设定time-position,则left显示在这
+          return props.timePosition === 'left' ? renderTime() : ''
         }
+      }
+    }
+    const setTypeIcon = (type: Type) => {
+      if (type === 'primary') {
+        return ''
+      }
+      return <i class={`icon-${type === 'success' ? 'right' : type}-o`}/>
+    }
+    const renderDot = () => {
+      if (ctx.slots.dot) {
+        return <div style={{color: props.dotColor}} class={`${itemClass}-dot`}> {ctx.slots.dot?.()}</div>
+      } else {
+        return (<div class={`${itemClass}-dot ${itemClass}-type-${props.type}`}
+                     style={{borderColor: props.dotColor}}
+        >
+          {setTypeIcon(props.type)}
+        </div>)
+      }
+    }
+
+    return () => {
+      return (
+        <div class={itemClass}>
+          <div class={`${itemClass}-data-left ${itemClass}-data-top`}>
+            {renderPosition(['top', 'left'])}
+          </div>
+          <div class={`${itemClass}-axis`}>
+            {
+              renderDot()
+            }
+            {(timeAxis.props.direction === 'vertical' && props.timePosition === 'bottom') ? renderTime() : ''}
+            <div class={`${itemClass}-line ${itemClass}-line-style-${props.lineStyle}`}
+                 style={{borderColor: props.lineColor}}
+            >
+              {ctx.slots.extra ? <div class={`${itemClass}-line-extra`}>{ctx.slots.extra()}</div> : ''}
+            </div>
+          </div>
+          <div class={`${itemClass}-data-right ${itemClass}-data-bottom`}>
+            {renderPosition(['right', 'bottom'])}
+          </div>
+        </div>
+
+      )
     }
+  }
 })
diff --git a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts
index fba08a5ed5f787293acb330924a5927f1712b356..d41725925b708907870261c56c894a1abea0a067 100644
--- a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts
+++ b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts
@@ -1,18 +1,37 @@
 import type { PropType, ExtractPropTypes } from 'vue'
-
-
-
+import type { LineStyle,TimePosition } from '../../time-axis-types'
+export type Position = 'top' | 'bottom' | 'left' | 'right'
+export type Type = 'primary' | 'success' | 'warning' | 'error'
 export const timeAxisItemProps = {
   time: {
     type: String,
   },
-  text: {
-    type: String,
-  },
-
   //可选，自定义时间圈颜色
   dotColor: {
     type: String
+  },
+  //分界线的样式
+  lineStyle: {
+    type: String as PropType<LineStyle>,
+    default: 'solid'
+  },
+  //分界线的样式
+  lineColor: {
+    type: String
+  },
+  //分界线的样式
+  position: {
+    type: String as PropType<Position>
+  },
+  //设置时间位置
+  timePosition: {
+    type: String as PropType<TimePosition>,
+    default: 'left'
+  },
+  //时间点类型
+  type: {
+    type: String as PropType<Type>,
+    default: 'primary'
   }
 } as const
 
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis-types.ts b/packages/devui-vue/devui/time-axis/src/time-axis-types.ts
index eb00d1b4fc1609451bc39c21cdd7eb491e12eca1..4ca37a4745674c005ffb588638444e7b588a85d6 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis-types.ts
+++ b/packages/devui-vue/devui/time-axis/src/time-axis-types.ts
@@ -1,27 +1,8 @@
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { PropType, ExtractPropTypes,SetupContext } from 'vue'
 export type DataDirection = 'vertical' | 'horizontal'
-
-
-
-export interface DataItem {
-  //时间
-  time: string
-  //文本内容
-  text: string
-  //   lineStyle?: Object<{}>
-  //可选，自定义时间圈颜色
-  dotColor?: string
-  customDot?: string | HTMLElement
-  //时间点类型
-  type?: 'primary' | 'success' | 'danger' | 'warning'
-  status?: 'runned' | 'running' | ''
-  position?: 'top' | 'bottom' | 'left' | 'right'
-  extraElement?: string | HTMLElement
-  iconClass?: string
-  data?: any
-}
-
-
+export type Mode = 'normal' | 'alternative'
+export type TimePosition = 'left' | 'bottom'
+export type LineStyle = 'solid' | 'dashed' | 'dotted' | 'none'
 
 export const timeAxisProps = {
   //设置时间轴方向
@@ -29,11 +10,26 @@ export const timeAxisProps = {
     type: String as PropType<DataDirection>,
     default: 'vertical'
   },
-  //列表数据
-  data: {
-    type: Array as PropType<DataItem[]>,
-    default:()=>[]
+  //设置居中
+  center: {
+    type: Boolean,
+    default: false
+  },
+  //设置排序方向
+  mode: {
+    type: String as PropType<Mode>,
+    default: 'normal'
+  },
+  //设置时间位置
+  timePosition: {
+    type: String as PropType<TimePosition>,
+    default: 'left'
   }
 } as const
 
 export type TimeAxisProps = ExtractPropTypes<typeof timeAxisProps>
+
+export interface TimeAxisRootType {
+  ctx: SetupContext<any>
+  props: TimeAxisProps
+}
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis.scss b/packages/devui-vue/devui/time-axis/src/time-axis.scss
index 0a78557fdc4e81df1ad735d0eb20550c27233585..24b1ec55a134bc627c0b279aea1e5a94f5024ccb 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis.scss
+++ b/packages/devui-vue/devui/time-axis/src/time-axis.scss
@@ -24,9 +24,16 @@ $devui-time-axis-item-dot-size: 18px;
       &-line {
         position: relative;
         height: calc(100% - #{$devui-time-axis-item-dot-size});
+        min-height: 20px;
         border-left-width: 2px;
         border-left-color: $devui-dividing-line;
 
+        &-extra {
+          position: absolute;
+          top: 50%;
+          transform: translate(-50%, -50%);
+        }
+
         &:first-child {
           display: none;
         }
@@ -34,16 +41,12 @@ $devui-time-axis-item-dot-size: 18px;
 
       &-data-left {
         text-align: end;
-        margin-bottom: 24px;
-        height: $devui-time-axis-item-dot-size;
-        line-height: $devui-time-axis-item-dot-size;
-        flex: 1;
       }
 
+      &-data-left,
       &-data-right {
         margin-bottom: 24px;
-        height: $devui-time-axis-item-dot-size;
-        line-height: $devui-time-axis-item-dot-size;
+        margin-top: -2px;
         flex: 1;
       }
 
@@ -79,6 +82,20 @@ $devui-time-axis-item-dot-size: 18px;
     align-items: center;
     position: relative;
 
+    &-center {
+      .devui-time-axis-item {
+        &-data-top,
+        &-data-bottom {
+          text-align: center;
+          padding: 0 6px;
+
+          > div {
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+
     .devui-time-axis-item {
       display: flex;
       flex-direction: column;
@@ -93,10 +110,16 @@ $devui-time-axis-item-dot-size: 18px;
 
       &-line {
         position: relative;
-        min-width: 20px;
-        width: calc(50% - calc(#{$devui-time-axis-item-dot-size} / 2));
+        min-width: 60px;
+        width: calc(100% - #{$devui-time-axis-item-dot-size});
         border-bottom-width: 2px;
         border-bottom-color: $devui-dividing-line;
+
+        &-extra {
+          position: absolute;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
       }
 
       &:first-child {
@@ -107,17 +130,9 @@ $devui-time-axis-item-dot-size: 18px;
         }
       }
 
-      &-data-top {
-        text-align: center;
-        display: flex;
-        align-items: flex-end;
-        padding: 0 12px;
-        flex: 1;
-      }
-
+      &-data-top,
       &-data-bottom {
-        text-align: center;
-        padding: 0 12px;
+        padding-right: 12px;
         flex: 1;
       }
 
@@ -154,18 +169,73 @@ $devui-time-axis-item-dot-size: 18px;
     & > svg {
       width: $devui-time-axis-item-dot-size;
       height: $devui-time-axis-item-dot-size;
+      flex-shrink: 0;
     }
 
     & > i {
       font-size: $devui-time-axis-item-dot-size;
+      vertical-align: 0;
     }
   }
 
-  &:last-child {
-    .devui-time-axis-item-line {
-      &:last-child {
-        display: none;
+  //&:last-child {
+  //  .devui-time-axis-item-line {
+  //    &:last-child {
+  //      display: none;
+  //    }
+  //  }
+  //}
+
+  &-type {
+    &-primary {
+      border: 2px solid $devui-placeholder;
+      border-radius: 50%;
+    }
+
+    &-success {
+      i {
+        color: $devui-success;
+      }
+    }
+
+    &-error {
+      i {
+        color: $devui-danger;
       }
     }
+
+    &-warning {
+      i {
+        color: $devui-warning;
+      }
+    }
+
+    &-running {
+      line-height: 16px;
+      text-align: center;
+      animation: devui-time-axis-running 1.5s linear infinite;
+      border: 2px solid $devui-success;
+      border-radius: 50%;
+    }
+  }
+}
+
+@keyframes devui-time-axis-running {
+  0% {
+    transform: rotate(0deg);
+    color: $devui-success;
+    border-color: $devui-success;
+  }
+
+  50% {
+    transform: rotate(180deg);
+    color: $devui-success;
+    border-color: $devui-success;
+  }
+
+  100% {
+    transform: rotate(360deg);
+    color: $devui-success;
+    border-color: $devui-success;
   }
 }
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis.tsx b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
index 03ae7416ef30f94c8fa9914c8c817d7ced486d19..6d8e6e5baee04864f54e72b466c01430bee08c4d 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis.tsx
+++ b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
@@ -1,20 +1,106 @@
-import { defineComponent } from 'vue'
-import { timeAxisProps, TimeAxisProps } from './time-axis-types'
+import {defineComponent, Fragment, nextTick, onMounted, provide, reactive, ref, toRef, watch} from 'vue'
+import {timeAxisProps, TimeAxisProps, TimeAxisRootType} from './time-axis-types'
 import TimeAxisItem from './components/time-axis-item'
 import './time-axis.scss'
 
 export default defineComponent({
   name: 'DTimeAxis',
-  components: { TimeAxisItem },
+  components: {TimeAxisItem},
   props: timeAxisProps,
   emits: [],
   setup(props: TimeAxisProps, ctx) {
+    provide<TimeAxisRootType>('timeAxis', {ctx, props})
+    const timeAxis = ref<null | HTMLElement>();
+    const style = reactive({
+      marginLeft: '0px',
+      height: 'auto'
+    })
+    const setStyle = () => {
+      style.height = 'auto'
+      style.marginLeft = '0px'
+      if (props.direction === 'horizontal') {
+        nextTick(() => {
+          const el = timeAxis.value;
+          if (props.center) {
+            //计算偏移量
+            style.marginLeft = (el?.firstElementChild?.clientWidth || 0) / 2 + 'px'
+          }
+          //算出最大高度
+          style.height = Math.max(
+              ...Array.from(el?.querySelectorAll('.devui-time-axis-item-data-top')).map(el => el.clientHeight),
+              ...Array.from(el?.querySelectorAll('.devui-time-axis-item-data-bottom')).map(el => el.clientHeight)
+            ) * 2
+            + Math.max(...Array.from(el?.querySelectorAll('.devui-time-axis-item-axis')).map(el => el.clientHeight))
+            + 'px'
+        });
+      }
+    }
+    onMounted(() => {
+      setStyle()
+    });
+    watch(toRef(props, 'direction'), () => {
+      setStyle()
+    })
     return () => {
-      return (
-        <div class={`devui-time-axis-${props.direction}`}>
-          {
-            props.data.map(item=> <TimeAxisItem {...item}/>)
+      const renderItemPosition = (item, position?) => {
+        return position
+          ? <item position={position}/>
+          : <item/>
+      }
+
+
+      const renderItem = () => {
+        const slots: any[] = ctx.slots.default?.() ?? [];
+        let children;
+        if (slots.length === 1 && slots[0].type === Fragment) {
+          children = slots[0].children || []
+        } else {
+          children = slots
+        }
+        return children.map((item, index) => {
+          //默认隐藏最后一条线
+          if ((index + 1) === children.length) {
+            if (!item.props?.lineStyle && !item.props?.['line-style']) {
+              item = <item line-style="none"/>
+            }
           }
+          //如果没有单独设置time-position属性，则以全局为准
+          if (!item.props?.timePosition && !item.props?.['time-position']) {
+            item = <item time-position={props.timePosition ? props.timePosition : 'left'}/>
+          }
+
+          if (props.direction === 'horizontal') {
+            //判断是否有自定义的位置信息，且是否正确 有，且正确直接用
+            if (item.props?.position === 'top' || item.props?.position === 'bottom') return item
+            //判断是否需要交替
+            if (props.mode === 'alternative') {
+              return renderItemPosition(item, index % 2 == 0 ? 'bottom' : 'top')
+            } else {
+              //不需要交替的直接给默认值
+              return renderItemPosition(item, 'bottom')
+            }
+          } else {
+            if (item.props?.position === 'left' || item.props?.position === 'right') return item
+            if (props.mode === 'alternative') {
+              return renderItemPosition(item, index % 2 == 0 ? 'left' : 'right')
+            } else {
+              return renderItemPosition(item, 'right')
+            }
+          }
+        })
+      }
+      //防止字段传入错误，导致显示错误
+      const getDirection = () => {
+        return props.direction === 'horizontal' ? 'horizontal' : 'vertical'
+      }
+
+      return (
+        <div
+          class={`devui-time-axis devui-time-axis-${getDirection()}  ${props.center ? 'devui-time-axis-' + getDirection() + '-center' : ''} `}
+          ref={timeAxis}
+          style={style}
+        >
+          {renderItem()}
         </div>
       )
     }
diff --git a/packages/devui-vue/docs/components/time-axis/index.md b/packages/devui-vue/docs/components/time-axis/index.md
index 4740b68c2faca51c70c350ac347549b071285473..01ae74f482dfe6bdc1952a08eefef4a6b7f08c89 100644
--- a/packages/devui-vue/docs/components/time-axis/index.md
+++ b/packages/devui-vue/docs/components/time-axis/index.md
@@ -8,11 +8,10 @@
 
 ### 基本用法
 
-通过 direction 配置时间线排列方向，默认值为`vertical`。
+通过 `direction` 属性配置时间线排列方向，默认值为`vertical`。
 :::demo
 
 ```vue
-
 <template>
   <div>
     <d-radio-group css-style="row" v-model="choose">
@@ -20,7 +19,17 @@
         {{ item }}
       </d-radio>
     </d-radio-group>
-    <d-time-axis :direction="choose" :data="data"/>
+    <d-time-axis :direction="choose" center>
+      <d-time-axis-item
+          center
+          v-for="(item,index) in timeAxisList"
+          :key="index"
+          :time="item.time"
+          :dot-color="item.dotColor"
+      >
+        {{item.text}}
+      </d-time-axis-item>
+    </d-time-axis>
   </div>
 </template>
 
@@ -29,59 +38,283 @@ import {defineComponent, ref} from 'vue'
 
 export default defineComponent({
   setup() {
-    const list = ref(['horizontal', 'vertical'])
-    const choose = ref('horizontal')
-    const data = ref([
+    const list = ref(['vertical', 'horizontal'])
+    const choose = ref('vertical')
+    const timeAxisList = ref([
       {
         text: 'Download',
-        time: '2021-07-28'
+        time: '2021-10-1'
       },
       {
         text: 'Check',
-        time: '2021-07-29',
+        time: '2021-10-2',
         dotColor: 'var(--devui-success)'
       },
       {
         text: 'Build',
-        time: '2021-07-30',
+        time: '2021-10-3',
         dotColor: 'var(--devui-danger)'
       },
       {
         text: 'Depoy',
-        time: '2021-07-31',
+        time: '2021-10-4',
         dotColor: 'var(--devui-warning)'
       },
       {
         text: 'End',
-        time: '2021-08-01',
+        time: '2021-10-5',
         dotColor: 'var(--devui-waiting)'
       }
     ])
-    return {data, list, choose}
+    return {timeAxisList, list, choose}
   }
 })
 </script>
+```
+
+:::
+
+### 自定义样式
+
+:::demo
+
+```vue
+<template>
+  <d-time-axis direction="horizontal" center>
+    <d-time-axis-item
+        v-for="(item,index) in timeAxisList"
+        :key="index"
+        :dot-color="item.dotColor"
+        :line-style="item.lineStyle"
+        :line-color="item.lineColor"
+    >
+      <template #time>
+        <div>{{item.time}}</div>
+      </template>
+      <template #dot v-if="item.dot">
+        <d-icon :name="item.dot"></d-icon>
+      </template>
+      {{item.text}}
+    </d-time-axis-item>
+  </d-time-axis>
+</template>
 
-<style>
-</style>
+<script>
+import {defineComponent, ref} from 'vue'
+
+export default defineComponent({
+  setup() {
+    const timeAxisList = ref([
+      {
+        text: 'Start',
+        time: '2021-10-1',
+        lineStyle: "solid",
+        dot: 'cancel-forbidden'
+      },
+      {
+        text: 'Check',
+        time: '2021-10-2',
+        dotColor: 'var(--devui-success)',
+        lineStyle: "dashed",
+        lineColor: 'var(--devui-success)',
+        dot: 'classroom-approve'
+      },
+      {
+        text: 'Debug',
+        time: '2021-10-3',
+        dotColor: 'var(--devui-info)',
+        lineStyle: "dotted",
+        lineColor: 'var(--devui-info)',
+        dot: 'add-bug'
+      },
+      {
+        text: 'Build',
+        time: '2021-10-4',
+        dotColor: 'var(--devui-warning)',
+        lineStyle: "none",
+        lineColor: 'var(--devui-warning)',
+        dot: 'build-with-tool'
+      },
+      {
+        text: 'Display',
+        time: '2021-10-5',
+        dotColor: 'var(--devui-danger)',
+        dot: 'go-chart'
+      }
+    ])
+    return {timeAxisList}
+  }
+})
+</script>
 ```
 
 :::
 
-### d-time-axis
+### 自定义内容
+
+可以使用 mode 为 `alternative` 设置内容交替展示
+:::demo
+```vue
+<template>
+  <d-time-axis direction="horizontal" mode="alternative">
+    <d-time-axis-item
+        v-for="(item,index) in timeAxisList"
+        :key="index"
+        :dot-color="item.dotColor"
+        line-style="dashed"
+    >
+
+      <template #default="data">
+        <div style="position: relative">
+          <div
+              v-if="data.position === 'bottom'"
+              style="margin-bottom: 4px; position: relative; left: 4px; width: 2px; height: 40px; background-color: #dfe1e6"
+          ></div>
+          <div
+              :style="{'border-left': '4px solid', 'box-shadow': '0 2px 4px 0 rgba(0, 0, 0, 0.1)', padding: '12px 8px',borderColor:item.dotColor,backgroundColor:item.backgroundColor}"
+          >
+            <div style="padding-bottom: 8px; font-size: 14px; font-weight: bold">{{ item.title }}</div>
+            <div style="padding-bottom: 8px">发布日期：{{ item.date }}</div>
+            <div style="padding-bottom: 8px">版本状态：
+              <d-tag :color="item.dotColor">{{item.status}}</d-tag>
+            </div>
+          </div>
+          <div
+              v-if="data.position === 'top'"
+              style="margin-top: 4px; position: relative; left: 4px; width: 2px; height: 40px; background-color: #dfe1e6"
+          ></div>
+        </div>
+      </template>
+      <template #extra v-if="index===0">
+        <div
+            style="text-align: center; width: 36px; height: 36px; border-radius: 18px; border: 2px solid #dfe1e6; background: white"
+        >
+          <span style="line-height: 32px">2020</span>
+        </div>
+      </template>
+    </d-time-axis-item>
+  </d-time-axis>
+</template>
+
+<script>
+import {defineComponent, ref} from 'vue'
+
+export default defineComponent({
+  setup() {
+    const timeAxisList = ref([
+      {
+        text: 'hello',
+        dotColor: 'var(--devui-success)',
+        extraElement: {},
+        title: '第四季度交付版本1.0', date: '2019/11/01', 
+        status: '已发布'
+      },
+      {
+        text: 'world',
+        dotColor: 'var(--devui-danger)',
+        title: '第一季度交付版本2.0', date: '2020/03/01',
+        backgroundColor: 'rgba(255, 230, 230, 0.2)', 
+        status: '未开始'
+      },
+      {
+        text: 'nihao',
+        dotColor: 'var(--devui-warning)',
+        title: '第二季度交付版本1.0', date: '2020/05/01', 
+        status: '进行中'
+      },
+      {
+        text: 'DevUI',
+        dotColor: 'var(--devui-danger)',
+        title: '第三季度交付版本1.0', date: '2020/09/01', 
+        status: '未开始'
+      },
+      {
+        text: 'Awesome',
+        dotColor: 'var(--devui-success)',
+        title: '第三季度交付版本1.0', date: '2020/11/01', 
+        status: '已发布'
+      },
+    ])
+    return {timeAxisList}
+  }
+})
+</script>
+```
 
-d-time-axis 参数
+:::
+
+### 自定义内容位置
+
+:::demo
+
+```vue
+<template>
+  <h5><p>当 direction 为 horizontal 时 position 默认 bottom</p></h5>
+  <d-time-axis direction="horizontal" center>
+    <d-time-axis-item position="top" dot-color="chocolate">Download</d-time-axis-item>
+    <d-time-axis-item dot-color="var(--devui-success)">Check</d-time-axis-item>
+    <d-time-axis-item position="top" dot-color="var(--devui-danger)">Build</d-time-axis-item>
+    <d-time-axis-item dot-color="var(--devui-warning)">Depoy</d-time-axis-item>
+    <d-time-axis-item position="top" dot-color="var(--devui-waiting)">End</d-time-axis-item>
+  </d-time-axis>
+  <h5><p>当 direction 为 vertical 时 position 默认 right</p></h5>
+  <d-time-axis direction="vertical">
+    <d-time-axis-item position="left" dot-color="chocolate">Download</d-time-axis-item>
+    <d-time-axis-item position="right" dot-color="var(--devui-success)">Check</d-time-axis-item>
+    <d-time-axis-item position="left" dot-color="var(--devui-danger)">Build</d-time-axis-item>
+    <d-time-axis-item position="right" dot-color="var(--devui-warning)">Depoy</d-time-axis-item>
+    <d-time-axis-item position="left" dot-color="var(--devui-waiting)">End</d-time-axis-item>
+  </d-time-axis>
+</template>
+```
+
+:::
+
+### 设置时间位置
+
+:::demo
+
+```vue
+<template>
+  <d-time-axis time-position="bottom">
+    <d-time-axis-item time="2019" time-position="left">Download</d-time-axis-item>
+    <d-time-axis-item time="11-2" type="success">Check</d-time-axis-item>
+    <d-time-axis-item time="2020" type="warning" time-position="left">Build</d-time-axis-item>
+    <d-time-axis-item time="11-4" type="error">Depoy</d-time-axis-item>
+    <d-time-axis-item time="2021" type="primary" time-position="left">End</d-time-axis-item>
+  </d-time-axis>
+</template>
+```
+
+:::
+
+### d-time-axis
 
 | 参数           | 类型                            | 默认        | 说明         | 跳转 Demo                   |
 | ------------  | ----                            | ----       | ----        | ---------                   | 
-|   direction   |   `'vertical'\|'horizontal'`   | `vertical`  | 设置时间轴方向 |      [基本用法](#基本用法)     | 
-|   data        |            `array`             |     `[]`        | 列表数据(具体参数如下) |    [基本用法](#基本用法)       | 
-
+|   direction   |   `'vertical'\|'horizontal'`   | `vertical`  | 设置时间轴方向 |      [基本用法](#基本用法)     |  
+|   center   |   `boolean`| `false`  | 当方向为`horizontal`时，是否将内容设置居中 |      [基本用法](#基本用法)     |  
+|   mode   |   `'normal'\|'alternative'`   | `normal`  | 可选，`normal`模式下内容按默认方向排布， `alternative`模式下内容交替排布 |      [自定义内容](#自定义内容)     |  
+|   time-position   |   `'left'\|'bottom'`   | `left`  | 可选，仅当`direction` 为 `vertical` 时定义时间参数位置(全局设置，当与`mode`属性冲突时以`mode`为准) |      [自定义内容](#自定义内容)     |  
 
-data 参数
+### d-time-axis-item
 
 | 参数 | 类型 | 默认 | 说明 | 跳转 Demo                   |
 | ---- | ----   | ---- | ---- | ----  |
-|  time|`string`|   --   |   可选，时间   |   | 
-| text |`string` |  --    |   可选，文本内容   |   | 
-|   dotColor   |  `string`    |   --   |   可选，自定义时间圈颜色   |   | 
+|  time|`string`|   --   |   可选，时间   |   [基本用法](#基本用法)  | 
+| text |`string` |  --    |   可选，文本内容   |   [基本用法](#基本用法)  | 
+|   dot-color   |  `string`    |   --   |   可选，自定义时间圈颜色   |   [基本用法](#基本用法)  | 
+|  line-style| `'solid'\|'dashed'\|'dotted'\|'none'` |   `solid`   |   可选，设置线条样式（若没有设置，则默认时间轴最后一个元素为`none`）   |  [自定义样式](#自定义样式) | 
+| line-color |`string`                                        |  --         |   可选，设置线条颜色   | [自定义样式](#自定义样式) | 
+| position |`'top'\|'bottom'\|'left'\|'right'`    |  当`direction`为`vertical`时默认：`right`，当`direction`为`horizontal`时，默认：`bottom`   |   可选，设置内容存在的位置，若有time则time处在相反的位置   | [自定义内容位置](#自定义内容位置) | 
+|   time-position   |   `'left'\|'bottom'`   | `left`  | 可选，仅当`direction` 为 `vertical` 时定义时间参数位置(全局设置，当与`position`属性冲突时以`position`为准) |      [设置时间位置](#设置时间位置)     |  
+|   type   |   `'primary' \| 'success' \| 'warning' \| 'error'`   | `primary`  | 可选，时间点类型 |      [自定义内容](#自定义内容)     |  
+
+### d-time-axis-item插槽
+
+| 参数           | 描述        | 跳转 Demo                   |
+| ------------  | ----           | ---------                   | 
+|   default   |    自定义内容  |     [自定义内容](#自定义内容)    |  
+|   dot   |    自定义时间轴点  |     [自定义样式](#自定义样式)    |  
+|   time   |    自定义时间  |     [自定义样式](#自定义样式)    |  
+|   extra   |   自定义两个时间点间附加元素  |     [自定义内容](#自定义内容)    |