vue实现类似chatgpt聊天对话效果代码-html代码-BFW代码库

vue实现类似chatgpt聊天对话效果代码

代码语言：html

代码描述：vue实现类似chatgpt聊天对话效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
    <style>
        .chat-list {
      float: left;
      width: 30%;
      height: 500px;
      overflow-y: scroll;
    
    }
    
    .chat-list ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .chat-list li {
      padding: 10px;
      cursor: pointer;
      border-bottom: 1px solid #ccc;
    }
    
    .chat-list li.active {
      background-color: #eee;
    }
    
    .chat-window {
      float: left;
      width: 70%;
      height: 500px;
    }
    
    .chat-header {
      padding: 10px;
      background-color: #f0f0f0;
      font-weight: bold;
    }
    
    .chat-body {
      padding: 10px;
      height: 400px;
      overflow-y: scroll;
    }
    
    .chat-body ul {
      list-style: none;
      margin: 0;
      padding: 0;
   .........完整代码请登录后点击上方下载按钮下载查看