/* ========================================================= 撷墨教育 · 个人中心样式 v5 设计基线：One_Simple 模板设计体系 - 主色 #1985FF / 链接强调 #2D8CF0 - 页面底色 #F7F9FA，卡片 #FFF，描边 #F0F2F5 / 分隔 #F5F6F7 - 文字：#18191A / #797C80 / #AAAEB3 - 栅格 1200 = 868(主栏) + 312(侧栏) ========================================================= */ /* ---------------- 1. 页面栅格 ---------------- */ #ct.pc-page { padding-top: 16px; padding-bottom: 10px; min-height: 420px; } #ct.pc-page .mn { float: left; width: 868px; margin: 0; display: block; } #ct.pc-page .sd { float: right; width: 320px; margin: 0; display: block; position: static; min-height: 0; } #ct.pc-page .area { padding: 0; min-height: 0; } #ct.pc-page .diy1, #ct.pc-page #diycontenttop, #ct.pc-page #diycontentbottom { min-height: 0; } /* 面包屑 */ .pc-head-wrap { padding-top: 14px; } #pt.pc-crumb { border: 0; background: transparent; height: auto; line-height: 1.6; padding: 0 0 12px; font-size: 13px; color: #8A9199; } #pt.pc-crumb .z { line-height: 1.6; } #pt.pc-crumb a { color: #8A9199; } #pt.pc-crumb a:hover { color: #1985FF; } #pt.pc-crumb em { font-style: normal; margin: 0 4px; color: #C4CAD2; } .pc-diy-top { min-height: 0; } /* 顶部区域：用户卡 + 选项卡 */ .pc-head .user-top { border: 1px solid #F0F2F5; border-radius: 10px; padding: 26px 32px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); } .pc-head .user-top .u-info .item-des { width: auto; max-width: 460px; } .pc-head .user-top .u-info .user-name { font-size: 24px; font-weight: 600; } .pc-head .user-top .u-info .item-name { color: #8A9199; } .pc-head .user-top .u-info .item-des { color: #5B6470; } .pc-head .user-top .e-avatar.large-x { width: 104px; height: 104px; border-width: 3px; } .pc-head .user-top .e-button { width: auto; min-width: 96px; height: 36px; line-height: 34px; padding: 0 20px; border-radius: 18px; font-size: 13px; font-weight: 500; } .pc-head .user-top .u-button-group { margin-top: 56px; } .pc-head .user-nav { margin-bottom: 14px; } .pc-head .user-nav .e-tab { border: 1px solid #F0F2F5; border-radius: 10px; background: #fff; padding: 0 24px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); } .pc-head .user-nav .e-tab li { padding: 15px 0; margin-right: 34px; font-size: 15px; color: #797C80; } .pc-head .user-nav .e-tab li a { color: inherit; } .pc-head .user-nav .e-tab li:hover { color: #1985FF; } .pc-head .user-nav .e-tab li.a { color: #18191A; font-weight: 600; font-size: 15px; border-bottom: 2px solid #1985FF; } .pc-head .user-nav .e-tab li.a a { color: #18191A; } .pc-page-title { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: #18191A; } /* ---------------- 2. 卡片 ---------------- */ .pc-card { padding: 0; margin: 0 0 14px; background: #fff; border: 1px solid #F0F2F5; border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); overflow: hidden; } .pc-card .e-card-header { display: flex; align-items: center; justify-content: space-between; padding: 17px 24px; border-bottom: 1px solid #F5F6F7; overflow: visible; } .pc-card .e-card-header:before { display: none; } .pc-card .e-title { float: none; height: auto; display: flex; align-items: center; font-size: 16px; font-weight: 600; color: #18191A; line-height: 1.4; } .pc-card .e-title .title-text { vertical-align: baseline; } .pc-card .right-box { float: none; height: auto; line-height: 1; color: #AAAEB3; font-size: 12px; } .pc-card .e-card-body { margin: 0; padding: 6px 24px 20px; } .pc-bar { display: inline-block; width: 3px; height: 15px; border-radius: 2px; background: #1985FF; margin-right: 9px; flex: 0 0 3px; } .pc-link { color: #2D8CF0; font-size: 12px; } .pc-link:hover { color: #1985FF; text-decoration: underline; } /* ---------------- 3. 身份行 ---------------- */ .pc-ident { padding: 14px 0 14px; border-bottom: 1px solid #F5F6F7; margin-bottom: 4px; } .pc-ident-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .pc-name { font-size: 19px; font-weight: 600; color: #18191A; line-height: 1.4; } .pc-online { display: inline-block; font-size: 11px; line-height: 18px; color: #16A34A; background: #ECFDF3; border: 1px solid #D3F5E0; border-radius: 10px; padding: 0 8px; } .pc-groupicon img { height: 18px; vertical-align: middle; } .pc-ident-meta { margin-top: 7px; font-size: 13px; color: #797C80; } .pc-ident-meta a { color: #2D8CF0; } .pc-dot { margin: 0 7px; color: #D0D5DD; } /* ---------------- 4. 资料网格 ---------------- */ .pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; margin: 0; padding: 0; list-style: none; } .pc-grid > li { display: flex; align-items: baseline; gap: 14px; min-width: 0; padding: 11px 0; border-bottom: 1px dashed #EFF1F4; font-size: 13px; line-height: 1.7; list-style: none; } .pc-grid > li:last-child, .pc-grid > li:nth-last-child(2) { border-bottom: 0; } .pc-k { flex: 0 0 88px; color: #8A9199; font-style: normal; } .pc-v { flex: 1 1 auto; min-width: 0; color: #18191A; word-break: break-word; } .pc-v a { color: #2D8CF0; } .pc-v a:hover { text-decoration: underline; } .pc-v-strong { color: #1985FF; font-weight: 600; font-size: 14px; } .pc-sign { display: block; line-height: 1.8; } .pc-sign table, .pc-sign td { font-size: 13px; color: #3D4652; } .pc-grid-tight { margin-top: 4px; } .pc-notes { list-style: none; margin: 16px 0 0; padding: 4px 16px; background: #F7F9FA; border-radius: 8px; } .pc-notes > li { display: flex; align-items: baseline; gap: 14px; min-width: 0; padding: 9px 0; border-bottom: 1px dashed #E7EBF0; font-size: 13px; line-height: 1.7; } .pc-notes > li:last-child { border-bottom: 0; } .pc-notes .pc-k { flex-basis: 78px; } .pc-tag { display: inline-block; font-style: normal; font-size: 12px; line-height: 20px; color: #8A9199; background: #F2F4F7; border-radius: 10px; padding: 0 9px; } .pc-tag.ok { color: #16A34A; background: #ECFDF3; } /* ---------------- 5. 统计瓦片 ---------------- */ .pc-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); gap: 10px; margin: 8px 0 20px; padding: 0; list-style: none; } .pc-stat > li { list-style: none; margin: 0; } .pc-stat > li > a { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 6px; background: #F7F9FA; border: 1px solid transparent; border-radius: 8px; text-decoration: none; transition: all .18s; } .pc-stat > li > a:hover { background: #F2F7FF; border-color: #D6E7FF; text-decoration: none; } .pc-stat b { display: block; font-size: 20px; font-weight: 600; color: #1985FF; line-height: 1.2; } .pc-stat span { display: block; margin-top: 5px; font-size: 12px; color: #8A9199; } .pc-adminline { display: flex; align-items: center; gap: 12px; margin: 14px 0 2px; padding: 10px 14px; background: #F7F9FA; border-radius: 8px; font-size: 13px; } .pc-adminline .pc-k { flex: 0 0 auto; } /* ---------------- 6. 勋章 / 认证 / 标签 ---------------- */ .pc-medals { padding: 6px 0 2px; line-height: 0; } .pc-medals img { width: 34px; height: 34px; margin: 0 8px 8px 0; vertical-align: middle; border-radius: 6px; } .pc-medals.small img { width: 26px; height: 26px; margin: 0 6px 6px 0; } .pc-verify { padding: 10px 0 2px; } .pc-verify img { height: 22px; margin-right: 10px; vertical-align: middle; } .pc-chiplist { padding: 8px 0 0; } .pc-chip { display: inline-block; margin: 0 8px 8px 0; padding: 5px 13px; background: #F7F9FA; border: 1px solid #EFF1F4; border-radius: 14px; font-size: 12px; color: #3D4652; transition: all .18s; } .pc-chip:hover { background: #F2F7FF; border-color: #D6E7FF; color: #1985FF; text-decoration: none; } .pc-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; } .pc-table th { background: #F7F9FA; color: #5B6470; font-weight: 500; padding: 10px 12px; text-align: left; border-bottom: 1px solid #EFF1F4; } .pc-table td { padding: 10px 12px; border-bottom: 1px solid #F5F6F7; color: #3D4652; } /* ---------------- 7. 侧栏 ---------------- */ .pc-side-stat { display: flex; margin: 6px 0 0; padding: 0; list-style: none; } .pc-side-stat > li { flex: 1 1 0; position: relative; text-align: center; padding: 4px 0; list-style: none; } .pc-side-stat > li + li:before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: #EFF1F4; } .pc-side-stat b { display: block; font-size: 20px; font-weight: 600; color: #1985FF; line-height: 1.3; } .pc-side-stat span { display: block; margin-top: 3px; font-size: 12px; color: #8A9199; } .pc-side-stat a { text-decoration: none; } .pc-side-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px dashed #EFF1F4; font-size: 13px; line-height: 1.7; } .pc-side-row:last-of-type { border-bottom: 0; } .pc-side-row .pc-k { flex: 0 0 auto; color: #8A9199; } .pc-side-row .pc-v { flex: 1 1 auto; text-align: right; color: #18191A; } .pc-side-row-block { display: block; } .pc-side-row-block .pc-k { display: block; margin-bottom: 8px; } .pc-sub { font-style: normal; display: block; margin-top: 4px; font-size: 12px; color: #AAAEB3; } .pc-achieve { margin-top: 14px; padding: 12px 14px; background: #F7F9FA; border-radius: 8px; font-size: 13px; color: #5B6470; line-height: 1.95; } .pc-achieve p { margin: 0; } .pc-achieve b { color: #1985FF; font-weight: 600; margin: 0 2px; } .pc-quick { list-style: none; margin: 2px 0 0; padding: 0; } .pc-quick > li { list-style: none; margin: 0; } .pc-quick > li + li { margin-top: 2px; } .pc-quick a { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; font-size: 13px; color: #3D4652; text-decoration: none; transition: all .16s; } .pc-quick a:after { content: "\203A"; font-size: 15px; line-height: 1; color: #C4CAD2; } .pc-quick a:hover { background: #F2F7FF; color: #1985FF; text-decoration: none; } .pc-quick a:hover:after { color: #1985FF; } /* ---------------- 8. 兼容旧样式残留 ---------------- */ #ct.pc-page .bm { background: transparent; } #ct.pc-page .bm_h { border: 0; background: transparent; padding: 0; } /* 禁止下拉菜单把页面顶偏 */ html { overflow-y: scroll; scrollbar-gutter: stable; } html, body { overflow-x: hidden; } /* ---------------- 9. 响应式 ---------------- */ @media (max-width: 1240px) { #ct.pc-page { width: auto !important; box-sizing: border-box; padding: 16px 14px 10px; } #ct.pc-page .mn, #ct.pc-page .sd { float: none; width: auto !important; box-sizing: border-box; } #ct.pc-page .sd { margin-top: 4px; } .wp.pc-head-wrap, .wp.pc-diy-top { width: auto !important; box-sizing: border-box; } .pc-head-wrap { padding: 14px 14px 0; } .pc-diy-top { padding: 0 14px; } .pc-head, .pc-crumb, .pc-page { max-width: 100%; } } @media (max-width: 820px) { .pc-grid { grid-template-columns: 1fr; gap: 0; } .pc-grid > li:nth-last-child(2) { border-bottom: 1px dashed #EFF1F4; } .pc-card .e-card-header { padding: 15px 16px; } .pc-card .e-card-body { padding: 4px 16px 16px; } .pc-head .user-top { padding: 18px 16px; } .pc-head .user-top .u-box { flex-wrap: wrap; align-items: flex-start; } .pc-head .user-top .u-info { margin-left: 14px; min-width: 0; } .pc-head .user-top .u-info .user-name { font-size: 20px; } .pc-head .user-top .e-avatar.large-x { width: 72px; height: 72px; border-width: 2px; } .pc-head .user-top .u-button-group { margin: 14px 0 0; } .pc-head .user-top .u-button-group .e-btn { height: 32px; line-height: 30px; padding: 0 16px; font-size: 13px; } .pc-head .user-nav { margin: 10px 0 10px; } .pc-head .user-nav .e-tab { display: flex; padding: 0 14px; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .pc-head .user-nav .e-tab::-webkit-scrollbar { display: none; } .pc-head .user-nav .e-tab li { flex: 0 0 auto; margin-right: 22px; padding: 12px 0; font-size: 14px; } .pc-head .user-nav .e-tab li.a { font-size: 14px; } .pc-stat { grid-template-columns: repeat(3, 1fr); } .pc-side-row .pc-v { text-align: left; } } /* ========================================================= v8 · 个人中心内页（广播/主题/日志/相册/记录/分享/留言板） ========================================================= */ /* ---------- 通用工具条 ---------- */ #ct.pc-page .pc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 24px; border-bottom: 1px solid #F5F6F7; background: #FCFDFE; } #ct.pc-page .pc-toolbar-solo { border: 1px solid #F0F2F5; border-radius: 10px; background: #fff; margin-bottom: 14px; } #ct.pc-page .pc-toolbar-tabs { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; } #ct.pc-page .pc-toolbar-tabs > li { list-style: none; margin: 0 26px 0 0; padding: 13px 0; font-size: 14px; line-height: 1.5; color: #797C80; position: relative; } #ct.pc-page .pc-toolbar-tabs > li a { color: inherit; } #ct.pc-page .pc-toolbar-tabs > li:hover { color: #1985FF; } #ct.pc-page .pc-toolbar-tabs > li.a { color: #18191A; font-weight: 600; } #ct.pc-page .pc-toolbar-tabs > li.a:after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #1985FF; border-radius: 1px; } #ct.pc-page .pc-toolbar-extra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; flex: 1 1 100%; border-top: 1px dashed #EFF1F4; } #ct.pc-page .pc-toolbar-extra .pc-input { width: 150px; } #ct.pc-page .pc-chips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } #ct.pc-page .pc-chip { display: inline-block; padding: 4px 12px; border-radius: 14px; background: #F4F6F8; border: 1px solid transparent; font-size: 12px; line-height: 18px; color: #5B6470; text-decoration: none; transition: all .16s; } #ct.pc-page .pc-chip:hover { background: #F2F7FF; color: #1985FF; text-decoration: none; } #ct.pc-page .pc-chip.on { background: #EAF3FF; border-color: #CFE3FF; color: #1985FF; font-weight: 500; } #ct.pc-page .pc-select { height: 28px; line-height: 26px; padding: 0 8px; font-size: 12px; color: #5B6470; border: 1px solid #E4E8EE; border-radius: 6px; background: #fff; max-width: 150px; } #ct.pc-page .pc-input { height: 32px; line-height: 30px; padding: 0 12px; font-size: 13px; color: #18191A; border: 1px solid #E4E8EE; border-radius: 8px; background: #fff; width: 180px; box-sizing: border-box; } #ct.pc-page .pc-input:focus { border-color: #1985FF; outline: 0; box-shadow: 0 0 0 3px rgba(25,133,255,.1); } #ct.pc-page .pc-input-lg { width: 100%; max-width: 560px; flex: 1 1 320px; height: 38px; line-height: 36px; } #ct.pc-page .pc-searchbox { display: inline-flex; gap: 6px; align-items: center; } #ct.pc-page .pc-btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 16px; border-radius: 8px; border: 1px solid #E4E8EE; background: #fff; font-size: 13px; color: #3D4652; cursor: pointer; text-decoration: none; transition: all .16s; line-height: 1; } #ct.pc-page .pc-btn:hover { border-color: #CFE3FF; color: #1985FF; text-decoration: none; } #ct.pc-page .pc-btn.primary { background: #1985FF; border-color: #1985FF; color: #fff; } #ct.pc-page .pc-btn.primary:hover { background: #0F73E6; border-color: #0F73E6; color: #fff; } #ct.pc-page .pc-btn.ghost { height: 30px; padding: 0 14px; border-radius: 15px; font-size: 12px; color: #5B6470; } #ct.pc-page .pc-note { margin: 12px 0 0; padding: 0 24px; font-size: 12px; color: #8A9199; } #ct.pc-page .pc-em { color: #FF4D4F; font-weight: 600; } #ct.pc-page .pc-num { font-style: normal; margin-left: 8px; font-size: 12px; font-weight: 400; color: #AAAEB3; line-height: 1; } #ct.pc-page .pc-card .e-title .pc-num { align-self: center; } #ct.pc-page .pc-muted { color: #AAAEB3; font-size: 12px; } #ct.pc-page .pc-emp { padding: 48px 24px; text-align: center; } #ct.pc-page .pc-emp p { margin: 0; font-size: 13px; color: #AAAEB3; } #ct.pc-page .pc-pager { padding: 16px 24px 18px; } #ct.pc-page .pc-more { color: #1985FF; font-size: 13px; } #ct.pc-page .pc-bulk { margin: 0; padding: 12px 24px; border-top: 1px solid #F5F6F7; font-size: 12px; color: #5B6470; display: flex; align-items: center; gap: 10px; } /* 卡片 body 无内边距 */ #ct.pc-page .pc-card .e-card-body.pc-flush { padding: 0; } #ct.pc-page .pc-card .e-card-body.pc-flush > .pc-note { padding: 0 24px 12px; } /* ---------- 发布框 ---------- */ #ct.pc-page .pc-publish .e-card-body { padding: 18px 24px; } #ct.pc-page .pc-doing-form textarea.pc-textarea { min-height: 84px; } #ct.pc-page .pc-textarea { display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #E4E8EE; border-radius: 8px; background: #FBFCFD; font-size: 14px; line-height: 1.7; color: #18191A; resize: vertical; font-family: inherit; } #ct.pc-page .pc-textarea:focus { border-color: #1985FF; background: #fff; outline: 0; box-shadow: 0 0 0 3px rgba(25,133,255,.1); } #ct.pc-page .pc-form-ft { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; } #ct.pc-page .pc-form-left, #ct.pc-page .pc-form-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } #ct.pc-page .pc-form-hd { margin-bottom: 8px; font-size: 12px; color: #8A9199; display: flex; align-items: center; gap: 14px; } #ct.pc-page .pc-form-hd a { color: #8A9199; } #ct.pc-page .pc-check { font-size: 12px; color: #8A9199; display: inline-flex; align-items: center; gap: 4px; } #ct.pc-page .pc-login-tip { padding: 16px; background: #F7F9FA; border-radius: 8px; font-size: 13px; color: #8A9199; text-align: center; } /* ---------- 记录流 ---------- */ #ct.pc-page .pc-feed-list { padding: 0; } #ct.pc-page .pc-feed-item { display: flex; gap: 14px; padding: 20px 24px; border-bottom: 1px solid #F5F6F7; } #ct.pc-page .pc-feed-item:last-child { border-bottom: 0; } #ct.pc-page .pc-feed-avt { flex: 0 0 44px; } #ct.pc-page .pc-feed-avt .e-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: block; } #ct.pc-page .pc-feed-avt img { width: 44px; height: 44px; border-radius: 50%; display: block; object-fit: cover; } #ct.pc-page .pc-feed-main { flex: 1 1 auto; min-width: 0; } #ct.pc-page .pc-feed-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #ct.pc-page .pc-feed-name { font-size: 14px; font-weight: 600; color: #18191A; } #ct.pc-page .pc-feed-name:hover { color: #1985FF; } #ct.pc-page .pc-feed-time { font-size: 12px; color: #AAAEB3; } #ct.pc-page .pc-feed-text { margin-top: 7px; font-size: 14px; line-height: 1.8; color: #3D4652; word-break: break-word; } #ct.pc-page .pc-feed-text img { max-width: 100%; height: auto; border-radius: 6px; } #ct.pc-page .pc-feed-ops { margin-top: 9px; display: flex; align-items: center; gap: 14px; font-size: 12px; } #ct.pc-page .pc-feed-ops a { color: #8A9199; } #ct.pc-page .pc-feed-ops a:hover { color: #1985FF; } #ct.pc-page .pc-feed-cmt { margin-top: 12px; padding: 10px 14px; background: #F7F9FA; border-radius: 8px; } #ct.pc-page .pc-cmt-list { margin: 0; padding: 0; list-style: none; } #ct.pc-page .pc-cmt-item { padding: 6px 0; font-size: 13px; line-height: 1.8; color: #3D4652; list-style: none; } #ct.pc-page .pc-cmt-name { color: #2D8CF0; margin-right: 4px; } #ct.pc-page .pc-cmt-text { color: #3D4652; } #ct.pc-page .pc-cmt-time { margin-left: 6px; font-size: 12px; color: #AAAEB3; } #ct.pc-page .pc-cmt-ops { margin-left: 8px; font-size: 12px; } #ct.pc-page .pc-cmt-ops a { color: #8A9199; margin-left: 8px; } /* ---------- 主题列表 ---------- */ #ct.pc-page .pc-table-list { width: 100%; border-collapse: collapse; } #ct.pc-page .pc-table-list tr.pc-row { border-bottom: 1px solid #F5F6F7; } #ct.pc-page .pc-table-list tr.pc-row:last-child { border-bottom: 0; } #ct.pc-page .pc-table-list tr.pc-row:hover { background: #FCFDFE; } #ct.pc-page .pc-row-main { padding: 16px 24px; text-align: left; font-weight: 400; vertical-align: top; } #ct.pc-page .pc-row-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; line-height: 1.6; } #ct.pc-page .pc-row-link { color: #18191A; font-weight: 500; } #ct.pc-page .pc-row-link:hover { color: #1985FF; } #ct.pc-page .pc-row-link.recy { color: #AAAEB3; } #ct.pc-page .pc-ico { width: 16px; height: 16px; flex: 0 0 16px; object-fit: contain; vertical-align: middle; } #ct.pc-page .pc-row-quote { margin-top: 8px; padding: 8px 12px; background: #F7F9FA; border-radius: 6px; font-size: 12px; color: #797C80; line-height: 1.8; } #ct.pc-page .pc-row-quote .span + .span { margin-top: 4px; } #ct.pc-page .pc-row-meta { margin-top: 8px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #AAAEB3; } #ct.pc-page .pc-row-meta a { color: #8A9199; } #ct.pc-page .pc-row-meta a:hover { color: #1985FF; } #ct.pc-page .pc-row-side { width: 120px; padding: 16px 24px 16px 0; text-align: right; white-space: nowrap; vertical-align: top; } #ct.pc-page .pc-count .e-icon { width: 15px; height: 15px; background-size: 15px 15px; flex: 0 0 15px; } #ct.pc-page .pc-count { display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; font-size: 12px; color: #AAAEB3; } #ct.pc-page .pc-count a { color: #AAAEB3; } /* ---------- 日志列表（沿用 general-list） ---------- */ #ct.pc-page .pc-blog-list { margin: 0; padding: 0; } #ct.pc-page .pc-blog-list .item { padding: 20px 24px; border-bottom: 1px solid #F5F6F7; } #ct.pc-page .pc-blog-list .item:last-child { border-bottom: 0; } #ct.pc-page .pc-blog-list .item-left { width: calc(100% - 172px); } #ct.pc-page .pc-blog-list .item-left .item-title { margin: 0 0 46px; } #ct.pc-page .pc-blog-list .item-title a { color: inherit; } #ct.pc-page .pc-blog-list .item-title .pc-tag { font-size: 11px; line-height: 18px; } #ct.pc-page .pc-blog-list .item-left .desc { width: calc(100% - 12px); } #ct.pc-page .pc-blog-list .e-avatar.min { width: 24px; height: 24px; } #ct.pc-page .pc-blog-list .e-avatar.min img { width: 24px; height: 24px; border-radius: 50%; } /* ---------- 日志详情 ---------- */ #ct.pc-page .pc-card.pc-article .e-card-body { padding: 26px 32px 22px; } #ct.pc-page .pc-article-title { margin: 0 0 14px; font-size: 24px; font-weight: 600; line-height: 1.5; color: #18191A; } #ct.pc-page .pc-article-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: #AAAEB3; padding-bottom: 16px; border-bottom: 1px solid #F5F6F7; } #ct.pc-page .pc-article-meta a { color: #2D8CF0; } #ct.pc-page .pc-avatar-min img { width: 24px; height: 24px; border-radius: 50%; display: block; } #ct.pc-page .pc-article-author { font-weight: 500; color: #18191A !important; } #ct.pc-page .pc-article-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; } #ct.pc-page .pc-article-body { padding: 18px 0 6px; font-size: 15px; line-height: 1.95; color: #3D4652; word-break: break-word; } #ct.pc-page .pc-article-body img { max-width: 100%; height: auto; border-radius: 6px; } #ct.pc-page .pc-article-body p { margin: 0 0 14px; } #ct.pc-page .pc-article-body blockquote { margin: 12px 0; padding: 10px 16px; background: #F7F9FA; border-left: 3px solid #CFE3FF; color: #5B6470; } #ct.pc-page .pc-article-click { padding: 10px 0 4px; } #ct.pc-page .pc-share-row { padding: 10px 0; font-size: 12px; color: #8A9199; border-top: 1px dashed #EFF1F4; } #ct.pc-page .pc-article-ops { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 16px; margin-top: 12px; border-top: 1px solid #F5F6F7; } /* ---------- 评论 / 留言 ---------- */ #ct.pc-page .pc-comment-list { padding: 0; } #ct.pc-page .pc-comment-list dl { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; row-gap: 4px; margin: 0; padding: 16px 0; border-bottom: 1px solid #F5F6F7; } #ct.pc-page .pc-comment-list dl:last-child { border-bottom: 0; } #ct.pc-page .pc-comment-list dd.m.avt { grid-column: 1; grid-row: 1 / span 2; float: none; margin: 0; padding: 0; width: 40px; } #ct.pc-page .pc-comment-list dd.m.avt img { width: 40px; height: 40px; border-radius: 50%; display: block; object-fit: cover; } #ct.pc-page .pc-comment-list dt { grid-column: 2; margin: 0; padding: 0; float: none; font-size: 13px; line-height: 1.6; color: #AAAEB3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #ct.pc-page .pc-comment-list dt > a { color: #18191A; font-weight: 500; font-size: 13px; } #ct.pc-page .pc-comment-list dt .y { float: none; order: 3; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; } #ct.pc-page .pc-comment-list dt .y .pipe { display: none; } #ct.pc-page .pc-comment-list dt a { color: #8A9199; font-size: 12px; } #ct.pc-page .pc-comment-list dt a:hover { color: #1985FF; } #ct.pc-page .pc-comment-list dd { grid-column: 2; margin: 0; padding: 0; float: none; font-size: 14px; line-height: 1.8; color: #3D4652; word-break: break-word; } #ct.pc-page .pc-comment-list dd img { max-width: 100%; height: auto; } /* ---------- 相册 ---------- */ #ct.pc-page .pc-album-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 16px; margin: 0; padding: 6px 0 0; list-style: none; } #ct.pc-page .pc-album-grid.small { grid-template-columns: repeat(6, 1fr); gap: 14px 12px; } #ct.pc-page .pc-album-tile { list-style: none; margin: 0; min-width: 0; } #ct.pc-page .pc-album-cover { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #F4F6F8; } #ct.pc-page .pc-album-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } #ct.pc-page .pc-album-cover:hover img { transform: scale(1.05); } #ct.pc-page .pc-album-none { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 12px; color: #C4CAD2; } #ct.pc-page .pc-album-num { position: absolute; right: 8px; bottom: 8px; padding: 1px 7px; border-radius: 9px; background: rgba(0,0,0,.45); color: #fff; font-size: 11px; line-height: 17px; } #ct.pc-page .pc-album-name { display: block; margin-top: 8px; font-size: 13px; color: #18191A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #ct.pc-page .pc-album-name:hover { color: #1985FF; } #ct.pc-page .pc-album-meta { margin-top: 3px; display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; color: #AAAEB3; } #ct.pc-page .pc-album-meta a { color: #8A9199; margin-right: 6px; } #ct.pc-page .pc-album-meta a:hover { color: #1985FF; } #ct.pc-page .pc-pic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0; padding: 6px 0 0; list-style: none; } #ct.pc-page .pc-pic-tile { list-style: none; margin: 0; min-width: 0; position: relative; } #ct.pc-page .pc-pic-cover { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #F4F6F8; } #ct.pc-page .pc-pic-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } #ct.pc-page .pc-pic-cover:hover img { transform: scale(1.06); } #ct.pc-page .pc-pic-name { display: block; margin-top: 7px; font-size: 13px; color: #18191A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #ct.pc-page .pc-pic-name:hover { color: #1985FF; } #ct.pc-page .pc-pic-by { display: block; margin-top: 2px; font-size: 12px; color: #AAAEB3; } #ct.pc-page .pc-pic-by a { color: #AAAEB3; } #ct.pc-page .pc-album-head { padding: 2px 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #ct.pc-page .pc-album-depict { flex: 1 1 100%; margin: 4px 0 0; font-size: 13px; line-height: 1.8; color: #797C80; } #ct.pc-page .pc-album-switch { padding-top: 4px; } #ct.pc-page .pc-pagebtn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; border: 1px solid #E4E8EE; color: #5B6470; font-size: 16px; line-height: 1; } #ct.pc-page .pc-pagebtn:hover { border-color: #CFE3FF; color: #1985FF; text-decoration: none; } #ct.pc-page .pc-picview .tbmu { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #F5F6F7; font-size: 12px; color: #8A9199; } #ct.pc-page .pc-picview .tbmu a { color: #8A9199; } #ct.pc-page .pc-picview .tbmu a:hover { color: #1985FF; } #ct.pc-page .pc-picview #photo_pic { text-align: center; } #ct.pc-page .pc-picview #photo_pic img { max-width: 100%; max-height: 72vh; width: auto; height: auto; border-radius: 8px; } /* ---------- 分享 ---------- */ #ct.pc-page .pc-share-form-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #ct.pc-page .pc-share-help { font-size: 12px; color: #8A9199; white-space: nowrap; } #ct.pc-page .pc-share-form #share_desc { margin-top: 10px; } #ct.pc-page .pc-share-form-ft { margin-top: 8px; font-size: 12px; color: #AAAEB3; display: flex; align-items: center; gap: 10px; } #ct.pc-page .pc-share-list { margin: 0; padding: 0; list-style: none; } #ct.pc-page .pc-share-item { list-style: none; margin: 0; padding: 20px 24px; border-bottom: 1px solid #F5F6F7; } #ct.pc-page .pc-share-item:last-child { border-bottom: 0; } #ct.pc-page .pc-share-hd { display: flex; align-items: center; gap: 10px; } #ct.pc-page .pc-share-who { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #ct.pc-page .pc-share-name { font-size: 14px; font-weight: 600; color: #18191A; } #ct.pc-page .pc-share-name:hover { color: #1985FF; } #ct.pc-page .pc-share-ops { display: flex; align-items: center; gap: 12px; font-size: 12px; } #ct.pc-page .pc-share-ops a { color: #8A9199; } #ct.pc-page .pc-share-ops a:hover { color: #1985FF; } #ct.pc-page .pc-share-body { margin-top: 10px; } #ct.pc-page .pc-share-title { display: block; font-size: 15px; font-weight: 500; line-height: 1.7; color: #18191A; } #ct.pc-page .pc-share-title:hover { color: #1985FF; } #ct.pc-page .pc-share-media { display: flex; gap: 14px; margin-top: 10px; } #ct.pc-page .pc-share-img { flex: 0 0 132px; width: 132px; height: 88px; border-radius: 8px; overflow: hidden; background: #F4F6F8; } #ct.pc-page .pc-share-img img { width: 100%; height: 100%; object-fit: cover; display: block; } #ct.pc-page .pc-share-desc { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.8; color: #797C80; word-break: break-word; } #ct.pc-page .pc-share-desc img { max-width: 100%; height: auto; } #ct.pc-page .pc-share-player { margin-top: 10px; } #ct.pc-page .pc-share-quote { margin: 10px 0 0; padding: 10px 14px; background: #F7F9FA; border-radius: 8px; font-size: 13px; line-height: 1.8; color: #5B6470; } /* ---------- 广播 ---------- */ #ct.pc-page .pc-publish-inner { display: block; } #ct.pc-page .pc-publish-inner #fastpostform { float: none !important; width: 100%; } #ct.pc-page .pc-publish-inner .tedt { border: 1px solid #E4E8EE; border-radius: 8px; overflow: hidden; background: #FBFCFD; } #ct.pc-page .pc-publish-inner .tedt .area { padding: 2px 6px; } #ct.pc-page .pc-publish-inner textarea#fastpostmessage { width: 100%; box-sizing: border-box; border: 0; background: transparent; min-height: 88px; padding: 8px; font-size: 14px; line-height: 1.7; } #ct.pc-page .pc-publish-inner .bar { background: #F7F9FA; border-top: 1px solid #EFF1F4; } #ct.pc-page .pc-publish-inner .upfl { display: none; } #ct.pc-page .pc-publish-inner .pnpost { margin: 0; } #ct.pc-page .pc-follow-stats { margin-bottom: 12px; } #ct.pc-page .pc-follow-stats ul { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; } #ct.pc-page .pc-follow-stats li { list-style: none; font-size: 12px; color: #8A9199; display: flex; align-items: center; gap: 6px; } #ct.pc-page .pc-follow-stats strong { font-size: 16px; font-weight: 600; color: #1985FF; } #ct.pc-page .pc-follow-feed { margin: 0 0 14px; padding: 2px 24px; background: #fff; border: 1px solid #F0F2F5; border-radius: 10px; box-shadow: 0 1px 2px rgba(16,24,40,.04); } #ct.pc-page .pc-follow-feed > ul { margin: 0; padding: 0; list-style: none; } #ct.pc-page .pc-follow-feed > ul > li { list-style: none; padding: 18px 0; border-bottom: 1px solid #F5F6F7; } #ct.pc-page .pc-follow-feed > ul > li:last-child { border-bottom: 0; } #ct.pc-page .pc-follow-feed .flw_article { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } #ct.pc-page .pc-follow-feed .flw_author a { color: #18191A; font-weight: 600; } #ct.pc-page .pc-follow-feed .flw_article h2 { margin-bottom: 10px; } #ct.pc-page .pc-follow-feed .flw_article h2 a { color: #18191A; font-weight: 500; } #ct.pc-page .pc-follow-feed .flw_article h2 a:hover { color: #1985FF; } #ct.pc-page .pc-side-tip { margin: 10px 0 0; font-size: 12px; line-height: 1.7; color: #AAAEB3; } #ct.pc-page .pc-card .pc-ops { display: flex; align-items: center; gap: 14px; } #ct.pc-page .pc-card .pc-ops a { color: #8A9199; font-size: 12px; } #ct.pc-page .pc-card .pc-ops a:hover { color: #1985FF; } #ct.pc-page .pc-card-side .pc-ops { display: flex; gap: 12px; } #ct.pc-page .pc-card-side .pc-ops a { color: #8A9199; font-size: 12px; } #ct.pc-page .pc-card-side .pc-ops a:hover { color: #1985FF; } #ct.pc-page .pc-follow .tb, #ct.pc-page .pc-follow .tbmu { border: 0; } /* ---------- 旧样式清理 ---------- */ #ct.pc-page .user-center, #ct.pc-page .user-box { border: 0; background: transparent; padding: 0; } #ct.pc-page .bm_c { padding: 0; } #ct.pc-page .tbmu { padding: 0; } @media (max-width: 820px) { #ct.pc-page .pc-toolbar { padding: 0 16px; } #ct.pc-page .pc-toolbar-tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #ct.pc-page .pc-toolbar-tabs::-webkit-scrollbar { display: none; } #ct.pc-page .pc-toolbar-tabs > li { margin-right: 18px; padding: 11px 0; font-size: 13px; } #ct.pc-page .pc-toolbar-extra { gap: 8px; } #ct.pc-page .pc-feed-item, #ct.pc-page .pc-share-item, #ct.pc-page .pc-blog-list .item { padding: 16px; } /* 主题列表：表格改为上下堆叠 */ #ct.pc-page .pc-table-list, #ct.pc-page .pc-table-list tbody { display: block; width: 100%; } #ct.pc-page .pc-table-list tr.pc-row { display: block; position: relative; } #ct.pc-page .pc-row-main { display: block; width: auto; padding: 14px 16px 0; } #ct.pc-page .pc-row-side { display: block; width: auto; padding: 8px 16px 14px; text-align: left; white-space: normal; } #ct.pc-page .pc-count { margin: 0 14px 0 0; } #ct.pc-page .pc-row-meta { gap: 10px; } /* 日志列表：取消浮动与绝对定位摘要 */ #ct.pc-page .pc-blog-list .content { display: block; overflow: visible; } #ct.pc-page .pc-blog-list .item-left { float: none; width: 100% !important; } #ct.pc-page .pc-blog-list .item-left .item-title { margin: 0 0 8px; max-height: none; font-size: 16px; line-height: 1.6; } #ct.pc-page .pc-blog-list .item-left .desc { position: static; width: 100%; max-height: none; margin: 0; font-size: 13px; line-height: 1.75; } #ct.pc-page .pc-blog-list .item-right { float: none; width: 100% !important; min-width: 0; margin-top: 10px; text-align: left; } #ct.pc-page .pc-blog-list .item-right .img-wrap { display: none; } #ct.pc-page .pc-blog-list .item-right .right-info { margin-top: 0; justify-content: flex-start; gap: 16px; } #ct.pc-page .pc-blog-list .item-info { position: static; width: auto; height: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; } #ct.pc-page .pc-album-grid { grid-template-columns: repeat(2, 1fr); } #ct.pc-page .pc-album-grid.small { grid-template-columns: repeat(3, 1fr); } #ct.pc-page .pc-pic-grid { grid-template-columns: repeat(2, 1fr); } #ct.pc-page .pc-card.pc-article .e-card-body { padding: 20px 16px; } #ct.pc-page .pc-article-title { font-size: 20px; } #ct.pc-page .pc-share-media { flex-direction: column; } #ct.pc-page .pc-share-img { width: 100%; flex: 0 0 auto; height: 160px; } #ct.pc-page .pc-note { padding: 10px 16px 0; } #ct.pc-page .pc-pager { padding: 14px 16px; } } /* ---------- 图片缺失占位 ---------- */ #ct.pc-page .pc-album-cover img:not([src]), #ct.pc-page .pc-album-cover img[src=""], #ct.pc-page .pc-pic-tile img:not([src]), #ct.pc-page .pc-pic-tile img[src=""] { display: none; } /* ---------- 移动端补充（卡片头/表单换行） ---------- */ @media (max-width: 820px) { #ct.pc-page .e-card-header { flex-wrap: wrap; row-gap: 6px; } #ct.pc-page .pc-ops { flex-wrap: wrap; gap: 10px; } #ct.pc-page .pc-share-form-row { flex-wrap: wrap; } #ct.pc-page .pc-share-form-row .pc-input-lg { flex: 1 1 100%; width: 100%; } #ct.pc-page .pc-form-ft { flex-wrap: wrap; row-gap: 8px; } #ct.pc-page .pc-toolbar-extra .pc-input { width: 120px; } #ct.pc-page .pc-toolbar-extra .pc-select { max-width: 100%; } #ct.pc-page .pc-publish-inner .bar, #ct.pc-page .pc-publish-inner .pnpost { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } } /* ---------- 搜索按钮（浅蓝底，与输入框区分） ---------- */ #ct.pc-page .pc-searchbox .pc-btn { background: #F0F6FF; border-color: #CFE3FF; color: #1985FF; height: 34px; } #ct.pc-page .pc-searchbox .pc-btn:hover { background: #E3EFFF; border-color: #B9D6FF; }