当前位置: 首页 > news >正文

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

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

效果:
在这里插入图片描述


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><divv-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-inputv-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


/* 中区 */
.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智能问答页面布局

(css)AI智能问答页面布局 效果&#xff1a; html <!-- AI框 --><div class"chat-top"><div class"chat-main" ref"chatList"><div v-if"!chatList.length" class"no-message"><span>欢迎使…...

【Pytorch学习】pytorch中的isinstance() 函数

描述 isinstance() 函数来判断一个对象是否是一个已知的类型&#xff0c;类似 type()。 isinstance() 与 type() 区别&#xff1a; type() 不会认为子类是一种父类类型&#xff0c;不考虑继承关系。 isinstance() 会认为子类是一种父类类型&#xff0c;考虑继承关系。 如果要判…...

(树) 剑指 Offer 07. 重建二叉树 ——【Leetcode每日一题】

❓剑指 Offer 07. 重建二叉树 难度&#xff1a;中等 输入某二叉树的 前序遍历 和 中序遍历 的结果&#xff0c;请构建该二叉树并返回其根节点。 假设输入的前序遍历和中序遍历的结果中都不含重复的数字。 示例 1: Input: preorder [3,9,20,15,7], inorder [9,3,15,20,7] …...

Gitlab 合并分支与请求合并

合并分支 方式一&#xff1a;图形界面 使用 GitGUI&#xff0c;右键菜单“GitExt Browse” - 菜单“命令” - 合并分支 方式二&#xff1a;命令行 在项目根目录下打开控制台&#xff0c;注意是本地 dev 与远程 master 的合并 // 1.查看本地分支&#xff0c;确认当前分支是否…...

【Matter】基于Ubuntu 22.04 编译chip-tool工具

前言 编译过程有点曲折&#xff0c;做下记录&#xff0c;过程中&#xff0c;有参考别人写的博客&#xff0c;也看github 官方介绍&#xff0c;终于跑通了~ 环境说明&#xff1a; 首先需要稳定的梯子&#xff0c;可以访问“外网”ubuntu 环境&#xff0c;最终成功实验在Ubunt…...

将 MongoDB 的 List<Document> 转换为对象列表

当我们使用 MongoDB 存储数据时&#xff0c;经常会涉及到将 MongoDB 的文档对象转换为对象列表的需求。在 Java 中&#xff0c;我们可以使用 MongoDB 的 Java 驱动程序和自定义类来实现这一转换过程。 本篇博客将介绍如何将 MongoDB 中的 List<Document> 转换为对象列表。…...

【Linux下6818开发板(ARM)】SecureCRT串口和交叉编译工具(巨细版!)

(꒪ꇴ꒪ ),hello我是祐言博客主页&#xff1a;C语言基础,Linux基础,软件配置领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff01;送给读者的一句鸡汤&#x1f914;&#xff1a;集中起来的意志可以击穿顽石!作者水平很有限&#xff0c;如果发现错误&#x…...

应届生如何快速找Java开发工程师,先学会这17个基础问题

一、Java 基础 JDK 和 JRE 有什么区别&#xff1f; JDK&#xff1a;Java Development Kit 的简称&#xff0c;java 开发工具包&#xff0c;提供了 java 的开发环境和运行环境。 JRE&#xff1a;Java Runtime Environment 的简称&#xff0c;java 运行环境&#xff0c;为 java 的…...

数学建模学习(5):数学建模各类题型及解题方案

一、数学建模常见的题型 总体来说&#xff0c;数学建模赛题类型主要分为&#xff1a;评价类、预测类和优化类三种&#xff0c;其中优化类是最常见的赛题类 型&#xff0c;几乎每年的地区赛或国赛美赛等均有出题&#xff0c;必须要掌握并且熟悉。 二、评价类赛题 综合评价是数学…...

【学习笔记】视频检测方法调研

目录 1 引言2 方法2.1 视频目标跟踪2.1.1 生成式模型方法2.1.2 判别式模型方法2.1.2.1 基于相关滤波跟踪2.1.2.2 基于深度学习跟踪 2.2 视频异常检测2.2.1 基于重构方法2.2.2 基于预测方法2.2.3 基于分类方法2.2.4 基于回归方法 2.3 深度伪造人脸视频检测2.3.1 基于RNN时空融合…...

idea terminal npm指令无效

文章目录 一、修改setting二、修改启动方式 一、修改setting 菜单栏&#xff1a;File->Settings 二、修改启动方式 快捷方式->右键属性->兼容性->勾选管理员身份运行...

低代码开发平台源码

什么是低代码开发平台&#xff1f; 低代码来源于英文“Low Code&#xff0c;它意指一种快速开发的方式&#xff0c;使用最少的代码、以最快的速度来交付应用程序。通俗的来说&#xff0c;就是所需代码数量低&#xff0c;开发人员门槛低&#xff0c;操作难度低。一般采用简单的图…...

【UE5 多人联机教程】04-加入游戏

效果 步骤 1. 新建一个控件蓝图&#xff0c;父类为“USC_Button_Standard” 控件蓝图命名为“UMG_Item_Room”&#xff0c;用于表示每一个搜索到的房间的界面 打开“UMG_Item_Room”&#xff0c;在图表中新建一个变量&#xff0c;命名为“Session” 变量类型为“蓝图会话结果…...

自然语言处理从入门到应用——LangChain:模型(Models)-[大型语言模型(LLMs):缓存LLM的调用结果]

分类目录&#xff1a;《自然语言处理从入门到应用》总目录 from langchain.llms import OpenAI在内存中缓存 import langchain from langchain.cache import InMemoryCachelangchain.llm_cache InMemoryCache()# To make the caching really obvious, lets use a slower mode…...

Python 算法基础篇之图的遍历算法:深度优先搜索和广度优先搜索

Python 算法基础篇之图的遍历算法&#xff1a;深度优先搜索和广度优先搜索 引言 1. 图的遍历概述2. 深度优先搜索&#xff08; DFS &#xff09;2.1 DFS 的实现2.2 DFS 的应用场景 3. 广度优先搜索&#xff08; BFS &#xff09;3.1 BFS 的实现3.2 BFS 的应用场景 4. 示例与实例…...

文本缩略 文本超出显示省略号 控制超出省略的行数

文本缩略 .abb{//超出一行省略overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }超出2行省略 .abb2{display: -webkit-box !important;-webkit-box-orient: vertical;//超出2行省略-webkit-line-clamp:2;overflow: hidden; }控制超出省略的行数 .txt-over{/*控…...

云原生架构

1. 何为云原生&#xff1f; 很多IT业内小伙伴会经常听到这个名词&#xff0c;那么什么是云原生呢&#xff1f;云原生是在云计算环境中构建、部署和管理现代应用程序的软件方法。 当今时代&#xff0c;众多企业希望构建高度可扩展、灵活且有弹性的应用程序&#xff0c;以便能够快…...

Java 生成随机数据

文章目录 1. Java-faker依赖demo 2. common-random依赖demo 1. Java-faker 依赖 <dependency><groupId>com.github.javafaker</groupId><artifactId>javafaker</artifactId><version>1.0.2</version> </dependency>https://…...

基于OpenCV的红绿灯识别

基于OpenCV的红绿灯识别 技术背景 为了实现轻舟航天机器人实现红绿灯的识别&#xff0c;决定采用传统算法OpenCV视觉技术。 技术介绍 航天机器人的红绿灯识别主要基于传统计算机视觉技术&#xff0c;利用OpenCV算法对视频流进行处理&#xff0c;以获取红绿灯的状态信息。具…...

JavaScript快速入门:ComPDFKit PDF SDK 快速构建 Web端 PDF阅读器

JavaScript快速入门&#xff1a;ComPDFKit PDF SDK 快速构建 Web端 PDF阅读器 在当今丰富的网络环境中&#xff0c;处理 PDF 文档已成为企业和开发人员的必需品。ComPDFKit 是一款支持 Web 平台并且功能强大的 PDF SDK&#xff0c;开发人员可以利用它创建 PDF 查看器和编辑器&…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...