css样式,点击 箭头方向上下转换

实现效果:

点击切换箭头方向

在这里插入图片描述

在这里插入图片描述

实现代码

    <div
      class="modelPart"
      @click="showClick"
    >
      <div class="modelPart_left">
        <img
          :src=aidefalutIcon
          class="sNodeIcon"
        >
        <div>{{ selectModel }}</div>
        <div class="chatText">CHAT</div>
      </div>
      <span :class="dropdown==true?'expand':'down'"
           class="arrow"></span>
    </div>

<script setup>
     import { useI18n } from 'vue-i18n';
     const { t } = useI18n();
     import { onMounted, ref, watch } from 'vue'
     const dropdown = ref(false)
     // 点击事件
     function showClick () {
         dropdown.value = !dropdown.value
     }
</script>
  .arrow {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-top: -3px;
    margin-left: 9px;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
   
  }
  .down{
   transform: rotate(225deg);
   transform-origin: center;
   transition: all 0.3s;
}
  .expand {
    transform: translate(0, 2px) rotate(45deg);
    transform-origin: center;
    transition: all 0.3s;
 }

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

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

相关文章

【Java EE】网络原理——HTTP请求

目录 1.认识URL 2.认识“方法&#xff08;method&#xff09;” 2.1GET方法 2.1.1使用Fiddler观察GET请求 2.1.2 GET请求的特点 2.2 POST方法 2.2.1 使用FIddler观察POST方法 2.2.2 POST请求的特点 3.认识请求“报头”&#xff08;header&#xff09; 3.1 Host 3.2 C…

【edge浏览器】控制台报错信息隐藏-恢复

问题描述 解决方法&#xff1a;只需要清空筛选器

进程和用户管理

查看进程的命令 ps top pstree 发送信号命令 kill 使用是后加-l 用户管理命令 添加用户:sudo adduser 用户名 修改组:sudo usermod -G 用户名1 用户名2 修改家目录:sudo usermod -d /home/用户名 -m 用户名 删除用户名:sudo deluser --remove -home 用户名

Java 使用WebMagic爬取网页(简单示例)

框架简介 WebMagic是一个基于Java的开源网络爬虫框架&#xff0c;它提供了很多简单易用的API接口&#xff0c;可以帮助使用者快速构建出高效、可扩展的网络爬虫程序&#xff0c;WebMagic由四个组件(Downloader、PageProcessor、Scheduler、Pipeline)构成&#xff0c;核心代码非…

GitHub打不开的解决方案

1、打开https://sites.ipaddress.com/github.com/找到DNS Resource Records&#xff0c;复制github的ip地址&#xff0c;先保存起来&#xff1a; 140.82.112.32、打开https://sites.ipaddress.com/fastly.net/找到DNS Resource Records&#xff0c;复制其中一个ip地址&#xf…

OC IOS 文件解压缩预览

热很。。热很。。。。夏天的城市只有热浪没有情怀。。。 来吧&#xff0c;come on。。。 引用第三方库&#xff1a; pod SSZipArchive 开发实现&#xff1a; 一、控制器实现 头文件控制器定义&#xff1a; // // ZipRarViewController.h // // Created by carbonzhao on 2…

ARTS Week 31

Algorithm 本周的算法题为 1556. 千位分隔数 给你一个整数 n&#xff0c;请你每隔三位添加点&#xff08;即 "." 符号&#xff09;作为千位分隔符&#xff0c;并将结果以字符串格式返回。 示例 1&#xff1a;输入&#xff1a;n 123456789输出&#xff1a;"123.…

(四)MySQL 事务

欢迎访问 事务有哪些特性&#xff1f; 事务是由 MySQL 的引擎来实现的&#xff0c;我们常见的 InnoDB 引擎它是支持事务的。 不过并不是所有的引擎都能支持事务&#xff0c;比如 MySQL 原生的 MyISAM 引擎就不支持事务&#xff0c;也正是这样&#xff0c;所以大多数 MySQL 的…

凤香的“蜜”密

执笔 | 文 清 编辑 | 古利特 “遇水则漏&#xff0c;遇酒生香”。酒海&#xff0c;一种大型盛酒容器&#xff0c;因盛酒量以“吨”计算&#xff0c;故称“海”&#xff0c;传于唐宋&#xff0c;兴盛于明清&#xff0c;距今有1400多年的历史。文人墨客笔下&#xff0c;也多有…

部署Prometheus + Grafana实现监控数据指标

1.1 Prometheus安装部署 Prometheus监控服务 主机名IP地址系统配置作用Prometheus192.168.110.27/24CentOS 7.94颗CPU 8G内存 100G硬盘Prometheus服务器grafana192.168.110.28/24CentOS 7.94颗CPU 8G内存 100G硬盘grafana服务器 监控机器 主机名IP地址系统配置k8s-master-0…

融合基因组序列识别scATAC-seq的细胞类型

利用scATAC-seq技术进行单细胞分析&#xff0c;可以在单细胞分辨率下深入了解基因调控和表观遗传异质性&#xff0c;但由于数据的高维性和极端稀疏性&#xff0c;scATAC-seq的细胞注释仍然具有挑战性。现有的细胞注释方法大多集中在细胞峰矩阵上&#xff0c;没有充分利用潜在的…

利用基于CNN的人员检测与关键词识别的TinyML实现无接触电梯

目录 说明 论文概述 摘要 引言 现有非接触式电梯解决方案 新解决方案的需求 tinyML实施 系统构建和算法管道 CNN和TinyML实现 结果与讨论 结论 视频演示和代码可用性 一点感想 说明 我一直使用Google Schloar订阅最新的论文消息&#xff0c;今天看到一篇论文的标…

窄通道、非液压、超续航、更安全,地牛AGV小车诠释高效物流!

agv 在智能时代&#xff0c;替代简单、机械、重复以及重体力工作的智能机器设备成为未来发展的趋势。这种趋势不仅可以提高工作效率和质量&#xff0c;还可以解放人力资源&#xff0c;使其更好地应用于创造性和高级智能任务上。 这不&#xff0c;现在有越来越多的工厂开始使用…

json/excel文件上传下载工具方法汇总

文章目录 浏览器下载json文件浏览器下载excel文件【Workbook】浏览器导入json文件【ObjectMapper】浏览器导入excel文件【Workbook】ResourceLoader读取类路径下单个jsonResourceLoader读取类路径下所有json文件 浏览器下载json文件 Operation(summary "设备模型导出(带分…

详解Java ThreadLocal

个人博客 详解Java ThreadLocal | iwts’s blog Java ThreadLocal ThreadLocal提供了线程内存储变量的能力&#xff0c;这些变量不同之处在于每一个线程读取的变量是对应的互相独立的。通过get和set方法就可以得到当前线程对应的值。 TreadLocal存储模型 ThreadLocal的静态…

使用WebStorm如何调试Vue代码

大家好&#xff0c;我是咕噜铁蛋。今天&#xff0c;我想和大家分享一下如何使用WebStorm这款强大的IDE&#xff08;集成开发环境&#xff09;来调试Vue代码。Vue.js作为现代前端开发的利器&#xff0c;其强大的组件化开发能力和简洁的API深受开发者喜爱。然而&#xff0c;随着项…

D2Admin:企业中后台产品前端集成方案的探索与实践

D2Admin&#xff1a;企业中后台产品前端集成方案的探索与实践 摘要&#xff1a;随着企业信息化建设的不断深入&#xff0c;中后台管理系统的前端技术选型与集成方案成为了关键。D2Admin作为一款完全开源免费的前端集成方案&#xff0c;通过采用最新的前端技术栈&#xff0c;提…

pdf编辑器推荐,这三款软件十分好用!

在数字化时代&#xff0c;PDF文档因其跨平台、易阅读的特性&#xff0c;成为了我们工作、学习、生活中不可或缺的一部分。然而&#xff0c;如何高效、便捷地编辑PDF文档&#xff0c;却成为许多人面临的难题。今天&#xff0c;就为大家推荐三款十分好用的PDF编辑器&#xff0c;让…

C++学习---string模拟实现(2)

1.随机插入一个字符串 &#xff08;1&#xff09;insert函数插入一个字符的方法我们在之前的模拟实现里面已经搞过了&#xff0c;那个里面要注意的是这个全体向后挪动的循环过程&#xff0c;这个里面我们要实现的是插入字符串的模拟实现&#xff1b; &#xff08;2&#xff0…

【算法】前缀和——前缀和

本题主要用一个模板题目来说明前缀和的基本思想&#xff0c;有需要借鉴即可。 目录 1.题目2.前缀和2.1题目分析2.2前缀和算法第一步&#xff0c;先预处理一个前缀数组第二步&#xff0c;由题计算得结果 3.代码示例4.总结 1.题目 题目链接&#xff1a;LINK 这个题目可以用暴力…