/* 基础样式重置 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } a { text-decoration: none; color: white; } a:hover { color: white; } /* 排版样式 */ h1, h2, h3, h4, h5 { margin-top: 1em; margin-bottom: 0.5em; font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-weight: lighter; color: #333; -webkit-font-smoothing: antialiased; } h1 { margin-top: 0; font-size: 2.5em; line-height: 1.2em; letter-spacing: 0.05em; } h2 { font-size: 2em; } h3 { font-size: 1.6em; } h4 { font-size: 1.2em; } h5 { font-size: 1em; } p { margin-bottom: 1.3em; line-height: 1.7em; } strong { font-weight: bold; } em { font-style: italic; } blockquote { padding: 10px 20px; margin: 0 0 20px; font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-weight: lighter; font-size: 1em; border-left: 3px solid #4e97d8; } /* 表格样式 */ figure table { border-collapse: collapse; border-spacing: 0; width: 100%; table-layout: fixed; text-align: left; border-width: 0px; margin: auto; } figure th, figure td { padding: 0px; } /* 代码样式 */ code { padding: 0.1em 0.4em; background: #e8f2fb; border: 1px solid #c9e1f6; border-radius: 3px; font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; font-size: 0.9em; vertical-align: bottom; word-wrap: break-word; } pre { margin-bottom: 1.3em; padding: 1em 2.5%; background: #e8f2fb; border: 1px solid #c9e1f6; border-radius: 3px; font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; font-size: 0.9em; font-weight: normal; line-height: 1.7em; overflow: scroll; } pre code { padding: 0; background: none; border: none; word-wrap: normal; } /* 主要布局样式 */ .container { position: relative; z-index: 500; width: 940px; margin: 0 auto; } .content-wrapper { z-index: 800; width: 70%; margin-left: 30%; } .content-wrapper__inner { margin: 0 10%; padding: 50px 0; } .footer { display: block; padding: 1.5em 0; text-align: center; font-size: 0.85em; color: rgba(255, 255, 255, 0.7); background-color: rgba(0, 0, 0, 0.3); margin-top: 2em; } /* 圆形元素样式 */ .avatar, .logo, .profilepic { border-radius: 50%; border: 3px solid transparent; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } /* 头像容器样式 */ .ih-item { position: relative; display: inline-block; width: 160px; height: 160px; margin: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .ih-item.circle { position: relative; width: 160px; height: 160px; border-radius: 50%; } .ih-item.circle .img { position: absolute; width: 100%; height: 100%; border-radius: 50%; transition: all 0.5s ease; } .ih-item.circle .info { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); border-radius: 50%; opacity: 0; transition: all 0.5s ease; transform: scale(0.5); } .ih-item.circle:hover .info { opacity: 1; transform: scale(1); } .ih-item.circle .info-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* 右到左效果 */ .ih-item.circle.effect.right_to_left .img { transition: all 0.5s ease; } .ih-item.circle.effect.right_to_left:hover .img { transform: translateX(-100%); } /* 头像图片样式 */ .profilepic { width: 100%; height: 100%; object-fit: cover; } /* 抖动效果 */ .profilepic:hover { animation: shake 0.8s ease; } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } } /* 响应式适配 */ @media all and (max-width: 1100px) {} @media all and (max-width: 960px) {} @media all and (max-width: 510px) { .navigation { line-height: 50px; } } @media all and (max-width: 340px) { .panel-main__inner { padding: 0 5%; } .panel-title { margin-bottom: 0.1em; font-size: 1.5em; } .panel-subtitle { font-size: 0.9em; } } /* 自定义类样式 */ .iUp { opacity: 0; transform: translate3d(0, 80px, 0); transition: all 2s cubic-bezier(0.19, 1, 0.22, 1); } .iUp.up { opacity: 1; transform: translate3d(0, 0, 0); } /* 弹窗美化 */ .iziToast-message.slideIn { margin-top: 5px !important; } /* 新增iframe容器样式 */ #moments-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 800px; background-color: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 9999; opacity: 0; transition: opacity 0.5s ease; } #moments-container.visible { opacity: 1; } /* 遮罩层 */ .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; z-index: 9998; } /* 设备适配 */ @media screen and (max-width: 768px) { .iphone-simulator { display: none; } } @media screen and (min-width: 769px) { .iphone-simulator { display: block; } } /* 重要布局组件样式 */ .panel { display: table; width: 100%; height: 100%; } .panel__vertical { display: table-cell; vertical-align: middle; } .panel-title { font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; margin: 0 0 15px 0; font-size: 2.8em; color: #fff; letter-spacing: 2px; } .panel-subtitle { font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; font-size: 1.3em; font-weight: normal; letter-spacing: 2px; color: #f0f0f0; -webkit-font-smoothing: antialiased; margin-bottom: 20px; } /* 一言元素样式 - 细腻优雅字体 */ .panel-cover__description { font-family: 'Source Han Serif SC', 'Noto Serif SC', 'PingFang SC', 'Hiragino Sans GB W3', 'Apple LiGothic Medium', 'Microsoft YaHei UI Light', serif; font-size: 0.95em; font-weight: 200; line-height: 1.9; letter-spacing: 3px; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); position: relative; z-index: 1; opacity: 0.92; font-feature-settings: 'kern' 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 一言元素的强调文字样式 */ .panel-cover__description strong { font-weight: 400; color: #ffffff; opacity: 0.9; } .panel-cover { display: block; position: fixed; z-index: 900; width: 100%; max-width: none; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), center center no-repeat #666; background-size: cover; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transform: translate3d(0, 0, 0); transition: width 0.6s ease; } .panel-cover--collapsed { width: 30%; } .panel-cover--overlay { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 1; opacity: .75; } .panel-main { display: table; width: 100%; height: 100%; } .panel-main__inner { display: table-cell; vertical-align: middle; position: relative; z-index: 800; padding: 40px; text-align: center; } .panel-main__content { max-width: 620px; margin: 0px auto; padding: 30px; border-radius: 15px; background-color: transparent; border: none; } .panel-inverted { font-weight: 100; text-align: center; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); } .panel-inverted a { color: #fff; } /* 按钮样式 */ .btn, .navigation__item a { padding: 10px 20px; border: 1px solid #4e97d8; border-radius: 20px; font-size: 0.9em; font-weight: bold; letter-spacing: 1px; text-shadow: none; color: #4e97d8; -webkit-font-smoothing: antialiased; } .btn:hover, .navigation__item a:hover { color: #4e97d8; border-color: #4e97d8; } /* 导航样式 */ nav { display: inline-block; position: relative; } .navigation { display: inline-block; position: relative; margin: 0; list-style-type: none; } .navigation__item { display: inline-block; margin: 5px 1px 0 0; line-height: 1em; } .navigation__item a { display: block; position: relative; border-color: rgba(255, 255, 255, 0.6); color: #fff; opacity: 0.9; transition: all 0.3s ease; } /* FAB图标样式 */ .fab { font-family: 'Font Awesome 6 Brands'; font-weight: 400; } /* 社交图标样式 */ .navigation--social .navigation__item a:before { font-family: 'Font Awesome 6 Brands'; font-weight: 400; font-size: 1.2em; } /* 主导航样式 */ .cover-navigation--primary .navigation__item a { margin: 0 5px; padding: 10px 15px; border-width: 1px; } /* 社交图标导航样式 - 完全重写版本 */ .social-icons-row { margin-top: 40px; /* 与上一行的间距 */ width: 100%; text-align: center; display: block; clear: both; } .social-icons-row:after { content: ""; display: table; clear: both; } .social-icons-row .social-icon { display: inline-block; margin: 0 4%; float: none; position: relative; } /* 响应式社交图标间距和大小 */ @media screen and (min-width: 1200px) { .social-icons-row .social-icon { margin: 0 3%; } .social-icons-row .social-icon a { font-size: 1.2em; } } @media screen and (max-width: 768px) { .social-icons-row .social-icon { margin: 0 1.5%; } .social-icons-row .social-icon a { font-size: 1.1em; } } @media screen and (max-width: 480px) { .social-icons-row .social-icon { margin: 0 1%; } .social-icons-row .social-icon a { font-size: 1em; } } .social-icons-row .social-icon a { padding: 0; border: none !important; font-size: 1.2em; display: inline-block; background-color: transparent !important; color: #fff !important; width: auto; opacity: 0.9; transition: opacity 0.3s ease; } .social-icons-row .social-icon a:hover { opacity: 1; } /* 覆盖社交图标i元素的样式,移除小横杠黑点 */ .social-icons-row .social-icon i { position: static; display: inline-block; background: transparent !important; border: none !important; } /* 移除社交图标i元素的伪元素黑点,但保留图标显示 */ .social-icons-row .social-icon i::after { display: none !important; content: none !important; border: none !important; background: transparent !important; width: 0 !important; height: 0 !important; } /* 确保社交图标i元素的::before伪元素正确显示 */ .social-icons-row .social-icon i::before { position: static !important; border: none !important; background: transparent !important; top: auto !important; bottom: auto !important; left: auto !important; } .social-icons-row .social-icon i { position: static; display: inline-block; transform: none !important; width: auto; height: auto; background: transparent !important; border: none !important; } .social-icons-row .social-icon .label { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .social-icons-row .social-icon a:hover { opacity: 1; transform: none !important; /* 确保悬停时不移动 */ background-color: transparent !important; color: #fff !important; letter-spacing: normal !important; box-shadow: none !important; } /* 隐藏社交导航文本名称 */ .social-icons-row .label { display: none !important; } /* 移除所有动画效果 */ /* 移除所有动画效果 */ @keyframes btnGroups { 0% { transform: scale(1); } 100% { transform: scale(1); } } /* 微信二维码模态框样式 */ .weixin-link { position: relative; } .weixin-qrcode-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; z-index: 10000; justify-content: center; align-items: flex-start; animation: fadeIn 0.3s ease; padding-top: 20px; /* 弹框贴近顶部,使用全透明背景 */ } .weixin-qrcode-container { background-color: #fff; padding: 20px; border-radius: 10px; text-align: center; max-width: 90%; width: 300px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); animation: zoomIn 0.3s ease; position: relative; margin: 0; } .weixin-qrcode-image { width: 100%; max-width: 250px; height: auto; margin: 15px 0; border: 5px solid #f8f8f8; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .weixin-qrcode-title { font-size: 18px; font-weight: bold; color: #333; margin-bottom: 10px; } .weixin-qrcode-desc { font-size: 14px; color: #666; margin-bottom: 15px; } .weixin-qrcode-close { background-color: #f44336; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; margin-top: 10px; min-width: 100px; display: inline-block; } .weixin-qrcode-close:hover { background-color: #d32f2f; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes zoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } @media (max-width: 480px) { .weixin-qrcode-container { width: 250px; } .weixin-qrcode-close { padding: 12px 24px; font-size: 18px; margin-top: 15px; } } /* 以上已包含完整的微信二维码模态框样式 */ /* 旧的微信模态框样式已移除,使用新的weixin-qrcode-*类名 */ /* 页脚样式 */ .remark { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; padding: 5px; z-index: 1000; background-color: rgba(255, 255, 255, 0.0); } .power { display: inline-block; margin: 0 5px; font-size: 0.5em; color: rgba(255, 255, 255, 0.7); line-height: 1.2; } .power a { color: rgba(255, 255, 255, 0.9); text-decoration: none; transition: color 0.3s ease; } .power a:hover { color: #fff; text-decoration: underline; } /* 页脚单行显示 */ .remark .power:not(:last-child):after { content: "|"; margin-left: 8px; color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5); } /* 微信图标样式 */ .wechat-icon { position: relative; cursor: pointer; } /* navigation-wrapper 间距调整 */ .navigation-wrapper { margin-top: 40px; }