html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
line-height: 1.6
}
body {
-webkit-touch-callout: none;
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
line-height: inherit
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 400;
font-size: 16px
}
* {
margin: 0;
padding: 0
}
a {
color: #607fa6;
text-decoration: none
}
@media screen and (min-width:1024px) {
body {
background-color: #fff
}
}
@media screen and (min-width:1025px) {
body {
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif
}
}
body>iframe,
div#last-div~div {
display: none !important;
opacity: 0 !important;
position: absolute !important;
left: -200% !important;
top: 0;
width: 0 !important;
height: 0 !important;
}
.title {
padding: 10px 10px 0;
font-size: 16px;
font-weight: bold;
}
.ul_pl {
list-style: none;
}
.lz-msg {
width: 100%;
float: left;
}
.lz-msg .icon {
float: left;
width: 60px;
padding-left: 5px;
padding-right: 5px;
}
.lz-msg .icon img {
display: block;
margin: 0 auto;
width: 40px;
height: 40px;
border-radius: 20px;
}
.lz-msg .lz-info {
line-height: 20px;
float: left;
}
.ul_pl li {
margin-top: 10px;
}
.lz-msg .cl {
float: right;
color: #CCC;
font-size: 12px;
}
.lz-msg .lz-info .lz-name {
color: #02879f;
}
.lz-msg .lz-info .lz-level {
color: #888;
font-size: 12px;
}
.lz-content {
padding: 10px;
border-bottom: 1px solid rgb(188, 192, 197);
line-height: 180%;
}
.lz-content img {
display: block;
width: 100%;
}
.recomment {
background: #f1f1f1;
padding: 5px 10px;
margin-top: 10px;
}
.recomment .recomment-name {
color: #02879F;
margin-top: 8px;
line-height: 150%;
}
body,
p {
margin: 0;
}
* {
box-sizing: border-box;
}
img,
a {
display: block;
}
a,
a:hover,
a:link {
text-decoration: none;
}
* {
margin: 0;
padding: 0
}
.box {
width: 100%;
margin: 0 auto;
max-width: 640px;
font-family: "微软雅黑";
}
.top {
width: 50%;
margin: 0 auto;
}
.top img {
width: 100%
}
.title {
width: 94%;
margin: 0 auto 2%;
font-size: 18px;
line-height: 27px;
letter-spacing: 1px;
font-weight: bold;
}
.author {
width: 94%;
margin: 20px;
font-size: 15px;
color: #666
}
.article {
width: 94%;
margin: 0 auto 4%;
font-size: 18px;
line-height: 29px;
color: #414141;
text-indent: 2em;
}
.article1 {
width: 94%;
margin: 0 auto 4%;
font-size: 18px;
line-height: 29px;
color: #414141;
}
.img {
width: 94%;
margin: 0 auto 4%;
overflow: hidden
}
.img img {
width: 100%;
float: left
}
.count {
width: 94%;
margin: 0 auto 2%;
text-align: right;
color: #666;
font-size: 14px
}
@media only screen and (min-width:480px) {
.article {
font-size: 17px;
line-height: 28px;
}
.article1 {
font-size: 17px;
line-height: 28px;
}
.author dt {
width: 9%;
}
.author dd {
width: 89%;
}
}
.js-open-qa {
cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.wx-btn-row {
display: block; text-align: center; margin: 16px 0; text-indent: 0;
}
.wx-btn {
display: block;
width: 86%;
max-width: 340px;
margin: 0 auto;
padding: 16px 22px;
font-size: 18px;
font-weight: 700;
letter-spacing: .5px;
color: #fff !important;
line-height: 1.4;
text-align: center;
text-indent: 0;
background: linear-gradient(135deg, #f44336, #b71c1c);
border-radius: 24px;
box-shadow: 0 6px 16px rgba(183, 28, 28, .34);
}
.wx-btn:active {
transform: translateY(1px);
}
/* 让添加微信 CTA 更显眼：呼吸脉冲 */
.wx-btn {
animation: wxPulse 1.8s ease-in-out infinite;
}
@keyframes wxPulse {
0%, 100% { transform: scale(1); box-shadow: 0 6px 16px rgba(183, 28, 28, .34); }
50% { transform: scale(1.05); box-shadow: 0 8px 24px rgba(183, 28, 28, .55); }
}
.wx-link {
display: inline;
padding: 0;
font-size: inherit;
font-weight: 400;
color: #c00000 !important;
text-decoration: underline;
background: none;
border-radius: 0;
box-shadow: none;
}
#qaMask {
position: fixed;
inset: 0;
z-index: 998;
background: rgba(0, 0, 0, .45);
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility .25s;
}
#qaMask.qa-open {
opacity: 1; visibility: visible;
}
#qaPanel {
position: fixed;
inset: 0;
z-index: 999;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
height: 100dvh;
background: #f5f6f7;
overflow: hidden;
transform: translateY(100%);
transition: transform .3s ease;
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}
#qaPanel.qa-open {
display: flex; transform: translateY(0);
}
#qaPanel * {
box-sizing: border-box;
}
.qa-head {
flex: none;
display: flex;
align-items: center;
gap: 10px;
padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
background: #fff;
border-bottom: 1px solid #ececec;
}
.qa-avatar {
flex: none;
width: 40px;
height: 40px;
font-size: 16px;
font-weight: 700;
line-height: 40px;
text-align: center;
color: #fff;
background: linear-gradient(135deg, #f44336, #b71c1c);
border-radius: 50%;
}
.qa-name {
font-size: 16px; font-weight: 700; color: #222;
}
.qa-status {
margin-top: 2px; font-size: 13px; color: #8a8f95;
}
.qa-status i {
display: inline-block; width: 6px; height: 6px; margin-right: 4px; background: #25d07a; border-radius: 50%; vertical-align: 1px;
}
.qa-close {
width: 30px; height: 30px; margin-left: auto; font-size: 22px; line-height: 28px; text-align: center; color: #9aa0a5; cursor: pointer;
}
.qa-body {
flex: 1 1 0%;
min-height: 0;
padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.qa-row {
display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; animation: qaIn .25s ease both;
}
.qa-row.cs {
justify-content: flex-start;
}
.qa-row.me {
flex-direction: row-reverse; justify-content: flex-start;
}
.qa-ava {
flex: none; width: 36px; height: 36px; font-size: 14px; font-weight: 700; line-height: 36px; text-align: center; color: #fff; border-radius: 50%; user-select: none;
}
.qa-row.cs .qa-ava {
background: linear-gradient(135deg, #f44336, #b71c1c);
}
.qa-row.me .qa-ava {
color: #b71c1c; background: #fdeaea;
}
.qa-bubble {
max-width: 80%; padding: 11px 14px; font-size: 16px; line-height: 1.7; word-break: break-word; text-align: left; white-space: pre-wrap;
}
.qa-row.cs .qa-bubble {
color: #222; background: #fff; border-radius: 0 12px 12px 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.qa-row.me .qa-bubble {
color: #fff; background: linear-gradient(135deg, #f44336, #b71c1c); border-radius: 12px 0 12px 12px;
}
.qa-typing .qa-bubble {
display: flex; align-items: center; gap: 4px; padding: 13px;
}
.qa-typing .qa-bubble i {
width: 6px; height: 6px; background: #c2c8cc; border-radius: 50%; animation: qaDot 1s infinite;
}
.qa-typing .qa-bubble i:nth-child(2) {
animation-delay: .15s;
}
.qa-typing .qa-bubble i:nth-child(3) {
animation-delay: .3s;
}
.qa-opts {
display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 14px 42px; animation: qaIn .25s ease both;
}
.qa-opts .qa-opt {
flex: 1 1 calc(50% - 8px); text-align: center;
}
.qa-opt {
padding: 10px 16px; font-family: inherit; font-size: 15.5px; line-height: 1.3; color: #b71c1c; background: #fff; border: 1px solid #f44336; border-radius: 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); cursor: pointer;
}
.qa-opt:active {
background: #fdeaea; transform: translateY(1px);
}
.qa-opt[disabled] {
color: #b6bcc0; background: #f2f3f4; border-color: #e2e4e6; box-shadow: none;
}
.qa-opt.is-picked {
color: #fff; background: linear-gradient(135deg, #f44336, #b71c1c); border-color: #b71c1c;
}
.qa-confirm {
margin: 2px 0 0 42px; padding: 10px 22px; font-family: inherit; font-size: 15.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #f44336, #b71c1c); border: 0; border-radius: 18px; cursor: pointer;
}
.qa-confirm[disabled] {
opacity: .4; cursor: not-allowed;
}
.qa-cta-row {
padding: 2px 0 10px; animation: qaIn .25s ease both;
}
.qa-cta {
display: block; text-align: center; width: 100%; padding: 14px 18px; font-family: inherit; font-size: 17px; font-weight: 700; letter-spacing: .5px; color: #fff; text-decoration: none; background: linear-gradient(135deg, #f44336, #b71c1c); border: 0; border-radius: 12px; box-shadow: 0 6px 16px rgba(183, 28, 28, .34); cursor: pointer;
}
.qa-cta:active {
transform: translateY(1px);
}
@media (max-width: 360px) {
.qa-bubble {
font-size: 15px;
}
.qa-opt {
padding: 9px 14px; font-size: 14.5px;
}
.qa-cta {
font-size: 16px;
}
}
@keyframes qaIn {
from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); }
}
@keyframes qaDot {
0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); }
}