st-common-ui-vue3
Version:
小尾巴通用 Vue3 UI 组件库
2 lines (1 loc) • 7.37 kB
CSS
@charset "UTF-8";.st-login-page-1[data-v-97e798f8]{position:relative;width:100%;height:100vh;min-height:var(--page-min-height);overflow:hidden}.st-login-page-1[data-v-97e798f8]:before{content:"";position:absolute;right:55%;top:5%;transform:translateY(-50%);z-index:2;width:var(--circle-mask-diameter);height:var(--circle-mask-diameter);border-radius:50%;background:var(--circle-mask-color);transition:1.8s ease-in-out}.st-login-page-1 .st-login-page-1__form-container[data-v-97e798f8]{position:relative;width:100%;height:100%;overflow:auto}.st-login-page-1 .st-login-page-1__form-container .st-login-page-1__form-container__form[data-v-97e798f8]{position:absolute;top:50%;right:0;z-index:1;transform:translateY(-50%);width:50%;display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center;transition:1s ease-in-out;transition-delay:.6s}.st-login-page-1 .st-login-page-1__form-container .st-login-page-1__form-container__form .st-login-page-1__form-container__form-1[data-v-97e798f8],.st-login-page-1 .st-login-page-1__form-container .st-login-page-1__form-container__form .st-login-page-1__form-container__form-2[data-v-97e798f8]{grid-row:1/2;grid-column:1/2;width:100%;height:100%;transition:opacity .75s ease-in-out;transition-delay:.6s}.st-login-page-1 .st-login-page-1__form-container .st-login-page-1__form-container__form .st-login-page-1__form-container__form-1[data-v-97e798f8]{opacity:1;pointer-events:all}.st-login-page-1 .st-login-page-1__form-container .st-login-page-1__form-container__form .st-login-page-1__form-container__form-2[data-v-97e798f8]{opacity:0;pointer-events:none}.st-login-page-1 .st-login-page-1__panel-container[data-v-97e798f8]{position:absolute;left:0;top:0;width:100%;height:100%;display:grid;grid-template-rows:1fr;grid-template-columns:repeat(2,1fr)}.st-login-page-1 .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-1[data-v-97e798f8],.st-login-page-1 .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-2[data-v-97e798f8]{z-index:3;box-sizing:border-box;width:100%;height:100%;transition:transform .9s ease-in-out;transition-delay:.3s}.st-login-page-1 .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-1[data-v-97e798f8]{padding:3rem 17% 2rem 12%;transform:translate(0)}.st-login-page-1 .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-2[data-v-97e798f8]{padding:3rem 12% 2rem 17%;transform:translate(100%)}.st-login-page-1 .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-1__content[data-v-97e798f8],.st-login-page-1 .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-2__content[data-v-97e798f8]{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-around;align-items:end}.st-login-page-1 .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-1__content .img[data-v-97e798f8],.st-login-page-1 .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-2__content .img[data-v-97e798f8]{width:100%;height:100%;object-fit:contain}.st-login-page-1.toggle-form[data-v-97e798f8]:before{right:50%;transform:translate(100%,-50%)}.st-login-page-1.toggle-form .st-login-page-1__form-container .st-login-page-1__form-container__form[data-v-97e798f8]{right:50%}.st-login-page-1.toggle-form .st-login-page-1__form-container .st-login-page-1__form-container__form .st-login-page-1__form-container__form-1[data-v-97e798f8]{opacity:0;pointer-events:none}.st-login-page-1.toggle-form .st-login-page-1__form-container .st-login-page-1__form-container__form .st-login-page-1__form-container__form-2[data-v-97e798f8]{opacity:1;pointer-events:all}.st-login-page-1.toggle-form .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-1[data-v-97e798f8]{transform:translate(-100%)}.st-login-page-1.toggle-form .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-2[data-v-97e798f8]{transform:translate(0)}@media screen and (max-width: 875px){.st-login-page-1[data-v-97e798f8]:before{--circle-mask-diameter: var(--circle-mask-diameter-small);top:initial;right:initial;left:30%;bottom:78%;transform:translate(-50%)}.st-login-page-1 .st-login-page-1__form-container .st-login-page-1__form-container__form[data-v-97e798f8]{top:50%;right:0;transform:translateY(-25%);width:100%}.st-login-page-1 .st-login-page-1__panel-container[data-v-97e798f8]{width:100%;height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:1fr 2fr 1fr}.st-login-page-1 .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-1[data-v-97e798f8]{padding:1rem 17% 1rem 12%;grid-row:1/2}.st-login-page-1 .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-2[data-v-97e798f8]{padding:1rem 12% 1rem 17%;grid-row:3/4}.st-login-page-1 .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-1__content[data-v-97e798f8],.st-login-page-1 .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-2__content[data-v-97e798f8]{flex-direction:row;justify-content:space-around;align-items:center}.st-login-page-1 .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-1__content .img[data-v-97e798f8],.st-login-page-1 .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-2__content .img[data-v-97e798f8]{width:var(--panel-img-width-small)}.st-login-page-1.toggle-form[data-v-97e798f8]:before{bottom:22%;transform:translate(-50%,100%)}.st-login-page-1.toggle-form .st-login-page-1__form-container .st-login-page-1__form-container__form[data-v-97e798f8]{top:0;right:0;transform:translateY(25%);width:100%}}@media screen and (max-width: 600px){.st-login-page-1[data-v-97e798f8]:before{left:50%;bottom:80%;transform:translate(-50%)}.st-login-page-1 .st-login-page-1__form-container .st-login-page-1__form-container__form[data-v-97e798f8]{transform:translateY(-35%);box-sizing:border-box;padding:0 1rem}.st-login-page-1 .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-1[data-v-97e798f8],.st-login-page-1 .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-2[data-v-97e798f8]{transition-delay:.5s}.st-login-page-1 .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-1[data-v-97e798f8]{transform:translateY(0)}.st-login-page-1 .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-2[data-v-97e798f8]{transform:translateY(100%)}.st-login-page-1 .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-1__content[data-v-97e798f8],.st-login-page-1 .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-2__content[data-v-97e798f8]{display:flex;flex-direction:column;justify-content:center;align-items:center}.st-login-page-1.toggle-form[data-v-97e798f8]:before{bottom:42%;transform:translate(-50%,100%)}.st-login-page-1.toggle-form .st-login-page-1__form-container .st-login-page-1__form-container__form[data-v-97e798f8]{transform:translateY(10%)}.st-login-page-1.toggle-form .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-1[data-v-97e798f8]{transform:translateY(-100%)}.st-login-page-1.toggle-form .st-login-page-1__panel-container .st-login-page-1__panel-container__panel-2[data-v-97e798f8]{transform:translateY(0)}}