[优化] timeline 时间线组件

src/css/layui.css

@@ -1312,10 +1312,6 @@ a cite {
   color: #393d49 !important;
 }
 
-.layui-timeline-item:before {
-  background-color: #eee;
-}
-
 .layui-text {
   line-height: 1.6;
   font-size: 14px;
@@ -4075,62 +4071,6 @@ body .layui-table-tips .layui-layer-content {
   border: none;
 }
 
-.layui-timeline {
-  padding-left: 5px;
-}
-
-.layui-timeline-item {
-  position: relative;
-  padding-bottom: 20px;
-}
-
-.layui-timeline-axis {
-  position: absolute;
-  left: -5px;
-  top: 0;
-  z-index: 10;
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-  background-color: #fff;
-  color: #5fb878;
-  border-radius: 50%;
-  text-align: center;
-  cursor: pointer;
-}
-
-.layui-timeline-axis:hover {
-  color: #ff5722;
-}
-
-.layui-timeline-item:before {
-  content: '';
-  position: absolute;
-  left: 5px;
-  top: 0;
-  z-index: 0;
-  width: 1px;
-  height: 100%;
-}
-
-.layui-timeline-item:first-child:before {
-  display: block;
-}
-
-.layui-timeline-item:last-child:before {
-  display: none;
-}
-
-.layui-timeline-content {
-  padding-left: 25px;
-}
-
-.layui-timeline-title {
-  position: relative;
-  margin-bottom: 10px;
-  line-height: 22px;
-}
-
 .layui-btn .layui-badge,
 .layui-btn .layui-badge-dot {
   margin-left: 5px;

src/module/timeline/index.less

@@ -0,0 +1,59 @@
+.layui-timeline {
+    padding-left: 5px;
+}
+
+.layui-timeline-item {
+    position: relative;
+    padding-bottom: 20px;
+}
+
+.layui-timeline-axis {
+    position: absolute;
+    left: -5px;
+    top: 0;
+    z-index: 10;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    background-color: #fff;
+    color: #5fb878;
+    border-radius: 50%;
+    text-align: center;
+    cursor: pointer;
+}
+
+.layui-timeline-axis:hover {
+    color: #ff5722;
+}
+
+.layui-timeline-item:before {
+    content: '';
+    position: absolute;
+    left: 5px;
+    top: 0;
+    z-index: 0;
+    width: 1px;
+    height: 100%;
+}
+
+.layui-timeline-item:first-child:before {
+    display: block;
+}
+
+.layui-timeline-item:last-child:before {
+    display: none;
+}
+
+.layui-timeline-content {
+    padding-left: 25px;
+}
+
+.layui-timeline-title {
+    position: relative;
+    margin-bottom: 10px;
+    line-height: 22px;
+}
+
+.layui-timeline-item:before {
+    background-color: #eee;
+  }

src/module/timeline/index.vue

@@ -1,7 +1,15 @@
+<script lang="ts">
+export default {
+  name: "LayTimeline",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less"
+</script>
+
 <template>
   <ul class="layui-timeline">
     <slot />
   </ul>
-</template>
-
-<script setup name="LayTimeline" lang="ts"></script>
+</template>

src/module/timelineItem/index.vue

@@ -13,11 +13,19 @@
   </li>
 </template>
 
-<script setup name="LayTimelineItem" lang="ts">
-import { defineProps } from 'vue'
-
-const props = defineProps<{
-  title: string
-  simple?: boolean
-}>()
+<script lang="ts">
+export default {
+  name: "LayTimelineItem",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+
+export interface LayTimelineItemProps {
+  title: string;
+  simple?: boolean;
+}
+
+const props = defineProps<LayTimelineItemProps>();
 </script>