lsm/sa-token
1
0
Fork 0
mirror of https://gitee.com/dromara/sa-token.git synced 2025-04-05 17:37:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

重构官网首页样式

Browse Source
This commit is contained in:
click33 2022-08-01 17:48:22 +08:00
parent 33c140cc22
commit 8ba35dd32c
4 changed files with 58 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
sa-token-doc/doc/_sidebar.md
View File

@ -75,6 +75,7 @@
- [框架生态](/more/link)
- [框架博客](/more/blog)
- [推荐公众号](/more/tj-gzh)
- [加入讨论群](/more/join-group)
- [赞助 Sa-Token](/more/sa-token-donate)
- **附录**

20
sa-token-doc/doc/more/join-group.md Normal file
View File

@ -0,0 +1,20 @@
# 加入讨论群
加入 Sa-Token 专属讨论群，与众多大佬一起努力 (huá shǔi) 成长 (mō yú)。
---
### 1、加入QQ交流群
![QQ群](https://oss.dev33.cn/sa-token/qq-group-3.png ':size=180')
QQ交流群：496757342 [点击加入](https://jq.qq.com/?_wv=1027&k=WNggbsFe)
### 2、加入微信交流群：
![微信群](https://oss.dev33.cn/sa-token/wx-qr-300.png ':size=180')
（扫码添加微信，备注：sa-token，邀您加入群聊）

46
sa-token-doc/index.css
View File

@ -2,6 +2,7 @@
/* 总 */
*{margin: 0px; padding: 0px;}
body{font-size: 16px; color: #34495E; font-family: "Source Sans Pro","Helvetica Neue","Arial,sans-serif";}
.z-div{}
.s-width{width: 1000px; margin: auto;}
/* 栏目标题 */
@ -35,20 +36,17 @@ body{font-size: 16px; color: #34495E; font-family: "Source Sans Pro","Helvetica
.github-corner svg{color: #fff; fill: var(--theme-color, #42b983); height: 80px; width: 80px; z-index: 1001 !important;}
/* 手机端不显示广告，和一些其它东西 */
@media (max-width: 576px) {.wwads-cn,.p-none{display:none!important}}
/* -------- 海报部分 --------- */
.main-box{width: 100%; min-height: 100vh;; /* height: 80vh; */ text-align: center; background-image: url(https://oss.dev33.cn/sa-token/home-bg.jpg); }
.main-box{width: 100%; /* min-height: 70vh; */ /* height: 80vh; */ text-align: center; background-image: url(https://oss.dev33.cn/sa-token/home-bg.jpg); }
.main-box{display: flex; align-items: center; text-align: center; }
.fenge{min-height: 90px;}
.content-box{color: #000; flex: 1;}
.content-box{color: #000; flex: 1; padding: 120px 1em 70px;}
.content-box h1{font-size: 100px; font-weight: 400; position: relative; margin-top: 40px; /* margin-top: 15vh; */}
.content-box h1 small{font-size: 18px; position: absolute; bottom: 10px; margin-left: 5px; font-weight: 100;}
/* .title-logo{width: 221px; cursor: pointer; transition: all 0.2s;}
.title-logo:hover{transform: scale(1.2, 1.2);} */
.sub-title{font-size: 22px; font-weight: 400; margin-top: 30px; margin-bottom: 25px; color: #6a8bad; color: #444;}
.sub-title{font-size: 22px; font-weight: 400; margin-top: 30px; margin-bottom: 25px; color: #6a8bad; color: #555;}
/* .content-box p{line-height: 30px; padding: 0px 1em;} */
/* 角标位置修复 */
.badge-box a:nth-child(-n+2) img{position: relative; top: 1px;}
@ -63,12 +61,12 @@ body{font-size: 16px; color: #34495E; font-family: "Source Sans Pro","Helvetica
.btn-box{margin-top: 50px; margin-bottom: 40px;}
.btn-box a{border: 1px #42B983 solid; border-radius: 2em; box-sizing: border-box; color: #3eaf7c; display: inline-block;transition: all 0.1s;}
.btn-box a{font-size: 14px; background-color: rgba(0,255,0,0.04); letter-spacing: 1px; padding: 1em 2em; margin: 0 0.5em; margin-bottom: 14px; text-decoration: none; }
.btn-box a:hover{/* transform: scale(1.05, 1.05); */padding: 1em 2.3em; margin-left: 0.2em; margin-right: 0.2em;}
/* 最后一个加深底色 */
.btn-box a:last-child {color: #fff; background-color: #42B983; border: 1px green solid;}
.btn-box a:hover{/* transform: scale(1.05, 1.05); */padding: 1em 2.3em; margin: 0 0.2em;}
.btn-box .doc-btn {color: #fff; background-color: #42B983; border: 1px green solid;}
/* 按钮发光动画 */
.btn-box a:last-child{animation: bganimation 3s infinite;}
.btn-box .doc-btn{animation: bganimation 3s infinite;}
@keyframes bganimation{
0%{box-shadow: 0 0 1px #42B983;}
50%{box-shadow: 0 0 20px #42B983;}
@ -89,7 +87,7 @@ body{font-size: 16px; color: #34495E; font-family: "Source Sans Pro","Helvetica
.feature-z .s-title{font-size: 30px; font-weight: 400; margin-top: 70px; margin-bottom: 40px;}
.feature-z{color: rgb(128, 128, 128); text-align: center; box-sizing: border-box; line-height: 24px; font-size: 16px;}
.feature-box{margin-top: 50px; margin-bottom: 70px; display: flex; flex-wrap: wrap; justify-content: space-between; /* justify-content: flex-start; */}
.feature-box{margin-top: 10px; margin-bottom: 70px; display: flex; flex-wrap: wrap; justify-content: space-between; /* justify-content: flex-start; */}
.feature{border: 0px #000 solid; flex: 0 0 33%; text-align: left; padding: 1.8em 1.2em; box-sizing: border-box;}
.feature h2{font-size: 22px; color: #000; font-weight: 400;}
.feature p{margin-top: 14px; font-size: 16px; color: #4e6e8e;}
@ -105,8 +103,8 @@ body{font-size: 16px; color: #34495E; font-family: "Source Sans Pro","Helvetica
/* -------- 集成案例 --------- */
.s-case-box{justify-content: space-between;}
.s-case{border: 1px #eee 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;}
.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-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;}
@ -118,6 +116,7 @@ body{font-size: 16px; color: #34495E; font-family: "Source Sans Pro","Helvetica
/* 悬浮动画 */
.s-case:hover{box-shadow: 0 0 20px #ccc;}
.s-case:hover img{transform: scale(1.3, 1.3); }
.s-case img:hover{cursor: pointer;}
.s-case:hover .s-case-link:after {background-color: rgba(0, 0, 0, .35); color: #FFF;}
@ -173,7 +172,16 @@ body{font-size: 16px; color: #34495E; font-family: "Source Sans Pro","Helvetica
/* -------- 自适应 --------- */
/* 媒体查询 */
/* 一般的笔记本 */
@media screen and (max-width: 1700px) {
.content-box{padding-top: 100px;}
.content-box h1{font-size: 80px;}
/* 支持特性部分的间距 */
.s-title.s-title-tx{margin-top: 50px; margin-bottom: 20px; /* display: none; */}
}
/* 一般的手机 */
@media screen and (max-width: 800px) {
.s-title{padding: 0 16px;}
@ -181,10 +189,10 @@ body{font-size: 16px; color: #34495E; font-family: "Source Sans Pro","Helvetica
.logo-box .logo-text,.copyright {display: none;}
.main-box{ height: auto;}
.content-box{ padding: 2em 1em;}
.content-box{padding-top: 100px;}
.content-box h1{font-size: 50px;}
.feature-z{padding: 0em;}
.feature-z{padding: 0em; padding-bottom: 50px;}
.feature{min-width: 100%;}
.com-box-f{padding: 0em;}
@ -199,11 +207,13 @@ body{font-size: 16px; color: #34495E; font-family: "Source Sans Pro","Helvetica
/* .s-header{position: static;} */
footer{position: static; line-height: 40px;}
/* 手机端不显示广告，和一些其它东西 */
.wwads-cn,.p-none{display:none!important}
}
@media screen and (min-width: 1700px) {
.content-box h1{margin-top: 120px;}
}
/* 手机端不显示广告，和一些其它东西 */
/* @media (max-width: 576px) {.wwads-cn,.p-none{display:none!important}} */

25
sa-token-doc/index.html
View File

@ -69,40 +69,33 @@
<!-- ------------ 海报部分 ------------- -->
<div class="main-box">
<div class="content-box">
<div class="fenge"></div>
<!-- <div class="fenge"></div> -->
<h1>Sa-Token<small>v1.30.0</small></h1>
<div class="sub-title">一个轻量级 java 权限认证框架，让鉴权变得简单、优雅！</div>
<div class="btn-box">
<a href="https://github.com/dromara/sa-token" target="_blank">GitHub</a>
<a href="https://gitee.com/dromara/sa-token" target="_blank">码云</a>
<a href="doc/index.html" target="_self" class="doc-btn">开发文档</a>
<a class="abtn" href="https://github.com/dromara/sa-token" target="_blank">GitHub</a>
<a class="abtn" href="https://gitee.com/dromara/sa-token" target="_blank">码云</a>
<a class="abtn" href="doc/index.html#/more/join-group" target="_self">加入讨论群</a>
<a class="abtn doc-btn" href="doc/index.html" target="_self">开发文档</a>
<!-- <a href="https://gitee.com/dromara/sa-token" target="_blank">集成案例</a> -->
</div>
<h4 align="center" class="badge-box">
<a href="https://gitee.com/dromara/sa-token/stargazers"><img src="https://gitee.com/dromara/sa-token/badge/star.svg?theme=gvp"></a>
<a href="https://gitee.com/dromara/sa-token/members"><img src="https://gitee.com/dromara/sa-token/badge/fork.svg?theme=gvp"></a>
<!-- <br><br> -->
<a href="https://github.com/dromara/sa-token/stargazers"><img src="https://img.shields.io/github/stars/dromara/sa-token?style=flat-square&logo=GitHub"></a>
<a href="https://github.com/dromara/sa-token/network/members"><img src="https://img.shields.io/github/forks/dromara/sa-token?style=flat-square&logo=GitHub"></a>
<a href="https://github.com/dromara/sa-token/watchers"><img src="https://img.shields.io/github/watchers/dromara/sa-token?style=flat-square&logo=GitHub"></a>
<a href="https://github.com/dromara/sa-token/issues"><img src="https://img.shields.io/github/issues/dromara/sa-token.svg?style=flat-square&logo=GitHub"></a>
<a href="https://github.com/dromara/sa-token/blob/master/LICENSE"><img src="https://img.shields.io/github/license/dromara/sa-token.svg?style=flat-square"></a>
</h4>
<div class="wx-qr-box">
<div class="qr-item">
<img class="wx-qr" src="https://oss.dev33.cn/sa-token/qq-group-3.png" >
<p style="">QQ交流群: 496757342 <a href="https://jq.qq.com/?_wv=1027&k=ceibbMFr" target="_blank">点击加入</a></p>
</div>
<div class="qr-item">
<img class="wx-qr" src="https://oss.dev33.cn/sa-token/wx-qr-300.png" >
<p>微信交流群：扫码加入 (请备注: sa)</p>
</div>
</div>
</div>
</div>
<!-- ------------ 支持特性 ------------- -->
<div>
<div class="feature-z s-width">
<h2 class="s-title">Sa-Token 支持特性</h2>
<h2 class="s-title s-title-tx">Sa-Token 支持特性</h2>
<div class="feature-box">
<div class="feature">
<h2>⚡️ 登录认证</h2>
@ -372,7 +365,7 @@
<a href="http://forest.dtflyx.com/" target="_blank">
<img src="https://oss.dev33.cn/sa-token/link/forest-logo.png" msg="Forest能够帮助您使用更简单的方式编写Java的HTTP客户端" nf>
</a>
<a href="https://jpom.top/" target="_blank">
<a href="https://jpom.io/" target="_blank">
<img src="https://oss.dev33.cn/sa-token/link/jpom.png" msg="一款简而轻的低侵入式在线构建、自动部署、日常运维、项目监控软件">
</a>
<a href="https://su.usthe.com/" target="_blank">