MP-zxs/pages/other/znzx/znzx.wxss

/* pages/other/znzx/znzx.wxss */

.containers {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: calc(100vh);
    background: linear-gradient(179deg, #cce1ff 0%, #ffffff 53%, #f9fbff 78%, #f8fbff 100%);
}

.msg-box {
    margin-top: 30rpx;
    padding: 0 30rpx;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

.msg_type {
    width: 100%;
    display: flex;
    align-items: flex-start;
}

.msg_type>.msg_headimg {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
}

.msg_type>.msg_headimg>image {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.msg_type>.msg_content {
    position: relative;
    padding: 19rpx 30rpx;
    width: fit-content;
    max-width: calc(100% - 180rpx);
    line-height: 42rpx;
    font-size: 28rpx;
    font-family: "苹方R";
    box-sizing: border-box;
    --mainColor: #000000;
}

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

.msg_type_left>.msg_content {
    margin-left: 20rpx;
    background: #ffffff;
    border-radius: 20rpx 30rpx 20rpx 30rpx;
    box-shadow: 0 0 10rpx #e7f1ff;
}

.msg_type_left>.msg_content::before {
    content: "";
    position: absolute;
    top: 25rpx;
    left: -25rpx;
    z-index: 1;
    width: 0;
    height: 0;
    border-top: 15rpx solid transparent;
    border-left: 15rpx solid transparent;
    border-right: 15rpx solid #ffffff;
    border-bottom: 15rpx solid transparent;
}

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

.msg_type_right>.msg_content {
    color: #ffffff;
    margin-right: 20rpx;
    background-image: linear-gradient(90deg, #91b7ff 0%, #3187ff 100%);
    border-radius: 30rpx 20rpx 30rpx 20rpx;
}

.msg_type_right>.msg_content::before {
    content: "";
    position: absolute;
    top: 25rpx;
    right: -25rpx;
    z-index: 1;
    width: 0;
    height: 0;
    border-top: 15rpx solid transparent;
    border-left: 15rpx solid #3187ff;
    border-right: 15rpx solid transparent;
    border-bottom: 15rpx solid transparent;
}

/* 普通消息 */
.msg_content_type1 {
    width: fit-content;
    font-family: "苹方R";
    color: var(--mainColor);
}

/* 消息类型 1 */
.msg_content_type2 {
    width: 100%;
}

.msg_content_type2_title {
    width: 100%;
    line-height: 42rpx;
    font-size: 28rpx;
    font-family: "苹方R";
    color: #000000;
}

.msg_content_type2_link_box {
    margin-top: 20rpx;
    width: 100%;
}

.msg_content_type2_link {
    padding: 10rpx 0;
    width: 100%;
    line-height: 39rpx;
    font-size: 26rpx;
    font-family: "苹方R";
    color: #006eff;
}

.msg_content_type2_subtitle {
    margin-top: 20rpx;
    padding-top: 20rpx;
    width: 100%;
    line-height: 42rpx;
    font-size: 28rpx;
    font-family: "苹方R";
    color: #000000;
    border-top: 1px solid #dddddd;
}

.msg_content_type2_sublink_box {
    margin-top: 20rpx;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.msg_content_type2_sublink {
    margin: 10rpx;
    padding: 10rpx 30rpx;
    width: fit-content;
    line-height: 39rpx;
    font-size: 26rpx;
    font-family: "苹方R";
    color: #006eff;
    background: #006eff23;
    border-radius: 30rpx;
}

/* 消息类型 2 */
.msg_content_type3 {
    width: 100%;
}

.msg_content_type3_title {
    width: 100%;
    line-height: 42rpx;
    font-size: 28rpx;
    font-family: "苹方R";
    color: #000000;
}

.msg_content_type3_link_box {
    margin-top: 20rpx;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.msg_content_type3_link {
    margin: 10rpx;
    padding: 10rpx 30rpx;
    width: fit-content;
    line-height: 39rpx;
    font-size: 26rpx;
    font-family: "苹方R";
    color: #006eff;
    background: #006eff23;
    border-radius: 30rpx;
}

/* 消息类型 3 */
.msg_content_type4 {
    width: 100%;
}

.msg_content_type4_title {
    margin-bottom: 20rpx;
    width: 100%;
    line-height: 42rpx;
    font-size: 28rpx;
    font-family: "苹方R";
    color: #000000;
}

.msg_content_type4_rich {
    font-size: 26rpx;
    font-family: "苹方R";
    color: #000000;
    line-height: 39rpx;
}

.msg_content_type4_link_box {
    margin-top: 20rpx;
    width: 100%;
}

.msg_content_type4_link {
    margin-top: 20rpx;
    padding: 10rpx 30rpx;
    width: fit-content;
    line-height: 39rpx;
    font-size: 26rpx;
    font-family: "苹方R";
    color: #000000;
    background: #006eff1c;
    border-radius: 30rpx;
}

.msg_content_type4_link>text {
    color: #006eff;
}








.control {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 99;
    padding: 10rpx 20rpx 80rpx 20rpx;
    width: 100%;
    min-height: 160rpx;
    background: #eeeeee;
    box-sizing: border-box;
}

.control-box {
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.control-voice {
    width: 60rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-voice>image {
    width: 60rpx;
    height: auto;
}

.control-input {
    padding-top: 10rpx;
    padding-bottom: 10rpx;
    margin-left: 20rpx;
    width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.control-input-voice {
    position: relative;
    z-index: 999;
    padding: 20rpx 0;
    width: 100%;
    height: 100%;
    font-size: 30rpx;
    font-family: "苹方M";
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 10rpx;
}

.control-input-voice-active {
    position: absolute;
    left: -25%;
    bottom: -200rpx;
    z-index: 999;
    width: 150%;
    height: 480rpx;
    color: #ffffff;
    align-items: flex-start;
    background-image: linear-gradient(to bottom, #bbbbbb, #707070 120%);
    border-radius: 50% 50% 0 0;
}

.voice-mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: calc(100% - 180rpx);
    background: rgba(0, 0, 0, 0.5);
}

.voicing-box {
    position: absolute;
    bottom: calc(50% + 100rpx);
    left: calc(50% - 100rpx);
    height: 150rpx;
    width: 200rpx;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.voiceing {
    width: 12rpx;
    height: 150rpx;
    border-radius: 6rpx;
    animation: voiceing 1s var(--time) infinite;
}

.voiceing:nth-child(1) {
    --time: -0.1s;
    background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}

.voiceing:nth-child(2) {
    --time: -0.2s;
    background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}

.voiceing:nth-child(3) {
    --time: -0.3s;
    background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
}

.voiceing:nth-child(4) {
    --time: -0.4s;
    background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}

.voiceing:nth-child(5) {
    --time: -0.5s;
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}

.voiceing:nth-child(6) {
    --time: -0.4s;
    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}

.voiceing:nth-child(7) {
    --time: -0.3s;
    background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
}

.voiceing:nth-child(8) {
    --time: -0.2s;
    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}

.voiceing:nth-child(9) {
    --time: -0.1s;
    background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
}

.voiceing:nth-child(10) {
    --time: 0s;
    background-image: linear-gradient(to top, #9890e3 0%, #b1f4cf 100%);
}

@keyframes voiceing {
    0% {
        height: 100rpx;
    }

    50% {
        height: 50rpx;
    }

    100% {
        height: 100rpx;
    }
}

.control-input>textarea {
    padding: 20rpx;
    width: 100%;
    height: 40rpx;
    line-height: 45rpx;
    font-size: 30rpx;
    font-family: "苹方R";
    background: #ffffff;
    border-radius: 10rpx;
    transition: all 0.35s;
}

.control-send {
    margin-left: 20rpx;
    margin-bottom: 15rpx;
    width: 120rpx;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    font-family: "苹方R";
    color: #515151;
    background: #ffffff;
    border-radius: 10rpx;
    transition: all 0.2s;
}

.control-send-ok {
    color: #ffffff;
    background: #3490de;
}

.fill {
    width: 100%;
    height: 1rpx;
}

.fill-bottom {
    height: 210rpx;
}





.popContain {
    position: relative;
    width: 100%;
    height: calc(100% - 130rpx);
}

.pop-title {
    padding-bottom: 20rpx;
    position: sticky;
    top: 0;
    z-index: 9;
    width: 100%;
    height: 96rpx;
    text-align: center;
    line-height: 48rpx;
    font-family: "苹方M";
    font-size: 32rpx;
    color: #313131;
    background: #ffffff;
    overflow: hidden;
}

.popRich {
    font-size: 26rpx;
    font-family: "苹方R";
    color: #000000;
    line-height: 39rpx;
}