64 lines
3.1 KiB
HTML
64 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>聊天窗口</title>
|
|
<link rel="icon" href="static/images/Normal.ico" type="image/x-icon">
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="static/css/chat1.css">
|
|
|
|
<!-- 引入 Socket.IO 客户端库 -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<!-- 引入 Vue.js -->
|
|
<script src="static/js/vue.js"></script>
|
|
<!-- 引入 Element UI -->
|
|
<link rel="stylesheet" href="static/css/element/theme-chalk.css" />
|
|
<script src="static/js/element-ui.js"></script>
|
|
<!-- 引入 chat1.js -->
|
|
<script src="static/js/chat1.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<div id="chat-app">
|
|
<div id="chat-widget">
|
|
<div class="top_info"><span class="top_info_text">消息：</span>[[panelMsg]]</div>
|
|
<!--聊天框-->
|
|
<div id="chat-container">
|
|
<div id="messages">
|
|
<!-- 消息气泡将动态添加到这里 -->
|
|
<div v-for="(message, index) in messages" :key="index" class="message">
|
|
<div class="message receiver-message" v-if="message.type == 'fay'">
|
|
<div class="message-content">
|
|
<div class="message-bubble">[[message.content]]</div>
|
|
</div>
|
|
</div>
|
|
<div class="message sender-message" v-else>
|
|
<div class="message-content">
|
|
<div class="sender-message message-bubble">[[message.content]]</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="status-indicator">[[ status ]]</div>
|
|
<!--输入区域-->
|
|
<div id="input-area">
|
|
<!-- 开关按钮 -->
|
|
<el-button v-if="liveState == 1" type="success" class="btn_close"
|
|
style="width: 90px; height: 32px; margin-left: 10px; background-color: #007aff;"
|
|
@click="stopLive()">关闭</el-button>
|
|
<el-button v-else type="primary"
|
|
style="width: 90px; height: 32px; margin-left: 10px; background-color: #007aff;"
|
|
@click="startLive()">开启</el-button>
|
|
|
|
<!-- 输入框和发送按钮 -->
|
|
<input type="text" id="message-input" placeholder="请输入内容..." v-model="newMessage" @keyup.enter="sendMessage">
|
|
<button id="send-btn" @click="sendMessage">
|
|
<img src="static/images/send.png" alt="发送">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |