sgy-web/pages/recruit/referto/referto.wxss

page {
    background-image: linear-gradient(to top, #6fbaf0, #6fbaf0);
    padding-bottom: 50rpx;
}

.referto-img {
    width: 100%;
}

.referto-cont {
    padding: 0 30rpx;
    box-sizing: border-box;
}

.referto-blue {
    background-color: #0e55ad;
    border-radius: 20rpx;
    position: relative;
    top: -20rpx;
    z-index: 9;
}

.referto-blue::after,
.referto-blue::before {
    position: absolute;
    content: '';
    background-color: rgba(14, 85, 173, .2);
    left: 20rpx;
    border-radius: 20rpx 20rpx 0 0;
}
.referto-blue::after {
    z-index: -2;
    width: calc(100% - 40rpx);
    left: 20rpx;
    top: -20rpx;
    height: 20rpx;
}
.referto-blue::before {
    z-index: -1;
    width: calc(100% - 80rpx);
    left: 40rpx;
    top: -40rpx;
    height: 40rpx;
}

.referto-drop {
    padding: 30rpx;
    box-sizing: border-box;
    position: relative;
}

.referto-drop image {
    width: 40rpx;
    position: absolute;
    right: 30rpx;
}

.referto-drop text {
    display: inline-block;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background-color: #ffaf59;
    margin-right: 20rpx;
}

.referto-drop text:nth-child(2) {
    background-color: #7fe2ff;
}

.referto-drop text:nth-child(3) {
    background-color: #ffffff;
}

.referto-white {
    background: white;
    border-radius: 20rpx;
    padding: 30rpx;
    position: relative;
}


.referto-back {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
}

.referto-title {
    margin-bottom: 30rpx;
    display: flex;
}

.referto-title-name {
    flex: 1;
    display: inline-block;
}

.referto-title-name text {
    background-color: #1e6dce;
    padding: 0 30rpx;
    line-height: 68rpx;
    font-size: 34rpx;
    border-radius: 20rpx 0 20rpx 0;
    color: #fff;
    display: inline-block;
}

.referto-title-tips {
    text-transform: uppercase; 
    font-size: 44rpx;
    line-height: 68rpx;
    color: #eef6ff;
}

.site-form {
    display: block;
}

.site-input {
    position: relative;
    line-height: 90rpx;
    margin-bottom: 30rpx;
}

.site-input  picker {
    margin-bottom: 30rpx;
    position: relative;
}

.surplus {
    text-align: center;
    color: #db0000;
}

.site-input label text {
    color: #ee291b;
}

.picker-text {
    color: #ee291b;
    font-size: 26rpx;
    margin-top: 20rpx;
}

.picker-remark picker {
    position: relative;
    width: 100%;
    background-color: #f9fcff;
    padding: 30rpx 80rpx 30rpx 30rpx;
    box-sizing: border-box;
    margin-top: 30rpx;
}

.picker-remark image {
    width: 44rpx;
    height: 44rpx;
    position: absolute;
    right: 20rpx;
    top: calc(50% - 22rpx);
}


.site-input input,
.site-input picker {
    width: 100%;
    height: 90rpx;
    background-color: #f9fcff;
    padding: 0 30rpx;
    box-sizing: border-box;
}

.site-input image {
    width: 44rpx;
    height: 44rpx;
    position: absolute;
    right: 20rpx;
    top: calc(50% - 22rpx);
}

.site-btn {
    padding: 20rpx 30rpx;
    margin: 60rpx 0;
    text-align: center;
    position: relative;
    z-index: 2;
}

.site-btn button[size="mini"],
.site-btn text {
    display: inline-block;
    background: #1e6dce;
    border-radius: 80rpx;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 30rpx;
    color: white;
    padding: 0 80rpx;
}

.site-btn.active text {
    background: #b4b4b4;
}

.site-btn button[disabled] {
    background: #7789ff !important;
    color: #fff !important;
}

.site-switch {
    font-size: 32rpx;
    margin: 30rpx;
    display: flex;
    line-height: 40rpx;
}

.site-switch text {
    flex: 1;
}

.site-switch-active {
    color: #797979;
}

.site-input textarea {
    background-color: #f9fcff;
    padding: 30rpx;
    width: 100%;
    box-sizing: border-box;
    min-height: 40rpx;
}

.refertoEject {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .6);
    z-index: 1000;
    display: none;
}

.refertoEject.active {
    display: block;
}

.refertoCont {
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10000;
    padding: 0 10%;
    box-sizing: border-box;
    text-align: center;
    display: none;
}

.refertoCont.active {
    display: -webkit-box;
}

.refertoCont-name {
    width: 100%;
    /* background-image: linear-gradient(to bottom, #ffb70a, #ff7e1c);
    color: #fff; */
    display: inline-block;
    margin-bottom: 50rpx;
    /* padding: 0 60rpx; */
    /* border: 4rpx solid #ffffff; */
    line-height: 80rpx;
    /* border-radius: 90rpx; */
    /* font-size: 34rpx; */
}

.refertoCont-name image,
.refertoCont-img {
    width: 100%;
}

.refertoCont-close {
    width: 68rpx;
    display: block;
    margin: 0 auto;
}

/* 申请成功弹出 */
.checkEject {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .6);
    z-index: 1000;
    display: none;
}

.checkEject.active {
    display: block;
}

.checkCont {
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10000;
    box-sizing: border-box;
    text-align: center;
    display: none;
}

.checkCont.active {
    display: -webkit-box;
}

.checkCont-img,
.checkCont-name  {
    position: absolute;
    width: 80%;
    left: 10%;
    top: 30%;
}

.checkCont-name {
    z-index: 9;
    padding: 120rpx 140rpx;
    box-sizing: border-box;
}

.checkCont-name image {
    width: 70%;
}

.checkCont-text {
    margin-top: 20rpx;
}

.checkCont-text-title {
    font-weight: 600;
    font-size: 34rpx;
}

.checkCont-text-tips {
    color: #666666;
    line-height: 44rpx;
    margin: 25rpx 0;
}

.checkCont-text-go {
    background-color: #ff4751;
    color: #fff;
    border-radius: 80rpx;
    line-height: 74rpx;
}


.referto-tips-name {
    font-weight: 600;
    margin-bottom: 10rpx;
    line-height: 44rpx;
    display: flex;
}

.referto-tips-name image {
    width: 30rpx;
    margin: 8rpx 10rpx 0 0;
}

.referto-tips {
    font-size: 28rpx;
    line-height: 40rpx;
    text-align: justify;
    margin-bottom: 40rpx;
    color: #db0000;
}