css扇形菜单动画效果

 菜单组件 IntelligentAnalysis.vue

中间圆形区域可以换个图片

<template><div class="intel-analysis"><div class="info" :class="{ 'close-animation': !showMenu }"><div class="middle"></div><div class="text-info"><div v-for="(item, index) in list" :key="index"><div :class="`item ${item.type === currentType ? 'active' : ''}`":style="{ rotate: `${item.rotate}deg`, left: item.left, top: item.top, }" @click="handleClick(item, index)"><div style="width: 10px;height: 11px;"><div :class="`${item.type === currentType && list2.length > 0 ? 'triangle' : ''}`"></div></div><div class="text">{{ item.text }}</div><div class="icon"><img :src="item.icon" alt=""></div></div></div></div></div><div class="info-sec-bg"></div><div class="info-sec" ref="infoSecRef"><div v-for="(item, index) in list2" :key="index"><div :class="`citem ${item.type === currentType2 ? 'active' : ''}`":style="{ rotate: `${item.rotate}deg`, left: item.left, top: item.top, }" @click="handleClick2(item, index)"><div class="text">{{ item.text }}</div></div></div></div></div>
</template><script>
import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
import temp from '@/assets/imgs/supervisionGIS/temp.png'export default defineComponent({name: 'IntelligentAnalysis',components: {},props: {showMenu: {type: Boolean,default: false}},emits: ['showMenu'],setup(props, { emit }) {const state = reactive({show: false,list: [{type: 'eng',icon: temp,text: '节能效果',// rotate: '8deg',},{type: 'ctrl',icon: temp,text: '节能效果',// rotate: '-11deg',},{type: 'engZhenduan',icon: temp,text: '节能效果',// rotate: '-33deg',},{type: 'secondNet',icon: temp,text: '节能效果',// rotate: '-56deg',},{type: 'comcell',icon: temp,text: '节能效果',// rotate: '-90deg',},// {//   type: 'comcell',//   icon: temp,//   text: '投诉re区',//   rotate: '-90deg',// }],list2: [{type: 'eng2',icon: temp,text: '节能效果',// rotate: '8deg',},{type: 'ctrl2',icon: temp,text: '节能效果',// rotate: '-11deg',},{type: 'engZhenduan2',icon: temp,text: '节能效果',// rotate: '-33deg',},{type: 'engZhenduan2',icon: temp,text: '节能效果',// rotate: '-33deg',},// {//   type: 'engZhenduan2',//   icon: temp,//   text: '能耗诊治',//   // rotate: '-33deg',// },// {//   type: 'engZhenduan2',//   icon: temp,//   text: '能耗诊治',//   // rotate: '-33deg',// },// {//   type: 'engZhenduan2',//   icon: temp,//   text: '能耗诊治',//   // rotate: '-33deg',// },// {//   type: 'engZhenduan2',//   icon: temp,//   text: '能耗诊治',//   // rotate: '-33deg',// },// {//   type: 'engZhenduan2',//   icon: temp,//   text: '能耗诊治',//   // rotate: '-33deg',// },],currentType: '',currentType2: '',infoSecRef: null,})const methods = {// 点击具体内容handleClick(item, index) {state.currentType = item.typelet domSec = document.querySelector('.info-sec')let domBg = document.querySelector('.info-sec-bg')domSec.style.display = 'block'if (state.list2.length > 0) {domBg.style.display = 'block'}// 二级菜单扇形switch (state.list2.length) {case 1:domSec.style.clipPath = 'polygon(50% 50%, 0% 42%, 0% 51%)'break;case 2:domSec.style.clipPath = 'polygon(50% 50%, 0% 41%, 0% 60%)'break;case 3:domSec.style.clipPath = 'polygon(50% 50%, 0% 41%, 0% 70%)'break;case 4:domSec.style.clipPath = 'polygon(50% 50%, 0% 41%, 0% 82%)'break;case 5:domSec.style.clipPath = 'polygon(50% 50%, 0% 41%, 0% 96%)'break;case 6:domSec.style.clipPath = 'polygon(50% 50%, 0% 41%, 0% 116%)'break;case 7:domSec.style.clipPath = 'polygon(50% 50%, 0% 41%, 0% 148%)'break;case 8:domSec.style.clipPath = 'polygon(50% 50%, 0% 41%, 0% 215%)'break;case 9:domSec.style.clipPath = 'polygon(50% 50%, 0% 41%, 0% 484%)'break;default:break;}if (state.list2.length !== 1) {// 计算二级菜单度数的一半const num = -(((state.list2.length - 1) * 10) / 2)if (index === 0) {// 点第一个一级菜单时，二级菜单角度不变domSec.style.rotate = `${item.rotate - 3}deg`} else if (index === state.list.length - 1 && state.list.length > 1) {// 点最后一个一级菜单时，二级菜单角度要往回拉全部度数domSec.style.rotate = `${item.rotate - (2 * num) + 5}deg`} else {if (state.list2.length < 7) {// 点中间的一级菜单时，二级菜单角度要往回拉全部度数的一半domSec.style.rotate = `${item.rotate - num}deg`} else {if (index === 1) {domSec.style.rotate = `${item.rotate - num - (15)}deg`} else if (index === state.list.length - 2) {domSec.style.rotate = `${item.rotate - num - (-20)}deg`} else {domSec.style.rotate = `${item.rotate - num}deg`}}}} else {// 二级菜单只有一个时，旋转一级菜单的角度domSec.style.rotate = `${item.rotate}deg`}domSec.style.transition = '0.5s'// emit('pageTypeChange', item)},handleClick2(item) {state.currentType2 = item.typeemit('getCurMenu', item)},}watch(() => props.showMenu, () => {console.log(props.showMenu, '---props.showMenu--');if (!props.showMenu) {state.currentType = ''state.currentType2 = ''state.infoSecRef.style.display = 'none'}})onMounted(() => {state.list.forEach((item, index) => {const length = state.list.length// item.rotate = `-${(120 / length * index)}`item.rotate = `-${((100 / (length - 1)) * index)}`if (index === length - 1) {item.rotate = -100}if (index === 0) {item.rotate = 0}console.log(item.rotate, '--margin-left--');})state.list2.forEach((item, index) => {const length = state.list2.lengthif (index === 0) {item.rotate = 0} else {item.rotate = -(10 * index)}console.log(item.rotate, '--item.rotate--');})})return {...toRefs(state),...methods,}}
})
</script><style scoped lang="less">
.intel-analysis {.info {width: 320px;height: 320px;border-radius: 50%;// width: 206px;// height: 206px;// border-radius: 0 0 0 206px;background: linear-gradient(160deg, rgba(3, 46, 116, 0) 0%, #032E74 22%, rgba(3, 46, 116, 0.99) 52%, #032E74 80%, rgba(3, 46, 116, 0) 100%);position: relative;display: flex;justify-content: center;align-items: center;z-index: 3;animation: show 0.5s;.middle {width: 80px;height: 80px;background-color: var(--gdky-layout-bg);border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);cursor: pointer;}}.item {display: flex;align-items: center;font-size: 14px;color: var(--gdky-second-content-color);padding-right: 55px;margin-bottom: 16px;cursor: pointer;position: absolute;left: -5%;/* 居中 */top: 44%;/* 居中 */transform: translate(7%, -50%);// /* 居中 */transform-origin: center right;z-index: 4;&:hover {color: #3C74CF;}&.active {font-weight: 600;color: #3C74CF;}.text {margin-left: 18px;}.triangle {width: 0;height: 0;border-left: 5px solid transparent;/* 左边 */border-right: 5px solid transparent;/* 右边 */border-bottom: 10px solid #ffcc00;/* 底边，根据等边三角形计算得到 */transform: rotate(-90deg);}.icon {display: flex;align-items: center;justify-content: center;width: 28px;height: 28px;margin-left: 16px;background: linear-gradient(293deg, #032E74 0%, #001941 100%);border-radius: 50%;border: 1px solid #032E74;}}// 二级菜单.info-sec {display: none;width: 540px;height: 540px;border-radius: 50%;clip-path: polygon(50% 50%, 0% 42%, 0% 51%);background: linear-gradient(160deg, rgba(3, 46, 116, 0) 0%, #032E74 22%, rgba(3, 46, 116, 0.99) 52%, #032E74 80%, rgba(3, 46, 116, 0) 100%);position: absolute;top: -110px;right: -110px;z-index: 0;animation: show 0.5s;.citem {display: flex;// justify-content: center;align-items: center;font-size: 14px;color: var(--gdky-second-content-color);padding-right: 112px;margin-bottom: 16px;cursor: pointer;position: absolute;left: 20%;/* 居中 */top: 47%;/* 居中 */transform: translate(-50%, -50%);// /* 居中 */transform-origin: center right;&:hover {color: #3C74CF;}&.active {font-weight: 600;color: #3C74CF;}}}// 一级菜单和二级菜单中间的背景 .info-sec-bg {display: none;width: 340px;height: 340px;border-radius: 50%;background: var(--gdky-layout-bg);position: absolute;top: -10px;right: -10px;z-index: 1;animation: show 0.5s;}.close-animation {animation: close 0.5s;}@keyframes show {0% {transform: rotate(120deg) scale(0);}100% {transform: rotate(0deg) scale(1);}}@keyframes close {0% {transform: rotate(0deg) scale(1);}100% {transform: rotate(120deg) scale(0);}}}
</style>

 index.vue引用菜单组件 IntelligentAnalysis.vue

<template><div class="page--wrap"><!-- 菜单。右上 --><div class="right-intel-analysis"><div class="center" @click="handleMenu"><!-- 可以放一个图形进来 --><!-- <div class="robot"></div> --></div><transition name="menu"><IntelligentAnalysis class="menu" :showMenu="showMenu" v-show="showMenu" @getCurMenu="getCurMenu" /></transition></div></div>
</template><script>
import { defineComponent, reactive, toRefs, computed, onMounted, provide, ref, watch, getCurrentInstance } from "vue";
import Map from './MapComponents/Map.vue'
import { useAppStore } from '@/store/modules/app'
import { useStore } from '@/store/modules/Supervision/index'
import { GetApiData } from '@/api/Supervision/index.js'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'import IntelligentAnalysis from './Components/IntelligentAnalysis.vue'export default defineComponent({name: '470543',components: {IntelligentAnalysis,},setup() {const vm = getCurrentInstance();const appStore = useAppStore()const modulesStore = useStore()const router = useRouter()const state = reactive({showMenu: false,curMeu: {}, // 当前选中的菜单});onMounted(() => {})const methods = {// 点击右上角菜单handleMenu() {state.showMenu = !state.showMenuif (!state.showMenu) {state.curMeu = '' // 清空选中的菜单}},// 获取当前选中的菜单getCurMenu(item) {state.curMeu = item}}return {...toRefs(state),...methods,};}
});
</script><style lang="less" scoped>
.page--wrap {position: relative;height: 100%;width: 100%;display: flex;flex-direction: row;.right-intel-analysis {.center {width: 60px;height: 60px;background: var(--gdky-overlay-bg);border-radius: 50%;position: absolute;top: 2%;right: 1%;cursor: pointer;z-index: 100;display: flex;align-items: center;justify-content: center;.robot {// z-index: 5;width: 35px;    // 200* 5000    25帧height: 35px;background-image: url(./assets/analysis-robot.png);background-repeat:no-repeat;background-position:0 0;background-size: 35px 875px;animation: robot-dy 2s steps(25) infinite;}@keyframes robot-dy{  0%{ background-position:0 0;}  100%{ background-position: 0 -875px;}}}.menu {position: absolute;right: -110px;top: -110px;}.menu-enter-active, .menu-leave-active {transition: transform 0.5s;}.menu-enter, .menu-leave-to {transform: scale(0);}} 
}
</style>

 

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【工具使用】搜狗输入法如何输入希腊字母等特殊字符

【工具使用】搜狗输入法如何输入希腊字母等特殊字符

步骤&#xff1a; 1&#xff0c;点击悬浮框的输入方式&#xff0c;选择“符号大全”&#xff1a; 2&#xff0c;根据自己需要选择对应的符号即可&#xff1a;
阅读更多...
Power BI实现动态度量值

Power BI实现动态度量值

假设有一张销售数据表Sale: 报表上有一个切片器(Slicer)(下拉框样式)&#xff0c; 当选择"第一"时&#xff0c;计算列[FirstSale]与列[Target]的百分比&#xff0c; 选择"第二"时&#xff0c;计算列[SecondSale]与列[Target]的百分比 选择"第三&qu…
阅读更多...
Spring Cloud 框架的应用详解

Spring Cloud 框架的应用详解

Spring Cloud 框架的应用详解 Spring Cloud 是一个基于 Spring Boot 的微服务架构开发工具&#xff0c;它提供了一系列工具用于快速构建分布式系统中的常见模式&#xff0c;如配置管理、服务发现、断路器、智能路由、微代理、控制总线、全局锁、选举、分布式会话和集群状态管理…
阅读更多...
如何看待知乎入局 「AI整合商」 赛道

如何看待知乎入局 「AI整合商」 赛道

引言 在人工智能&#xff08;AI&#xff09;快速发展的格局中&#xff0c;公司不断探索利用 AI 的变革潜力的策略。知乎&#xff0c;一家领先的中国问答平台&#xff0c;最近宣布进军“人工智能集成商”领域。这一战略举措涉及与领先的人工智能模型团队合作&#xff0c;并开发专…
阅读更多...
3d数字化虚拟交互展厅让您紧跟时代的步伐

3d数字化虚拟交互展厅让您紧跟时代的步伐

虚实融合打破边界&#xff0c;北京VR虚拟数字展厅搭建让体验者彷如置身于一部三维电影中&#xff0c;可以对场景中的物体、角色、模型进行自由参观和体验&#xff0c;并且系统支持随时更新&#xff0c;让您紧跟时代的步伐&#xff0c;领略更新的展览风采。 除了常见的科普培训&…
阅读更多...
浅谈mysql中的null - 能不能用索引

浅谈mysql中的null - 能不能用索引

浅谈mysql中的null - 能不能用索引 照旧&#xff0c;在开始前&#xff0c;先附上本次试验的ddl, 然后插入数据&#xff0c;随机抽取几条幸运数据的name设为null CREATE TABLE user (id int NOT NULL COMMENT id,name varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin…
阅读更多...
docker- 购建服务镜像并启动

docker- 购建服务镜像并启动

文章目录 前言docker- 购建服务镜像并启动1. 前期准备2. 构建镜像3. 运行容器4. 验证 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&#xff0c;实…
阅读更多...
软考中级嵌入式系统设计师知识点

软考中级嵌入式系统设计师知识点

主要介绍一些软考中级嵌入式系统设计师涉及到的一些考点。 文章目录 前言 一、嵌入式系统设计师 二、知识点 总结 前言 主要介绍一些软考中级嵌入式系统设计师涉及到的一些考点。 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、嵌入式系统设计师 …
阅读更多...
宝塔面包安装搭建Flarum开源论坛程序 文档教程

宝塔面包安装搭建Flarum开源论坛程序 文档教程

一、服务器环境说明 宝塔 7.0.3 或更新版本 Linux Server&#xff08;本文用的是 CentOs 7.4.6 64位&#xff09; Apache 或者 Nginx&#xff08;本文用的是 Nginx 1.16.0&#xff09; MySQL 5.6&#xff08;本文使用 MySQL 5.7&#xff0c;原因请看下方引用&#xff09; PHP 7…
阅读更多...
IPFS矿机托管使用普通专线跟IDC机房托管对比分析

IPFS矿机托管使用普通专线跟IDC机房托管对比分析

IPFS矿机托管使用普通专线跟IDC机房托管对比分析 1 、可靠性高&#xff0c;灵活性好 选择多路由网络稳定&#xff0c;安全性能更高。重要网络设备采用双机备份 2、提供365天全天候运营服务 如果在idc机房进行托管服务器的话&#xff0c;出现服务器遭受攻击数据丢失以及系统…
阅读更多...
Java如果系统要使用超大整数（超过long长度范围）请设计一个数据结构来存储这种超大型数字以及设计一种算法来实现超大整数加法运算）

Java如果系统要使用超大整数（超过long长度范围）请设计一个数据结构来存储这种超大型数字以及设计一种算法来实现超大整数加法运算）

要设计一个数据结构来存储超过long长度范围的超大整数&#xff08;也称为大数或高精度数&#xff09;&#xff0c;我们可以使用数组来模拟多位数的表示。通常&#xff0c;我们会选择一个固定大小的整数类型&#xff08;如int或short&#xff09;来作为数组的每个元素&#xff0…
阅读更多...
产品经理交接规范及流程

产品经理交接规范及流程

一、交接内容 1.1产品整体情况 交接人员需了解产品的整体情况&#xff0c;包括产品的定位、目标用户、主要功能、特点等。 1.2产品文档交接 交接人员需确保所有关于产品的文档的完整性和准确性&#xff0c;包括产品需求文档&#xff08;PRD&#xff09;、产品原型、交互文档…
阅读更多...
音视频--音频实时传输

音视频--音频实时传输

1. 音频质量提升 实时音频的传输中为了提升音频质量&#xff0c;一般要对音频做特殊处理&#xff1a;降噪、回声消除、自动增益&#xff08;3A算法&#xff09;。通过编解码器自身的的算法特性可以实现上述内容。但是也有专门的库来帮助实现对音频质量的提升。speexdsp库可以对…
阅读更多...
项目集成SkyWalking，基于k8s搭建

项目集成SkyWalking，基于k8s搭建

一、搭建SkyWalking 官方文档&#xff08;英文&#xff09;&#xff1a;skywalking/docs at master apache/skywalking 中文可以使用&#xff1a;GitHub - SkyAPM/document-cn-translation-of-skywalking: [已过期,请使用官网AI文档] The CN translation version of Apache…
阅读更多...
使用 Python 发送 TRON-USDT 和 TRX 交易

使用 Python 发送 TRON-USDT 和 TRX 交易

文章目录 一、前提准备1.1 环境设置1.2 获取钱包地址和私钥二、发送USDT（TRC-20）交易2.1 流程2.2 USDT交易脚本三、发送TRX交易3.1 流程3.2 TRX交易脚本四、注意事项4.1 注意事项4.2 改进后的USDT和TRX交易脚本本文档介绍如何使用Python和tronpy库发送TRON网络上的USDT（TRC-…
阅读更多...
Python SSL root certificates

Python SSL root certificates

Python3.12安装好之后&#xff0c;pip仍然指向旧的3.11版本&#xff1a; ~ % pip --version pip 23.3.1 from /Library/Frameworks/Python.framework/Versions/3.11/lib/python3.11/site-packages/pip (python 3.11) 需要删除旧的3.11路径 &#xff08;MAC 版本&#x…
阅读更多...
解决脚本刷服务器导致卡顿宕机的问题

解决脚本刷服务器导致卡顿宕机的问题

在互联网服务领域&#xff0c;自动化脚本的不当使用或恶意攻击可能会导致服务器资源被过度消耗&#xff0c;从而引发服务响应缓慢甚至系统崩溃。特别是在电商、游戏、社交平台等领域&#xff0c;这种现象尤为常见。本文将深入探讨脚本刷服的常见形式、其对服务器性能的影响&…
阅读更多...
在Spring Boot项目中集成和使用MQTT

在Spring Boot项目中集成和使用MQTT

在物联网&#xff08;IoT&#xff09;应用中&#xff0c;MQTT&#xff08;消息队列遥测传输&#xff09;协议因其轻量级和高效性被广泛使用。在Spring Boot项目中&#xff0c;我们可以通过集成org.springframework.integration:spring-integration-mqtt依赖来实现对MQTT的支持。…
阅读更多...
Android 日志等级设置

Android 日志等级设置

一、LOG等级设置 1、Java设置 系统Log等级 public static final String LOG_CMD_TAG = "persist.log.tag";public static void setSystemLogLevel(String level) {Log.d(TAG, "setSystemLogLevel: " + level);SystemProperties.set(LOG_CMD_TAG, level)…
阅读更多...
计算机专业实习生应该去哪实习？

计算机专业实习生应该去哪实习？

计算机专业实习生可以选择在各种不同类型的公司和组织中实习。我这里有一套编程入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习编程&#xff0c;不妨点个关注&#xff0c;给个评论222&#xff0c;私信22&#xff0c;我在后台发给你。 这取…
阅读更多...
最新文章

Copyright @ 2022~2023