TaxtArea中内嵌一张放松图片,该图片实现属性悬浮放大功能

TaxtArea中内嵌一张发送图片,该图片实现属性悬浮放大功能,离开还原效果,点击发送按钮后,发送图片变为loading,

<div class="textarea-wrapper" >
          <a-textarea
            ref="textArea"
            v-model.trim="problem"
            :rows="3"
            style="resize: none;height:73px;"
            placeholder="请输入问题" ></a-textarea>
          <div class="image-inside sendImg">
            <img v-if="!loading" class="zoom" @click="sendSession('1')" src="../../../assets/img/custconcquest/send.png">
          </div>
          <div class="spin-inside">
            <a-spin v-if="loading" style="padding: 0" />
          </div>
        </div>

css

.textarea-wrapper {
      position: relative;
  }

.image-inside {
  position: absolute;
  float: right;
  right: 50px;
  bottom: 45px;
}
.spin-inside {
  position: absolute;
  float: right;
  right: 40px;
  bottom: 20px;
}

/* textArea 内的图片, 实现鼠标悬浮放大缩小功能 */
.sendImg {
    position: relative;
    text-align: center;
    width: 50px;
    height: 30px;
}
.zoom {
    position: absolute;
    width: 100%;  /* 图片将填充整个容器 */
    height: 100%;  /* 图片将填充整个容器 */
    transition: transform 0.2s ease-in-out;  /* 这将使图片在悬浮时产生放大效果 */
}
.sendImg:hover .zoom {
    transform: scale(1.2);  /* 当鼠标悬停在容器上时,图片将放大1.2倍 */
}

效果
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/254924.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

每天五分钟计算机视觉:谷歌的Inception模块的计算成本的问题

计算成本 Inception 层还有一个问题,就是计算成本的问题,我们来看一下55 过滤器在该模块中的计算成本。 原始图片为28*28*192经过32个5*5的过滤操作,它的计算成本为: 我们输出28*28*32个数字,对于输出的每个数字来说,你都需要执行 55192 (5*5为卷积核的大小,192为通道…

【Java 并发】三大特性

在 Java 的高并发中&#xff0c;对于线程并发问题的分析通常可以通过 2 个主核心进行分析 JMM 抽象内存模型和 Happens-Before 规则三大特性: 原子性, 有序性和可见性 JMM 抽象内存模型和 Happens-Before 规则, 前面我们讨论过了。这里讨论一下三大特性。 1 原子性 定义: 一个…

Docker部署MinIO对象存储服务器结合内网穿透实现远程访问

文章目录 前言1. Docker 部署MinIO2. 本地访问MinIO3. Linux安装Cpolar4. 配置MinIO公网地址5. 远程访问MinIO管理界面6. 固定MinIO公网地址 前言 MinIO是一个开源的对象存储服务器&#xff0c;可以在各种环境中运行&#xff0c;例如本地、Docker容器、Kubernetes集群等。它兼…

飞天使-jumpserver-docker跳板机安装

文章目录 jumpserverdocker 更新到最新下载安装包mysql启动mysql 命令 验证字符集,创建数据库使用jumpserver 进行连接测试 redis部署jumpserver 写入变量建jumpserver 容器正确输出登录验证 jumpserver 基础要求 硬件配置: 2 个 CPU 核心, 4G 内存, 50G 硬盘&#xff08;最低…

2023.12.18Linux部署项目

动态查看最新内容 防火墙不能杀毒&#xff0c;只能限制服务器的哪些端口可以被访问 哪些主机可以访问本服务器 防火墙开启之后默认封闭所有端口&#xff0c;自己再用策略声明把哪些端口放开 ksh jdk&#xff1a;二进制包 MySQL&#xff1a;rpm包 Redis&#xff1a;源码…

PyQt6 QFrame分割线控件

锋哥原创的PyQt6视频教程&#xff1a; 2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~共计46条视频&#xff0c;包括&#xff1a;2024版 PyQt6 Python桌面开发 视频教程(无废话版…

hping3

Hping3 Hping3的介绍&#xff1a; 是一款网络的测试工具&#xff0c;一般用于网络安全员用来进行防火墙的测试等抗压测试。 Hping3的帮助面板: -h –help显示帮助 -v –version显示版本信息 -c –count 限制发包数 -i –interval nterval 指定发包间隔为多少毫秒&#…

Uniapp上传下载文件-不限制文件类型-附详细代码解析

Uniapp上传下载文件&#xff0c;不限制文件类型 1 知识小课堂1.1 Uniapp简介1.2 文件上传1.3 文件下载 2 Uniapp上传文件3 Uniapp 下载文件 1 知识小课堂 1.1 Uniapp简介 UniApp是一款跨平台应用程序开发框架&#xff0c;它允许开发者使用同一套代码来构建基于多个操作系统的应…

以低成本实现高转化:搭建年入百万的知识付费网站的技巧与方法

明理信息科技知识付费平台 一、引言 随着知识经济的崛起&#xff0c;越来越多的知识提供者希望搭建自己的知识付费平台。然而&#xff0c;对于新手来说&#xff0c;如何以低成本、高效率地实现这一目标&#xff0c;同时满足自身需求并提高客户转化率&#xff0c;是一大挑战。…

Ubuntu 常用命令之 cat 命令用法介绍

cat是一个常用的命令行工具&#xff0c;它用于连接和显示文件的内容。cat这个名字来源于它的功能 - concatenate(连接)。 以下是cat命令的一些基本用法 &#x1f447;显示文件内容&#xff1a;cat后面跟上文件名&#xff0c;就可以在终端显示出文件的内容。例如&#xff0c;c…

3分钟让你学会axios在vue项目中的基本用法(建议收藏)

目录 Axios Axios简介 一、axios是干啥的 二、安装使用 三、Axios请求方式 1、axios可以请求的方法&#xff1a; 2、get请求 3、post请求 4、put和patch请求 5、delete请求 6、并发请求 四、Axios实例 1、创建axios实例 2、axios全局配置 3、axios实例配置 4、…

Swift爬虫采集唯品会商品详情

我有个朋友之前在唯品会开的店&#xff0c;现在想转战其他平台&#xff0c;想要店铺信息商品信息全部迁移过去&#xff0c;如果想要人工手动操作就有点麻烦了&#xff0c;然后有天找到我 &#xff0c;让我看看能不能通过技术手段实现商品信息迁移。嫌来无事&#xff0c;写了下面…

【华为】文档中命令行约定格式规范(命令行格式规范、命令行行为规范、命令行参数格式、命令行规范)

文章目录 命令行约定格式**粗体&#xff1a;命令行关键字***斜体&#xff1a;命令行参数*[ ]&#xff1a;可选配置{ x | y | ... } 和 [ x | y | ... ]&#xff1a;选项{ x | y | ... }* 和 [ x | y | ... ]*&#xff1a;多选项&<1-n>&#xff1a;重复参数#&#xff…

ROS-tf2功能包安装

首先使用 rospack find tf2_tools 查看是否安装了 tf2_tools&#xff0c;如果没有则安装 但直接采用 sudo apt install tf2_tools 是无法安装成功的&#xff0c;会显示 E: 无法定位软件包 tf2_tools 使用下面的命令安装 sudo apt install ros-melodic-tf2-tools&#xff08;…

区域和检索算法(leetcode第303题)

题目描述&#xff1a; 给定一个整数数组 nums&#xff0c;处理以下类型的多个查询:计算索引 left 和 right &#xff08;包含 left 和 right&#xff09;之间的 nums 元素的 和 &#xff0c;其中 left < right 实现 NumArray 类&#xff1a;NumArray(int[] nums) 使用数组…

关于车轮螺母的拧紧力矩——SunTorque智能扭矩系统

车轮螺母是汽车的重要部件之一&#xff0c;其拧紧力矩的大小直接影响到车辆的安全性和稳定性。因此&#xff0c;开发一种准确、可靠的车轮螺母拧紧力矩计算方法对于提高汽车制造质量具有重要意义。SunTorque智能扭矩系统将从车轮螺母拧紧力矩的开发和计算两个方面进行探讨。 一…

单元测试计划、用例、报告、评审编制模板

单元测试支撑文档编制模板&#xff0c;具体文档如下&#xff1a; 1. 单元测试计划 2. 单元测试用例 3. 单元测试报告 4. 编码及测试评审报告 软件项目相关资料全套获取&#xff1a;软件项目开发全套文档下载-CSDN博客 1、单元测试计划 2、单元测试用例 3、单元测试报告 4、编码…

售前解决方案工程师在项目到底有多大价值?

售前解决方案工程师在项目中的价值是非常重要的&#xff0c;虽然其具体价值难以量化&#xff0c;但可以从以下几个方面来体现&#xff1a; 1、提升项目成功率&#xff1a;售前工程师在项目初期就能够深入了解客户需求&#xff0c;通过技术交流、解决方案设计等方式&#xff0c;…

数字滤波器设计——Matlab实现数字信号处理<1>

目录 一.实验内容 二.代码分析 1.信号产生部分 2.利用傅立叶级数展开的方法&#xff0c;自由生成所需的x(t) 3.通过选择不同的采样间隔T&#xff08;分别选T>或<1/2fc&#xff09;&#xff0c;从x(t)获得相应的x(n) 3.对获得的不同x(n)分别作傅立叶变换&#xff0c…

LeedCode刷题---二分查找类问题

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C/C》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、二分查找 题目链接&#xff1a;二分查找 题目描述 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一…