qingdao-employment-service/common/common.css

/* 公共样式表 */
page {
    min-height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
    font-size: 28rpx;
    background-color: #FFFFFF;
    color: #333333;
    overflow: hidden;
}

/* 禁止页面回弹 */
/* html,
body,
page {
    overscroll-behavior: none;
    overflow: hidden;
} */

image {
    width: 100%;
    height: 100%;
}

.page-body {
    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
    /* width: 100%; */
    /* height: 100%; */
}

body,
html {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

li {
    list-style: none;
}

/* 布局调整 */

/* 点击动效 */
/* 缩小 */
.button-click {
    /* transition: transform 0.1s ease; */
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.button-click:active {
    transform: scale(0.95);
}

/* 背景变色 */
.btn-light {
    color: white;
    border-radius: 16rpx;
    transition: background-color 0.2s;
}

.btn-light:active {
    background-color: rgba(189, 197, 254, 0.15);
}


.btn-incline {
    transition: transform 0.2s ease;
    transform-style: preserve-3d;
}

.btn-incline:active {
    transform: perspective(600px) rotateY(6deg) rotateX(3deg);
}

.btn-feel {
    transition: transform 0.5s ease;
    /* transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
    transform-style: preserve-3d;
}

.btn-feel:active {
    transform: perspective(600px) rotateX(6deg) scale(0.98);
}

.press-button {
    padding: 10px 20px;
    background: #3A4750;
    /* 深灰蓝 */
    color: #ffffff;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    /* transition: transform 0.4s ease, box-shadow 0.1s ease; */
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* box-shadow: 0 4px 0 #2C3E50; */
}

.press-button:active {
    transform: scale(0.95) translateY(2px);
    /* box-shadow: 0 2px 0 #1C2833; */
}

/* 动画效果 */
.btn-shaky:active {
    animation: shakeScale 0.6s;
}

@keyframes shakeScale {
    0% {
        transform: scale(1);
    }

    10% {
        transform: scale(0.9) rotate(-3deg);
    }

    20% {
        transform: scale(1.05) rotate(3deg);
    }

    30% {
        transform: scale(0.95) rotate(-3deg);
    }

    40% {
        transform: scale(1.02) rotate(3deg);
    }

    50% {
        transform: scale(0.98) rotate(-2deg);
    }

    60% {
        transform: scale(1.01) rotate(2deg);
    }

    70% {
        transform: scale(0.99) rotate(-1deg);
    }

    80% {
        transform: scale(1.005) rotate(1deg);
    }

    90% {
        transform: scale(1) rotate(0deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* 控制hover */
.opctiy_8 {
    opacity: 0.8 !important;
}

.opctiy_7 {
    opacity: 0.7 !important;
}

.opctiy_6 {
    opacity: 0.6 !important;
}

.opctiy_5 {
    opacity: 0.5 !important;
}

.opctiy_4 {
    opacity: 0.4 !important;
}

.opctiy_3 {
    opacity: 0.3 !important;
}

.opctiy_2 {
    opacity: 0.2 !important;
}

.opctiy_1 {
    opacity: 0.1 !important;
}

/* 控制文字大小 */
.fs_10 {
    font-size: 20rpx !important;
}

.fs_12 {
    font-size: 24rpx !important;
}

.fs_14 {
    font-size: 28rpx !important;
}

.fs_16 {
    font-size: 32rpx !important;
}

.fs_18 {
    font-size: 36rpx !important;
}

.fs_20 {
    font-size: 40rpx !important;
}

.fs_22 {
    font-size: 44rpx !important;
}

.fs_24 {
    font-size: 48rpx !important;
}

.fs_26 {
    font-size: 52rpx !important;
}

.fs_28 {
    font-size: 56rpx !important;
}

.fs_30 {
    font-size: 60rpx !important;
}

.fs_32 {
    font-size: 64rpx !important;
}

/* 控制字体粗细 */
.fw_blod {
    font-weight: bold;
}

/* 控制字体颜色 */
.color_D16B3F {
    color: #D16B3F !important;
}

.color_C7331D {
    color: #C7331D !important;
}

.color_666666 {
    color: #666666 !important;
}

.color_F8A52F {
    color: #F8A52F !important;
}

.color_999999 {
    color: #999999 !important;
}

.color_C7331D {
    color: #C7331D !important;
}

.color_333333 {
    color: #333333 !important;
}

.color_FFFFFF {
    color: #FFFFFF !important;
}

.color_E7612E {
    color: #E7612E !important;
}

.color_EF4B37 {
    color: #EF4B37 !important;
}

.color_5F5F5F {
    color: #5F5F5F !important;
}

.color_FB7307 {
    color: #FB7307 !important;
}

.color_256BFA {
    color: #256BFA !important;
}

.color_4E8ADE {
    color: #4E8ADE !important;
}

.color_D9D9D9 {
    color: #D9D9D9 !important;
}

/* 控制左右距离 */
.mar_le30 {
    margin-left: 60rpx !important;
}

.mar_le25 {
    margin-left: 50rpx !important;
}

.mar_le20 {
    margin-left: 40rpx !important;
}

.mar_le15 {
    margin-left: 30rpx !important;
}

.mar_le10 {
    margin-left: 20rpx !important;
}

.mar_le5 {
    margin-left: 10rpx !important;
}

.mar_ri5 {
    margin-right: 10rpx !important;
}

.mar_ri10 {
    margin-right: 20rpx !important;
}

.mar_ri15 {
    margin-right: 30rpx !important;
}

.mar_ri20 {
    margin-right: 40rpx !important;
}

.mar_ri25 {
    margin-right: 50rpx !important;
}

.mar_top0 {
    margin-top: 0 !important;
}

.mar_top5 {
    margin-top: 10rpx !important;
}

.mar_top10 {
    margin-top: 20rpx !important;
}

.mar_top15 {
    margin-top: 30rpx !important;
}

.mar_top20 {
    margin-top: 40rpx !important;
}

.mar_top25 {
    margin-top: 50rpx !important;
}

/* 控制字体粗细  */
.fw_blod {
    font-weight: bold !important;
}

/* 控制背景色 */
.bg_e8 {
    background-color: #e8e8e8 !important;
}

/* 控制背景色 */
.bg_cc {
    background-color: #CCCCCC !important;
}

/* 控制背景色 */
.bg_ff {
    background-color: #ffffff !important;
}



/* 弹性布局 */
.fl_box {
    display: flex;
}

.fl_deri {
    flex-direction: column;
}

.fl_row {
    flex-direction: row;
}

.fl_justmiddle {
    justify-content: center;
}

.fl_juststart {
    justify-content: flex-start;
}

.fl_justbet {
    justify-content: space-between;
}

.fl_justround {
    justify-content: space-around;
}

.fl_justend {
    justify-content: flex-end;
}

.fl_almiddle {
    align-items: center;
}

.fl_alstart {
    align-items: flex-start;
}

.fl_alend {
    align-items: flex-end;
}

.fl_1 {
    flex: 1;
}

.fl_warp {
    flex-wrap: wrap
}

.fl_nowarp {
    flex-wrap: nowrap
}

.line_2 {
    display: -webkit-box;
    /* 让文本内容成为弹性盒 */
    -webkit-box-orient: vertical;
    /* 设置盒子的方向为垂直 */
    -webkit-line-clamp: 2;
    /* 限制最多显示两行 */
    overflow: hidden;
    /* 隐藏超出的文本 */
    text-overflow: ellipsis;
    /* 使用省略号 */
}

.line_1 {
    display: -webkit-box;
    /* 让文本内容成为弹性盒 */
    -webkit-box-orient: vertical;
    /* 设置盒子的方向为垂直 */
    -webkit-line-clamp: 1;
    /* 限制最多显示两行 */
    overflow: hidden;
    /* 隐藏超出的文本 */
    text-overflow: ellipsis;
    /* 使用省略号 */
}

.grayscale {
    filter: grayscale(100%) opacity(0.6);
}

.height-100 {
    height: 100%;
}


.pointEveNone {
    pointer-events: none;
}

/* 
 * 
 *  TransitionGroup 动画
 *  stagger 错峰
 *  fade-up-stagger --i 淡入上滑（经典错峰）
 *  pop-in-stagger --i 旋转缩放弹入（活泼）
 *  slide-left-stagger 从左侧滑入（消息流风格）
 *  blur-fade-stagger  --i 渐显 + 模糊（毛玻璃感）
 *  bounce-up-stagger 从底部弹跳入场（物理感）
 * 
 */
/* 淡入上滑（经典错峰） */
.fade-up-stagger-enter-active {
    transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    transition-delay: calc(var(--i) * 0.1s);
}

.fade-up-stagger-enter-from {
    opacity: 0;
    transform: translateY(20px);
}

.fade-up-stagger-leave-active {
    transition: opacity 0.25s ease;
}

.fade-up-stagger-leave-to {
    opacity: 0;
}

/*  */

.pop-in-stagger-enter-active {
    transition: all 0.45s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    transition-delay: calc(var(--i) * 0.08s);
}

.pop-in-stagger-enter-from {
    opacity: 0;
    transform: scale(0.7) rotate(-10deg);
}

.pop-in-stagger-leave-active {
    transition: all 0.2s ease;
}

.pop-in-stagger-leave-to {
    opacity: 0;
    transform: scale(0.9) rotate(5deg);
}

.slide-left-stagger-enter-active {
    transition: all 0.35s ease-out;
    transition-delay: calc(var(--i) * 0.07s);
}

.slide-left-stagger-enter-from {
    opacity: 0;
    transform: translateX(-100%);
}

.slide-left-stagger-leave-active {
    transition: all 0.25s ease;
}

.slide-left-stagger-leave-to {
    opacity: 0;
    transform: translateX(50%);
}

/* 错峰动画 */
.stagger-enter-active {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-delay: calc(var(--i) * 0.42s);
    /* 关键：120ms 间隔 */
}

.stagger-enter-from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    /* 更大位移 + 轻微缩放 */
}

.stagger-leave-active {
    transition: all 0.25s ease;
}

.stagger-leave-to {
    opacity: 0;
    transform: translateX(20px);
}

.stagger-move {
    transition: transform 0.4s ease;
}

.blur-fade-stagger-enter-active {
    transition: all 0.5s ease;
    transition-delay: calc(var(--i) * 0.09s);
}

.blur-fade-stagger-enter-from {
    opacity: 0;
    filter: blur(8px);
    transform: scale(1.02);
}

.blur-fade-stagger-leave-active {
    transition: all 0.2s ease;
}

.blur-fade-stagger-leave-to {
    opacity: 0;
    filter: blur(4px);
}

.bounce-up-stagger-enter-active {
    animation: stagger-bounce 0.6s forwards;
    animation-delay: calc(var(--i) * 0.12s);
}

.bounce-up-stagger-leave-active {
    transition: all 0.25s ease;
}

.bounce-up-stagger-leave-to {
    opacity: 0;
    transform: translateY(30px);
}

@keyframes stagger-bounce {
    0% {
        opacity: 0;
        transform: translateY(100px) scale(0.8);
    }

    60% {
        transform: translateY(-10px) scale(1.05);
    }

    80% {
        transform: translateY(5px) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}