/* ============================================================================ 字体规范（唯一标准，2026-10-22 建立 / 2026-10-23 定稿 / 2026-10-24 统一） 基准 16px（1rem = 16px），全站文字只保留 4 档；图标、价格/统计数字、装饰 大数字不在这 4 档里，继续用 px。 ---------------------------------------------------------------------------- 类别 变量 桌面 / 移动 用途 页面标题 --fs-h1 1.25rem (20px) 页面/文章主标题 卡片标题 --fs-title 1rem (16px) 面板、卡片、区块小标题 正文 --fs-body .875rem (14px) 正文、列表、表单输入 辅助信息 --fs-muted .75rem (12px) 时间、标签、提示、元信息 ---------------------------------------------------------------------------- 用法（改字号只改 :root，业务样式不要再写死 px）： 卡片/面板标题 font-size:var(--fs-title) 正文 font-size:var(--fs-body) 时间/标签/提示 font-size:var(--fs-muted) 模板行内样式用 .fs-h1 / .fs-title / .fs-body / .fs-muted / .fs-btn。 旧的 --fs-h2 / --fs-h3 / --fs-btn 保留成别名，漏改的声明也不会跳出这四档； 新代码请写 --fs-title / --fs-body / --fs-muted。 ⚠️ 图标字号（.iconfont / .layui-icon / .hc-auth 等）和价格、统计数字 属于图形/数字展示，不套用这 4 档。 ⚠️ 桌面和移动是同一套字号，不要再按断点缩放（图标和价格/统计数字除外）。 ============================================================================ */ /* ============================================================================ 主题色（唯一标准，2026-10-24 建立） 本站前端只有三个品牌蓝，全部收进变量；换主色只改 :root 里这三行。 ---------------------------------------------------------------------------- 变量 默认值 用途 --c-main #0081ff 主色：实心按钮、链接、选中态、图标高亮 --c-main-deep #0b63ce 主色·深：hover / 描边 / 浅色底上的文字 --c-main-end #2d83c6 主色·渐变末端（原靛青），跟 --c-main 配 45deg 渐变 --c-stick #e5484d 置顶：置顶帖标题 / 置顶图标 / 置顶徽标（全部列表共用） --c-stick-hover #c93a3f 置顶·hover（--c-stick 的加深） ---------------------------------------------------------------------------- 用法： 实心按钮/选中底色 background: var(--c-main) 按钮渐变 linear-gradient(45deg,var(--c-main),var(--c-main-end)) 链接/说明文字 color: var(--c-main-deep) (或 --c-main，按原设计) 置顶帖标题/图标/徽标 color / background: var(--c-stick) ⚠️ 业务样式不要再写死 #0081ff / #0b63ce / #2d83c6，模板行内样式也一样。 ⚠️ 主色的浅色底（#eef4ff / #f4f8ff / #cfe0f7 等）和半透明投影 （rgba(0,129,255,.x)、rgba(11,99,206,.x)）没走变量：换主色时它们不会跟着变， 需要一并手工调，否则会出现「蓝按钮配旧蓝色底」的色差。 ⚠️ .bg-cyan / .text-cyan 是调色板里的「天青」色块，不属于主题，保持字面量。 ============================================================================ */ :root{ /* 主题色：换肤只改这三行 */ --c-main: #0081ff; --c-main-deep: #0b63ce; --c-main-end: #2d83c6; /* 置顶帖统一色：换色只改这两行 */ --c-stick: #FF0000; --c-stick-hover: #c93a3f; --fs-h1: 1.25rem; --fs-title: 1rem; --fs-body: .875rem; --fs-muted: .75rem; --fs-small: .7rem; /* 兼容别名（新代码不要再用） */ --fs-h2: var(--fs-title); --fs-h3: var(--fs-muted); --fs-btn: var(--fs-body); } .fs-h1{font-size:var(--fs-h1)!important;} .fs-h2{font-size:var(--fs-h2)!important;} .fs-h3{font-size:var(--fs-h3)!important;} .fs-title{font-size:var(--fs-title)!important;} .fs-body{font-size:var(--fs-body)!important;} .fs-muted{font-size:var(--fs-muted)!important;} .fs-small{font-size:var(--fs-small)!important;} .fs-btn{font-size:var(--fs-btn)!important;} /* 全局 */ /*html,body{overflow-x: hidden;}*/ /*跟富文本冲突 201.12.23日注释*/ html body{margin-top: 61px;font-size:var(--fs-body);font-family:"Helvetica Neue",Helvetica,Arial,"Microsoft YaHei",sans-serif;} /* 标题元素的默认字号也归到规范里（组件自己有 font-size 的会覆盖这里） */ h1{font-size:var(--fs-h1);} h2,h3{font-size:var(--fs-title);} h4,h5,h6{font-size:var(--fs-body);} small{font-size:var(--fs-muted);} html{background-color: #F2F2F2;} i{font-style: normal;} .bg-main {background-color: var(--c-main-end)!important;color: #ffffff!important;}/*靛青 背景主题*/ .bg-img { background-size: cover; background-position: center; background-repeat: no-repeat; } .layui-laydate .layui-laydate-content .layui-this{background-color: var(--c-main-end)!important;} .layui-form-select dl dd.layui-this{background-color: var(--c-main-end)!important;color: #ffffff!important;} .layui-layout-left{left: 150px} .layui-layout-admin .layui-header{position: absolute} .layui-input, .layui-select, .layui-textarea{border-color:#dedede;} /*边框*/ ::-webkit-input-placeholder { color: #cecece!important; } :-moz-placeholder { color: red!important; } :-ms-input-placeholder { color: red!important; } .layui-elem-quote{border-left: 4px solid var(--c-main-end);} .layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this>a, .layui-nav-tree .layui-this>a:hover{ background-color: var(--c-main-end)!important; } .layui-laydate .layui-this, .layui-laydate .layui-this>div{ background-color: var(--c-main-end)!important; } .layui-form-checked[lay-skin=primary]>i{ background-color: var(--c-main-end)!important; border-color: var(--c-main-end)!important; } .layui-form-radio:hover>*, .layui-form-radioed, .layui-form-radioed>i{ color: var(--c-main-end); } .layui-tab-brief>.layui-tab-title .layui-this{ color: var(--c-main-end); } .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after{ border-bottom: 2px solid var(--c-main-end); } /*颜色渐变*/ .bg-gradual-red {background-image: linear-gradient(45deg, #f43f3b, #ec008c);color: #ffffff!important;} /*魅红*/ .bg-gradual-orange {background-image: linear-gradient(45deg, #ff9700, #ed1c24);color: #ffffff!important;}/*鎏金*/ .bg-gradual-green {background-image: linear-gradient(45deg, #39b54a, #8dc63f);color: #ffffff!important;}/*翠柳*/ .bg-gradual-blue {background-image: linear-gradient(45deg, var(--c-main), var(--c-main-end));color: #ffffff!important;}/*靛青*/ .bg-gradual-purple {background-image: linear-gradient(45deg, #9000ff, #5e00ff);color: #ffffff!important;}/*惑紫*/ .bg-gradual-pink {background-image: linear-gradient(45deg, #ec008c, #6739b6);color: #ffffff!important;}/*霞彩*/ /*背景颜色*/ .bg-red {background-color: #FF0000;color: #ffffff!important;}/*嫣红*/ .bg-orange {background-color: #f37b1d;color: #ffffff!important;}/*桔橙*/ .bg-yellow {background-color: #fbbd08;color: #333333!important;}/*明黄*/ .bg-olive {background-color: #8dc63f;color: #ffffff!important;}/*橄榄*/ .bg-green {background-color: #39b54a;color: #ffffff!important;}/*森绿*/ .bg-cyan {background-color: #2d83c6;color: #ffffff!important;}/*天青（调色板，不跟主题走）*/ .bg-blue {background-color: var(--c-main);color: #ffffff!important;}/*海蓝*/ .bg-purple {background-color: #6739b6;color: #ffffff!important;}/*姹紫*/ .bg-mauve {background-color: #9c26b0;color: #ffffff!important;}/*木槿*/ .bg-pink {background-color: #e03997;color: #ffffff!important;}/*桃粉*/ .bg-brown {background-color: #a5673f;color: #ffffff!important;}/*棕褐*/ .bg-grey {background-color: #8799a3;color: #ffffff!important;}/*炫灰*/ .bg-gray {background-color: #aaaaaa;color: #ffffff!important;}/*草灰*/ .bg-black {background-color: #333333;color: #ffffff!important;}/*墨黑*/ .bg-white {background-color: #ffffff;color: #666666!important;}/*雅白*/ /*文本颜色*/ .text-red{color: #FF0000!important;}/*嫣红e54d42*/ .text-orange {color: #f37b1d!important;}/*桔橙*/ .text-yellow {color: #fbbd08!important;}/*明黄*/ .text-olive{color: #8dc63f!important;}/*橄榄*/ .text-green {color: #39b54a!important;}/*森绿*/ .text-cyan {color: #2d83c6!important;}/*天青（调色板，不跟主题走）*/ .text-blue{color: var(--c-main)!important;}/*海蓝*/ .text-purple {color: #6739b6!important;}/*姹紫*/ .text-mauve{color: #9c26b0!important;}/*木槿*/ .text-pink {color: #e03997!important;}/*桃粉*/ .text-brown {color: #a5673f!important;}/*棕褐*/ .text-grey {color: #8799a3!important;}/*炫灰*/ .text-gray{color: #aaaaaa!important;}/*草灰*/ .text-black{color: #333333!important;}/*墨黑*/ .text-white{color: #ffffff!important;}/*雅白*/ .text-xs {font-size:var(--fs-muted);} .text-sm {font-size:var(--fs-muted);} .text-df {font-size:var(--fs-body);} .text-lg {font-size:var(--fs-title);} .text-xl {font-size:var(--fs-title);} .text-xxl {font-size:var(--fs-h1);} .text-sl {font-size: 40px} .text-xsl {font-size: 60px;} .text-cut {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;} .text-bold {font-weight: bold;} .text-center {text-align: center;} .text-left {text-align: left;} .text-right {text-align: right;} /* -- 内外边距 -- */ .margin-0 {margin: 0;} .margin-xs {margin: 5px;} .margin-sm {margin: 10px;} .margin {margin: 15px;} .margin-lg {margin: 20px;} .margin-xl {margin: 25px;} .margin-top-xs {margin-top: 5px;} .margin-top-sm {margin-top: 10px;} .margin-top {margin-top: 30px;} .margin-top-lg {margin-top: 20px;} .margin-top-xl {margin-top: 25px;} .margin-right-xs {margin-right: 5px;} .margin-right-sm {margin-right: 10px;} .margin-right {margin-right: 15px;} .margin-right-lg {margin-right: 20px;} .margin-right-xl {margin-right: 25px;} .margin-bottom-xs {margin-bottom: 5px;} .margin-bottom-sm {margin-bottom: 10px;} .margin-bottom {margin-bottom: 15px;} .margin-bottom-lg {margin-bottom: 20px;} .margin-bottom-xl {margin-bottom: 25px;} .margin-left-xs {margin-left: 5px;} .margin-left-sm {margin-left: 10px;} .margin-left {margin-left: 15px;} .margin-left-lg {margin-left: 20px;} .margin-left-xl {margin-left: 25px;} .margin-lr-xs {margin-left: 5px;margin-right: 5px;} .margin-lr-sm {margin-left: 10px;margin-right: 10px;} .margin-lr {margin-left: 15px;margin-right: 15px;} .margin-lr-lg {margin-left: 20px;margin-right: 20px;} .margin-lr-xl {margin-left: 25px;margin-right: 25px;} .margin-tb-xs {margin-top: 5px;margin-bottom: 5px;} .margin-tb-sm {margin-top: 10px;margin-bottom: 10px;} .margin-tb {margin-top: 15px;margin-bottom: 15px;} .margin-tb-lg {margin-top: 20px;margin-bottom: 20px;} .margin-tb-xl {margin-top: 25px;margin-bottom: 25px;} .padding-0 {padding: 0;} .padding-xs {padding: 5px;} .padding-sm {padding: 10px;} .padding {padding: 15px;} .padding-lg {padding: 20px;} .padding-xl {padding: 25px;} .padding-top-xs {padding-top: 5px;} .padding-top-sm {padding-top: 10px;} .padding-top {padding-top: 15px;} .padding-top-lg {padding-top: 20px;} .padding-top-xl {padding-top: 25px;} .padding-right-xs {padding-right: 5px;} .padding-right-sm {padding-right: 10px;} .padding-right {padding-right: 15px;} .padding-right-lg {padding-right: 20px;} .padding-right-xl {padding-right: 25px;} .padding-bottom-xs {padding-bottom: 5px;} .padding-bottom-sm {padding-bottom: 10px;} .padding-bottom {padding-bottom: 15px;} .padding-bottom-lg {padding-bottom: 20px;} .padding-bottom-xl {padding-bottom: 25px;} .padding-left-xs {padding-left: 5px;} .padding-left-sm {padding-left: 10px;} .padding-left {padding-left: 15px;} .padding-left-lg {padding-left: 20px;} .padding-left-xl {padding-left: 25px;} .padding-lr-xs {padding-left: 5px;padding-right: 5px;} .padding-lr-sm {padding-left: 10px;padding-right: 10px;} .padding-lr {padding-left: 15px;padding-right: 15px;} .padding-lr-lg {padding-left: 20px;padding-right: 20px;} .padding-lr-xl {padding-left: 25px;padding-right: 25px;} .padding-tb-xs {padding-top: 5px;padding-bottom: 5px;} .padding-tb-sm {padding-top: 10px;padding-bottom: 10px;} .padding-tb {padding-top: 15px;padding-bottom: 15px;} .padding-tb-lg {padding-top: 20px;padding-bottom: 20px;} .padding-tb-xl {padding-top: 25px;padding-bottom: 25px;} /* ================== 布局 ==================== */ /* -- flex弹性布局 -- */ .flex {display: -webkit-flex; /* Safari */display: flex;} .basis-xxs {flex-basis: 10%;} .basis-xs {flex-basis: 20%;} .basis-xm {flex-basis: 30%;} .basis-sm {flex-basis: 40%;} .basis-df {flex-basis: 50%;} .basis-lg {flex-basis: 60%;} .basis-gl {flex-basis: 70%;} .basis-xl {flex-basis: 80%;} .flex-sub {flex: 1;} .flex-twice {flex: 2;} .flex-treble {flex: 3;} .flex-direction {flex-direction: column;} .flex-wrap {flex-wrap: wrap;} .align-start {align-items: flex-start;} .align-end {align-items: flex-end;} .align-center {align-items: center;} .align-stretch {align-items: stretch;} .self-start {align-self: flex-start;} /* 原来是 align-self: flex-center —— flex-center 不是合法取值，整条声明会被浏览器丢弃 */ .self-center {align-self: center;} .self-end {align-self: flex-end;} .self-stretch {align-self: stretch;} .align-stretch {align-items: stretch;} .justify-start {justify-content: flex-start;} .justify-end {justify-content: flex-end;} .justify-center {justify-content: center;} .justify-between {justify-content: space-between;} .justify-around {justify-content: space-around;} /* grid布局 */ .grid {display: -webkit-flex; /* Safari */display: flex;flex-wrap: wrap;} .grid.grid-square {overflow: hidden; } .grid .grid-square .cu-tag {position: absolute;right: 0;top: 0;border-bottom-left-radius: 3px;padding: 3px 6px;height: auto;background-color: rgba(0, 0, 0, 0.5);} .grid .grid-square i[class*="layui-icon"] {font-size: 26px;position: absolute;color: #8799a3;margin: auto;top: 0;bottom: 0;left: 0;right: 0;display: -webkit-flex; /* Safari */display: flex;justify-content: center;align-items: center;flex-direction: column;} .grid .grid-square {margin-right: 10px;margin-bottom: 10px;border-radius: 3px;position: relative;overflow: hidden;} .grid .col-1.grid-square {padding-bottom: 100%;height: 0;margin-right: 0;} .grid .col-2.grid-square {padding-bottom: calc((100% - 10px)/2);height: 0;width: calc((100% - 10px)/2);} .grid .col-3.grid-square {padding-bottom: calc((100% - 20px)/3);height: 0;width: calc((100% - 20px)/3);} .grid .col-4.grid-square{padding-bottom: calc((100% - 30px)/4);height: 0;width: calc((100% - 30px)/4);} .grid .col-5.grid-square{padding-bottom: calc((100% - 40px)/5);height: 0;width: calc((100% - 40px)/5);} .grid .col-2.grid-square:nth-child(2n), .grid .col-3.grid-square:nth-child(3n), .grid .col-4.grid-square:nth-child(4n), .grid .col-5.grid-square:nth-child(5n) {margin-right: 0;} .grid .col-1{width: 100%;} .grid .col-2{width: 50%;} .grid .col-3{width: 33.33%;} .grid .col-4{width: 25%;} .grid .col-5{width: 20%;} .layui-bg-black{background-color: #222!important;} .layui-form-pane .layui-form-label{background: #f6f6f6} /*表单label底色*/ /* 辅助 */ a:hover{color: #009688; transition: all .3s;} pre{padding: 10px 15px; margin: 10px 0; font-size:var(--fs-muted); border-left: 6px solid #009688; background-color: #f8f8f8; font-family: Courier New; overflow: auto;} .layui-container{padding: 0;} .fly-main{width: 1079px; min-height: 600px; margin: 0 auto 15px;} .layui-badge{height: 20px; line-height: 20px; border-radius: 2px;} .fly-link{color: #01AAED;} .fly-link:hover{color: #5FB878;} .fly-grey{color: #999;} .fly-msg, .fly-error{padding: 10px 15px; line-height: 24px;} .fly-msg{background-color:#F8F8F8; color:#666;} .fly-msg a{color:#4F99CF} .fly-editbox{position: relative;} .fly-marginTop{margin-top: 15px;} .fly-mid{display: inline-block; height: 10px; width: 1px; margin: 0 10px; vertical-align: middle; background-color: #e2e2e2;} .fly-right{position: absolute; right: 15px; top: 0;} /* 过度 */ .fly-loading{position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -15px; font-size: 30px; color: #c2c2c2;} /* 头像 */ .fly-avatar{position: absolute; left: 15px; top: 15px;} .fly-avatar img{display: block; width: 45px; height: 45px; margin: 0; border-radius: 2px;} /* 徽章 */ .fly-badge-vip{height: 16px; line-height: 16px; padding: 0 3px; background-color: #FF5722; color: #fff; border-radius: 2px;} .fly-badge-accept{height: 18px; line-height: 18px; padding: 0 5px !important; background-color: #5FB878; border-radius: 2px;} /* 赞助商 */ .fly-zanzhu{display: block; margin-top: 10px;} .fly-zanzhu:first-child{margin-top: 0;} .fly-zanzhu:hover{opacity: 0.9; color: #fff;} /* 图标 */ .layui-icon-login-qq, .layui-icon-login-weibo {font-size: 30px;} .icon-renzheng{position: relative; color: #FFB800;} .icon-kiss{font-size: 18px;} .icon-pinglun1{position: relative; top: 2px;} /* 头部 */ .layui-nav .layui-this:after, .layui-nav-bar{background: none} .fly-nav-msg{position:absolute; top: 50%; left:0; height: 20px; line-height: 20px; margin-top: -10px; padding:0 6px; background-color: #FF7200; color: #fff; border-radius: 2px;} .fly-nav-msg:hover{color:#fff;} /*.fly-header .layui-nav{padding: 0; background: none;}*/ .fly-nav a{padding: 0 25px 0 60px;} .fly-nav-user li a{padding: 0 10px;} .fly-nav-user i{font-size: 18px} .fly-nav-user .layui-nav-child{left: 15px;min-width:120px;text-align: center } .fly-header .fly-nav-center a{font-size:var(--fs-body)} .fly-header .top_img{position: absolute;top:5px;right: 2px;width: 25px;height: 25px} /* 底部 */ .fly-footer {padding-top:20px;padding-bottom:20px; line-height: 30px; text-align: center; color: #737573; border-top: 1px solid #e2e2e2;} .fly-footer a{padding:0 6px; font-weight: 300; color: #333;} .fly-footer a:hover{color: #777;} .fly-union{margin-top: 10px; color: #999;} .fly-union>*{display: inline-block; vertical-align: middle;} .fly-union a[upyun] img{width: 80px;} .fly-union span{position: relative; top: 3px;} .fly-union span a{padding: 0; display: inline; color: #999;} .fly-union span a:hover{text-decoration: underline;} /* 面板 */ .fly-panel{margin-bottom: 10px; border-radius: 2px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);} .fly-panel[pad20]{padding: 20px;} /* 面板标题栏：原来是虚线分隔 + 常规字重，改成实线 + 浅底 + 加粗，跟卡片风格统一 */ .fly-panel-title{position: relative; height: 50px; line-height: 50px; padding: 0 15px; border-bottom: 1px solid #f2f4f8; background: #fbfcfe; color: #2b3445; font-weight: 600; border-radius: 2px 2px 0 0; font-size:var(--fs-title);} .fly-panel-main{padding: 10px 15px;} /* ---------- 右侧栏（首页 / 地推资源页共用 base/right.html） ---------- 跟左列的面板统一成同一套圆角/阴影，标题栏也统一：浅底 + 实线分隔 + 加粗字。 */ .hc-right .fly-panel{margin-bottom: 12px; border-radius: 12px; box-shadow: 0 1px 3px rgba(16,30,54,.06);} .hc-right .fly-panel .fly-panel-title{border-radius: 12px 12px 0 0; padding-left: 26px;} /* 标题左侧的蓝色小色条。用绝对定位（父级已经是 position:relative）， 不去动 title 的 line-height，标题栏高度就不会跟着变。 */ .hc-right .fly-panel-title::before{content: ""; position: absolute; left: 15px; top: 50%; width: 3px; height: 14px; margin-top: -7px; border-radius: 2px; background: var(--c-main);} /* 标题栏右侧的那几个入口统一：贴右 15px + 与标题**垂直居中**。 ⚠️ 原来只对 .more 设了 right/top（全局那条是 `top:15px`），而 .more 又从 .fly-panel-title 继承了 `line-height:50px` —— 于是它的盒子 50px 高、从 15px 处开始摆，文字中心落在 40px， 比标题的 25px 低了 15px，底边还越出标题栏 15px（实测 gapBottom = -15）。 现在 top:0 + line-height:50px，和标题同一个行盒，中心都在 25px。 .fly-joinad（广告面板的「我要加入」）全局连 position 都没设，光写 right 是没用的（static 不吃 right）。 */ .hc-right .fly-panel-title .more, .hc-right .fly-panel-title .fly-joinad{position: absolute; right: 15px; top: 0; line-height: 50px; color: var(--c-main);} .hc-right .fly-panel-title .more:hover, .hc-right .fly-panel-title .fly-joinad:hover{color: var(--c-main-end);} /* 温馨通道标题右侧的签到图标（原来紧跟在标题文字后面） */ .hc-right .fly-panel-title .sign_right{position: absolute; right: 15px; top: 0; line-height: 50px;} .hc-right .fly-panel-title .sign_right img{display: inline-block; width: 22px; height: 22px; vertical-align: middle;} /* 首页顶部的公告条：加个左侧色条，跟普通文本块区分开 */ .home-notice{border-left: 3px solid var(--c-main); border-radius: 4px; color: #5a6273; font-size:var(--fs-muted);} .home-notice .text-black{color: #2b3445;} /* ---------- 温馨通道的六宫格 ---------- markup 是 base/right.html 里的 .quick-grid > a.quick-item。 要点：分格用 grid（不是 float/inline-block），图标块尺寸由 CSS 定死 —— 原来每格的 font-size/padding 都写在标签内联 style 上，六格只能靠内容撑高，行与行还不等高。 */ .hc-right .hc-quick-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;} .hc-right .hc-quick-grid .hc-quick-item{display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 13px 4px 11px; border: 1px solid transparent; border-radius: 10px; background: #f8fafd; color: #5a6273; font-size:var(--fs-muted); line-height: 16px; transition: background-color .18s, border-color .18s, transform .18s;} .hc-right .hc-quick-grid .hc-quick-item i{display: block; width: 42px; height: 42px; line-height: 42px; text-align: center; margin-bottom: 8px; border-radius: 11px; background: #e8f1ff; color: var(--c-main); font-size: 21px; transition: background-color .18s, color .18s;} .hc-right .hc-quick-grid .hc-quick-item span{white-space: nowrap;} .hc-right .hc-quick-grid .hc-quick-item:hover{background: #f2f7ff; border-color: #d9e8ff; transform: translateY(-1px);} .hc-right .hc-quick-grid .hc-quick-item:hover i{background: var(--c-main); color: #fff;} .hc-right .hc-quick-grid .hc-quick-item:hover span{color: var(--c-main);} /* ---------- 侧栏产品列表（APP/PC/小程序共用） ---------- 一行一个：LOGO + 名字（单行截断，长名字悬停看 title）+ 价格（右对齐、蓝色加粗）。 原来是「名字+价格」拼成一整段 inline-block 平铺，长名字一换行就看不出哪个价格属于哪个产品。 */ .hc-right .hc-product-list{display: flex; flex-direction: column; gap: 1px; padding: 8px 15px 12px;} .hc-right .hc-product-list .product_i{display: flex; align-items: center; gap: 8px; padding: 5px 8px; margin: 0 -8px; border-radius: 8px; color: #5a6273; font-size:var(--fs-body); line-height: 20px; transition: background-color .18s;} /* LOGO：固定 28px 方块。object-fit:cover —— 产品 LOGO 有方有扁（宽高比不一）， 不裁的话会被压变形；垫一个和站点底色一致的背景，图没加载出来时也不会是个空洞。 ⚠️ 这里**不用**站内那套 JS 懒加载（.lazyload + data-src），走的是浏览器原生 loading="lazy"。 原因：JS 那套是 IntersectionObserver，只在**元素进入视口那一刻**触发一次；侧栏有 6 个面板 叠在一起，快速拖动滚动条（或程序化 scrollIntoView）一步跳过去时，中间那些面板 从头到尾没有「进入视口」的瞬间 → 图片永远停在占位图上（实测：跳到最后一块面板时， 小程序产品那 5 张一直是 uv.png）。原生 loading="lazy" 由浏览器决定，不会有这个问题， 而且没加载出来时不显示占位图、直接就是那个浅色底（更干净）。 */ .hc-right .hc-product-list .pd-logo{flex: none; width: 28px; height: 28px; border-radius: 8px; object-fit: cover; background: #f2f4f8;} .hc-right .hc-product-list .product_i:hover{background: #f2f7ff;} .hc-right .hc-product-list .pd-name{flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .hc-right .hc-product-list .product_i:hover .pd-name{color: var(--c-main);} .hc-right .hc-product-list .pd-price{flex: none; } .hc-right .hc-product-list .product_i:hover .pd-price{color: var(--c-main-end);} /* ---------- 侧栏的 CPA / CPS 广告列表 ---------- 去掉默认的 disc 圆点（在 15px 内边距里那个点飘在外面），换成贴住文字的自绘小圆点， 悬停时圆点变蓝 —— 比整行变色克制，长列表看着不乱。 */ .hc-right .fly-list-static{padding: 6px 15px 12px;} .hc-right .fly-list-static li{position: relative; padding-left: 14px; line-height: 28px; list-style: none; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} .hc-right .fly-list-static li::before{content: ""; position: absolute; left: 2px; top: 50%; margin-top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #c3d6ef; transition: background-color .18s;} .hc-right .fly-list-static li:hover::before{background: var(--c-main);} .hc-right .fly-list-static li a{color: #5a6273; font-size:var(--fs-body);} .hc-right .fly-list-static li a:hover{color: var(--c-main);} /* ---------- 侧栏广告位 ---------- */ .hc-right .fly-panel-main.hc-ad-main{padding: 10px 15px 13px;} .hc-right .fly-zanzhu{border-radius: 8px; overflow: hidden;} .hc-right .fly-zanzhu img{display: block; width: 100%; height: auto; cursor: pointer; border-radius: 8px;} .fly-panel-title .more{position: absolute;right: 0;top: 15px;font-size:var(--fs-muted)} .fly-panel-title .more i{font-size: 12px} /* 专栏 */ .fly-column{height: 50px; line-height: 50px;} .fly-column ul li{position: relative; display: inline-block; height: 50px;} .fly-column ul li a{padding: 0 20px;} .fly-column ul li.layui-this:after{ position: absolute; bottom: 13px; left: 8px; z-index: 0; width: 50px; height: 22px; border: 1px solid #5FB878; border-radius: 2px;} .fly-column ul li.layui-this a{color: #5FB878;} .fly-column ul li .fly-mid{margin: 0 20px;} .fly-column-right{position: absolute; right: 0; top: 0;} .fly-column-right .layui-btn{vertical-align: initial;} .fly-column .layui-badge-dot{position: absolute; top: 50%; left: 50%; margin: -4px 0 0 20px;} /* 搜索 */ .fly-search{display: inline-block; vertical-align: top; /*margin-right: 10px; text-align: center;*/ cursor: pointer; font-size: 20px; position: absolute;right: 100px} .fly-search-content input{ padding-left: 10px; } .fly-search-content input:focus{ border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6) } .fly-search-content ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: red; } ::-moz-placeholder { /* Firefox 19+ */ color: red; } :-ms-input-placeholder { /* IE 10+ */ color: red; } :-moz-placeholder { /* Firefox 18- */ color: red; } .fly-search .layui-icon{font-size: 20px;} .fly-search:hover{color: #5FB878;} .fly-layer-search input{height: 75px; line-height: 75px; width: 500px; padding: 0 15px; font-size:var(--fs-h1); border: none 0; background: none;} /* 筛选：面板标题栏里的分类/排序导航（首页的「全部/广告主/…/默认/最新」，充值页、会员页、 发帖页也复用同一个类）。做成和 .filter 一套的圆角标签，选中态用站点蓝 —— 原来是绿色纯文字， 跟站内其它地方的蓝色标签不是一个体系。 */ /* 这一条改成白底：标签底是 #f5f7fa，放在标题栏的浅底上几乎看不出来， 跟列表页 .filter（白底 + #f5f7fa 标签）保持一致 */ .fly-panel-title.fly-filter{background: #fff;} .fly-filter a{display: inline-block; height: 28px; line-height: 28px; padding: 0 12px; margin: 0 2px; border-radius: 14px; background: #f5f7fa; color: #5a6273; font-size:var(--fs-body); vertical-align: middle; transition: background-color .18s,color .18s;} .fly-filter a:hover{background: #e8f3ff; color: var(--c-main);} .fly-filter a.layui-this{color: #fff; background-color: var(--c-main); background-image: linear-gradient(45deg,var(--c-main),var(--c-main-end)); box-shadow: 0 2px 6px rgba(0,129,255,.28);} /* 做成标签之后不再需要竖线分隔符 */ .fly-filter .fly-mid{display: none;} .fly-filter-right{position: absolute; right: 10px; top: 0;} /* Tab */ .fly-tab{position: relative; padding-top: 3px;} .fly-tab .layui-tab{margin: 0;} .fly-tab .layui-tab-title{border-bottom: 1px dotted #e2e2e2;} .fly-tab-border{position:relative; margin-bottom: 15px;} .fly-tab-border span, .fly-tab-border span a{display:inline-block; *display:inline; *zoom:1; vertical-align:top;} .fly-tab-border span{border: 1px solid #ddd; border-right: none; font-size:0;} .fly-tab-border span a{position: relative; height: 36px; line-height: 36px; padding: 0 20px; border-right: 1px solid #ddd; font-size:var(--fs-body); background-color: #fff;} .fly-tab-border .tab-this{color: #000;} .fly-tab-border .tab-this:after{content: ''; position: absolute; bottom: -1px; left: -1px; width: 100%; height: 1px; padding: 0 1px; background-color: #009688;} /* 分页 */ .laypage-main, .laypage-main *{display:inline-block; *display:inline; *zoom:1; vertical-align:top;} .laypage-main{margin: 20px 0; border: 1px solid #009E94; border-right: none; border-bottom: none; font-size: 0;} .laypage-main *{padding: 0 20px; line-height: 36px; border-right: 1px solid #009E94; border-bottom: 1px solid #009E94; font-size:var(--fs-body);} .laypage-main .laypage-curr{background-color:#009E94; color:#fff;} /* 简易编辑器 */ .fly-edit{position:relative; display: block; top: 1px; left:0; padding:0 10px; border: 1px solid #e6e6e6; border-radius: 2px 2px 0 0; background-color: #FBFBFB;} .fly-edit span{cursor:pointer; padding:0 10px; line-height: 38px; color:#009E94;} .fly-edit span i{position: relative; padding-right: 6px; font-size: 18px;} .fly-edit span:hover{color: #5DB276;} /* 列表 */ .fly-list li{position: relative; height: 45px; line-height: 22px; padding: 15px 15px 15px 75px; border-bottom: 1px dotted #e2e2e2;} .fly-list li:last-child{border-bottom: none;} .fly-list li:hover { box-shadow: #ffac7f 0 0 5px; transition: all 0.5s ease-in-out 0s; } .fly-list li h2, .fly-list li h2 a, .fly-list-info{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .fly-list li h2{height: 26px; font-size: 0;} .fly-list li h2 a{display: inline-block; max-width: 80%; padding-right: 10px; font-size:var(--fs-title);} .fly-list li h2 .layui-badge{top: -2px; height: 16px; line-height: 16px; padding: 0 5px; margin-right: 10px; font-size:var(--fs-muted); border: 1px solid #5FB878; background: none; color: #5FB878;} .fly-list li h2 a:visited{color: #777} /*点击变色*/ .fly-list-info{position: relative; font-size:var(--fs-muted); color: #9aa2b1;display: flex;align-items: center} .fly-list-info>*{padding-right: 15px;} .fly-list-info a[link]{color: #7b8394;} .fly-list-info a[link]:hover{color: var(--c-main);} .fly-list-info .icon-renzheng{position: relative; top: 1px; margin-right: 3px;} .fly-list-info .fly-badge-vip{position: relative; margin-left: 2px;} .fly-list-kiss{color: #FF5722;} .fly-list-nums{position: absolute; right: 0; top: 0; padding-right: 0!important;} .fly-list-nums i{position: relative; padding: 0 3px 0 15px;} .fly-list-badge{position: absolute; right: 15px; top: 15px; font-size: 0;} .fly-list-badge .layui-badge{margin-left: 5px; border-radius: 2px; font-size:var(--fs-muted);} /* 单行列表 */ .fly-list-one .fly-panel-title{margin-bottom: 5px;} .fly-list-one dd{margin: 0 15px; line-height: 26px; white-space: nowrap; overflow: hidden; list-style: decimal-leading-zero inside; *list-style-type: decimal inside; color: #009E94;} .fly-list-one dd a, .fly-list-one dd span{display: inline-block; *display: inline; *zoom: 1; vertical-align: top; font-style: normal} .fly-list-one dd a{max-width: 75%; margin-right: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:var(--fs-body);} .fly-list-one dd span{font-size:var(--fs-muted); color: #ccc;} .fly-list-one dd:last-child{padding-bottom: 5px;} body .layui-edit-face{ border:none; background:none;} body .layui-edit-face .layui-layer-content{padding:0; background-color:#fff; color:#666; box-shadow:none} .layui-edit-face .layui-layer-TipsG{display:none;} .layui-edit-face ul{position:relative; width:372px; padding:10px; border:1px solid #D9D9D9; background-color:#fff; box-shadow: 0 0 20px rgba(0,0,0,.2);} .layui-edit-face ul li{cursor: pointer; float: left; border: 1px solid #e8e8e8; height: 22px; width: 26px; overflow: hidden; margin: -1px 0 0 -1px; padding: 4px 2px; text-align: center;} .layui-edit-face ul li:hover{position: relative; z-index: 2; border: 1px solid #eb7350; background: #fff9ec;} /* 签到 */ .fly-signin cite{padding: 0 5px; color: #FF5722; font-style: normal;} .fly-signin .layui-badge-dot{top: -7px; margin-left: 0px;} .fly-signin-list{padding: 0; line-height: 30px;} .fly-signin-list .layui-tab-item{padding: 10px; height: 320px; overflow-x: hidden; overflow-y: auto;} .fly-signin-list li{margin-top: 5px; padding-bottom: 5px; border-bottom: 1px dotted #e2e2e2; white-space: nowrap;} .fly-signin-list li:first-child{margin-top: 0;} .fly-signin-list li:last-child{border: none 0;} .fly-signin-list img{width: 30px; height: 30px; margin-right: 10px; border-radius: 2px;} .fly-signin-list span{padding-left: 10px;} .fly-signin-list span i{color: #FF5722;} .fly-signin-list .fly-none{padding-top: 20px; min-height: 0;} .fly-signin-days{position: absolute; right: 15px; padding-left: 10px; color: #999;} .fly-signin-main{position: relative; height: 38px; padding: 24px 15px; text-align: center;} .fly-signin-main span{padding-left: 10px;} /* 榜单 */ .fly-rank{padding-bottom: 10px;} .fly-rank dl{position: relative; overflow: hidden; margin-left: 20px; text-align: center; font-size: 0;} .fly-rank dd{position: relative; width: 65px; height: 85px; margin: 10px 25px 5px 0; display:inline-block; *display:inline; *zoom:1; vertical-align:top; font-size:var(--fs-muted);} .fly-rank dd a img{width: 65px; height: 65px; border-radius: 2px;} .fly-rank dd a cite{ position:absolute; bottom: 20px; left: 0; width: 100%; height:20px; line-height:20px; text-align:center; background-color:rgba(0,0,0,.2); color:#fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .fly-rank dd a:hover cite{display: block;} .fly-rank dd a i{position:absolute; bottom: 0; left: 0; width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal;} /* 静态列表 */ .fly-list-static li{line-height: 26px; list-style-position: inside; list-style-type: disc; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} .fly-list-static li a{color: #01AAED;} .fly-list-static li a:hover{opacity: 0.8;} /* 单行列表 */ .jie-row li{position: relative; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #E9E9E9; font-size: 0;} .jie-row li *{position: relative; display:inline-block; *display:inline; *zoom:1; vertical-align: top; line-height: 20px; font-size:var(--fs-muted);} .jie-row li span{padding: 0 6px; margin-right: 10px; background-color: #DADADA; color:#fff; font-size:var(--fs-muted);} .jie-row li .fly-stick{background-color:#393D49;} .jie-row li .fly-jing{background-color:var(--c-stick);} .jie-row li .jie-status{margin:0 10px 0 0;} .jie-row li .jie-status-ok{background-color:#8FCDA0;} .jie-row li a{ padding-right:15px; font-size:var(--fs-body);} .jie-row li cite{padding-right:15px;} .jie-row li i, .jie-row li em, .jie-row li cite{font-size:var(--fs-muted); color:#999; font-style: normal;} .jie-row li .mine-edit{margin-left:15px; padding:0 6px; background-color: #8FCDA0; color:#fff; font-size:var(--fs-muted);} .jie-row li .red-edit{margin-left:15px; padding:0 6px; background-color: #FF5722; color:#fff; font-size:var(--fs-muted);} .jie-row li .status-edit{margin-left:15px; padding:0 6px; background-color: #009688; color:#fff; font-size:var(--fs-muted);} .jie-row li em{position:absolute; right:0; top:0;} .jie-row li .jie-user{} .jie-row li .jie-title{max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .jie-row li .jie-user img{position:relative; top: 16px; width: 35px; height: 35px;} /* Detail页 */ .detail-box{padding: 20px;} .detail h1{font-size:var(--fs-h1); line-height: 28px;position: relative} .fly-detail-info{position: relative; margin: 10px 0 15px;} .fly-detail-info .layui-btn{height: 20px; line-height: 20px; vertical-align: top; border-radius: 0;} .fly-detail-info .layui-btn+.layui-btn{margin-left: 0;} .fly-admin-box{position: relative; display: inline-block; vertical-align: top; margin-left: 20px;} /* 详情页标题右侧的「合作 / 点击量」计数：属于元信息，跟徽章、时间同档 */ .fly-detail-info .fly-list-nums{top: -3px; font-size:var(--fs-muted);} .fly-detail-info .fly-list-nums i{padding: 0 3px 0 15px; font-size: 22px; color: #999;} .detail-about{position: relative; line-height: 20px; padding: 15px 15px 15px 75px; font-size:var(--fs-muted); background-color: #f8f8f8; color: #999;} .detail-about .jie-status, .detail-about .jie-status-ok{color:#fff;} .detail-about .fly-jing{padding:0 6px; background-color:var(--c-stick); color:#fff;} .detail-about .detail-hits{position: relative; top: 5px; line-height: 20px;} .detail-about span img{position:absolute; right:10px; top:10px; width: 60px;height: 60px} .fly-detail-user{white-space: nowrap; overflow: hidden;display: flex;align-items: center} .fly-detail-user a{padding-right: 5px; font-size:var(--fs-body);} .fly-detail-user .icon-renzheng{top: 1px;} .fly-detail-admin { padding-top: 10px; text-align: right; border-top: 1px dotted #EAEAEA; background-color: #f8f8f8; } .detail-hits span{height: 20px; line-height: 20px;} .detail-hits .layui-btn{border-radius: 0;} .detail-hits .layui-btn+.layui-btn{margin-left: 5px;} .detail-hits .jie-admin{margin-right: 1px;} .detail-body{margin: 20px 0 0; line-height: 26px; font-size:var(--fs-body); color: #333; word-wrap: break-word;overflow:hidden} .detail-body p{margin-bottom:15px;} .detail-body a{color:#4f99cf;} .detail-body img{max-width: 100%; cursor: crosshair;} .detail-body table{margin: 10px 0 15px;} .detail-body table thead{background-color:#f2f2f2;} .detail-body table th, .detail-body table td{padding: 10px 20px; line-height: 22px; border: 1px solid #DFDFDF; font-size:var(--fs-body); font-weight: 400;} .detail .page-title{ border: none; background-color: #f2f2f2;} /* 发帖 */ .layui-form-item.layui-col-space15{margin-bottom: 7.5px;} /* 求解管理 */ .jie-admin{cursor: pointer;} .detail-hits .jie-admin{color: #fff; padding: 0 10px; } .detail-hits .jie-admin a{color: #fff;} .jieda-admin{position:absolute; right: 0; top: 4px;} /* 回答 */ .jieda{margin-bottom: 30px;} .jieda li{position: relative; margin: 20px 0;padding-bottom:12px; border-bottom: 1px dotted #DFDFDF;} .jieda li:last-child{border-bottom: none;} .jieda .fly-none{height: 50px; min-height: 0;} .jieda .icon-caina{position:absolute; right:10px; top:15px; font-size:60px; color: #58A571;} .detail-about-reply{padding: 0 0 0 55px; background: none;} .detail-about-reply .detail-hits{left: 0; bottom: 0;} .detail-about-reply .fly-avatar{left: 0; top: 0;} .jieda-body{margin: 25px 0 20px; min-height: 0; /*line-height: 24px;*/ font-size:var(--fs-body);} .jieda-body p{margin-bottom: 10px;} .jieda-body a{color:#4f99cf} .jieda-reply{position:relative;} .jieda-reply span{padding-right:20px; color:#999; cursor:pointer;} .jieda-reply span:hover{color:#666;} .jieda-reply span i{margin-right:5px; font-size:16px;} .jieda-reply span em{font-style: normal;} .jieda-reply span .icon-zan{font-size: 22px;} .jieda-reply .zanok, .jieda-reply .jieda-zan:hover{color:#c00} .jieda-reply span .icon-svgmoban53{position: relative; top: 1px;} /* 用户中心 */ body .fly-user-main{position: relative; min-height: 700px;} .fly-user-main>.layui-nav{position: absolute; left: 0; top: 0; z-index: 50; height: 100%; padding: 10px 0;} .fly-user-main>.layui-nav .layui-icon{font-size: 16px; margin-right: 10px;} /*.fly-user-main>.layui-nav .layui-nav-item a{color: #000} .fly-user-main>.layui-nav .layui-this a,.layui-this>a:hover{color: #009688;background-color: white}*/ .fly-user-main>.fly-panel{min-height: 675px; margin: 0 0 10px 215px;} .fly-user-main .fly-none{min-height: 0;} .fly-panel-user[pad20]{padding-top: 5px;} .fly-form-app{margin-top:30px;} .fly-form-app .iconfont{font-size:26px; padding: 0 5px;} .fly-form-app .layui-icon-login-qq{color:#7CA9C9} .fly-form-app .layui-icon-login-weibo{color:#E6162D} .user-tab{margin:20px 0;} .user-about{position:relative; padding:0 0 0px 20px; border-left:1px solid #DFDFDF; text-align:center;} .user-about .user-avatar{width:100px; height:100px; border-radius:100%;} .user-about p{line-height:30px;} .user-about p span{padding:0 5px; color:#999;} /* 个人主页 */ .fly-home{position: relative; padding: 30px 0 30px; text-align: center;} .fly-home img{width:120px; height:120px; border-radius:100%;} .fly-home h2{font-size:var(--fs-h1); line-height:30px;} .fly-home h2 span{font-size:var(--fs-body); color:#999;} .fly-home h2 .layui-icon-male{color:#4EBBF9} .fly-home h2 .layui-icon-female{color:#F581B1} .fly-home-sign{padding: 0 10px; color: #999; margin-top: 10px;} .fly-home .renzheng{display: inline-block; width: 20px; height: 20px; line-height: 20px; top: 45px; left: -15px; background-color: #FFB800; color: #fff; border-radius: 50%; font-size:var(--fs-muted);} .fly-home-auth{ position: relative;border: 1px solid #e6e6e6; border-radius: 4px; text-align: left; padding: 20px 10px 10px 30px; width: 260px; margin:30px auto 10px auto; cursor: pointer; } .fly-home-auth:hover{ border: 1px solid #39b54a; } .fly-home-auth p{line-height: 25px;color: #666666} .fly-home-auth p span{color: #333333;font-weight: 600} .fly-home-auth .tag-text{ position: absolute; padding: 0 12px; height: 26px; left: -1px; top: -14px; background-color: #39b54a; color: #fff; font-size:var(--fs-muted); line-height: 26px; border-radius: 8px 0 8px 0; } .fly-home-auth-img{ background: #f5f5f5 url(/static/index/images/dim_auth.png) no-repeat -10px -10px; height: 160px; display: flex; justify-content: center; align-items: center; } .fly-home-info{margin-top: 5px} .fly-home-info i{padding-right: 5px; padding-left: 10px; color: #666;} .fly-home-info span{color: #999;} .fly-sns{margin-top: 10px;} .fly-home-jie .jie-row, .fly-home-da .home-jieda{min-height: 500px; padding: 5px 20px;} /*.home-jieda li{margin-bottom:20px; padding-bottom:10px; line-height:24px; border-bottom: 1px dotted #DFDFDF;}*/ .home-jieda li{ margin-bottom:20px; line-height:24px;} .home-dacontent{margin-top:10px; padding:10px 15px; background-color:#F2F2F5; border-radius:5px; word-wrap: break-word;;} .home-dacontent pre{ background-color:#F2F2F5;} .home-dacontent img{max-width:100%;} .home-jieda li a{padding:0 5px; color:#4F99CF;} .home-jieda li p{color:#999;} .home-jieda li p span{padding-right:5px;} /* 我的消息 */ #LAY-minemsg{min-height:420px;} .mine-msg li{position:relative; margin-bottom: 15px; padding: 10px 0 5px; line-height:24px; border-bottom:1px dotted #E9E9E9} .mine-msg li cite{padding: 0 5px; color: #4F99CF;} .mine-msg li i{color:#4F99CF; padding-right:5px;} .mine-msg li>p{position: relative; margin-top: 5px; line-height: 26px; text-align: right;} .mine-msg li>p span{position: absolute; left: 0; top: 0; color:#999;} .mine-msg li .fly-delete{position: relative; top: -3px;} .mine-msg li .layui-elem-quote p[download]{padding: 10px 0 5px;} /* 设置 */ /* 头像区。里面的标记已经换成 uploadMore 组件（原来是「上传按钮 + 168px 圆形大图」那套 绝对定位布局），所以旧的 .upload-img / img / .loading 三条规则一并去掉 —— 尤其 .avatar-add img{position:absolute;width:168px;height:168px;border-radius:100%} 会把组件里的缩略图也一起绝对定位并裁成圆形，堆在提示文字上。 */ .avatar-add{position:relative; padding:15px; background-color:#F2F2F5;} .avatar-add p{margin-bottom:10px; font-size:var(--fs-muted); text-align:center; color:#999;} .app-bind li{margin-bottom:10px; line-height:30px; color:#999;} .app-bind li .iconfont{position: relative; top: 3px; margin-right: 5px; font-size:28px; } .app-bind .app-havebind{color:#333;} .app-bind .app-havebind .layui-icon-login-qq{color:#7CA9C9} .app-bind .app-havebind .layui-icon-login-weibo{color:#E6162D} .system-avatar { display: block; width: auto; height: auto; background: #F2F2F5; border-radius: 3px; padding: 10px; text-align: center; } .system-avatar li { display: inline-block; vertical-align: top; width: 65px; height: 65px; box-sizing: border-box; padding: 5px; border: 1px solid #d8d8d8; margin-bottom: 5px; cursor: pointer; } .system-avatar li img { display: block; width: 100%; height: 100%; text-align: center; } /* 案例 */ .fly-case-header{position: relative; height: 260px; text-align: center; background: #393D49;} .fly-case-year{position: absolute; top: 30px; width: 100%; line-height: 50px; font-size: 50px; text-align: center; color: #fff; font-weight: 300;} .fly-case-banner{position: absolute; left: 50%; top: 100px; width: 670px; margin-left: -335px;} .fly-case-btn{position: absolute; bottom: 30px; left: 0; width: 100%; text-align: center;} .fly-case-btn a{color: #fff;} .fly-case-btn .layui-btn-primary{background: none; color: #fff;} .fly-case-btn .layui-btn-primary:hover{border-color: #5FB878;} .fly-case-tab{margin-top: 20px; text-align: center;} .fly-case-tab span, .fly-case-tab span a{border-color: #009688;} .fly-case-tab .tab-this{background-color: #009688; color: #fff;} .fly-case-list{margin-top: 15px; font-size: 0;} .fly-case-list li, .layer-ext-ul li{display: inline-block; vertical-align: middle; *display: inline; *zoom:1; font-size:var(--fs-body); background-color: #fff;} .fly-case-list{width: 110%;} .fly-case-list li{width: 239px; margin: 0 15px 15px 0; padding: 10px;} .fly-case-list li:hover{box-shadow: 1px 1px 5px rgba(0,0,0,.1);} .fly-case-img{position: relative; display: block;} .fly-case-img img{width: 239px; height: 150px;} .fly-case-img .layui-btn{display: none; position: absolute; bottom: 20px; left: 50%; margin-left: -29px;} .fly-case-img:hover .layui-btn{display: inline-block;} .fly-case-list li h2{padding: 10px 0 5px; line-height: 22px; font-size:var(--fs-title); white-space: nowrap; overflow: hidden; text-align: center;} .fly-case-desc{height: 60px; line-height: 20px; font-size:var(--fs-body); color: #666; overflow: hidden;} .fly-case-info{position: relative; margin: 10px 0 0; padding: 10px 65px 0 45px; border-top: 1px dotted #eee;} .fly-case-info p{height:24px; line-height: 24px;} .fly-case-user{position: absolute; left: 0; top: 15px; width: 35px; height: 35px;} .fly-case-user img{width: 35px; height: 35px; border-radius: 100%;} .fly-case-info .layui-btn{position: absolute; right: 0; top: 15px; padding: 0 15px;} .layer-ext-ul{margin: 10px; max-height: 500px;} .layer-ext-ul img{width: 50px; height: 50px; border-radius: 100%;} .layer-ext-ul li{margin: 8px;} .layer-ext-case .layui-layer-title{border: none; background-color: #009688; color: #fff;} /* 广告 */ .fly-ad{position: relative; background-color: #f2f2f2; overflow:hidden;} .fly-ad:before{content: '广告位'; position: absolute; z-index: 0; top: 50%; left: 50%; left: 50%; margin: -10px 0 0 -25px; color: #aaa; font-size:var(--fs-body); font-weight: 300;} .fly-ad div{position: relative; z-index: 1;} /* 友链 */ .fly-link dd{display: inline-block; vertical-align: top;} .fly-link a{line-height: 24px; padding-right: 15px;} /* 404或提示 */ .fly-none{min-height: 600px; text-align: center; padding-top:50px; color: #999;} .fly-none .layui-icon{line-height: 300px; font-size: 300px; color: #393D49;} .fly-none .layui-icon-404{display: inline-block; margin: 30px 0 20px;} .fly-none .layui-icon-face-smile{display: inline-block; margin: 30px 0 20px;} .fly-none p{margin-top: 50px; padding: 0 15px; font-size:var(--fs-body); color: #999; font-weight: 300;} .fly-list-one .fly-none{min-height: 70px;} .fly-empty{display: -webkit-flex; /* Safari */display: flex;align-items: center;justify-content: center;min-height: 300px;line-height: normal;flex-flow: column; /* color: #ccc; */font-weight: 200;width: 100%;} .fly-empty i {font-size: 100px;display: block;margin-bottom: 20px} @media screen and (max-width: 768px) { .fly-main{width: 100%;} /* 顶边距 */ /*.fly-marginTop{margin-top: 0;}*/ /* 头部 */ /*.fly-header .fly-nav-user li .fly-nav-avatar{padding-right: 15px;}*/ /*.fly-header .fly-nav-user{margin-right: 5px;}*/ /* 专栏 */ .fly-column{height: auto;} .fly-column ul{padding: 10px; font-size: 0;} .fly-column ul li{float: left; width: 33.33%; height: 36px; line-height: 36px; font-size:var(--fs-body); vertical-align: middle; text-align: center; box-sizing: border-box;} .fly-column-right{right: 10px;} .fly-column ul li.layui-this:after{display: none;} /* 页脚 */ .fly-footer{ border-top: none;padding-bottom: 70px} /* 分页 */ .laypage-main a, .laypage-main span{display: none;} .laypage-main .laypage-prev, .laypage-main .laypage-curr, .laypage-main .laypage-next{display: inline-block;} /* 列表 */ .fly-list li h2 a{max-width: 100%;} /* Detail 页 */ .fly-admin-box{display: block; margin: 0; margin-top: 10px;} .fly-detail-info .fly-list-nums{top: -2px;} .fly-edit span{padding: 0 6px;} /* 案例 */ .fly-case-list, .fly-case-list li{width: 100%; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important;} .fly-case-img{text-align: center;} .fly-case-img img{max-width: 100%;} .fly-case-banner{width: 300px; margin-left: -150px;} body .fly-user-main{width: auto;} .fly-user-main>.layui-nav{left: -300px; transition: all .3s; -webkit-transition: all .3s;} .fly-user-main>.fly-panel-user{width: auto; margin-left: 0; transition: all .3s; -webkit-transition: all .3s;} .site-tree-mobile{display: block!important; position: fixed; z-index: 100000; bottom: 80px; left: 10px; width: 36px; height: 36px; line-height: 36px; border-radius: 5px; text-align: center; background-color: rgba(0,0,0,0.75); color: #fff;opacity: .95} .site-mobile .site-tree-mobile{display: none !important;} .site-mobile .fly-user-main>.layui-nav{left: 0;} .site-mobile .site-mobile-shade{content: ''; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.9); z-index: 5;} } .fly-panel-border{ border: 1px solid #e6e6e6; box-shadow: none; } /* 这里原来**又定义了一遍 .fly-panel-title**（内容跟文件开头那份一模一样，是从老项目带过来的 重复块），而且它在后面，会把开头那份新样式里的「实线 #f2f4f8 / 字色 #2b3445 / 浅底」全部盖回 旧值 —— 表现就是面板标题栏半新半旧：字是加粗的，但分隔线还是灰虚线、字还是 #333。 删掉它，让 .fly-panel-title 只有开头那一处定义。 */ /*详情行距*/ .need-details{padding:8px 15px;line-height: 25px;background-color: #f5f5f5} .need-details p cite{font-style: normal;color: #888;} .need-details p button{line-height: 25px;height: 25px} /*列表筛选*/ /* 公用筛选栏，6 个列表页共用：群资源/广告主/精准渠道/媒体渠道/担保交易/地推资源。 各页 JS 统一用 bg-gradual-blue 做选中态、open 做展开，所以样式只需要在这里维护一份。 */ .filter {padding: 5px 16px 0;border: none;border-bottom: 1px solid #eef1f6;background-color: #fff;} /* 收起态的高度必须正好等于一行标签高：25px(按钮高) + 上下各 4px 外边距 = 33px。 写大了会露出第二行的下半截残影，压在下一行上，看起来就像样式错乱。 */ .filter .filter-box {position: relative;display: -webkit-flex; /* Safari */display: flex;justify-content: space-between; align-items: flex-start;height: 33px;min-height: 0;line-height: 1;overflow: hidden;margin-bottom: 0;padding: 0; border-bottom: 1px dashed #f2f4f8;} .filter .filter-box:last-child{border-bottom: none;} /* 顶部对齐：用 center 时超出一行的内容会被上下各切一刀 */ .filter .filter-content {flex:1;min-width:0;line-height:1;} /* 标签也做成 25px 的行内块，与标签按钮同高同基线，行距才稳定 */ .filter .filter-content span{text-align: left;display: inline-block;min-width: 52px;height: 25px;line-height: 25px; margin: 4px 5px 4px 0;color: #9aa2b1;font-size:var(--fs-muted);vertical-align: middle} /* 筛选项做成圆角标签，不再是挤在一起的纯文字链接 */ .filter .filter-content a{text-align: center;display: inline-block;height: 24px;line-height: 24px;margin: 4px 5px 4px 0;padding:0 11px; border-radius: 13px;background: #f5f7fa;color: #5a6273;font-size:var(--fs-muted); transition: background-color .18s,color .18s;} .filter .filter-content a:hover{background:#e8f3ff;color:var(--c-main);} /* 选中态沿用 bg-gradual-blue（各页 JS 切的就是这个类），重做成标签形状 */ .filter .filter-content a.bg-gradual-blue{color:#fff!important;background-color:var(--c-main); background-image:linear-gradient(45deg,var(--c-main),var(--c-main-end));box-shadow:0 2px 6px rgba(0,129,255,.28);} /* flex:0 0 auto —— deal.html 这一格里放的是「提交平台」按钮而不是文字，写死宽度会挤变形 */ .filter .filter-more {color: #9aa2b1;cursor: pointer;flex: 0 0 auto;min-width: 48px;height: 25px;line-height: 25px; margin: 4px 0;padding: 0 9px;border-radius: 13px;font-size:var(--fs-muted);text-align: center; -webkit-user-select: none;user-select: none;transition: background-color .18s,color .18s;} .filter .filter-more:hover{background:#f5f7fa;color:var(--c-main);} .filter .filter-box.open{height: auto;padding-bottom: 7px;} /* ---------- 筛选栏下面的搜索行（同样是 6 个列表页共用） ---------- 各页模板里写的是 .layui-form.layui-form-pane > .layui-form-item，靠 layui-form-label + layui-input-inline 排成一行。这里做三件事： 1) 去掉 pane 给 label 加的灰底/边框 —— 一排灰盒子跟上面的圆角标签打架； 2) 用 flex 排整行，label 和输入框垂直居中对齐（原来 label 是 float:left、 输入框是 inline-block，两者基线不同，第 4 组以后会整体往下掉几个像素）； 3) 输入框/按钮统一成 36px 胶囊，跟群资源页的 .gp-search 一套观感。 模板那边只负责给元素加/去掉宽度，具体尺寸都在这里维护。 */ .filter .layui-form{margin: 4px -16px 0;padding: 10px 14px 12px;border-top: 1px solid #f2f4f8;background: #f8fafd;} .filter .layui-form .layui-form-item{display: flex;flex-wrap: wrap;align-items: center;gap: 8px;margin-bottom: 0;} .filter .layui-form .layui-form-label{ flex: 0 0 auto;float: none;width: auto;height: 34px;line-height: 34px;margin: 0;padding: 0; border: none;border-radius: 0;background: none;box-sizing: border-box; color: #5a6273;font-size:var(--fs-muted);text-align: left;font-weight: 400; } /* 每个「标签 + 输入框」在模板里包成一个 .field：桌面上几组并排，窄屏整组换行。 不包的话 label 和输入框是两个平级的 flex 项，窄屏会被拆到两行去。 */ .filter .layui-form .field{display: flex;flex: 0 0 auto;align-items: center;min-width: 0;margin: 0;} .filter .layui-form .field>.layui-form-label{margin-right: 8px;} /* 输入框统一宽度：模板里原来 150px/190px 混用，一行下来长短不齐 */ .filter .layui-form .field>.layui-input-inline{flex: 0 0 164px;width: 164px;margin: 0;vertical-align: middle;} .filter .layui-form .layui-input{ width: 100%;height: 34px;line-height: 32px;padding: 0 13px; border: 1px solid #e6ecf5;border-radius: 17px;background: #fff; color: #2b3445;font-size:var(--fs-body); transition: border-color .18s,background-color .18s,box-shadow .18s; } /* layui 给 input 的 hover/focus 边框带了 !important（focus 还是青绿色），必须一起盖掉 */ .filter .layui-form .layui-input:hover{border-color: #cfe0f7!important;} .filter .layui-form .layui-input:focus{ border-color: #b9d9ff!important;background: #fff; box-shadow: 0 0 0 3px rgba(0,129,255,.08); } /* 按钮：默认是「次要」（浅底），.btn-main 是「主要」（蓝色渐变），跟群资源页一致。 搜索按钮和「发表帖子」主按钮**同尺寸**（只是配色不同）。 */ .filter .layui-form .layui-btn{ height: 34px;line-height: 34px;margin: 0;padding: 0 18px;border: none;border-radius: 17px; background-image: none;background-color: #f0f4fa;color: #4a5568;font-size:var(--fs-btn); transition: background-color .18s,color .18s,box-shadow .18s; } .filter .layui-form .layui-btn:hover{background-color: #e6eefa;color: var(--c-main);} .filter .layui-form .layui-btn .layui-icon{margin-right: 5px;font-size: 13px;} .filter .layui-form .layui-btn.btn-main{ background-color: var(--c-main);background-image: linear-gradient(45deg,var(--c-main),var(--c-main-end)); color: #fff;box-shadow: 0 2px 8px rgba(0,129,255,.3); } .filter .layui-form .layui-btn.btn-main:hover{ background-color: #0074e6;background-image: linear-gradient(45deg,#0074e6,#2874b0);color: #fff; } .mt{ margin-top: 10px; } @media screen and (max-width: 768px){ .shop-nav .input-search input { width: 60%!important; } /* 窄屏标签外边距收到 3px，一行变成 31px，收起高度要跟着改，否则又会露残影 */ .filter{padding:5px 12px 0;} .filter .filter-box{height:31px;} .filter .filter-content span{min-width:48px;margin:3px 4px 3px 0;} .filter .filter-content a{margin:3px 4px 3px 0;padding:0 10px;} .filter .filter-more{margin:3px 0;} /* 搜索行：窄屏一组占一整行，输入框把剩下的宽度吃掉，不横向溢出 */ .filter .layui-form{margin:4px -12px 0;padding:12px;gap:8px;} .filter .layui-form .field{flex:1 1 100%;} .filter .layui-form .field>.layui-input-inline{flex:1 1 auto;width:auto;} .filter .layui-form .layui-btn{padding:0 14px;} /*.mt{*/ /* margin-top: 0;*/ /*}*/ } /* ---------- 搜索页（search/search.html 与 search/search_mobile.html 共用） ---------- 2026-10-24 重做。改造前的问题： 1) 搜索条是「select + 写死 560px 的输入框 + 80px 按钮」三段拼起来，三块各自一条边框、 圆角只加在首尾，窄屏还会横向溢出； 2) 结果区外面套了一层 layui-card，变成「面板里再套一张卡片」，跟站内其它列表页不是一个观感； 3) 结果是一条条带下划线的长列表，标题/简介右半边全空，信息密度比首页卡片低一半。 现在：搜索条 = 一条 44px 的圆角框（内部无边框，聚焦时主色描边）；结果列表直接复用首页的 .home-list + .tui-list.home-card（PC 两列、手机一列），本段只补搜索页自己的三块： 搜索条 / 热搜胶囊 / 结果统计条 + 分页。 */ .search-panel{padding: 16px 15px 13px; border-radius: 12px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(16,30,54,.06);} .search-panel .layui-form{padding: 0;} /* 搜索条：外框一条边，内部三个控件都去边框、只在分界处留一条竖线 */ .search-form{display: flex; align-items: stretch; height: 44px; max-width: 720px; margin: 0 auto; border: 1px solid #e6ecf5; border-radius: 10px; background: #fff; transition: border-color .18s, box-shadow .18s;} .search-form:focus-within{border-color: var(--c-main); box-shadow: 0 0 0 3px rgba(0,129,255,.1);} .search-form .search-cate{flex: none; width: 112px; height: 100%; background: #fafbfd; border-right: 1px solid #eef1f6; border-radius: 10px 0 0 10px;} /* layui 会把 select 渲染成 .layui-form-select，宽度跟着父级走 */ .search-form .search-cate .layui-form-select{width: 100%; height: 100%;} .search-form .search-cate .layui-input{height: 44px; line-height: 44px; padding-left: 12px; border: none; background: none; border-radius: 10px 0 0 10px; font-size: var(--fs-body);} .search-form .search-cate .layui-form-select dl{top: 46px; border-color: #e6ecf5; border-radius: 8px; box-shadow: 0 6px 18px rgba(16,30,54,.1);} .search-form .search-keyword{flex: 1 1 auto; min-width: 0; width: auto; height: 44px; padding: 0 14px; border: none; border-radius: 0; font-size: var(--fs-body);} .search-form .search-keyword:focus{box-shadow: none;} .search-form .search-btn{flex: none; width: 96px; height: 100%; padding: 0; border: none; cursor: pointer; border-radius: 0 10px 10px 0; color: #fff; font-size: var(--fs-body); background-image: linear-gradient(45deg, var(--c-main), var(--c-main-end));} .search-form .search-btn .layui-icon{margin-right: 3px; font-size: 14px;} .search-form .search-btn:hover{opacity: .92;} /* 热搜：小胶囊标签（原来是一串纯文字链接，和「发表帖子/开通会员」混在一起分不清） */ .hot_search{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; padding: 12px 2px 2px; color: #98a1b3; font-size: var(--fs-muted);} .hot_search .hot-label{color: #98a1b3;} .hot_search .hot-key{display: inline-block; height: 24px; line-height: 24px; padding: 0 10px; border-radius: 12px; background: #f5f7fa; color: #5a6273; font-size: var(--fs-muted); transition: background-color .18s, color .18s;} .hot_search .hot-key:hover{background: #e8f3ff; color: var(--c-main);} .hot_search .hot-act{display: inline-block; height: 24px; line-height: 24px; padding: 0 6px; color: var(--c-main); font-size: var(--fs-muted);} .hot_search .hot-act:hover{color: var(--c-main-end);} /* 结果面板：统计条 + 卡片列表 + 分页，整体一张白色圆角面板 */ .search-result-panel{padding: 0; border-radius: 12px; box-shadow: 0 1px 3px rgba(16,30,54,.06);} .search-result-bar{display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 15px; border-bottom: 1px solid #f2f4f8;} .search-result-bar p{margin: 0; color: #5a6273; font-size: var(--fs-body);} .search-result-bar em{font-style: normal; color: var(--c-main); font-weight: 600;} .search-result-bar strong{color: #2b3445;} .search-result-bar .search-time{color: #98a1b3; font-size: var(--fs-muted); white-space: nowrap;} /* 结果列表直接复用首页卡片：只去掉 ul 默认的圆点/缩进，空状态占满整行 */ ul.search-list{list-style: none; margin: 0; padding: 12px 12px 4px;} ul.search-list > .fly-empty{grid-column: 1 / -1; min-height: 240px;} .search-page{padding: 6px 0 16px; text-align: center;} .search-page .layui-laypage a, .search-page .layui-laypage span{margin-right: 8px; border-color: #eef1f6; border-radius: 6px; color: #5a6273;} .search-page .layui-laypage a:hover{color: var(--c-main); border-color: #cfe0f7;} .search-page .layui-laypage .layui-laypage-curr .layui-laypage-em{ background-image: linear-gradient(45deg, var(--c-main), var(--c-main-end)); border-radius: 6px;} /* 手机端：搜索框在页头（.m-search-head），面板/卡片走窄屏尺寸 */ .m-head.m-search-head .center{position: relative;} .m-head.m-search-head .center input{height: 36px; padding-right: 50px; border-radius: 18px; border-color: transparent; background: #f5f7fa; font-size: var(--fs-body);} .m-head.m-search-head .center input:focus{border-color: var(--c-main); background: #fff;} .m-head.m-search-head .center .layui-btn{position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; line-height: 28px; padding: 0; border-radius: 50%; text-align: center;} @media screen and (max-width: 768px){ .search-panel{padding: 12px 12px 9px; border-radius: 10px; margin-bottom: 10px;} .search-form{height: 40px; max-width: none;} .search-form .search-cate{width: 96px;} .search-form .search-cate .layui-input{height: 40px; line-height: 40px;} .search-form .search-keyword{height: 40px; padding: 0 12px;} .search-form .search-btn{width: 62px;} .search-form .search-btn .layui-icon{margin-right: 0;} .hot_search{padding-top: 10px; justify-content: flex-start;} .search-result-panel{border-radius: 10px;} .search-result-bar{padding: 12px;} ul.search-list{padding: 10px 10px 2px;} } .ad_text{border: 1px #e5e5e5 solid;background-color: #fff;padding: 5px;font-size:var(--fs-body);display: -webkit-flex; /* Safari */display: flex;align-items: center; flex-direction:column;} /* 单行文字广告： 默认居中显示；**内容超宽**时由 base/js.html 给它加 .is-overflow —— 改成左对齐并允许横向滑动。 为什么溢出时必须左对齐：居中时超出的部分会同时往左右两边撑，左边那截被容器裁掉， 而 scrollLeft 又不能为负，那段字就永远滚不出来。 自动滚动、悬停/触摸暂停、手动滑动的逻辑都在 base/js.html（不是 layui 模块）。 */ .ad_text .item{width:100%;line-height:22px;white-space:nowrap;overflow-x:auto;overflow-y:hidden; text-align:center;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;} .ad_text .item::-webkit-scrollbar{display:none;} .ad_text .item.is-overflow{text-align:left;} .ad_text .item > a{display:inline-block;} /* 首页大图广告（getAd(1)，PC 六宫格 + 手机轮播共用）： 固定成 190:66 的统一尺寸。**用 contain 不用 cover** —— 广告图上通常有文字/品牌， 按比例裁掉一截等于把广告切了；比例不一致的图会在浅色底上留一点边，但每个格子 的长宽完全一致，一行六格不会再高矮不齐，手机轮播也不会随图片高度跳。 原来模板里写的是 width:100%;height:auto，每张图各按自己的比例撑高，所以不齐。 */ .home-ad-img{display:block;width:100%;aspect-ratio:190/66;background:#f5f7fa;} .ad_text:after { content: "广告";position: absolute;right: 2px; bottom: 2px;width: 12px;height: 30px;padding: 4px 3px; display: -webkit-flex; /* Safari */display: flex;text-align: center;align-items: flex-end;background: #d1dae1;line-height: 14px;font-size:var(--fs-muted);font-weight: 400;color: #4f7c87; opacity: .5;white-space:normal; } @media screen and (max-width: 768px){ .ad_text{font-size:var(--fs-body)} .ad_text .item{line-height: 18px;} .ad_text:after { content: "广告";position: absolute;right: 2px; bottom: 2px;width: 12px;height: 24px;padding: 4px 3px; display: -webkit-flex; /* Safari */display: flex;text-align: center;align-items: flex-end;background: #d1dae1;line-height: 14px;font-size:var(--fs-muted);font-weight: 400;color: #4f7c87; opacity: .5;white-space:normal; } } /* 旧的 .input-search（三段拼接、写死 560px 输入框）已随搜索页改版废弃， 搜索条样式见上方「搜索页」一节（.search-form）。 */ /*搜索*/ /*限制显示两行*/ .two-line{ display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden; } /*登录弹出表单*/ .loginFormModel{ padding:20px;box-sizing: border-box;} .loginFormModel .inpModel{ margin-bottom:15px;position: relative;} .loginFormModel .inpModel input, .loginFormModel .inpModel textarea, .loginFormModel .inpModel select{padding-left: 38px;width:100%; border:1px solid #CCC; height:40px; line-height:40px;box-sizing: border-box; font-size:var(--fs-body);font-family:"微软雅黑",Arial;border-radius:4px;} .loginFormModel .inpModel input.Validform_error{background-color: #ffe7e7;} .loginFormModel .inpModel .user-login-icon { position: absolute;left: 1px;top: 1px;width: 40px;line-height: 40px;text-align: center;color: #d2d2d2;font-size: 16px; } .loginFormModel .inpModel textarea{height:80px; line-height:20px; font-size:var(--fs-body); padding:5px 10px;} .loginFormModel .inpModel .d-btn{ height:50px; line-height:50px; width: 100%} .loginFormModel .inpModel:last-child{ margin-bottom:0;} .loginFormModel .two_weeks{ margin-bottom:15px;} .loginFormModel .foot{height: 30px;line-height: 30px; padding-top:10px;border-top: 1px solid #f3f3f3; text-align:center;} .loginFormModel .foot img{width: 16px;height: 16px} .loginFormModel .verifycode{ position:relative;} .loginFormModel .verifycode #verify-img{ position:absolute; right:10px; top:5px; cursor:pointer;width: 100px} .loginFormModel p.label{padding-bottom:5px;} /*找客币弹出余额*/ #downModel{font-size:var(--fs-body)} #downModel button{border-radius:5px;} #downModel .instructions strong{color: #999} #downModel .instructions{margin:10px auto; padding-bottom:30px; line-height:30px; font-size:var(--fs-body); color:#999;text-align: center;} #downModel .instructions .way{color: #999;} #downModel textarea::-webkit-input-placeholder { /* WebKit browsers */font-size:var(--fs-muted);} #downModel textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */font-size:var(--fs-muted);} #downModel textarea::-moz-placeholder { /* Mozilla Firefox 19+ */font-size:var(--fs-muted);} #downModel textarea::-ms-input-placeholder { /* Internet Explorer 10+ */font-size:var(--fs-muted);} .downModel-class .layui-layer-title{background:#009688; color:#fff; border: none;} .downModel-class .layui-layer-btn{border-top:1px solid #E9E7E7} .downModel-class .layui-layer-btn a{background:#333;} .downModel-class .layui-layer-btn .layui-layer-btn1{background:#999;} #downModel .layui-form-pane .layui-form-radio, .layui-form-pane .layui-form-switch{margin-left: 0} /*帖子弹层（#downModel 表单 / .db-apply 弹层皮肤）*/ #downModel .layui-form label{font-size:var(--fs-muted)} #downModel .layui-form input::placeholder { /* 大部分现代浏览器 */ font-size:var(--fs-body)} .db-apply a{font-size:var(--fs-body)} .db-apply .layui-layer-setwin a{width: 14px;height: 14px;bottom:3px} .db-apply .layui-layer-title{ background: #FFFFFF;color: #333333;height: 40px;line-height: 40px} #downModel .layui-form label.label{width: 80px;padding: 5px;line-height: 28px} #downModel .layui-form-pane .layui-input-block{margin-left: 80px} #downModel .layui-form-pane .layui-form-text .layui-input-block{margin: 0} #downModel .layui-form-item{margin-bottom: 5px} #downModel .layui-form-pane .layui-form-label{background:#f8f8f8;} /* ---------- 「购买置顶」弹层（#downModel.stk-box） ---------- 帖子详情页 / 我的帖子(PC) / 我的帖子(手机) 三处共用， HTML 由 mods/index.js 的 fly.stickPay() 生成，样式在这里。 2026-10-13 重做。改动前有三个毛病： 1) 弹窗写死 320×380，四条套餐 + 支付方式 + 按钮根本装不下 —— 按钮被截在弹窗外看不见； 2) 支付方式的单选把图标写成 title="..."，而 layui 的 title 是当**纯文本**渲染的，页面上直接印出一串 ` i{flex:0 0 auto;width:32px;height:32px;margin-right:10px; font-size:32px;line-height:1;border-radius:50%;} .forumselect li span.forumspan{flex:1 1 auto;min-width:0;width:auto;display:block; font-size:var(--fs-body);line-height:18px;color:#999;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} .forumselect li text{font-size:var(--fs-body);font-weight:500;color:#333;display:block;line-height:20px; overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} .forumselect li .icon{position:absolute;right:14px;top:50%;transform:translateY(-50%); font:normal normal normal 12px/1 FontAwesome;color:#c9cdd4;} /* hover 用站点主色。原来那套是橙色（#e85220 / #f9f1e4），跟全站的蓝不是一个系统 */ .forumselect li a.item:hover{background:#f2f8ff;} .forumselect li a.item:hover text{color:var(--c-main);} /* 同意条款：单独做一条浅底脚注，别跟上面的发布类型行混在一起 */ .forumselect li.forumselect-agree{border-top:1px solid #f0f2f5;background:#fafbfc;padding:10px 14px;} .forumselect li.forumselect-agree .layui-form-item{margin:0;} .forumselect li.forumselect-agree .layui-form-checkbox[lay-skin=primary]{margin:0;padding-left:20px;font-size:0;} .forumselect li.forumselect-agree .layui-form-checkbox[lay-skin=primary] > div{padding-right:2px;line-height:20px;} .forumselect li.forumselect-agree .layui-form-checkbox[lay-skin=primary] > i{top:2px;width:16px;height:16px;} .forumselect li.forumselect-agree a.fly-link{display:inline-block;font-size:var(--fs-body);line-height:20px; vertical-align:middle;color:var(--c-main);} /* 勾选态：layui 2.13 默认给的是青绿色 #16b777，跟站点主色对不上。 它那条 .layui-form-checked[lay-skin=primary]>i 的 border-color 带了 !important，覆盖时也得带。 */ .forumselect .layui-form-checkbox[lay-skin=primary]:hover > i{border-color:var(--c-main)!important;} .forumselect .layui-form-checked[lay-skin=primary] > i{border-color:var(--c-main)!important;background-color:var(--c-main)!important;color:#fff;} /*风险*/ .risk{background:#fff;padding: 10px} .risk h5{font-size:var(--fs-title);font-weight: bold;margin-right:10px;} .risk h5 p{font-size:var(--fs-body);margin-top: 10px;text-align: left;color:#555555;} .risk ul{background: #fff4f4;margin-top: 10px;padding: 10px 8px 0 8px} .risk li{position: relative;padding-bottom: 10px;display:block;color:#666666;} .risk li.no_find{text-align: center;margin: 20px} /*改版列表样式 —— 首页 / 地推资源 / 我的帖子(手机) 三处共用*/ .tui-list{padding: 12px 14px; border-bottom: 1px solid #f2f4f8; margin-bottom: 0; transition: background-color .18s ease;} /* 悬停原来是橙色光晕（box-shadow:#ffac7f），跟站内的蓝色不是一套，改成淡蓝底 */ .tui-list:hover{background: #f7faff; box-shadow: none;} /* 分类标签：原来是蓝框白底，边框显得零碎，改成实心浅底的小标签 */ .tui-list .badge{ border: none; border-radius: 4px; background: #eef5ff; color: var(--c-main); position: relative; display: inline-block; height: 20px; line-height: 20px; padding: 0 7px; font-size:var(--fs-muted); font-weight: 400; text-align: center; } .tui-list .badge.red{background: #ffeeea; color: #ff5722;} /* 状态标签（置顶/热门/最新/精华）：模板里用的是 layui 默认的红 #ff5722 / 绿 #16baaa / 橙渐变，跟站点的蓝色系不搭（尤其绿是明确要淘汰的老色），改成浅底 + 饱和字色， 和上面分类标签的浅蓝一套。layui 的这些工具类都带 !important，所以这里也得上。 */ .tui-list .layui-badge.layui-bg-red{background-color: #ffefef !important; color: red !important;} .tui-list .layui-badge.layui-bg-green{background-color: #e8f7ee !important; color: #2e9e5b !important;} .tui-list .layui-badge.bg-gradual-orange{background-color: #fff2e3 !important; background-image: none !important; color: #e08c0e !important;} .tui-list h3{padding: 0 0 8px; font-size:var(--fs-title); line-height: 22px; font-weight: 400;} .tui-list h3 .layui-badge{top: -2px;} .tui-list h3 a{color: #2b3445; font-weight: 500; transition: color .15s ease;} .tui-list h3 a:hover{color: var(--c-main);} .tui-list h3 a:visited{color: #777!important;} /*点击变色*/ .tui-list p{color: #5a6273;padding-bottom: 8px;font-size:var(--fs-body)} .tui-list li{margin-bottom: 20px; padding-bottom: 20px; clear: both;} .tui-list .list-info{position: relative; font-size:var(--fs-muted); color: #9aa2b1;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;display: flex;align-items: center} .tui-list .list-info>*{padding-right: 5px;} .tui-list .list-info a[link]{color: #7b8394;} .tui-list .list-info a[link]:hover{color: var(--c-main);} /* 右侧「合作 N」在模板里写的是 position:absolute;right:0，脱离文档流之后跟左边的 作者/时间不在同一条基线上（看着像掉了一行），改成参与 flex 布局靠右对齐。 注意 :last-child 就是这个 span（模板里它是 .list-info 的最后一个子元素）。 */ .tui-list .list-info>span:last-child{position: static!important; margin-left: auto;} .tui-list .desc{overflow:hidden; white-space:nowrap; text-overflow: ellipsis; /*width:calc(100% - 110px );*/ width:100%; } .tui-list .desc span.stick{ position: absolute;right: 15px; } /* ---------- 首页帖子卡片（.tui-list.home-card） ---------- 2026-10-19 改版成卡片：浅灰底 + 12px 圆角 + 卡片间距，四行结构 —— ① 分类标签 + 置顶/最新 + 右侧时间 ② 标题（加粗、17px） ③ 简介（单行省略） ④ 头像 + 昵称 + 会员图标 + 认证图标 ……………… 右侧 点击量 / 合作数 ⚠️ 修饰类只加在 index/_need_list.html 上。地推资源（push/push.html）和 我的帖子手机版（user/need_mobile.html）也用了 .tui-list，但走的是上面那套**基础样式**， 不受这里影响 —— 所以本节的规则一律带上 .home-card 限定。 */ /* 卡片外面这一层负责「留白」：没有它，卡片会顶到面板的左右边缘，圆角也没地方待 */ .home-list{padding: 10px 10px 0;} .tui-list.home-card{ padding: 14px 15px 12px; margin-bottom: 10px; /* 覆盖基础样式的 border-bottom:1px solid #f2f4f8 —— 卡片是四边完整的 */ border: 1px solid #e9eef6; border-radius: 12px; /* 常态白底，悬停才落到浅灰蓝（2026-10-19 按反馈对调） */ background: #fff; box-shadow: 0 1px 2px rgba(16,30,54,.03); transition: background-color .18s, border-color .18s, box-shadow .18s, transform .18s; } /* 悬停：浅灰蓝底 + 淡蓝描边 + 一点点投影 + 轻微上浮 */ .tui-list.home-card:hover{ background: #f4f7fb; border-color: #d9e6f8; box-shadow: 0 4px 14px rgba(16,30,54,.07); transform: translateY(-1px); } /* 第 1 行：分类标签和「置顶/最新」徽标统一成同一套小胶囊（高度/圆角/字号一致）， 原来分类是 4px 圆角、状态是 layui 默认 2px 直角，并排看像两种东西 */ .tui-list.home-card .hc-head{display: flex; align-items: center; gap: 6px; margin-bottom: 8px;} .tui-list.home-card .badge{ height: 20px; line-height: 20px; padding: 0 8px; border-radius: 6px; background: #eaf2ff; color: var(--c-main-deep); font-size:var(--fs-muted); font-weight: 500; } .tui-list.home-card .layui-badge{ height: 20px; line-height: 20px; padding: 0 7px; border-radius: 6px; font-size:var(--fs-muted); font-weight: 400; top: 0; } .tui-list.home-card .hc-date{margin-left: auto; color: #98a1b3; font-size:var(--fs-muted); white-space: nowrap;} /* 第 2 行：标题。置顶帖的标题用站点的红（原来是内联纯红 #f00，太刺眼）。 最多两行 + 省略号：标题一长卡片就跟着变高，同一行两张卡片会被撑得很长 */ .tui-list.home-card h3{padding: 0 0 6px; font-size:var(--fs-title); line-height: 27px;} .tui-list.home-card h3 a{ font-weight: 510; color: #1f2329; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- 置顶帖统一色（唯一标准） ---------- 帖子列表里的「置顶」只有三处表现：标题颜色、置顶图标、置顶徽标。 首页 / 精准渠道 / 媒体渠道 / 地推 / 站长资源 / 广告主 / 群资源 / 骗子曝光 / 搜索 / 我的帖子 / 个人主页 / 文章 全部走这一份，颜色只认 :root 的 --c-stick。 标题挂 .is-stick（新）或 .is-top（我的帖子），图标是 .icon-zhiding， 徽标是 .stick-badge。 ⚠️ 模板里不要再写死 color:red / #ff5722 / #009688 这类置顶色。 */ a.is-stick, a.is-top{color:var(--c-stick)!important;} a.is-stick:hover, a.is-top:hover{color:var(--c-stick-hover)!important;} /* 访问过的链接：.tui-list 里有一条 a:visited{color:#777!important}， 优先级比单类高，不补这几条的话置顶帖点击一次就变灰，颜色又不统一了 */ a.is-stick:visited, .tui-list h3 a.is-stick, .tui-list h3 a.is-stick:visited{color:var(--c-stick)!important;} .icon-zhiding{color:var(--c-stick)!important;} .stick-badge{background-color:var(--c-stick)!important;color:#fff!important;} .red{color: #e5484d!important;} /* 第 3 行：简介（继承上面的单行省略） */ .tui-list.home-card p.desc{padding-bottom: 0; color: #6b7280; font-size:var(--fs-body); line-height: 21px;} /* 第 4 行：作者区。上面一条淡分隔线把「正文」和「作者/数据」分开 */ .tui-list.home-card .list-info{margin-top: 11px; padding-top: 10px; border-top: 1px solid #e8ecf2; gap: 5px;} /* 基础样式给每个子元素加了 padding-right:5px，这里改用 flex 的 gap，间距才不会一边大一边小 */ .tui-list.home-card .list-info>*{padding-right: 0;} .tui-list.home-card .hc-avatar{width: 23px; height: 23px; border-radius: 50%; object-fit: cover; background: #e3e9f2; margin-right: 1px; flex: none;} /* 昵称可省略：加了 QQ/微信/手机 三个图标后行内更挤，让昵称先截断， 别把右边的点击量/合作数挤出可视区 */ .tui-list.home-card .list-info a[link]{font-size:var(--fs-muted); font-weight: 500; color: #3d4657; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} /* 联系方式图标（QQ / 微信 / 手机）—— 首页、广告主、精准渠道、媒体渠道、站长资源、地推 各列表卡片共用（见 index/_need_list.html 和各自 *_mobile.html）。 列表接口只告诉模板「有没有」（1/0），真号码点进详情页看，所以这里不存在号码文本。 */ .hc-contacts{display: inline-flex; align-items: center; gap: 4px; flex: none;} .hc-contact{width: 16px; height: 16px; object-fit: contain; display: block; opacity: .9; transition: opacity .15s;} .hc-contacts a:hover .hc-contact{opacity: 1;} /* 会员图标 */ .tui-list.home-card .vip_icon{height: 16px; width: auto; flex: none;} /* 认证图标：个人 icon-gerenrenzheng / 企业 icon-qi，跟详情页、个人主页同一套绿色 */ .tui-list.home-card .hc-auth{color: #2e9e5b; font-size: 16px; line-height: 1; flex: none;} /* 右侧数据：两个计数之间拉开一点，图标比数字略大、跟文字基线对齐 */ .tui-list.home-card .hc-stats{margin-left: auto; display: flex; align-items: center; gap: 14px; color: #98a1b3; font-size:var(--fs-muted); flex: none;} .tui-list.home-card .hc-stats i{margin-right: 4px; font-size: 13px; position: relative; top: 1px;} @media screen and (max-width: 768px){ .home-list{padding: 8px 8px 0;} .tui-list.home-card{padding: 12px 13px 10px; border-radius: 10px; margin-bottom: 8px;} .tui-list.home-card .hc-head{margin-bottom: 7px;} .tui-list.home-card h3{font-size:var(--fs-title); line-height: 24px; padding-bottom: 5px;} .tui-list.home-card .list-info{margin-top: 9px; padding-top: 9px;} } /* ---------- 宽屏一行两列（PC 端） ---------- PC 上单列卡片只有 800 多像素宽，标题/简介右半边全是空的。改成两列之后 一屏能看 6 条左右，信息密度更合适。手机端走上面的 max-width:768 分支， 仍然是一列（CSS 断点是按**视口宽度**算的，和模板里按 UA 分的 PC/手机分支无关）。 */ @media screen and (min-width: 992px){ .home-list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; /* 列间距 + 行间距，替代卡片的 margin-bottom */ align-items: stretch; /* 同一行的两张卡片等高 */ } .tui-list.home-card{ display: flex; flex-direction: column; margin-bottom: 0; /* 间距交给 grid 的 gap，否则会叠成 20px */ } /* 简介撑开剩余高度，把「作者行」压到卡片底部 —— 同一行两张卡片高度不一时， 底部的作者/数据行也能对齐 */ .tui-list.home-card p.desc{flex: 1;} /* 信息流广告位是整行的，跨两列 */ .home-list > .information-list{grid-column: 1 / -1; margin-bottom: 0;} } /*列表信息流广告样式*/ /* ---------- 信息流广告位 ---------- 帖子列表（首页 / 产品 / 渠道）、详情页回复区、我的帖子(手机版) 三处共用这一块。 改造前的几个毛病：整块长得跟普通帖子一样，用户分不出是广告；「广告」标识是一张 20x10 的 icon_gg.png 贴图，小到几乎看不见；标题继承了 h3 的浏览器默认样式 （16.38px 加粗），比帖子标题还大还黑；两条广告紧贴在一起；右下角那个 #888 的 「我也要出现在这里」灰标签是绝对定位、压着正文。现在做成一条有边界、有明确广告 标识、有购买入口的推广位。 结构（模板里不能动）：.information-list > .layui-col-md6.information-li * 2 + a.ad_buy */ .information-list{ position: relative; margin: 12px 0; padding: 16px 15px 12px; background: #f7faff; border: 1px solid #e8f1ff; border-radius: 10px; } /* 「广告」标识：文字胶囊，压在卡片左上角的边框上（原来是那张小贴图） */ .information-list:before{ content: "广告"; position: absolute; top: -9px; left: 15px; width: auto; height: 18px; line-height: 18px; padding: 0 8px; clear: none; border-radius: 9px; background: #e8f1ff; border: 1px solid #d6e6ff; color: #5b83bf; font-size:var(--fs-muted); letter-spacing: 1px; } .information-li{ position: relative; height: auto; min-height: 52px; margin-bottom: 0; padding: 4px 0; } /* 宽屏下两条广告并排（各 50%），给左边那条留出间距，别贴在一起 */ @media screen and (min-width: 992px) { .information-li:first-child{padding-right: 16px;} } .information-avatar{position: absolute; left: 0; top: 4px;} .information-avatar img { display: block; width: 44px; height: 44px; margin: 0; border-radius: 8px; border: 1px solid #eef1f6; background: #fff; } /* 标题：字号/字重/行数在这儿定；颜色和加粗是每条广告自己在后台配的（模板里写在 内联 style 上），这里不要用 !important 去盖，不然会把「加粗推广」这个功能干掉。 */ .information-li h3{ position: static; left: auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0 0 0 54px; max-height: 44px; font-size:var(--fs-body); font-weight: 400; line-height: 22px; } .information-li h3 a:hover{color: var(--c-main);} /* 「我也要出现在这里」：原来是个绝对定位的灰标签压着正文，改成广告下面右对齐的一行链接 */ .information-list a.ad_buy{ position: static; display: block; clear: both; margin: 10px 0 0; padding: 0; background: none; border-radius: 0; text-align: right; font-size:var(--fs-muted); line-height: 1; z-index: auto; color: var(--c-main)!important; } .information-list a.ad_buy:after{content: " ›";} .information-list a.ad_buy:hover{color: var(--c-main-end)!important; text-decoration: underline;} /*手机分类导航*/ .cate_title{background: #ffffff;} .cate_title .item {display:flex!important;display: -webkit-flex!important; /* Safari */width:-webkit-calc(50% - 2px); width:-moz-calc(50% - 2px); width:calc(50% - 2px); border: 1px #f5f5f5 solid;cursor: pointer} .cate_title .item .iconfont,.cate_title .item .layui-icon{font-size: 40px;padding: 10px} .cate_title .item .cate_title{font-weight: bold;font-size:var(--fs-body);padding-top: 10px} .cate_title .item .cate_desc{font-size:var(--fs-muted);color: #999;padding-top: 4px} .cate_title .item.action .cate_title,.cate_title .item.action .cate_desc{color: red} .pay-alert .layui-layer-content{font-size:var(--fs-body)!important;} .pay-alert .layui-layer-title{background-image: linear-gradient(45deg, var(--c-main), var(--c-main-end));color: #ffffff!important;} .layui-layout-admin .layui-body, .layui-layout-admin .layui-footer{left: 0;} .layui-layout-admin .layui-logo{width: 135px} .layui-nav .layui-nav-item a .header-i{margin-right: 5px;font-size: 18px} .layui-layout-admin .layui-header{background-color:#2f2f2f } .layui-nav-tree{background-color: #333!important;} .layui-nav .layui-nav-child dd.layui-this a,.layui-nav-child dd.layui-this { background-color: #fff!important; color:#1a1a1a /*background-image: linear-gradient(45deg, #f43f3b, #ec008c);color: #ffffff!important;*/ } /*头部*/ .head_top{ position: fixed; width: 100%; top: 0; background: #F5F7F6; height: 28px; line-height: 28px; z-index: 1000; } .layui-layout-admin .layui-header{top: 28px;z-index: 999} .layui-layout-admin .layui-body{top: 88px} .layui-nav.fly-nav-center .layui-nav-item a{padding: 0 16px} .head_top .layui-nav .layui-nav-item{line-height:28px} .head_top .layui-nav{ background: rgba(0,0,0,0); color: #111111; } .head_top .layui-nav .layui-nav-item a{color: #111111} .head_top .layui-nav-child{top: 28px} .layui-nav-img{width: 20px;height: 20px} /* 头部移动端 */ @media screen and (max-width: 768px) { .layui-layout-admin .layui-layout-left, .layui-layout-admin .layui-body, .layui-layout-admin .layui-footer{left: 0;} .layui-layout-admin .layui-side{left: -300px;} .layui-layout-admin .layui-header{position:fixed;height: 46px!important;background-color: #2f2f2f;top: 0;z-index: 999} .layui-nav .layui-nav-item, .layui-layout-admin .layui-logo{line-height: 46px!important;} .layui-layout-admin .layui-body{top:46px} .layui-layout-admin .layui-footer{padding: 0;height:50px;line-height: 50px} .head_top{display: none} /*个人中心左侧*/ .layui-nav-tree {background-color: #FFF!important;color:#222!important;} .layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this>a, .layui-nav-tree .layui-this>a:hover { background-color: var(--c-main-end)!important; } .layui-nav-tree .layui-nav-item a, .layui-nav-tree .layui-nav-itemed a, .layui-nav-tree .layui-nav-title a:hover{color: #222!important;} .layui-nav-tree .layui-nav-item.layui-this a,.layui-nav-tree .layui-nav-child dd a.layui-this{ color: #FFF!important; } .site-mobile .site-mobile-shade{ background-color: rgb(0 0 0 / 20%)!important;} .layui-nav-itemed>.layui-nav-child {background-color: #f0fffe!important;} .layui-nav-tree.layui-nav .layui-nav-child dd.layui-this a,.layui-nav-tree .layui-nav-child dd.layui-this { background-color: var(--c-main-end)!important; color:#FFF /*background-image: linear-gradient(45deg, #f43f3b, #ec008c);color: #ffffff!important;*/ } /*信息流广告*/ .information-li{ border-bottom: 1px dashed #e2e2e2; } /*手机端表格样式变化一下*/ .lang-form .layui-form-label { float: none; width: 100%; border-radius: 2px; box-sizing: border-box; text-align: left; padding: 8px 0; font-weight: bold; font-size:var(--fs-body); } .lang-form .layui-input-block,.lang-form .layui-input-inline { margin: 0; left: 0; top: -1px } /*边距*/ .fly-panel[pad20]{padding: 10px} } /*图片上传*/ .layui-upload-drag{padding: 20px} .layui-upload-drag .uploadDemoView{position: absolute;top: 0;left: 0;right: 0} .layui-upload-drag .uploadDemoView img{max-width:100%} .layui-upload-drag .layui-icon{color: #999} /*表格样式*/ .layui-table-cell{padding: 0 5px;height: auto;} .layui-laypage .layui-laypage-curr .layui-laypage-em{background-image:linear-gradient(45deg, #ff9700, #ed1c24)} .layui-table-tool{z-index: 2} .layui-table-box .layui-table-body table tbody tr td:first-child a:visited{color: #777} /*第一个列表点击变色*/ .layui-tab{margin:0} /* ---------- 列表页的表格 / 分页 ---------- .list-page 加在列表页的 .fly-panel 上（配合上面的 .filter 用）。群资源页是卡片列表、 自带 .gp 样式，不参与这套；其余 5 页（广告主/精准渠道/媒体渠道/担保交易/地推资源） 都是 layui table，观感统一在这里维护 —— 各页模板只管列定义，不要各写一套。 */ .list-page{padding:0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(16,30,54,.06);} .list-page .layui-table-view{border:none;margin:0;} .list-page .layui-table-view .layui-table-header, .list-page .layui-table-view .layui-table-header th{background-color:#f7f9fc;} .list-page .layui-table-view .layui-table-header th{border-color:#eef1f6;color:#5a6273;font-weight:600;} .list-page .layui-table td,.list-page .layui-table th{border-color:#f2f4f8;} .list-page .layui-table td{color:#4a5568;font-size:var(--fs-body);} .list-page .layui-table-cell{height:auto;padding:0 10px;} /* 标题/发表人/最后更新三列的内边距是挂在 .layui-table-cell 上的，各页 done 回调会把这个 类删掉（标题还要换成 .two-line），删掉之后文字就贴到表格边线上了 —— 按 tbody 的单元格 统一补回来，顺便让表头和内容左右对齐。 ⚠️ 必须排除 .information-list（信息流广告位）。它也是 **td 的亲儿子**，会被这条「给单元格 内容补内边距」的规则一起命中，而它比卡片自己的 .information-list 更具体（3 个类 + 元素 vs 1 个类），于是把卡片的 padding:16px 15px 12px 整个盖成 0 10px —— 卡片被压成一条紧贴 上下边框的窄条（实测 66px，正常约 102px），就是「信息流样式被挤压」的样子。 */ .list-page .layui-table-body td>*:not(.information-list){padding:0 10px;} /* 悬停整行高亮：layui 只给 td 加底色，第一个 td 会被「已访问变灰」的规则盖掉，所以用 !important */ .list-page .layui-table-hover td{background-color:#f7faff!important;} /* 标题列本来是左对齐的，但列配置里的 text-align:left 只作用在 th 上， td 里的 .layui-table-cell 带 align="center" 属性、done 回调又把它换成 .two-line， 结果标题全变成居中、长短不一的标题起始位置都不一样 —— 这里直接把这一列的内部压成左对齐。 */ .list-page .layui-table td[data-field="title"]>*, .list-page .layui-table-header th[data-field="title"] .layui-table-cell{text-align:left;} /* 空数据文案 */ .list-page .layui-table-none{color:#9aa2b1;} /* 分页：居中 + 圆角，选中页码跟站点的蓝色一致（原来是橙红渐变，跟页面撞色） */ .list-page .layui-table-page{padding:14px 0;border-top:1px solid #eef1f6;text-align:center;} /* 间距 10px：跟上面 .pagination（think-orm 那套）对齐，两种分页看起来才是一套 */ .list-page .layui-table-page .layui-laypage a, .list-page .layui-table-page .layui-laypage span{margin-right:10px;border-color:#eef1f6;border-radius:6px;color:#5a6273;} .list-page .layui-table-page .layui-laypage a:hover{color:var(--c-main);border-color:#cfe0f7;} .list-page .layui-table-page .layui-laypage .layui-laypage-curr .layui-laypage-em{ border-radius:6px;background-color:var(--c-main);background-image:linear-gradient(45deg,var(--c-main),var(--c-main-end)); } .list-page .layui-table-page .layui-laypage input{border-radius:6px;border-color:#eef1f6;} .list-page .layui-table-page .layui-laypage button{border-radius:6px;border-color:#eef1f6;color:#5a6273;} /* ---------- think-orm 的 .pagination（Bootstrap 风格 markup）---------- 首页、群资源、地推、骗子曝光、交流区、消息、文章、APP需求 这些页的分页是 `{$list|raw}`，也就是 think-orm Paginator 默认（Bootstrap 驱动）输出的：