mirror of
https://gitee.com/dromara/sa-token.git
synced 2026-02-27 16:50:24 +08:00
优化文档样式
This commit is contained in:
click33
@@ -26,35 +26,6 @@
|
||||
<div class="sear-box p-none" tabindex="-1" >
|
||||
<!-- 加载中…… -->
|
||||
</div>
|
||||
<div class="zk-box p-none">
|
||||
<a class="wzi" href="javascript:;">
|
||||
<!-- <span>背景 </span> -->
|
||||
<img class="theme-btn" src="static/icon/theme.svg">
|
||||
<!-- <span class="zk-icon"></span> -->
|
||||
</a>
|
||||
<div class="zk-context theme-box">
|
||||
<div>
|
||||
<div style="height: 5px;"></div>
|
||||
<span style="background-color: #FFFFFF;"></span>
|
||||
<span style="background-color: #f5f5f5;"></span>
|
||||
<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> -->
|
||||
<!-- <span style="background-color: #eeeeee;"></span> -->
|
||||
<!-- <span style="background-color: #f5fafe;"></span> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<select class="select-version p-none" onchange="location.href=this.value">
|
||||
<option value="doc.html">最新版</option>
|
||||
<option value="v/v1.31.0/doc.html">v1.31.0</option>
|
||||
@@ -92,6 +63,35 @@
|
||||
<option value="v/v1.0.0/doc/index.html">v1.0.0</option>
|
||||
<option value="/">首页</option>
|
||||
</select>
|
||||
<div class="zk-box p-none">
|
||||
<a class="wzi" href="javascript:;">
|
||||
<!-- <span>背景 </span> -->
|
||||
<img class="theme-btn" src="static/icon/theme.svg">
|
||||
<!-- <span class="zk-icon"></span> -->
|
||||
</a>
|
||||
<div class="zk-context theme-box">
|
||||
<div>
|
||||
<div style="height: 5px;"></div>
|
||||
<span style="background-color: #FFFFFF;"></span>
|
||||
<span style="background-color: #f5f5f5;"></span>
|
||||
<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> -->
|
||||
<!-- <span style="background-color: #eeeeee;"></span> -->
|
||||
<!-- <span style="background-color: #f5fafe;"></span> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="wzi" href="index.html">首页</a>
|
||||
<a class="wzi" href="doc.html">文档</a>
|
||||
<a class="p-none wzi" href="#/more/link">案例</a>
|
||||
|
||||
@@ -27,6 +27,35 @@
|
||||
</a>
|
||||
</div>
|
||||
<nav class="nav-right">
|
||||
<div class="zk-box p-none">
|
||||
<a class="wzi" href="javascript:;">
|
||||
<!-- <span>背景 </span> -->
|
||||
<img class="theme-btn" src="static/icon/theme.svg">
|
||||
<!-- <span class="zk-icon"></span> -->
|
||||
</a>
|
||||
<div class="zk-context theme-box">
|
||||
<div>
|
||||
<div style="height: 5px;"></div>
|
||||
<span style="background-color: #FFFFFF;"></span>
|
||||
<span style="background-color: #f5f5f5;"></span>
|
||||
<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> -->
|
||||
<!-- <span style="background-color: #eeeeee;"></span> -->
|
||||
<!-- <span style="background-color: #f5fafe;"></span> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="wzi" href="index.html">首页</a>
|
||||
<a class="wzi" href="doc.html">文档</a>
|
||||
<a class="p-none wzi" href="doc.html#/more/link">案例</a>
|
||||
@@ -615,6 +644,66 @@
|
||||
|
||||
</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>
|
||||
|
||||
<script type="text/javascript">
|
||||
// 预览版提示
|
||||
if(location.host === 'rc.sa-token.cc') {
|
||||
|
||||
@@ -106,7 +106,7 @@ body{font-size: 16px; color: #34495E; font-family: "Source Sans Pro","Helvetica
|
||||
/* -------- 集成案例 --------- */
|
||||
.s-case-box{justify-content: space-between;}
|
||||
.s-case{border: 1px #e5e5e5 solid; flex: 0 0 31.5%; margin-top: 30px; text-align: left; box-sizing: border-box; padding-bottom: 16px; overflow: hidden;}
|
||||
.s-case{position: relative; transition: all 0.2s;}
|
||||
.s-case{position: relative; transition: all 0.2s; background-color: #FFF;}
|
||||
.s-case-link{display: block; width: 100%; height: 0px; padding-bottom: 50%; position: relative; overflow: hidden;}
|
||||
.s-case-link img{width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute;}
|
||||
.s-case-link img{transition: all 0.3s;}
|
||||
@@ -234,4 +234,27 @@ body{font-size: 16px; color: #34495E; font-family: "Source Sans Pro","Helvetica
|
||||
|
||||
/* 下三角小图标 */
|
||||
.zk-icon{display: inline-block; width: 0px; height: 0px; position: relative;top: 3px; margin-left: 4px;}
|
||||
.zk-icon{border-style: solid; border-width: 5px; border-color: #aaa transparent transparent transparent; }
|
||||
.zk-icon{border-style: solid; border-width: 5px; border-color: #aaa transparent transparent transparent; }
|
||||
|
||||
|
||||
/* ------------- 背景色相关 ------------- */
|
||||
/* 侧边栏需要透明 */
|
||||
.sidebar-toggle{background-color: transparent !important;}
|
||||
.sidebar{background-color: transparent !important;}
|
||||
|
||||
/* 变色的动画 */
|
||||
.doc-header,body{transition: all 0.5s !important;}
|
||||
|
||||
/* 调色按钮 */
|
||||
.theme-btn{width: 25px; height: 25px; line-height: 60px; vertical-align: middle; position: relative; top: -1px;}
|
||||
.theme-box{width: 160px; text-align: left; line-height: 20px; margin-top: -20px; white-space: normal;}
|
||||
.theme-box span{
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 1px 2px;
|
||||
border: 1px #ccc solid;
|
||||
cursor: pointer;
|
||||
border-radius: 1px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user