增加晶全app静态页面

node_modules/vk-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>