st-common-ui-vue3/es/components/StTimelineItem1/StTimelineItem1.css

小尾巴通用 Vue3 UI 组件库

.st-timeline-item1[data-v-61da7f7f]{position:relative;z-index:99;width:100%;height:100vh;background-size:cover;background-position:center;display:grid;grid-template-rows:1fr;grid-template-columns:2fr 2fr 1fr;justify-items:end;align-items:center}.st-timeline-item1[data-v-61da7f7f]:after{content:"";position:absolute;top:50%;right:0;transform:translate(20%,-50%);width:165%;height:100%;background:radial-gradient(circle at 100% 50%,#000000 0%,rgba(0,0,0,.6235294118) 37.5%,transparent 65%,transparent 100%)}.st-timeline-item1 .st-timeline-item1__content[data-v-61da7f7f]{z-index:1;grid-row:1/2;grid-column:2/3;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:end;overflow:hidden;text-align:end}.st-timeline-item1 .st-timeline-item1__content .st-timeline-item1__content__title[data-v-61da7f7f],.st-timeline-item1 .st-timeline-item1__content .st-timeline-item1__content__desc[data-v-61da7f7f]{transform:translate(100%);padding-right:2rem;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;text-overflow:ellipsis}.st-timeline-item1 .st-timeline-item1__content .st-timeline-item1__content__title[data-v-61da7f7f]{margin-bottom:.5rem;font-size:2rem;font-weight:700;line-clamp:var(--title-max-line);-webkit-line-clamp:var(--title-max-line)}.st-timeline-item1 .st-timeline-item1__content .st-timeline-item1__content__desc[data-v-61da7f7f]{padding-bottom:1rem;font-size:.95rem;line-height:1.25;line-clamp:var(--desc-max-line);-webkit-line-clamp:var(--desc-max-line)}@keyframes st-timeline-item1__content-leave-61da7f7f{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}.st-timeline-item1 .st-timeline-item1__content--leave .st-timeline-item1__content__title[data-v-61da7f7f],.st-timeline-item1 .st-timeline-item1__content--leave .st-timeline-item1__content__desc[data-v-61da7f7f]{animation:st-timeline-item1__content-leave-61da7f7f var(--animation-speed) ease-in-out forwards}@keyframes st-timeline-item1__content-enter-61da7f7f{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.st-timeline-item1 .st-timeline-item1__content--enter .st-timeline-item1__content__title[data-v-61da7f7f]{animation:st-timeline-item1__content-enter-61da7f7f var(--animation-speed) ease-in-out forwards;animation-delay:var(--title-enter-delay)}.st-timeline-item1 .st-timeline-item1__content--enter .st-timeline-item1__content__desc[data-v-61da7f7f]{animation:st-timeline-item1__content-enter-61da7f7f var(--animation-speed) ease-in-out forwards;animation-delay:var(--desc-enter-delay)}.st-timeline-item1 .st-timeline-item1__content--initial .st-timeline-item1__content__title[data-v-61da7f7f],.st-timeline-item1 .st-timeline-item1__content--initial .st-timeline-item1__content__desc[data-v-61da7f7f]{transform:translate(0);animation-duration:0s}.st-timeline-item1--small-screen[data-v-61da7f7f]{grid-template-rows:5fr 1fr;grid-template-columns:1fr;justify-items:start;align-items:end}.st-timeline-item1--small-screen[data-v-61da7f7f]:after{top:35%;transform:translateY(-50%);width:100%;height:165%;background:radial-gradient(circle at 50% 100%,#000000 0%,rgba(0,0,0,.6235294118) 37.5%,transparent 65%,transparent 100%)}.st-timeline-item1--small-screen .st-timeline-item1__content[data-v-61da7f7f]{grid-row:1/2;grid-column:1/2;justify-content:end}.st-timeline-item1--small-screen .st-timeline-item1__content .st-timeline-item1__content__title[data-v-61da7f7f],.st-timeline-item1--small-screen .st-timeline-item1__content .st-timeline-item1__content__desc[data-v-61da7f7f]{padding-left:1rem;padding-right:1rem}.st-timeline-item1--small-screen .st-timeline-item1__content .st-timeline-item1__content__title[data-v-61da7f7f]{font-size:1.75rem}.st-timeline-item1--small-screen .st-timeline-item1__content .st-timeline-item1__content__desc[data-v-61da7f7f]{font-size:.95rem;line-height:1.25}