| | |
| | | .mk-msg-icon { |
| | | display: inline-block; |
| | | position: relative; |
| | | font-size: 16px; |
| | | margin-top: 17px; |
| | | margin-top: 12px; |
| | | margin-right: 20px; |
| | | margin-left: 0px; |
| | | color: #1CD66C; |
| | | cursor: pointer; |
| | | } |
| | | .mk-msg-icon[data-title] { |
| | | position: relative; |
| | | |
| | | &::before { |
| | | content: " "; |
| | | position: absolute; |
| | | top: 6px; |
| | | left: 2px; |
| | | z-index: -1; |
| | | width: 12px; |
| | | height: 3px; |
| | | display: block; |
| | | background: #fff; |
| | | img { |
| | | width: 22px; |
| | | height: 22px; |
| | | } |
| | | &::after { |
| | | span { |
| | | position: absolute; |
| | | top: -10px; |
| | | left: 15px; |
| | | top: -6px; |
| | | left: 19px; |
| | | color: #f5222d; |
| | | font-size: 12px; |
| | | line-height: 16px; |
| | | white-space: nowrap; |
| | | font-weight: 600; |
| | | content: attr(data-title); |
| | | } |
| | | } |
| | | // .mk-msg-icon[data-title] { |
| | | // position: relative; |
| | | |
| | | // &::after { |
| | | // position: absolute; |
| | | // top: -10px; |
| | | // left: 15px; |
| | | // color: #f5222d; |
| | | // font-size: 12px; |
| | | // line-height: 16px; |
| | | // white-space: nowrap; |
| | | // font-weight: 600; |
| | | // content: attr(data-title); |
| | | // } |
| | | // } |
| | | .mk-msg-wrap { |
| | | position: fixed; |
| | | width: 200px; |
| | | height: 400px; |
| | | top: 92px; |
| | | right: 15px; |
| | | width: 300px; |
| | | top: 50px; |
| | | right: 120px; |
| | | z-index: -1; |
| | | opacity: 0; |
| | | padding: 10px; |
| | | padding: 7px 10px 24px; |
| | | font-size: 13px; |
| | | background-color: #fff; |
| | | background-color: var(--mk-sys-color1); |
| | | background-clip: padding-box; |
| | | color: rgba(0, 0, 0, 0.85); |
| | | border: 0; |
| | |
| | | transition: all 0.2s; |
| | | |
| | | .title { |
| | | text-align: center; |
| | | position: relative; |
| | | text-align: left; |
| | | font-size: 14px; |
| | | |
| | | .anticon-close { |
| | | position: absolute; |
| | | right: 10px; |
| | | color: rgba(0, 0, 0, 0.45); |
| | | right: 5px; |
| | | top: 1px; |
| | | cursor: pointer; |
| | | transition: color 0.2s; |
| | | } |
| | | .anticon-close:hover { |
| | | color: rgba(0, 0, 0, 0.85); |
| | | } |
| | | } |
| | | .msg-list { |
| | | .msg-item { |
| | | height: 80px; |
| | | background: rgba(0, 0, 0, 0.05); |
| | | position: relative; |
| | | height: 55px; |
| | | background: #ffffff; |
| | | margin: 10px 0px; |
| | | padding: 5px; |
| | | border-radius: 2px; |
| | | padding: 8px; |
| | | border-radius: 4px; |
| | | font-size: 14px; |
| | | cursor: pointer; |
| | | span { |
| | | display: block; |
| | | overflow: hidden; |
| | | word-break: break-word; |
| | | white-space: nowrap; |
| | | text-overflow: ellipsis; |
| | | } |
| | | } |
| | | .msg-item:first-child { |
| | | margin-top: 7px; |
| | | } |
| | | .msg-item.red { |
| | | color: #C32539; |
| | | } |
| | | .time { |
| | | position: absolute; |
| | | top: 5px; |
| | | right: 8px; |
| | | font-size: 13px; |
| | | } |
| | | } |
| | | |
| | | .jump { |
| | | position: absolute; |
| | | right: 15px; |
| | | bottom: 7px; |
| | | font-size: 14px; |
| | | cursor: pointer; |
| | | color: #1890ff; |
| | | transition: color 0.2s; |
| | | } |
| | | .jump:hover { |
| | | color: #ffffff; |
| | | } |
| | | } |
| | | .mk-msg-wrap.visible { |