WokerTask/public/xf_voice/css/base.css

.h1 {
    text-align: center;
}

.voice-box {
    box-sizing     : border-box;
    display        : flex;
    justify-content: center;
    margin         : 50px auto;
    padding        : 50px;
    width          : 60%;
    border         : 1px solid gray;
    border-radius  : 3px;
}

.voice-box input {
    box-sizing   : border-box;
    padding      : 10px;
    width        : 70%;
    height       : 50px;
    font-size    : 18px;
    color        : #187cff;
    border       : 1px solid #187cff;
    border-radius: 3px 0px 0px 3px;
}

.voice-box button {
    width        : 30%;
    height       : 50px;
    line-height  : 50px;
    font-size    : 18px;
    color        : white;
    background   : #187cff;
    border       : none;
    border-radius: 0px 3px 3px 0px;
    cursor       : pointer;
}

.voice-box button::before {
    content        : "";
    display        : inline-block;
    width          : 23px;
    height         : 26px;
    vertical-align : middle;
    background     : url(../img/voice.png) no-repeat;
    background-size: contain;

}

.fixed-box {
    box-sizing: border-box;
    display   : none;
    position  : fixed;
    top       : 0px;
    right     : 0px;
    bottom    : 0px;
    left      : 0px;
    border    : .04rem solid #e0e7ff;
    background: rgba(16, 22, 62, .2);
}

.fixed-close {
    position       : absolute;
    top            : 0px;
    right          : 0px;
    padding        : 24px;
    width          : 20px;
    height         : 20px;
    border         : none;
    background     : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABeklEQVRIibXWsWoVQRQA0LObgGCTFFr6env9h/yETSz0tclrBEUJWhjzAqkV/A9/QrC2CtgIYqk2DwvdMExm991ZJrdaZoY53Bnm3u0Wy80BPuI21jjRPjqc4il+4FG3WG4ucS9ZtMaqMfoej5OxLz3uZAuPcXaDKNzt/TuCPFrgYyi87fEK543xKfQFLvoEaYVvQ19DnwxO4euWaA5P4UcBPIzCbmHRcYLleDqfox9wGEG5nnGKRzOvRilnnOIDluPD/BT6HG/GNp+CI/j+HDQCR/BqlPE7LuGlO5+F1sARPIzWwh32Jub3K/YKw1PFYYgV3rWEI2iKh2r7NnhbGZzdWKaeU03tzZ/W8ARH/2TGMq5BZ7XUElzVZebiOTzU3ho0RUqts4in8Kwuk8Uqig/wti4TQSP41XgfQMNlMIBf9fPd/x8t0RTn+h/LEX52i+XmN241RtM4K+Dfe3y7QZTysV/u7D18+RkP8AfPxPpubXzCL9zHVzz5C8ecbD1n3xuUAAAAAElFTkSuQmCC) no-repeat center center;
    background-size: 20px;
    transition     : all .5s;
    cursor         : pointer;
    outline        : none;
}

.fixed-close:hover {
    transform        : rotate(270deg);
    -webkit-transform: rotate(270deg);
}


.fixed-main {
    box-sizing   : border-box;
    position     : absolute;
    left         : 20%;
    bottom       : 0px;
    padding      : 30px;
    width        : 60%;
    height       : 240px;
    font-size    : 18px;
    background   : white;
    border       : 2px solid #e0e7ff;
    border-radius: 5px 5px 0px 0px;
    overflow-y   : auto;
}

.fixed-icon {
    box-sizing     : border-box;
    display        : flex;
    justify-content: center;
    align-items    : center;
    position       : absolute;
    top            : 50%;
    left           : 50%;
    margin-top     : -50px;
    margin-left    : -50px;
    width          : 100px;
    height         : 100px;
    background     : linear-gradient(115deg, #56d8e4 5%, #9f01ea 95%);
    border         : 1px solid #e0e7ff;
    border-radius  : 50%;
}

.fixed-icon::before {
    content      : "";
    position     : absolute;
    display      : inline-block;
    width        : 100px;
    height       : 100px;
    border       : 1px solid #9f01ea;
    box-shadow   : 0px 0px 6px 0px #9f01ea;
    border-radius: 50%;
    animation    : move 1.5s infinite;
}

.fixed-icon::after {
    content      : "";
    position     : absolute;
    display      : inline-block;
    width        : 100px;
    height       : 100px;
    border       : 1px solid #56d8e4;
    box-shadow   : 0px 0px 6px 0px #56d8e4;
    border-radius: 50%;
    animation    : move 1.5s .5s infinite;

}

.fixed-icon img {
    width : 30px;
    height: 50px;
}

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

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

::-webkit-scrollbar {
    width           : 6px;
    height          : 6px;
    background-color: #f9f9f9;
}

::-webkit-scrollbar-thumb {
    border-radius   : 6px;
    background-color: #187cff;
}