iSharkFly-Open/Sa-Token
1
0
Fork 0
mirror of synced 2026-05-22 14:43:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: 文档主题切换增加水滴特效

Browse Source
This commit is contained in:
click33
2025-12-24 23:31:40 +08:00
parent f4fa77edd0
commit 74db9e997e
5 changed files with 282 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sa-token-doc/doc.html
+94 -141
View File
@@ -4,9 +4,11 @@
<meta charset="UTF-8">
<title>Sa-Token</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Sa-Token是一个java权限认证框架，功能全面，上手简单，登录认证、权限认证、Session会话、踢人下线、账号封禁、集成Redis、前后端分离、分布式会话、微服务网关鉴权、单点登录、OAuth2.0、临时Token验证、记住我模式、模拟他人账号、临时身份切换、多账号体系、注解式鉴权、路由拦截式鉴权、花式token、自动续签、同端互斥登录、会话治理、密码加密、jwt集成、Spring集成、WebFlux集成...，有了sa-token，你所有的权限认证问题，都不再是问题">
<meta name="description"
content="Sa-Token是一个java权限认证框架，功能全面，上手简单，登录认证、权限认证、Session会话、踢人下线、账号封禁、集成Redis、前后端分离、分布式会话、微服务网关鉴权、单点登录、OAuth2.0、临时Token验证、记住我模式、模拟他人账号、临时身份切换、多账号体系、注解式鉴权、路由拦截式鉴权、花式token、自动续签、同端互斥登录、会话治理、密码加密、jwt集成、Spring集成、WebFlux集成...，有了sa-token，你所有的权限认证问题，都不再是问题">
<meta name="keywords" content="sa-token,sa-token框架,sa-token文档,java权限认证">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="logo.png">
<link rel="stylesheet" href="./static/doc.css">
<link rel="stylesheet" href="./static/vue.css">
@@ -23,7 +25,7 @@
</a>
</div>
<nav class="nav-right">
<div class="sear-box p-none" tabindex="-1" >
<div class="sear-box p-none" tabindex="-1">
<!-- 加载中…… -->
</div>
<select class="select-version p-none" onchange="location.href=this.value">
@@ -89,13 +91,13 @@
<span style="background-color: #F1FAFA;"></span>
<span style="background-color: #f5f5d5;"></span>
<span style="background-color: #d5f5f5;"></span>
<span style="background-color: #f5e5f5;"></span>
<span style="background-color: #E8E8FF;"></span>
<span style="background-color: #f0f9eb;"></span>
<span style="background-color: #ebe5dd;"></span>
<span style="background-color: #e8f4ff;"></span>
<!-- <span style="background-color: #F0DAD2;"></span> -->
<!-- <span style="background-color: #f5d5d5;"></span> -->
<!-- <span style="background-color: #FFFFE0;"></span> -->
@@ -104,7 +106,8 @@
</div>
</div>
</div>
<a class="p-none wzi" href="https://gitee.com/activity/2025opensource?ident=IGPG3R" target="_blank" style="color: red;">❤️ 投票支持 ❤️</a>
<a class="p-none wzi" href="https://gitee.com/activity/2025opensource?ident=IGPG3R" target="_blank"
style="color: red;">❤️ 投票支持 ❤️</a>
<a class="wzi" href="index.html">首页</a>
<a class="wzi" href="doc.html">文档</a>
<div class="zk-box">
@@ -121,7 +124,7 @@
<a href="https://www.bilibili.com/video/BV1Zt421u7gk/" target="_blank">王清江唷（99集）</a>
<a href="https://www.bilibili.com/video/BV1kG411o7Ms/" target="_blank">筑梦信仰-joy（20集）</a>
<a href="https://www.bilibili.com/video/BV11u4y197JL/" target="_blank">达达-Java（26集）</a>
<a href="https://space.bilibili.com/473679148/video" target="_blank">晒太阳的盐（22集）</a>
<a href="https://space.bilibili.com/473679148/video" target="_blank">晒太阳的盐（22集）</a>
<div class="zk-fengexian"></div>
<a href="javascript: layer.alert('如您有 Sa-Token 相关课程录制，请联系官网文档右侧 < sa-token 小助手 > 进行提交');">
[ + 课程提交 ]
@@ -164,24 +167,24 @@
<h1 class="logo-text">Sa-Token</h1>
</div>
</a> -->
<div class="main-box">
<!-- 内容区 -->
<div id="app">加载中...</div>
<!-- 右边盒子 -->
<div class="doc-right-bj-box">
<div class="doc-right-bj-box-title">目录</div>
<div class="doc-right-more-item">
<!-- ad盒子 -->
<div class="ad-box">
<div class="ad-title">
<span class="ad-tips">推广信息：</span>
<span class="ad-tips ad-close">关闭</span>
</div>
<!-- ssp -->
<div class="top-ad-box" style="margin-bottom: 12px;">
<a href="https://sa-pro.yun94.cn?way=st_r" target="_blank">
@@ -195,10 +198,11 @@
</div>
</a>
</div>
<!-- 万维广告div -->
<div class="wwads-cn wwads-horizontal" data-id="88" style="min-height: 0px; border: 1px #eee solid; margin-bottom: 12px;"></div>
<div class="wwads-cn wwads-horizontal" data-id="88"
style="min-height: 0px; border: 1px #eee solid; margin-bottom: 12px;"></div>
<!-- 编程导航 & 面试鸭 -->
<!-- <div class="top-ad-box top-ad-box2" style="margin-bottom: 12px;">
<a href="https://www.codefather.cn/vip?shareCode=qin883" target="_blank">
@@ -208,9 +212,9 @@
<img src="https://oss.dev33.cn/sa-token/ad/mianshiya.png" style="height: 26px;" />
</a>
</div> -->
</div>
<!-- help 按钮 -->
<div class="help-btn">❤️ 技术求助</div>
<!-- ew-wa -->
@@ -225,16 +229,16 @@
<p>如果 Sa-Token 帮助到了你，希望你可以向同事、朋友推荐了解本框架，这对我们非常重要，感谢支持！ <!-- 🤗 --> </p>
<p>加油，工程师！</p>
</div>
</div>
</div>
</div>
<!-- 万维广告div -->
<!-- <div style="position: fixed; right: 0; bottom: 0; z-index: 10000; border: 0px #aaa solid;">
<div class="wwads-cn wwads-vertical" data-id="88" style="max-width:150px"></div>
</div> -->
<!-- 小助手div -->
<!-- <div class="p-none help-btn-box" style="position: fixed; right: 40px; bottom: 330px; z-index: 10000; border: 0px #aaa solid;">
<div class="help-tips" style="position: relative; left: -30px; top: -10px;"></div>
@@ -242,28 +246,32 @@
<span style="font-size: 18px; color: #FFF; line-height: 60px;">Help</span>
</div>
</div> -->
<!-- UI逐渐显现 -->
<style type="text/css">
body{opacity: 0.01; transition: opacity 0.5s; background-color: #FFF;}
body {
opacity: 0.01;
transition: opacity 0.5s;
background-color: #FFF;
}
</style>
<script type="text/javascript">
setTimeout(function() {
document.body.style.opacity = 1;
}, 1);
</script>
<!-- jqeury -->
<script src="static/jquery.min.js"></script>
<script src="static/layer-v3.1.1/layer.js"></script>
<!-- -->
<script src="./static/docsify-plugin.js?v=7"></script>
<script src="./static/is-star-plugin.js?v=7"></script>
<script src="./static/is-fill-in-wj-plugin.js?v=7"></script>
<script>
var saTokenTopVersion = '1.44.0'; // Sa-Token最新版本
var saTokenTopVersion = '1.44.0'; // Sa-Token最新版本
var name = '<img style="width: 60px; height: 60px; vertical-align: middle;" src="logo.png" alt="logo" /> ';
name += '<b style="font-size: 28px; vertical-align: middle;">Sa-Token</b> <sub>v' + saTokenTopVersion + '</sub>';
window.$docsify = {
@@ -290,11 +298,11 @@
},
// tab选项卡
tabs: {
persist : true, // 是否在刷新页面时重置选项卡
sync : false, // 页面上的多个tab是否同步切换
theme : 'classic', // 主题：'classic', 'material', false
tabComments: true, // 用注释来标注选项卡标题，例如：<!-- tab:SpringBoot -->
tabHeadings: true // 用标题+粗体来定制选项卡
persist: true, // 是否在刷新页面时重置选项卡
sync: false, // 页面上的多个tab是否同步切换
theme: 'classic', // 主题：'classic', 'material', false
tabComments: true, // 用注释来标注选项卡标题，例如：<!-- tab:SpringBoot -->
tabHeadings: true // 用标题+粗体来定制选项卡
},
// 阅读进度
progress: {
@@ -304,7 +312,7 @@
},
// 信息提示框
'flexible-alerts': {
style: 'flat', // 默认风格 callout=浅色，flat=深色
style: 'flat', // 默认风格 callout=浅色，flat=深色
note: {
label: {}
},
@@ -324,19 +332,19 @@
</script>
<script src="static/docsify.min.js"></script>
<script src="static/docsify-copy-code.min.js"></script>
<!-- 语言合集：https://cdn.jsdelivr.net/npm/prismjs@1/components/ -->
<script src="static/prism/prism-java.min.js"></script>
<script src="static/prism/prism-gradle.min.js"></script>
<script src="static/prism/prism-yaml.min.js"></script>
<script src="static/prism/prism-properties.min.js"></script>
<!-- 文档阅读进度条 -->
<!-- <script src="static/docsify-plugins/progress.update.js"></script> -->
<!-- 右上角次级导航栏 -->
<script src="static/docsify-plugins/sub-nav-draw.js"></script>
<!-- 搜索框 -->
<script src="static/search.min.js"></script>
<!-- 多 tab 切换 -->
@@ -345,7 +353,7 @@
<script src="static/zoom-image.min.js"></script>
<!-- 好看的提示框 -->
<script src="static/docsify-plugins/docsify-plugin-flexible-alerts.min-1.1.1.js"></script>
<!-- docsify 里一个 md 引入另一个 md-->
<script src="static/docsify-plugins/docsify-betterembed-1.1.1.js"></script>
@@ -353,41 +361,41 @@
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar.min.css" />
<script src="https://cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script> -->
<!-- 渲染赞助数据 -->
<script src="static/donate/donate-list.js"></script>
<script src="static/donate/donate-fun.js"></script>
<!-- 广告盒子 -->
<script>
(function(){
(function() {
// 功能6：标题下面的广告
if($(window).width() >= 800) {
if ($(window).width() >= 800) {
// 如果一天内用户点击过关闭广告，则不再展现
let allowJg = 1000 * 60 * 60 * 24 * 1;
// allowJg = 1000 * 10;
try{
try {
const closeAdTime = localStorage.closeAdTime;
if(closeAdTime) {
if (closeAdTime) {
// 点击广告关闭的时间，和当前时间的差距
const closeAdJg = new Date().getTime() - parseInt(closeAdTime);
// 差距小于1天，不再展示
if(closeAdJg < allowJg) {
if (closeAdJg < allowJg) {
console.log('not show ad ...');
$('.ad-box').remove();
return;
}
}
}catch(e){
} catch (e) {
console.error(e);
}
// 添加关闭事件
$('.ad-close').click(function(){
$('.ad-close').click(function() {
console.log('关闭广告');
// $('.top-ad-box').slideUp(); // 折叠收起
layer.confirm('关闭后，一天内不再展现此信息', function(){
layer.confirm('关闭后，一天内不再展现此信息', function() {
$(".ad-box").fadeOut(1000); // 淡出效果
layer.msg('关闭成功');
localStorage.closeAdTime = new Date().getTime();
@@ -396,7 +404,7 @@
}
})();
</script>
<!-- 搜索引擎自动提交 -->
<script>
(function() {
@@ -411,32 +419,33 @@
s.parentNode.insertBefore(bp, s);
})();
</script>
<!-- 万维广告 -->
<script data-mode="hash" type="text/javascript" src="https://cdn.wwads.cn/js/makemoney.js" async></script>
<!-- 百度统计 -->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?35ad501304eae758ac6139a22a9830f5";
var s = document.getElementsByTagName("script")[0];
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script type="text/javascript">
// 预览版提示
if(location.host === 'rc.sa-token.cc') {
const newTips = '<b>当前文档为RC预览版文档，仅做学习测试使用，正式项目请使用正式版：<a href="https://sa-token.cc/" target="_blank">https://sa-token.cc/</a></b>';
if (location.host === 'rc.sa-token.cc') {
const newTips =
'<b>当前文档为RC预览版文档，仅做学习测试使用，正式项目请使用正式版：<a href="https://sa-token.cc/" target="_blank">https://sa-token.cc/</a></b>';
layer.alert(newTips);
}
</script>
<!-- 小助手提示 -->
<script>
$('.help-btn').click(function(){
$('.help-btn').click(function() {
var str = `
<div class="xiaozhushou-intro">
<h2>报错了？搞不懂？别急、莫慌</h2>
@@ -460,8 +469,8 @@
</div>
`;
layer.alert(str, {
title: '技术求助',
area: '680px',
title: '技术求助',
area: '680px',
offset: '7%',
})
})
@@ -478,95 +487,39 @@
// console.error(e);
// }
// }, 500)
</script>
<!-- 修改背景颜色 -->
<script>
// 绑定修改背景色的按钮事件
$('.theme-box span').click(function() {
let bgColor = this.style.backgroundColor;
setBg(bgColor);
localStorage.setItem('bg-color-value', bgColor)
})
// 读取上次记录
let bgColor = localStorage.getItem('bg-color-value');
if(bgColor) {
setBg(bgColor);
}
// 设置背景颜色
function setBg(bgColor) {
console.log('---- 背景颜色设定为：', bgColor);
// -------- 设置 body 背景
document.body.style.backgroundColor = bgColor;
// -------- 设置 header 头背景
// 如果是 16 进制，转 rgba
if(bgColor.indexOf('#') == 0) {
bgColor = hexToRgba(bgColor, 0.97);
}
// 如果是 rgb，转 rgba
else if(bgColor.match(/\,/g).length == 2) {
bgColor = bgColor.replace(')', ' ,0.97)');
}
document.querySelector('.doc-header').style.backgroundColor = bgColor;
}
// 16进制 转 rgba
function hexToRgba(str, a){
a = a || 1;
var reg = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/
if(!reg.test(str)){return;}
let newStr = (str.toLowerCase()).replace(/\#/g,'')
let len = newStr.length;
if(len == 3){
let t = ''
for(var i=0;i<len;i++){
t += newStr.slice(i,i+1).concat(newStr.slice(i,i+1))
}
newStr = t
}
let arr = []; //将字符串分隔，两个两个的分隔
for(var i =0;i<6;i=i+2){
let s = newStr.slice(i,i+2)
arr.push(parseInt("0x" + s))
}
return 'rgb(' + arr.join(",") + ', ' + a + ')';
}
</script>
<!-- 修改背景颜色 水滴波纹特效 -->
<link rel="stylesheet" href="static/water-change-theme/water-change-theme.css" />
<script src="static/water-change-theme/gsap-3.12.2.min.js"></script>
<script src="static/water-change-theme/water-change-theme.js"></script>
<!-- 赞助页的展开和收缩 -->
<script>
// 展开
function expandZanZhu(){
function expandZanZhu() {
$('.zk-btn--1').hide();
$('.zk-btn--2').show();
$('.zanzhu-box').height($('.zanzhu-box table').height());
}
// 折叠
function foldZanZhu(){
function foldZanZhu() {
$('.zanzhu-box').height(500);
$('.zk-btn--2').hide();
$('.zk-btn--1').show();
}
</script>
<!-- 赞助效果图展示 -->
<script>
function showSyzz(){
function showSyzz() {
layer.photos({
photos: {
title: '',
id: new Date().getTime(),
start: 0,
data: [
{
data: [{
pid: 1,
alt: 'gitee 开源项目推广，日增 star 74',
src: 'https://oss.dev33.cn/sa-token/more/syzz-xg-1.png',
@@ -587,12 +540,12 @@
src: 'https://oss.dev33.cn/sa-token/more/syzz-xg-4.png',
}
]
}
,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
},
anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
}
</script>
<!-- 自定义滚动条颜色 -->
<!-- <style>
/* 自定义body滚动条样式 */
@@ -620,31 +573,31 @@
// 初始化滚动条状态
window.dispatchEvent(new Event('scroll'));
</script> -->
<script>
// Gitee 2025 投票
function toupiao() {
// 弹出一次后，多少天不再弹出 （2天）
const dayy = 1000 * 60 * 60 * 24 * 2;
// 判断是否近期已经判断过了
try{
try {
const isTanChu = localStorage.isTanChu;
if(isTanChu) {
if (isTanChu) {
// 记录 star 的时间，和当前时间的差距
const disparity = new Date().getTime() - parseInt(isTanChu);
// 判断差距
if(disparity < dayy) {
if (disparity < dayy) {
console.log('checked ... toupiao ');
return;
}
}
}catch(e){
} catch (e) {
console.error(e);
}
var mssg = 'Sa-Token 正在参加 Gitee 2025 最受欢迎开源软件投票活动。如果 Sa-Token 帮到了你，希望你可以来支持一下，这对我们非常重要，感谢！ ❤️ ❤️ ❤️ <br>'
+ '<a href="https://gitee.com/activity/2025opensource?ident=IGPG3R" target="_blank">https://gitee.com/activity/2025opensource?ident=IGPG3R</a><br>';
layer.alert(mssg, {}, function(index){
var mssg = 'Sa-Token 正在参加 Gitee 2025 最受欢迎开源软件投票活动。如果 Sa-Token 帮到了你，希望你可以来支持一下，这对我们非常重要，感谢！ ❤️ ❤️ ❤️ <br>' +
'<a href="https://gitee.com/activity/2025opensource?ident=IGPG3R" target="_blank">https://gitee.com/activity/2025opensource?ident=IGPG3R</a><br>';
layer.alert(mssg, {}, function(index) {
open('https://gitee.com/activity/2025opensource?ident=IGPG3R');
layer.close(index)
})
@@ -652,6 +605,6 @@
}
toupiao();
</script>
</body>
</html>
</html>
sa-token-doc/static/doc.css
+1 -1
View File
@@ -412,7 +412,7 @@ body {
.sidebar{background-color: transparent !important;}
/* 变色的动画 */
.doc-header,body{transition: all 0.5s !important;}
.doc-header{transition: background-color 0.3s !important;}
/* 调色按钮 */
.theme-btn{width: 25px; height: 25px; line-height: 60px; vertical-align: middle; position: relative; top: -1px;}
sa-token-doc/static/water-change-theme/gsap-3.12.2.min.js
Vendored
+10
View File
File diff suppressed because one or more lines are too long
sa-token-doc/static/water-change-theme/water-change-theme.css
+30
View File
@@ -0,0 +1,30 @@
/* 水滴样式 */
.water-drop {
position: fixed;
/* 改为fixed避免触发滚动条 */
width: 20px;
height: 28px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
transform: rotate(45deg);
z-index: 1550;
border: 2px solid rgba(0, 0, 0, 0.2);
/* 添加轮廓 */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
/* 添加阴影增强视觉效果 */
}
/* 圆形扩散效果 div */
.color-wave {
position: fixed;
border-radius: 50%;
transform: scale(0);
z-index: -1;
/* 降低z-index确保不遮挡内容 */
pointer-events: none;
}
/* 将页面主盒子设置为定位，这样就可以让水滴扩散的div 设置 z-index: 保持不覆盖 main-box 里的内容了 */
.main-box{
position: relative;
/* z-index: 1; */
}
sa-token-doc/static/water-change-theme/water-change-theme.js
+147
View File
@@ -0,0 +1,147 @@
// 绑定修改背景色的按钮事件
$('.theme-box span').click(function() {
// 获取主题色
let bgColor = this.style.backgroundColor;
// 获取点击位置
const rect = this.getBoundingClientRect();
const x = rect.left + rect.width / 2;
const y = rect.top + rect.height / 2;
// 创建水滴元素
createWaterDrop(x - 7, y + 5, bgColor);
// setBg(bgColor);
localStorage.setItem('bg-color-value', bgColor)
})
// 创建水滴动画
function createWaterDrop(x, y, color) {
// 创建水滴元素
const waterDrop = document.createElement('div');
waterDrop.className = 'water-drop';
waterDrop.style.backgroundColor = color;
waterDrop.style.left = `${x}px`;
waterDrop.style.top = `${y}px`;
// 添加到文档中
document.body.appendChild(waterDrop);
// 获取视口高度
const viewportHeight = window.innerHeight;
// 使用GSAP创建水滴下落动画
gsap.to(waterDrop, {
top: viewportHeight - 30, // 调整为视口底部内，避免触发滚动条
duration: 1.5,
ease: "power2.in", // 加速度下落
onComplete: function() {
// 动画完成后移除水滴
document.body.removeChild(waterDrop);
// 创建颜色扩散效果
createColorWave(x, viewportHeight, color);
}
});
}
// 创建颜色扩散效果
function createColorWave(x, y, color) {
// 创建颜色波元素
const colorWave = document.createElement('div');
colorWave.className = 'color-wave';
colorWave.style.backgroundColor = color;
// 计算所需的最小半径（确保能覆盖整个视口）
const maxDistance = Math.sqrt(
Math.pow(Math.max(x, window.innerWidth - x), 2) +
Math.pow(Math.max(y, window.innerHeight - y), 2)
);
// 设置颜色波的初始位置和大小
colorWave.style.width = `${maxDistance * 2}px`;
colorWave.style.height = `${maxDistance * 2}px`;
colorWave.style.left = `${x - maxDistance}px`;
colorWave.style.top = `${y - maxDistance}px`;
// 确保 colorWave 在所有内容之下
// const contentElements = document.querySelectorAll('nav, main, footer');
// contentElements.forEach(el => {
// if (!el.style.zIndex || parseInt(el.style.zIndex) <= 10) {
// el.style.zIndex = '20';
// }
// });
// 添加到文档中
document.body.appendChild(colorWave);
// 使用 GSAP 创建扩散动画
gsap.to(colorWave, {
scale: 1,
duration: 1.2,
ease: "power2.out",
onComplete: function() {
// 动画完成后更改背景色
// document.body.style.backgroundColor = color;
setBg(color)
// 延迟移除颜色波
setTimeout(() => {
document.body.removeChild(colorWave);
}, 500);
}
});
}
// 读取上次记录
let bgColor = localStorage.getItem('bg-color-value');
if (bgColor) {
setBg(bgColor);
}
// 设置背景颜色
function setBg(bgColor) {
console.log('---- 背景颜色设定为：', bgColor);
// -------- 设置 body 背景
document.body.style.backgroundColor = bgColor;
// -------- 设置 header 头背景
// 如果是 16 进制，转 rgba
if (bgColor.indexOf('#') == 0) {
bgColor = hexToRgba(bgColor, 0.97);
}
// 如果是 rgb，转 rgba
else if (bgColor.match(/\,/g).length == 2) {
bgColor = bgColor.replace(')', ' ,0.97)');
}
document.querySelector('.doc-header').style.backgroundColor = bgColor;
}
// 16进制 转 rgba
function hexToRgba(str, a) {
a = a || 1;
var reg = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/
if (!reg.test(str)) {
return;
}
let newStr = (str.toLowerCase()).replace(/\#/g, '')
let len = newStr.length;
if (len == 3) {
let t = ''
for (var i = 0; i < len; i++) {
t += newStr.slice(i, i + 1).concat(newStr.slice(i, i + 1))
}
newStr = t
}
let arr = []; //将字符串分隔，两个两个的分隔
for (var i = 0; i < 6; i = i + 2) {
let s = newStr.slice(i, i + 2)
arr.push(parseInt("0x" + s))
}
return 'rgb(' + arr.join(",") + ', ' + a + ')';
}