/* 1.0.2升级 */ .cu-btn.sm{ font-size: 26rpx; } .cu-modal{ z-index: 2001; } .chatTips{ display: inline-flex; align-items: center; position: absolute; z-index: 101; right: 0; left: 0; bottom: 120rpx; bottom: calc(120rpx + env(safe-area-inset-bottom)); } .chatTips image{ width: 100rpx; height: 100rpx; margin-right: 20rpx; flex-shrink: 0; } .chatTips .details{ width: calc(100% - 100rpx - 20rpx); } .chatTips .details .title{ width: 90%; } .cu-chat .cu-item > .main.goods .content, .cu-chat .cu-item > .main.order .content { display: block; } .cu-chat .cu-item > .main.order{ max-width: calc(100% - 200rpx); } .cu-chat .cu-item > .main.order .product { background-color: #f9f9f9; } .cu-chat .cu-item > .main.order .product .item{ display: flex; justify-content: space-between; margin-bottom: 25rpx; } .cu-chat .cu-item > .main.order .product .item:last-of-type{ margin-bottom: 0; } .cu-chat .cu-item > .main.order .product .item .image, .product .item .image image{ width: 100rpx; height: 100rpx; border-radius: 10rpx; } .cu-chat .cu-item > .main.order .product .item .details{ display: flex; flex-wrap: wrap; width: calc(100% - 120rpx); align-content: space-between; } /* 1.0.2升级 模态框 */ .wanl-modal .goods{ display: flex; padding: 20rpx 0; } .wanl-modal .goods:last-of-type { padding-bottom: 0; } .wanl-modal .goods image{ width: 180rpx; height: 180rpx; margin-right: 20rpx; flex-shrink: 0; } .wanl-modal .goods .details{ flex-wrap: wrap; display: flex; flex: 1; align-content: space-between; } .wanl-modal .goods .details .info{ width: 100%; } .opmenu { display: flex; flex-wrap: wrap; margin-top: 2rpx; color: #4c4c4c; } .opmenu .box { padding-top: 35rpx; padding-left: 50rpx; text-align: center; } .opmenu .box .icon { height: 120rpx; width: 120rpx; display: flex; align-items: center; justify-content: center; justify-items: center; background-color: #ffffff; border-radius: 20rpx; font-size: 68rpx; margin-bottom: 10rpx; } .emptybottom{ padding-bottom: 0 !important; } .hidden { display: none !important; } .cu-chat .cu-item > .main .content { font-size: 30rpx; border-radius: 17rpx; } .cu-chat .cu-item [class*='wlIcon-'] { font-size: 34rpx; } .popup-layer { transition: all 0.15s linear; width: 100%; height: 480rpx; background-color: #f5f5f5; position: fixed; z-index: 2000; top: 100%; } .popup-layer.showLayer { -webkit-transform: translate3d(0, -480rpx, 0); transform: translate3d(0, -480rpx, 0); } .popup-layer .emoji .emojinav { background-color: #f8f8f8; } .popup-layer .emoji .emojinav .item { display: flex; align-items: center; height: 100rpx; padding-left: 10rpx; } .popup-layer .emoji .emojinav .item .emojibg { background-color: #dedede; } .popup-layer .emoji .emojinav .item > view { margin: 0 25rpx; width: 60rpx; height: 60rpx; border-radius: 18rpx; background-repeat: no-repeat; background-size: 80%; background-position: center; } .popup-layer .emoji .subject { height: 380rpx; background-color: #f1f1f1; } .popup-layer .emoji .subject .item { padding: 25rpx; } .popup-layer .emoji .subject .item > view { background-repeat: no-repeat; background-size: 56%; background-position: center; width: 12.5%; height: 100rpx; } .input-box { width: 100%; min-height: 100rpx; padding-bottom: env(safe-area-inset-bottom); background-color: #f2f2f2; display: flex; align-items: flex-end; position: fixed; z-index: 2000; bottom: -2rpx; transition: all 0.15s linear; } .input-box [class*='wlIcon-'] { font-size: 50rpx; color: #323232; } .input-box .wlIcon-zhifeiji { color: #fe6600; } .input-box.showLayer { -webkit-transform: translate3d(0, -480rpx, 0); transform: translate3d(0, -480rpx, 0); } .input-box .voice, .input-box .more { flex-shrink: 0; width: 90rpx; height: 100rpx; display: flex; justify-content: center; align-items: center; } .input-box .send { flex-shrink: 0; width: 90rpx; height: 100rpx; display: flex; justify-content: center; align-items: center; } .input-box .send .btn { width: 110rpx; height: 70rpx; display: flex; justify-content: center; align-items: center; border-radius: 16rpx; font-size: 32rpx; } .input-box .textbox { width: 100%; } .input-box .textbox .voice-mode { width: calc(100% - 2rpx); height: 80rpx; margin: 10rpx 0; border-radius: 16rpx; display: flex; justify-content: center; align-items: center; font-size: 28rpx; background-color: #fff; color: #555; } .input-box .textbox .voice-mode.recording { background-color: #e5e5e5; } .input-box .textbox .text-mode { width: 100%; min-height: 80rpx; margin: 10rpx 0; display: flex; background-color: #ffffff; border-radius: 16rpx; } .input-box .textbox .text-mode .box { width: 100%; padding-left: 30rpx; min-height: 80rpx; display: flex; align-items: center; } .input-box .textbox .text-mode .box textarea { width: 100%; } .input-box .textbox .text-mode .em { flex-shrink: 0; width: 80rpx; padding-left: 10rpx; height: 80rpx; display: flex; justify-content: center; align-items: center; } .record { width: 39vw; height: 39vw; position: fixed; top: 35%; left: 30%; background-color: rgba(0, 0, 0, 0.8); border-radius: 40rpx; } .record .ing { width: 100%; height: 30vw; display: flex; justify-content: center; align-items: center; } @-webkit-keyframes volatility { 0% { background-position: 0% 130%; } 20% { background-position: 0% 150%; } 30% { background-position: 0% 155%; } 40% { background-position: 0% 160%; } 50% { background-position: 0% 145%; } 70% { background-position: 0% 150%; } 80% { background-position: 0% 170%; } 90% { background-position: 0% 160%; } 100% { background-position: 0% 135%; } } @keyframes volatility { 0% { background-position: 0% 130%; } 20% { background-position: 0% 150%; } 30% { background-position: 0% 155%; } 40% { background-position: 0% 160%; } 50% { background-position: 0% 145%; } 70% { background-position: 0% 150%; } 80% { background-position: 0% 170%; } 90% { background-position: 0% 160%; } 100% { background-position: 0% 135%; } } .record .ing [class*='wlIcon'] { background-image: linear-gradient(to bottom, #ffffff, #565656 50%); background-size: 100% 200%; -webkit-animation: volatility 1.5s ease-in-out -1.5s infinite alternate; animation: volatility 1.5s ease-in-out -1.5s infinite alternate; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 140rpx; padding-top: 40rpx; color: #f09b37; } .record .cancel { width: 100%; height: 30vw; display: flex; justify-content: center; align-items: center; } .record .cancel [class*='wlIcon'] { color: #fff; font-size: 150rpx; } .record .tis { width: 100%; height: 10vw; display: flex; justify-content: center; font-size: 24rpx; color: #fff; } .record .tis.change { color: #f09b37; } .content { width: 100%; } page{ background-color: #ececec; } .content .msg-list, .cu-chat { position: absolute; top: 0; bottom: 100rpx; bottom: calc(env(safe-area-inset-bottom) + 100rpx); background-color: #ececec; } .loading { display: flex; justify-content: center; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.6); transform: scaleY(0.6); } 20% { -webkit-transform: scaleY(1); transform: scaleY(1); } } @keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.6); transform: scaleY(0.6); } 20% { -webkit-transform: scaleY(1); transform: scaleY(1); } } .loading .spinner { margin: 20rpx 0; width: 60rpx; height: 100rpx; display: flex; align-items: center; justify-content: space-between; } .loading .spinner view { background-color: #dadada; height: 50rpx; width: 6rpx; border-radius: 6rpx; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; } .loading .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .loading .spinner .rect3 { -webkit-animation-delay: -1s; animation-delay: -1s; } .loading .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .loading .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }