更新大理市民卡app
diff --git a/uview-ui/components/u-time-line-item/u-time-line-item.vue b/uview-ui/components/u-time-line-item/u-time-line-item.vue
new file mode 100644
index 0000000..be86fdc
--- /dev/null
+++ b/uview-ui/components/u-time-line-item/u-time-line-item.vue
@@ -0,0 +1,83 @@
+<template>
+ <view class="u-time-axis-item">
+ <slot name="content" />
+ <view class="u-time-axis-node" :style="[nodeStyle]">
+ <slot name="node">
+ <view class="u-dot">
+ </view>
+ </slot>
+ </view>
+ </view>
+</template>
+
+<script>
+ /**
+ * timeLineItem 时间轴Item
+ * @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。(搭配u-time-line使用)
+ * @tutorial https://www.uviewui.com/components/timeLine.html
+ * @property {String} bg-color 左边节点的背景颜色，一般通过slot内容自定义背景颜色即可（默认#ffffff）
+ * @property {String Number} node-top 节点左边图标绝对定位的top值，单位rpx
+ * @example <u-time-line-item node-top="2">...</u-time-line-item>
+ */
+ export default {
+ name: "u-time-line-item",
+ props: {
+ // 节点的背景颜色
+ bgColor: {
+ type: String,
+ default: "#ffffff"
+ },
+ // 节点左边图标绝对定位的top值
+ nodeTop: {
+ type: [String, Number],
+ default: ""
+ }
+ },
+ data() {
+ return {
+
+ }
+ },
+ computed: {
+ nodeStyle() {
+ let style = {
+ backgroundColor: this.bgColor,
+ };
+ if (this.nodeTop != "") style.top = this.nodeTop + 'rpx';
+ return style;
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/style.components.scss";
+
+ .u-time-axis-item {
+ @include vue-flex;
+ flex-direction: column;
+ width: 100%;
+ position: relative;
+ margin-bottom: 32rpx;
+ }
+
+ .u-time-axis-node {
+ position: absolute;
+ top: 12rpx;
+ left: -40rpx;
+ transform-origin: 0;
+ transform: translateX(-50%);
+ @include vue-flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+ font-size: 24rpx;
+ }
+
+ .u-dot {
+ height: 16rpx;
+ width: 16rpx;
+ border-radius: 100rpx;
+ background: #ddd;
+ }
+</style>