From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-time-line-item/u-time-line-item.vue | 83 +++++++++++++++++++++++++++++++++++++++++
1 files changed, 83 insertions(+), 0 deletions(-)
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 鏃堕棿杞碔tem
+ * @description 鏃堕棿杞寸粍浠朵竴鑸敤浜庣墿娴佷俊鎭睍绀猴紝鍚勭璺熸椂闂寸浉鍏崇殑璁板綍绛夊満鏅��(鎼厤u-time-line浣跨敤)
+ * @tutorial https://www.uviewui.com/components/timeLine.html
+ * @property {String} bg-color 宸﹁竟鑺傜偣鐨勮儗鏅鑹诧紝涓�鑸�氳繃slot鍐呭鑷畾涔夎儗鏅鑹插嵆鍙紙榛樿#ffffff锛�
+ * @property {String Number} node-top 鑺傜偣宸﹁竟鍥炬爣缁濆瀹氫綅鐨則op鍊硷紝鍗曚綅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"
+ },
+ // 鑺傜偣宸﹁竟鍥炬爣缁濆瀹氫綅鐨則op鍊�
+ 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>
--
Gitblit v1.9.3