107 lines
3.8 KiB
HTML
107 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Fay数字人</title>
|
|
<link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}" />
|
|
<script src="{{ url_for('static',filename='js/vue.js') }}"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/index.js"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/theme-chalk/index.css" />
|
|
<script src="{{ url_for('static',filename='js/index.js') }}" defer></script>
|
|
</head>
|
|
<body >
|
|
<div id="app" class="main_bg">
|
|
<div class="main_left">
|
|
<div class="main_left_logo" ><img src="{{ url_for('static',filename='images/logo.png') }}" alt="">
|
|
</div>
|
|
|
|
<div class="main_left_menu">
|
|
<ul>
|
|
<li class="changeImg"><a href="/"><span class="iconimg1">消息</span></a></li>
|
|
<li class="changeImg2"><a href="/setting"><span class="iconimg2">设置</span></a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="main_left_emoji"><img style="padding-top: 60px; max-width: 140px;" :src="robot" alt="" >
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main_right">
|
|
<div class="top_info"><span class="top_info_text">消息：</span>[[panelMsg]]</div>
|
|
<!-- 以上是即时信息显示 -->
|
|
<div class="chatmessage">
|
|
<div class="chat-container" id="user0" >
|
|
<div v-for="(item, index) in messages" :key="index" >
|
|
|
|
<div class="message receiver-message" v-if="item.type == 'fay'">
|
|
<img class="avatar" src="{{ url_for('static',filename='images/Fay_send.png') }}" alt="接收者头像">
|
|
<div class="message-content">
|
|
<div class="message-bubble">[[item.content]]</div>
|
|
<div class="message-time">[[item.timetext]]</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="message sender-message" v-else>
|
|
<div class="message-content">
|
|
<div class="sender-message message-bubble">[[item.content]]</div>
|
|
<div class="sender-message-time">[[item.timetext]]</div>
|
|
</div>
|
|
<img class="avatar" src="{{ url_for('static',filename='images/User_send.png') }}" alt="发送者头像">
|
|
</div>
|
|
</div>
|
|
<div >
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 以上是聊天对话 -->
|
|
|
|
<div class="inputmessage">
|
|
<div class="inputmessage_voice" ><img src="{{ url_for('static',filename='images/voice.png') }}" alt="" style="filter: grayscale(100%);" ></div>
|
|
<div class="inputmessage_input"> <textarea class="text_in" placeholder="请输入内容" v-model="newMessage" @keyup.enter="sendMessage" style="padding-top: 13px;"></textarea></div>
|
|
<div class="inputmessage_send"><img src="{{ url_for('static',filename='images/send.png') }}" alt="发送信息" @click="sendMessage"></div>
|
|
|
|
<div class="inputmessage_open">
|
|
|
|
<img v-if="liveState == 1" src="{{ url_for('static',filename='images/close.png') }}" @click=stopLive() >
|
|
<img v-else src="{{ url_for('static',filename='images/open.png') }}" @click=startLive() >
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="Userchange">
|
|
<div class="tag-container">
|
|
<div class="tag" v-for="user in userList" :key="user[0]" :class="{'selected': selectedUser && selectedUser[0] === user[0]}" @click="selectUser(user)">
|
|
[[ user[1] ]]
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<!-- 以上是多用户切换 -->
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body> |