2023-12-24 22:29:08 +08:00
|
|
|
|
<!DOCTYPE html>
|
2024-01-15 21:58:12 +08:00
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2024-02-11 17:45:46 +08:00
|
|
|
|
<meta name="referrer" content="no-referrer"/>
|
2024-01-15 21:58:12 +08:00
|
|
|
|
<style>
|
|
|
|
|
|
* {
|
2023-12-24 22:29:08 +08:00
|
|
|
|
padding: 0;
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
|
margin: 0;
|
2023-12-24 22:29:08 +08:00
|
|
|
|
display: flex;
|
2023-12-29 22:41:49 +08:00
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
height: 100vh;
|
2023-12-24 22:29:08 +08:00
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
2024-01-22 22:21:55 +08:00
|
|
|
|
background-color: #F5F5F5;
|
2024-02-03 01:40:26 +08:00
|
|
|
|
/*background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2394AB85' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");*/
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
::-webkit-scrollbar {
|
|
|
|
|
|
width: 10px;
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar-track {
|
|
|
|
|
|
/*-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);*/
|
|
|
|
|
|
border-radius: 8px;
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
|
background: rgba(0, 0, 0, 0);
|
|
|
|
|
|
/*-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);*/
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
|
|
|
|
|
.page {
|
2023-12-24 22:29:08 +08:00
|
|
|
|
display: flex;
|
2024-01-15 21:58:12 +08:00
|
|
|
|
flex-direction: row;
|
2024-03-06 11:39:45 +08:00
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
2024-01-15 21:58:12 +08:00
|
|
|
|
max-width: 1200px;
|
|
|
|
|
|
box-shadow: 1px 1px 3px #ebebeb;
|
|
|
|
|
|
border-radius: 5px;
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
|
|
|
|
|
.page .side-bar {
|
|
|
|
|
|
width: 50px;
|
|
|
|
|
|
background-color: #2e2e2e;
|
|
|
|
|
|
border-top-left-radius: 5px;
|
|
|
|
|
|
border-bottom-left-radius: 5px;
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
|
|
|
|
|
.page .mid-bar {
|
|
|
|
|
|
width: 300px;
|
|
|
|
|
|
background-color: #ebebeb;
|
|
|
|
|
|
border-right: solid 1px #d6d6d6;
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
.page .main-body {
|
|
|
|
|
|
flex: 1;
|
2023-12-24 22:29:08 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
2024-01-15 21:58:12 +08:00
|
|
|
|
background-color: #f5f5f5;
|
|
|
|
|
|
border-top-right-radius: 5px;
|
|
|
|
|
|
border-bottom-right-radius: 5px;
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
.page .main-body .title-bar {
|
|
|
|
|
|
height: 60px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
align-items: center;
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
.page .main-body .title-bar p {
|
|
|
|
|
|
margin: 5px 25px 5px 25px;
|
|
|
|
|
|
font-size: 18px;
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
.page .main-body .container {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
border-top: solid 3px #f0f0f0;
|
|
|
|
|
|
border-bottom: solid 3px #f0f0f0;
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
.page .main-body .nav-bar {
|
2024-03-06 11:39:45 +08:00
|
|
|
|
height: 80px;
|
2024-01-15 21:58:12 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
|
|
|
|
|
.page .main-body .nav-bar .turner-bar {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
color: #2e2e2e;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
transform: translateY(-10px);
|
2024-01-05 20:25:52 +08:00
|
|
|
|
user-select: none;
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
.page .main-body .nav-bar .turner-bar .button {
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
background-color: #d6d6d6;
|
|
|
|
|
|
margin-left: 20px;
|
2024-01-01 02:12:08 +08:00
|
|
|
|
margin-right: 20px;
|
2024-01-15 21:58:12 +08:00
|
|
|
|
padding: 10px 15px 10px 15px;
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
font-size: 14px;
|
2024-01-01 02:12:08 +08:00
|
|
|
|
cursor: pointer;
|
2024-01-15 21:58:12 +08:00
|
|
|
|
transition: all 0.2s;
|
2024-01-03 21:11:23 +08:00
|
|
|
|
}
|
2024-01-01 02:12:08 +08:00
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
.page .main-body .nav-bar .turner-bar .button:hover {
|
|
|
|
|
|
background-color: #ebebeb;
|
2024-01-01 02:12:08 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
.page .main-body .nav-bar .turner-bar p {
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
|
margin-right: 5px;
|
2024-01-01 02:12:08 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
.page .main-body .nav-bar .turner-bar input {
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
resize: none;
|
|
|
|
|
|
outline: none;
|
|
|
|
|
|
background: none;
|
|
|
|
|
|
border-bottom: solid 1px #1F1F1F;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
height: 24px;
|
|
|
|
|
|
width: 50px;
|
2024-01-01 02:12:08 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
.container {
|
|
|
|
|
|
/*height: 80vh;*/
|
|
|
|
|
|
/*width: 100%;*/
|
|
|
|
|
|
/*max-width: 900px;*/
|
|
|
|
|
|
/*border-radius: 4px;*/
|
|
|
|
|
|
/*border: 0.5px solid #e0e0e0;*/
|
|
|
|
|
|
/*background-color: #f5f5f5;*/
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
/* flex-flow: column; */
|
2024-01-06 17:06:02 +08:00
|
|
|
|
overflow: hidden;
|
2024-01-15 21:58:12 +08:00
|
|
|
|
justify-content: center; /* 在主轴上居中 */
|
2024-01-06 17:06:02 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
.container .content {
|
|
|
|
|
|
width: calc(100% - 40px);
|
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
overflow-y: scroll;
|
2024-01-01 02:12:08 +08:00
|
|
|
|
flex: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
.container .content:hover::-webkit-scrollbar-thumb {
|
|
|
|
|
|
background: rgba(0, 0, 0, 0.1);
|
2024-01-01 02:12:08 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
.container .content:hover::-webkit-scrollbar-thumb:hover {
|
|
|
|
|
|
background: rgba(0, 0, 0, 0.3);
|
2024-01-01 02:12:08 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.bubble {
|
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
|
max-width: 400px;
|
|
|
|
|
|
padding: 10px 11px 10px 11px;
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
color: #1F1F1F;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
word-wrap: break-word;
|
|
|
|
|
|
word-break: normal;
|
|
|
|
|
|
}
|
2024-01-01 02:12:08 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.chat-refer {
|
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
|
max-width: 400px;
|
|
|
|
|
|
padding: 8px 10px 8px 10px;
|
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
color: #797979;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
background-color: #e8e8e8;
|
|
|
|
|
|
word-wrap: break-word;
|
|
|
|
|
|
word-break: normal;
|
|
|
|
|
|
}
|
2024-01-01 02:12:08 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.chat-refer-right {
|
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
|
}
|
2024-01-05 22:14:32 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.chat-refer-left {
|
|
|
|
|
|
margin-left: 15px;
|
|
|
|
|
|
}
|
2024-01-05 22:14:32 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.item-left .bubble {
|
|
|
|
|
|
margin-left: 15px;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
}
|
2024-01-01 02:12:08 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.item-left .bubble:before {
|
|
|
|
|
|
content: "";
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
width: 0;
|
|
|
|
|
|
height: 0;
|
|
|
|
|
|
border-left: 10px solid transparent;
|
|
|
|
|
|
border-top: 10px solid transparent;
|
|
|
|
|
|
border-right: 10px solid #fff;
|
|
|
|
|
|
border-bottom: 10px solid transparent;
|
|
|
|
|
|
left: -20px;
|
|
|
|
|
|
}
|
2024-01-01 02:12:08 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.item-right .bubble {
|
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
|
background-color: #9eea6a;
|
|
|
|
|
|
}
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.item-right .bubble:before {
|
|
|
|
|
|
content: "";
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
width: 0;
|
|
|
|
|
|
height: 0;
|
|
|
|
|
|
border-left: 10px solid #9eea6a;
|
|
|
|
|
|
border-top: 10px solid transparent;
|
|
|
|
|
|
border-right: 10px solid transparent;
|
|
|
|
|
|
border-bottom: 10px solid transparent;
|
|
|
|
|
|
right: -20px;
|
|
|
|
|
|
}
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.item {
|
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
}
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.item-refer {
|
|
|
|
|
|
margin-top: 4px;
|
|
|
|
|
|
}
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.item.item-right {
|
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
}
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.item.item-center {
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
}
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.item.item-center span {
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
padding: 2px 4px;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
background-color: #dadada;
|
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
|
-moz-user-select: none; /*火狐*/
|
|
|
|
|
|
-webkit-user-select: none; /*webkit浏览器*/
|
|
|
|
|
|
-ms-user-select: none; /*IE10*/
|
|
|
|
|
|
-khtml-user-select: none; /*早期浏览器*/
|
|
|
|
|
|
user-select: none;
|
|
|
|
|
|
}
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.content-wrapper {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
}
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.content-wrapper-left {
|
|
|
|
|
|
align-items: baseline;
|
|
|
|
|
|
}
|
2024-01-02 00:39:45 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.content-wrapper-right {
|
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
|
}
|
2024-01-02 00:39:45 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.displayname {
|
|
|
|
|
|
margin-left: 13px;
|
|
|
|
|
|
margin-left: 13px;
|
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
|
color: darkgray;
|
|
|
|
|
|
}
|
2024-01-02 00:39:45 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.chat-image img, .chat-file img {
|
|
|
|
|
|
margin-right: 18px;
|
|
|
|
|
|
margin-left: 18px;
|
|
|
|
|
|
max-width: 300px;
|
|
|
|
|
|
/*max-height: auto;*/
|
|
|
|
|
|
}
|
2024-01-02 00:39:45 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.avatar img {
|
|
|
|
|
|
width: 42px;
|
|
|
|
|
|
height: 42px;
|
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
|
user-select: none;
|
|
|
|
|
|
}
|
2024-01-02 00:39:45 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.chat-video video {
|
|
|
|
|
|
margin-right: 18px;
|
|
|
|
|
|
margin-left: 18px;
|
|
|
|
|
|
max-width: 350px;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.chat-audio {
|
|
|
|
|
|
max-width: 400px;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
audio {
|
|
|
|
|
|
margin-left: 9px;
|
|
|
|
|
|
margin-right: 9px;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.chat-music-audio, .chat-file {
|
|
|
|
|
|
width: 300px;
|
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
height: 100px;
|
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.chat-file img {
|
|
|
|
|
|
width: 50px;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.chat-music-audio .player-box, .chat-file .file-box {
|
|
|
|
|
|
width: 300px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
height: 80px;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.chat-music-audio .player-original, .chat-file .app-info {
|
|
|
|
|
|
border-top: 1px solid #ede3e3;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.chat-music-audio .player-original p, .chat-file .app-info p {
|
|
|
|
|
|
margin-top: 3px;
|
|
|
|
|
|
color: #888;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.chat-music-audio .player-controls, .chat-file .file-img {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.file-title, .card-content > h2, .description > p {
|
|
|
|
|
|
display: -webkit-box;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.file-title, .card-content > h2 {
|
|
|
|
|
|
-webkit-line-clamp: 2;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.description > p {
|
|
|
|
|
|
-webkit-line-clamp: 3;
|
|
|
|
|
|
margin-top: 2px;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
|
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.chat-music-audio .flex1, .chat-file .flex1 {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
justify-content: start;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.chat-music-audio .flex2, .chat-file .flex2 {
|
|
|
|
|
|
flex: 2;
|
|
|
|
|
|
justify-content: end;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.chat-music-audio .player-info, .chat-file .file-info {
|
|
|
|
|
|
width: 200px;
|
|
|
|
|
|
height: 80px;
|
|
|
|
|
|
margin-left: 4px;
|
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
|
white-space: normal;
|
|
|
|
|
|
flex-basis: 200px;
|
|
|
|
|
|
word-break: break-word;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.chat-music-audio .song-title, .chat-file .file-name {
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
overflow-wrap: break-word;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.chat-music-audio .artist, .chat-file .file-size {
|
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
|
color: #888;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.app-info {
|
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
|
margin-left: 3px;
|
|
|
|
|
|
margin-right: 3px;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.file-size {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.chat-music-audio .play-button {
|
|
|
|
|
|
width: 50px;
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
outline: none;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.chat-music-audio .play-button.playing {
|
|
|
|
|
|
background: url("./icon/pause.png");
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.chat-music-audio .play-button.paused {
|
|
|
|
|
|
background: url("./icon/play.png");
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.input-area {
|
|
|
|
|
|
border-top: 0.5px solid #e0e0e0;
|
|
|
|
|
|
height: 150px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-flow: column;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
textarea {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
padding: 5px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
|
outline: none;
|
|
|
|
|
|
resize: none;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.button-area {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
height: 40px;
|
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
|
padding: 5px;
|
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.button-area button {
|
|
|
|
|
|
width: 80px;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
outline: none;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
float: right;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.button-row,
|
|
|
|
|
|
.jump-row,
|
|
|
|
|
|
#paginationInfo {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
button {
|
|
|
|
|
|
padding: 10px 25px;
|
|
|
|
|
|
background-color: #3498db;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
margin: 0 14px;
|
|
|
|
|
|
transition: background-color 0.3s;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
button:hover {
|
|
|
|
|
|
background-color: #2980b9;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
input {
|
|
|
|
|
|
padding: 8px;
|
|
|
|
|
|
width: 120px;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
margin-right: 0px;
|
|
|
|
|
|
margin-left: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
button,
|
|
|
|
|
|
input {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#paginationInfo {
|
|
|
|
|
|
color: #555;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 分享的卡片 */
|
|
|
|
|
|
|
|
|
|
|
|
.card {
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
max-width: 400px;
|
|
|
|
|
|
width: 400px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
margin: 5px 20px 20px 20px;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.card a {
|
|
|
|
|
|
text-decoration: none; /* 去掉链接的下划线 */
|
|
|
|
|
|
color: inherit; /* 继承父元素的文字颜色 */
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.card-content {
|
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.thumbnail {
|
|
|
|
|
|
width: 50px;
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.description {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.link-info {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
background-color: #f0f0f0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.app-logo {
|
|
|
|
|
|
width: 30px;
|
|
|
|
|
|
height: 30px;
|
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.app-name {
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2024-02-03 01:27:51 +08:00
|
|
|
|
/* 转账 */
|
|
|
|
|
|
|
|
|
|
|
|
.transfer-box {
|
|
|
|
|
|
width: 200px;
|
|
|
|
|
|
height: 80px;
|
|
|
|
|
|
margin-left: 18px;
|
|
|
|
|
|
margin-right: 18px;
|
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
|
padding-left: 11px;
|
|
|
|
|
|
padding-right: 11px;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.transfer-box[paysubtype="1"], .transfer-box[paysubtype="1"]::before {
|
|
|
|
|
|
background: #f79c46;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.transfer-box[paysubtype="1"] i {
|
|
|
|
|
|
background-image: url(./icon/transfer1.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.transfer-box:not([paysubtype="1"]), .transfer-box:not([paysubtype="1"])::before {
|
|
|
|
|
|
background: #f8e2c6;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.transfer-box[paysubtype="3"] i {
|
|
|
|
|
|
background-image: url(./icon/transfer2.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.transfer-box[paysubtype="4"] i {
|
|
|
|
|
|
background-image: url(./icon/transfer3.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.transfer-box::before {
|
|
|
|
|
|
content: "";
|
|
|
|
|
|
width: 8px;
|
|
|
|
|
|
height: 8px;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
transform: rotate(45deg);
|
|
|
|
|
|
top: 18px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.transfer-box[issend="0"]::before {
|
|
|
|
|
|
left: -3px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.transfer-box[issend="1"]::before {
|
|
|
|
|
|
left: 218px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.trans-content {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
height: 60px;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.trans-content>i {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
width: 36px;
|
|
|
|
|
|
height: 36px;
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.transfer-texts {
|
|
|
|
|
|
margin-left: 7px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.transfer-texts>span, .transfer-texts>font, .trans-bottom>span {
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.transfer-texts>span {
|
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.transfer-texts>font {
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
padding-left: 2px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.transfer {
|
|
|
|
|
|
height: 60px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.trans-bottom {
|
|
|
|
|
|
height: 16px;
|
|
|
|
|
|
margin-top: 1px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.trans-bottom>span {
|
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 音视频通话 */
|
|
|
|
|
|
|
|
|
|
|
|
.call i{
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
width: 18px;
|
|
|
|
|
|
height: 18px;
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
margin-right: 4px;
|
|
|
|
|
|
margin-top: -2px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.call[calltype='1'] i {
|
|
|
|
|
|
background-image: url(./icon/phone.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.call[calltype='0'] i {
|
|
|
|
|
|
background-image: url(./icon/video.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
@media screen and (max-width: 768px) {
|
2023-12-29 22:41:49 +08:00
|
|
|
|
.button-row,
|
|
|
|
|
|
.jump-row,
|
|
|
|
|
|
#paginationInfo {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
2024-01-19 22:07:03 +08:00
|
|
|
|
margin-bottom: 0px;
|
2023-12-29 22:41:49 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
button {
|
2024-01-19 22:07:03 +08:00
|
|
|
|
padding: 5px 10px;
|
2023-12-29 22:41:49 +08:00
|
|
|
|
background-color: #3498db;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
cursor: pointer;
|
2024-01-19 22:07:03 +08:00
|
|
|
|
margin: 0 5px;
|
2023-12-29 22:41:49 +08:00
|
|
|
|
transition: background-color 0.3s;
|
|
|
|
|
|
}
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
2023-12-29 22:41:49 +08:00
|
|
|
|
button:hover {
|
|
|
|
|
|
background-color: #2980b9;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
input {
|
|
|
|
|
|
padding: 8px;
|
|
|
|
|
|
width: 120px;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
margin-right: 0px;
|
2024-01-19 22:07:03 +08:00
|
|
|
|
margin-left: 5px;
|
2024-01-15 21:58:12 +08:00
|
|
|
|
}
|
2024-01-19 22:07:03 +08:00
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.system-msg > .emoji_img {
|
|
|
|
|
|
width: 18px;
|
|
|
|
|
|
height: 18px;
|
2023-12-29 22:41:49 +08:00
|
|
|
|
}
|
2024-01-05 20:06:23 +08:00
|
|
|
|
|
2024-01-19 22:07:03 +08:00
|
|
|
|
.emoji_img {
|
|
|
|
|
|
width: 22px;
|
|
|
|
|
|
height: 22px;
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
margin-top: -4.4px;
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
.modal {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.8);
|
2024-01-05 20:06:23 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
.modal-image {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
max-width: 90%;
|
|
|
|
|
|
max-height: 90%;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 50%;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
transform: translate(-50%, -50%);
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 768px) {
|
|
|
|
|
|
body {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.page {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.page .side-bar, .page .mid-bar {
|
|
|
|
|
|
display: none
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.page .main-body .nav-bar {
|
|
|
|
|
|
height: 120px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.page .main-body .nav-bar .turner-bar {
|
|
|
|
|
|
transform: none;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.page .main-body .nav-bar .turner-bar input {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.page .main-body .nav-bar .turner-bar .button {
|
|
|
|
|
|
padding: 10px 12px 10px 12px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<title>出错了</title>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="page">
|
|
|
|
|
|
<div class="side-bar"></div>
|
|
|
|
|
|
<div class="mid-bar"></div>
|
|
|
|
|
|
<div class="main-body">
|
|
|
|
|
|
<div class="title-bar"><p id="title">出错了</p></div>
|
2024-01-06 17:06:02 +08:00
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="content" id="chat-container" onscroll="checkScroll()">
|
|
|
|
|
|
<div class="item item-center">
|
2024-01-15 21:58:12 +08:00
|
|
|
|
<span>8:16</span>
|
2023-12-29 22:41:49 +08:00
|
|
|
|
</div>
|
2024-01-06 17:06:02 +08:00
|
|
|
|
<div class="item item-center">
|
2024-01-15 21:58:12 +08:00
|
|
|
|
<span>错误提示</span>
|
2023-12-29 22:41:49 +08:00
|
|
|
|
</div>
|
2024-01-06 17:06:02 +08:00
|
|
|
|
<div class="item item-left">
|
|
|
|
|
|
<div class="avatar">
|
2024-01-14 01:21:19 +08:00
|
|
|
|
<img src="https://blog.lc044.love/static/img/a774ab7a32635db7b4254c8ff7caaa89.Camera_XHS_16984826124131040g2sg30qo1ggopgqe05oce.webp">
|
2024-01-06 17:06:02 +08:00
|
|
|
|
</div>
|
2024-01-15 21:58:12 +08:00
|
|
|
|
<div class="bubble bubble-left">很抱歉，由于程序出现未知错误，您的聊天记录未能成功展示。<br/>您可以关注下方微信公众号，<b>回复：联系方式</b>，获取QQ交流群群号，并在群内寻求帮助。
|
|
|
|
|
|
</div>
|
2024-01-14 01:21:19 +08:00
|
|
|
|
</div>
|
2024-01-22 22:21:55 +08:00
|
|
|
|
<div class="item item-left">
|
|
|
|
|
|
<div class="avatar">
|
|
|
|
|
|
<img src="https://blog.lc044.love/static/img/a774ab7a32635db7b4254c8ff7caaa89.Camera_XHS_16984826124131040g2sg30qo1ggopgqe05oce.webp">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bubble bubble-left">您可自行排查问题所在，例如只选择文本或图片，反馈时请说明哪种消息类型出现了问题！！！
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2024-01-14 01:21:19 +08:00
|
|
|
|
<div class="item item-left">
|
|
|
|
|
|
<div class="avatar">
|
2024-01-15 21:58:12 +08:00
|
|
|
|
<img src="https://blog.lc044.love/static/img/a774ab7a32635db7b4254c8ff7caaa89.Camera_XHS_16984826124131040g2sg30qo1ggopgqe05oce.webp"
|
|
|
|
|
|
loading="lazy">
|
2024-01-14 01:21:19 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content-wrapper content-wrapper-left">
|
|
|
|
|
|
<div class="chat-image">
|
2024-01-15 21:58:12 +08:00
|
|
|
|
<img src="https://blog.lc044.love/static/img/3fd32f1732a2c8f53a7eb923472b8f19.clipboard-2023-12-18.webp"
|
|
|
|
|
|
onclick="showModal(this)" loading="lazy">
|
2024-01-14 01:21:19 +08:00
|
|
|
|
</div>
|
2024-01-06 17:06:02 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item item-right">
|
2024-01-15 21:58:12 +08:00
|
|
|
|
<div class="bubble bubble-right">好的</div>
|
2024-01-14 01:21:19 +08:00
|
|
|
|
<div class="avatar">
|
2024-01-15 21:58:12 +08:00
|
|
|
|
<img src="https://cdn.luogu.com.cn/upload/image_hosting/rbnmv4bu.png">
|
2024-01-06 17:06:02 +08:00
|
|
|
|
</div>
|
2024-01-14 01:21:19 +08:00
|
|
|
|
</div>
|
2023-12-24 22:29:08 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2024-01-15 21:58:12 +08:00
|
|
|
|
<div class="nav-bar">
|
|
|
|
|
|
<div class="turner-bar">
|
|
|
|
|
|
<div class="button pre-page" onclick="prevPage()">上一页</div>
|
|
|
|
|
|
<div class="navigator-line">跳转到第
|
|
|
|
|
|
<input class="navgator" value="1" id="gotoPage" onchange="gotoPage()"></input>页，共<p
|
|
|
|
|
|
id="maxPage">0</p>页
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="button next-page" onclick="nextPage()">下一页</div>
|
|
|
|
|
|
</div>
|
2024-01-06 17:06:02 +08:00
|
|
|
|
</div>
|
2024-01-15 21:58:12 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="modal" class="modal" onclick="hideModal()">
|
|
|
|
|
|
<img id="modal-image" class="modal-image">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
const chatMessages = [
|
|
|
|
|
|
/*注意看这是分割线*/
|
|
|
|
|
|
];
|
2024-01-14 01:21:19 +08:00
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
</script>
|
2024-01-14 01:21:19 +08:00
|
|
|
|
<script>
|
2024-01-15 21:58:12 +08:00
|
|
|
|
const chatContainer = document.getElementById('chat-container');
|
|
|
|
|
|
|
|
|
|
|
|
function checkEnter(event) {
|
|
|
|
|
|
if (event.keyCode === 13) {
|
|
|
|
|
|
gotoPage();
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
}
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
const itemsPerPage = 100; // 每页显示的元素个数
|
|
|
|
|
|
let currentPage = 1; // 当前页
|
|
|
|
|
|
var reachedBottom = false; // 到达底部的标记
|
|
|
|
|
|
var lastScrollTop = 0;
|
|
|
|
|
|
var lastTimeStamp = 0;
|
|
|
|
|
|
|
|
|
|
|
|
function renderPage(page) {
|
|
|
|
|
|
const totalPages = Math.ceil(chatMessages.length / itemsPerPage);
|
|
|
|
|
|
// document.getElementById('curPage').innerHTML = currentPage;
|
|
|
|
|
|
document.getElementById('gotoPage').value = currentPage;
|
|
|
|
|
|
document.getElementById('maxPage').innerHTML = totalPages;
|
|
|
|
|
|
const container = document.getElementById('chat-container');
|
|
|
|
|
|
if (!reachedBottom) {
|
|
|
|
|
|
container.innerHTML = ''; // 清空容器
|
|
|
|
|
|
lastScrollTop = 0;
|
|
|
|
|
|
lastTimeStamp = 0;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
reachedBottom = false;
|
|
|
|
|
|
}
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
// 计算当前页应该显示的元素范围
|
|
|
|
|
|
const startIndex = (page - 1) * itemsPerPage;
|
|
|
|
|
|
const endIndex = startIndex + itemsPerPage;
|
|
|
|
|
|
|
|
|
|
|
|
// 工具类函数
|
|
|
|
|
|
function replaceEmoji(text) {
|
|
|
|
|
|
|
|
|
|
|
|
// 定义替换规则，可以根据需要添加更多规则
|
|
|
|
|
|
var replacementRules = [
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[微笑\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_1@2x.png" id="微笑" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[发呆\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_4@2x.png" id="发呆" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[撇嘴\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_2@2x.png" id="撇嘴" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[色\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_3@2x.png" id="色" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[发呆\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_4@2x.png" id="发呆" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[得意\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_5@2x.png" id="得意" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[流泪\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_6@2x.png" id="流泪" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[害羞\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_7@2x.png" id="害羞" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[闭嘴\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_8@2x.png" id="闭嘴" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[睡\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_9@2x.png" id="睡" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[大哭\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_10@2x.png" id="大哭" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[尴尬\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_11@2x.png" id="尴尬" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[发怒\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_12@2x.png" id="发怒" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[调皮\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_13@2x.png" id="调皮" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[呲牙\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_14@2x.png" id="呲牙" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[惊讶\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_15@2x.png" id="惊讶" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[难过\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_16@2x.png" id="难过" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[抓狂\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_19@2x.png" id="抓狂" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[吐\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_20@2x.png" id="吐" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[偷笑\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_21@2x.png" id="偷笑" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[愉快\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_22@2x.png" id="愉快" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[白眼\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_23@2x.png" id="白 眼" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[傲慢\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_24@2x.png" id="傲慢" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[困\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_26@2x.png" id="困" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[惊恐\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_27@2x.png" id="惊恐" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[憨笑\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_29@2x.png" id="憨笑" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[悠闲\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_30@2x.png" id="悠闲" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[咒骂\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_32@2x.png" id="咒骂" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[疑问\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_33@2x.png" id="疑问" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[嘘\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_34@2x.png" id="嘘" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[晕\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_35@2x.png" id="晕" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[衰\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_37@2x.png" id="衰" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[骷髅\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_38@2x.png" id="骷髅" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[敲打\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_39@2x.png" id="敲打" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[再见\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_40@2x.png" id="再见" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[擦汗\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_41@2x.png" id="擦汗" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[抠鼻\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_42@2x.png" id="抠鼻" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[鼓掌\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_43@2x.png" id="鼓掌" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[坏笑\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_45@2x.png" id="坏笑" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[右哼哼\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_47@2x.png" id="右哼哼" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[鄙视\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_49@2x.png" id="鄙视" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[委屈\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_50@2x.png" id="委屈" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[快哭了\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_51@2x.png" id="快哭了" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[阴险\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_52@2x.png" id="阴险" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[亲亲\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_53@2x.png" id="亲亲" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[可怜\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_55@2x.png" id="可怜" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[Whimper\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_55@2x.png" id="可怜" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[笑脸\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Happy.png" id="笑脸" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[生病\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Sick.png" id="生病" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[脸红\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Flushed.png" id="脸红" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[破涕为笑\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Lol.png" id="破涕为笑" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[恐惧\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Terror.png" id="恐惧" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[失望\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/LetDown.png" id="失望" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[无语\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Duh.png" id="无语" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[嘿哈\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_04.png" id="嘿哈" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[捂脸\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_05.png" id="捂脸" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[奸笑\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_02.png" id="奸笑" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[机智\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_06.png" id="机智" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[皱眉\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_12.png" id="皱眉" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[耶\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_11.png" id="耶" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[吃瓜\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Watermelon.png" id="吃瓜" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[加油\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Addoil.png" id="加油" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[汗\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Sweat.png" id="汗" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[天啊\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Shocked.png" id="天啊" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[Emm\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Cold.png" id="Emm" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[社会社会\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Social.png" id="社会社会" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[旺柴\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Yellowdog.png" id="旺柴" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[好的\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/NoProb.png" id="好的" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[打脸\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Slap.png" id="打脸" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[哇\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Wow.png" id="哇" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[翻白眼\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Boring.png" id="翻白眼" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[666\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/666.png" id="666" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[让我看看\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/LetMeSee.png" id="让我看看" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[叹气\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Sigh.png" id="叹气" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[苦涩\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Hurt.png" id="苦涩" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[難受\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Hurt.png" id="苦涩" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[裂开\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Broken.png" id="裂开" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[嘴唇\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_66@2x.png" id="嘴唇" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[爱心\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_67@2x.png" id="爱心" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[心碎\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_68@2x.png" id="心碎" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[拥抱\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_79@2x.png" id="拥抱" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[强\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_80@2x.png" id="强" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[弱\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_81@2x.png" id="弱" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[握手\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_82@2x.png" id="握手" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[胜利\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_83@2x.png" id="胜利" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[抱拳\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_84@2x.png" id="抱拳" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[勾引\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_85@2x.png" id="勾引" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[拳头\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_86@2x.png" id="拳头" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[OK\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_90@2x.png" id="OK" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[合十\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Worship.png" id="合十" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[啤酒\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_58@2x.png" id="啤酒" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[咖啡]\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_61@2x.png" id="咖啡" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[蛋糕\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_69@2x.png" id="蛋糕" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[玫瑰\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_64@2x.png" id="玫 瑰" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[凋谢\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_65@2x.png" id="凋谢" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[菜刀\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_56@2x.png" id="菜刀" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[炸弹\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_71@2x.png" id="炸弹" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[便便\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_75@2x.png" id="便便" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[月亮\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_76@2x.png" id="月亮" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[太阳\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_77@2x.png" id="太阳" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[庆 祝\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Party.png" id="庆祝" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[礼物\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_78@2x.png" id="礼物" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[红包\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_09.png" id="红包" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[發\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_16.png" id="發" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[福\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_15.png" id="福" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[烟花\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Fireworks.png" id="烟花" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[爆竹\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Firecracker.png" id="爆竹" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[猪头\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_63@2x.png" id="猪头" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[跳跳\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_93@2x.png" id="跳跳" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[发抖\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_94@2x.png" id="发抖" class="emoji_img">'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
pattern: /\[转圈\]/g,
|
|
|
|
|
|
replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_96@2x.png" id="转圈" class="emoji_img">'
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
// 循环遍历替换规则
|
|
|
|
|
|
for (var i = 0; i < replacementRules.length; i++) {
|
|
|
|
|
|
var rule = replacementRules[i];
|
|
|
|
|
|
text = text.replace(rule.pattern, rule.replacement);
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
return text;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function timestampToTime(timestamp) {
|
|
|
|
|
|
let date = new Date(timestamp * 1000);
|
|
|
|
|
|
let year = date.getFullYear() + '-';
|
|
|
|
|
|
let month = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
|
|
|
|
|
|
let day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
|
|
|
|
|
|
let hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
|
|
|
|
|
|
let minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
|
|
|
|
|
|
let second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
|
|
|
|
|
|
return year + month + day + hour + minute + second;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 生成各类标签的函数
|
|
|
|
|
|
function add5MinTimeTag(message) {
|
|
|
|
|
|
if (message.timestamp - lastTimeStamp > 300) {
|
|
|
|
|
|
const newTimeMessage = document.createElement('div');
|
|
|
|
|
|
newTimeMessage.className = "item item-center";
|
|
|
|
|
|
newTimeMessage.innerHTML = `<span>${timestampToTime(message.timestamp)}</span>`;
|
|
|
|
|
|
chatContainer.appendChild(newTimeMessage);
|
|
|
|
|
|
lastTimeStamp = message.timestamp;
|
|
|
|
|
|
// console.log("增加时间元素", timestampToTime(message.timestamp));
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function messageBubble(message, side) {
|
|
|
|
|
|
const messageBubbleTag = document.createElement('div');
|
|
|
|
|
|
messageBubbleTag.className = `bubble bubble-${side}`;
|
|
|
|
|
|
messageBubbleTag.innerHTML = replaceEmoji(message.text);
|
|
|
|
|
|
return messageBubbleTag;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function displayNameBox(message) {
|
|
|
|
|
|
const displayName = document.createElement('div');
|
|
|
|
|
|
displayName.className = "displayname";
|
|
|
|
|
|
displayName.innerHTML = message.displayname;
|
|
|
|
|
|
return displayName;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function avatarBox(message) {
|
|
|
|
|
|
const avatarTag = document.createElement('div');
|
|
|
|
|
|
avatarTag.className = "avatar";
|
|
|
|
|
|
avatarTag.innerHTML = `<img src="${message.avatar_path}" loading="lazy" />`
|
|
|
|
|
|
return avatarTag;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function messageImgBox(message) {
|
|
|
|
|
|
const messageImgTag = document.createElement('div');
|
|
|
|
|
|
messageImgTag.className = `chat-image`;
|
|
|
|
|
|
messageImgTag.innerHTML = `<img src="${message.text}" onclick="showModal(this)" loading="lazy"/>`;
|
|
|
|
|
|
return messageImgTag;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function messageVideoBox(message) {
|
|
|
|
|
|
const messageVideoTag = document.createElement('div');
|
|
|
|
|
|
messageVideoTag.className = `chat-video`;
|
|
|
|
|
|
messageVideoTag.innerHTML = `<video src="${message.text}" controls />`;
|
|
|
|
|
|
return messageVideoTag;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function messageElementReferText(message, side) {
|
|
|
|
|
|
const messageElementRefer = document.createElement('div');
|
|
|
|
|
|
messageElementRefer.className = `chat-refer chat-refer-${side}`;
|
|
|
|
|
|
messageElementRefer.innerHTML = replaceEmoji(message.refer_text);
|
|
|
|
|
|
return messageElementRefer;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function messageVoiceToTextBubble(message, side) {
|
|
|
|
|
|
const messageVoiceToTextTag = document.createElement('div');
|
|
|
|
|
|
messageVoiceToTextTag.className = `bubble bubble-${side}`;
|
|
|
|
|
|
messageVoiceToTextTag.innerHTML = message.voice_to_text;
|
|
|
|
|
|
return messageVoiceToTextTag;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function messageAudioBox(message) {
|
|
|
|
|
|
const messageAudioTag = document.createElement('div');
|
|
|
|
|
|
messageAudioTag.className = `chat-audio`;
|
|
|
|
|
|
messageAudioTag.innerHTML = `<audio src="${message.text}" controls></audio>`;
|
|
|
|
|
|
return messageAudioTag;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function messageCard(message) {
|
|
|
|
|
|
const messageTag = document.createElement('div');
|
|
|
|
|
|
messageTag.className = `card`;
|
|
|
|
|
|
messageTag.innerHTML = `<a href="${message.url}" target="_blank">
|
2024-01-06 17:06:02 +08:00
|
|
|
|
<div class="card-content">
|
|
|
|
|
|
<h2 title="${message.title}">${message.title}</h2>
|
|
|
|
|
|
<div class="description">
|
|
|
|
|
|
<p title="${message.description}">${message.description}</p>
|
|
|
|
|
|
<img loading="lazy" class="thumbnail" src="${message.thumbnail}" alt="Thumbnail">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="link-info">
|
|
|
|
|
|
<img loading="lazy" class="app-logo" src="${message.app_logo}" alt="App Logo">
|
|
|
|
|
|
<span class="app-name">${message.app_name}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</a>`;
|
2024-01-15 21:58:12 +08:00
|
|
|
|
return messageTag;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function messageFileBox(message) {
|
|
|
|
|
|
const messageFileTag = document.createElement('div');
|
|
|
|
|
|
messageFileTag.className = `chat-file`;
|
|
|
|
|
|
messageFileTag.onclick = function (event) {
|
|
|
|
|
|
if (message.text !== '') {
|
|
|
|
|
|
window.open(message.text, '_blank');
|
|
|
|
|
|
} else {
|
|
|
|
|
|
alert("文件可能丢失、过期或不存放在该主机上")
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
}
|
|
|
|
|
|
messageFileTag.innerHTML = `<div class="file-box">
|
2024-01-03 21:11:23 +08:00
|
|
|
|
<div class="file-info flex1">
|
2024-01-06 17:06:02 +08:00
|
|
|
|
<div class="file-title" title="${message.file_name}">${message.file_name}</div>
|
2024-01-03 21:11:23 +08:00
|
|
|
|
<div class="file-size">${message.file_size}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="file-img flex2">
|
|
|
|
|
|
<img src="${message.icon_path}"/>
|
|
|
|
|
|
</div>
|
2024-01-15 21:58:12 +08:00
|
|
|
|
</div>` +
|
|
|
|
|
|
(message.app_name ? `<div class="app-info"><p>${message.app_name}</p></div>` : "");
|
|
|
|
|
|
return messageFileTag;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function messageMusicAudioBox(message) {
|
|
|
|
|
|
const messageMusicAudioTag = document.createElement('div');
|
|
|
|
|
|
messageMusicAudioTag.className = `chat-music-audio`;
|
|
|
|
|
|
messageMusicAudioTag.dataset.link = message.link_url;
|
|
|
|
|
|
messageMusicAudioTag.onclick = function (event) {
|
|
|
|
|
|
if (!event.target.classList.contains('play-button')) {
|
|
|
|
|
|
window.open(message.link_url, '_blank');
|
2024-01-01 02:12:08 +08:00
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
}
|
|
|
|
|
|
if (message.title.length >= 39) {
|
|
|
|
|
|
message.title = message.title.slice(0, 38) + '...'
|
|
|
|
|
|
}
|
|
|
|
|
|
messageMusicAudioTag.innerHTML = `<div class="player-box">
|
2024-01-01 02:12:08 +08:00
|
|
|
|
<div class="player-info flex1">
|
|
|
|
|
|
<div class="song-title">${message.title}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="player-controls flex2">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="player-original"><p>${message.website_name}</p></div>
|
|
|
|
|
|
|
|
|
|
|
|
`
|
2024-01-15 21:58:12 +08:00
|
|
|
|
if (message.text != '') {
|
|
|
|
|
|
var audio = document.createElement('audio');
|
|
|
|
|
|
audio.src = message.text;
|
|
|
|
|
|
messageMusicAudioTag.querySelector('.player-controls').append(audio)
|
2024-01-01 02:12:08 +08:00
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
;
|
|
|
|
|
|
var artist = document.createElement('div');
|
|
|
|
|
|
artist.className = 'artist';
|
|
|
|
|
|
artist.innerHTML = message.artist
|
|
|
|
|
|
if (message.title.length < 26) {
|
|
|
|
|
|
messageMusicAudioTag.querySelector('.player-info').append(artist)
|
|
|
|
|
|
}
|
|
|
|
|
|
var playButton = document.createElement('button');
|
|
|
|
|
|
playButton.className = 'play-button paused';
|
|
|
|
|
|
playButton.onclick = function (event) {
|
|
|
|
|
|
event.stopPropagation(); // 阻止点击播放按钮时触发父级的点击事件
|
|
|
|
|
|
toggleAudio(event.target);
|
|
|
|
|
|
};
|
|
|
|
|
|
if (message.is_send) {
|
|
|
|
|
|
messageMusicAudioTag.querySelector('.player-controls').append(playButton)
|
|
|
|
|
|
} else {
|
|
|
|
|
|
messageMusicAudioTag.querySelector('.player-controls').prepend(playButton)
|
|
|
|
|
|
}
|
|
|
|
|
|
return messageMusicAudioTag;
|
|
|
|
|
|
}
|
2024-02-03 01:27:51 +08:00
|
|
|
|
function messageTransfer(message) {
|
|
|
|
|
|
const transfer_box = document.createElement("div");
|
|
|
|
|
|
transfer_box.className = "transfer-box";
|
|
|
|
|
|
transfer_box.setAttribute("issend", message.is_send);
|
|
|
|
|
|
transfer_box.setAttribute("paysubtype", message.paysubtype);
|
|
|
|
|
|
transfer_box.innerHTML = `<div class="transfer">
|
|
|
|
|
|
<div class="trans-content"><i></i>
|
|
|
|
|
|
<div class="transfer-texts"><span>${message.feedesc}</span><font>${message.text}</font></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="trans-bottom"><span>聊天转账</span></div>
|
|
|
|
|
|
</div>`;
|
|
|
|
|
|
return transfer_box;
|
|
|
|
|
|
}
|
|
|
|
|
|
function messageVideoAudioCall(message, side) {
|
|
|
|
|
|
const message_call_box = document.createElement('div');
|
|
|
|
|
|
message_call_box.className = `bubble bubble-${side} call`;
|
|
|
|
|
|
message_call_box.setAttribute("calltype", message.call_type)
|
|
|
|
|
|
message_call_box.innerHTML = `<i></i><span>${message.text}<span>`;
|
|
|
|
|
|
return message_call_box;
|
|
|
|
|
|
}
|
2024-01-01 02:12:08 +08:00
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
// 从数据列表中取出对应范围的元素并添加到容器中
|
|
|
|
|
|
for (let i = startIndex; i < endIndex && i < chatMessages.length; i++) {
|
|
|
|
|
|
const message = chatMessages[i];
|
|
|
|
|
|
add5MinTimeTag(message);
|
|
|
|
|
|
const messageElement = document.createElement('div'); // 下面那俩的合体
|
|
|
|
|
|
const avatarTag = avatarBox(message); // 头像
|
|
|
|
|
|
const messageContent = document.createElement('div'); // 除了avatar之外的所有
|
|
|
|
|
|
const side = message.is_send ? "right" : "left";
|
|
|
|
|
|
if (message.type == 1) {
|
|
|
|
|
|
// displayname 和 bubble
|
|
|
|
|
|
messageContent.className = `content-wrapper content-wrapper-${side}`;
|
|
|
|
|
|
if (message.is_chatroom && !message.is_send) {
|
|
|
|
|
|
messageContent.appendChild(displayNameBox(message));
|
|
|
|
|
|
}
|
|
|
|
|
|
messageContent.appendChild(messageBubble(message, side));
|
|
|
|
|
|
|
|
|
|
|
|
// 整合
|
|
|
|
|
|
messageElement.className = `item item-${side}`;
|
|
|
|
|
|
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
|
|
|
|
|
|
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
|
|
|
|
|
|
} else if (message.type == 0) {
|
|
|
|
|
|
messageElement.className = "item item-center";
|
|
|
|
|
|
messageElement.innerHTML = `<span class="system-msg">${replaceEmoji(message.text)}</span>`;
|
|
|
|
|
|
} else if (message.type == 3) {
|
|
|
|
|
|
// displayname 和 img
|
|
|
|
|
|
messageContent.className = `content-wrapper content-wrapper-${side}`;
|
|
|
|
|
|
if (message.is_chatroom && !message.is_send) {
|
|
|
|
|
|
messageContent.appendChild(displayNameBox(message));
|
|
|
|
|
|
}
|
|
|
|
|
|
messageContent.appendChild(messageImgBox(message));
|
|
|
|
|
|
|
|
|
|
|
|
// 整合
|
|
|
|
|
|
messageElement.className = `item item-${side}`;
|
|
|
|
|
|
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
|
|
|
|
|
|
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
|
|
|
|
|
|
} else if (message.type == 43) {
|
|
|
|
|
|
// displayname 和 video
|
|
|
|
|
|
messageContent.className = `content-wrapper content-wrapper-${side}`;
|
|
|
|
|
|
if (message.is_chatroom && !message.is_send) {
|
|
|
|
|
|
messageContent.appendChild(displayNameBox(message));
|
|
|
|
|
|
}
|
|
|
|
|
|
messageContent.appendChild(messageVideoBox(message));
|
|
|
|
|
|
|
|
|
|
|
|
// 整合
|
|
|
|
|
|
messageElement.className = `item item-${side}`;
|
|
|
|
|
|
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
|
|
|
|
|
|
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
|
|
|
|
|
|
} else if (message.type == 49) {
|
|
|
|
|
|
if (message.sub_type == 57) {
|
|
|
|
|
|
// displayname 和 bubble 和 refer
|
2023-12-24 22:29:08 +08:00
|
|
|
|
messageContent.className = `content-wrapper content-wrapper-${side}`;
|
|
|
|
|
|
if (message.is_chatroom && !message.is_send) {
|
|
|
|
|
|
messageContent.appendChild(displayNameBox(message));
|
|
|
|
|
|
}
|
|
|
|
|
|
messageContent.appendChild(messageBubble(message, side));
|
2024-01-15 21:58:12 +08:00
|
|
|
|
if (message.refer_text) {
|
|
|
|
|
|
messageContent.appendChild(messageElementReferText(message, side));
|
|
|
|
|
|
}
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
|
|
|
|
|
// 整合
|
|
|
|
|
|
messageElement.className = `item item-${side}`;
|
|
|
|
|
|
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
|
|
|
|
|
|
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
|
2024-01-15 21:58:12 +08:00
|
|
|
|
} else if (message.sub_type == 6) {
|
|
|
|
|
|
// displayname 和 file
|
2023-12-24 22:29:08 +08:00
|
|
|
|
messageContent.className = `content-wrapper content-wrapper-${side}`;
|
|
|
|
|
|
if (message.is_chatroom && !message.is_send) {
|
|
|
|
|
|
messageContent.appendChild(displayNameBox(message));
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
messageContent.appendChild(messageFileBox(message));
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
|
|
|
|
|
// 整合
|
|
|
|
|
|
messageElement.className = `item item-${side}`;
|
|
|
|
|
|
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
|
|
|
|
|
|
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
|
2024-01-15 21:58:12 +08:00
|
|
|
|
} else if (message.sub_type == 3) {
|
|
|
|
|
|
// displayname 和 file
|
2023-12-24 22:29:08 +08:00
|
|
|
|
messageContent.className = `content-wrapper content-wrapper-${side}`;
|
|
|
|
|
|
if (message.is_chatroom && !message.is_send) {
|
|
|
|
|
|
messageContent.appendChild(displayNameBox(message));
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
messageContent.appendChild(messageMusicAudioBox(message));
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
|
|
|
|
|
// 整合
|
|
|
|
|
|
messageElement.className = `item item-${side}`;
|
|
|
|
|
|
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
|
|
|
|
|
|
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
|
2024-01-15 21:58:12 +08:00
|
|
|
|
} else if (message.sub_type == 5) {
|
|
|
|
|
|
// displayname 和 file
|
2023-12-24 22:29:08 +08:00
|
|
|
|
messageContent.className = `content-wrapper content-wrapper-${side}`;
|
|
|
|
|
|
if (message.is_chatroom && !message.is_send) {
|
|
|
|
|
|
messageContent.appendChild(displayNameBox(message));
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
messageContent.appendChild(messageCard(message));
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
2024-02-03 01:27:51 +08:00
|
|
|
|
// 整合
|
|
|
|
|
|
messageElement.className = `item item-${side}`;
|
|
|
|
|
|
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
|
|
|
|
|
|
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
|
|
|
|
|
|
} else if (message.sub_type == 2000) {
|
|
|
|
|
|
// displayname 和 messageTransfer
|
|
|
|
|
|
messageContent.className = `content-wrapper content-wrapper-${side}`;
|
|
|
|
|
|
if (message.is_chatroom && !message.is_send) {
|
|
|
|
|
|
messageContent.appendChild(displayNameBox(message));
|
|
|
|
|
|
}
|
|
|
|
|
|
messageContent.appendChild(messageTransfer(message));
|
|
|
|
|
|
|
2023-12-24 22:29:08 +08:00
|
|
|
|
// 整合
|
|
|
|
|
|
messageElement.className = `item item-${side}`;
|
|
|
|
|
|
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
|
|
|
|
|
|
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
} else if (message.type == 34) {
|
|
|
|
|
|
// displayname 和 转的文字 和 audio
|
|
|
|
|
|
messageContent.className = `content-wrapper content-wrapper-${side}`;
|
|
|
|
|
|
if (message.is_chatroom && !message.is_send) {
|
|
|
|
|
|
messageContent.appendChild(displayNameBox(message));
|
|
|
|
|
|
}
|
|
|
|
|
|
if (message.voice_to_text) {
|
|
|
|
|
|
messageContent.appendChild(messageVoiceToTextBubble(message, side));
|
|
|
|
|
|
}
|
|
|
|
|
|
messageContent.appendChild(messageAudioBox(message));
|
|
|
|
|
|
|
2024-02-03 01:27:51 +08:00
|
|
|
|
// 整合
|
|
|
|
|
|
messageElement.className = `item item-${side}`;
|
|
|
|
|
|
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
|
|
|
|
|
|
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
|
|
|
|
|
|
} else if (message.type == 50) {
|
|
|
|
|
|
// displayname 和 转的文字 和 audio
|
|
|
|
|
|
messageContent.className = `content-wrapper content-wrapper-${side}`;
|
|
|
|
|
|
if (message.is_chatroom && !message.is_send) {
|
|
|
|
|
|
messageContent.appendChild(displayNameBox(message));
|
|
|
|
|
|
}
|
|
|
|
|
|
messageContent.appendChild(messageVideoAudioCall(message, side));
|
|
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
// 整合
|
|
|
|
|
|
messageElement.className = `item item-${side}`;
|
|
|
|
|
|
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
|
|
|
|
|
|
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
chatContainer.appendChild(messageElement);
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
document.querySelector("#chat-container").scrollTop = lastScrollTop;
|
|
|
|
|
|
updatePaginationInfo();
|
|
|
|
|
|
refreshMediaListener();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function prevPage() {
|
|
|
|
|
|
if (currentPage > 1) {
|
|
|
|
|
|
currentPage--;
|
|
|
|
|
|
reachedBottom = false;
|
|
|
|
|
|
renderPage(currentPage);
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function nextPage() {
|
|
|
|
|
|
const totalPages = Math.ceil(chatMessages.length / itemsPerPage);
|
|
|
|
|
|
if (currentPage < totalPages) {
|
|
|
|
|
|
currentPage++;
|
|
|
|
|
|
renderPage(currentPage);
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
}
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
function updatePaginationInfo() {
|
|
|
|
|
|
const totalPages = Math.ceil(chatMessages.length / itemsPerPage);
|
|
|
|
|
|
const paginationInfo = document.getElementById('gotoPage');
|
|
|
|
|
|
paginationInfo.value = `${currentPage}`;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function gotoPage() {
|
|
|
|
|
|
const totalPages = Math.ceil(chatMessages.length / itemsPerPage);
|
|
|
|
|
|
const inputElement = document.getElementById('gotoPage');
|
|
|
|
|
|
const targetPage = parseInt(inputElement.value);
|
|
|
|
|
|
|
|
|
|
|
|
if (targetPage >= 1 && targetPage <= totalPages) {
|
|
|
|
|
|
currentPage = targetPage;
|
|
|
|
|
|
renderPage(currentPage);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
alert('请输入有效的页码');
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
}
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
|
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
function checkScroll() {
|
|
|
|
|
|
var chatContainer = document.getElementById("chat-container");
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
// 检查滚动条是否滑到底部
|
|
|
|
|
|
if (chatContainer.scrollHeight - chatContainer.scrollTop - 10 <= chatContainer.clientHeight) {
|
|
|
|
|
|
// 如果滚动条在底部
|
|
|
|
|
|
if (!reachedBottom) {
|
|
|
|
|
|
// 设置标记并返回
|
|
|
|
|
|
reachedBottom = true;
|
|
|
|
|
|
lastScrollTop = chatContainer.scrollTop;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (reachedBottom) {
|
|
|
|
|
|
nextPage();
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
}
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
// 初始化页面
|
|
|
|
|
|
renderPage(currentPage);
|
|
|
|
|
|
|
|
|
|
|
|
function refreshMediaListener() {
|
|
|
|
|
|
const audioTags = document.querySelectorAll('audio');
|
|
|
|
|
|
const videoTags = document.querySelectorAll('video');
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
audioTags.forEach(audio => {
|
|
|
|
|
|
audio.addEventListener('play', function () {
|
|
|
|
|
|
pauseOtherMedia(audio);
|
2023-12-24 22:29:08 +08:00
|
|
|
|
});
|
2024-01-15 21:58:12 +08:00
|
|
|
|
});
|
|
|
|
|
|
videoTags.forEach(video => {
|
|
|
|
|
|
video.addEventListener('play', function () {
|
|
|
|
|
|
pauseOtherMedia(video);
|
2023-12-24 22:29:08 +08:00
|
|
|
|
});
|
2024-01-15 21:58:12 +08:00
|
|
|
|
});
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
function pauseOtherMedia(currentMedia) {
|
|
|
|
|
|
const audioTags = document.querySelectorAll('audio');
|
|
|
|
|
|
const videoTags = document.querySelectorAll('video');
|
|
|
|
|
|
audioTags.forEach(media => {
|
|
|
|
|
|
if (media !== currentMedia && !media.paused) {
|
|
|
|
|
|
media.pause();
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
videoTags.forEach(media => {
|
|
|
|
|
|
if (media !== currentMedia && !media.paused) {
|
|
|
|
|
|
media.pause();
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
2023-12-24 22:29:08 +08:00
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
}
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
refreshMediaListener();
|
2023-12-24 22:29:08 +08:00
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
function showModal(image) {
|
|
|
|
|
|
var modal = document.getElementById("modal");
|
|
|
|
|
|
var modalImage = document.getElementById("modal-image");
|
|
|
|
|
|
modal.style.display = "block";
|
|
|
|
|
|
modalImage.src = image.src;
|
|
|
|
|
|
// console.log(image.src);
|
|
|
|
|
|
}
|
2024-01-01 02:12:08 +08:00
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
function hideModal() {
|
|
|
|
|
|
var modal = document.getElementById("modal");
|
|
|
|
|
|
modal.style.display = "none";
|
|
|
|
|
|
}
|
2024-01-01 02:12:08 +08:00
|
|
|
|
|
2024-01-15 21:58:12 +08:00
|
|
|
|
function toggleAudio(buttonElm) {
|
|
|
|
|
|
var audioPlayer = buttonElm.parentNode;
|
|
|
|
|
|
var audio = audioPlayer.querySelector('audio');
|
|
|
|
|
|
if (audio == null) {
|
|
|
|
|
|
alert("该音频已失效或无法直接播放，有需要请点击音频链接查看")
|
|
|
|
|
|
} else {
|
|
|
|
|
|
if (audio.paused) {
|
2024-01-01 02:12:08 +08:00
|
|
|
|
audio.play();
|
|
|
|
|
|
buttonElm.classList.remove('paused');
|
|
|
|
|
|
buttonElm.classList.add('playing');
|
|
|
|
|
|
} else {
|
|
|
|
|
|
audio.pause();
|
|
|
|
|
|
buttonElm.classList.remove('playing');
|
|
|
|
|
|
buttonElm.classList.add('paused');
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2024-01-15 21:58:12 +08:00
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
2024-01-06 17:06:02 +08:00
|
|
|
|
</html>
|
