@charset "UTF-8"; /*全局*/ * { margin: 0; padding: 0; box-sizing: border-box; } a:hover, a:focus { color: #1e9fff; } html, body { height: 100%; } body { background: #f5f5f5; display: flex; flex-direction: column; } .body { padding-top: 80px; } .layui-container { max-width: 1200px; } .layui-input:focus, .layui-textarea:focus { border-color: #1e9fff !important; } .layui-card-footer { position: relative; padding: 10px 15px; border-top: 1px solid #f8f8f8; color: #333; border-radius: 0 0 2px 2px; font-size: 14px; } .no-data { margin-top: 20px; margin-bottom: 20px; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 16px; line-height: 30px; color: #666; } .no-data::before, .no-data::after { content: ""; display: inline-block; width: 10px; height: 1px; background-color: #ccc; margin: 0 10px; } .load-more { margin-bottom: 10px; } .load-more .layui-btn { min-width: 90px; } /*公用*/ .text-center { text-align: center !important; } .d-flex { display: flex !important; } .flex-wrap { flex-wrap: wrap !important; } .justify-content-between { justify-content: space-between !important; } .justify-content-center { justify-content: center !important; } .align-items-center { align-items: center !important; } .justify-content-center { justify-content: center !important; } .justify-content-end { justify-content: flex-end !important; } .flex-column { flex-direction: column !important; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .text-ellipsis-1, .text-ellipsis-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; white-space: normal; } .text-ellipsis-2 { -webkit-line-clamp: 2; } .meta-dot { display: inline-block; width: 3px; height: 3px; background-color: #999; border-radius: 50%; margin: 0 8px; } .mh270 { min-height: 270px; } /*头部*/ .fly-header .layui-nav-left { margin-left: 20px; float: left !important; } .fly-header .layui-input { border-radius: 2px 0 0 2px; border: 1px solid #e0e0e0; } .fly-header .layui-input-wrap { max-width: 180px; } /*主体*/ .fly-main { flex-grow: 1; padding-bottom: 20px; } /*卡片*/ .layui-card-header h3 { font-weight: 500; font-size: 16px; } .layui-card-header .nav a { color: #666; margin-left: 10px; font-size: 14px } .layui-card-header .nav a.active { color: #1e9fff; } .layui-card-header a.more { color: #666; font-size: 14px } /*首页banner*/ #home-banner { margin-bottom: 15px; } #home-banner div[carousel-item]>* { text-align: center; line-height: 280px; color: #fff; } #home-banner div[carousel-item]>*:nth-child(2n) { background-color: #16b777; } #home-banner div[carousel-item]>*:nth-child(2n+1) { background-color: #16baaa; } /*内页banner*/ .page-banner { background:#ababab; height: 180px; width: 100%; margin-bottom: 15px; border-radius: 5px; position: relative; overflow: hidden; } .page-banner h2 { color: #fff; font-size: 24px; font-weight: normal; margin-bottom: 6px; } .page-banner p { color: #fff; font-size: 16px; } /*下载列表*/ .download-list {} .download-list li {} .download-list .download-box { padding-top: 30px; border: 1px solid #f1f1f1; border-radius: 5px; } .download-list .download-thumb { margin: 0 auto; width: 110px; height: 100px; background-color: #f0f2f5; border-radius: 4px; flex-shrink: 0; color: #999; font-size: 14px; } .download-list .download-info h3 { font-weight: 500; margin-top: 8px; } .download-list .download-title a { font-size: 16px; line-height: 2; color: #999; } .download-list .download-item .layui-btn { margin-top: 5px; min-width: 60px; } /*文章列表*/ .article-list {} .article-list .article-item-card { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #f5f5f5; } .article-list .article-item-list { line-height: 30px; margin-bottom: 5px; } .article-list .article-item-list a { width: calc(100% - 100px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .article-list .article-item-list a i { color: #9ca0ad; } .article-list .article-item-list span { color: #9ca0ad; font-size: 12px; } .article-list .article-thumb { width: 110px; height: 100px; background-color: #f0f2f5; border-radius: 4px; margin-right: 15px; flex-shrink: 0; color: #999; font-size: 14px; } .article-list .article-thumb img { width: 100% !important; height: 100% !important; } .article-list .article-info { flex: 1; } .article-list .article-title { font-weight: 500; font-size: 16px; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 1; } .article-list .article-title a { text-decoration: none; color: #333; } .article-list .article-title a:hover { color: #1a73e8; } .article-list .article-meta { font-size: 12px; color: #999; } .article-list .article-abstract { font-size: 14px; color: #666; margin-top: 5px; line-height: 1.4; } /*产品列表*/ .product-list {} .product-list .product-item { border: 1px solid #f1f1f1; border-radius: 6px; } .product-list .product-img { font-size: 18px; height: 150px; background: #f0f2f5; border-radius: 4px; margin-bottom: 10px; color: #999; } .product-list .product-info { padding: 10px; } .product-list .product-name { font-size: 15px; line-height: 1.5; margin-bottom: 8px; } .product-list .product-abstract { margin-bottom: 8px; font-size: 12px; color: #666; line-height: 1.4; } .product-list .product-meta { font-size: 12px; color: #999; } /*右侧推荐资讯样式*/ .recommend-list { list-style: none; } .recommend-list .recommend-item { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #f5f5f5; } .recommend-list .recommend-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .recommend-list .recommend-number { width: 24px; height: 24px; background-color: #ff6b35; color: white; border-radius: 50%; border-top-right-radius: 0 !important; font-size: 12px; font-weight: bold; margin-right: 12px; flex-shrink: 0; } .recommend-list .recommend-item:nth-child(n+4) .recommend-number { background-color: #999999; } .recommend-list .recommend-content { flex: 1; } .recommend-list .recommend-title { font-weight: 500; font-size: 14px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 1; } /*右侧下载列表*/ .down-ul {} .down-ul .down-info { flex: 1; } .down-ul .down-title { font-weight: 500; font-size: 16px; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 1; } .down-ul .down-item { position: relative; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #f5f5f5; } .down-ul .down-item .layui-btn { position: absolute; right: 0; top: 10px; } .down-ul .down-title a { text-decoration: none; color: #333; } .down-ul .down-meta { font-size: 12px; color: #999; } /*tags*/ .tag-cloud { gap: 8px; } .tag-cloud-list { gap: 10px; } .tag-cloud-list .tag { position: relative; font-size: 14px; padding: 52px 40px 12px 15px; width: calc(100% / 5 - 24px); display: inline-block; vertical-align: top; margin: 10px 10px; overflow: hidden; } .tag-cloud-list .tag h2 { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .tag-cloud-list .tag .count { font-size: 38px; opacity: .5; position: absolute; bottom: 10px; right: 15px; line-height: 1; font-style: italic; color: #d5d4d4; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .tag-cloud-list .tag:hover .count { right: 20px; bottom: -20%; opacity: .3; } .tag-cloud-list .tag:before { content: ""; } .tag-cloud-list .tag i { background-color: red; width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 3px; position: absolute; top: 15px; left: 15px; opacity: .35; color: #fff; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .tag-cloud-list .tag:nth-child(30n+1) i, .tag-cloud-list .tag:nth-child(30n+1):hover { background-color: #1F6CC0; } .tag-cloud-list .tag:nth-child(30n+2) i, .tag-cloud-list .tag:nth-child(30n+2):hover { background-color: #DD578D; } .tag-cloud-list .tag:nth-child(30n+3) i, .tag-cloud-list .tag:nth-child(30n+3):hover { background-color: #EAA156; } .tag-cloud-list .tag:nth-child(30n+4) i, .tag-cloud-list .tag:nth-child(30n+4):hover { background-color: #8D94C1; } .tag-cloud-list .tag:nth-child(30n+5) i, .tag-cloud-list .tag:nth-child(30n+5):hover { background-color: #7A7E8C; } .tag-cloud-list .tag:nth-child(30n+6) i, .tag-cloud-list .tag:nth-child(30n+6):hover { background-color: #AF49AB; } .tag-cloud-list .tag:nth-child(30n+7) i, .tag-cloud-list .tag:nth-child(30n+7):hover { background-color: #DF3F46; } .tag-cloud-list .tag:nth-child(30n+8) i, .tag-cloud-list .tag:nth-child(30n+8):hover { background-color: #AF49AB; } .tag-cloud-list .tag:nth-child(30n+9) i, .tag-cloud-list .tag:nth-child(30n+9):hover { background-color: #8474A1; } .tag-cloud-list .tag:nth-child(30n+10) i, .tag-cloud-list .tag:nth-child(30n+10):hover { background-color: #08979D; } .tag-cloud-list .tag:nth-child(30n+11) i, .tag-cloud-list .tag:nth-child(30n+11):hover { background-color: #EB6763; } .tag-cloud-list .tag:nth-child(30n+12) i, .tag-cloud-list .tag:nth-child(30n+12):hover { background-color: #FC6B05; } .tag-cloud-list .tag:nth-child(30n+13) i, .tag-cloud-list .tag:nth-child(30n+13):hover { background-color: #23AA8F; } .tag-cloud-list .tag:nth-child(30n+14) i, .tag-cloud-list .tag:nth-child(30n+14):hover { background-color: #658FC0; } .tag-cloud-list .tag:nth-child(30n+15) i, .tag-cloud-list .tag:nth-child(30n+15):hover { background-color: #7FACD6; } .tag-cloud-list .tag:nth-child(30n+16) i, .tag-cloud-list .tag:nth-child(30n+16):hover { background-color: #85CBCC; } .tag-cloud-list .tag:nth-child(30n+17) i, .tag-cloud-list .tag:nth-child(30n+17):hover { background-color: #888d67; } .tag-cloud-list .tag:nth-child(30n+18) i, .tag-cloud-list .tag:nth-child(30n+18):hover { background-color: #7f746e; } .tag-cloud-list .tag:nth-child(30n+19) i, .tag-cloud-list .tag:nth-child(30n+19):hover { background-color: #9b604d; } .tag-cloud-list .tag:nth-child(30n+20) i, .tag-cloud-list .tag:nth-child(30n+20):hover { background-color: #9b4d74; } .tag-cloud-list .tag:nth-child(30n+21) i, .tag-cloud-list .tag:nth-child(30n+21):hover { background-color: #8d7be0; } .tag-cloud-list .tag:nth-child(30n+22) i, .tag-cloud-list .tag:nth-child(30n+22):hover { background-color: #939395; } .tag-cloud-list .tag:nth-child(30n+23) i, .tag-cloud-list .tag:nth-child(30n+23):hover { background-color: #18BBD9; } .tag-cloud-list .tag:nth-child(30n+24) i, .tag-cloud-list .tag:nth-child(30n+24):hover { background-color: #8DAFFC; } .tag-cloud-list .tag:nth-child(30n+25) i, .tag-cloud-list .tag:nth-child(30n+25):hover { background-color: #f768b8; } .tag-cloud-list .tag:nth-child(30n+26) i, .tag-cloud-list .tag:nth-child(30n+26):hover { background-color: #5AA7A7; } .tag-cloud-list .tag:nth-child(30n+27) i, .tag-cloud-list .tag:nth-child(30n+27):hover { background-color: #8AC9A4; } .tag-cloud-list .tag:nth-child(30n+28) i, .tag-cloud-list .tag:nth-child(30n+28):hover { background-color: #0181BB; } .tag-cloud-list .tag:nth-child(30n+29) i, .tag-cloud-list .tag:nth-child(30n+29):hover { background-color: #F96191; } .tag-cloud-list .tag:nth-child(30n+30) i, .tag-cloud-list .tag:nth-child(30n+30):hover { background-color: #81cedf; } .tag { background: #f0f2f5; padding: 3px 7px; border-radius: 3px; font-size: 12px; color: #666; text-decoration: none; display: inline-block; transition: background-color 0.3s, color 0.3s; } .tag:hover { background-color: #1a73e8; color: white; } .tag:before { content: "# "; } /*右侧广告位*/ .ad-container { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; padding: 20px; margin-bottom: 15px; text-align: center; color: white; position: relative; overflow: hidden; } .ad-container .ad-badge { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, 0.2); color: white; padding: 2px 5px; border-radius: 4px; font-size: 12px; } .ad-container .ad-title { font-size: 16px; font-weight: bold; margin-bottom: 10px; } .ad-container .ad-content { font-size: 14px; margin-bottom: 15px; opacity: 0.9; } .ad-container .ad-button { background: white; color: #667eea; font-weight: bold; transition: all 0.3s; } .ad-container .ad-button:hover { border-color: #f8f9fa; background: #f8f9fa; transform: translateY(-2px); } /*内页轮播*/ .carousel-main { gap: 20px; margin-bottom: 30px; } .carousel-main .carousel-box { position: relative; } .carousel-main .carousel-name { position: absolute; top: 15px; left: 15px; background: rgba(0, 0, 0, 0.3); color: white; padding: 5px 12px; border-radius: 4px; font-size: 14px; } .carousel-main .carousel-title { padding: 10px 15px; position: absolute; left: 0; right: 0; bottom: 0; color: #fff; background: rgba(0, 0, 0, 0.3); } .carousel-main .carousel-title h3 { font-size: 16px; margin-bottom: 5px; } .carousel-main .carousel-title p { font-size: 14px; line-height: 1.5; } .carousel-main .carousel-title h3 { font-weight: 500; } .carousel-main .carousel-container { flex: 1.5; height: 350px; position: relative; border-radius: 4px; overflow: hidden; } .carousel-main .carousel-thumb { width: 100%; line-height: 350px; background-color: #d3d6d9; color: #999; font-size: 32px; } .carousel-main .carousel-thumb img { width: 100% !important; height: 100% !important; } .side-grid { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; } .side-item { height: 100%; position: relative; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); } .side-thumb { font-size: 16px; width: 100%; height: 100%; background-color: #d3d6d9; color: #999; } .side-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .side-caption { padding: 0 10px; position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.3); color: white; line-height: 40px; } .side-caption h3 { font-size: 14px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /*详情页*/ .article-content h1 { font-size: 28px; font-weight: 500; line-height: 1.5; } .article-content .entry-meta { font-size: 13px; margin-top: 10px; color: #a0a0a0; } .entry-copyright { position: relative; border-radius: 5px; line-height: 22px; display: inline-block; padding: 15px 20px; font-size: 12px; color: #999; background: #f8f8f9; width: 100%; margin: 25px 0 0; } .entry-copyright:after { content: ""; display: block; width: 31px; height: 27px; position: absolute; background: url(../images/blockquote.png) 0 0 no-repeat; right: 10px; bottom: 6px; background-size: 100%; transform: rotateZ(180deg); } .article-content .entry-meta>li { display: inline-block; padding-right: 5px; padding-left: 5px; } .article-content .post-icons { margin-right: 2px; } .article-content .entry-content { margin-top: 15px; margin-bottom: 15px; font-size: 14px; line-height: 1.8; } .article-tag { border-radius: 5px; margin-bottom: 15px; padding: 12px 15px; background-color: #fff; } .article-tag span { display: block; font-size: 13px; color: #666; margin-bottom: 8px; } .allow_visitor { font-size: 15px; padding: 15px 10px; text-align: center; border-radius: 5px; background: #f9f9f9; } .allow_visitor p { color: #666; font-size: 14px; line-height: 30px; margin-bottom: 8px; } .entry-info { border-radius: 6px; background: #fbfbfb; margin: 20px 0 20px; padding: 12px 25px; } .entry-info>li { padding: 3px 0; } .entry-info .info-item { flex: 1; } .entry-info .info-label { width: 80px; color: #333; font-weight: normal; } .entry-info .info-value { flex: 1; color: #666; } .entry-info .layui-rate { padding: 0; } .entry-info .layui-rate li i.layui-icon { font-size: 16px; } /*搜索页*/ .search-manin { margin-top: 60px; } .search-manin .d-flex { gap: 10px; } .search-title { font-weight: 500; font-size: 28px; line-height: 2; margin-bottom: 15px; } .hot-keywords { text-align: center; margin-top: 15px; color: #666; } .hot-keywords a { margin: 0 5px; color: #1E9FFF; } /*筛选*/ .filter-container { padding-top: 10px; } .filter-row { margin-bottom: 15px; } .filter-category { flex-wrap: wrap; align-items: center; } .filter-category .filter-category-title { min-width: 40px; font-size: 15px; margin-right: 10px; color: #333; white-space: nowrap; } .filter-category .filter-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .filter-category .filter-option a { color: #6c757d; text-decoration: none; padding: 4px 8px; border-radius: 4px; white-space: nowrap; transition: all 0.2s ease; } .filter-category .filter-option a:hover, .filter-category .filter-option a.active { color: #fff; background-color: #1e9fff; } /*上一篇下一篇*/ .article-nav .box-body { width: calc(50% - 7px); margin: 0; display: inline-block; background-color: #fff; padding: 15px; border-radius: 5px; } .article-nav .box-body+.box-body { margin-right: 0; float: right; text-align: right; } .article-nav .box-body p { color: #999; margin-bottom: 8px; } .article-nav .post-icons { margin-right: 2px; } .article-nav .post-icons svg { width: 14px; height: 14px; vertical-align: -2px; } /*面包屑*/ .breadcrumb { padding: 8px 15px; list-style: none; border-radius: 4px; } .breadcrumb>li { display: inline-block; } .breadcrumb>.active { color: #777; } .breadcrumb>li+li:before { padding: 0 5px; color: #ccc; content: "/\00a0"; } /*分页*/ .pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; } .pagination>li { display: inline; } .pagination>li>a, .pagination>li>span { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #1e9fff; text-decoration: none; background-color: #fff; border: 1px solid #ddd; } .pagination>li:first-child>a, .pagination>li:first-child>span { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { z-index: 3; color: #fff; cursor: default; background-color: #1e9fff; border-color: #1e9fff; } .pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover { color: #777; cursor: not-allowed; background-color: #fff; border-color: #ddd; } /*分享*/ .social-share .social-share-icon { font-size: 14px; width: 18px; height: 18px; line-height: 18px; color: #999; border: none; } .social-share .social-share-icon:hover { background: none; } .social-share .icon-weibo:hover { color: #ff763b } .social-share .icon-qq:hover { color: #56b6e7 } .social-share .icon-qzone:hover { color: #FDBE3D } .social-share .icon-wechat:hover { color: #7bc549; } /*底部*/ footer { flex-grow: 0; flex-shrink: 0; } footer .copyright { background: #393939; line-height: 50px; text-align: center; color: #aaa; } footer .copyright a { padding: 0 6px; font-weight: 300; color: #aaa; } footer .copyright a:hover { color: #fff; } @media screen and (max-width: 768px) { .fly-header .layui-nav-left { margin-left: 0px !important; float: none !important; width: 100%; } .fly-header .layui-search .layui-inline { display: block; margin-bottom: 10px; } .fly-header .layui-input-wrap { max-width: 100%; } .fly-header .layui-nav-right { margin-top: -10px; } .carousel-main { display: block !important; margin-bottom: 10px; } .side-grid { margin-top: 10px; min-height: 200px; } .entry-info { margin: 10px 0 10px; padding: 8px 15px; } .entry-info>li { padding: 0; } .entry-info>.d-flex { display: block !important; } .entry-info .info-item { margin-bottom: 3px; justify-content: space-between !important; } .entry-info .info-value { flex: none; } /*筛选*/ .filter-category { flex-direction: column; align-items: flex-start; } .filter-category .filter-category-title { margin-bottom: 8px; } .filter-category .filter-options { margin-left: 0; gap: 6px; } .filter-category .filter-option a { padding: 3px 6px; font-size: 0.9rem; } .tag-cloud-list .tag { width: calc(100% / 2 - 24px); } }