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

小尾巴通用 Vue3 UI 组件库

.st-info-card-1-container .st-info-card-1[data-v-8f9cdf67]{position:relative;box-sizing:border-box;padding:var(--padding);padding-top:0;border-radius:.5rem;display:grid;grid-template-columns:1fr;justify-items:center}.st-info-card-1-container .st-info-card-1 .st-info-card-1__img-placeholder[data-v-8f9cdf67],.st-info-card-1-container .st-info-card-1 .st-info-card-1__img-box[data-v-8f9cdf67]{transition:all var(--img-speed) var(--img-delay) ease-in-out}.st-info-card-1-container .st-info-card-1 .st-info-card-1__img-placeholder[data-v-8f9cdf67]{width:var(--img-width);height:var(--img-height)}.st-info-card-1-container .st-info-card-1 .st-info-card-1__img-box[data-v-8f9cdf67]{position:absolute;box-sizing:border-box;width:var(--img-width);height:var(--img-height);padding:var(--padding);padding-bottom:0;display:flex;justify-content:center;align-items:center}.st-info-card-1-container .st-info-card-1 .st-info-card-1__img-box .st-info-card-1__img-box__img[data-v-8f9cdf67]{width:100%;height:100%;border-radius:.25rem;overflow:hidden}.st-info-card-1-container .st-info-card-1 .st-info-card-1__title-box .st-info-card-1__title-box__title[data-v-8f9cdf67]{padding-top:1rem;text-align:center;font-weight:700}.st-info-card-1-container .st-info-card-1 .st-info-card-1__content-box[data-v-8f9cdf67],.st-info-card-1-container .st-info-card-1 .st-info-card-1__content-box__content[data-v-8f9cdf67]{transition-duration:var(--content-speed);transition-delay:var(--content-delay);transition-timing-function:ease-in-out}.st-info-card-1-container .st-info-card-1 .st-info-card-1__content-box[data-v-8f9cdf67]{display:grid;grid-template-columns:1fr;grid-template-rows:0fr;opacity:0;transition-property:all}.st-info-card-1-container .st-info-card-1 .st-info-card-1__content-box .st-info-card-1__content-box__content[data-v-8f9cdf67]{height:0;padding:0;overflow:hidden;text-align:center;clip-path:circle(0 at 50% 0);transition-property:clip-path}.st-info-card-1-container[data-v-8f9cdf67]:hover{--img-translate-y--hover: calc(var(--img-height) * -.4);padding-top:calc(var(--img-translate-y--hover) * -1)}.st-info-card-1-container:hover .st-info-card-1 .st-info-card-1__img-placeholder[data-v-8f9cdf67]{height:calc(var(--img-height) * .75 + var(--img-translate-y--hover))}.st-info-card-1-container:hover .st-info-card-1 .st-info-card-1__img-box[data-v-8f9cdf67]{transform:translateY(var(--img-translate-y--hover));width:calc(var(--img-width) * .75);height:calc(var(--img-height) * .75)}.st-info-card-1-container:hover .st-info-card-1 .st-info-card-1__img-box .st-info-card-1__img-box__img[data-v-8f9cdf67]{box-shadow:0 7px 30px #0003}.st-info-card-1-container:hover .st-info-card-1 .st-info-card-1__content-box[data-v-8f9cdf67]{grid-template-rows:1fr;opacity:1}.st-info-card-1-container:hover .st-info-card-1 .st-info-card-1__content-box .st-info-card-1__content-box__content[data-v-8f9cdf67]{height:auto;padding:.5rem 0;clip-path:circle(100% at 50% 50%)}