From 7e52247cd0b4c35d6418bb61c36520034f2bf463 Mon Sep 17 00:00:00 2001 From: Yui <44658840+HereIsYui@users.noreply.github.com> Date: Wed, 4 Dec 2024 17:43:34 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=E6=96=B0=E5=A2=9E=E6=89=AB?= =?UTF-8?q?=E7=A0=81=E7=99=BB=E5=BD=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pom.xml | 6 + .../org/b3log/symphony/processor/Router.java | 3 + .../processor/channel/LoginChannel.java | 88 ++++++++ src/main/resources/css/index.css | 2 +- src/main/resources/js/verify.js | 170 ++++++++++----- src/main/resources/scss/index.scss | 205 +++++++++++------- .../resources/skins/classic/verify/login.ftl | 139 +++++++----- 7 files changed, 427 insertions(+), 186 deletions(-) create mode 100644 src/main/java/org/b3log/symphony/processor/channel/LoginChannel.java diff --git a/pom.xml b/pom.xml index 0e0342bc..f1369d20 100644 --- a/pom.xml +++ b/pom.xml @@ -303,6 +303,12 @@ system ${project.basedir}/src/main/resources/lib/gif4j_zuixin_pojie1.jar + + io.netty + netty + 3.10.5.Final + compile + diff --git a/src/main/java/org/b3log/symphony/processor/Router.java b/src/main/java/org/b3log/symphony/processor/Router.java index 655cd69f..68d877b6 100644 --- a/src/main/java/org/b3log/symphony/processor/Router.java +++ b/src/main/java/org/b3log/symphony/processor/Router.java @@ -61,6 +61,9 @@ public static void requestMapping() { final LogsChannel logsChannel = beanManager.getReference(LogsChannel.class); Dispatcher.webSocket("/logs-channel", logsChannel); + final LoginChannel loginChannel = beanManager.getReference(LoginChannel.class); + Dispatcher.webSocket("/login-channel", loginChannel); + // 注册 HTTP 错误处理 final ErrorProcessor errorProcessor = beanManager.getReference(ErrorProcessor.class); Dispatcher.error("/error/{statusCode}", errorProcessor::handle); diff --git a/src/main/java/org/b3log/symphony/processor/channel/LoginChannel.java b/src/main/java/org/b3log/symphony/processor/channel/LoginChannel.java new file mode 100644 index 00000000..4f590a9a --- /dev/null +++ b/src/main/java/org/b3log/symphony/processor/channel/LoginChannel.java @@ -0,0 +1,88 @@ +package org.b3log.symphony.processor.channel; + +import org.b3log.latke.http.WebSocketChannel; +import org.b3log.latke.http.WebSocketSession; +import org.b3log.latke.ioc.Singleton; +import org.json.JSONObject; + +import java.util.concurrent.ConcurrentHashMap; +import java.util.Map; +/** + * Login channel. + * + * @author Yui + * @version 1.0.0.0, Dec 4, 2024 + */ +@Singleton +public class LoginChannel implements WebSocketChannel { + /** + * 已经连接的WebSocket客户端列表 + */ + private final Map sessions = new ConcurrentHashMap<>(); + + @Override + public void onConnect(WebSocketSession webSocketSession) { + // 把客户端存入Map,方便发信息 + sessions.put(webSocketSession.getId(), webSocketSession); + } + + @Override + public void onMessage(Message message) { + try { + JSONObject jsonObject = new JSONObject(message.text); + String targetId; + String apiKey; + WebSocketSession targetSession; + switch (jsonObject.get("type").toString()) { + case "1": + // type1: 获取web端websocket id 方便 APP 单独向指定的web发送apikey + message.session.sendText("targetId:" + message.session.getId()); + break; + case "2": + // type2: APP 携带apiKey发送登录 + targetId = jsonObject.get("targetId").toString(); + apiKey = jsonObject.get("apiKey").toString(); + if (targetId == null) { + message.session.sendText("{\"code\":1,\"msg\":\"Params is not right\"}"); + break; + } + targetSession = sessions.get(targetId); + if (targetSession != null) { + targetSession.sendText("apiKey:" + apiKey); + message.session.sendText("{\"code\":0,\"msg\":\"Success\"}"); + } else { + message.session.sendText("{\"code\":1,\"msg\":\"Target is not exist\"}"); + } + break; + case "3": + // type3: APP 已经扫码,但是还没调用登录 (后续APP如果加点击确认按钮了,这个是中间状态) + targetId = jsonObject.get("targetId").toString(); + if (targetId == null) { + message.session.sendText("{\"code\":1,\"msg\":\"Params is not right\"}"); + break; + } + targetSession = sessions.get(targetId); + if (targetSession != null) { + targetSession.sendText("scan:ing~"); + message.session.sendText("{\"code\":0,\"msg\":\"Success\"}"); + } else { + message.session.sendText("{\"code\":1,\"msg\":\"Target is not exist\"}"); + } + default: + break; + } + } catch (Exception e) { + message.session.sendText("{\"code\":1,\"msg\":\"Message parse error\"}"); + } + } + + @Override + public void onClose(WebSocketSession webSocketSession) { + // 将关闭连接的websocket从Map中移除 + sessions.remove(webSocketSession.getId()); + } + + @Override + public void onError(Error error) { + } +} diff --git a/src/main/resources/css/index.css b/src/main/resources/css/index.css index c45f4859..627fa365 100644 --- a/src/main/resources/css/index.css +++ b/src/main/resources/css/index.css @@ -1 +1 @@ -@font-face{font-family:HarmonyOS;src:url(//resource.hellofont.cn/font/HarmonyOS_SansSC_Regular-J.woff2) format("woff2"),url(//resource.hellofont.cn/font/HarmonyOS_SansSC_Regular-J.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:HarmonyOS;src:url(//resource.hellofont.cn/font/HarmonyOS_SansSC_Medium-J.woff2) format("woff2"),url(//resource.hellofont.cn/font/HarmonyOS_SansSC_Medium-J.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:HarmonyOS;src:url(//resource.hellofont.cn/font/HarmonyOS_SansSC_Bold-J.woff2) format("woff2"),url(//resource.hellofont.cn/font/HarmonyOS_SansSC_Bold-J.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:HarmonyOS;src:url(//resource.hellofont.cn/font/HarmonyOS_SansSC_Black-J.woff2) format("woff2"),url(//resource.hellofont.cn/font/HarmonyOS_SansSC_Black-J.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}:root{--background-color: #fff;--background-secondary-color: #f6f8fa;--text-color: #000;--text-gray-color: #787777;--text-fade-color: #878787;--layer-color: #616161;--layer-background-color: #fff;--layer-border-color: #eee;--layer-hover-color: #fff;--layer-hover-background-color: #4285f4;--header-background-color: #3b3e43;--toc-hover-color: #4285f4;--tab-current-background-color: var(--header-background-color);--box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15);--dialog-close-color: hsla(0, 0%, 100%, 0.54);--input-border-color: #d1d5da;--logo-hover-color: var(--header-background-color)}.domains-count{padding:10px 18px;font-size:18px;line-height:26px;color:#3b3e43;text-align:center;border:1px solid #eee;background-color:#fff;width:100%;box-sizing:border-box;margin-bottom:20px;box-shadow:0px 0px 2px rgba(98,124,153,.1)}.domains-module{margin:0}.module-list.domain .slogan{text-align:center;margin-top:-8px;width:60px}.module-list.domain .title{margin-left:80px}.article{padding-top:60px}.article .nav{position:fixed;top:0}.article .article-container{position:relative;margin:20px auto 20px;max-width:800px;background:#fff}.article .article-body .wrapper,.article .main .wrapper{display:block;max-width:768px}.article .main{min-height:inherit}.article .article-body{padding:20px 0}.article .article-info{font-size:12px;line-height:20px}.article .article-info .article-actions{line-height:60px;font-size:13px}.article h1.article-title{word-break:break-word;font-size:28px;font-weight:normal;padding-top:15px;text-align:center}.article h1.article-title svg{height:28px;width:28px;vertical-align:-4px}.article .article-content{padding-top:15px}.article #articleRewardContent{padding:15px 15px 41px 15px;background-image:-webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.9)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.9)), color-stop(0.75, rgba(255, 255, 255, 0.9)), color-stop(0.75, transparent), to(transparent));background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.9) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.9) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 75%, transparent 75%, transparent);background-color:#f7f7f7;background-size:45px 45px;position:relative}.article #articleRewardContent .vditor-reset>p{margin-bottom:0}.article #articleRewardContent>span{position:absolute;bottom:10px;right:10px;cursor:pointer}.article .share{position:absolute;top:100px;left:-60px;width:30px;font-size:22px;color:#616161;text-align:center}.article .share .article-clipboard{position:absolute;top:-100000px}.article .share svg{height:22px;width:22px}.article .share>span{display:block;margin-bottom:10px}.article .share #qrCode{position:absolute;top:87px;left:35px;border:5px solid #eee;z-index:1;height:90px;border-radius:3px;width:90px}.article .share #thankArticle .ft-13{margin-top:-3px;display:block}.article .article-header{position:fixed;top:-60px;display:flex;justify-content:space-around;align-items:center;width:100%;height:58px;z-index:83;line-height:38px;padding:0 10px;background-color:#fff;box-sizing:border-box;box-shadow:0 1px 2px rgba(0,0,0,.2);font-size:16px;transition:.5s}.article .article-header h1 svg{color:#2c2c2c;vertical-align:baseline;height:38px;width:38px}.article .article-header h2{font-size:24px;line-height:48px;font-weight:normal;margin:0 20px;transition:margin 1s cubic-bezier(0, 0, 0.2, 1)}.article .article-header .user-nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap}.article .article-header .user-nav>span,.article .article-header .user-nav>a{white-space:nowrap;padding:16px 10px;line-height:16px;height:16px;color:#616161;text-decoration:none}.article .article-header .user-nav>span:hover,.article .article-header .user-nav>a:hover{color:#2c2c2c}.article .article-header .user-nav>span.ft-red{color:#e59230}.article .article-header .user-nav svg{height:16px;width:16px}.article #articleToC{position:fixed;top:80px;width:20%;z-index:0;right:0;height:100%;border-radius:0;background:none}.article #articleToC .module-panel{overflow:auto;border-radius:0}.article #articleToC .article-toc li{list-style-type:none}.article #articleToC .article-toc li a{padding:5px 10px 5px 20px;border-left:2px solid rgba(0,0,0,0);display:block;line-height:20px;color:#767676}.article #articleToC .article-toc li a:last-child{border-bottom-width:0}.article #articleToC .article-toc li a:hover{border-left:1px solid #4285f4;background-color:#f7f7f7;padding-left:21px;color:#4285f4;text-decoration:none}.article #articleToC .article-toc li.current a{border-left:2px solid #4285f4;background-color:#f0f0f0;color:#4285f4}.article #articleToC .article-toc li.toc-h2 a,.article #articleToC .article-toc li.toc-h2.current a:hover{padding-left:34px}.article #articleToC .article-toc li.toc-h3 a,.article #articleToC .article-toc li.toc-h3.current a:hover{padding-left:48px}.article #articleToC .article-toc li.toc-h4 a,.article #articleToC .article-toc li.toc-h4.current a:hover{padding-left:62px}.article #articleToC .article-toc li.toc-h5 a,.article #articleToC .article-toc li.toc-h5.current a:hover{padding-left:86px}.article #articleToC .article-toc li.toc-h2 a:hover{padding-left:35px}.article #articleToC .article-toc li.toc-h3 a:hover{padding-left:49px}.article #articleToC .article-toc li.toc-h4 a:hover{padding-left:63px}.article #articleToC .article-toc li.toc-h5 a:hover{padding-left:87px}.article #revision .revisions{margin:5px 0 15px;text-align:center}.article #revision .revisions a{color:#616161;vertical-align:middle}.article #revision .revisions a:hover{color:#2c2c2c}.article #revision .revisions a.disabled{color:#878787;cursor:default}.article #revision .revisions span{margin:0 10px 0 10px}.article .editor-panel{position:fixed;width:100%;z-index:120;height:100%;box-sizing:border-box;bottom:-200%}.article .editor-panel .editor-bg{background-color:rgba(0,0,0,.5);height:100%;position:absolute;top:0;width:100%}.article .editor-panel .wrapper{background-color:#f1f7fe;bottom:0;z-index:121;position:absolute;padding:15px 10%;box-sizing:border-box;width:100%;max-width:initial}.article .editor-panel .wrapper #commentContent{max-height:600px}.article .editor-panel .wrapper .comment-submit{display:flex;align-items:center;margin-top:10px}.article .editor-panel .form{width:100%}.article .editor-panel .editor-hide{color:#616161;margin:-3px 0 6px;font-size:22px}.article .editor-panel .editor-hide:hover{color:#2c2c2c}#heatBar{position:fixed;top:2px;right:0px;width:100%;z-index:84}#thoughtProgress{height:2px;position:relative;margin-bottom:10px;margin-top:20px}#thoughtProgress .bar{position:absolute;background-color:#e0e0e0;height:2px}#thoughtProgress .icon-video{position:absolute;top:-8px;left:0;cursor:pointer;color:#e59230;margin-left:-10px}label.cmt-anonymous{margin:0 9px}label.cmt-anonymous input{margin-left:4px}.action-btns>span,.action-btns>a{color:#616161;text-decoration:none}.action-btns>span:hover,.action-btns>a:hover{color:#2c2c2c}.action-btns>span.ft-red,.action-btns>a.ft-red,.action-btns>span.ft-red:hover,.action-btns>a.ft-red:hover{color:#e59230}.action-btns>span.icon-reply-btn{color:#616161;font-weight:bold}.action-btns>span.icon-reply-btn:hover{color:#2c2c2c}.action-btns svg{vertical-align:text-top}.comments.module{margin-bottom:0}.comments .comments-header a{color:#878787;font-size:16px;text-decoration:none}.comments .comments-header a:hover{color:#787777}.comments .list>ul>li.cmt-shield-shield{background-image:-webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.9)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.9)), color-stop(0.75, rgba(255, 255, 255, 0.9)), color-stop(0.75, transparent), to(transparent));background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.9) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.9) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 75%, transparent 75%, transparent);background-color:#f7f7f7;background-size:45px 45px}.comments .list>ul>li.cmt-perfect,.comments .list>ul>li.cmt-perfect:hover{background-color:#f9f6f6}.comments .list>ul>li:hover .hover-show,.comments .list>ul>li.focus .fn-hidden{visibility:visible}.comments .list>ul>li:last-child{border-bottom-width:0}.comments .comment{margin:5px 0}.comments .comment img:not(.emoji){max-width:150px;max-height:300px}.comments .comment>p:last-child{margin-bottom:0px}.comments .comment>p>img:last-child{margin-bottom:10px}.comments .comment-info .avatar-small{vertical-align:bottom}.comments .comment-info a:hover{text-decoration:none}.comments .comment-action>.ft-fade>.fn-pointer:hover{color:#787777}.nice .comments>ul>li:last-child{border-bottom-width:0}.comment-get-comment.list>ul{padding:0}.comment-get-comment.list>ul>li{padding-top:0;border-bottom:1px solid #eee;margin-bottom:15px}.comment-get-comment.list>ul>li:last-child{border-bottom:1px solid #eee}.comment-replies.list>ul{margin-top:10px;padding:0}.comment-replies.list>ul>li{border-bottom-width:0;border-top:1px solid #eee}.comment-replies.list>ul>li{background-color:rgba(0,0,0,0)}#replyUseName{line-height:20px;height:20px}.img-preview{width:100%;height:100%;top:0;z-index:111;overflow:auto;cursor:zoom-out;transition:background-color .2s ease-in-out}.img-preview img{max-width:inherit;transition:transform .3s ease-in-out}.article-footer{margin-top:20px;max-width:768px}.article-footer .module{margin-left:20px}.article-footer .module:first-child{margin-left:0}#reportDialog{display:none}.article-list ul>li{padding:15px}.article-list .stick li:last-child{border-bottom-width:0}.article-list ul>li>h2{margin:5px 0}.article-list ul>li>h2>a{font-size:16px;font-weight:700}.article-list ul>li:hover .fn-hidden{visibility:visible}.article-list .abstract{margin-top:5px;color:#616161;display:block;text-decoration:none}.article-list .abstract-img{width:180px;height:135px;border-radius:2px;margin-left:10px;background-size:cover;background-position:center center}.article-list ul>li>h2>a:visited,.article-list .abstract:visited{color:#999}.article-list .author{color:#616161;font-weight:600}.article-list .list-info{line-height:18px}.heat{position:absolute;height:5px;background-color:#e59230;z-index:1;bottom:-3px;right:0}.point,.point-remove{position:absolute;height:5px;background-color:#e59230;z-index:1;bottom:-3px;right:0px;width:5px;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:slideInRight;animation-name:slideInRight}.point-remove{animation-name:slideInLeft;-webkit-animation-name:slideInLeft}@keyframes slideInLeft{0%{right:0}100%{right:100%}}@-webkit-keyframes slideInLeft{0%{right:0}100%{right:100%}}@keyframes slideInRight{0%{right:100%}100%{right:0}}@-webkit-keyframes slideInRight{0%{right:100%}100%{right:0}}.article-level0{color:#878787}.article-level1{color:#fc0}.article-level2{color:#ffc1cc}.article-level3{color:#f63}.article-level4{color:#e59230}.recent-rss{color:#f93 !important;float:right;margin:2px 0 0 10px}.recent-rss:hover{color:#4285f4 !important}.domain-rss{color:#f93 !important}.domain-rss svg{vertical-align:sub}.domain-rss:hover{color:#4285f4 !important}.verify{background-color:#fff}.verify .intro{padding:100px 50px;background-color:#f1f7fe;width:40%;color:#616161}.verify .verify-wrap{width:60%}.verify .form{font-size:14px;line-height:1.6;width:250px;margin:100px auto}.verify .form>svg{margin:0 auto;display:block;height:100px;width:100px}.verify .form input[type=text],.verify .form input[type=password]{margin:10px 0;width:100%;padding-left:36px;background-color:#fff}.verify .form button{margin:10px 0;width:100%}.verify .form .input-wrap{position:relative}.verify .form .input-wrap svg{color:#787777;position:absolute;top:19px;left:10px}.verify .form .captcha-img{top:11px;position:absolute;height:31px;left:1px;border-radius:3px 0 0 3px}.verify .form input.captcha-input{padding-left:91px}.guide .guide-tab,.guide .step-btn{margin:50px}.guide .guide-tab svg{height:100px;width:100px}.guide .form{margin:0;width:auto}.guide #avatarUpload label{margin-top:0}.guide .tag-desc>li{margin:0 20px 20px 0}.guide .tag-desc>li>div{left:-3px;right:inherit;border-radius:0px 3px 3px 3px}.guide .tag-desc li.current>a{background-color:#4285f4;color:#fff;border-color:rgba(0,0,0,.02)}.guide .intro dl{margin-left:50px}.guide .intro dd{margin-bottom:50px}.guide .intro dt{position:relative}.guide .intro dt.current{color:#ffac45}.guide .intro dt .index{position:absolute;left:-38px;font-size:46px;top:-13px;font-family:serif;font-weight:600}.guide .fn-flex>div{padding:10px;width:50%}.guide .md{background-color:#f1f7fe}.guide .md pre{white-space:pre-wrap;word-wrap:break-word}.tag-articles .article-info{padding:15px 15px 0;margin-bottom:15px}.tag-articles .desc,.tag-articles .tag-articles-tag-desc.tag-desc{margin:0 15px}.tag-articles .tag-articles-tag-desc.tag-desc>li{margin:0 15px 15px 0}.tag-articles .tag-articles-tag-desc.tag-desc>li>div{left:-3px;right:auto;border-radius:0 3px 3px 3px}code.prettyprint{display:inline;border:none;background-color:initial;border-radius:initial;padding:initial}code .str{color:initial}code .kwd{color:initial}code .com{color:initial;font-style:italic}code .typ{color:initial}code .lit{color:initial}code .pun{color:initial}code .pln{color:initial}code .tag{color:initial}code .atn{color:initial}code .atv{color:initial}code .dec{color:initial}.activity{min-height:300px}.activity .list .ft-fade{margin-top:6px;display:block}#charCanvas{border:1px solid #eee;border-radius:5px;background-color:#fff;display:block;background-image:url(../images/m-char.png);background-size:cover;margin:20px auto}#paintCanvas{border:1px solid #eee;border-radius:5px;background-color:#fff;display:block;background-size:cover;margin:20px auto}#snakeCanvas,#gobangCanvas{margin:20px auto;display:block}.snak-rank{margin:30px 15px 0}.snak-rank .module:last-child{margin-left:20px;margin-bottom:20px}.snak-rank .count{position:absolute;top:10px;right:10px}.sub-head .avatar-small{height:24px;width:24px;vertical-align:-3px}.sub-head .ft-13{font-weight:normal}.chat-room .online-cnt{line-height:33px;margin-right:10px;color:#787777}.chat-room .list{height:200px;overflow:auto}.chat-room .form.fn-content{background-color:#f1f7fe}.chat-room #comments li img{max-height:400px;max-width:600px}.index .index-main{width:60%}.index .index-side{margin-left:2px;width:40%}.index .article-list .heat{display:none}.index .more{display:block;text-align:right}.index .index-tabs>span{flex:1;display:inline-block;vertical-align:middle;line-height:40px;cursor:pointer;transform:translateZ(0);backface-visibility:hidden;position:relative;transition-property:color;transition-duration:.3s;text-align:center;border-bottom:2px solid #4285f4;background-color:#fff;color:#787777;overflow:hidden}.index .index-tabs>span a{color:#2c2c2c;text-decoration:none;display:block}.index .index-tabs>span a svg{vertical-align:text-bottom}.index .index-tabs>span.current,.index .index-tabs>span.current:hover{color:#2c2c2c}.index .index-tabs>span.tags{border-bottom-color:#569e3d;margin:0 2px}.index .index-tabs>span.users{border-bottom-color:#f1e05a}.index .index-tabs>span.perfect{border-bottom-color:#e59230}.index .index-tabs>span.check{border-bottom-color:#563d7c;margin:0 2px}.index .index-tabs>span.post{border-bottom-color:#ffac45}.index .index-tabs>span:hover,.index .index-tabs>span:hover a{color:#fff}.index .index-tabs>span:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background-color:#4285f4;transform:scaleY(0);transform-origin:50% 100%;transition:transform .3s ease-out}.index .index-tabs>span.tags:before{background-color:#569e3d}.index .index-tabs>span.users:before{background-color:#f1e05a}.index .index-tabs>span.perfect:before{background-color:#e59230}.index .index-tabs>span.check:before{background-color:#563d7c}.index .index-tabs>span.post:before{background-color:#ffac45}.index .index-tabs>span:hover:before{transform:scaleY(1)}.index .index-tabs>span.current:hover:before{transform:scaleY(0)}.index .index-tabs>span>svg{display:none;vertical-align:text-top}.index .index-tabs>span.current>svg{display:inline-block}.index .perfect-panel{background-color:#f1f7fe}.index .perfect-panel .avatar-small{position:absolute;left:10px}.index .perfect-panel .fn-ellipsis{padding:0 50px 0 30px;display:block;box-sizing:border-box;line-height:20px}.index .perfect-panel .count{position:absolute;right:10px;top:17px}.index .metro-item{flex:1;width:215px;height:215px;text-align:center;overflow:hidden;position:relative;margin-right:2px;margin-bottom:2px}.index .metro-item .calendar-container{height:100%;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.index .metro-item .calendar-container .canendar-body{height:75%;width:60%;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:20px 20px 5px 5px;box-shadow:0 2px 4px rgba(0,0,0,.5);transition:all .15s ease-in-out}.index .metro-item .calendar-container .canendar-body .calendar-head{height:33%;font-size:13px;background:#be4145;border-radius:10px 10px 0 0;width:100%;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center}.index .metro-item .calendar-container .canendar-body .calendar-content{height:67%;font-size:80px;font-weight:bold;color:#333;background:#fff;width:100%;border-radius:0 0 5px 5px}.index .metro-item .calendar-container .canendar-body:hover{box-shadow:0 5px 10px rgba(0,0,0,.5)}.index .metro-item .preview{height:100%;width:100%;padding-top:108px;position:relative;box-sizing:border-box;display:block;transition:all .2s ease-out 0s;color:#999;text-decoration:none}.index .metro-item .preview:hover{background-color:rgba(0,0,0,.02);color:#2c2c2c}.index .metro-item .preview img{transition:all .2s ease-out 0s;margin-top:-48px;height:60px;width:60px}.index .metro-item .preview:hover>img{border-radius:30px}.index .metro-item .preview>b{display:block;margin-top:20px;font-weight:normal}.index .tag-metro-item{text-align:center;overflow:hidden;position:relative;margin-right:15px;width:40px;margin-bottom:15px}.index .tag-metro-item .preview{height:100%;width:100%;position:relative;box-sizing:border-box;display:block;transition:all .2s ease-out 0s;color:#999;text-decoration:none}.index .tag-metro-item .preview:hover{background-color:rgba(0,0,0,.02);color:#2c2c2c}.index .tag-metro-item .preview img{transition:all .2s ease-out 0s;margin-top:0px;height:40px;width:40px}.index .tag-metro-item .preview:hover>img{border-radius:30px}.index .tag-metro-item .preview>b{display:block;font-weight:normal;white-space:nowrap}.index__bottom{background-color:rgba(0,0,0,.02);padding-top:20px;margin-top:20px}.index .metro-border>div{height:2px;flex:1;background-color:#4285f4;margin-right:2px;margin-top:-2px}.index .metro-border>div.yellow{background-color:#f1e05a}.index .metro-border>div.green{background-color:#569e3d}.index .metro-border>div.red{background-color:#d23f31}.index .metro-border>div.purple{background-color:#563d7c}.index .ad img{width:100%}@keyframes ripple{to{transform:scale(2);opacity:0}}.ripple{position:absolute;background:rgba(0,0,0,.15);border-radius:100%;transform:scale(0);pointer-events:none;animation:ripple .75s ease-out;content:" ";width:100%;height:100%}.symhub li a{color:#616161;vertical-align:middle;font-size:16px;line-height:20px}.symhub li:last-child{border-bottom:0}.top-ranking{border-top:1px solid #eee;padding-top:15px}.cake{animation:move 3s 0s infinite;-webkit-animation:move 3s 0s infinite;transform-origin:bottom;-webkit-transform-origin:bottom}@keyframes move{0%,65%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}70%{-webkit-transform:rotate(6deg);transform:rotate(6deg)}75%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}80%{-webkit-transform:rotate(6deg);transform:rotate(6deg)}85%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}90%{-webkit-transform:rotate(6deg);transform:rotate(6deg)}95%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes move{0%,65%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}70%{-webkit-transform:rotate(6deg);transform:rotate(6deg)}75%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}80%{-webkit-transform:rotate(6deg);transform:rotate(6deg)}85%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}90%{-webkit-transform:rotate(6deg);transform:rotate(6deg)}95%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}#chatRoomIndex li img{max-width:150px;max-height:150px}.comment__reply{padding:15px}.comment__reply .reply__text{color:#4285f4;cursor:pointer;border:1px solid #eee;line-height:37px;border-radius:3px;padding:0 10px}.article__meta{background-color:#f6f8fa;color:rgba(0,0,0,.38);font-size:12px;transition:all .15s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:3px;display:flex}.article__meta a{outline:0;text-decoration:none}.article__meta #articleMeta{height:38px;overflow:hidden;margin:15px 0 0 5px}.article__meta .meta__more{float:right;margin:0 15px 0 0;cursor:pointer;height:38px}.article__meta .avatar{height:68px;width:68px;border-radius:3px 0 3px 0}.article__meta .article__titles{text-align:center;width:68px}.article__meta .article__titles span{margin:15px 1px 0;display:inline-block}.ft-a-title{color:#616161 !important;text-decoration:none}.article__stats{font-size:12px;line-height:18px;text-align:center;color:#8b8b8b;margin-right:15px;float:left}.article__view{line-height:16px;color:#8b8b8b;margin:15px 0 15px 5px;text-align:right;border-top:1px solid #eee;padding:15px 0 0}.article__view .tooltipped__n{margin-right:15px}.article__view svg{margin-right:3px}.article__view .tooltipped__n:hover{color:var(--text-gray-color)}.article__cnt{font-size:14px;line-height:20px;display:block;color:rgba(0,0,0,.54)}.article-tail .article__cmt-refs,.article-tail .comment__action,.article__meta{margin-top:15px}.article-tail{padding-top:15px}.article-tail .tag-desc>li{margin-bottom:0}.article-tail .tag-desc>li>a{float:left;color:var(--layer-color);padding:2px 5px;border:1px solid rgba(0,0,0,0);position:relative;height:20px;white-space:nowrap;word-wrap:normal;background-color:var(--background-secondary-color);border-radius:3px 3px 3px 3px;line-height:21px}.article-tail .tag-desc>li>a>div{border-radius:2px 2px 2px 2px;height:16px;width:16px;float:left;margin:2px 3px 0 0;background-image:none;background-color:rgba(0,0,0,.02);background-size:cover;background-repeat:no-repeat;background-position:50%}.article-level0{color:var(--text-fade-color) !important}.fn__flex-inline{display:inline-flex;align-items:center}.article__stats--a:hover{text-decoration:none;color:var(--text-color)}.article__meta:hover{box-shadow:0 0 5px rgba(0,0,0,.2)}.article__stats--a:hover .article__cnt{color:var(--text-color) !important}.tag-desc>li:hover>a,.tag-desc>li>a.tag-desc--current{border-bottom-style:dotted;border-radius:3px 3px 0 0;z-index:2;color:var(--text-color);box-shadow:0 1px 2px rgba(0,0,0,.2)}.tag-desc>li>a{float:left;color:var(--layer-color);padding:2px 5px;border:1px solid rgba(0,0,0,0);position:relative;height:20px;white-space:nowrap;word-wrap:normal;background-color:var(--background-secondary-color);border-radius:3px 3px 3px 3px;line-height:21px}.tag-desc>li:hover>div{display:block}.tag-desc>li>div{-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-name:scale-in;animation-name:scale-in;-webkit-animation-timing-function:cubic-bezier(0.2, 0, 0.13, 1.5);animation-timing-function:cubic-bezier(0.2, 0, 0.13, 1.5);background-color:var(--background-secondary-color);border-radius:3px 0 3px 3px;display:none;right:0;margin-left:3px;padding:5px 10px;position:absolute;top:26px;z-index:41;width:200px;min-width:150px;box-shadow:0 1px 2px rgba(0,0,0,.2)}.tag-desc--right>li>div{left:-3px !important;right:auto !important;border-radius:0 3px 3px 3px !important}.article-tail .tag-desc>li{margin-bottom:0}.tag-desc>li{float:left;position:relative;list-style:none;margin:0 15px 15px 0;font-size:12px}.ft__smaller{font-size:12px}.chats__content .ft__smaller{font-weight:500;font-size:13px}.article__participant{float:left;cursor:pointer;width:42px;height:38px;padding-top:3px;box-sizing:border-box}.article__participant .avatar-small{border-radius:18px;height:32px;width:32px}.fn__space5{width:5px;display:inline-block}.fn__pointer{cursor:pointer}.article__meta .meta__more{float:right;margin:0 15px 0 0;cursor:pointer;height:38px}.ft-a-title:hover{color:var(--text-color) !important}.ft-a-title{color:var(--layer-color) !important;text-decoration:none}.chats__users{overflow:auto}.chats__users::-webkit-scrollbar{display:none}.chats__input{margin-bottom:15px}.chats__editor{min-height:160px}.chats__content{background-color:var(--background-secondary-color);border-radius:5px;padding:8px 15px;margin:0 53px 15px 15px;overflow:initial;max-width:85%;box-sizing:border-box}.chats__content .vditor-reset::-webkit-scrollbar{display:none}.chats__content .language-echarts,.chats__content .language-mermaid,.chats__content .language-mindmap,.chats__content iframe{max-width:510px;border:none !important}.chats__content .vditor-reset img:not(.emoji){max-width:150px;max-height:300px}.chats__arrow{position:relative}.chats__arrow:after{position:absolute;width:0;height:0;content:"";top:5px;left:-25px;border:5px solid rgba(0,0,0,0);border-right:5px solid var(--background-secondary-color)}.chats__item .avatar{position:relative;margin-right:0}.chats__item .avatar::after{content:"";position:absolute;width:38px;height:38px}.Christmas .avatar::after{right:-18px;top:-12px;transform:rotate(15deg);background:url("../images/festival/Christmas.png") no-repeat center center;background-size:cover}.NationalDay .avatar::after{right:0;top:0;background:url("../images/festival/NationalDay.png") no-repeat center center;background-size:cover}.MidAutumnFestival .avatar::after{right:-7px;top:-7px;width:52px;height:52px;background:url("../images/festival/MidAutumnFestival.png") no-repeat center center;background-size:cover}.SpringFestival .avatar::after{right:0;top:0;background:url("../images/festival/SpringFestival.png") no-repeat center center;background-size:cover}.chats__item--me{flex-direction:row-reverse}.chats__item--me .chats__content{margin:0 15px 15px 53px;background-color:rgba(98,162,240,.1)}.chats__item--me .chats__content .chats__arrow:after{right:-25px;border-left-color:rgba(98,162,240,.1);left:auto;border-right-color:rgba(0,0,0,0)}.ft__fade{color:var(--text-fade-color)}.fn__right{float:right}.action__item{line-height:18px;height:18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;transition:all .15s ease-in-out;cursor:pointer;display:inline-flex;align-items:center}.action__item,.comment__titles span{font-size:12px;color:var(--layer-color)}.fn__flex-center{-ms-grid-row-align:center;align-self:center}.details{display:inline-block;position:relative}.details>summary{list-style:none}.fn__layer{display:block;padding:5px 0;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-name:scale-in;animation-name:scale-in;-webkit-animation-timing-function:cubic-bezier(0.2, 0, 0.13, 1.5);animation-timing-function:cubic-bezier(0.2, 0, 0.13, 1.5);position:absolute;background-color:var(--layer-background-color);line-height:20px;box-shadow:0 1px 2px rgba(0,0,0,.6);border:1px solid var(--layer-border-color);border-radius:3px;min-width:180px;right:0;z-index:100}.action__item details-menu{right:-15px;top:20px}.details>summary{list-style:none}.details>summary::-webkit-details-marker,.details>summary:before{display:none}.details>summary:focus{outline:none}.details:not([open])>:not(summary){display:none}.details details-menu:after,.details details-menu:before{top:-14px;right:12px;left:auto;position:absolute;border:7px solid rgba(0,0,0,0);border-bottom:7px solid var(--layer-background-color);content:" "}.details details-menu:before{border-width:8px;border-bottom-color:var(--layer-border-color);top:-16px;right:11px}.fn__layer .item{display:block;text-shadow:0 1px 0 var(--layer-background-color);position:relative;padding:5px 10px;color:var(--layer-color);font-weight:400;width:100%;box-sizing:border-box;word-break:break-all}.fn__layer .item--current,.fn__layer .item:hover{text-decoration:none;background-color:var(--layer-hover-background-color);color:var(--layer-hover-color) !important;text-shadow:none}.fn__layer a:hover{text-decoration:underline}.chats__item--me{flex-direction:row-reverse}.pd__15{padding:15px}.user-card{-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-name:scale-in;animation-name:scale-in;-webkit-animation-timing-function:cubic-bezier(0.2, 0, 0.13, 1.5);animation-timing-function:cubic-bezier(0.2, 0, 0.13, 1.5);width:400px;box-shadow:0 3px 12px rgba(27,31,35,.15);background-color:var(--layer-background-color);min-height:50px;box-sizing:border-box;font-size:14px;border-radius:3px;border-top:1px solid rgba(0,0,0,0)}.user-card>div{padding:15px;border-radius:3px}.user-card--bg{width:460px !important;background-size:cover;background-position:50%}.user-card--bg .avatar-mid{width:120px !important;height:120px !important;top:65px !important}.user-card--bg>div{margin-top:120px;border-radius:0 0 3px 3px}.user-card--bg .user-card__info,.user-card--bg .user-card__name{margin-left:135px !important}.user-card__name{font-size:18px;line-height:22px;margin-left:92px}.user-card__name,.user-card__name:hover{color:var(--text-color)}.user-card__info{margin:8px 0;line-height:18px;font-size:14px;min-height:18px;overflow:hidden}.user-card__icons a,.user-card__icons span{margin-right:10px;float:left;height:20px}.user-card__icons a svg,.user-card__icons span svg{margin-top:2px;height:16px;width:16px;color:var(--text-gray-color);vertical-align:super}.user-card__icons a:hover{text-decoration:none}.user-card__icons a:hover svg{color:#4285f4}.user-card__icons img{float:left;margin-top:2px}.user-card__icon--disabled svg{opacity:.3}.user-card .avatar-mid-card{height:77px;width:77px;position:absolute;top:-39px;background-color:rgba(255,255,255,.8);background-size:100% 100%}.user-card .avatar-mid-card::after{content:"";position:absolute;width:77px;height:77px}.Christmas .avatar-mid-card::after{right:-36px;top:-20px;transform:rotate(22deg);background:url("../images/festival/Christmas.png") no-repeat center center;background-size:cover}.NationalDay .avatar-mid-card::after{right:0;top:0;background:url("../images/festival/NationalDay.png") no-repeat center center;background-size:cover}.NationalDay .user-card.user-card--bg .avatar-mid-card::after{width:105px;height:105px}.MidAutumnFestival .avatar-mid-card::after{right:-14px;top:-14px;width:100px;height:100px;background:url("../images/festival/MidAutumnFestival.png") no-repeat center center;background-size:cover}.MidAutumnFestival .user-card.user-card--bg .avatar-mid-card::after{right:-14px;top:-14px;width:130px;height:130px}.SpringFestival .avatar-mid-card::after{right:0;top:0;background:url("../images/festival/SpringFestival.png") no-repeat center center;background-size:cover}.SpringFestival .user-card.user-card--bg .avatar-mid-card::after{width:105px;height:105px}.old-almanac{width:320px;justify-content:center;align-items:center;flex-direction:column}.old-almanac .date{font-size:12pt;line-height:30pt;vertical-align:center;padding-left:10px;display:flex;flex-direction:column;align-items:center;justify-content:center}.old-almanac .split,.old-almanac .clear{clear:both;height:1px;overflow-y:hidden}.old-almanac .good,.old-almanac .bad{clear:both;position:relative}.old-almanac .good .title,.old-almanac .bad .title{float:left;width:100px;font-weight:bold;text-align:center;font-size:20pt;position:absolute;top:0;bottom:0}.old-almanac .good .title>table,.old-almanac .bad .title>table{position:absolute;width:100%;height:100%;border:none}.old-almanac .good .title{background:#fe4}.old-almanac .someday .good .title{background:#aaa}.old-almanac .bad .title{background:#f44;color:#fff}.old-almanac .someday .bad .title{background:#666;color:#fff}.old-almanac .good .content,.old-almanac .bad .content{margin-left:115px;padding-right:10px;padding-top:1px;font-size:15pt}.old-almanac .content-item{display:flex;flex-direction:column;align-items:flex-start}.old-almanac .someday .good{background:#ddd}.old-almanac .someday .bad{background:#aaa}.old-almanac .good{background:#ffa}.old-almanac .bad{background:#ffddd3}.old-almanac .content{height:100%;display:flex;flex-direction:column;justify-content:center}.old-almanac .content ul{list-style:none;margin:10px 0 0;padding:0}.old-almanac .content ul li{line-height:150%;font-size:12pt;font-weight:bold;color:#444}.old-almanac .content ul li div.description{font-size:11pt;font-weight:normal;color:#777;line-height:105%;margin-bottom:10px;text-align:left}.old-almanac .line-tip{font-size:11pt;margin-top:10px;margin-left:10px}.old-almanac .direction_value{color:#4a4;font-weight:bold;text-align:left}.old-almanac .someday .direction_value{color:#888}.old-almanac .goddes_value{color:#f87}.old-almanac .someday .goddes_value{color:#777}.old-almanac .tip{display:flex;padding-left:20px;flex-direction:column;align-items:flex-start;justify-content:center}.progress{background-color:rgba(100,100,100,.2);border-radius:5px;position:relative;margin:0 3px 0 10px;height:10px;width:100%}.progress-done{background:linear-gradient(to left, rgb(34, 199, 102), rgb(23, 154, 76));box-shadow:0 3px 3px -5px #22c766,0 2px 5px #22c766;border-radius:5px;height:10px;width:0;transition:width 1s ease .3s}.percent{color:#333;user-select:none}.review{border:1px solid rgba(0,0,0,0);border-radius:5px;color:#777;display:flex;font-size:12px;align-items:center;padding:0 10px 10px 10px;margin:5px 0}.chats__content .vditor-reset{overflow:visible}.hongbao__item{position:relative;background-color:var(--layer-background-color);color:var(--layer-color);cursor:pointer;padding:7px;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.2);margin:3px 5px 8px 3px}.hongbao__item:hover{box-shadow:0 0 3px rgba(0,0,0,.13),0 3px 6px rgba(0,0,0,.26)}.hongbao__finger_guessing{position:absolute;z-index:128;top:0;left:0;width:100%;height:100%;padding:5px;opacity:1;transition:.5s;box-sizing:border-box}.opened .hongbao__finger_guessing{display:none}.hongbao__finger_guessing_icon{position:absolute;right:-25px;width:45px;height:45px;border-radius:50%;border:2px solid rgba(0,0,0,0);transition:.2s}.hongbao__finger_guessing_icon:hover{border-color:#5c1151}.hongbao__finger_guessing_icon:nth-child(1){top:-25px;background:url("../images/redpacket/gesture/rock.png") no-repeat center center;background-size:contain}.hongbao__finger_guessing_icon:nth-child(2){top:15px;right:-50px;background:url("../images/redpacket/gesture/scissors.png") no-repeat center center;background-size:contain}.hongbao__finger_guessing_icon:nth-child(3){top:55px;background:url("../images/redpacket/gesture/paper.png") no-repeat center center;background-size:contain}.hongbao__icon{height:50px !important;width:50px !important;margin-right:7px}.hongbao__count{font-size:24px;margin:10px 0}.hide-list{--border-color: #d1d5da;--second-color: rgba(88, 96, 105, 0.36);--panel-background-color: #fff;--panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);--toolbar-background-color: #f6f8fa;--toolbar-icon-color: #586069;--toolbar-icon-hover-color: #4285f4;--toolbar-height: 35px;--toolbar-divider-margin-top: 8px;--textarea-background-color: #fafbfc;--textarea-text-color: #24292e;--resize-icon-color: var(--toolbar-icon-color);--resize-background-color: var(--toolbar-background-color);--resize-hover-icon-color: var(--panel-background-color);--resize-hover-background-color: var(--toolbar-icon-hover-color);--count-background-color: rgba(27, 31, 35, 0.05);--heading-border-color: #eaecef;--blockquote-color: #6a737d;--ir-heading-color: #660e7a;--ir-title-color: #808080;--ir-bi-color: #0033b3;--ir-link-color: #008000;--ir-bracket-color: #0000ff;--ir-paren-color: #008000;background-color:var(--panel-background-color);position:absolute;box-shadow:var(--panel-shadow);border-radius:3px;padding:5px;z-index:3;font-size:14px;display:none;user-select:none;max-width:320px;min-width:80px;animation-duration:.15s;animation-name:scale-in;animation-timing-function:cubic-bezier(0.2, 0, 0.13, 1.5);color:var(--toolbar-icon-color)}.hide-list-emojis{display:inline-block;overflow:auto}.hide-list-emojis button{cursor:pointer;border-radius:3px;float:left;height:72px;width:72px;text-align:center;line-height:26px;padding:3px;box-sizing:border-box;font-size:16px;transition:all .15s ease-in-out;border:0;margin:0;background-color:rgba(0,0,0,0);overflow:hidden}.hide-list-emojis__tail{margin-top:5px;font-size:12px;color:var(--toolbar-icon-color);display:flex}.hide-list-emojis__tail a{text-decoration:none;color:var(--toolbar-icon-color)}.hide-list-emojis__tail a:hover{color:var(--toolbar-icon-hover-color);cursor:pointer;text-decoration:none}.hide-list-emojis__tip{flex:1;min-width:1px;width:200px;margin-right:10px;color:var(--toolbar-icon-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.hide-list-emojis button:hover{text-decoration:none;border-color:rgba(0,0,0,.38);background-color:#eee}.hide-list-emojis button:active{background-color:rgba(0,0,0,.38);box-shadow:0 2px 4px rgba(0,0,0,.05) inset}.showList{display:block}.showList#emojiList{top:360px}.divX{text-align:right;cursor:pointer;height:15px}.divX>svg:hover{border:dashed red 1px;border-bottom-left-radius:100px}.TGIF__item{background-color:var(--layer-background-color);color:var(--layer-color);cursor:default;padding:10px;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.2);margin:0px 5px 10px 5px;transition:all .15s ease-in-out}.TGIF__item:hover{box-shadow:0 3px 6px rgba(0,0,0,.2)}.index-full-size{height:120px;border-radius:10px;margin-bottom:30px;color:#000;font-family:"Ma Shan Zheng",cursive;cursor:default}.index-full-size-white{background-color:rgba(229,228,228,.7);height:65px;border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.2);margin-bottom:18px;color:#303049;font-family:"Ma Shan Zheng",cursive;cursor:default} \ No newline at end of file +@font-face{font-family:HarmonyOS;src:url(//resource.hellofont.cn/font/HarmonyOS_SansSC_Regular-J.woff2) format("woff2"),url(//resource.hellofont.cn/font/HarmonyOS_SansSC_Regular-J.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:HarmonyOS;src:url(//resource.hellofont.cn/font/HarmonyOS_SansSC_Medium-J.woff2) format("woff2"),url(//resource.hellofont.cn/font/HarmonyOS_SansSC_Medium-J.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:HarmonyOS;src:url(//resource.hellofont.cn/font/HarmonyOS_SansSC_Bold-J.woff2) format("woff2"),url(//resource.hellofont.cn/font/HarmonyOS_SansSC_Bold-J.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:HarmonyOS;src:url(//resource.hellofont.cn/font/HarmonyOS_SansSC_Black-J.woff2) format("woff2"),url(//resource.hellofont.cn/font/HarmonyOS_SansSC_Black-J.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}:root{--background-color: #fff;--background-secondary-color: #f6f8fa;--text-color: #000;--text-gray-color: #787777;--text-fade-color: #878787;--layer-color: #616161;--layer-background-color: #fff;--layer-border-color: #eee;--layer-hover-color: #fff;--layer-hover-background-color: #4285f4;--header-background-color: #3b3e43;--toc-hover-color: #4285f4;--tab-current-background-color: var(--header-background-color);--box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15);--dialog-close-color: hsla(0, 0%, 100%, 0.54);--input-border-color: #d1d5da;--logo-hover-color: var(--header-background-color)}.domains-count{padding:10px 18px;font-size:18px;line-height:26px;color:#3b3e43;text-align:center;border:1px solid #eee;background-color:#fff;width:100%;box-sizing:border-box;margin-bottom:20px;box-shadow:0px 0px 2px rgba(98,124,153,.1)}.domains-module{margin:0}.module-list.domain .slogan{text-align:center;margin-top:-8px;width:60px}.module-list.domain .title{margin-left:80px}.article{padding-top:60px}.article .nav{position:fixed;top:0}.article .article-container{position:relative;margin:20px auto 20px;max-width:800px;background:#fff}.article .article-body .wrapper,.article .main .wrapper{display:block;max-width:768px}.article .main{min-height:inherit}.article .article-body{padding:20px 0}.article .article-info{font-size:12px;line-height:20px}.article .article-info .article-actions{line-height:60px;font-size:13px}.article h1.article-title{word-break:break-word;font-size:28px;font-weight:normal;padding-top:15px;text-align:center}.article h1.article-title svg{height:28px;width:28px;vertical-align:-4px}.article .article-content{padding-top:15px}.article #articleRewardContent{padding:15px 15px 41px 15px;background-image:-webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.9)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.9)), color-stop(0.75, rgba(255, 255, 255, 0.9)), color-stop(0.75, transparent), to(transparent));background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.9) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.9) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 75%, transparent 75%, transparent);background-color:#f7f7f7;background-size:45px 45px;position:relative}.article #articleRewardContent .vditor-reset>p{margin-bottom:0}.article #articleRewardContent>span{position:absolute;bottom:10px;right:10px;cursor:pointer}.article .share{position:absolute;top:100px;left:-60px;width:30px;font-size:22px;color:#616161;text-align:center}.article .share .article-clipboard{position:absolute;top:-100000px}.article .share svg{height:22px;width:22px}.article .share>span{display:block;margin-bottom:10px}.article .share #qrCode{position:absolute;top:87px;left:35px;border:5px solid #eee;z-index:1;height:90px;border-radius:3px;width:90px}.article .share #thankArticle .ft-13{margin-top:-3px;display:block}.article .article-header{position:fixed;top:-60px;display:flex;justify-content:space-around;align-items:center;width:100%;height:58px;z-index:83;line-height:38px;padding:0 10px;background-color:#fff;box-sizing:border-box;box-shadow:0 1px 2px rgba(0,0,0,.2);font-size:16px;transition:.5s}.article .article-header h1 svg{color:#2c2c2c;vertical-align:baseline;height:38px;width:38px}.article .article-header h2{font-size:24px;line-height:48px;font-weight:normal;margin:0 20px;transition:margin 1s cubic-bezier(0, 0, 0.2, 1)}.article .article-header .user-nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap}.article .article-header .user-nav>span,.article .article-header .user-nav>a{white-space:nowrap;padding:16px 10px;line-height:16px;height:16px;color:#616161;text-decoration:none}.article .article-header .user-nav>span:hover,.article .article-header .user-nav>a:hover{color:#2c2c2c}.article .article-header .user-nav>span.ft-red{color:#e59230}.article .article-header .user-nav svg{height:16px;width:16px}.article #articleToC{position:fixed;top:80px;width:20%;z-index:0;right:0;height:100%;border-radius:0;background:none}.article #articleToC .module-panel{overflow:auto;border-radius:0}.article #articleToC .article-toc li{list-style-type:none}.article #articleToC .article-toc li a{padding:5px 10px 5px 20px;border-left:2px solid rgba(0,0,0,0);display:block;line-height:20px;color:#767676}.article #articleToC .article-toc li a:last-child{border-bottom-width:0}.article #articleToC .article-toc li a:hover{border-left:1px solid #4285f4;background-color:#f7f7f7;padding-left:21px;color:#4285f4;text-decoration:none}.article #articleToC .article-toc li.current a{border-left:2px solid #4285f4;background-color:#f0f0f0;color:#4285f4}.article #articleToC .article-toc li.toc-h2 a,.article #articleToC .article-toc li.toc-h2.current a:hover{padding-left:34px}.article #articleToC .article-toc li.toc-h3 a,.article #articleToC .article-toc li.toc-h3.current a:hover{padding-left:48px}.article #articleToC .article-toc li.toc-h4 a,.article #articleToC .article-toc li.toc-h4.current a:hover{padding-left:62px}.article #articleToC .article-toc li.toc-h5 a,.article #articleToC .article-toc li.toc-h5.current a:hover{padding-left:86px}.article #articleToC .article-toc li.toc-h2 a:hover{padding-left:35px}.article #articleToC .article-toc li.toc-h3 a:hover{padding-left:49px}.article #articleToC .article-toc li.toc-h4 a:hover{padding-left:63px}.article #articleToC .article-toc li.toc-h5 a:hover{padding-left:87px}.article #revision .revisions{margin:5px 0 15px;text-align:center}.article #revision .revisions a{color:#616161;vertical-align:middle}.article #revision .revisions a:hover{color:#2c2c2c}.article #revision .revisions a.disabled{color:#878787;cursor:default}.article #revision .revisions span{margin:0 10px 0 10px}.article .editor-panel{position:fixed;width:100%;z-index:120;height:100%;box-sizing:border-box;bottom:-200%}.article .editor-panel .editor-bg{background-color:rgba(0,0,0,.5);height:100%;position:absolute;top:0;width:100%}.article .editor-panel .wrapper{background-color:#f1f7fe;bottom:0;z-index:121;position:absolute;padding:15px 10%;box-sizing:border-box;width:100%;max-width:initial}.article .editor-panel .wrapper #commentContent{max-height:600px}.article .editor-panel .wrapper .comment-submit{display:flex;align-items:center;margin-top:10px}.article .editor-panel .form{width:100%}.article .editor-panel .editor-hide{color:#616161;margin:-3px 0 6px;font-size:22px}.article .editor-panel .editor-hide:hover{color:#2c2c2c}#heatBar{position:fixed;top:2px;right:0px;width:100%;z-index:84}#thoughtProgress{height:2px;position:relative;margin-bottom:10px;margin-top:20px}#thoughtProgress .bar{position:absolute;background-color:#e0e0e0;height:2px}#thoughtProgress .icon-video{position:absolute;top:-8px;left:0;cursor:pointer;color:#e59230;margin-left:-10px}label.cmt-anonymous{margin:0 9px}label.cmt-anonymous input{margin-left:4px}.action-btns>span,.action-btns>a{color:#616161;text-decoration:none}.action-btns>span:hover,.action-btns>a:hover{color:#2c2c2c}.action-btns>span.ft-red,.action-btns>a.ft-red,.action-btns>span.ft-red:hover,.action-btns>a.ft-red:hover{color:#e59230}.action-btns>span.icon-reply-btn{color:#616161;font-weight:bold}.action-btns>span.icon-reply-btn:hover{color:#2c2c2c}.action-btns svg{vertical-align:text-top}.comments.module{margin-bottom:0}.comments .comments-header a{color:#878787;font-size:16px;text-decoration:none}.comments .comments-header a:hover{color:#787777}.comments .list>ul>li.cmt-shield-shield{background-image:-webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.9)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.9)), color-stop(0.75, rgba(255, 255, 255, 0.9)), color-stop(0.75, transparent), to(transparent));background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.9) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.9) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 75%, transparent 75%, transparent);background-color:#f7f7f7;background-size:45px 45px}.comments .list>ul>li.cmt-perfect,.comments .list>ul>li.cmt-perfect:hover{background-color:#f9f6f6}.comments .list>ul>li:hover .hover-show,.comments .list>ul>li.focus .fn-hidden{visibility:visible}.comments .list>ul>li:last-child{border-bottom-width:0}.comments .comment{margin:5px 0}.comments .comment img:not(.emoji){max-width:150px;max-height:300px}.comments .comment>p:last-child{margin-bottom:0px}.comments .comment>p>img:last-child{margin-bottom:10px}.comments .comment-info .avatar-small{vertical-align:bottom}.comments .comment-info a:hover{text-decoration:none}.comments .comment-action>.ft-fade>.fn-pointer:hover{color:#787777}.nice .comments>ul>li:last-child{border-bottom-width:0}.comment-get-comment.list>ul{padding:0}.comment-get-comment.list>ul>li{padding-top:0;border-bottom:1px solid #eee;margin-bottom:15px}.comment-get-comment.list>ul>li:last-child{border-bottom:1px solid #eee}.comment-replies.list>ul{margin-top:10px;padding:0}.comment-replies.list>ul>li{border-bottom-width:0;border-top:1px solid #eee}.comment-replies.list>ul>li{background-color:rgba(0,0,0,0)}#replyUseName{line-height:20px;height:20px}.img-preview{width:100%;height:100%;top:0;z-index:111;overflow:auto;cursor:zoom-out;transition:background-color .2s ease-in-out}.img-preview img{max-width:inherit;transition:transform .3s ease-in-out}.article-footer{margin-top:20px;max-width:768px}.article-footer .module{margin-left:20px}.article-footer .module:first-child{margin-left:0}#reportDialog{display:none}.article-list ul>li{padding:15px}.article-list .stick li:last-child{border-bottom-width:0}.article-list ul>li>h2{margin:5px 0}.article-list ul>li>h2>a{font-size:16px;font-weight:700}.article-list ul>li:hover .fn-hidden{visibility:visible}.article-list .abstract{margin-top:5px;color:#616161;display:block;text-decoration:none}.article-list .abstract-img{width:180px;height:135px;border-radius:2px;margin-left:10px;background-size:cover;background-position:center center}.article-list ul>li>h2>a:visited,.article-list .abstract:visited{color:#999}.article-list .author{color:#616161;font-weight:600}.article-list .list-info{line-height:18px}.heat{position:absolute;height:5px;background-color:#e59230;z-index:1;bottom:-3px;right:0}.point,.point-remove{position:absolute;height:5px;background-color:#e59230;z-index:1;bottom:-3px;right:0px;width:5px;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:slideInRight;animation-name:slideInRight}.point-remove{animation-name:slideInLeft;-webkit-animation-name:slideInLeft}@keyframes slideInLeft{0%{right:0}100%{right:100%}}@-webkit-keyframes slideInLeft{0%{right:0}100%{right:100%}}@keyframes slideInRight{0%{right:100%}100%{right:0}}@-webkit-keyframes slideInRight{0%{right:100%}100%{right:0}}.article-level0{color:#878787}.article-level1{color:#fc0}.article-level2{color:#ffc1cc}.article-level3{color:#f63}.article-level4{color:#e59230}.recent-rss{color:#f93 !important;float:right;margin:2px 0 0 10px}.recent-rss:hover{color:#4285f4 !important}.domain-rss{color:#f93 !important}.domain-rss svg{vertical-align:sub}.domain-rss:hover{color:#4285f4 !important}.verify{background-color:#fff}.verify .intro{padding:100px 50px;background-color:#f1f7fe;width:40%;color:#616161}.verify .verify-wrap{width:60%}.verify .form{font-size:14px;line-height:1.6;width:250px;margin:100px auto}.verify .form>svg{margin:0 auto;display:block;height:100px;width:100px}.verify .form input[type=text],.verify .form input[type=password]{margin:10px 0;width:100%;padding-left:36px;background-color:#fff}.verify .form button{margin:10px 0;width:100%}.verify .form .input-wrap{position:relative}.verify .form .input-wrap svg{color:#787777;position:absolute;top:19px;left:10px}.verify .form .captcha-img{top:11px;position:absolute;height:31px;left:1px;border-radius:3px 0 0 3px}.verify .form input.captcha-input{padding-left:91px}.guide .guide-tab,.guide .step-btn{margin:50px}.guide .guide-tab svg{height:100px;width:100px}.guide .form{margin:0;width:auto}.guide #avatarUpload label{margin-top:0}.guide .tag-desc>li{margin:0 20px 20px 0}.guide .tag-desc>li>div{left:-3px;right:inherit;border-radius:0px 3px 3px 3px}.guide .tag-desc li.current>a{background-color:#4285f4;color:#fff;border-color:rgba(0,0,0,.02)}.guide .intro dl{margin-left:50px}.guide .intro dd{margin-bottom:50px}.guide .intro dt{position:relative}.guide .intro dt.current{color:#ffac45}.guide .intro dt .index{position:absolute;left:-38px;font-size:46px;top:-13px;font-family:serif;font-weight:600}.guide .fn-flex>div{padding:10px;width:50%}.guide .md{background-color:#f1f7fe}.guide .md pre{white-space:pre-wrap;word-wrap:break-word}.tag-articles .article-info{padding:15px 15px 0;margin-bottom:15px}.tag-articles .desc,.tag-articles .tag-articles-tag-desc.tag-desc{margin:0 15px}.tag-articles .tag-articles-tag-desc.tag-desc>li{margin:0 15px 15px 0}.tag-articles .tag-articles-tag-desc.tag-desc>li>div{left:-3px;right:auto;border-radius:0 3px 3px 3px}code.prettyprint{display:inline;border:none;background-color:initial;border-radius:initial;padding:initial}code .str{color:initial}code .kwd{color:initial}code .com{color:initial;font-style:italic}code .typ{color:initial}code .lit{color:initial}code .pun{color:initial}code .pln{color:initial}code .tag{color:initial}code .atn{color:initial}code .atv{color:initial}code .dec{color:initial}.activity{min-height:300px}.activity .list .ft-fade{margin-top:6px;display:block}#charCanvas{border:1px solid #eee;border-radius:5px;background-color:#fff;display:block;background-image:url(../images/m-char.png);background-size:cover;margin:20px auto}#paintCanvas{border:1px solid #eee;border-radius:5px;background-color:#fff;display:block;background-size:cover;margin:20px auto}#snakeCanvas,#gobangCanvas{margin:20px auto;display:block}.snak-rank{margin:30px 15px 0}.snak-rank .module:last-child{margin-left:20px;margin-bottom:20px}.snak-rank .count{position:absolute;top:10px;right:10px}.sub-head .avatar-small{height:24px;width:24px;vertical-align:-3px}.sub-head .ft-13{font-weight:normal}.chat-room .online-cnt{line-height:33px;margin-right:10px;color:#787777}.chat-room .list{height:200px;overflow:auto}.chat-room .form.fn-content{background-color:#f1f7fe}.chat-room #comments li img{max-height:400px;max-width:600px}.index .index-main{width:60%}.index .index-side{margin-left:2px;width:40%}.index .article-list .heat{display:none}.index .more{display:block;text-align:right}.index .index-tabs>span{flex:1;display:inline-block;vertical-align:middle;line-height:40px;cursor:pointer;transform:translateZ(0);backface-visibility:hidden;position:relative;transition-property:color;transition-duration:.3s;text-align:center;border-bottom:2px solid #4285f4;background-color:#fff;color:#787777;overflow:hidden}.index .index-tabs>span a{color:#2c2c2c;text-decoration:none;display:block}.index .index-tabs>span a svg{vertical-align:text-bottom}.index .index-tabs>span.current,.index .index-tabs>span.current:hover{color:#2c2c2c}.index .index-tabs>span.tags{border-bottom-color:#569e3d;margin:0 2px}.index .index-tabs>span.users{border-bottom-color:#f1e05a}.index .index-tabs>span.perfect{border-bottom-color:#e59230}.index .index-tabs>span.check{border-bottom-color:#563d7c;margin:0 2px}.index .index-tabs>span.post{border-bottom-color:#ffac45}.index .index-tabs>span:hover,.index .index-tabs>span:hover a{color:#fff}.index .index-tabs>span:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background-color:#4285f4;transform:scaleY(0);transform-origin:50% 100%;transition:transform .3s ease-out}.index .index-tabs>span.tags:before{background-color:#569e3d}.index .index-tabs>span.users:before{background-color:#f1e05a}.index .index-tabs>span.perfect:before{background-color:#e59230}.index .index-tabs>span.check:before{background-color:#563d7c}.index .index-tabs>span.post:before{background-color:#ffac45}.index .index-tabs>span:hover:before{transform:scaleY(1)}.index .index-tabs>span.current:hover:before{transform:scaleY(0)}.index .index-tabs>span>svg{display:none;vertical-align:text-top}.index .index-tabs>span.current>svg{display:inline-block}.index .perfect-panel{background-color:#f1f7fe}.index .perfect-panel .avatar-small{position:absolute;left:10px}.index .perfect-panel .fn-ellipsis{padding:0 50px 0 30px;display:block;box-sizing:border-box;line-height:20px}.index .perfect-panel .count{position:absolute;right:10px;top:17px}.index .metro-item{flex:1;width:215px;height:215px;text-align:center;overflow:hidden;position:relative;margin-right:2px;margin-bottom:2px}.index .metro-item .calendar-container{height:100%;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.index .metro-item .calendar-container .canendar-body{height:75%;width:60%;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:20px 20px 5px 5px;box-shadow:0 2px 4px rgba(0,0,0,.5);transition:all .15s ease-in-out}.index .metro-item .calendar-container .canendar-body .calendar-head{height:33%;font-size:13px;background:#be4145;border-radius:10px 10px 0 0;width:100%;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center}.index .metro-item .calendar-container .canendar-body .calendar-content{height:67%;font-size:80px;font-weight:bold;color:#333;background:#fff;width:100%;border-radius:0 0 5px 5px}.index .metro-item .calendar-container .canendar-body:hover{box-shadow:0 5px 10px rgba(0,0,0,.5)}.index .metro-item .preview{height:100%;width:100%;padding-top:108px;position:relative;box-sizing:border-box;display:block;transition:all .2s ease-out 0s;color:#999;text-decoration:none}.index .metro-item .preview:hover{background-color:rgba(0,0,0,.02);color:#2c2c2c}.index .metro-item .preview img{transition:all .2s ease-out 0s;margin-top:-48px;height:60px;width:60px}.index .metro-item .preview:hover>img{border-radius:30px}.index .metro-item .preview>b{display:block;margin-top:20px;font-weight:normal}.index .tag-metro-item{text-align:center;overflow:hidden;position:relative;margin-right:15px;width:40px;margin-bottom:15px}.index .tag-metro-item .preview{height:100%;width:100%;position:relative;box-sizing:border-box;display:block;transition:all .2s ease-out 0s;color:#999;text-decoration:none}.index .tag-metro-item .preview:hover{background-color:rgba(0,0,0,.02);color:#2c2c2c}.index .tag-metro-item .preview img{transition:all .2s ease-out 0s;margin-top:0px;height:40px;width:40px}.index .tag-metro-item .preview:hover>img{border-radius:30px}.index .tag-metro-item .preview>b{display:block;font-weight:normal;white-space:nowrap}.index__bottom{background-color:rgba(0,0,0,.02);padding-top:20px;margin-top:20px}.index .metro-border>div{height:2px;flex:1;background-color:#4285f4;margin-right:2px;margin-top:-2px}.index .metro-border>div.yellow{background-color:#f1e05a}.index .metro-border>div.green{background-color:#569e3d}.index .metro-border>div.red{background-color:#d23f31}.index .metro-border>div.purple{background-color:#563d7c}.index .ad img{width:100%}@keyframes ripple{to{transform:scale(2);opacity:0}}.ripple{position:absolute;background:rgba(0,0,0,.15);border-radius:100%;transform:scale(0);pointer-events:none;animation:ripple .75s ease-out;content:" ";width:100%;height:100%}.symhub li a{color:#616161;vertical-align:middle;font-size:16px;line-height:20px}.symhub li:last-child{border-bottom:0}.top-ranking{border-top:1px solid #eee;padding-top:15px}.cake{animation:move 3s 0s infinite;-webkit-animation:move 3s 0s infinite;transform-origin:bottom;-webkit-transform-origin:bottom}@keyframes move{0%,65%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}70%{-webkit-transform:rotate(6deg);transform:rotate(6deg)}75%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}80%{-webkit-transform:rotate(6deg);transform:rotate(6deg)}85%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}90%{-webkit-transform:rotate(6deg);transform:rotate(6deg)}95%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes move{0%,65%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}70%{-webkit-transform:rotate(6deg);transform:rotate(6deg)}75%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}80%{-webkit-transform:rotate(6deg);transform:rotate(6deg)}85%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}90%{-webkit-transform:rotate(6deg);transform:rotate(6deg)}95%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}#chatRoomIndex li img{max-width:150px;max-height:150px}.comment__reply{padding:15px}.comment__reply .reply__text{color:#4285f4;cursor:pointer;border:1px solid #eee;line-height:37px;border-radius:3px;padding:0 10px}.article__meta{background-color:#f6f8fa;color:rgba(0,0,0,.38);font-size:12px;transition:all .15s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:3px;display:flex}.article__meta a{outline:0;text-decoration:none}.article__meta #articleMeta{height:38px;overflow:hidden;margin:15px 0 0 5px}.article__meta .meta__more{float:right;margin:0 15px 0 0;cursor:pointer;height:38px}.article__meta .avatar{height:68px;width:68px;border-radius:3px 0 3px 0}.article__meta .article__titles{text-align:center;width:68px}.article__meta .article__titles span{margin:15px 1px 0;display:inline-block}.ft-a-title{color:#616161 !important;text-decoration:none}.article__stats{font-size:12px;line-height:18px;text-align:center;color:#8b8b8b;margin-right:15px;float:left}.article__view{line-height:16px;color:#8b8b8b;margin:15px 0 15px 5px;text-align:right;border-top:1px solid #eee;padding:15px 0 0}.article__view .tooltipped__n{margin-right:15px}.article__view svg{margin-right:3px}.article__view .tooltipped__n:hover{color:var(--text-gray-color)}.article__cnt{font-size:14px;line-height:20px;display:block;color:rgba(0,0,0,.54)}.article-tail .article__cmt-refs,.article-tail .comment__action,.article__meta{margin-top:15px}.article-tail{padding-top:15px}.article-tail .tag-desc>li{margin-bottom:0}.article-tail .tag-desc>li>a{float:left;color:var(--layer-color);padding:2px 5px;border:1px solid rgba(0,0,0,0);position:relative;height:20px;white-space:nowrap;word-wrap:normal;background-color:var(--background-secondary-color);border-radius:3px 3px 3px 3px;line-height:21px}.article-tail .tag-desc>li>a>div{border-radius:2px 2px 2px 2px;height:16px;width:16px;float:left;margin:2px 3px 0 0;background-image:none;background-color:rgba(0,0,0,.02);background-size:cover;background-repeat:no-repeat;background-position:50%}.article-level0{color:var(--text-fade-color) !important}.fn__flex-inline{display:inline-flex;align-items:center}.article__stats--a:hover{text-decoration:none;color:var(--text-color)}.article__meta:hover{box-shadow:0 0 5px rgba(0,0,0,.2)}.article__stats--a:hover .article__cnt{color:var(--text-color) !important}.tag-desc>li:hover>a,.tag-desc>li>a.tag-desc--current{border-bottom-style:dotted;border-radius:3px 3px 0 0;z-index:2;color:var(--text-color);box-shadow:0 1px 2px rgba(0,0,0,.2)}.tag-desc>li>a{float:left;color:var(--layer-color);padding:2px 5px;border:1px solid rgba(0,0,0,0);position:relative;height:20px;white-space:nowrap;word-wrap:normal;background-color:var(--background-secondary-color);border-radius:3px 3px 3px 3px;line-height:21px}.tag-desc>li:hover>div{display:block}.tag-desc>li>div{-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-name:scale-in;animation-name:scale-in;-webkit-animation-timing-function:cubic-bezier(0.2, 0, 0.13, 1.5);animation-timing-function:cubic-bezier(0.2, 0, 0.13, 1.5);background-color:var(--background-secondary-color);border-radius:3px 0 3px 3px;display:none;right:0;margin-left:3px;padding:5px 10px;position:absolute;top:26px;z-index:41;width:200px;min-width:150px;box-shadow:0 1px 2px rgba(0,0,0,.2)}.tag-desc--right>li>div{left:-3px !important;right:auto !important;border-radius:0 3px 3px 3px !important}.article-tail .tag-desc>li{margin-bottom:0}.tag-desc>li{float:left;position:relative;list-style:none;margin:0 15px 15px 0;font-size:12px}.ft__smaller{font-size:12px}.chats__content .ft__smaller{font-weight:500;font-size:13px}.article__participant{float:left;cursor:pointer;width:42px;height:38px;padding-top:3px;box-sizing:border-box}.article__participant .avatar-small{border-radius:18px;height:32px;width:32px}.fn__space5{width:5px;display:inline-block}.fn__pointer{cursor:pointer}.article__meta .meta__more{float:right;margin:0 15px 0 0;cursor:pointer;height:38px}.ft-a-title:hover{color:var(--text-color) !important}.ft-a-title{color:var(--layer-color) !important;text-decoration:none}.chats__users{overflow:auto}.chats__users::-webkit-scrollbar{display:none}.chats__input{margin-bottom:15px}.chats__editor{min-height:160px}.chats__content{background-color:var(--background-secondary-color);border-radius:5px;padding:8px 15px;margin:0 53px 15px 15px;overflow:initial;max-width:85%;box-sizing:border-box}.chats__content .vditor-reset::-webkit-scrollbar{display:none}.chats__content .language-echarts,.chats__content .language-mermaid,.chats__content .language-mindmap,.chats__content iframe{max-width:510px;border:none !important}.chats__content .vditor-reset img:not(.emoji){max-width:150px;max-height:300px}.chats__arrow{position:relative}.chats__arrow:after{position:absolute;width:0;height:0;content:"";top:5px;left:-25px;border:5px solid rgba(0,0,0,0);border-right:5px solid var(--background-secondary-color)}.chats__item .avatar{position:relative;margin-right:0}.chats__item .avatar::after{content:"";position:absolute;width:38px;height:38px}.Christmas .avatar::after{right:-18px;top:-12px;transform:rotate(15deg);background:url("../images/festival/Christmas.png") no-repeat center center;background-size:cover}.NationalDay .avatar::after{right:0;top:0;background:url("../images/festival/NationalDay.png") no-repeat center center;background-size:cover}.MidAutumnFestival .avatar::after{right:-7px;top:-7px;width:52px;height:52px;background:url("../images/festival/MidAutumnFestival.png") no-repeat center center;background-size:cover}.SpringFestival .avatar::after{right:0;top:0;background:url("../images/festival/SpringFestival.png") no-repeat center center;background-size:cover}.chats__item--me{flex-direction:row-reverse}.chats__item--me .chats__content{margin:0 15px 15px 53px;background-color:rgba(98,162,240,.1)}.chats__item--me .chats__content .chats__arrow:after{right:-25px;border-left-color:rgba(98,162,240,.1);left:auto;border-right-color:rgba(0,0,0,0)}.ft__fade{color:var(--text-fade-color)}.fn__right{float:right}.action__item{line-height:18px;height:18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;transition:all .15s ease-in-out;cursor:pointer;display:inline-flex;align-items:center}.action__item,.comment__titles span{font-size:12px;color:var(--layer-color)}.fn__flex-center{-ms-grid-row-align:center;align-self:center}.details{display:inline-block;position:relative}.details>summary{list-style:none}.fn__layer{display:block;padding:5px 0;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-name:scale-in;animation-name:scale-in;-webkit-animation-timing-function:cubic-bezier(0.2, 0, 0.13, 1.5);animation-timing-function:cubic-bezier(0.2, 0, 0.13, 1.5);position:absolute;background-color:var(--layer-background-color);line-height:20px;box-shadow:0 1px 2px rgba(0,0,0,.6);border:1px solid var(--layer-border-color);border-radius:3px;min-width:180px;right:0;z-index:100}.action__item details-menu{right:-15px;top:20px}.details>summary{list-style:none}.details>summary::-webkit-details-marker,.details>summary:before{display:none}.details>summary:focus{outline:none}.details:not([open])>:not(summary){display:none}.details details-menu:after,.details details-menu:before{top:-14px;right:12px;left:auto;position:absolute;border:7px solid rgba(0,0,0,0);border-bottom:7px solid var(--layer-background-color);content:" "}.details details-menu:before{border-width:8px;border-bottom-color:var(--layer-border-color);top:-16px;right:11px}.fn__layer .item{display:block;text-shadow:0 1px 0 var(--layer-background-color);position:relative;padding:5px 10px;color:var(--layer-color);font-weight:400;width:100%;box-sizing:border-box;word-break:break-all}.fn__layer .item--current,.fn__layer .item:hover{text-decoration:none;background-color:var(--layer-hover-background-color);color:var(--layer-hover-color) !important;text-shadow:none}.fn__layer a:hover{text-decoration:underline}.chats__item--me{flex-direction:row-reverse}.pd__15{padding:15px}.user-card{-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-name:scale-in;animation-name:scale-in;-webkit-animation-timing-function:cubic-bezier(0.2, 0, 0.13, 1.5);animation-timing-function:cubic-bezier(0.2, 0, 0.13, 1.5);width:400px;box-shadow:0 3px 12px rgba(27,31,35,.15);background-color:var(--layer-background-color);min-height:50px;box-sizing:border-box;font-size:14px;border-radius:3px;border-top:1px solid rgba(0,0,0,0)}.user-card>div{padding:15px;border-radius:3px}.user-card--bg{width:460px !important;background-size:cover;background-position:50%}.user-card--bg .avatar-mid{width:120px !important;height:120px !important;top:65px !important}.user-card--bg>div{margin-top:120px;border-radius:0 0 3px 3px}.user-card--bg .user-card__info,.user-card--bg .user-card__name{margin-left:135px !important}.user-card__name{font-size:18px;line-height:22px;margin-left:92px}.user-card__name,.user-card__name:hover{color:var(--text-color)}.user-card__info{margin:8px 0;line-height:18px;font-size:14px;min-height:18px;overflow:hidden}.user-card__icons a,.user-card__icons span{margin-right:10px;float:left;height:20px}.user-card__icons a svg,.user-card__icons span svg{margin-top:2px;height:16px;width:16px;color:var(--text-gray-color);vertical-align:super}.user-card__icons a:hover{text-decoration:none}.user-card__icons a:hover svg{color:#4285f4}.user-card__icons img{float:left;margin-top:2px}.user-card__icon--disabled svg{opacity:.3}.user-card .avatar-mid-card{height:77px;width:77px;position:absolute;top:-39px;background-color:rgba(255,255,255,.8);background-size:100% 100%}.user-card .avatar-mid-card::after{content:"";position:absolute;width:77px;height:77px}.Christmas .avatar-mid-card::after{right:-36px;top:-20px;transform:rotate(22deg);background:url("../images/festival/Christmas.png") no-repeat center center;background-size:cover}.NationalDay .avatar-mid-card::after{right:0;top:0;background:url("../images/festival/NationalDay.png") no-repeat center center;background-size:cover}.NationalDay .user-card.user-card--bg .avatar-mid-card::after{width:105px;height:105px}.MidAutumnFestival .avatar-mid-card::after{right:-14px;top:-14px;width:100px;height:100px;background:url("../images/festival/MidAutumnFestival.png") no-repeat center center;background-size:cover}.MidAutumnFestival .user-card.user-card--bg .avatar-mid-card::after{right:-14px;top:-14px;width:130px;height:130px}.SpringFestival .avatar-mid-card::after{right:0;top:0;background:url("../images/festival/SpringFestival.png") no-repeat center center;background-size:cover}.SpringFestival .user-card.user-card--bg .avatar-mid-card::after{width:105px;height:105px}.old-almanac{width:320px;justify-content:center;align-items:center;flex-direction:column}.old-almanac .date{font-size:12pt;line-height:30pt;vertical-align:center;padding-left:10px;display:flex;flex-direction:column;align-items:center;justify-content:center}.old-almanac .split,.old-almanac .clear{clear:both;height:1px;overflow-y:hidden}.old-almanac .good,.old-almanac .bad{clear:both;position:relative}.old-almanac .good .title,.old-almanac .bad .title{float:left;width:100px;font-weight:bold;text-align:center;font-size:20pt;position:absolute;top:0;bottom:0}.old-almanac .good .title>table,.old-almanac .bad .title>table{position:absolute;width:100%;height:100%;border:none}.old-almanac .good .title{background:#fe4}.old-almanac .someday .good .title{background:#aaa}.old-almanac .bad .title{background:#f44;color:#fff}.old-almanac .someday .bad .title{background:#666;color:#fff}.old-almanac .good .content,.old-almanac .bad .content{margin-left:115px;padding-right:10px;padding-top:1px;font-size:15pt}.old-almanac .content-item{display:flex;flex-direction:column;align-items:flex-start}.old-almanac .someday .good{background:#ddd}.old-almanac .someday .bad{background:#aaa}.old-almanac .good{background:#ffa}.old-almanac .bad{background:#ffddd3}.old-almanac .content{height:100%;display:flex;flex-direction:column;justify-content:center}.old-almanac .content ul{list-style:none;margin:10px 0 0;padding:0}.old-almanac .content ul li{line-height:150%;font-size:12pt;font-weight:bold;color:#444}.old-almanac .content ul li div.description{font-size:11pt;font-weight:normal;color:#777;line-height:105%;margin-bottom:10px;text-align:left}.old-almanac .line-tip{font-size:11pt;margin-top:10px;margin-left:10px}.old-almanac .direction_value{color:#4a4;font-weight:bold;text-align:left}.old-almanac .someday .direction_value{color:#888}.old-almanac .goddes_value{color:#f87}.old-almanac .someday .goddes_value{color:#777}.old-almanac .tip{display:flex;padding-left:20px;flex-direction:column;align-items:flex-start;justify-content:center}.progress{background-color:rgba(100,100,100,.2);border-radius:5px;position:relative;margin:0 3px 0 10px;height:10px;width:100%}.progress-done{background:linear-gradient(to left, rgb(34, 199, 102), rgb(23, 154, 76));box-shadow:0 3px 3px -5px #22c766,0 2px 5px #22c766;border-radius:5px;height:10px;width:0;transition:width 1s ease .3s}.percent{color:#333;user-select:none}.review{border:1px solid rgba(0,0,0,0);border-radius:5px;color:#777;display:flex;font-size:12px;align-items:center;padding:0 10px 10px 10px;margin:5px 0}.chats__content .vditor-reset{overflow:visible}.hongbao__item{position:relative;background-color:var(--layer-background-color);color:var(--layer-color);cursor:pointer;padding:7px;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.2);margin:3px 5px 8px 3px}.hongbao__item:hover{box-shadow:0 0 3px rgba(0,0,0,.13),0 3px 6px rgba(0,0,0,.26)}.hongbao__finger_guessing{position:absolute;z-index:128;top:0;left:0;width:100%;height:100%;padding:5px;opacity:1;transition:.5s;box-sizing:border-box}.opened .hongbao__finger_guessing{display:none}.hongbao__finger_guessing_icon{position:absolute;right:-25px;width:45px;height:45px;border-radius:50%;border:2px solid rgba(0,0,0,0);transition:.2s}.hongbao__finger_guessing_icon:hover{border-color:#5c1151}.hongbao__finger_guessing_icon:nth-child(1){top:-25px;background:url("../images/redpacket/gesture/rock.png") no-repeat center center;background-size:contain}.hongbao__finger_guessing_icon:nth-child(2){top:15px;right:-50px;background:url("../images/redpacket/gesture/scissors.png") no-repeat center center;background-size:contain}.hongbao__finger_guessing_icon:nth-child(3){top:55px;background:url("../images/redpacket/gesture/paper.png") no-repeat center center;background-size:contain}.hongbao__icon{height:50px !important;width:50px !important;margin-right:7px}.hongbao__count{font-size:24px;margin:10px 0}.hide-list{--border-color: #d1d5da;--second-color: rgba(88, 96, 105, 0.36);--panel-background-color: #fff;--panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);--toolbar-background-color: #f6f8fa;--toolbar-icon-color: #586069;--toolbar-icon-hover-color: #4285f4;--toolbar-height: 35px;--toolbar-divider-margin-top: 8px;--textarea-background-color: #fafbfc;--textarea-text-color: #24292e;--resize-icon-color: var(--toolbar-icon-color);--resize-background-color: var(--toolbar-background-color);--resize-hover-icon-color: var(--panel-background-color);--resize-hover-background-color: var(--toolbar-icon-hover-color);--count-background-color: rgba(27, 31, 35, 0.05);--heading-border-color: #eaecef;--blockquote-color: #6a737d;--ir-heading-color: #660e7a;--ir-title-color: #808080;--ir-bi-color: #0033b3;--ir-link-color: #008000;--ir-bracket-color: #0000ff;--ir-paren-color: #008000;background-color:var(--panel-background-color);position:absolute;box-shadow:var(--panel-shadow);border-radius:3px;padding:5px;z-index:3;font-size:14px;display:none;user-select:none;max-width:320px;min-width:80px;animation-duration:.15s;animation-name:scale-in;animation-timing-function:cubic-bezier(0.2, 0, 0.13, 1.5);color:var(--toolbar-icon-color)}.hide-list-emojis{display:inline-block;overflow:auto}.hide-list-emojis button{cursor:pointer;border-radius:3px;float:left;height:72px;width:72px;text-align:center;line-height:26px;padding:3px;box-sizing:border-box;font-size:16px;transition:all .15s ease-in-out;border:0;margin:0;background-color:rgba(0,0,0,0);overflow:hidden}.hide-list-emojis__tail{margin-top:5px;font-size:12px;color:var(--toolbar-icon-color);display:flex}.hide-list-emojis__tail a{text-decoration:none;color:var(--toolbar-icon-color)}.hide-list-emojis__tail a:hover{color:var(--toolbar-icon-hover-color);cursor:pointer;text-decoration:none}.hide-list-emojis__tip{flex:1;min-width:1px;width:200px;margin-right:10px;color:var(--toolbar-icon-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.hide-list-emojis button:hover{text-decoration:none;border-color:rgba(0,0,0,.38);background-color:#eee}.hide-list-emojis button:active{background-color:rgba(0,0,0,.38);box-shadow:0 2px 4px rgba(0,0,0,.05) inset}.showList{display:block}.showList#emojiList{top:360px}.divX{text-align:right;cursor:pointer;height:15px}.divX>svg:hover{border:dashed red 1px;border-bottom-left-radius:100px}.TGIF__item{background-color:var(--layer-background-color);color:var(--layer-color);cursor:default;padding:10px;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.2);margin:0px 5px 10px 5px;transition:all .15s ease-in-out}.TGIF__item:hover{box-shadow:0 3px 6px rgba(0,0,0,.2)}.index-full-size{height:120px;border-radius:10px;margin-bottom:30px;color:#000;font-family:"Ma Shan Zheng",cursive;cursor:default}.index-full-size-white{background-color:rgba(229,228,228,.7);height:65px;border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.2);margin-bottom:18px;color:#303049;font-family:"Ma Shan Zheng",cursive;cursor:default}.hide-me{display:none}.login-qrcode-box{position:relative;margin:10px;text-align:center}.login-qrcode-box.scan-ing::after{content:"处理中...";position:absolute;top:0;left:50%;width:150px;height:150px;background:rgba(0,0,0,.7);line-height:150px;text-align:center;font-size:16px;color:#fff;transform:translateX(-50%)} \ No newline at end of file diff --git a/src/main/resources/js/verify.js b/src/main/resources/js/verify.js index 5a1ae104..c1ae3aca 100644 --- a/src/main/resources/js/verify.js +++ b/src/main/resources/js/verify.js @@ -34,13 +34,15 @@ var Verify = { */ login: function (goto) { goto = decodeURIComponent(goto) - if (Validate.goValidate({target: $('#loginTip'), + if (Validate.goValidate({ + target: $('#loginTip'), data: [{ - "target": $("#nameOrEmail"), - "type": "string", - "max": 256, - "msg": Label.loginNameErrorLabel - }]})) { + "target": $("#nameOrEmail"), + "type": "string", + "max": 256, + "msg": Label.loginNameErrorLabel + }] + })) { var requestJSONObject = { nameOrEmail: $("#nameOrEmail").val().replace(/(^\s*)|(\s*$)/g, ""), userPassword: calcMD5($("#loginPassword").val()), @@ -63,11 +65,11 @@ var Verify = { if (result.needCaptcha && "" !== result.needCaptcha) { $('#captchaImg').parent().show(); $("#captchaImg").attr("src", Label.servePath + "/captcha/login?needCaptcha=" - + result.needCaptcha + "&t=" + Math.random()) - .click(function () { - $(this).attr('src', Label.servePath + "/captcha/login?needCaptcha=" - + result.needCaptcha + "&t=" + Math.random()) - }); + + result.needCaptcha + "&t=" + Math.random()) + .click(function () { + $(this).attr('src', Label.servePath + "/captcha/login?needCaptcha=" + + result.needCaptcha + "&t=" + Math.random()) + }); } } } @@ -78,17 +80,19 @@ var Verify = { * @description Register Step 1 */ register: function () { - if (Validate.goValidate({target: $("#registerTip"), + if (Validate.goValidate({ + target: $("#registerTip"), data: [{ - "target": $("#registerUserName"), - "msg": Label.invalidUserNameLabel, - "type": 'string', - 'max': 20 - }, { - "target": $("#registerUserPhone"), - "msg": "手机号码不合法", - "type": "phone" - }]})) { + "target": $("#registerUserName"), + "msg": Label.invalidUserNameLabel, + "type": 'string', + 'max': 20 + }, { + "target": $("#registerUserPhone"), + "msg": "手机号码不合法", + "type": "phone" + }] + })) { var requestJSONObject = { userName: $("#registerUserName").val().replace(/(^\s*)|(\s*$)/g, ""), userPhone: $("#registerUserPhone").val().replace(/(^\s*)|(\s*$)/g, ""), @@ -134,18 +138,20 @@ var Verify = { * @description Register Step 2 */ register2: function () { - if (Validate.goValidate({target: $("#registerTip2"), + if (Validate.goValidate({ + target: $("#registerTip2"), data: [{ - "target": $("#registerUserPassword2"), - "msg": Label.invalidPasswordLabel, - "type": 'password', - 'max': 20 - }, { - "target": $("#registerConfirmPassword2"), - "original": $("#registerUserPassword2"), - "msg": Label.confirmPwdErrorLabel, - "type": "confirmPassword" - }]})) { + "target": $("#registerUserPassword2"), + "msg": Label.invalidPasswordLabel, + "type": 'password', + 'max': 20 + }, { + "target": $("#registerConfirmPassword2"), + "original": $("#registerUserPassword2"), + "msg": Label.confirmPwdErrorLabel, + "type": "confirmPassword" + }] + })) { var requestJSONObject = { userAppRole: $("input[name=userAppRole]:checked").val(), userPassword: calcMD5($("#registerUserPassword2").val()), @@ -178,17 +184,19 @@ var Verify = { * @description Forget password */ forgetPwd: function () { - if (Validate.goValidate({target: $("#fpwdTip"), + if (Validate.goValidate({ + target: $("#fpwdTip"), data: [{ - "target": $("#fpwdPhone"), - "msg": "手机号码不合法", - "type": "phone" - }, { - "target": $("#fpwdSecurityCode"), - "msg": Label.captchaErrorLabel, - "type": 'string', - 'max': 4 - }]})) { + "target": $("#fpwdPhone"), + "msg": "手机号码不合法", + "type": "phone" + }, { + "target": $("#fpwdSecurityCode"), + "msg": Label.captchaErrorLabel, + "type": 'string', + 'max': 4 + }] + })) { var requestJSONObject = { userPhone: $("#fpwdPhone").val(), captcha: $("#fpwdSecurityCode").val() @@ -224,18 +232,20 @@ var Verify = { * @description Reset password */ resetPwd: function () { - if (Validate.goValidate({target: $("#rpwdTip"), + if (Validate.goValidate({ + target: $("#rpwdTip"), data: [{ - "target": $("#rpwdUserPassword"), - "msg": Label.invalidPasswordLabel, - "type": 'password', - 'max': 20 - }, { - "target": $("#rpwdConfirmPassword"), - "original": $("#rpwdUserPassword"), - "msg": Label.confirmPwdErrorLabel, - "type": "confirmPassword" - }]})) { + "target": $("#rpwdUserPassword"), + "msg": Label.invalidPasswordLabel, + "type": 'password', + 'max': 20 + }, { + "target": $("#rpwdConfirmPassword"), + "original": $("#rpwdUserPassword"), + "msg": Label.confirmPwdErrorLabel, + "type": "confirmPassword" + }] + })) { var requestJSONObject = { userPassword: calcMD5($("#rpwdUserPassword").val()), userId: $("#rpwdUserId").val(), @@ -346,7 +356,7 @@ var Verify = { sortBy: step2Sort }); step2Sort = (step2Sort === 'random' ? 'original-order' : 'random'); - $('.tag-desc').on( 'arrangeComplete', function () { + $('.tag-desc').on('arrangeComplete', function () { $('.step-btn .green, .step-btn .red').prop('disabled', false); }); if ($('.tag-desc li').length < 2) { @@ -362,11 +372,11 @@ var Verify = { $('.guide-tab > div:eq(3)').show(); $('.intro dt:eq(3)').addClass('current'); - $('.step-btn .red').show(); - $('.step-btn .green').text(Label.nextStepLabel); + $('.step-btn .red').show(); + $('.step-btn .green').text(Label.nextStepLabel); - $('.intro > div').hide(); - $('.intro > dl').show(); + $('.intro > div').hide(); + $('.intro > dl').show(); break; case 5: $('.guide-tab > div:eq(4)').show(); @@ -425,5 +435,49 @@ var Verify = { $('.tag-desc li:eq(' + random + ')').addClass('current'); Util.follow(window, $('.tag-desc li:eq(' + random + ')').data('id'), 'tag'); + }, + /** + * 初始化二维码登录 + * + * */ + loginSocket: null, + initQrCodeLogin: function () { + this.loginSocket = new WebSocket('ws://localhost:8080/login-channel'); + this.loginSocket.onopen = (event) => { + console.log('连接打开'); + this.loginSocket.send(JSON.stringify({ + type: 1, + })) + }; + + this.loginSocket.onmessage = function (event) { + console.log('收到消息:', event.data); + let msg = event.data; + try { + let imgObj = document.querySelector("#qrcode_img"); + if (msg.indexOf("targetId") === 0) { + imgObj.src = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=web:" + msg.split(':')[1]; + } else if (msg.indexOf("apiKey") === 0) { + window.location.href = Label.servePath + "/loginWebInApiKey?apiKey=" + msg.split(':')[1]; + }else if(msg.indexOf("scan") === 0){ + let boxObj = document.querySelector("#login-qrcode-div"); + boxObj.classList.add("scan-ing") + } + } catch (e) { + + } + } + + this.loginSocket.onclose = (event)=> { + console.log('WebSocket 连接已关闭'); + }; + + this.loginSocket.onerror = (error) =>{ + console.log('WebSocket 出现错误:', error); + this.loginSocket.close(); + }; + }, + closeQrCodeLogin: function () { + this.loginSocket.close(); } }; diff --git a/src/main/resources/scss/index.scss b/src/main/resources/scss/index.scss index c89b9151..ca56b7f0 100644 --- a/src/main/resources/scss/index.scss +++ b/src/main/resources/scss/index.scss @@ -58,7 +58,7 @@ width: 100%; box-sizing: border-box; margin-bottom: 20px; - box-shadow: 0px 0px 2px rgba(98,124,153,.1); + box-shadow: 0px 0px 2px rgba(98, 124, 153, .1); } .domains-module { @@ -80,12 +80,13 @@ /* start article */ .article { padding-top: 60px; + .nav { position: fixed; top: 0; } - .article-container{ + .article-container { position: relative; margin: 20px auto 20px; max-width: 800px; @@ -137,36 +138,36 @@ #articleRewardContent { padding: 15px 15px 41px 15px; background-image: -webkit-gradient( - linear, - 0 0, - 100% 100%, - color-stop(0.25, rgba(255, 255, 255, 0.9)), - color-stop(0.25, transparent), - color-stop(0.5, transparent), - color-stop(0.5, rgba(255, 255, 255, 0.9)), - color-stop(0.75, rgba(255, 255, 255, 0.9)), - color-stop(0.75, transparent), - to(transparent) + linear, + 0 0, + 100% 100%, + color-stop(0.25, rgba(255, 255, 255, 0.9)), + color-stop(0.25, transparent), + color-stop(0.5, transparent), + color-stop(0.5, rgba(255, 255, 255, 0.9)), + color-stop(0.75, rgba(255, 255, 255, 0.9)), + color-stop(0.75, transparent), + to(transparent) ); background-image: -o-linear-gradient( - -45deg, - rgba(255, 255, 255, 0.9) 25%, - transparent 25%, - transparent 50%, - rgba(255, 255, 255, 0.9) 50%, - rgba(255, 255, 255, 0.9) 75%, - transparent 75%, - transparent + -45deg, + rgba(255, 255, 255, 0.9) 25%, + transparent 25%, + transparent 50%, + rgba(255, 255, 255, 0.9) 50%, + rgba(255, 255, 255, 0.9) 75%, + transparent 75%, + transparent ); background-image: linear-gradient( - -45deg, - rgba(255, 255, 255, 0.9) 25%, - transparent 25%, - transparent 50%, - rgba(255, 255, 255, 0.9) 50%, - rgba(255, 255, 255, 0.9) 75%, - transparent 75%, - transparent + -45deg, + rgba(255, 255, 255, 0.9) 25%, + transparent 25%, + transparent 50%, + rgba(255, 255, 255, 0.9) 50%, + rgba(255, 255, 255, 0.9) 75%, + transparent 75%, + transparent ); background-color: #f7f7f7; background-size: 45px 45px; @@ -257,12 +258,14 @@ margin: 0 20px; transition: margin 1s cubic-bezier(0, 0, 0.2, 1); } - .user-nav{ + + .user-nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; } + .user-nav > span, .user-nav > a { white-space: nowrap; @@ -418,9 +421,11 @@ box-sizing: border-box; width: 100%; max-width: initial; - #commentContent{ + + #commentContent { max-height: 600px; } + .comment-submit { display: flex; align-items: center; @@ -476,7 +481,8 @@ label.cmt-anonymous { margin: 0 9px; - input{ + + input { margin-left: 4px; } } @@ -529,36 +535,36 @@ label.cmt-anonymous { .list > ul > li.cmt-shield-shield { background-image: -webkit-gradient( - linear, - 0 0, - 100% 100%, - color-stop(0.25, rgba(255, 255, 255, 0.9)), - color-stop(0.25, transparent), - color-stop(0.5, transparent), - color-stop(0.5, rgba(255, 255, 255, 0.9)), - color-stop(0.75, rgba(255, 255, 255, 0.9)), - color-stop(0.75, transparent), - to(transparent) + linear, + 0 0, + 100% 100%, + color-stop(0.25, rgba(255, 255, 255, 0.9)), + color-stop(0.25, transparent), + color-stop(0.5, transparent), + color-stop(0.5, rgba(255, 255, 255, 0.9)), + color-stop(0.75, rgba(255, 255, 255, 0.9)), + color-stop(0.75, transparent), + to(transparent) ); background-image: -o-linear-gradient( - -45deg, - rgba(255, 255, 255, 0.9) 25%, - transparent 25%, - transparent 50%, - rgba(255, 255, 255, 0.9) 50%, - rgba(255, 255, 255, 0.9) 75%, - transparent 75%, - transparent + -45deg, + rgba(255, 255, 255, 0.9) 25%, + transparent 25%, + transparent 50%, + rgba(255, 255, 255, 0.9) 50%, + rgba(255, 255, 255, 0.9) 75%, + transparent 75%, + transparent ); background-image: linear-gradient( - -45deg, - rgba(255, 255, 255, 0.9) 25%, - transparent 25%, - transparent 50%, - rgba(255, 255, 255, 0.9) 50%, - rgba(255, 255, 255, 0.9) 75%, - transparent 75%, - transparent + -45deg, + rgba(255, 255, 255, 0.9) 25%, + transparent 25%, + transparent 50%, + rgba(255, 255, 255, 0.9) 50%, + rgba(255, 255, 255, 0.9) 75%, + transparent 75%, + transparent ); background-color: #f7f7f7; background-size: 45px 45px; @@ -1349,6 +1355,7 @@ code .dec { flex-direction: column; justify-content: center; align-items: center; + .canendar-body { height: 75%; width: 60%; @@ -1359,6 +1366,7 @@ code .dec { border-radius: 20px 20px 5px 5px; box-shadow: 0 2px 4px rgb(0 0 0 / 50%); transition: all .15s ease-in-out; + .calendar-head { height: 33%; font-size: 13px; @@ -1371,6 +1379,7 @@ code .dec { justify-content: center; align-items: center; } + .calendar-content { height: 67%; font-size: 80px; @@ -1381,6 +1390,7 @@ code .dec { border-radius: 0 0 5px 5px; } } + .canendar-body:hover { box-shadow: 0 5px 10px rgb(0 0 0 / 50%); } @@ -1902,6 +1912,7 @@ code .dec { .ft-a-title:hover { color: var(--text-color) !important; } + .ft-a-title { color: var(--layer-color) !important; text-decoration: none; @@ -1910,15 +1921,19 @@ code .dec { .chats__users { overflow: auto; } + .chats__users::-webkit-scrollbar { display: none; } + .chats__input { margin-bottom: 15px; } + .chats__editor { min-height: 160px; } + .chats__content { background-color: var(--background-secondary-color); border-radius: 5px; @@ -1928,9 +1943,11 @@ code .dec { max-width: 85%; box-sizing: border-box; } + .chats__content .vditor-reset::-webkit-scrollbar { display: none; } + .chats__content .language-echarts, .chats__content .language-mermaid, .chats__content .language-mindmap, @@ -1938,13 +1955,16 @@ code .dec { max-width: 510px; border: none !important; } + .chats__content .vditor-reset img:not(.emoji) { max-width: 150px; max-height: 300px; } + .chats__arrow { position: relative; } + .chats__arrow:after { position: absolute; width: 0; @@ -1955,6 +1975,7 @@ code .dec { border: 5px solid transparent; border-right: 5px solid var(--background-secondary-color); } + .chats__item .avatar { position: relative; margin-right: 0; @@ -1987,26 +2008,26 @@ code .dec { top: -7px; width: 52px; height: 52px; - background: url("../images/festival/MidAutumnFestival.png") no-repeat center - center; + background: url("../images/festival/MidAutumnFestival.png") no-repeat center center; background-size: cover; } .SpringFestival .avatar::after { right: 0; top: 0; - background: url("../images/festival/SpringFestival.png") no-repeat center - center; + background: url("../images/festival/SpringFestival.png") no-repeat center center; background-size: cover; } .chats__item--me { flex-direction: row-reverse; } + .chats__item--me .chats__content { margin: 0 15px 15px 53px; background-color: rgba(98, 162, 240, 0.1); } + .chats__item--me .chats__content .chats__arrow:after { right: -25px; border-left-color: rgba(98, 162, 240, 0.1); @@ -2252,6 +2273,7 @@ code .dec { background-color: hsla(0, 0%, 100%, 0.8); background-size: 100% 100%; } + .user-card .avatar-mid-card::after { content: ""; position: absolute; @@ -2284,10 +2306,10 @@ code .dec { top: -14px; width: 100px; height: 100px; - background: url("../images/festival/MidAutumnFestival.png") no-repeat center - center; + background: url("../images/festival/MidAutumnFestival.png") no-repeat center center; background-size: cover; } + .MidAutumnFestival .user-card.user-card--bg .avatar-mid-card::after { right: -14px; top: -14px; @@ -2298,8 +2320,7 @@ code .dec { .SpringFestival .avatar-mid-card::after { right: 0; top: 0; - background: url("../images/festival/SpringFestival.png") no-repeat center - center; + background: url("../images/festival/SpringFestival.png") no-repeat center center; background-size: cover; } @@ -2506,9 +2527,10 @@ code .dec { margin: 5px 0; } -.chats__content .vditor-reset{ +.chats__content .vditor-reset { overflow: visible; } + .hongbao__item { position: relative; background-color: var(--layer-background-color); @@ -2525,7 +2547,7 @@ code .dec { } -.hongbao__finger_guessing{ +.hongbao__finger_guessing { position: absolute; z-index: 128; top: 0; @@ -2540,17 +2562,18 @@ code .dec { transition: .5s; box-sizing: border-box; } + /*.hongbao__item:hover .hongbao__finger_guessing, .hongbao__item:active .hongbao__finger_guessing{ opacity: 1; background: rgba(0,0,0,.3); }*/ -.opened .hongbao__finger_guessing{ +.opened .hongbao__finger_guessing { display: none; } -.hongbao__finger_guessing_icon{ +.hongbao__finger_guessing_icon { position: absolute; right: -25px; width: 45px; @@ -2559,22 +2582,25 @@ code .dec { border: 2px solid transparent; transition: .2s; } -.hongbao__finger_guessing_icon:hover{ - border-color:#5c1151; + +.hongbao__finger_guessing_icon:hover { + border-color: #5c1151; } -.hongbao__finger_guessing_icon:nth-child(1){ +.hongbao__finger_guessing_icon:nth-child(1) { top: -25px; background: url("../images/redpacket/gesture/rock.png") no-repeat center center; background-size: contain; } -.hongbao__finger_guessing_icon:nth-child(2){ + +.hongbao__finger_guessing_icon:nth-child(2) { top: 15px; right: -50px; background: url("../images/redpacket/gesture/scissors.png") no-repeat center center; background-size: contain; } -.hongbao__finger_guessing_icon:nth-child(3){ + +.hongbao__finger_guessing_icon:nth-child(3) { top: 55px; background: url("../images/redpacket/gesture/paper.png") no-repeat center center; background-size: contain; @@ -2698,7 +2724,8 @@ code .dec { .showList { display: block; - &#emojiList{ + + &#emojiList { top: 360px; } } @@ -2707,6 +2734,7 @@ code .dec { text-align: right; cursor: pointer; height: 15px; + > svg:hover { border: dashed red 1px; border-bottom-left-radius: 100px; @@ -2747,3 +2775,30 @@ code .dec { font-family: "Ma Shan Zheng", cursive; cursor: default; } + + +/* 扫码登录 */ +.hide-me { + display: none; +} + +.login-qrcode-box { + position: relative; + margin: 10px; + text-align: center; + + &.scan-ing::after { + content: "处理中..."; + position: absolute; + top: 0; + left: 50%; + width: 150px; + height: 150px; + background: rgba(0, 0, 0, .7); + line-height: 150px; + text-align: center; + font-size: 16px; + color: #fff; + transform: translateX(-50%); + } +} \ No newline at end of file diff --git a/src/main/resources/skins/classic/verify/login.ftl b/src/main/resources/skins/classic/verify/login.ftl index 7a56b467..f0702479 100644 --- a/src/main/resources/skins/classic/verify/login.ftl +++ b/src/main/resources/skins/classic/verify/login.ftl @@ -21,63 +21,98 @@ <#include "../macro-head.ftl"> - - <@head title="${loginLabel} - ${symphonyLabel}"> + + <@head title="${loginLabel} - ${symphonyLabel}"> - - -<#-- --> - - - - <#include "../header.ftl"> -
-
-
-
- -
- - -
-
- - -
-
- - -
-
- - -
+ + + <#-- --> + + + +<#include "../header.ftl"> +
+
+
+
+ + + +
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + +
-
-
- ${rememberLoginStatusLabel} - ${forgetPwdLabel} -
-
+
+
+ ${rememberLoginStatusLabel} + ${forgetPwdLabel} +
+
-
- - -
+
+ + + +
+
+ + + + -
- ${introLabel} + +
+
- <#include "../footer.ftl"> - - - +
+ ${introLabel} +
+
+
+<#include "../footer.ftl"> + + +