vue 侧边锚点外圆角

news2024/11/14 21:20:39

环境:uniapp、vue3、unocss、vant4

效果:

在这里插入图片描述
在这里插入图片描述

代码

主要是:pointTop 、pointCentent 、pointBottom,这三个样式

html


      <div v-show="!showPoint" class="fixedLeftDiv">
        <div>
          <div class="pointTop"></div>
          <div class="bg-black bg-op-70 pointCentent center" @click="showPoint = true">
            <van-icon name="arrow" size="16" color="white"></van-icon>
          </div>
          <div class="pointBottom"></div>
        </div>
      </div>

    <transition name="van-fade">
      <div v-show="showPoint" class="pl-4 box-border fixedLeftDiv flex items-center">
        <div class="flex flex-col items-center gap-2 bg-black bg-op-70 rounded-2 py-4 pl-2 pr-4 box-border">
          <div
            v-for="(item, index) in info.nodeList"
            :key="index"
            :class="[activePoint === index ? 'text-#FCB79D' : 'text-white', 'p-1 box-border flex items-center']"
            @click.stop="clickPoint(item, index)"
          >
            <div
              v-if="activePoint === index"
              class="border-1 border-solid border-#FCB97D w-1 h-1 rounded-full mr-1"
            ></div>
            {{ item.name }}
          </div>
        </div>

        <div>
          <div class="pointTop"></div>
          <div class="pointCentent center" @click="showPoint = false">
            <van-icon name="arrow-left" size="16" color="white"></van-icon>
          </div>
          <div class="pointBottom"></div>
        </div>
      </div>
    </transition>

css

 
.pointTop {
  width: 24px;
  height: 40px;
  background: radial-gradient(circle at 352% -35%, transparent 85px, rgba(0, 0, 0, 0.7) 86%);
}

.pointCentent {
  width: 30px;
  height: 40px;
  background: radial-gradient(circle at -17% 20px, rgba(0, 0, 0, 0.7) 30px, transparent 77%);
}

.pointBottom {
  width: 24px;
  height: 40px;
  background: radial-gradient(circle at 350% 136%, transparent 85px, rgba(0, 0, 0, 0.7) 86%);
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

RPG素材Unity7月20闪促限时4折游戏开发资产兽人角色模型动画休闲放置模板物理交互流体水下焦散VR界面UI2D模板场景20240720

今天这个是RPG素材比较多&#xff0c;还有一些休闲放置模板、FPS场景素材、角色模型、动画、特效。 详细内容展示&#xff1a;www.bilibili.com/video/BV1Tx4y1s7vm 闪促限时4折&#xff1a;https://prf.hn/l/0eEOG1P 半价促销&#xff1a;https://prf.hn/l/RlDmDeQ 7月闪促…

java开发报错合集

mapstruct 1. 报错信息&#xff1a; mapstruct 错误 java.lang.NoSuchMethodError: Ljava/lang/Double 错误 解决方案&#xff1a; mapstruct 错误 java.lang.NoSuchMethodError: Ljava/lang/Double 错误_mapstruct nosuchmethoderror-CSDN博客 2. 报错信息&#xff1a; maps…

数据结构——线性表(单链表)

一、链式存储结构定义 线性表的链式存储结构定义是指使用指针将线性表中的元素按照其逻辑次序依次存储在存储空间中&#xff0c;通过指针来表示数据元素之间的逻辑关系。具体来说&#xff0c;链式存储结构由数据域和指针域组成&#xff0c;数据域存储数据元素的数值&#xff0…

手机接Usb hub再连接电脑下D+D-波形

&#x1f3c6;本文收录于《CSDN问答解答》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&…

UE4-光照渲染、自动曝光、雾

目录 一.光源种类 二.灯光的移动性 三.自动曝光 四.指数级高度雾 五.实现光束 一.光源种类 1.定向光源 用来模拟现实中的太阳光。 2.点光源 比如现实中的灯泡 3.聚光源 4.矩形光源 是这几个光源中性能开销最大的&#xff0c;一般不用到游戏场景中&#xff0c;因为游…

win安装mysql

解压到目录没如果多个mysql创建不同的名字 创建data和my.ini my.ini内容 [client] default-character-setutf8mb4[mysqld] #设置3306端口 port 3306 # 设置mysql的安装目录 basedirF:\mysql-5.7.31 # 设置mysql的数据存放目录 datadirF:\mysql-5.7.31\data # 允许最大连接数 …

ComfyUI面部修复FaceDetailer使用指南

原文&#xff1a;ComfyUI面部修复完全指南 (chinaz.com) 让我们开始使用ComfyUI中的人脸详细修复器吧。人脸详细修复器节点乍一看可能很复杂&#xff0c;但不要担心&#xff0c;我们会一点一点地分解它。通过理解每个输入、输出和参数&#xff0c;你很快就能像专业人士一样使用…

处理AI模型中的“Type Mismatch”报错:数据类型转换技巧

处理AI模型中的“Type Mismatch”报错&#xff1a;数据类型转换技巧 &#x1f504; 处理AI模型中的“Type Mismatch”报错&#xff1a;数据类型转换技巧 &#x1f504;摘要引言正文内容1. 错误解析&#xff1a;什么是“Type Mismatch”&#xff1f;2. 数据类型转换技巧2.1 检查…

大数据环境下的房地产数据分析与预测研究的设计与实现

1绪论 1.1研究背景及意义 随着经济的快速发展和城市化进程的推进&#xff0c;房地产市场成为了国民经济的重要组成部分。在中国&#xff0c;房地产行业对经济增长、就业创造和资本投资起到了重要的支撑作用。作为中国西南地区的重要城市&#xff0c;昆明的房地产市场也备受关…

SwiftUI 在 WWDC 24 之后的新变化

文章目录 前言视图集合新的标签栏体验英雄动画滚动位置Entry 宏预览其他总结 前言 WWDC 24 已经到来&#xff0c;我们有很多内容要讨论。每年&#xff0c;SwiftUI 都会通过引入更多功能来赶上 UIKit。今年也不例外。让我们深入了解 SwiftUI 框架引入的新功能。 我首先要提到的…

JavaDS —— 优先级队列(堆) PriorityQueue

优先级队列的概念 我们在前面就已经学习过队列&#xff0c;队列是一种先进先出(FIFO)的数据结构&#xff0c;但有些情况下&#xff0c;操作的数据可能带有优先级&#xff0c;一般出队列时&#xff0c;可能需要优先级高的元素先出队列&#xff0c;那么在该场景下&#xff0c;使…

详解数据结构之队列、循环队列(源码)

详解数据结构之队列、循环队列(源码) 队列属于线性表 队列&#xff1a;就好比如&#xff0c;我们在排队买东西时排队&#xff0c;第一个先来的第一个买&#xff0c;最后一个到的最后一个买&#xff0c;这里的队列也是满足先进先出&#xff0c;后进后出的规律&#xff08;First …

如果用MATLAB函数delayseq可以对分数延时,但是延时后波形较原波形有幅度上的改变

&#x1f3c6;本文收录于《CSDN问答解答》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&…

Adobe国际认证详解-视频设计认证专家行业应用场景解析

在当今数字化时代&#xff0c;视频设计已成为各行各业不可或缺的一环。而视频设计认证专家&#xff0c;作为经过Adobe国际认证体系严格考核的专业人才&#xff0c;更是行业内炙手可热的存在。他们凭借深厚的视频设计理论基础和实践经验&#xff0c;为行业提供了高质量的视频设计…

ROS2中间件

ROS2 是重新设计的 Robot Operating System&#xff0c;无论从用户API接口到底层实现都进行了改进。这里主要关注ROS2 的中间件。 1. 通信模式 ROS2 使用DDS协议进行数据传输&#xff0c;并通过抽象的rmw&#xff0c;支持多个厂家的DDS实现&#xff08;FastDDS&#xff0c;Cyc…

Django 执行原生SQL

在Django中&#xff0c;你可以使用Raw SQL queries来执行原生的SQL查询。这对于需要进行复杂查询或Django的ORM无法满足的查询非常有用。 1&#xff0c;添加模型 Test/app11/models.py from django.db import modelsclass Post(models.Model):title models.CharField(max_le…

arthas:介绍

文章目录 一、Arthas&#xff08;阿尔萨斯&#xff09;能为你做什么&#xff1f;二、运行环境要求三、快速安装四、卸载五、通过浏览器连接arthas 一、Arthas&#xff08;阿尔萨斯&#xff09;能为你做什么&#xff1f; Arthas是Alibaba开源的Java诊断工具&#xff0c;深受开发…

buu--web做题(4)

目录 [BJDCTF2020]ZJCTF&#xff0c;不过如此 [BUUCTF 2018]Online Tool [BJDCTF2020]ZJCTF&#xff0c;不过如此 <?phperror_reporting(0); $text $_GET["text"]; $file $_GET["file"]; if(isset($text)&&(file_get_contents($text,r)&q…

vue3运行若依前后台项目步骤(2024-07-19)

环境配置 1、jdk > 1.8 (我的1.8&#xff09; 2、mysql >5.7 (我的5.8&#xff09; 3、navicat (数据库管理器&#xff0c;连接mysql使用 ,我的是15) 4、mysql&#xff08;数据库&#xff0c;我的5.0&#xff09; 4、npm (我的是18.20.0) 5、idea编辑器,webtorm &#x…

Unity UGUI 之 Graphic Raycaster

本文仅作学习笔记与交流&#xff0c;不作任何商业用途 本文包括但不限于unity官方手册&#xff0c;唐老狮&#xff0c;麦扣教程知识&#xff0c;引用会标记&#xff0c;如有不足还请斧正 首先手册连接如下&#xff1a; Unity - Manual: Graphic Raycaster 笔记来源于&#xff…