当前位置: 首页 > news >正文

css+js 选项卡动画效果

选项卡上下左右翻转动画效果

<template><div class="web-box"><div class="topTitle"><div class="topTitle1">标题标题</div></div><div class="info-wrap"><div style="width: 100%;height: 100%;"><div class="system-list" v-if="navList.length>0"><el-carousel :loop="false" indicator-position="none" arrow="always" :autoplay="false"style="width: 100%;height: 100%;"><el-carousel-item class="nav-list-1" v-for="(item,index) in navList" :key="index"><div class="nav-item" :title="b.sysName" v-for="(b,i) in item" :key="i"><div class="change-box" v-if="b.hasAuth"><div class="picBox"><div class="show nav-item-content"><div class="nav-item-left"><img class="sysIcon" :src="imgBaseUrl+b.sysIcon"/></div><div class="nav-item-right"><div class="nav-item-name">{{b.sysName}}</div></div></div><div class="hide"><div class="hide-name">{{b.sysName}}</div><div class="hide-text" @click="clickNav(b)">立即进入 ></div></div></div></div><div class="picBox" v-else><div class="show nav-item-content gray"><div class="nav-item-left"><img class="sysIcon" :src="imgBaseUrl+b.sysIcon"/></div><div class="nav-item-right"><div class="nav-item-name">{{b.sysName}}</div></div></div></div></div></el-carousel-item></el-carousel></div><div class="system-list" v-else><el-empty :image-size="50" description="暂无数据"></el-empty></div></div></div></div>
</template><script>import Swiper from 'swiper'; // 注意引入的是Swiperimport 'swiper/css/swiper.min.css' // 注意这里的引入import $ from 'jquery';import { Index } from '@/components/Active/active'export default {name: "Index",data() {return {title: '',content: '',navList: [],navIndex: 0,nowList: [{hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},{hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},{hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},{hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},{hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},{hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},]};},// 监听属性 类似于data概念computed: {},created() {this.getConfigData();},methods: {//系统应用getConfigData() {let dataList = this.nowList;let nowList = [];let arr = [];//每18个一页,多余的进入下一个for (let i = 0; i < dataList.length; i++) {arr.push(dataList[i]);if (i % 18 === 17 || i === dataList.length - 1) {nowList.push(arr);arr = [];}}this.navList = nowList;setTimeout(() => {new Index($(".system-list .change-box"))this.mySystemSwiper()})},mySystemSwiper() {let mySystemSwiper = new Swiper('.system-list', {slidesPerView: 5,navigation: {nextEl: '.swiper-button-next', // 右按钮prevEl: '.swiper-button-prev', // 左按钮},})},},};
</script><style scoped lang="scss">@import '~@/components/Active/active.css';.web-box {width: 100%;height: calc(100vh - 50px);background: #f4f9ff;box-sizing: border-box;overflow: hidden;display: flex;justify-content: center;flex-wrap: wrap;.topTitle{width: 100%;height: 33vh;background-image: url("../assets/images/index/topbg.png");background-size: 100% 100%;display: flex;align-items: flex-end;justify-content: center;.topTitle1{width: 12.4vw;height: 4.23vh;text-align: center;line-height: 4.23vh;background-image: url("../assets/images/index/titleBg.png");background-size: 100% 100%;font-size: 1.66vh;letter-spacing: 0.09vw;color: #3c4b70;font-weight: bolder;}}.info-wrap {width: 83.07vw;height: 57vh;display: flex;flex-wrap: wrap;justify-content: space-between;background-color: #ffffff;border-radius: 1vh;box-shadow: -5px 5px 10px 0px rgba(86, 113, 207, 0.25);.system-list {margin-top: 2vh;width: 100%;height: calc(100% - 4.54vh);box-sizing: border-box;overflow: hidden;.el-carousel {padding: 0 3.5vw;}.nav-list-1 {width: 100%;height: 100%;display: flex;flex-wrap: wrap;align-content: start;padding-top: 3vh;.nav-item {width: 11.67vw;height: 11.04vh;margin:2vh 0.5vw;cursor: pointer;position: relative;.change-box, .picBox{width: 100%;height: 100%;}.nav-item-content{width: 100%;height: 100%;display: flex;align-items: center;padding: 0 0.5vw;background-size: 100% 100%;}.nav-item-left {width: 4vw;height: 4vw;display: flex;align-items: center;justify-content: center;.sysIcon {width: 3vw;height: 3vw;}}.gray{background-image: url("../assets/images/index/bg2.png") !important;.nav-item-left{filter: grayscale(95%);}.nav-item-right{color: #aeadad;}}.nav-item-right {width: 7vw;height: 100%;display: flex;flex-wrap: wrap;align-items: center;padding: 1vh 0.5vw 1vh 1vw;.nav-item-name {width: 5.5vw;font-size: 1.5vh;font-weight: bolder;}.nav-item-text {width: 4vw;height: 2vh;line-height: 2vh;text-align: center;cursor: pointer;background-color: rgba(255, 255, 255, 0.34);border-radius: 0.8vh;font-size: 1.2vh;}}&:nth-child(2n+1) .nav-item-content{color: #645b97;background-image: url("../assets/images/index/1.png");}&:nth-child(2n+2) .nav-item-content{color: #965c41;background-image: url("../assets/images/index/2.png");}&:nth-child(2n+3) .nav-item-content{color: #405f9a;background-image: url("../assets/images/index/3.png");}&:nth-child(2n+4) .nav-item-content{color: #a27a2d;background-image: url("../assets/images/index/4.png");}&:nth-child(2n+5) .nav-item-content{color: #257856;background-image: url("../assets/images/index/5.png");}&:nth-child(2n+6) .nav-item-content{color: #a27a2d;background-image: url("../assets/images/index/4.png");}&:nth-child(2n+7) .nav-item-content{color: #965c41;background-image: url("../assets/images/index/2.png");}&:nth-child(2n+8) .nav-item-content{color: #257856;background-image: url("../assets/images/index/5.png");}&:nth-child(2n+9) .nav-item-content{color: #645b97;background-image: url("../assets/images/index/1.png");}&:nth-child(2n+10) .nav-item-content{color: #405f9a;background-image: url("../assets/images/index/3.png");}&:nth-child(2n+11) .nav-item-content{color: #a27a2d;background-image: url("../assets/images/index/4.png");}&:nth-child(2n+12) .nav-item-content{color: #965c41;background-image: url("../assets/images/index/2.png");}&:nth-child(2n+13) .nav-item-content{color: #257856;background-image: url("../assets/images/index/5.png");}&:nth-child(2n+14) .nav-item-content{color: #645b97;background-image: url("../assets/images/index/1.png");}&:nth-child(2n+15) .nav-item-content{color: #405f9a;background-image: url("../assets/images/index/3.png");}&:nth-child(2n+16) .nav-item-content{color: #965c41;background-image: url("../assets/images/index/2.png");}&:nth-child(2n+17) .nav-item-content{color: #257856;background-image: url("../assets/images/index/5.png");}&:nth-child(2n+18) .nav-item-content{color: #645b97;background-image: url("../assets/images/index/1.png");}}}}}.swiper-button-prev {width: 2.86vw;height: 100%;background: #fff;left: 0;top: 0;margin: 0;color: #5e97ff;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;pointer-events: all !important;opacity: 1 !important;&:before {position: absolute;width: 0.94vw;height: 5.19vh;box-shadow: 0vh 0vh 0.37vh 0vh rgba(81, 103, 91, 0.4);border-radius: 0.37vh;font-size: 1.5vh;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}&.swiper-button-disabled:before {pointer-events: none !important;opacity: 0.4 !important;}&:after {content: "";}}.swiper-button-next {width: 2.86vw;height: 100%;background: #fff;right: 0;top: 0;margin: 0;color: #5e97ff;pointer-events: all !important;opacity: 1 !important;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;&.swiper-button-disabled:before {pointer-events: none !important;opacity: 0.4 !important;}&:before {position: absolute;width: 0.94vw;height: 5.19vh;box-shadow: 0vh 0vh 0.37vh 0vh rgba(81, 103, 91, 0.4);border-radius: 0.37vh;font-size: 1.5vh;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}&:after {content: "";}}.el-carousel::v-deep {.el-carousel__container {height: 100%;}.el-carousel__arrow {width: 28px;height: 72px;border-radius: 3px;background: #f0f2f5;color: rgba(94, 151, 255, 0.86);font-size: 24px;box-shadow: #DDD 0 2px 4px 1px;border: 1px solid #e5e8e7;&.el-carousel__arrow--left {left: -51px;i.el-icon-arrow-left:before {content: "\e792";}}&.el-carousel__arrow--right {right: -51px;i.el-icon-arrow-right:before {content: "\e791";}}}}}
</style>

components-Active文件夹:

1.active.css

.picBox{position: relative;transform-style: preserve-3d;transform-origin: 50% 50% -6vh;animation: 500ms ease-out 0ms 1 normal forwards;
}
.-left .picBox{position: relative;transform-style: preserve-3d;transform-origin: 50% 50% -6vw;animation: 500ms ease-out 0ms 1 normal forwards;
}
.-bottom .picBox{position: relative;transform-style: preserve-3d;transform-origin: 50% 50% -6vh;animation: 500ms ease-out 0ms 1 normal forwards;
}
.-right .picBox{position: relative;transform-style: preserve-3d;transform-origin: 50% 50% -6vw;animation: 500ms ease-out 0ms 1 normal forwards;
}.show,
.hide{position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;
}
.hide{color:#fff;/*background-color:#3c4b70;*/text-align:center;transform: translate3d(0,0,-1px);background-image: url("../../assets/images/index/bg1.png");background-repeat: no-repeat;background-size: 100% 100%;display: flex;flex-direction: column;justify-content: center;font-size: 1.6vh;font-weight: bolder;border-radius: 0.8vh;/* 3D空间内移动一个元素的位置 */
}
.hide .hide-name{}
.hide .hide-text{margin: 1vh auto 0;width: 4vw;height: 2vh;line-height: 2vh;text-align: center;cursor: pointer;background-color: rgba(255, 255, 255, 0.25);border-radius: 0.8vh;font-size: 1.2vh;
}.in-top .hide,
.out-top .hide
{transform-origin: 0% 100% !important;transform: translate3d(0, -100%, 0) rotate3d(1,0,0,90deg);
}
.in-top .picBox{animation-name: in-top;animation-play-state: running;
}
.out-top .picBox{animation-name: out-top;animation-play-state: running;
}
@keyframes in-top {from  {transform: rotate3d(0,0,0,0deg)}to    {transform: rotate3d(-1,0,0,90deg)}
}@keyframes out-top {from {transform: rotate3d(-1,0,0,90deg)}to   {transform: rotate3d(0,0,0,0deg)}
}
.in-right .hide,
.out-right .hide {transform-origin: 0% 0%;transform: translate3d(100%, 0, 0) rotate3d(0,1,0,90deg);
}
.in-right .picBox{animation-name: in-right;animation-play-state: running;
}
.out-right .picBox{animation-name: out-right;animation-play-state: running;
}
@keyframes in-right {from  {transform: rotate3d(0,0,0,0deg)}to    {transform: rotate3d(0,-1,0,90deg)}
}@keyframes out-right {from  {transform: rotate3d(0,-1,0,90deg)}to    {transform: rotate3d(0,0,0,0deg)}
}.in-bottom .hide,
.out-bottom .hide {transform-origin: 0% 0%;transform: translate3d(0, 100%, 0) rotate3d(-1,0,0,90deg);
}
.in-bottom .picBox{animation-name: in-bottom;animation-play-state: running;
}
.out-bottom .picBox{animation-name: out-bottom;animation-play-state: running;
}
@keyframes in-bottom {from  {transform: rotate3d(0,0,0,0deg)}to    {transform: rotate3d(1,0,0,90deg)}
}
@keyframes out-bottom {from  {transform: rotate3d(1,0,0,90deg)}to    {transform: rotate3d(0,0,0,0deg)}
}
.in-left .hide,
.out-left .hide {transform-origin: 100% 0;transform: translate3d(-100%,0,0) rotate3d(0,-1,0,90deg);
}
@keyframes in-left {from  {transform: rotate3d(0,0,0,0deg)}to    {transform: rotate3d(0,1,0,90deg)}
}
@keyframes out-left {from  {transform: rotate3d(0,1,0,90deg)}to    {transform: rotate3d(0,0,0,0deg)}
}
.in-left .picBox{animation-name: in-left;animation-play-state: running;
}
.out-left .picBox{animation-name: out-left;animation-play-state: running;
}

2.active.js

Index.prototype.init = function () {var self = this;this.nodes = [];Array.prototype.slice.call(self.node, 0).forEach(function (item, index) {self.nodes.push(self.update(item));self.bindEvents(item, index);});
};
Index.prototype.update = function (item) {return {w: item.offsetWidth,h: item.offsetHeight,l: item.offsetLeft,t: item.offsetTop}
};
Index.prototype.bindEvents = function (item, index) {var self = this;item.onmouseenter = function (e) {e.stopPropagation()self.addClass(e, item, 'in', index);return false;}item.onmouseleave = function (e) {self.addClass(e, item, 'out', index);return false;}
};
Index.prototype.addClass = function (e, item, state, index) {var direction = this.getDirection(e, index);var class_suffix = '';var class_durr = '';switch (direction) {case 0:class_suffix = '-top';break;case 1:class_suffix = '-right';break;case 2:class_suffix = '-bottom';break;case 3:class_suffix = '-left';break;}item.className = 'change-box';item.classList.add(class_suffix);item.classList.add(state + class_suffix);
};
Index.prototype.getDirection = function (e, index) {var w = this.nodes[index].w,h = this.nodes[index].h,x = Math.abs(e.offsetX) - w / 2 ,y = Math.abs(e.offsetY) - h / 2 ,w1 = Math.abs(e.offsetX),h1 = Math.abs(e.offsetY),w2 = w - Math.abs(e.offsetX),h2 = h - Math.abs(e.offsetY);// 取到x,y两点坐标let d = 0;if (x <= 0 && y <= 0 && w1 - h1 < 0){d = 3}else if (x <= 0 && y > 0){if (w1 - h2 <= 0){d = 3}else{d = 2}}else if (x > 0 && y <= 0){if (w2 - h1 >= 0){d = 0}else{d = 1}}else if (x > 0 && y > 0){if (w2 - h2 >= 0){d = 2}else{d = 1}}return d;//d的数值用于判断方向上下左右。
};
export function Index(node) {this.node = node;this.init();
}

相关文章:

css+js 选项卡动画效果

选项卡上下左右翻转动画效果 <template><div class"web-box"><div class"topTitle"><div class"topTitle1">标题标题</div></div><div class"info-wrap"><div style"width: 100%;h…...

[C错题本]转义字符/指针与首元素/运算

\a响铃 \b退格 \f换页 \r回车 \t水平制表 \v垂直制表 \单引号 \"双引号 \\反斜杠 \0dd八进制&#xff08;0-7&#xff09; \xdd(0-f)注意x一定不能大写 而且十六进制千万不能写\0xint main() {char s[]"ABCD", *p;for (p s 1; p < s 4; p)printf("%s…...

Layui继续学习

1、简单评论区代码&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>社区评论区</title> <link rel"stylesheet" href"https://cdn.staticfile.org/layui/2.6.8/css/…...

react+datav+echarts实现可视化数据大屏

&#x1f4d3;最近有点闲&#xff0c;就学习了下react&#xff0c;没想到就把react学完了&#xff0c;觉得还不错&#xff0c;就打算出一把reactdatav的简易版可视化数据大屏供大家做个参考。 &#x1f4d3;效果如下 1下载必要的框架 &#x1f4d3; react路由 npm install re…...

CSS新手入门笔记整理:CSS浮动布局

文档流概述 正常文档流 “文档流”指元素在页面中出现的先后顺序。正常文档流&#xff0c;又称为“普通文档流”或“普通流”&#xff0c;也就是W3C标准所说的“normal flow”。正常文档流&#xff0c;将一个页面从上到下分为一行一行&#xff0c;其中块元素独占一行&#xf…...

微服务组件Sentinel的学习(1)

Sentinel学习笔记&#xff08;1&#xff09; Sentinel基本概念Sentinel功能和设计理念流量控制熔断降级系统负载保护 Sentinel基本概念 资源 资源是Sentinel的关键概念。它可以是 ava应用程序中的任何内容&#xff0c;例如&#xff0c;由应用程序提供的服务&#xff0c;或由应…...

小程序 -网络请求post/get

1.1网络请求的概念(post和get) 1.2步骤 1.3 应用函数 js里面写&#xff0c;用bindtap绑在控件上&#xff0c;就不讲了 实例代码&#xff1a; //发起get数据请求get_info(){wx.request({url:https://www.escook.cn/api/get,//请求的接口地址,必须基于https协议//请求的方式met…...

Elasticsearch 8.10之前同义词最佳实践

1、同义词在搜索引擎领域用途 同义词在搜索引擎领域的用途可概括如下: 增强搜索的准确性——当用户输入一个关键词时,可能与他们实际意图相关的文档使用了一个不同的关键词或短语。同义词允许搜索引擎理解和识别这些情况,返回更准确的结果。如:“遥遥领先”和“华为Meta60…...

芯知识 | 什么是OTP语音芯片?唯创知音WTN6xxx系列:低成本智能语音解决方案

什么是OTP语音芯片&#xff1f; OTP&#xff0c;即一次性可编程&#xff08;One-Time Programmable&#xff09;&#xff0c;语音芯片是一类具有独特编程特性的嵌入式语音存储解决方案。与可重复擦写&#xff08;Flash型&#xff09;语音芯片不同&#xff0c;OTP语音芯片一经烧…...

Linux内核密钥环

Linux内核密钥环&#xff08;Linux Kernel Keyring&#xff09;是Linux内核中的一个机制&#xff0c;用于管理和存储各种类型的密钥和安全相关的数据。它是Linux内核提供的一种可编程的安全子系统&#xff0c;用于处理密钥的生成、存储、检索和删除等操作。 Linux内核密钥环的…...

web前端之正弦波浪动功能、repeat、calc

MENU 效果图htmlstylecalcrepeat 效果图 html <div class"grid"><span class"line"></span><span class"line"></span><span class"line"></span><span class"line"><…...

使用工具 NVM来管理不同版本的 Node.js启动vue项目

使用工具如 NVM&#xff08;Node Version Manager&#xff09;来管理不同版本的 Node.js。NVM 允许你在同一台计算机上安装和切换不同版本的 Node.js。以下是一些步骤&#xff0c;以便同时在你的系统中安装两个 Node.js 版本&#xff1a; 安装 NVM: 首先&#xff0c;你需要安装…...

Xcode编写基于C++的动态连接库(dylib)且用node-ffi-napi测试

创建一个dylib工程示例 在 Xcode 中创建一个动态链接库&#xff08;.dylib 文件&#xff09;的步骤如下&#xff1a; 打开 Xcode&#xff1a; 打开 Xcode 应用程序。 创建新的工程&#xff1a; 选择 "Create a new Xcode project"&#xff0c;或者使用菜单 File &g…...

WPF-UI HandyControl 简单介绍

文章目录 前言我的网易云专栏和Gitee仓库HandyControlHandyControl示例相关资源地址 我的运行环境快速开始和Material Design功能对比手风琴右键菜单自动补充滚动条轮播图消息通知步骤条托盘按钮 结尾 前言 最近我在研究如何使用WPF做一个比较完整的项目&#xff0c;然后我就先…...

golang学习笔记——数据结构进阶

文章目录 数据结构进阶mapmap示例sliceinterfaceembedded 数据结构进阶 常见数据结构实现原理 本章主要介绍常见的数据结构&#xff0c;比如channel、slice、map等&#xff0c;通过对其底层实现原理的分析&#xff0c;来加深认识&#xff0c;以此避免一些使用过程中的误区。 …...

TrustZone之总线请求

接下来&#xff0c;我们将查看系统中的总线请求者&#xff0c;如下图所示&#xff1a; 系统中的A型处理器具有TrustZone感知&#xff0c;并在每个总线访问中发送正确的安全状态。然而&#xff0c;大多数现代SoC还包含非处理器总线请求者&#xff0c;例如GPU和DMA控制器。 与完成…...

vue2+Echarts数据可视化 【帕累托图】

接口得到的数据如下 要经过排序 &#xff0c;计算累计百分比得到数据 蓝色 柱状图数据&#xff1a; 取count字段值 横坐标&#xff1a;取 id值 折线图&#xff1a;根据柱状图的数据计算累计百分比 getInterface(data) {getParetoChart(data).then((res) > {if (res) {thi…...

imazing 2.17.16中文版怎么备份iPhone手机照片

imazing 2.17.16中文版备份功能非常强大&#xff0c;在进行备份之前&#xff0c;需要对其进行设置&#xff0c;才能充分使用备份功能。当移动设备与电脑第一次连接成功后&#xff0c;会询问是否要立即备份&#xff0c;个人的建议是选择“稍后”&#xff0c;小伙伴可以先对软件进…...

05 python数据容器

5.1 数据容器认识 5.2 python列表 5.2.1 列表的定义 演示数据容器之&#xff1a;list 语法&#xff1a;[元素&#xff0c;元素&#xff0c;....] #定义一个列表List List [itheima,uityu,gsdfg] List1 [itheima,6666,True] print(List) print(List1) print(type(List)) pr…...

相机倾斜棋盘格标定全记录 vs200+opencv安装

论文参考是这个 Geiger A, Moosmann F, Car , et al. Automatic camera and range sensor calibration using a single shot[C]//Robotics and Automation (ICRA), 2012 IEEE International Conference on. IEEE, 2012: 3936-3943. 代码是这个github 花了一上午配好了c环境。。…...

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

GitFlow 工作模式(详解)

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

麒麟系统使用-进行.NET开发

文章目录 前言一、搭建dotnet环境1.获取相关资源2.配置dotnet 二、使用dotnet三、其他说明总结 前言 麒麟系统的内核是基于linux的&#xff0c;如果需要进行.NET开发&#xff0c;则需要安装特定的应用。由于NET Framework 是仅适用于 Windows 版本的 .NET&#xff0c;所以要进…...

【1】跨越技术栈鸿沟:字节跳动开源TRAE AI编程IDE的实战体验

2024年初&#xff0c;人工智能编程工具领域发生了一次静默的变革。当字节跳动宣布退出其TRAE项目&#xff08;一款融合大型语言模型能力的云端AI编程IDE&#xff09;时&#xff0c;技术社区曾短暂叹息。然而这一退场并非终点——通过开源社区的接力&#xff0c;TRAE在WayToAGI等…...