html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;padding-top:46px}body{font-family:'Microsoft Yahei','微软雅黑','宋体',\5b8b\4f53,Tahoma,Arial,Helvetica,STHeiti;margin:0;background-color:#fff}.main-nav{margin-left:1px}.main-nav.nav-tabs.nav-stacked>li{}.main-nav.nav-tabs.nav-stacked>li>a{padding:10px 8px;font-size:12px;font-weight:600;color:#4A515B;background:#E9E9E9;background:-moz-linear-gradient(top,#FAFAFA 0%,#E9E9E9 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FAFAFA),color-stop(100%,#E9E9E9));background:-webkit-linear-gradient(top,#FAFAFA 0%,#E9E9E9 100%);background:-o-linear-gradient(top,#FAFAFA 0%,#E9E9E9 100%);background:-ms-linear-gradient(top,#FAFAFA 0%,#E9E9E9 100%);background:linear-gradient(top,#FAFAFA 0%,#E9E9E9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA',endColorstr='#E9E9E9');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA',endColorstr='#E9E9E9')";border:1px solid #D5D5D5;border-radius:4px}.main-nav.nav-tabs.nav-stacked>li>a>span{color:#4A515B}.main-nav.nav-tabs.nav-stacked>li.active>a,#main-nav.nav-tabs.nav-stacked>li>a:hover{color:#FFF;background:#3C4049;background:-moz-linear-gradient(top,#4A515B 0%,#3C4049 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#4A515B),color-stop(100%,#3C4049));background:-webkit-linear-gradient(top,#4A515B 0%,#3C4049 100%);background:-o-linear-gradient(top,#4A515B 0%,#3C4049 100%);background:-ms-linear-gradient(top,#4A515B 0%,#3C4049 100%);background:linear-gradient(top,#4A515B 0%,#3C4049 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B',endColorstr='#3C4049');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B',endColorstr='#3C4049')";border-color:#2B2E33}#main-nav.nav-tabs.nav-stacked>li.active>a,#main-nav.nav-tabs.nav-stacked>li>a:hover>span{}.main-nav.nav-tabs.nav-stacked>li{margin-bottom:4px}.nav-header.collapsed>span.glyphicon-chevron-toggle:before{content:"\e114"}.nav-header>span.glyphicon-chevron-toggle:before{content:"\e113"}footer.duomi-page-footer{background-color:white}footer.duomi-page-footer .beta-message{color:#a4a4a4}footer.duomi-page-footer .beta-message a{color:#53a2e4}footer.duomi-page-footer .list-inline a,footer.authenticated-footer .list-inline li{color:#a4a4a4;padding-bottom:30px}footer.duomi-page-footer{background-color:white}footer.duomi-page-footer .beta-message{color:#a4a4a4}footer.duomi-page-footer .beta-message a{color:#53a2e4}footer.duomi-page-footer .list-inline a,footer.authenticated-footer .list-inline li{color:#a4a4a4;padding-bottom:30px}.secondmenu a{font-size:12px;color:#4A515B;text-align:center;border-radius:4px}.secondmenu>li>a:hover{background-color:#4ACA6D;border-color:#428bca;}.secondmenu li.active{background-color:#4ACA6D;border-color:#428bca;border-radius:4px}.secondmenu li.active>a{color:#ffffff}.navbar-static-top{margin-bottom:5px}.navbar-brand{display:inline-block;vertical-align:middle;}#logo{}.navbar-brand:hover{}.collapse.glyphicon-chevron-toggle,.glyphicon-chevron-toggle:before{content:"\e113"}.collapsed.glyphicon-chevron-toggle:before{content:"\e114"}.col-md-2{max-height:66666px;margin:0;padding:0}.badge{background-color:#f5694b}.gotop{position:fixed;display:none;background:#7fc8f8;padding:14px 10px;;border-radius:3px;vertical-align:top;text-align:center;bottom:60px;right:18px;z-index:888}.gotop .arrow{width:0;height:0;display:block;border-radius:3px;border-width:0 12px 15px;border-style:dashed dashed solid;border-color:transparent transparent #fff}.gotop .arrow.lit{position:absolute;bottom:8px;right:8px;border-color:transparent transparent #7fc8f8}.gotop:hover .arrow.lit{border-color:transparent transparent #7fc8f8}.form-control{}.form-control:hover{}.panel-body{word-wrap:break-word;word-break:normal}.bs-docs-example:after{position:absolute;top:-1px;left:-1px;padding:5px 8px;font-size:12px;font-weight:bold;background-color:#f5f5f5;border:1px solid #ddd;color:#9da0a4;-webkit-border-radius:4px 0 4px 0;-moz-border-radius:4px 0 4px 0;border-radius:4px 0 4px 0}.bs-docs-example{position:relative;margin:5px 0;padding:5px 10px 1px;background-color:#fff;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.bs-docs-demoexample:after{position:absolute;top:-1px;left:-1px;padding:5px 8px;font-size:12px;font-weight:bold;background-color:#f5f5f5;border:1px solid #ddd;color:#9da0a4;-webkit-border-radius:4px 0 4px 0;-moz-border-radius:4px 0 4px 0;border-radius:4px 0 4px 0}.bs-docs-demoexample{position:relative;margin:5px 0;padding:5px 10px 1px;background-color:#fff;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.btn-clipboardcode{position:absolute;top:0;right:0;z-index:10;display:block;padding:5px 8px;font-size:12px;color:#767676;cursor:pointer;background-color:#fff;border:1px solid #e1e1e8;border-right:0;border-top:0;border-radius:0 4px 0 4px}.zeroclipboard-is-hover{color:#fff;background-color:#4ACA6D;border-color:#4ACA6D}#copycodeall{display:none; max-width:98%;}.badge{background-color:#4ACA6D}.col10main{min-height:500px;background-color:#fff;max-height:66666px;height:auto;padding-top:5px;}.centertop,.mdtop4{border:1px solid #ddd;max-height:500px;height:280px}.mdtop4{}.centerbottom{border:1px solid #ddd;border-right:none;max-height:500px;height:300px}.centercen{margin-top:10px;border-top:1px solid #ddd}.panelborder{border:none}.mdban4{border:1px solid #ddd;min-height:180px}.img-rounded{margin-top:10px}.fastmargin{margin-top:10px;padding-left:30px}.mdban4{margin-bottom:10px}.Span1left{float:left}.ds-powered-by{display:none}.ds-dialog-footer{display:none}.divclear{padding:0px}.divtblist{width:28%;float:left;margin-right:5%}.divtblist:hover{cursor:pointer;color:#390;text-decoration:none;border-color:#4ACA6D;text-decoration:none}.boddiv{color:#333}.boddiv img{width:50px;height:50px;float:left;margin-right:10px}.boddiv div{padding:3px;font-size:18px}.boddiv span{display:block;font-size:12px;color:#999;margin-top:4px}.sejson a:hover{color:#1769ff;text-decoration:none}.sejson{line-height:50px;font-size:15px;color:#C8C8C8;position:relative;z-index:5}.nav-zi{position:absolute;top:50px;left:0px;background-color:#fff;border:1px solid #4ACA6D;border-top:0px;height:auto;width:100%;text-align:left;}.nav-zi ul{padding-top:20px;padding-bottom:10px}.nav-zi li{width:280px}.nav-zi a{border:1px solid #EDEDED;padding-left:40px;margin-left:10px;padding-right:20px;margin-right:10px;display:block;line-height:40px;-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.3s ease-in;transition:all 0.4s ease-in}.nav-zi a:hover{background-color:#4ACA6D;;border:1px solid #FFF;}.navbar-default .navbar-brand{color: #fff;font-weight: 800;height: 50px;line-height: 50px;padding: 0;position: relative;margin: 0 15px !important;}.navbar-default .navbar-brand:hover {background: unset !important;}.logo_ico {position: relative;top: 3px;background: #009a61;color: #fff;padding: 5px;border-radius: 5px;margin-right: 10px;}.nav-zi a{color:#666;}.hot a{color:#F34925;}#topfiex a{}#topfiex a:hover{background-color:#3CB371;}.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {color: #FFF; background-color: #3CB371;}.sidebar .widget{background:#ffffff;padding:21px 30px}.main-footer .widget{padding:0px 30px}.widget .title{margin-top:0;padding-bottom:7px;border-bottom:1px solid #ebebeb;position:relative}.widget .title:after{content:"";width:90px;height:1px;background:#f4645f;position:absolute;left:0;bottom:-1px}.widget .recent-post .recent-single-post{border-bottom:1px dashed #ebebeb;padding-bottom:14px;margin-bottom:14px}.widget .recent-post .recent-single-post:last-child{margin-bottom:0}.widget .recent-post .recent-single-post .post-title{color:#505050;-webkit-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease}.widget .recent-post .recent-single-post .post-title:hover{color:#f4645f;text-decoration:none}.widget .recent-post .recent-single-post .data{color:#959595}.widget .tag-cloud a{border:1px solid #4ACA6D;padding:2px 7px;color:#959595;line-height:1.5em;display:inline-block;margin:0 7px 7px 0;-webkit-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease}.widget .tag-cloud a:hover{background:#4ACA6D;border:1px solid #4ACA6D;text-decoration:none}.widget .tag-cloudf a{border:1px solid #303030;padding:2px 7px;color:#959595;line-height:1.5em;display:inline-block;margin:0 7px 7px 0;-webkit-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease}.widget .tag-cloudf a:hover{background:#4ACA6D;border:1px solid #4ACA6D;text-decoration:none}.widget .social{padding:0;margin:0}.widget .social li{display:inline-block;margin:0 2px 5px 0;text-align:center}.widget .social li a i{width:35px;height:35px;line-height:35px;border:1px solid #ebebeb;color:#959595;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}.widget .social li:hover i{background:#f4645f;border:1px solid #f4645f}.widget .newsletter .input-group{margin-bottom:10px;display:block}.widget .newsletter .input-group .email,.widget .newsletter .input-group btn{width:100%}.widget .ad{text-align:center}.widget .ad img{max-width:100%}.main-footer{background:#303030;padding:35px 0 0;color:#959595}.main-footer .widget .title{color:#ffffff;border-bottom:1px solid #303030}.main-footer .widget .tag-cloud a{border:1px solid #303030}.main-footer .widget .tag-cloud a:hover{border:1px solid #4ACA6D}.main-footer .widget .friend-links a{border:none}.main-footer .widget .friend-links a:hover{border:none}.main-footer .widget .friend-links hr{margin:1em 0;border-top:1px dashed #303030}.main-footer .widget .recent-post .recent-single-post{border-bottom:1px dashed #303030}.main-footer .widget .recent-post .recent-single-post .post-title{color:#959595}.main-footer .widget .recent-post .recent-single-post .post-title:hover{color:#4ACA6D}.main-footer .widget .recent-post .recent-single-post .data{color:#505050}.copyright{font-size: 13px;text-align: center;color: #666666;padding-top: 10px;padding-bottom: 10px;margin-bottom: 50px;}.copyright span{margin:0 .5em}.copyright a{color:#666666}#Clientid .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {padding: 8px;line-height: 2;vertical-align: top;border-top: 1px solid #ddd;}.mulu{ margin-bottom:5px;}.titcolor{ background-color:#f5f5f5;}.footermap .list-inline{ border-bottom:1px dashed #ebebeb; padding-bottom: 5px;}.hottag{color:#f4645f;}.footermap a:hover{color:#f4645f;}.greentag{color:#0d8c21;}.footcenter{ text-align:center;}.hbflag{ margin-bottom:15px;background: url(/static/images/hbflag.png) 0 bottom repeat-x #f5f5f5;}.hbflag li a:hover{ background-color:#fff; color:#f4645f;}.nav-tabs>li>a {color: #008bf8;}.nav > li:hover .dropdown-menu{display:block}.navbar-default{background-color: #25313e;color: #9db1c5;}.navbar-default .navbar-nav > li > a{color:#ddd;}.navbar-default .navbar-nav > li > a:focus,.navbar-default .navbar-nav > li > a:hover{color:#FFF;background-color:#7fc8f8}.navbar-default .navbar-nav > .open > a,.navbar-default .navbar-nav > .open > a:focus,.navbar-default .navbar-nav > .open > a:hover{color:#FFF;background-color:#4DC86F}.homead{width:284px;height:34px;font-family:华文行楷;color:white;font-size:22px;line-height:40px;margin-left:30%;text-align:center}.had-1{background-color: #FF8C00; float: left; margin-left: 15px;}.had-2{background-color: #00A3E4; float: left; margin-left: 20px}.panel{margin-bottom:10px;}.IcpMainInfo li{border-bottom:1px solid #f7f7f7;line-height:40px;font-size:14px;overflow:hidden}.IcpMainInfo li span{width:160px;display:inline-block;float:left;padding-right:10px;text-align:right;color:#999999}.IcpMainInfo li p{display:inline-block;float:left;padding-left:10px;color:#666666;padding-top:8px;}.IcpMainInfo li p.Wzno{height:auto;overflow:hidden;line-height:30px}.pusmall .IcpMainInfo li p{width:48%}.bg-gray{background-color:#fdfdfd}p{line-height:24px}textarea{padding:5px;}.btn{margin-left:2px;margin-right:2px;}pre code{max-height:2000px;overflow-y:auto;}.mt10{margin-top:10px;}.mb10{margin-bottom:10px;}.mt5{margin-top:5px;}.mb5{margin-bottom:5px;}.form-di{display:inline;}.form-dib{display:inline-block;}.input-encrypt-txt{width:90px;font-size:12px;}.mt-10{margin-top:10px;}.mb-10{margin-bottom:10px;}.mt-5{margin-top:5px;}.mb-5{margin-bottom:5px;}.btn{margin-top:0px;}h4{padding-left:5px;color: #66be8c; margin-bottom:10px;line-height:30px;margin-top:5px;}.line-24{line-height:24px}.pre {position:relative;margin-bottom:24px;border-radius:3px;border:1px solid #C3CCD0;background:#FFF;overflow:hidden;}.code {display:block;padding:12px 24px;overflow-y:auto;font-weight:300;font-size:0.8em;}.code .has-numbering {margin-left:21px;}.pre-numbering {position:absolute;top:0;left:0;width:20px;padding:12px 2px 12px 0;border-right:1px solid #C3CCD0;border-radius:3px 0 0 3px;background-color:#EEE;text-align:right;font-size:0.8em;color:#AAA;}.red{color:red}.py-tran-result{text-align:left;overflow:auto;height:auto;color:#000;font-size:16px;line-height:25px;max-height:500px;}.py-tran-result em{display:inline-block;padding:5px;float:left;border:1px #999 solid;text-align:center;margin:2px;height:55px;line-height:25px;font-family:verdana;font-style:normal;}.py-tran-result em{border:0;border-bottom:1px #ff3300 dashed;font-style:normal;}.py-tran-result i{color:blue;font-style:normal;}.f20{font-size:20px;}.f30{font-size:20px;}.f14{font-size:14px;}.f12{font-size:12px}.zifu-line35 {line-height:35px;letter-spacing:3px;word-break:break-all;white-space:normal;}.py-star-fuhao{text-align:center;color:#484891;font-size:25px;font-weight:blod;}.py-star-text{text-align:center;color:#484891;font-size:15px;font-weight:blod;}.li-two li{width: 50%;float: left;}.li-two {width: 460px;}.li-two li a{white-space: pre-wrap;}.lineline {margin: 50px auto 0;background: #ececec;padding: 20px;overflow: auto;text-align: left;}.lineline-numbers {width: 20px;border-right: 1px solid #ccc;padding-right: 5px;color: #777;}.lineline-lines {padding-left: 20px;white-space: pre;white-space: -moz-pre;white-space: -pre;white-space: -o-pre;word-wrap: break-word;}.lineline-code {line-height: 18px;width: 100%;white-space: nowrap;}.fileinput-button {position: relative;overflow: hidden;}.fileinput-button input {position: absolute;top: 0;right: 0;margin: 0;opacity: 0;filter: alpha(opacity=0);transform: translate(-300px, 0) scale(4);font-size: 23px;direction: ltr;cursor: pointer;}.ptb10{padding-bottom:10px !important;padding-top:10px !important}.YaHei{font-family:"Microsoft YaHei"}.fl{display:inline-block;float:left;}.fr{display:inline-block;float:right !important}.mb20{margin-bottom:20px}.mathunit{color:#436EEE;font-size:12px;margin-left:5px;margin-right:5px}.AreaTxt{margin-right:10px}li{border:0px;list-style-type:none;margin-bottom:5px}.footer-nav h2 {border-bottom: 1px solid #ddd;line-height:40px;}.footer-nav h3 {font-size: 16px;line-height:40px;margin-top:15px;}.footer-nav h3 span {border-left:5px #4DC86F solid;line-height:25px;padding-left:10px;font-weight:bold;color:#333;}.footer-nav .list-inline-bg {background-color:#F6F6F6;line-height:25px;padding:0 4px;}.footer-nav .list-inline-bg ul {padding:10px;}.footer-nav .list-inline-bg li{width:24%;line-height:28px;}.footer-nav .list-inline-bg li span {display:inline-block;width:4px;height:4px;border-radius:50%;background:#999;margin-right:6px;margin-bottom:4px;}.footer-nav .list-inline-bg li a {color:#444;font-size:14px;}h2 {font-size: 20px;}.ul-list {min-width: 400px;height: auto;overflow:hidden;}.ul-list li {width: 50%;float: left;}.ul-list li.divider {height: 1px;margin: 9px 0;width:100%;overflow: hidden;background-color: #e5e5e5;clear:both;}@media screen and (max-width: 670px) {.form-group .text-center .btn{margin-bottom:3px}#logo{padding-right:80px;}.footer-nav .list-inline-bg li{width:49%;line-height:28px;white-space:nowrap;overflow:hidden;}}.btn-xs{padding:3px 8px;}.lx_name {width: 160px;display: inline-block;float: left;padding-right: 10px;text-align: right;color: #999999;}.lx_value{display: inline-block;}.dropdown{margin: 0;}
/* ==========================================
首页 UI/UX 优化样式 - 品牌色彩系统
========================================== */
/* ========== CSS 变量定义 ========== */
:root {
--brand-primary: #4361ee;
--brand-primary-hover: #3a56d4;
--brand-primary-light: #e8ecfc;
--brand-secondary: #7209b7;
--brand-accent: #06d6a0;
--brand-danger: #ef476f;
--brand-dark: #2b2d42;
--brand-gray-100: #f8f9fa;
--brand-gray-200: #e9ecef;
--brand-gray-300: #dee2e6;
--brand-gray-500: #adb5bd;
--brand-gray-700: #495057;
--brand-gray-800: #343a40;
--brand-shadow: 0 2px 12px rgba(0,0,0,0.08);
--brand-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
--brand-radius: 8px;
--brand-radius-lg: 12px;
}
/* ========== 工具文本框优化 ========== */
.tool-textarea {
border: 2px solid var(--brand-gray-300);
border-radius: var(--brand-radius);
padding: 16px;
font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
font-size: 14px;
line-height: 1.6;
resize: vertical;
transition: border-color 0.3s, box-shadow 0.3s;
}
.tool-textarea:focus {
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
outline: none;
}
/* ========== 按钮操作栏 ========== */
.action-bar {
background: #fff;
border-radius: var(--brand-radius);
padding: 12px 8px;
box-shadow: var(--brand-shadow);
margin: 16px 0;
display: flex;
flex-wrap: nowrap;
gap: 4px;
justify-content: center;
align-items: center;
overflow: hidden;
}
.action-bar .btn {
border-radius: 6px;
padding: 8px 14px;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
border: none;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
/* 主要操作按钮 */
.btn-action-primary {
background: var(--brand-primary) !important;
color: #fff !important;
box-shadow: 0 2px 6px rgba(67, 97, 238, 0.3);
}
.btn-action-primary:hover {
background: var(--brand-primary-hover) !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(67, 97, 238, 0.4);
}
/* 次要操作按钮 */
.btn-action-secondary {
background: var(--brand-gray-100) !important;
color: var(--brand-gray-700) !important;
border: 1px solid var(--brand-gray-300) !important;
}
.btn-action-secondary:hover {
background: var(--brand-gray-200) !important;
border-color: var(--brand-gray-500) !important;
}
/* 复制按钮 */
.btn-copy {
background: var(--brand-accent) !important;
color: #fff !important;
cursor: pointer;
}
.btn-copy:hover {
opacity: 0.9;
}
/* 分隔线 */
.action-divider {
width: 1px;
height: 24px;
background: var(--brand-gray-300);
margin: 0 4px;
}
/* ========== 提示卡片 ========== */
.tip-card {
background: linear-gradient(135deg, var(--brand-primary-light) 0%, #f0e6ff 100%);
border: 1px solid rgba(67, 97, 238, 0.2);
border-radius: var(--brand-radius-lg);
padding: 16px 20px;
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0;
}
.tip-icon {
width: 36px;
height: 36px;
background: var(--brand-primary);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 16px;
}
.tip-content {
color: var(--brand-gray-700);
font-size: 14px;
line-height: 1.6;
}
/* ========== 核心优势区域 ========== */
.features-section {
margin-top: 32px;
margin-bottom: 24px;
}
.features-section .section-title {
font-size: 22px;
font-weight: 700;
color: var(--brand-dark);
margin-bottom: 16px;
text-align: center;
}
.features-section .section-title span {
background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.features-section .section-desc {
color: var(--brand-gray-700);
font-size: 15px;
line-height: 1.8;
text-align: center;
max-width: 800px;
margin: 0 auto;
}
/* ========== 工具分类卡片 ========== */
.tool-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
margin-top: 24px;
}
.tool-card {
background: #fff;
border-radius: var(--brand-radius-lg);
padding: 20px;
box-shadow: var(--brand-shadow);
transition: all 0.3s;
border: 1px solid var(--brand-gray-200);
}
.tool-card:hover {
transform: translateY(-4px);
box-shadow: var(--brand-shadow-lg);
border-color: var(--brand-primary);
}
.tool-card .card-icon {
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 12px;
}
.tool-card .card-title {
font-size: 16px;
font-weight: 600;
color: var(--brand-dark);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 2px solid var(--brand-gray-200);
}
.tool-card .card-tools {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 8px;
}
.tool-card .card-tools li {
padding: 3px 0;
margin-bottom: 0;
}
.tool-card .card-tools a {
color: var(--brand-gray-700);
font-size: 13px;
text-decoration: none;
transition: color 0.2s;
}
.tool-card .card-tools a:hover {
color: var(--brand-primary);
}
/* 图标背景色 */
.icon-bg-blue { background: #e8ecfc; color: var(--brand-primary); }
.icon-bg-purple { background: #f3e8ff; color: var(--brand-secondary); }
.icon-bg-green { background: #e6faf4; color: #06a77d; }
.icon-bg-orange { background: #fff3e0; color: #e67e22; }
.icon-bg-pink { background: #fce4ec; color: var(--brand-danger); }
.icon-bg-cyan { background: #e0f7fa; color: #00838f; }
.icon-bg-indigo { background: #ede7f6; color: #5e35b1; }
/* ========== 底部导航优化 ========== */
.footer-nav-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 24px;
}
.footer-nav-group h4 {
font-size: 15px;
font-weight: 600;
color: var(--brand-dark);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 2px solid var(--brand-primary);
display: inline-block;
}
.footer-nav-group ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-nav-group ul li {
padding: 4px 0;
margin-bottom: 0;
}
.footer-nav-group ul li a {
color: var(--brand-gray-700);
font-size: 13px;
text-decoration: none;
transition: color 0.2s;
}
.footer-nav-group ul li a:hover {
color: var(--brand-primary);
}
/* ========== 优化导航栏样式 ========== */
.navbar-default .navbar-brand {
color: var(--brand-primary) !important;
font-weight: 700;
}
.navbar-default .navbar-nav > li > a {
font-weight: 500;
}
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active > a:hover,
.navbar-default .navbar-nav > li.active > a:focus {
color: var(--brand-primary) !important;
border-bottom: 2px solid var(--brand-primary);
}
/* ========== 优化链接颜色 ========== */
.sejson a:hover {
color: var(--brand-primary);
}
.footer-nav .list-inline-bg li a:hover {
color: var(--brand-primary);
}
.footer-nav h3 span {
border-left-color: var(--brand-primary);
}
.footer-nav h3 span {
background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.footer-nav .list-inline-bg {
background-color: #fff;
border: 1px solid var(--brand-gray-200);
border-radius: var(--brand-radius);
margin-bottom: 16px;
transition: all 0.3s;
}
.footer-nav .list-inline-bg:hover {
border-color: var(--brand-primary);
box-shadow: var(--brand-shadow);
}
.footer-nav .list-inline-bg ul {
padding: 12px 10px;
}
.footer-nav .list-inline-bg h3 {
margin-top: 0;
padding: 12px 10px 8px;
border-bottom: 1px solid var(--brand-gray-200);
}
.footer-nav .list-inline-bg h3 span {
border-left: 4px solid var(--brand-primary);
line-height: 20px;
padding-left: 10px;
font-weight: 600;
font-size: 16px;
}
.footer-nav .list-inline-bg li span {
background: var(--brand-gray-300);
}
.footer-nav .list-inline-bg li a:hover {
color: var(--brand-primary);
}
/* ========== 优化按钮默认样式 ========== */
.btn-info {
background-color: var(--brand-primary) !important;
border-color: var(--brand-primary) !important;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
background-color: var(--brand-primary-hover) !important;
border-color: var(--brand-primary-hover) !important;
}
/* ========== 返回顶部按钮优化 ========== */
.gotop {
background: var(--brand-primary);
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--brand-shadow-lg);
transition: all 0.3s;
text-decoration: none;
padding: 0;
}
.gotop:hover {
background: var(--brand-primary-hover);
transform: translateY(-2px);
}
.gotop .arrow {
display: none;
}
.gotop::after {
content: "↑";
color: #fff;
font-size: 18px;
font-weight: bold;
}
/* ========== 响应式设计优化 ========== */
@media screen and (max-width: 768px) {
.action-bar {
gap: 4px;
overflow: hidden;
}
.action-bar .btn {
padding: 6px 10px;
font-size: 12px;
white-space: nowrap;
flex-shrink: 0;
}
.action-divider {
display: none;
}
.tool-cards {
grid-template-columns: 1fr;
}
.footer-nav-grid {
grid-template-columns: repeat(2, 1fr);
}
.features-section .section-title {
font-size: 18px;
}
.features-section .section-desc {
font-size: 14px;
}
.tip-card {
flex-direction: column;
text-align: center;
}
.tip-icon {
margin-bottom: 8px;
}
}
@media screen and (max-width: 480px) {
.footer-nav-grid {
grid-template-columns: 1fr;
}
.action-bar .btn {
padding: 5px 8px;
font-size: 11px;
}
}
/* ========== 标签页导航优化 ========== */
.hbflag {
margin-bottom: 15px;
background: transparent;
border-bottom: 2px solid var(--brand-gray-200);
padding: 0;
display: flex;
flex-wrap: nowrap;
gap: 2px;
overflow: visible;
}
.hbflag > li {
margin-bottom: 0;
flex-shrink: 0;
min-width: 0;
}
.hbflag > li.dropdown {
margin-left: auto;
overflow: visible !important;
}
.hbflag > li > a {
display: inline-block;
padding: 8px 12px;
font-size: 13px;
font-weight: 500;
color: var(--brand-gray-700);
text-decoration: none;
border-radius: 6px 6px 0 0;
border: 1px solid transparent;
border-bottom: none;
transition: all 0.2s;
background: var(--brand-gray-100);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
}
.hbflag > li > a:hover {
background: var(--brand-gray-200);
color: var(--brand-primary);
}
.hbflag > li.active > a,
.hbflag > li.active > a:hover,
.hbflag > li.active > a:focus {
background: var(--brand-primary);
color: #fff;
border-color: var(--brand-primary);
}
.hbflag .dropdown-menu {
position: absolute;
z-index: 1000;
border-radius: 0 0 8px 8px;
border: 1px solid var(--brand-gray-200);
border-top: 2px solid var(--brand-primary);
box-shadow: var(--brand-shadow-lg);
padding: 8px 0;
}
.hbflag .dropdown-menu > li > a {
padding: 8px 16px;
font-size: 14px;
color: var(--brand-gray-700);
transition: all 0.2s;
}
.hbflag .dropdown-menu > li > a:hover {
background: var(--brand-primary-light);
color: var(--brand-primary);
}
/* ========== 搜索功能样式 ========== */
.search-direct-container {
padding: 10px 0;
margin: 0;
}
.search-direct-wrap {
position: relative;
display: flex;
align-items: center;
width: 180px;
height: 30px;
background: rgba(255,255,255,0.15);
border-radius: 4px;
border: 1px solid rgba(255,255,255,0.2);
overflow: hidden;
transition: all 0.2s;
}
.search-direct-wrap:hover {
background: rgba(255,255,255,0.25);
}
.search-direct-wrap:focus-within {
background: rgba(255,255,255,0.3);
border-color: rgba(255,255,255,0.4);
}
.search-direct-input {
flex: 1;
height: 30px;
padding: 4px 10px;
border: none;
outline: none;
font-size: 13px;
color: #fff;
background: transparent;
}
.search-direct-input::placeholder {
color: rgba(255,255,255,0.5);
}
.search-arrow {
color: rgba(255,255,255,0.5);
padding: 0 10px;
font-size: 12px;
cursor: pointer;
user-select: none;
}
/* 搜索结果面板 */
.search-results {
position: fixed;
top: 60px;
width: 180px;
max-height: 400px;
background: #fff;
border-radius: var(--brand-radius);
box-shadow: var(--brand-shadow-lg);
border: 1px solid var(--brand-gray-200);
z-index: 9999;
overflow-y: auto;
overflow-x: hidden;
}
.search-result-item {
display: block;
padding: 10px 12px;
text-decoration: none;
border-bottom: 1px solid var(--brand-gray-200);
transition: background 0.2s;
}
.search-result-item:last-child {
border-bottom: none;
}
.search-result-item:hover {
background: var(--brand-primary-light);
}
.result-name {
font-size: 14px;
color: var(--brand-dark);
display: block;
line-height: 1.4;
}
.result-name em {
color: var(--brand-primary);
font-style: normal;
font-weight: 600;
background: var(--brand-primary-light);
padding: 0 2px;
border-radius: 2px;
}
.search-no-result {
padding: 24px 16px;
text-align: center;
color: var(--brand-gray-500);
font-size: 14px;
}
@media screen and (max-width: 768px) {
.search-direct-wrap {
width: 140px;
}
.search-results {
width: calc(100vw - 40px);
right: 20px;
max-height: 50vh;
}
}
@media screen and (max-width: 480px) {
.search-direct-wrap {
width: 120px;
}
}
/* ==========================================
底部区域优化样式
========================================== */
/* ========== 友情链接区域 ========== */
.friendly-links-section {
background: linear-gradient(135deg, var(--brand-gray-100) 0%, #fff 100%);
border-radius: var(--brand-radius-lg);
padding: 24px;
margin: 32px 0 24px;
border: 1px solid var(--brand-gray-200);
box-shadow: var(--brand-shadow);
}
.friendly-links-title {
margin-bottom: 16px;
text-align: center;
}
.friendly-links-title span {
display: inline-block;
font-size: 16px;
font-weight: 600;
color: var(--brand-dark);
padding: 8px 24px;
background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.friendly-links-title span::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 3px;
background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
border-radius: 2px;
}
.friendly-links-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.friendly-link {
display: inline-block;
padding: 10px 24px;
background: #fff;
border: 1px solid var(--brand-gray-300);
border-radius: 24px;
color: var(--brand-gray-700);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.3s;
}
.friendly-link:hover {
background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
color: #fff;
border-color: transparent;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
text-decoration: none;
}
/* ========== 底部包装器 ========== */
.footer-wrapper {
background: linear-gradient(180deg, var(--brand-gray-100) 0%, #fff 100%);
padding: 16px 0 0;
}
/* ========== 版权信息区域 ========== */
.copyright {
background: var(--brand-dark);
padding: 32px 0;
margin-bottom: 0;
}
.copyright-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.copyright-logo {
margin-bottom: 8px;
}
.copyright-logo .logo-text {
font-size: 24px;
font-weight: 800;
background: linear-gradient(90deg, #7fc8f8, var(--brand-accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.copyright-info {
display: flex;
align-items: center;
gap: 12px;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
flex-wrap: wrap;
justify-content: center;
}
.copyright-info span {
margin: 0;
}
.copyright-info a {
color: var(--brand-accent);
text-decoration: none;
transition: color 0.2s;
}
.copyright-info a:hover {
color: #7fc8f8;
text-decoration: none;
}
.copyright-divider {
color: rgba(255, 255, 255, 0.3);
}
.copyright-beian a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
font-size: 13px;
transition: color 0.2s;
}
.copyright-beian a:hover {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
}
/* ========== 底部区域响应式设计 ========== */
@media screen and (max-width: 768px) {
.friendly-links-section {
padding: 20px;
margin: 24px 0 16px;
}
.friendly-links-title span {
font-size: 15px;
}
.friendly-link {
padding: 8px 18px;
font-size: 13px;
}
.copyright {
padding: 24px 0;
}
.copyright-logo .logo-text {
font-size: 20px;
}
.copyright-info {
flex-direction: column;
gap: 6px;
}
.copyright-divider {
display: none;
}
}
@media screen and (max-width: 480px) {
.friendly-links-section {
padding: 16px;
}
.friendly-links-list {
gap: 8px;
}
.friendly-link {
padding: 6px 14px;
font-size: 12px;
}
}