智能问答页面代码

原创

已于 2023-02-09 16:14:20 修改 · 1.1k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html

于 2022-11-14 10:44:00 首次发布

<template>
  <div>
    <div class="center-box">
      <div id="header" class="header clearfix">智能机器人问答</div>

      <div id="content" class="scrollbar" style="bottom: 136px; right: 300px; width: auto;">
        <dl class="messages" style="margin-bottom: 12px;">
          <dt><h4><a href="javascript:0;" id="show-history"></a></h4></dt>
          <dd class="bot clearfix" data-invalid-transfer="true" v-for="(item,index) in QAList" :key="index">
            <div :class="item.type == 1?'msg-recv':'msg-send' " class="msg" style="color:#fff">
              <i class="msg-avatar"></i>
              <div class="sender">
                <span class="sender-text">{
  
  { item.name }}</span>
                <span class="time-text">{
  
  { item.time }}</span>
              </div>
              <div class="msg-content-and-after">
                <div class="msg-content">
                  <p>{
  
  { item.text }}</p>
                  <div v-for="(i, index) in item.list" :key="index">
                    <div>序号：{
  
  { index + 1 }}</div>
                    <KeyWordShowOne style="margin-bottom: 10px" :detail1="i"></KeyWordShowOne>
                    <div v-if="item.material">相关简介：{
  
  { item.material.abstract.join(',') }}</div>
                  </div>
                  <div v-if="item.relationKeywordList&&item.relationKeywordList.length">您可能对
                    <span class="one-keyword" v-for="(item, index) in item.relationKeywordList" :key="index" @click="showKey(item)">{
  
  {item}}</span>
                    感兴趣，点击查看~
                  </div>
                  <!--关联素材-->
                </div>
              </div>
            </div>
          </dd>
        </dl>
        <div id="msg_end" ref="msg_end" style="height:0px; overflow:hidden"></div>
      </div>

      <div id="side-box" class="scrollbar" style="width: 300px;">
        <div class="sidebox">
          <ul class="nav-ul clearfix">
            <li style="width: 100.0%;" class="active">热门问题</li>
          </ul>
          <div class="tab-content">
            <div id="" class="tab-pane scrollbar active custom_content_TabPanel">
              <ul class="wenti-ul">