|
@@ -0,0 +1,115 @@
|
|
|
+<template>
|
|
|
+ <view class="oa-timeLine-item">
|
|
|
+ <view class="oa-timeLine-item-header">
|
|
|
+ <view class="oa-timeLine-item-header-icon">
|
|
|
+ <u-icon name="info-circle-fill" :color="iconColor" size="18"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="oa-timeLine-item-header-cont">
|
|
|
+ <view class="title">
|
|
|
+ {{ titleValue }}
|
|
|
+ </view>
|
|
|
+ <!-- <view style="margin: auto"> </view> -->
|
|
|
+ <view class="time">
|
|
|
+ {{ timeValue }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="oa-timeLine-item-content">
|
|
|
+ <view class="oa-timeLine-item-content-icon">
|
|
|
+ <view class="icon"></view>
|
|
|
+ </view>
|
|
|
+ <view class="oa-timeLine-item-content-cont">
|
|
|
+ <slot class="content"></slot>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { toRefs } from "vue";
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ titleValue: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ timeValue: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ iconColor: {
|
|
|
+ type: String,
|
|
|
+ default: "#149eff",
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+const { titleValue, timeValue, iconColor } = toRefs(props);
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.oa-timeLine-item {
|
|
|
+ .oa-timeLine-item-header {
|
|
|
+ display: flex;
|
|
|
+ height: 25px;
|
|
|
+ line-height: 25px;
|
|
|
+
|
|
|
+ .oa-timeLine-item-header-icon {
|
|
|
+ margin: auto 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-timeLine-item-header-cont {
|
|
|
+ display: flex;
|
|
|
+ width: calc(100% - 18px - 15px);
|
|
|
+ margin-left: 15px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 15px;
|
|
|
+ color: #000000;
|
|
|
+ overflow: hidden; //超出的文本隐藏
|
|
|
+ text-overflow: ellipsis; //溢出用省略号显示
|
|
|
+ white-space: nowrap; // 默认不换行;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #b5b5b5;
|
|
|
+ margin-left: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-timeLine-item-content {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .oa-timeLine-item-content-icon {
|
|
|
+ width: 18px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 2px;
|
|
|
+ background-color: #e4e7ed;
|
|
|
+ margin: -5px auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .oa-timeLine-item-content-cont {
|
|
|
+ width: 100%;
|
|
|
+ margin: 15px 0px 15px 15px;
|
|
|
+ padding: 15px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// .oa-timeLine-item:last-child {
|
|
|
+// .oa-timeLine-item-content {
|
|
|
+// .oa-timeLine-item-content-icon {
|
|
|
+// .icon {
|
|
|
+// margin-bottom: 15px;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+</style>
|