st-common-ui-vue3/lib/components/StTimeline1/StTimeline1.css

小尾巴通用 Vue3 UI 组件库

.st-timeline1[data-v-b5f8dbe5]{position:relative;width:100%;height:100vh;overflow:hidden}.st-timeline1 .st-timeline1__display[data-v-b5f8dbe5]{position:relative;z-index:1}.st-timeline1 .st-timeline1__timeline[data-v-b5f8dbe5]{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-rows:1fr;grid-template-columns:4fr 1fr;justify-items:start;align-items:center}.st-timeline1 .st-timeline1__timeline .st-timeline1__timeline-swiper[data-v-b5f8dbe5]{grid-row:1/2;grid-column:2/3;position:relative;z-index:2;box-sizing:border-box;width:100%;height:100%;border-left:2px solid rgba(206,206,206,.2);border-top:none;display:grid;grid-template-rows:1fr;grid-template-columns:1fr;align-items:center}.st-timeline1 .st-timeline1__timeline .st-timeline1__timeline-swiper .st-timeline1__timeline-swipe__slide[data-v-b5f8dbe5]{box-sizing:border-box;padding-left:1rem;padding-top:0;cursor:pointer}.st-timeline1 .st-timeline1__timeline .st-timeline1__timeline-swiper .st-timeline1__timeline-swipe__slide .st-timeline1__timeline-swipe__slide__content[data-v-b5f8dbe5]{width:100%;height:100%;display:flex;justify-content:start;align-items:center;color:var(--timeline-color)}.st-timeline1 .st-timeline1__timeline .st-timeline1__timeline-swiper .st-timeline1__timeline-swipe__slide .st-timeline1__timeline-swipe__slide__content .st-timeline1__timeline-swipe__slide__content__label[data-v-b5f8dbe5]{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;text-overflow:ellipsis;line-clamp:var(--timeline-text-max-line);-webkit-line-clamp:var(--timeline-text-max-line)}.st-timeline1 .st-timeline1__timeline .st-timeline1__timeline-swiper .st-timeline1__timeline-swipe__slide--active[data-v-b5f8dbe5]{position:relative;width:100%}.st-timeline1 .st-timeline1__timeline .st-timeline1__timeline-swiper .st-timeline1__timeline-swipe__slide--active[data-v-b5f8dbe5]:before{content:"";position:absolute;top:50%;left:-1px;transform:translate(-50%,-50%);z-index:2;width:4px;height:4px;background-color:var(--timeline-color-active);border-radius:50%}.st-timeline1 .st-timeline1__timeline .st-timeline1__timeline-swiper .st-timeline1__timeline-swipe__slide--active .st-timeline1__timeline-swipe__slide__content[data-v-b5f8dbe5]{width:100%}.st-timeline1 .st-timeline1__timeline .st-timeline1__timeline-swiper .st-timeline1__timeline-swipe__slide--active .st-timeline1__timeline-swipe__slide__content .st-timeline1__timeline-swipe__slide__content__label[data-v-b5f8dbe5]{color:var(--timeline-color-active)}.st-timeline1--small-screen .st-timeline1__timeline[data-v-b5f8dbe5]{grid-template-rows:5fr 1fr;grid-template-columns:1fr;justify-items:center;align-items:start;overflow:hidden}.st-timeline1--small-screen .st-timeline1__timeline .st-timeline1__timeline-swiper[data-v-b5f8dbe5]{grid-row:2/3;grid-column:1/2;width:100vw;height:100%;border-top:2px solid rgba(206,206,206,.2);border-left:none;align-items:start}.st-timeline1--small-screen .st-timeline1__timeline .st-timeline1__timeline-swiper .st-timeline1__timeline-swipe__slide[data-v-b5f8dbe5]{padding-left:0;padding-top:1rem}.st-timeline1--small-screen .st-timeline1__timeline .st-timeline1__timeline-swiper .st-timeline1__timeline-swipe__slide .st-timeline1__timeline-swipe__slide__content[data-v-b5f8dbe5]{box-sizing:border-box;padding-left:1rem;padding-right:1rem;justify-content:center;align-items:start}.st-timeline1--small-screen .st-timeline1__timeline .st-timeline1__timeline-swiper .st-timeline1__timeline-swipe__slide--active[data-v-b5f8dbe5]:before{top:-1px;left:50%;transform:translate(-50%,-50%)}