(css)AI智能问答页面布局

这篇具有很好参考价值的文章主要介绍了(css)AI智能问答页面布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

(css)AI智能问答页面布局

效果:
(css)AI智能问答页面布局,CSS,css,前端


html

<!-- AI框 -->
 <div class="chat-top">
   <div class="chat-main" ref="chatList">
     <div v-if="!chatList.length" class="no-message">
       <span>欢迎使用</span>
       <span>ESG实践智能交互系统</span>
       <img src="@/assets/image/light.png" alt />
     </div>
     <div
       v-for="(item, index) in chatList"
       class="chat-item"
       :class="[index%2===1 ? 'question' :'answer']"
       :key="index"
     >
       <div class="header-img-wrapper">
         <div class="wrapper-img">
           <el-image v-if="index%2===1" :src="otherImg" :fit="fit" class="header-img"></el-image>
         </div>
       </div>
       <div class="content">
         <!-- <span class="itemTime" v-if="index%2===1">{{ itemTime }}</span> -->
         <div class="content-width">{{ item.content }}</div>
         <div class="indicator"></div>
       </div>
       <div class="header-img-wrapper">
         <div class="wrapper-img">
           <el-image v-if="index%2===0" :src="meImg" :fit="fit" class="header-img"></el-image>
         </div>
       </div>
     </div>
   </div>
   <el-row class="chat-input">
     <el-col :span="22">
       <el-input
         v-model.trim="searchValue"
         placeholder="请输入您想咨询的问题..."
         class="input-with-select"
         @keyup.enter.native="onSend"
         :disabled="disabled"
       ></el-input>
     </el-col>
     <el-col :span="2" class="sendImg">
       <el-image :src="sendImg" :fit="fit" v-if="!isQuestionIng" @click="onSend"></el-image>
     </el-col>
   </el-row>
 </div>

css文章来源地址https://www.toymoban.com/news/detail-614165.html


/* 中区 */
.chat-wrapper {
  height: 100%;
  // AI区
  .chat-top {
    width: 100%;
    height: 88%;
    background-image: url("../assets/image/chat-main-1.png");
    background-size: 100% 100%;
    padding: 20px;
    font-size: 16px;
    font-family: Regular-font;
    .AITip {
      height: 10%;
      color: #01ffff;
      font-size: 24px;
      padding-bottom: 4px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      line-height: 1;
    }
    .chat-main {
      width: 100%;
      height: 84%;
      padding: 20px 30px;
      overflow-y: auto;
      background-image: url("../assets/image/chat-main-2.png");
      background-size: 100% 100%;
      .no-message {
        width: 50%;
        height: 100%;
        font-size: 40px;
        font-family: iFonts;
        text-align: center;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        flex-direction: column;
        span:nth-child(1) {
          font-size: 34px;
        }
        img {
          display: block;
          width: 100%;
          height: 14px;
          margin-top: -12px;
        }
      }
      // 单条信息
      .chat-item {
        display: flex;
        justify-content: space-between;
        text-align: left;
        position: relative;
        margin-bottom: 50px;
        // 头像
        .header-img-wrapper {
          width: 60px;
          height: 65px;
          .wrapper-img {
            background-image: url("../assets/image/head-portrait-background.png");
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            .header-img {
              width: 60px;
              height: 60px;
            }
          }
        }
        // 内容
        .content {
          flex: 1;
          color: #ffffff;
          margin: 0 30px;
          padding: 16px 20px;
          //   border: 2px solid #2da8f0;
          border: 2px solid rgba(31, 159, 191, 0.9);
          border-radius: 10px;
          background: rgba(22, 68, 124, 0.8);
          //   background: linear-gradient(0deg, #125eab 0%, #3a94f4 100%);
          line-height: 30px;
          position: relative;
          .itemTime {
            position: absolute;
            top: -36px;
            left: 46%;
            width: 50px;
            height: 20px;
            background: rgba(22, 68, 124, 0.8);
            text-align: center;
            font-size: 14px;
            line-height: 18px;
          }
        }
      }
      .chat-item.question .indicator {
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid rgba(31, 159, 191, 0.9);
        // border-right: 10px solid #2da8f0;
        position: absolute;
        left: -10px;
        top: 16px;
      }
      .chat-item.answer .indicator {
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid rgba(31, 159, 191, 0.9);
        // border-left: 10px solid #2da8f0;
        position: absolute;
        right: -10px;
        top: 16px;
      }

      .chat-item:not(:first-child) {
        margin-top: 38px;
      }
    }
    .chat-input {
      width: 100%;
      height: 11%;
      background-image: url("../assets/image/chat-main-3.png");
      background-size: 100% 100%;
      padding-right: 2%;
      margin: 3% auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      /deep/ .el-input__inner {
        background-color: transparent;
        border: none;
        color: #fff;
      }
      .sendImg {
        width: 26px;
        height: 26px;
        cursor: pointer;
      }
    }
  } 
}

到了这里,关于(css)AI智能问答页面布局的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS页面布局(超详解)

    目录 1 CSS页面布局概述 1.1 概述 1.2 网页栏目划分 1.3 元素类型转化 1.3.1 块元素 1.3.2 行内元素 1.3.2 块元素和行内元素的转换 1.4 定位 1.4.1 静态定位 1.4.2 相对定位 1.4.3 绝对定位 1.4.4 固定定位 1.4.5 定位元索的层叠次序 1.5 浮动 1.5.1 概述 1.5.2 浮动属性 1.5.3 浮动详解 1.6 溢出与剪

    2024年02月02日
    浏览(34)
  • 【前端|CSS系列第4篇】CSS布局之网格布局

    最近在做的一个项目前台首页有一个展示词条的功能,每一个词条都以一个固定大小的词条卡片进行展示,要将所有的词条卡片展示出来,大概是下面这种布局 每一行的卡片数目会随着屏幕大小自动变化,并且希望整个卡片区域周围不要有太大的留白,可是由于本人css学的并

    2024年02月16日
    浏览(36)
  • 21.2 CSS 三大特性与页面布局

    2.1 层叠性 2.2 继承性 2.3 优先级 3.1 div页面布局 3.2 span局部更改样式 3.3 结构错误 4.1 块级元素 4.2 行内元素 4.3 行内块级元素 5.1 块级元素转行内元素 5.2 行级元素转块级元素 5.3 转为行内块级标签

    2024年02月11日
    浏览(35)
  • FE_CSS 页面布局之定位

    某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子。 当我们滚动窗口的时候,盒子是固定屏幕某个位置的。 以上效果,标准流或浮动都无法快速实现,此时需要定位来实现。 浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子。 定位则是

    2023年04月18日
    浏览(41)
  • 前端知识——css 之 flex 布局

    🔥🔥🔥更多知识,欢迎访问我的个人博客:Nan-ying’s Blog 长久以来,CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning 。 但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举。 一些布局上的痛点无法解决: 比如在父内容里面垂直居

    2024年02月07日
    浏览(51)
  • 【前端】CSS-Grid网格布局

    grid布局:网络布局,是目前唯一一种CSS二维布局方式,一种新的CSS布局模型,由纵横相交的两组网络线形成的框架性布局结构,能够同时处理行与列。号称是最强大的CSS布局方案。 擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系 Grid布局是

    2024年02月09日
    浏览(36)
  • 前端学习——css盒子模型、css3新特性、伪类、布局0711TODO

    样式还是得具体使用才能理解,不然会忘记也理解不透彻;还有定位,元素溢出,浮动,布局水平垂直对齐: css3新特性 1过渡 2 动画 3 2D、3D转换 伪类 三种定位方式 弹性布局/栅格布局

    2024年02月15日
    浏览(53)
  • [HTML]Web前端开发技术11(HTML5、CSS3、JavaScript )页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式 多行多列复杂模式水平导航菜单——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 页面布局设计 “三行模式”或“三列模式” “三行二列”、“三行三列”模式 多行多列复杂模式 导

    2024年02月02日
    浏览(58)
  • FE_CSS 页面布局之圆角边框 & 盒子阴影 & 文字阴影

    在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。border-radius 属性用于设置元素的外边框圆角。 参数值可以为数值或百分比的形式 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50% 该属性是一个简写属性,可以跟

    2023年04月13日
    浏览(77)
  • 【前端】CSS(引入方式+选择器+常用元素属性+盒模型+弹性布局)

    层叠样式表(Cascading Style Sheets) 对元素位置的排版进行精确控制,实现结构和样式的分离 CSS 控制页面的展示效果 HTML决定页面的结构 选择器+{一条/N条声明} 选择器:要修改谁 声明:具体要修改什么内容。声明的属性是键值对,用分号区分,键和值用: 通常情况下,把style放

    2024年04月15日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包