vue简介实例

先看样式
在这里插入图片描述
再看代码

<div v-else class="relative mt-4 h-44 cursor-pointer overflow-hidden rounded-xl">
  <div
    class="absolute flex h-44 w-full blur-lg"
    :style="{ backgroundImage: `url(${currentSongList.list[0]?.coverImgUrl})` }"
  />
  <div class="absolute z-50 box-border flex h-44 w-full bg-black/30 p-4">
    <load-img
      loading-height="144px "
      class-name="w-36 h-36 rounded-md"
      :src="currentSongList.list[0]?.coverImgUrl"
    />
    <div class="ml-4 flex-1">
      <n-tag type="success">
        {{ selectValue }}
      </n-tag>
      <p class="py-2 text-white">
        {{ currentSongList.list[0]?.name }}
      </p>
      <n-ellipsis :line-clamp="5" :tooltip="false" class="text-xs text-white opacity-80">
        {{ currentSongList.list[0]?.description }}
      </n-ellipsis>
    </div>
  </div>
</div>

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

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

相关文章

jpg压缩在线方法,我只用这2种(无损)

在数字化的时代&#xff0c;我们经常需要分享、存储或上传各种图像文件&#xff0c;而JPG是其中最常见的图像格式之一。然而&#xff0c;大文件大小有时可能成为一个问题&#xff0c;尤其是在网络传输或存储空间有限的情况下。为了解决这一问题&#xff0c;我们可以利用在线工具…

滚球游戏笔记

1、准备工作 (1) 创建地面&#xff1a;3D Object-Plane&#xff0c;命名为Ground (2) 创建小球&#xff1a;3D Object-sphere&#xff0c;命名为Player&#xff0c;PositionY 0.5。添加Rigidbody组件 (3) 创建文件夹&#xff1a;Create-Foder&#xff0c;分别命名为Material…

Ps:条件模式更改

Ps菜单&#xff1a;文件/自动/条件模式更改 Automate/Conditional Mode Change 条件模式更改 Conditional Mode Change脚本命令可用于将图像文档的颜色模式更改为指定的模式。 既可以将指定的源颜色模式转换为目标颜色模式&#xff0c;还可以将此命令记录在动作中以便实施快速转…

单通道触摸感应开关RH6016

1.简介 SOT23-6 RH6016 封装和丝印 RH6016 是一款内置稳压模块的单通道电容式触摸感应控制开关IC&#xff0c;可以替代传统的机械式开关。 RH6016可在有介质(如玻璃、亚克力、塑料、陶瓷等)隔离保护的情况下实现触摸功能&#xff0c;安全性高。 RH6016内置高精度稳压、上电复…

Apache Doris 全新分区策略 Auto Partition 应用场景与功能详解 | Deep Dive系列

编辑&#xff1a;SelectDB 技术团队 在当今数据驱动的时代&#xff0c;如何高效、有序地管理数据库中的海量数据成为挑战。为了处理庞大的数据集&#xff0c;分布式数据库引入了类似分区和分桶策略&#xff0c;通过将数据按特定规则划分成较小的单位并分布到不同节点上&#x…

远程桌面控制

收费程序&#xff0c;白嫖党勿扰 收费金额1000元 1 概述 之前做了一个云渲染程序&#xff0c;和虚幻的像素流原理是一样的&#xff0c;不过没有虚幻做的那么完善。云渲染是使用视频流技术&#xff0c;将三维可视化画面以视频流的形式推送到服务器&#xff0c;服务器将视频转发…

28. 空间滤波器

导论&#xff1a; 几何光线追迹是光线传播的一种不完善描述。严格地说&#xff0c;光束传播是一个相干过程。当波前通过自由空间或光学介质时&#xff0c;波前会发生相干干涉。这种相干传播的建模包括物理光学领域。 物理光学传播&#xff08;POP&#xff09;是zemax的一项强…

2024年【高压电工】模拟考试题及高压电工考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年高压电工模拟考试题为正在备考高压电工操作证的学员准备的理论考试专题&#xff0c;每个月更新的高压电工考试试题祝您顺利通过高压电工考试。 1、【单选题】下列()安全用具是在电气操作中使用的基本安全用具。…

服务器数据恢复—KVM虚拟机被误删除如何恢复虚拟磁盘文件?

服务器数据恢复环境&故障&#xff1a; 1台服务器&#xff0c;Linux操作系统EXT4文件系统&#xff0c;部署了数台KVM虚拟机&#xff0c;每台虚拟机包含一个qcow2格式的磁盘文件&#xff0c;和一个raw格式的磁盘文件。 工作人员操作失误删除了3台服务器上的KVM虚拟机&#xf…

c# 二维图形绘制实践

1.等边三角形 1.1 概述 1.2 代码 using System; using System.Drawing; using System.Windows.Forms;public partial class TriangleForm : Form {public TriangleForm(){//InitializeComponent();// 确保窗体大小足够大&#xff0c;以容纳三角形 this.ClientSize new Siz…

springboot相关的一些知识

SpringBoot可以同时处理多少请求 SpringBoot默认的内嵌容器是Tomcat&#xff0c;所以SpringBoot可以同时处理多少请求取决于Tomcat。 SpringBoot中处理请求数量相关的参数有四个&#xff1a; server.tomcat.thread.min-spare&#xff1a;最少的工作线程数&#xff0c;默认大小…

表单中的常用元素

10.图像形式上传文件 <input type“image”>定义图像形式的提交。 src 属性和alt属性必须与<input type“image””>结合使用。 input type"image"src"img/l.jpg"alt"submit"/> 11.下拉列表框 <select>标签定义下拉列表框…

ubuntu 20.04禁止自动更新内核驱动、显卡驱动(使用命令行)

本文目录 一、禁止更新内核1.1 查看当前内核1.2 查看安装的内核1.3 根据需求&#xff0c;使用hold参数禁止固定内核1.4 查询被锁定不更新软件包的状态 二、禁止更新显卡驱动2.1 查看安装的显卡驱动2.2 查看详细的详细的显卡信息2.3 禁止显卡驱动更新2.4 查询显卡是否设置成功 前…

EE trade:现货黄金杠杆比例的计算方法

现货黄金杠杆交易是一种利用保证金进行交易的方式&#xff0c;允许投资者用较少的资金控制较大的交易量&#xff0c;从而放大收益或损失。杠杆比例的计算方法相对简单&#xff0c;主要取决于交易所需的保证金和实际交易金额之间的关系。 杠杆比例的计算公式 杠杆比例 实际交…

SoC设计更重要的是IP管理

对于大多数片上系统&#xff08;SoC&#xff09;设计来说&#xff0c;最关键的任务不是RTL编码&#xff0c;甚至不是创建芯片架构。今天&#xff0c;SoC的设计主要使用来自多个供应商的各种IP块。这使得管理硅IP成为SoC设计过程中的主要任务。 一般来说&#xff0c;新编写的RTL…

【挑战100天首通《谷粒商城》】-【第一天】【10 番外篇】 解决docker 仓库无法访问 + MobaXterm连接VirtualBox虚拟机

文章目录 课程介绍 1、解决docker 仓库无法访问 2、 MobaXterm连接VirtualBox虚拟机 Stage 1&#xff1a;下载MobaXterm选择适合你的版本 Stage 2&#xff1a;vagrant ssh 连接&#xff0c;开启ssh访问 Stage 2-1&#xff1a;su获取root账号权限,输入密码&#xff08;默认vagra…

微软修复Wi-Fi驱动高危漏洞 影响Windows所有版本 可通过局域网发起攻击

微软修复 WiFi 驱动程序中的高危安全漏洞&#xff0c;该漏洞影响 Windows 所有版本&#xff0c;可以通过公共 WiFi 等发起攻击。如果攻击者能够接入到目标设备所处的网络中&#xff0c;则可以悄无声息完成攻击&#xff0c;不需要用户进行任何交互。 在本月例行安全更新中微软修…

深入理解@EnableAspectJAutoProxy

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…

【分享】WinRAR如何加密压缩文件?

WinRAR除了用来解压缩文件&#xff0c;还可以作为一款加密软件&#xff0c;给压缩文件设置密码保护&#xff0c;今天一起来看看&#xff0c;WinRAR的3种加密方法。 方法1&#xff1a;设置单次加密 如果偶尔需要给压缩文件设置密码&#xff0c;可以使用单次加密方法。 首先&am…

Spring技术——介绍、初识

从这篇博客正式开始学习 Spring 。 一、整个Spring技术学习的介绍 首先先对 Spring 做一个简单的认识&#xff0c;并从以下3个方面了解学习Spring 技术的意义&#xff1a; &#xff08;1&#xff09;为什么要学习 Spring 技术&#xff1f; 1、它的市场的占有率很高&#xff…