@charset "utf-8"; /** * main.css —— 天顺传世官网 * * 布局：1rem = 100px（PC 稿 1920x1080 / 移动稿 750x1334），绝对定位，不写 @media。 * 配色：黑金复古。#e0b95c 主金 / #c73a2b 主红 / #e8ddc8 正文。 * 字号：整体比常规网站大一档，传奇玩家年龄偏大，小字看不清。 */ .stage { position: absolute; left: 50%; top: 50%; width: 19.2rem; height: 10.8rem; margin-left: -9.6rem; margin-top: -5.4rem; } .is-mobile .stage { width: 7.5rem; height: 13.34rem; margin-left: -3.75rem; margin-top: -6.67rem; } /* =============================================================== * 整屏容器 * =============================================================== */ .fp-container { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .fp-wrapper { position: relative; top: 0; width: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .fp-slide { position: relative; width: 100%; overflow: hidden; } /* =============================================================== * 出场动画 * =============================================================== */ .fp-fade-up { opacity: 0; -webkit-transform: translateY(0.4rem); -ms-transform: translateY(0.4rem); transform: translateY(0.4rem); -webkit-transition: opacity .7s ease, -webkit-transform .7s ease; -moz-transition: opacity .7s ease, -moz-transform .7s ease; -o-transition: opacity .7s ease, -o-transform .7s ease; transition: opacity .7s ease, transform .7s ease; } .page-ready .fp-active .fp-fade-up { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .fp-delay-1 { -webkit-transition-delay: .10s; transition-delay: .10s; } .fp-delay-2 { -webkit-transition-delay: .22s; transition-delay: .22s; } .fp-delay-3 { -webkit-transition-delay: .34s; transition-delay: .34s; } .fp-delay-4 { -webkit-transition-delay: .46s; transition-delay: .46s; } .no-transition .fp-fade-up { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } /** * 逐帧擦除转场。 * 网易用的是一张手绘 mask 序列图配 steps() 推 mask-position， * 没有素材就用斜向硬边渐变代替，角度跟全站的 skew 对齐。 * 关键是 steps()：一格一格跳出来，而不是平滑淡入，这样才有手作感。 * * 只在 html.has-mask 时生效。IE 全系不支持 mask， * 没有这层选择器保护的话，元素会因为初始 mask 失效而直接整块显示（能接受）， * 但动画属性仍会白跑一遍，干脆整条跳过。 */ .has-mask .wipe-in { -webkit-mask-image: -webkit-linear-gradient(345deg, #000 42%, rgba(0,0,0,0) 42%); mask-image: linear-gradient(105deg, #000 42%, rgba(0,0,0,0) 42%); -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0; } /* has-mask 和 page-ready 都打在 上，是同一个元素，必须连写 */ .has-mask.page-ready .fp-active .wipe-in { -webkit-animation: wipe-in .62s steps(13) .12s forwards; -moz-animation: wipe-in .62s steps(13) .12s forwards; animation: wipe-in .62s steps(13) .12s forwards; } @-webkit-keyframes wipe-in { from { -webkit-mask-position: 100% 0; } to { -webkit-mask-position: 0 0; } } @-moz-keyframes wipe-in { from { mask-position: 100% 0; } to { mask-position: 0 0; } } @keyframes wipe-in { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } } /* =============================================================== * 背景 * =============================================================== */ .slide-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-size: cover; } /** * 顶部压暗遮罩，所有屏通用。 * 尺寸参考网易：前 30% 保持 80% 黑，到 75% 才完全透明，总高远大于顶栏本身， * 这样顶栏文字才能从画面里自然「沉」出来，而不是硬生生压一条色带。 * * 用 :after 而不是 :before —— 伪元素 :before 会排在真实子元素之前， * 会被 .slide-bg 里的背景视频盖住；:after 排在子元素之后，天然在视频之上。 * 也因此不需要 pointer-events:none（IE9/10 不支持它，用上会挡住下方内容的点击）。 */ .slide-bg:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2.61rem; background: -webkit-linear-gradient(top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.8) 30%, rgba(0,0,0,0) 75%); background: -moz-linear-gradient(top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.8) 30%, rgba(0,0,0,0) 75%); background: linear-gradient(to bottom, rgba(0,0,0,.82) 0%, rgba(0,0,0,.8) 30%, rgba(0,0,0,0) 75%); } /* * 首屏底遮罩。目标站 index_zs 是半透明笔刷，不是一条色带。 * 硬边 mask / steps 擦除会切出一条杠，这里只用很长的径向+线性淡出。 */ .kv-floor { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: 6.8rem; opacity: 0; background: -webkit-radial-gradient(50% 100%, ellipse farthest-side, rgba(10,7,4,.5) 0%, rgba(10,7,4,.18) 40%, rgba(10,7,4,0) 78%); background: -moz-radial-gradient(50% 100%, ellipse farthest-side, rgba(10,7,4,.5) 0%, rgba(10,7,4,.18) 40%, rgba(10,7,4,0) 78%); background: radial-gradient(ellipse farthest-side at 50% 100%, rgba(10,7,4,.5) 0%, rgba(10,7,4,.18) 40%, rgba(10,7,4,0) 78%); -webkit-transition: opacity .9s ease .12s; -moz-transition: opacity .9s ease .12s; -o-transition: opacity .9s ease .12s; transition: opacity .9s ease .12s; } .page-ready .fp-active .kv-floor { opacity: 1; } .no-transition .kv-floor { opacity: 1; } /* 首屏：换成实拍主视觉时把最后一层 background 换成 url(img/kv-bg.jpg) 即可 */ .kv-bg { background-color: #0b0805; /* 底部压暗叠在主视觉之上，两层背景 IE9+ 都支持 */ background: -webkit-radial-gradient(68% 38%, ellipse closest-side, #4a3212 0%, #1d1308 45%, #0a0704 100%); background: -moz-radial-gradient(68% 38%, ellipse closest-side, #4a3212 0%, #1d1308 45%, #0a0704 100%); background: linear-gradient(to bottom, rgba(10,7,4,0) 52%, rgba(10,7,4,.92) 100%), radial-gradient(ellipse closest-side at 68% 38%, #4a3212 0%, #1d1308 45%, #0a0704 100%); } .sec-bg { background-color: #0a0704; background: -webkit-linear-gradient(top, #150e07 0%, #0a0704 60%, #120c06 100%); background: -moz-linear-gradient(top, #150e07 0%, #0a0704 60%, #120c06 100%); background: linear-gradient(to bottom, #150e07 0%, #0a0704 60%, #120c06 100%); } .fb-bg { background-color: #0a0704; background-image: url(https://gx.88888888woool.com/tianshun/feedback-bg.jpg?v=20260825bi); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } .contact-bg { background-color: #0a0704; background-image: url(https://gx.88888888woool.com/tianshun/contact-bg.jpg?v=20260825bi); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } /* 特色屏底：游戏内 boss 场景压暗虚化，让面板截图坐在真实场景上 */ .feat-bg { background-color: #0a0704; background-image: url(https://gx.88888888woool.com/tianshun/feature-bg.jpg?v=20260825az); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } /* 攻略屏底：boss 场景的地面放大糊成石纹，只当安静的底，不抢信息 */ .guide-bg { background-color: #0a0704; background-image: url(https://gx.88888888woool.com/tianshun/guide-bg.jpg?v=20260825az); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } /* 新闻屏底：跟其他屏一样铺满视口。石框口子由 placeNewsStage 跟 cover 对齐。 */ .news-bg { background-color: #0a0704; background-image: url(https://gx.88888888woool.com/tianshun/news-bg.jpg?v=20260825ch); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } /* =============================================================== * 顶栏 * =============================================================== */ /* 顶栏本身不再画底色，压暗交给 .slide-bg:after 那层大遮罩 */ .topbar { position: fixed; left: 0; top: 0; width: 100%; height: 1rem; z-index: 100; } .topbar .logo { position: absolute; left: 0.24rem; top: 0.18rem; z-index: 3; width: 1.72rem; height: 0.93rem; cursor: pointer; } .topbar .logo img { display: block; width: 1.72rem; height: 0.93rem; border: 0; } /** * 菜单铺满 logo 到右缘，条目两端对齐、中间均分。 * 遗忘之海用 flex + space-evenly；IE11 不认 space-evenly 会挤到左边。 * 单行 text-align:justify + 末尾 100% 撑条，IE9 就能得到同样的疏朗节奏。 */ .topbar .menu { position: absolute; left: 2.3rem; right: 0.72rem; top: 0.5rem; height: 0.44rem; font-size: 0; line-height: 0; text-align: justify; } .topbar .menu:after { content: ""; display: inline-block; *display: inline; *zoom: 1; width: 100%; height: 0; overflow: hidden; vertical-align: top; } /* 站内七项是 div，站外的「官方论坛」是 ，同一套样式两种标签都要吃得住。 本项目没有全局 a 重置，不去掉下划线的话只有那一项带着一条线。 */ .topbar .menu-item { position: relative; display: inline-block; *display: inline; *zoom: 1; height: 0.44rem; vertical-align: top; cursor: pointer; white-space: nowrap; text-decoration: none; } .topbar .menu-item > p { position: relative; z-index: 1; display: inline-block; *display: inline; *zoom: 1; height: 0.44rem; line-height: 0.44rem; font-size: 0.2rem; color: #fff; -webkit-transition: color .25s ease; -moz-transition: color .25s ease; -o-transition: color .25s ease; transition: color .25s ease; } .topbar .menu-item:hover > p, .topbar .menu-item.on > p { color: #e8c56a; } /** * 选中圈：自己的金线圈图章，尺寸钉死 1.14 × 0.43 rem。 * 对准菜单项中心，字浮在圈洞里；不要 top 负值，否则圈会整块飞到字上面。 * 悬停和当前页都盖同一块。 */ .topbar .menu-item.on:before, .topbar .menu-item:hover:before { content: ""; position: absolute; left: 50%; top: 50%; width: 1.14rem; height: 0.43rem; background: url(https://gx.88888888woool.com/tianshun/nav-mark.png?v=20260825g) no-repeat; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; background-size: 100% auto; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* ---- 手机端汉堡按钮 ---- */ .topbar .btn-nav-m { display: none; } .topbar .btn-nav-m i { display: block; width: 0.44rem; height: 0.04rem; margin-bottom: 0.1rem; background: #e0b95c; } .topbar .btn-nav-m i:last-child { margin-bottom: 0; } /* =============================================================== * 手机端抽屉导航 * 顶栏菜单在手机上放不下，但不能因此让用户没有导航可用 * =============================================================== */ .nav-drawer { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 200; opacity: 0; visibility: hidden; -webkit-transition: opacity .28s ease; transition: opacity .28s ease; } .nav-drawer.open { opacity: 1; visibility: visible; } .nav-drawer .nav-mask { position: absolute; left: 0; top: 0; right: 4.8rem; height: 100%; background: rgba(0, 0, 0, .45); } .nav-drawer .nav-panel { position: absolute; right: 0; top: 0; width: 4.8rem; height: 100%; padding: 1.1rem 0 0.4rem; /* 实色垫底：IE / 安卓 4.4 没有 backdrop-filter，不能透成一块白板 */ background: #1a120c; background: rgba(16, 10, 6, .82); -webkit-backdrop-filter: blur(0.28rem); backdrop-filter: blur(0.28rem); border-left: 0.01rem solid rgba(224, 185, 92, .28); overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform .28s ease; transition: transform .28s ease; } .nav-drawer.open .nav-panel { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .nav-drawer .nav-close { position: absolute; right: 0.3rem; top: 0.3rem; width: 0.6rem; height: 0.6rem; } .nav-drawer .nav-close:before, .nav-drawer .nav-close:after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.4rem; height: 0.04rem; margin: -0.02rem 0 0 -0.2rem; background: #e0b95c; } .nav-drawer .nav-close:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .nav-drawer .nav-close:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .nav-drawer .nav-group { height: 0.72rem; line-height: 0.72rem; padding: 0 0.4rem; margin-top: 0.2rem; font-size: 0.22rem; color: #7f7053; } .nav-drawer a { display: block; height: 0.96rem; line-height: 0.96rem; padding: 0 0.4rem; font-size: 0.3rem; color: #d8c7a0; border-bottom: 0.01rem solid rgba(93, 67, 24, .3); } .nav-drawer a.on { color: #f7e3a1; background: rgba(224, 185, 92, .1); } .nav-drawer a.nav-sub { height: 0.82rem; line-height: 0.82rem; padding-left: 0.66rem; font-size: 0.26rem; color: #a08c68; } /* =============================================================== * 首屏左侧社交。列宽 1.5rem、图标在列里居中： * 离开屏幕左边缘，浮在画面左侧，不要贴边。 * =============================================================== */ .sns { position: absolute; left: 0; bottom: 1.08rem; z-index: 20; width: 1.5rem; } .sns:after { content: ""; display: block; width: 0.28rem; height: 0.02rem; margin: 0.06rem auto 0; background: rgba(195, 177, 140, .45); } .sns .sns-item { display: block; position: relative; width: 1.5rem; height: 0.44rem; margin-bottom: 0.04rem; opacity: 0.82; -webkit-transition: opacity .2s ease; -moz-transition: opacity .2s ease; -o-transition: opacity .2s ease; transition: opacity .2s ease; } .sns .sns-item:hover { opacity: 1; } .sns .sns-item i { display: block; width: 0.32rem; height: 0.32rem; margin: 0.06rem auto 0; background-repeat: no-repeat; background-position: 50% 50%; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; background-size: 100% auto; } .sns .sns-dy { background-image: url(https://gx.88888888woool.com/tianshun/sns-dy.png?v=20260825n); } .sns .sns-wx { background-image: url(https://gx.88888888woool.com/tianshun/sns-wx.png?v=20260825n); } .sns .sns-qw { background-image: url(https://gx.88888888woool.com/tianshun/sns-qw.png?v=20260825n); } .sns .sns-ks { background-image: url(https://gx.88888888woool.com/tianshun/sns-ks.png?v=20260825n); } /* 悬停出来的二维码：和首屏那个下载码同一套 —— 1px 细金边、透明底、中心徽标全在图里烤好了（_dev/make-dl-cta.py 的 style_qr）， 所以这里跟 .kv-dl-qr 一样不加底色、不加边框、不留 padding， 1.30rem 和图的 130px 一比一，金边缩放后才不糊。 */ .sns .sns-qr { display: none; position: absolute; left: 1.02rem; top: 50%; width: 1.30rem; height: 1.30rem; margin-top: -0.65rem; } .sns .sns-qr img { display: block; width: 100%; height: 100%; border: 0; } .sns .has-qr:hover .sns-qr { display: block; } .no-transition .sns .sns-item { opacity: 1; } /* 分割线下面的国标适龄牌。自制，不抄网易切图。 */ .sns-age { position: absolute; left: 0.54rem; bottom: 0.44rem; z-index: 20; width: 0.42rem; height: 0.54rem; background: url(https://gx.88888888woool.com/tianshun/sns-age.png?v=20260825n) no-repeat; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-size: 100% 100%; } /* 微信二维码弹层：只有四角金标 + 一句说明，盒子本身不填底色。 码是透明底的，填了底色就成了一块方方正正的深色板子压在暗罩上， 和首屏下载码那种「背景直接透过来」不是一个东西。暗罩已经把背后压暗了，够看清。 */ .qr-pop { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 210; } .qr-pop.on { display: block; } .qr-pop-mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: .78; filter: alpha(opacity=78); } .qr-pop-box { position: absolute; left: 50%; top: 50%; width: 3.04rem; margin: -1.86rem 0 0 -1.52rem; padding: 0.24rem 0.22rem 0.16rem; text-align: center; } .qr-c { display: block; overflow: hidden; position: absolute; width: 0.2rem; height: 0.2rem; border: 0 solid #e0b95c; pointer-events: none; } .qr-c-tl { left: 0; top: 0; border-left-width: 0.03rem; border-top-width: 0.03rem; } .qr-c-tr { right: 0; top: 0; border-right-width: 0.03rem; border-top-width: 0.03rem; } .qr-c-bl { left: 0; bottom: 0; border-left-width: 0.03rem; border-bottom-width: 0.03rem; } .qr-c-br { right: 0; bottom: 0; border-right-width: 0.03rem; border-bottom-width: 0.03rem; } /* 不垫浅底：金边、透明底、中心徽标都烤在图里了，和首屏下载码同一套。 2.6rem 对上 qr-wechat-pop.png 的 260px，放大会把 1px 金边糊掉。 */ .qr-pop-pic { width: 2.6rem; height: 2.6rem; margin: 0 auto; } .qr-pop-pic img { display: block; width: 100%; height: 100%; border: 0; } .qr-pop-box p { height: 0.48rem; line-height: 0.48rem; margin-top: 0.08rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.2rem; color: #e0b95c; } /* =============================================================== * 进站弹层。结构对齐 xy2：暗罩 + 金边 16:9 视频 + 底卷轴 + 右上细金圈关闭。 * 不用 opacity 做显隐。不用 flex 居中。尺寸按 1920 稿：1rem = 100px。 * =============================================================== */ .wp-pop { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 240; } .wp-pop.on { display: block; } /* 对齐 xy2：罩 0.3s 淡入，框从 0.5 倍缩到 1、0.5s ease。静态度是可见的，老引擎没有 animation 也不会透明死掉。 */ .wp-mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: .7; filter: alpha(opacity=70); } .wp-pop.in .wp-mask { -webkit-animation: wpFadeIn .3s ease-in-out forwards; -moz-animation: wpFadeIn .3s ease-in-out forwards; animation: wpFadeIn .3s ease-in-out forwards; } .wp-box { position: absolute; left: 50%; top: 50%; width: 9.30rem; height: 7.06rem; margin: -3.73rem 0 0 -4.65rem; opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; } .wp-pop.in .wp-box { -webkit-animation: wpPopIn .5s ease forwards; -moz-animation: wpPopIn .5s ease forwards; animation: wpPopIn .5s ease forwards; } .no-transition .wp-pop.in .wp-mask, .no-transition .wp-pop.in .wp-box { -webkit-animation: none; -moz-animation: none; animation: none; -webkit-transform: none; -ms-transform: none; transform: none; } .no-transition .wp-pop.in .wp-mask { opacity: .7; filter: alpha(opacity=70); } .no-transition .wp-pop.in .wp-box { opacity: 1; } @-webkit-keyframes wpFadeIn { 0% { opacity: 0; } 100% { opacity: 0.7; } } @-moz-keyframes wpFadeIn { 0% { opacity: 0; } 100% { opacity: 0.7; } } @keyframes wpFadeIn { 0% { opacity: 0; } 100% { opacity: 0.7; } } @-webkit-keyframes wpPopIn { 0% { opacity: 0; -webkit-transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); } } @-moz-keyframes wpPopIn { 0% { opacity: 0; -moz-transform: scale(0.5); } 100% { opacity: 1; -moz-transform: scale(1); } } @keyframes wpPopIn { 0% { opacity: 0; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .wp-video { position: relative; width: 9.30rem; height: 5.26rem; overflow: hidden; background: #000; border: 2px solid #d0bb94; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .wp-video-el { display: block; width: 100%; height: 100%; background: #000; } .wp-video .media-poster { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .wp-scroll { display: block; position: absolute; left: 50%; top: 5.18rem; z-index: 2; width: 9.57rem; height: 1.88rem; margin-left: -4.785rem; background: url(https://gx.88888888woool.com/tianshun/welcome-scroll.png?v=20260830b) no-repeat center top; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-size: 100% 100%; cursor: pointer; } .wp-scroll:after { content: ""; position: absolute; right: 0.65rem; top: 1.05rem; width: 0.52rem; height: 0.62rem; background: url(https://gx.88888888woool.com/tianshun/welcome-hand.png?v=20260826y) no-repeat center center; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-size: 100% 100%; pointer-events: none; -webkit-animation: wpHand 1.5s linear infinite alternate; -moz-animation: wpHand 1.5s linear infinite alternate; animation: wpHand 1.5s linear infinite alternate; } .no-transition .wp-scroll:after { -webkit-animation: none; -moz-animation: none; animation: none; } @-webkit-keyframes wpHand { 0% { -webkit-transform: translate(0, 0); } 100% { -webkit-transform: translate(10px, 10px); } } @-moz-keyframes wpHand { 0% { -moz-transform: translate(0, 0); } 100% { -moz-transform: translate(10px, 10px); } } @keyframes wpHand { 0% { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(10px, 10px); -ms-transform: translate(10px, 10px); transform: translate(10px, 10px); } } .wp-close { position: absolute; right: -0.70rem; top: 0; z-index: 3; width: 0.60rem; height: 0.61rem; background: url(https://gx.88888888woool.com/tianshun/welcome-close.png?v=20260826y) no-repeat center center; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-size: 100% 100%; cursor: pointer; -webkit-transition: -webkit-transform .5s ease; -moz-transition: -moz-transform .5s ease; -ms-transition: -ms-transform .5s ease; -o-transition: -o-transform .5s ease; transition: transform .5s ease; } .wp-close:hover { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } .no-transition .wp-close { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } /* 打开声音：不要跟关钮做一对金圈挂在角上——没字，玩家不知道点它干什么。 做成画面下沿正中一颗带字金边钮，「点击取消静音」写在钮上。 高度停在卷轴叠上视频之前（卷轴 top:5.18，视频高 5.26），不挡脸。 */ .wp-sound { display: none; position: absolute; left: 50%; bottom: 0.28rem; z-index: 3; width: 2.56rem; height: 0.54rem; margin-left: -1.28rem; line-height: 0.54rem; text-align: center; font-size: 0.24rem; color: #ffe9a8; text-decoration: none; cursor: pointer; background: #1a120c; border: 1px solid #d0bb94; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .wp-pop.need-sound .wp-sound { display: block; -webkit-animation: wpSoundPulse 1.4s ease-in-out infinite alternate; -moz-animation: wpSoundPulse 1.4s ease-in-out infinite alternate; animation: wpSoundPulse 1.4s ease-in-out infinite alternate; } .wp-sound:hover { color: #fff6d0; background: #2a1c10; -webkit-animation: none; -moz-animation: none; animation: none; } .no-transition .wp-pop.need-sound .wp-sound { -webkit-animation: none; -moz-animation: none; animation: none; } @-webkit-keyframes wpSoundPulse { 0% { opacity: 0.88; } 100% { opacity: 1; } } @-moz-keyframes wpSoundPulse { 0% { opacity: 0.88; } 100% { opacity: 1; } } @keyframes wpSoundPulse { 0% { opacity: 0.88; } 100% { opacity: 1; } } /* =============================================================== * 首屏 CTA * 中码、左右各两钮、模拟器垫底。整组 6.12，居中贴龙嘴下地面。 * 精灵五帧：电脑 / 安卓 / 苹果 / 鸿蒙 / 模拟器，帧高 0.57，间隔 0.01。 * * 自己调间距（只改下面这些数，1rem = 100px）： * * 1) 整组相对龙嘴 * .kv-dls 的 left 越大越往右，越小越往左 * .kv-dls 的 bottom 越大越往上，越小越往下 * 目前 left:6.54 是水平居中 = (19.2 - 6.12) / 2 * * 2) 码和左右钮之间的横缝（现在 0.32） * 加大横缝：.kv-dl-qr 的 left 加大，.kv-dl-ios / .kv-dl-harmony 的 left 再加大一截 * 同时把 .kv-dls、.kv-dl-btns 的 width 加大同样的量，left 减小一半才能保持居中 * * 3) 同一列两个钮之间的竖缝（现在 0.16，钮高 0.57，所以 top 是 0.73） * 只改 .kv-dl-android、.kv-dl-harmony 的 top * * 4) 码/侧钮 和底下模拟器之间的竖缝（现在 0.16，码高 1.30，所以 emu 的 top 是 1.46） * 只改 .kv-dl-emu 的 top * 若缝大到超出盒子，把 .kv-dls、.kv-dl-btns 的 height 加大 * * 钮本身宽高不要改（2.09 × 0.57），那是精灵图一帧的尺寸。 * 改完硬刷新，或把 index.html 里所有 ?v= 加一号，否则会看到旧 CSS。 * =============================================================== */ .kv-dls { position: absolute; left: 6.54rem; right: auto; bottom: 0.04rem; z-index: 20; width: 6.12rem; height: 2.03rem; margin-left: 0; } .kv-dl-qr { position: absolute; left: 2.41rem; top: 0; width: 1.30rem; height: 1.30rem; } .kv-dl-qr img { display: block; width: 100%; height: 100%; border: 0; } .kv-dl-btns { position: absolute; left: 0; right: auto; top: 0; width: 6.12rem; height: 2.03rem; } .kv-dl-btn { display: block; position: absolute; width: 2.09rem; height: 0.57rem; overflow: hidden; background: url(https://gx.88888888woool.com/tianshun/dl-down.png?v=20260826ab) no-repeat; -webkit-background-size: 2.09rem 2.89rem; -moz-background-size: 2.09rem 2.89rem; background-size: 2.09rem 2.89rem; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-transition: -webkit-box-shadow .3s ease; -moz-transition: box-shadow .3s ease; -o-transition: box-shadow .3s ease; transition: box-shadow .3s ease; } .kv-dl-pc { left: 0; top: 0; background-position: 0 0; } .kv-dl-android { left: 0; top: 0.73rem; background-position: 0 -0.58rem; } .kv-dl-ios { left: 4.03rem; top: 0; background-position: 0 -1.16rem; } .kv-dl-harmony { left: 4.03rem; top: 0.73rem; background-position: 0 -1.74rem; } .kv-dl-emu { left: 2.02rem; top: 1.46rem; background-position: 0 -2.32rem; } .kv-dl-btn:hover { -webkit-box-shadow: 0 0 0.05rem rgba(224,180,92,.40); -moz-box-shadow: 0 0 0.05rem rgba(224,180,92,.40); box-shadow: 0 0 0.05rem rgba(224,180,92,.40); -webkit-filter: brightness(1.2); filter: brightness(1.2); } .is-ie .kv-dl-btn:hover { filter: none; } .no-transition .kv-dl-btn { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } /* 四边走光：目标站 .light-1 ~ .light-4，3s 一圈，手机钮错开 1.5s */ .kv-dl-light { display: block; position: absolute; -webkit-box-shadow: 0 0 0.04rem #e0b45c; -moz-box-shadow: 0 0 0.04rem #e0b45c; box-shadow: 0 0 0.04rem #e0b45c; } .kv-dl-l1 { top: 0; left: 0; width: 0.80rem; height: 0.01rem; background: -webkit-linear-gradient(left, rgba(224,180,92,0) 0%, #e0b45c 50%, rgba(224,180,92,0) 100%); background: -moz-linear-gradient(left, rgba(224,180,92,0) 0%, #e0b45c 50%, rgba(224,180,92,0) 100%); background: linear-gradient(90deg, rgba(224,180,92,0) 0%, #e0b45c 50%, rgba(224,180,92,0) 100%); -webkit-animation: kv-dl-move1 3s ease-out infinite; -moz-animation: kv-dl-move1 3s ease-out infinite; animation: kv-dl-move1 3s ease-out infinite; } .kv-dl-l2 { top: 0; right: 0; width: 0.01rem; height: 0.50rem; opacity: 0; background: -webkit-linear-gradient(bottom, rgba(224,180,92,0) 0%, #e0b45c 50%, rgba(224,180,92,0) 100%); background: -moz-linear-gradient(bottom, rgba(224,180,92,0) 0%, #e0b45c 50%, rgba(224,180,92,0) 100%); background: linear-gradient(0deg, rgba(224,180,92,0) 0%, #e0b45c 50%, rgba(224,180,92,0) 100%); -webkit-animation: kv-dl-move2 3s linear infinite; -moz-animation: kv-dl-move2 3s linear infinite; animation: kv-dl-move2 3s linear infinite; } .kv-dl-l3 { bottom: 0; left: 0; width: 0.80rem; height: 0.01rem; background: -webkit-linear-gradient(left, rgba(224,180,92,0) 0%, #e0b45c 50%, rgba(224,180,92,0) 100%); background: -moz-linear-gradient(left, rgba(224,180,92,0) 0%, #e0b45c 50%, rgba(224,180,92,0) 100%); background: linear-gradient(90deg, rgba(224,180,92,0) 0%, #e0b45c 50%, rgba(224,180,92,0) 100%); -webkit-animation: kv-dl-move3 3s linear infinite; -moz-animation: kv-dl-move3 3s linear infinite; animation: kv-dl-move3 3s linear infinite; } .kv-dl-l4 { top: 0; left: 0; width: 0.01rem; height: 0.50rem; opacity: 0; background: -webkit-linear-gradient(bottom, rgba(224,180,92,0) 0%, #e0b45c 50%, rgba(224,180,92,0) 100%); background: -moz-linear-gradient(bottom, rgba(224,180,92,0) 0%, #e0b45c 50%, rgba(224,180,92,0) 100%); background: linear-gradient(0deg, rgba(224,180,92,0) 0%, #e0b45c 50%, rgba(224,180,92,0) 100%); -webkit-animation: kv-dl-move4 3s linear infinite; -moz-animation: kv-dl-move4 3s linear infinite; animation: kv-dl-move4 3s linear infinite; } .kv-dl-android .kv-dl-light, .kv-dl-ios .kv-dl-light, .kv-dl-harmony .kv-dl-light, .kv-dl-emu .kv-dl-light { opacity: 0; } .kv-dl-android .kv-dl-l1, .kv-dl-android .kv-dl-l2, .kv-dl-android .kv-dl-l3, .kv-dl-android .kv-dl-l4 { -webkit-animation-delay: .5s; -moz-animation-delay: .5s; animation-delay: .5s; } .kv-dl-ios .kv-dl-l1, .kv-dl-ios .kv-dl-l2, .kv-dl-ios .kv-dl-l3, .kv-dl-ios .kv-dl-l4 { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; } .kv-dl-harmony .kv-dl-l1, .kv-dl-harmony .kv-dl-l2, .kv-dl-harmony .kv-dl-l3, .kv-dl-harmony .kv-dl-l4 { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; animation-delay: 1.5s; } .kv-dl-emu .kv-dl-l1, .kv-dl-emu .kv-dl-l2, .kv-dl-emu .kv-dl-l3, .kv-dl-emu .kv-dl-l4 { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; } .no-transition .kv-dl-light { display: none; } @-webkit-keyframes kv-dl-move1 { 0% { left: 0; opacity: 1; } 20% { left: 100%; } 100% { left: 100%; } } @-moz-keyframes kv-dl-move1 { 0% { left: 0; opacity: 1; } 20% { left: 100%; } 100% { left: 100%; } } @keyframes kv-dl-move1 { 0% { left: 0; opacity: 1; } 20% { left: 100%; } 100% { left: 100%; } } @-webkit-keyframes kv-dl-move2 { 0% { right: 0; top: -90%; opacity: 0; } 10% { right: 0; top: -90%; opacity: 1; } 30% { right: 0; top: 175%; opacity: 1; } 100% { right: 0; top: 175%; opacity: 1; } } @-moz-keyframes kv-dl-move2 { 0% { right: 0; top: -90%; opacity: 0; } 10% { right: 0; top: -90%; opacity: 1; } 30% { right: 0; top: 175%; opacity: 1; } 100% { right: 0; top: 175%; opacity: 1; } } @keyframes kv-dl-move2 { 0% { right: 0; top: -90%; opacity: 0; } 10% { right: 0; top: -90%; opacity: 1; } 30% { right: 0; top: 175%; opacity: 1; } 100% { right: 0; top: 175%; opacity: 1; } } @-webkit-keyframes kv-dl-move3 { 0% { left: 100%; bottom: 0; opacity: 1; } 20% { left: 100%; bottom: 0; } 36% { left: -48%; bottom: 0; } 100% { left: -48%; bottom: 0; } } @-moz-keyframes kv-dl-move3 { 0% { left: 100%; bottom: 0; opacity: 1; } 20% { left: 100%; bottom: 0; } 36% { left: -48%; bottom: 0; } 100% { left: -48%; bottom: 0; } } @keyframes kv-dl-move3 { 0% { left: 100%; bottom: 0; opacity: 1; } 20% { left: 100%; bottom: 0; } 36% { left: -48%; bottom: 0; } 100% { left: -48%; bottom: 0; } } @-webkit-keyframes kv-dl-move4 { 0% { left: 0; top: 175%; opacity: 0; } 20% { left: 0; top: 175%; opacity: 1; } 50% { left: 0; top: -90%; opacity: .6; } 100% { left: 0; top: -90%; opacity: 0; } } @-moz-keyframes kv-dl-move4 { 0% { left: 0; top: 175%; opacity: 0; } 20% { left: 0; top: 175%; opacity: 1; } 50% { left: 0; top: -90%; opacity: .6; } 100% { left: 0; top: -90%; opacity: 0; } } @keyframes kv-dl-move4 { 0% { left: 0; top: 175%; opacity: 0; } 20% { left: 0; top: 175%; opacity: 1; } 50% { left: 0; top: -90%; opacity: .6; } 100% { left: 0; top: -90%; opacity: 0; } } /* =============================================================== * 通用标题 * =============================================================== */ /** * 各屏大标题：端正黑体 + 左侧金杠。 * 英文是旁边一行小字，不斜、不叠、不旋转。 */ .sec-title { position: absolute; left: 1.3rem; top: 1.3rem; z-index: 0; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.52rem; font-weight: bold; font-style: normal; letter-spacing: 0.06rem; color: #f2d98f; white-space: nowrap; } /* 左侧斜切短杠，和全站形状语言呼应 */ .sec-title:before { content: ""; position: absolute; left: -0.32rem; top: 0.1rem; width: 0.07rem; height: 0.42rem; background: #e0b95c; -webkit-transform: skewX(-12deg); -ms-transform: skewX(-12deg); transform: skewX(-12deg); } .sec-title em { margin-left: 0.18rem; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 0.18rem; font-style: normal; font-weight: normal; letter-spacing: 0.12rem; color: #7d6c4c; text-transform: uppercase; vertical-align: 0.06rem; } /* =============================================================== * 通用按钮与空态 * * 这两个类名带 srv- 前缀是历史原因：早先有一屏开服表，它们是那张表里的 * 「进入游戏」按钮和空列表提示。表撤掉后这两样被全站复用了 —— * .srv-btn 现在是客服屏的「加好友」，.srv-empty 是所有列表的加载中 / 暂无内容， * 新闻、攻略、玩家谏言三屏都在用。名字先不动，改名要同时动 index.html 和三个 js。 * =============================================================== */ .srv-btn { position: relative; z-index: 0; display: inline-block; *display: inline; *zoom: 1; width: 1.5rem; height: 0.5rem; line-height: 0.5rem; text-align: center; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.18rem; font-weight: bold; font-style: normal; color: #2a1a06; -webkit-transition: opacity .2s ease; transition: opacity .2s ease; } .srv-btn:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; background: -webkit-linear-gradient(top, #f7e3a1 0%, #d9a83f 100%); background: -moz-linear-gradient(top, #f7e3a1 0%, #d9a83f 100%); background: linear-gradient(to bottom, #f7e3a1 0%, #d9a83f 100%); -webkit-transform: skewX(-12deg); -ms-transform: skewX(-12deg); transform: skewX(-12deg); } .srv-btn:hover { opacity: .85; } .srv-btn.disabled { color: #9a9188; cursor: not-allowed; } .srv-btn.disabled:before { background: #4a4038; } .srv-empty { padding: 1.2rem 0; text-align: center; font-size: 0.2rem; color: #6f6046; } /* =============================================================== * 版本特色 * =============================================================== */ /** * 版本特色：左边展签，右边游戏面板当展品，底栏铜金页签切换。 * * 面板截图是游戏里固定像素的 UI，最大 865px 宽，放大就糊， * 所以图一律 1:1 呈现（.shot-* 的尺寸就是原始像素）， * 右侧留一块 8.7×6.5 的位置装最大那张，小的居中放，不拉伸。 * * 底栏以后会超过三个：页签白空不换行，多了先藏住溢出，不要把箭头挤换行。 */ .feat-cons { position: absolute; left: 1.3rem; top: 2.48rem; width: 16.6rem; height: 6.5rem; } .feat-item { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); visibility: hidden; z-index: 0; -webkit-transition: opacity .35s ease; -moz-transition: opacity .35s ease; -o-transition: opacity .35s ease; transition: opacity .35s ease; } .feat-item.on { opacity: 1; filter: alpha(opacity=100); visibility: visible; z-index: 2; } .no-transition .feat-item { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .feat-txt { position: absolute; left: 0; top: 0.18rem; width: 6.9rem; } .feat-kicker { display: block; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 0.16rem; font-style: normal; font-weight: normal; letter-spacing: 0.16rem; color: #7d6c4c; } .feat-txt h3 { margin-top: 0.12rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.46rem; font-weight: bold; font-style: normal; letter-spacing: 0.04rem; color: #f2d98f; } .feat-txt p { margin-top: 0.22rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.2rem; line-height: 0.36rem; color: #b8a680; } .feat-txt ul { margin-top: 0.28rem; } .feat-txt li { margin-bottom: 0.16rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.2rem; line-height: 0.34rem; color: #d8c7a0; } .feat-txt li b { display: inline-block; *display: inline; *zoom: 1; width: 1.3rem; vertical-align: top; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-weight: bold; font-style: normal; color: #8d7b58; } /* 图在这块区域里垂直居中：line-height + vertical-align，不用 flex */ .feat-pane { position: absolute; left: 7.6rem; top: 0; width: 8.7rem; height: 6.5rem; line-height: 6.5rem; text-align: center; font-size: 0; } .feat-shot { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; -webkit-box-shadow: 0 0.08rem 0.36rem rgba(0,0,0,.72); box-shadow: 0 0.08rem 0.36rem rgba(0,0,0,.72); } .shot-1 { width: 7.27rem; height: 4.81rem; } .shot-2 { width: 4.65rem; height: 5.58rem; } .shot-3 { width: 7.76rem; height: 5.07rem; } /* 底栏坐在发光地砖上，必须自己垫一层暗底，否则金页签会糊进符文 */ .feat-rail { position: absolute; left: 1.3rem; top: 9.12rem; z-index: 3; width: 16.6rem; height: 0.72rem; } .feat-rail:before { content: ""; position: absolute; left: -0.16rem; top: 0; width: 16.92rem; height: 0.72rem; background: #0a0704; background: rgba(10,7,4,.72); } .feat-arrow { position: absolute; top: 0; z-index: 1; width: 0.56rem; height: 0.72rem; line-height: 0.72rem; text-align: center; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 0.36rem; font-style: normal; color: #e0b95c; cursor: pointer; -webkit-transition: color .2s ease, opacity .2s ease; -moz-transition: color .2s ease, opacity .2s ease; -o-transition: color .2s ease, opacity .2s ease; transition: color .2s ease, opacity .2s ease; } .feat-prev { left: 0; } .feat-next { right: 0; } .feat-arrow:hover { color: #f2d98f; } .no-transition .feat-arrow { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } /* 16.6 - 0.56×2 = 15.48，页签区取 15.16，两侧各留一点，避免和箭头贴死 */ .feat-tabs { position: absolute; left: 0.72rem; top: 0; z-index: 1; width: 15.16rem; height: 0.72rem; line-height: 0.72rem; overflow: hidden; white-space: nowrap; text-align: center; font-size: 0; } /* 装不下时由 JS 挂上：居中会把溢出分到左右两边，左边那截 scrollLeft 滚不回来 */ .feat-tabs.rail-left { text-align: left; } .feat-tab { position: relative; z-index: 0; display: inline-block; *display: inline; *zoom: 1; height: 0.72rem; line-height: 0.72rem; padding: 0 0.32rem; margin: 0 0.06rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.22rem; font-style: normal; font-weight: bold; color: #8d7b58; cursor: pointer; } .feat-tab:hover { color: #e8c56a; } .feat-tab.on { color: #e8c56a; } .feat-tab.on:before, .feat-tab:hover:before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 1.14rem; height: 0.43rem; margin-left: -0.57rem; margin-top: -0.215rem; background: url(https://gx.88888888woool.com/tianshun/nav-mark.png?v=20260825g) no-repeat; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; background-size: 100% auto; } /* =============================================================== * 游戏攻略：开荒路线是一条可横翻的轴，一屏露出四步； * 每步封面一张，点开后按 shots 连成图册翻。 * 每日日程横在下面。不做 tab：版本特色已经是底栏页签切换。 * =============================================================== */ .guide-route { position: absolute; left: 1.3rem; top: 2.5rem; width: 16.6rem; } .guide-daily { position: absolute; left: 1.3rem; top: 7.52rem; width: 16.6rem; } /* 分栏小标题：比 sec-title 小两号，后面挂一句灰字说明 */ .guide-h { position: relative; padding-left: 0.24rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.28rem; font-weight: bold; font-style: normal; letter-spacing: 0.02rem; color: #f2d98f; } .guide-h:before { content: ""; position: absolute; left: 0; top: 0.07rem; width: 0.05rem; height: 0.26rem; background: #e0b95c; -webkit-transform: skewX(-12deg); -ms-transform: skewX(-12deg); transform: skewX(-12deg); } .guide-h i { margin-left: 0.2rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.18rem; font-style: normal; letter-spacing: 0; color: #7d6c4c; } .guide-more { position: absolute; right: 0; top: 0.05rem; font-size: 0.19rem; color: #8d7b58; -webkit-transition: color .2s ease; transition: color .2s ease; } .guide-more:hover { color: #e0b95c; } .guide-prev, .guide-next { position: absolute; top: 0.05rem; font-size: 0.19rem; color: #8d7b58; cursor: pointer; } .guide-next { right: 3.4rem; } .guide-prev { right: 5.2rem; } .guide-prev:hover, .guide-next:hover { color: #e0b95c; } .guide-route.is-short .guide-prev, .guide-route.is-short .guide-next { display: none; } .guide-prev.off, .guide-next.off { color: #5a4c38; cursor: default; } /* 一屏只露四步，多出来的在轨道里，靠 left 平移。轴画在轨道上，跟着步骤走 */ .guide-steps { position: relative; overflow: hidden; width: 16.6rem; margin-top: 0.32rem; font-size: 0; white-space: nowrap; } .guide-track { position: relative; left: 0; display: inline-block; *display: inline; *zoom: 1; padding-top: 0.2rem; font-size: 0; white-space: nowrap; -webkit-transition: left .28s ease; transition: left .28s ease; } .no-transition .guide-track { -webkit-transition: none; transition: none; } .guide-track:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.01rem; background: rgba(224,185,92,.2); } /* 每步 3.94，缝 0.28，四步 16.6。用右边距而不用左边距，平移步长才是整齐的 4.22 */ .guide-step { position: relative; display: inline-block; *display: inline; *zoom: 1; width: 3.94rem; margin-right: 0.28rem; vertical-align: top; font-size: 0.2rem; cursor: pointer; white-space: normal; } .guide-step:last-child { margin-right: 0; } .guide-step:before { content: ""; position: absolute; left: 0; top: -0.25rem; width: 0.11rem; height: 0.11rem; background: #e0b95c; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .guide-step b { display: block; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.22rem; font-weight: bold; letter-spacing: 0.02rem; color: #e0b95c; } /* 图 390×244，显示尺寸只放大 1%，面板里的小字仍然认得出来 */ .guide-pic { display: block; position: relative; margin-top: 0.14rem; } .guide-shot { display: block; width: 3.94rem; height: 2.46rem; border: 0.01rem solid rgba(224,185,92,.22); opacity: .9; filter: alpha(opacity=90); -webkit-transition: opacity .25s ease, border-color .25s ease; transition: opacity .25s ease, border-color .25s ease; } .guide-pic i { position: absolute; right: 0.08rem; bottom: 0.08rem; height: 0.28rem; line-height: 0.28rem; padding: 0 0.1rem; font-size: 0.16rem; font-style: normal; color: #f2d98f; background: rgba(10,7,4,.72); } .guide-step:hover .guide-shot { border-color: rgba(224,185,92,.55); opacity: 1; filter: alpha(opacity=100); } .guide-step em { display: block; margin-top: 0.16rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.26rem; font-style: normal; font-weight: bold; color: #f0e2c0; } .guide-step span { display: block; margin-top: 0.1rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.18rem; line-height: 0.32rem; color: #9d8c6a; } /* 日程跟开荒路线同一条轴：金线 + 菱形节点，不要再套一层金框。 七格 2.32×7=16.24，余量 0.36。字靠 text-shadow 从发光地砖里抬出来。 */ .guide-times { position: relative; margin-top: 0.22rem; padding-top: 0.2rem; font-size: 0; } .guide-times:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.01rem; background: rgba(224,185,92,.2); } .guide-time { position: relative; display: inline-block; *display: inline; *zoom: 1; width: 2.32rem; padding-top: 0.08rem; vertical-align: top; font-size: 0.2rem; cursor: pointer; } .guide-time:before { content: ""; position: absolute; left: 0; top: -0.25rem; width: 0.11rem; height: 0.11rem; background: #6f6047; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .guide-time:hover b { color: #e0b95c; } .guide-time b { display: block; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.24rem; font-weight: bold; letter-spacing: 0.02rem; color: #c4b489; text-shadow: 0 0.01rem 0.04rem #0a0704, 0 0 0.08rem #0a0704; } .guide-time em { display: block; margin-top: 0.06rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.2rem; font-style: normal; color: #b8a680; text-shadow: 0 0.01rem 0.04rem #0a0704, 0 0 0.08rem #0a0704; } .guide-time i { display: block; margin-top: 0.04rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.16rem; font-style: normal; color: #6f6047; text-shadow: 0 0.01rem 0.04rem #0a0704, 0 0 0.08rem #0a0704; } .guide-time.is-next:before { background: #e0b95c; } .guide-time.is-next b { color: #f7e6ab; } .guide-time.is-next em { color: #f2d98f; } .guide-time.is-next i { display: none; } .guide-time.is-next span { display: block; margin-top: 0.04rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.16rem; color: #e0b95c; text-shadow: 0 0.01rem 0.04rem #0a0704, 0 0 0.08rem #0a0704; } /* 点中的那场：倒计时也只是一句字，不要描边胶囊 */ .guide-time.is-on i { display: none; } .guide-time.is-on span { display: block; margin-top: 0.04rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.16rem; color: #e0b95c; text-shadow: 0 0.01rem 0.04rem #0a0704, 0 0 0.08rem #0a0704; } /* =============================================================== * 攻略配图弹层。fixed 在整屏容器外面，不受翻页 translate 影响。 * 不用 opacity 做显隐：老引擎一旦 transition 没跑完，会永远透明。 * =============================================================== */ .lb { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 180; } .lb.on { display: block; } .lb-mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: .78; filter: alpha(opacity=78); } /* 7.8 × 4.88 是大图常用尺寸；更小的源图按自然像素折成 rem，坐在框里居中，不拉大 */ .lb-box { position: absolute; left: 50%; top: 50%; width: 7.8rem; height: 5.52rem; margin: -2.76rem 0 0 -3.9rem; } .lb-frame { width: 7.8rem; height: 4.88rem; line-height: 4.88rem; text-align: center; font-size: 0; background: #0a0704; border: 0.01rem solid rgba(224,185,92,.35); } .lb-img { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; width: 7.8rem; height: 4.88rem; } .lb-cap { position: relative; height: 0.56rem; line-height: 0.56rem; padding: 0 1.2rem; text-align: center; font-size: 0.22rem; color: #f0e2c0; } .lb-cap b { margin-right: 0.16rem; font-weight: normal; letter-spacing: 0.04rem; color: #e0b95c; } .lb-cap em { font-style: normal; } .lb-cap i { margin-left: 0.12rem; font-style: normal; font-size: 0.18rem; color: #8d7b58; } .lb-prev, .lb-next { position: absolute; top: 0; font-size: 0.2rem; color: #8d7b58; cursor: pointer; -webkit-transition: color .2s ease; transition: color .2s ease; } .lb-prev { left: 0; } .lb-next { right: 0; } .lb-prev:hover, .lb-next:hover { color: #e0b95c; } .lb-close { position: absolute; right: -0.08rem; top: -0.56rem; width: 0.44rem; height: 0.44rem; cursor: pointer; } .lb-close:before, .lb-close:after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.32rem; height: 0.03rem; margin: -0.015rem 0 0 -0.16rem; background: #e0b95c; } .lb-close:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .lb-close:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } /* =============================================================== * 新闻：左列表 + 右 16:9 视频。标题跟其他屏同一套金杠黑体。 * =============================================================== */ /* 标题跟其他屏同一套：金杠 + 端正黑体，英文不旋转。 */ .news-head { position: absolute; left: 1.3rem; top: 2.18rem; z-index: 3; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.52rem; font-weight: bold; font-style: normal; letter-spacing: 0.06rem; color: #f2d98f; white-space: nowrap; } .news-head:before { content: ""; position: absolute; left: -0.32rem; top: 0.1rem; width: 0.07rem; height: 0.42rem; background: #e0b95c; -webkit-transform: skewX(-12deg); -ms-transform: skewX(-12deg); transform: skewX(-12deg); } .news-head em { display: inline-block; *display: inline; *zoom: 1; margin-left: 0.18rem; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 0.18rem; font-style: normal; font-weight: normal; letter-spacing: 0.12rem; color: #7d6c4c; text-transform: uppercase; vertical-align: 0.06rem; } .news-left { position: absolute; left: 1.3rem; top: 2.92rem; width: 7.4rem; } .news-tabs { height: 0.56rem; padding-left: 0.12rem; font-size: 0; } .news-tab { position: relative; z-index: 0; display: inline-block; *display: inline; *zoom: 1; height: 0.56rem; line-height: 0.56rem; padding: 0 0.22rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.22rem; font-style: normal; font-weight: bold; color: #fff; cursor: pointer; } .news-tab:hover { color: #e8c56a; } .news-tab.on { color: #e8c56a; } .news-tab.on:before, .news-tab:hover:before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 1.14rem; height: 0.43rem; margin-left: -0.57rem; margin-top: -0.215rem; background: url(https://gx.88888888woool.com/tianshun/nav-mark.png?v=20260825g) no-repeat; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; background-size: 100% auto; } .news-list { width: 6.86rem; height: 4rem; margin-top: 0.12rem; padding-left: 0.56rem; overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-touch-action: pan-y; touch-action: pan-y; -ms-overflow-style: none; scrollbar-width: none; } .news-list::-webkit-scrollbar { width: 0; height: 0; } .news-list .item { display: block; position: relative; height: 0.8rem; line-height: 0.8rem; padding: 0 0.2rem; border-bottom: 0.01rem solid rgba(180,180,180,.28); font-size: 0.2rem; color: #b3b3b3; } .news-list .item:hover, .news-list .item.on { color: #fff; font-weight: bold; } /* url 和 id 都没填的条目：渲染成 div 不是 a，悬停态也要一并收掉， 否则它看着还是能点，点了却没反应 */ .news-list .item-off { cursor: default; } .news-list .item-off:hover { color: #b3b3b3; font-weight: normal; } .news-list .item-off:hover:after { display: none; } .news-list .item-off:hover .time { color: #8a8a8a; } .news-list .item:hover:after, .news-list .item.on:after { content: ""; position: absolute; left: -0.54rem; top: 0.08rem; z-index: 0; width: 7.28rem; height: 0.66rem; background: url(https://gx.88888888woool.com/tianshun/news-bar.png?v=20260825s) no-repeat; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; background-size: 100% auto; } .news-list .tag { position: relative; z-index: 1; margin-right: 0.26rem; font-size: 0.2rem; color: #d8c7a0; } .news-list .top-flag { color: #e8c56a; } .news-list .ttl { position: relative; z-index: 1; display: inline-block; *display: inline; *zoom: 1; max-width: 4.6rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; } .news-list .time { position: absolute; right: 0.08rem; top: 0; z-index: 1; font-size: 0.18rem; color: #8a8a8a; } .news-list .item:hover .time, .news-list .item.on .time { color: #fff; } /* * 视频和石框盖板是新闻屏（不是舞台）的子元素，跟 news-bg 同一套 cover。 * 16:9 兜底；非 16:9 由 placeNewsStage 改成像素。 * 视频比石口大一圈，多出来的边被盖板挡住。 */ .news-stage { position: absolute; left: 9.23rem; top: 3.92rem; z-index: 1; width: 5.83rem; height: 3.28rem; opacity: 0; -webkit-transition: opacity 1.05s ease .18s; -moz-transition: opacity 1.05s ease .18s; -o-transition: opacity 1.05s ease .18s; transition: opacity 1.05s ease .18s; } .page-ready .fp-active .news-stage { opacity: 1; } .no-transition .news-stage { opacity: 1; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .news-stage-pics { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background: #e4d4b4; } .news-stage-video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .news-frame-lid, .news-frame-vine { position: absolute; left: 9rem; top: 3.51rem; z-index: 2; width: 6.28rem; height: 4.08rem; } .news-frame-lid { background: url(https://gx.88888888woool.com/tianshun/news-frame-lid.png?v=20260826u) no-repeat; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-size: 100% 100%; } .news-frame-vine { background: url(https://gx.88888888woool.com/tianshun/news-frame-vine.png?v=20260826ac) no-repeat; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-size: 100% 100%; } .fp-slide[data-anchor="news"] .stage { z-index: 3; } /* =============================================================== * 天顺直播间 * * 底图左边 6.2rem 是一整个金龙立绘，是这一屏的主视觉，不能拿内容去压。 * 所以所有元素从 7rem 起，右边界跟其他屏一样收在 17.9rem，可用宽 10.9rem。 * 屏标题也一起挪过来：左上角 1.3rem 正对着龙头，金字压金龙看不清。 * * 卡片是四张带金色浮雕外框的透明 PNG，框的外缘抠掉了，为的是让框浮在 * 背景立绘上，而不是四个黑方块贴上去。由此推出两条硬规矩： * 一、不要给 .live-card 加 border、底色或四角装饰，那是框上套框。 * 二、图注只能放在框外面。试过压在下沿加渐变——渐变是个矩形， * 会把下面两个透明角糊成一条直边，透明就白做了。 * * 纵向账（舞台一共 10.8，逐段落位，最后必须还剩余量）： * 标题 1.3 ~ 1.9 * 第一排图 2.2 ~ 5.09 高 2.89 * 第一排注 5.09 ~ 5.45 高 0.36，一行 * 排缝 0.30 * 第二排图 5.75 ~ 8.64 * 第二排注 8.64 ~ 9.00 * 金线 9.12 * 主播阵容 9.24 ~ 10.54 头像 0.72 + 名字 0.08+0.26 + 看点 0.04+0.20 * 余 0.26 * * 横向账：卡片 4.58 两列，中缝 0.5，合计 9.66，容器 10.1，余 0.44。 * 必须留余量——等宽列相加正好等于容器宽度，缩放到某个比例就会换行， * 本项目已经因为这个翻车三次。 * * 「右边空」不能靠拉大中缝解决。容器 10.1 而两张卡只占 9.16，多出来的 * 一块要是全塞进中缝，横缝 1.4 对竖缝 0.3，两列就散成互不相干的两摞， * 不再是一个 2×2 的阵。正解是把卡片做大，而卡片大小卡在高度上： * 图注从两行压成一行省出 0.48 的高，两排各分 0.24，宽度才从 4.28 长到 4.58。 * * 所有行高必须写死。靠默认 line-height 算过一版，中文字体实际行高比字号 * 大四成，整块比预期高出 0.44，直接捅穿舞台下沿。 * =============================================================== */ /* 这里是全站唯一一处本地相对路径：这张图还没传 OSS，写完整地址就是 404， 整屏只剩黑底。传上去之后换成 url(https://gx.88888888woool.com/tianshun/live-bg.jpg?v=20260907a)， data/live.json 里那批 ./img/ 前缀也要一起去掉。 */ .live-bg { background-color: #0a0704; background-image: url(https://gx.88888888woool.com/tianshun/live-bg.jpg?v=20260907a); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } /* 右侧压暗一层：立绘那边是暖金高光，不压暗的话白字站不住。 左边 32% 留给立绘保持原亮度，往右渐渐压到 62%。 用 :before 是因为 .slide-bg:after 已经被顶部压暗占了；这个元素没有子节点， 前后顺序无所谓。不写 z-index —— 写了会盖到 .stage 上面去， 新闻屏就是因为 .news-stage 带了 z-index 才不得不把 .stage 抬到 3。 */ .live-bg:before { content: ""; position: absolute; right: 0; top: 0; width: 68%; height: 100%; background: -webkit-linear-gradient(left, rgba(10,7,4,0) 0%, rgba(10,7,4,.55) 12%, rgba(10,7,4,.62) 100%); background: -moz-linear-gradient(left, rgba(10,7,4,0) 0%, rgba(10,7,4,.55) 12%, rgba(10,7,4,.62) 100%); background: linear-gradient(to right, rgba(10,7,4,0) 0%, rgba(10,7,4,.55) 12%, rgba(10,7,4,.62) 100%); } .live-title { left: 7.8rem; } .live-cards { position: absolute; left: 7.8rem; top: 2.2rem; width: 10.1rem; font-size: 0; } /* 卡片本身就是一张带框的画，不加边框不加底，也不打折 —— 透明图一打折就整个往后退，糊进背景里，不像不透明卡片那样有底撑着。 */ .live-card { position: relative; z-index: 0; display: inline-block; *display: inline; *zoom: 1; width: 4.58rem; margin: 0 0.5rem 0.3rem 0; vertical-align: top; text-decoration: none; } /* 第二列不留右边距，否则两列加缝会往容器边上顶 */ .live-card-r { margin-right: 0; } /* 四张卡一张接一张出，不要整块一起浮上来。 延迟走 nth-child 而不是 fp-delay-* 类：卡片是 JS 拼字符串渲染的， 一张张塞延迟类要在 JS 里维护一份序号表，放 CSS 里跟版面待在一起更好找。 IE9 没有 transition，.no-transition .fp-fade-up 那条会直接把它们显示出来。 */ .live-card:nth-child(1) { -webkit-transition-delay: .10s; transition-delay: .10s; } .live-card:nth-child(2) { -webkit-transition-delay: .20s; transition-delay: .20s; } .live-card:nth-child(3) { -webkit-transition-delay: .30s; transition-delay: .30s; } .live-card:nth-child(4) { -webkit-transition-delay: .40s; transition-delay: .40s; } .live-shot { display: block; width: 4.58rem; height: 2.89rem; border: 0; -webkit-transition: opacity .3s ease, -webkit-transform .3s ease; -moz-transition: opacity .3s ease, -moz-transform .3s ease; -o-transition: opacity .3s ease, -o-transform .3s ease; transition: opacity .3s ease, transform .3s ease; } /** * 悬停：指到哪张，哪张抬起来亮着，其余退到后面去。 * 四张卡摆在那儿一动不动确实太硬，但这批图是抠了角的透明 PNG， * 能用的手段只剩 opacity 和 transform —— * 加发光、加描边、加渐变罩都是在画矩形，会把透明角框回去。 * * 效果做在图和图注上，不做在 .live-card 上：那一层的 opacity 和 transform * 归出场动画（fp-fade-up）管，两边抢同一个属性，出场做到一半被鼠标打断就会跳。 * * 只在 .no-touch 下生效。触屏上 :hover 是粘的，点一下就一直留着， * 会卡在「除了点过的那张全是暗的」这种收不回来的状态。 * * 这里不写 filter: alpha(opacity=)。那是给 IE8 的，本站 IE8 只出升级页； * 而 IE9 里 filter 和 -ms-transform 撞在一起会让变换失效。 */ .no-touch .live-cards:hover .live-shot { opacity: .45; } .no-touch .live-card:hover .live-shot { opacity: 1; -webkit-transform: translateY(-0.06rem) scale(1.03); -ms-transform: translateY(-0.06rem) scale(1.03); transform: translateY(-0.06rem) scale(1.03); } /* 图注在框外面，不压图。别给它加底色或渐变——那会在透明角外面画出一个 矩形，正是这批透明 PNG 要躲开的东西。可读性交给文字阴影。 名字和一句话挤一行：两行要多吃 0.24 的高，那点高换成卡片宽度更值。 一整行居中，包括「进入直播间」那一截。 宽度算过：名字 1.20 + 缝 0.16 + 一句话 1.76 + 缝 0.16 + 进入直播间 0.95 = 4.23，卡片 4.58，只余 0.35。所以 live.json 里那句 tag 别超过十个字， 超了会被 overflow 从两头切掉。 */ .live-card-txt { position: relative; height: 0.36rem; padding-top: 0.08rem; line-height: 0.28rem; white-space: nowrap; overflow: hidden; text-align: center; -webkit-transition: opacity .3s ease, -webkit-transform .3s ease; -moz-transition: opacity .3s ease, -moz-transform .3s ease; -o-transition: opacity .3s ease, -o-transform .3s ease; transition: opacity .3s ease, transform .3s ease; } /* 图注跟着图一起抬，不然图升上去、字留在原地，中间会裂开一道缝 */ .no-touch .live-cards:hover .live-card-txt { opacity: .5; } .no-touch .live-card:hover .live-card-txt { opacity: 1; -webkit-transform: translateY(-0.06rem); -ms-transform: translateY(-0.06rem); transform: translateY(-0.06rem); } .live-card-txt b { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.24rem; font-weight: bold; letter-spacing: 0.02rem; color: #f0e2c0; text-shadow: 0 0.02rem 0.08rem rgba(0,0,0,.9); } .live-card-txt span { margin-left: 0.16rem; font-size: 0.16rem; color: #a08e6a; text-shadow: 0 0.02rem 0.06rem rgba(0,0,0,.9); } /* 跟名字、一句话排在同一串里一起居中，不再绝对定位贴右缘 —— 贴右缘的话整行就不是居中的了，只有前两截居中、它自己在边上。 */ .live-card-txt i { margin-left: 0.16rem; font-size: 0.19rem; font-style: normal; color: #e0b95c; text-shadow: 0 0.02rem 0.06rem rgba(0,0,0,.9); } .live-card-txt b, .live-card-txt i { -webkit-transition: color .3s ease; -moz-transition: color .3s ease; -o-transition: color .3s ease; transition: color .3s ease; } .no-touch .live-card:hover .live-card-txt b, .no-touch .live-card:hover .live-card-txt i { color: #f7e3a1; } .live-hosts { position: absolute; left: 7.8rem; top: 9.24rem; width: 10.1rem; } /* 一条金线把主播和卡片分开，跟攻略屏日程那条同一个做法，不画框不加底 */ .live-hosts:before { content: ""; position: absolute; left: 0; right: 0; top: -0.12rem; height: 0.01rem; background: rgba(224,185,92,.2); } /* 跟攻略屏的 .guide-h 同一套分栏小标题，不另起一种 */ .live-hosts-h { position: absolute; left: 0; top: 0.16rem; width: 1.6rem; padding-left: 0.24rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.26rem; line-height: 0.34rem; font-weight: bold; letter-spacing: 0.02rem; color: #f2d98f; } .live-hosts-h:before { content: ""; position: absolute; left: 0; top: 0.05rem; width: 0.05rem; height: 0.24rem; background: #e0b95c; -webkit-transform: skewX(-12deg); -ms-transform: skewX(-12deg); transform: skewX(-12deg); } .live-hosts-h i { display: block; margin-top: 0.08rem; font-size: 0.17rem; line-height: 0.23rem; font-style: normal; letter-spacing: 0; color: #7d6c4c; } /* 六个头像：1.47 一格 × 5 + 0.72 自身 = 8.07，从 1.75 起排到 9.82，容器 10.1 */ .live-host-list { position: relative; margin-left: 1.75rem; font-size: 0; } .live-host { display: inline-block; *display: inline; *zoom: 1; width: 0.72rem; margin-right: 0.75rem; vertical-align: top; text-align: center; } .live-host-last { margin-right: 0; } /* 六个头像也一个接一个出，接在四张卡后面。 这层 fp-fade-up 是嵌在 .live-hosts 那层里面的，两层位移会叠加， 所以子层收到 0.16 —— 不收的话一共走 0.56，看着像被甩上来的。 */ .live-host.fp-fade-up { -webkit-transform: translateY(0.16rem); -ms-transform: translateY(0.16rem); transform: translateY(0.16rem); } .live-host:nth-child(1) { -webkit-transition-delay: .44s; transition-delay: .44s; } .live-host:nth-child(2) { -webkit-transition-delay: .50s; transition-delay: .50s; } .live-host:nth-child(3) { -webkit-transition-delay: .56s; transition-delay: .56s; } .live-host:nth-child(4) { -webkit-transition-delay: .62s; transition-delay: .62s; } .live-host:nth-child(5) { -webkit-transition-delay: .68s; transition-delay: .68s; } .live-host:nth-child(6) { -webkit-transition-delay: .74s; transition-delay: .74s; } /* 头像图已经是正方形的（源图 240×240，make-live-assets.py 切好的）， 所以不需要 object-fit —— 本项目也禁止用它。 */ .live-face { position: relative; display: block; width: 0.72rem; height: 0.72rem; overflow: hidden; border: 0.02rem solid rgba(224,185,92,.55); border-radius: 50%; -webkit-transition: border-color .25s ease, -webkit-transform .25s ease; -moz-transition: border-color .25s ease, -moz-transform .25s ease; -o-transition: border-color .25s ease, -o-transform .25s ease; transition: border-color .25s ease, transform .25s ease; } .live-face img { display: block; width: 100%; height: 100%; border: 0; } /* 悬停时圈亮起来、整个头像涨一点，名字跟着变金。 放大的是带圆角裁剪的 .live-face 自己，不是里面的 img —— 老 Safari 有个老毛病：overflow:hidden + border-radius 的容器里， 子元素一做变换就会从圆形裁剪里跑出来，露出方角。 变换容器本身不触发这个问题。 */ .no-touch .live-host:hover .live-face { border-color: rgba(247,227,161,.95); -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .live-host b, .live-host i { -webkit-transition: color .25s ease; -moz-transition: color .25s ease; -o-transition: color .25s ease; transition: color .25s ease; } .no-touch .live-host:hover b { color: #f7e3a1; } .no-touch .live-host:hover i { color: #a8956c; } .live-host { cursor: pointer; } /* =============================================================== * 主播身份牌弹层 * * 点条上的小圆头像弹出来：左边竖版立绘，右边名字、介绍、去主页的按钮。 * 立绘 737×1024（比例 0.72），电脑端给 5.6 宽 → 7.78 高， * 加右栏 5.6 和中缝 0.6，整块 11.8×7.78，稳稳坐在 19.2×10.8 的舞台里。 * * 开着的时候不能翻页 —— html 上的 host-open 由 fullpage.js 的 overlayOpen() * 认，漏加的话弹层开着滚一下滚轮，整屏会从立绘底下抽走。 * * 淡入用 on / in 两个类分两帧加，跟进站弹层同一套： * display:none 直接切 block 的同一帧改 opacity，部分 WebKit 会跳到终态，看不见过渡。 * =============================================================== */ .hp { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 185; } .hp.on { display: block; } /* 比攻略大图那层黑得多。这一屏底下全是高亮金色的卡片和立绘， .78 压不住，卡片名字和主播名还能看清，跟身份牌抢注意力。 .92 也还差点意思：金字亮度接近 200，留 8% 仍有 16 的灰度， 在纯黑背景上照样认得出字。压到 .95 才真的退干净。 */ .hp-mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: .95; filter: alpha(opacity=95); } .hp-box { position: absolute; left: 50%; top: 50%; width: 11.8rem; height: 7.78rem; margin: -3.89rem 0 0 -5.9rem; opacity: 0; /* 翻牌接手了主要的运动，这里的缩放收到很轻、很快，只负责把整块托出来。 再用原来的 .94/.28s，两段动作叠在一起会糊。 */ -webkit-transform: scale(.97); -ms-transform: scale(.97); transform: scale(.97); -webkit-transition: opacity .16s ease, -webkit-transform .18s ease; -moz-transition: opacity .16s ease, -moz-transform .18s ease; -o-transition: opacity .16s ease, -o-transform .18s ease; transition: opacity .16s ease, transform .18s ease; } .hp.in .hp-box { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /* IE9 没有 transition，不给终态它就永远是透明的 —— 只显示背景一片黑。 .hp-side 同理，漏一个就是牌翻出来了旁边没字。 */ .no-transition .hp-box, .no-transition .hp-side { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } /* 立绘自带金框，这里不再描边不再加底。 这块是翻牌的舞台：perspective 给在父元素上，牌背和立绘各自转。 常见做法是父元素 preserve-3d 带正反两面，但 IE10/11 不支持 preserve-3d， 那样写会摊平成两张图叠着，翻不动。拆成两个兄弟元素前后接力， 父元素只要 perspective（IE10 起就有），整条支持矩阵里只有 IE9 翻不了。 */ .hp-card { position: absolute; left: 0; top: 0; width: 5.6rem; height: 7.78rem; -webkit-perspective: 15rem; perspective: 15rem; } .hp-back, .hp-img { position: absolute; left: 0; top: 0; display: block; width: 5.6rem; height: 7.78rem; border: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* 翻不了牌的（IE9）直接把牌背摘掉，别留在 DOM 里占位。 两个原因：一是这种情况下 JS 压根不给它填 src，IE 会画一个破图图标； 二是立绘四边有透明留白，牌背搁在底下会从这些缝里透出来， 两圈金框错开一点点，看着像重影。 */ .no-transform3d .hp-back, .no-transition .hp-back { display: none; } /* 静止态不带 transition：关弹层时要瞬间归位，不能倒着播一遍翻牌。 弹层淡入挂 .in，翻牌挂 .flip —— 分开是因为立绘走 OSS 要一秒多才下完， 一出现就开翻的话，牌翻完了正面还是空的。先用 .in 把牌背亮出来当等待画面， 立绘就绪了再加 .flip。 这里刻意不写 -ms-transform —— IE9 的 -ms-transform 只认 2D 函数， 给它 rotateY 反而要它去解析一个必然失败的值。不写，IE9 直接忽略整条， 立绘保持原样显示，正好就是我们要的降级。 */ .hp-back, .hp-img { -webkit-transition: none; transition: none; } .hp-back { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .hp-img { -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } /* 牌背转出去（前半程），立绘接着转进来（后半程，靠 delay 排在牌背之后）。 牌背到位后用 0 秒的 opacity 把它抹掉：停在 90 度是一条零宽侧棱， 某些渲染器会在立绘中缝上留一道亮线。 */ .hp.flip .hp-back { opacity: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transition: -webkit-transform .20s ease-in .04s, opacity 0s linear .24s; transition: transform .20s ease-in .04s, opacity 0s linear .24s; } .hp.flip .hp-img { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transition: -webkit-transform .22s ease-out .24s; transition: transform .22s ease-out .24s; } /* 换人：只转立绘，不再走一遍牌背，时长砍到一半。 连着看六个人，每次都等一轮完整翻牌会烦。 .turning 期间要盖掉上面那条带 .24s 延时的曲线，否则转回来会先愣一下。 */ .hp.flip.turning .hp-img { -webkit-transition: -webkit-transform .16s ease; transition: transform .16s ease; } .hp.flip.turning.turn .hp-img { -webkit-transform: rotateY(90deg); transform: rotateY(90deg); } /* 名字和介绍等牌翻完再淡进来。跟着牌一起出的话，牌还在侧立转着、 旁边字已经读完了，翻牌那一下就白做了。 */ .hp-side { position: absolute; left: 6.2rem; top: 0; width: 5.6rem; height: 7.78rem; opacity: 0; -webkit-transition: none; transition: none; } .hp.flip .hp-side { opacity: 1; -webkit-transition: opacity .20s ease .34s; transition: opacity .20s ease .34s; } /* 名字、介绍、按钮三样按文档流排，整组在立绘高度里垂直居中。 之前是各自钉死位置：介绍三行就收了，按钮却焊在底上，中间空出一大块。 介绍上线后要换成真内容、长短不定，钉死位置治不了本，居中才能自适应。 IE9 没有 flex，这里用表格单元格做垂直居中，IE8 起就稳。 高度只给到 6.9rem，剩下 0.88rem 留给底下那行上一位/下一位。 */ .hp-mid { display: table-cell; vertical-align: middle; width: 5.6rem; height: 6.9rem; } .hp-name { position: relative; width: 5.6rem; white-space: nowrap; } .hp-name b { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.46rem; line-height: 0.56rem; font-weight: bold; letter-spacing: 0.04rem; color: #f2d98f; } .hp-name em { margin-left: 0.22rem; font-size: 0.2rem; font-style: normal; color: #8d7b58; } /* 名字下面一条短金杠，跟屏标题那根同一个形状语言 */ .hp-name:after { content: ""; position: absolute; left: 0.02rem; top: 0.72rem; width: 0.6rem; height: 0.04rem; background: #e0b95c; -webkit-transform: skewX(-12deg); -ms-transform: skewX(-12deg); transform: skewX(-12deg); } .hp-intro { margin-top: 0.44rem; width: 5.6rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.22rem; line-height: 0.44rem; color: #b6a582; } /* 弹层不能是终点：看完介绍还得有地方去。 主播在四个平台之间轮着播，链不到「他现在在哪」，但个人主页是固定的。 .srv-btn 是 inline-block，摆在这儿会带一截行高的余白，改成块级。 */ .hp-go { display: block; margin-top: 0.56rem; width: 2.1rem; } /* 没填主页地址的就不显示按钮，别留个点不动的钮在那儿 */ .hp-go.off { display: none; } .hp-step { position: absolute; left: 0; bottom: 0.3rem; width: 5.6rem; font-size: 0.19rem; color: #8d7b58; } .hp-prev, .hp-next { cursor: pointer; -webkit-transition: color .2s ease; transition: color .2s ease; } .hp-next { margin-left: 0.3rem; } .no-touch .hp-prev:hover, .no-touch .hp-next:hover { color: #e0b95c; } .hp-step i { float: right; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 0.18rem; font-style: normal; color: #6f6046; } .hp-close { position: absolute; right: -0.1rem; top: -0.6rem; width: 0.44rem; height: 0.44rem; cursor: pointer; } .hp-close:before, .hp-close:after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.32rem; height: 0.03rem; margin: -0.015rem 0 0 -0.16rem; background: #e0b95c; } .hp-close:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .hp-close:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .live-host b { display: block; margin-top: 0.08rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.2rem; line-height: 0.26rem; font-weight: bold; color: #f0e2c0; white-space: nowrap; text-shadow: 0 0.02rem 0.06rem rgba(0,0,0,.9); } .live-host i { display: block; margin-top: 0.04rem; font-size: 0.15rem; line-height: 0.2rem; font-style: normal; color: #8d7b58; white-space: nowrap; text-shadow: 0 0.02rem 0.06rem rgba(0,0,0,.9); } /* =============================================================== * 玩家谏言：左边交，右边看公示。不要三块数字卡，不要斜切胶囊。 * 提交走表单进后台待审，页面上只展示审核通过的条目。 * * 两边都不套面板。底图是石柱甬道，原来左右两块黑板横向从 1.3 铺到 17.8、 * 竖向从 2.88 铺到 10.03，占掉 86% 宽 66% 高，画等于白做。 * 现在「面」只给输入框，可读性交给各块自己的文字阴影。 * * 中点分隔符全屏清零：原先统计条 2 个、规则条 3 个、每条公示 2 个，共 17 个。 * 要分隔就用间距、换行、右对齐，不要拿「·」串。 * * 横向：表单 1.3 起宽 5.2（到 6.5），公示墙 7.6 起宽 10.3（到 17.9）， * 中间空 1.1 的沟，靠留白分开，不画竖线。 * * 竖向账（表单没有固定高度，是被内容顶出来的，舞台一共 10.8）： * 标题 0.36 + 0.14 → 3.48 * 类型 0.40 + 0.14 → 4.02 * 区服角色 0.56 + 0.14 → 4.72 * 正文 2.00 + 0.14 → 6.86 * QQ 0.56 + 0.14 → 7.56 * 提交钮 0.58 → 8.14 * 回执位 0.08 + 0.32 → 8.54 * 赏格表 0.22 间距 + 0.20 内边距 + 四行 0.32 → 10.25 * 底下剩 0.55。赏格表条数来自 config.json 的 feedbackRules， * 加到第五条会顶到 10.57，还兜得住；第六条就要缩正文框了。 * =============================================================== */ .fb-stats { position: absolute; left: 1.3rem; top: 2.02rem; width: 16.6rem; font-size: 0.2rem; line-height: 0.56rem; color: #8d7b58; text-shadow: 0 0.02rem 0.06rem rgba(0,0,0,.85); } .fb-stats b { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.4rem; font-weight: bold; color: #e0b95c; padding: 0 0.1rem; } .fb-form { position: absolute; left: 1.3rem; top: 2.98rem; width: 5.2rem; text-shadow: 0 0.02rem 0.06rem rgba(0,0,0,.85); } .fb-form-title { height: 0.36rem; line-height: 0.36rem; margin-bottom: 0.14rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.24rem; font-weight: bold; font-style: normal; color: #f2d98f; } .fb-types { margin-bottom: 0.14rem; font-size: 0; } .fb-type { display: inline-block; *display: inline; *zoom: 1; height: 0.4rem; line-height: 0.4rem; margin-right: 0.28rem; font-size: 0.2rem; color: #8d7b58; cursor: pointer; } .fb-type:last-child { margin-right: 0; } .fb-type.on { color: #e0b95c; font-weight: bold; } /* 两个框靠绝对定位钉在两端，宽度不相加，不会因为缩放到某个比例就挤破换行 */ .fb-row2 { position: relative; height: 0.56rem; margin-bottom: 0.14rem; } /* 没有面板兜底了，输入框自己的底色要压得住背景才看得清打的字 */ .fb-input { height: 0.56rem; padding: 0 0.14rem; font-size: 0.18rem; color: #e8ddc8; background: rgba(0,0,0,.62); border: 0.01rem solid #4a3616; } .fb-input-l { position: absolute; left: 0; top: 0; width: 2.5rem; } .fb-input-r { position: absolute; right: 0; top: 0; width: 2.5rem; } .fb-input-full { display: block; width: 100%; margin-bottom: 0.14rem; } /* 验证码行：左输入框、右图。图是 132×44 的 PNG，按 rem 缩放显示。 跟 .fb-row2 一样用绝对定位钉两端，不靠宽度相加。 */ .fb-cap { position: relative; height: 0.56rem; margin-bottom: 0.14rem; } .fb-cap.off { display: none; } .fb-cap-input { position: absolute; left: 0; top: 0; width: 2.5rem; } .fb-cap-img { position: absolute; right: 0; top: 0; display: block; width: 1.68rem; height: 0.56rem; background: rgba(0,0,0,.62); border: 0.01rem solid #4a3616; overflow: hidden; cursor: pointer; text-decoration: none; } .fb-cap-img img { display: block; width: 100%; height: 100%; border: 0; } .fb-cap-img img.off { display: none; } .fb-cap-img span { display: none; padding: 0 0.1rem; font-size: 0.16rem; line-height: 0.56rem; color: #e0b95c; white-space: nowrap; } .fb-cap-img span.on { display: block; } .fb-cap-img:hover { border-color: #e0b95c; } .fb-trap { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); } .fb-input:focus, .fb-textarea:focus { border-color: #e0b95c; } /* placeholder 各内核前缀不通用，必须分开写，合并写会整条失效 */ .fb-input::-webkit-input-placeholder, .fb-textarea::-webkit-input-placeholder { color: #6f6046; } .fb-input:-ms-input-placeholder, .fb-textarea:-ms-input-placeholder { color: #6f6046; } .fb-input::-moz-placeholder, .fb-textarea::-moz-placeholder { color: #6f6046; opacity: 1; } .fb-textarea { display: block; width: 100%; height: 2rem; margin-bottom: 0.14rem; padding: 0.12rem 0.14rem; font-size: 0.18rem; line-height: 0.3rem; color: #e8ddc8; background: rgba(0,0,0,.62); border: 0.01rem solid #4a3616; resize: none; } .fb-submit { display: block; width: 100%; height: 0.58rem; line-height: 0.58rem; text-align: center; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.22rem; font-weight: bold; font-style: normal; color: #2a1a06; background: #d9a83f; border: 0; /* 深字压金底，再继承表单那层黑色阴影就糊了 */ text-shadow: none; } .fb-submit:hover { background: #e0b95c; } .fb-submit.disabled { color: #9a9188; background: #4a4038; cursor: default; } /* 成功提示要写清「截图留底、勿转发」，一行装不下时允许折行， 所以用 min-height 而不是钉死 height，否则多出来的字会被裁掉。 */ .fb-msg { min-height: 0.32rem; line-height: 0.32rem; margin-top: 0.08rem; font-size: 0.16rem; color: #8d7b58; } .fb-msg.err { color: #e35b46; } .fb-msg.ok { color: #7fa05a; } /* 奖励规则：一行一条，名称靠左、赏格靠右，不拿「·」串成一长条 */ .fb-rules { margin-top: 0.22rem; padding-top: 0.2rem; border-top: 0.01rem solid rgba(150,112,48,.35); } .fb-rules-row { position: relative; height: 0.32rem; line-height: 0.32rem; font-size: 0.17rem; color: #8d7b58; } .fb-rules-row b { position: absolute; right: 0; top: 0; font-weight: normal; color: #c4a056; } .fb-wall { position: absolute; left: 7.6rem; top: 2.98rem; width: 10.3rem; height: 7.0rem; text-shadow: 0 0.02rem 0.06rem rgba(0,0,0,.85); } .fb-tabs { height: 0.5rem; padding-left: 0.08rem; border-bottom: 0.01rem solid rgba(224,185,92,.18); font-size: 0; } .fb-tab { display: inline-block; *display: inline; *zoom: 1; height: 0.5rem; line-height: 0.5rem; margin-right: 0.08rem; padding: 0 0.18rem; font-size: 0.2rem; color: #8d7b58; cursor: pointer; } .fb-tab:hover { color: #d8c7a0; } .fb-tab.on { color: #e0b95c; font-weight: bold; border-bottom: 0.02rem solid #e0b95c; } .fb-list { height: 6.5rem; padding-right: 0.3rem; overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-touch-action: pan-y; touch-action: pan-y; -ms-overflow-style: none; scrollbar-width: none; } .fb-list::-webkit-scrollbar { width: 0; height: 0; } /* 条目之间只靠间距分开，不给每行描底边：六条平行线一拉就是张表格 */ .fb-item { padding: 0.28rem 0; } .fb-item-head { position: relative; padding-right: 1.5rem; } .fb-item-title { font-size: 0.2rem; line-height: 0.34rem; color: #e8ddc8; } .fb-item-date { position: absolute; right: 0; top: 0.04rem; font-size: 0.16rem; color: #7f7053; } .fb-tag { margin-right: 0.12rem; font-size: 0.18rem; color: #e0b95c; } .fb-tag-fixed { color: #7fa05a; } /* 类型和区服玩家之间拉开距离，不夹「·」 */ .fb-item-meta { margin-top: 0.08rem; font-size: 0.16rem; color: #8d7b58; } .fb-item-type { margin-right: 0.26rem; color: #7f7053; } .fb-item-reply { margin-top: 0.1rem; padding-left: 0.16rem; font-size: 0.17rem; line-height: 0.3rem; color: #b8a680; border-left: 0.02rem solid #5c4318; } .fb-item-reward { margin-top: 0.08rem; font-size: 0.17rem; color: #c4a056; } /* =============================================================== * 联系客服 * * 底图是石柱夹道，正中一个亮的灭点。上面盖等宽黑框等于把画糊掉， * 所以这一屏一个框都不画：三路联系方式按内容长短分不等宽的栏， * 栏与栏之间只立一条 1.7 高的短金线，够分开就行，不围成格子。 * * 没有底色兜文字，可读性交给 .cs-desk 上那层文字阴影， * 别为了看清字又把半透明黑块加回来。 * * 不挂下载入口：首屏已经有全套五个，这里再放一排是重复的转化入口。 * * 竖向账（容器从 2.6 起，8.78 是备案信息）： * 联系方式 2.86 → 5.46 * 常见问题 0.80 间距 + 1.36（含 0.34 内边距，三条都是标题一行、正文两行）→ 7.62 * 底下剩 1.16 留给底图。常见问题固定一行三条，正文别写到第三行， * 想换内容请替换现有的，别往下追加。 * =============================================================== */ .contact-body { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .cs-desk { position: absolute; left: 1.3rem; top: 2.6rem; width: 16.6rem; text-shadow: 0 0.02rem 0.06rem rgba(0,0,0,.85); } /* 三栏靠绝对定位摆，宽度不参与相加，不存在挤破换行的问题 */ .cs-line { position: relative; height: 2.86rem; } .cs-col { position: absolute; top: 0; } .cs-col-qq { left: 0; width: 6.3rem; } .cs-col-grp { left: 7.5rem; width: 4.6rem; } .cs-col-wx { left: 13.1rem; width: 3.4rem; } /* 栏间短金线：只在中间一段立着，上下都不到头，避免看着像表格竖框 */ .cs-col-grp:before, .cs-col-wx:before { content: ""; position: absolute; left: -0.6rem; top: 0.3rem; width: 0.01rem; height: 1.7rem; background: -webkit-linear-gradient(top, rgba(150,112,48,0) 0%, rgba(150,112,48,.55) 30%, rgba(150,112,48,.55) 70%, rgba(150,112,48,0) 100%); background: -moz-linear-gradient(top, rgba(150,112,48,0) 0%, rgba(150,112,48,.55) 30%, rgba(150,112,48,.55) 70%, rgba(150,112,48,0) 100%); background: linear-gradient(to bottom, rgba(150,112,48,0) 0%, rgba(150,112,48,.55) 30%, rgba(150,112,48,.55) 70%, rgba(150,112,48,0) 100%); } .cs-lb { display: block; height: 0.34rem; line-height: 0.34rem; font-size: 0.2rem; font-style: normal; letter-spacing: 0.06rem; color: #8d7b58; } /* 整屏就这一处放大字号，其他元素一律压在它下面 */ .cs-num { display: block; margin-top: 0.1rem; height: 0.98rem; line-height: 0.98rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.92rem; font-weight: bold; letter-spacing: 0.04rem; color: #f2d98f; } .cs-num:hover { color: #fff0c2; } .cs-time { display: block; margin-top: 0.12rem; height: 0.3rem; line-height: 0.3rem; font-size: 0.18rem; font-style: normal; color: #8d7b58; } .cs-add { margin-top: 0.3rem; width: 1.9rem; height: 0.56rem; line-height: 0.56rem; font-size: 0.2rem; } .qq-groups { margin-top: 0.16rem; } .cs-g-row { position: relative; height: 0.62rem; line-height: 0.62rem; font-size: 0.2rem; color: #8d7b58; } .cs-g-row.has-btn { padding-right: 0.9rem; } .cs-g-row span { display: inline-block; *display: inline; *zoom: 1; margin-right: 0.16rem; } .cs-g-row b { font-weight: bold; color: #e8ddc8; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } /* 加群是文字链不是按钮：全站按钮只留斜切金钮和烤图钮两种形状 */ .cs-g-row a { position: absolute; right: 0; top: 0; height: 0.62rem; line-height: 0.62rem; font-size: 0.18rem; color: #e0b95c; } .cs-g-row a:hover { color: #f2d98f; } /* 码是黑白原图，底下垫一层浅色才扫得动。浅底本身就是块面，不用再描金边 */ .cs-code { display: block; width: 1.56rem; margin-top: 0.14rem; padding: 0.07rem; background: #e8ddc8; font-size: 0; } .cs-code img { display: block; width: 1.42rem; height: 1.42rem; } .cs-code-tip { margin-top: 0.12rem; font-size: 0.16rem; line-height: 0.26rem; color: #8d7b58; } /* 没在 config.json 里填 sns.wecom 就一直藏着，填了 JS 会改成 block */ .cs-wecom { display: none; margin-top: 0.1rem; height: 0.3rem; line-height: 0.3rem; font-size: 0.17rem; color: #b8a680; } .cs-wecom:hover { color: #e0b95c; } /* 整块上面压一条金线，三条之间不再各自描框 */ .cs-help { margin-top: 0.8rem; padding-top: 0.34rem; border-top: 0.01rem solid rgba(150,112,48,.4); font-size: 0; } /* 三条宽度按文字长短分，5.9 + 5.3 + 4.5 + 间距 0.3×2 = 16.3，容器 16.6，留 0.3 余量 */ .cs-q { display: inline-block; *display: inline; *zoom: 1; width: 5.3rem; margin-right: 0.3rem; vertical-align: top; } .cs-help .cs-q:first-child { width: 5.9rem; } .cs-q-last { width: 4.5rem; margin-right: 0; } .cs-q b { display: block; height: 0.34rem; line-height: 0.34rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.2rem; font-weight: bold; color: #e0b95c; } .cs-q span { display: block; margin-top: 0.06rem; font-size: 0.17rem; line-height: 0.3rem; color: #b8a680; } .footer { position: absolute; left: 1.3rem; top: 8.78rem; width: 16.6rem; } .footer p { font-size: 0.16rem; line-height: 0.3rem; color: #6f6046; } .footer a { color: #6f6046; -webkit-transition: color .2s ease; -moz-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease; } .footer a:hover { color: #e0b95c; } /* =============================================================== * 移动端（html.is-mobile，设计稿 750x1334） * =============================================================== */ .is-mobile .topbar { height: 0.96rem; } .is-mobile .topbar .logo { left: 0.12rem; top: 0.08rem; width: 1.48rem; height: 0.80rem; } .is-mobile .topbar .logo img { width: 1.48rem; height: 0.80rem; } .is-mobile .topbar .menu { display: none; } .is-mobile .topbar .btn-nav-m { display: block; position: absolute; right: 0.3rem; top: 0.28rem; } .is-mobile .sns, .is-mobile .sns-age { display: none; } .is-mobile .qr-pop-box { width: 4.4rem; margin: -2.6rem 0 0 -2.2rem; padding: 0.32rem 0.28rem 0.2rem; } .is-mobile .qr-pop-pic { width: 3.84rem; height: 3.84rem; } .is-mobile .qr-pop-box p { height: 0.56rem; line-height: 0.56rem; font-size: 0.26rem; } .is-mobile .wp-box { width: 6.90rem; height: 5.24rem; margin: -2.82rem 0 0 -3.45rem; } .is-mobile .wp-video { width: 6.90rem; height: 3.90rem; } .is-mobile .wp-scroll { top: 3.84rem; width: 7.10rem; height: 1.40rem; margin-left: -3.55rem; } .is-mobile .wp-close { left: auto; right: -0.08rem; width: 0.44rem; height: 0.45rem; } .is-mobile .wp-sound { bottom: 0.22rem; width: 2.80rem; height: 0.56rem; margin-left: -1.40rem; line-height: 0.56rem; font-size: 0.26rem; } .is-mobile .wp-scroll:after { right: 0.48rem; top: 0.78rem; width: 0.39rem; height: 0.46rem; } .is-mobile .kv-floor { height: 7.4rem; } /** * 手机上必须把移动端下载顶到最前面，「电脑版」放第一位是白白浪费转化。 * 竖屏不放二维码。宽 6.5，两列 3.12+0.16+3.12，余量 0.1 以上。 */ .is-mobile .kv-dls { left: 0.5rem; right: auto; bottom: 0.28rem; top: auto; width: 6.5rem; height: 2.96rem; margin-left: 0; } .is-mobile .kv-dl-qr { display: none; } .is-mobile .kv-dl-btns { left: 0; right: auto; top: 0; width: 6.5rem; height: 2.96rem; } .is-mobile .kv-dl-btn { width: 3.00rem; height: 0.88rem; -webkit-background-size: 3.00rem 4.15rem; -moz-background-size: 3.00rem 4.15rem; background-size: 3.00rem 4.15rem; } .is-mobile .kv-dl-android { left: 0; top: 0; background-position: 0 -0.83rem; } .is-mobile .kv-dl-ios { left: 3.24rem; top: 0; background-position: 0 -1.67rem; } .is-mobile .kv-dl-harmony { left: 0; top: 1.04rem; background-position: 0 -2.50rem; } .is-mobile .kv-dl-emu { left: 3.24rem; top: 1.04rem; background-position: 0 -3.33rem; } .is-mobile .kv-dl-pc { left: 1.62rem; top: 2.08rem; width: 3.00rem; -webkit-background-size: 3.00rem 4.15rem; -moz-background-size: 3.00rem 4.15rem; background-size: 3.00rem 4.15rem; background-position: 0 0; } .is-mobile .kv-dl-l1, .is-mobile .kv-dl-l3 { width: 1.14rem; height: 0.04rem; } .is-mobile .kv-dl-l2, .is-mobile .kv-dl-l4 { width: 0.04rem; height: 0.78rem; } /* 手机上左边距只有 0.5rem，装饰杠不能像 PC 那样甩到标题左外侧，改放到标题上方 */ .is-mobile .sec-title { left: 0.5rem; top: 1.5rem; font-size: 0.58rem; } .is-mobile .sec-title em { font-size: 0.2rem; vertical-align: 0.04rem; } .is-mobile .sec-title:before { left: 0.02rem; top: -0.26rem; width: 0.8rem; height: 0.06rem; } .is-mobile .srv-btn { width: 100%; height: 0.72rem; line-height: 0.72rem; font-size: 0.26rem; } .is-mobile .srv-empty { padding: 1.6rem 0; font-size: 0.26rem; } /* 手机端：页签当选择器放最上面，图在中间，文字在下面。 竖屏一共只有 13.3rem 高，三段加起来必须压在 12.9rem 以内。 */ .is-mobile .feat-rail { left: 0.5rem; top: 2.48rem; width: 6.5rem; } .is-mobile .feat-rail:before { left: -0.08rem; width: 6.66rem; } .is-mobile .feat-tabs { left: 0.62rem; width: 5.26rem; } .is-mobile .feat-tab { padding: 0 0.14rem; margin: 0 0.02rem; font-size: 0.22rem; } .is-mobile .feat-cons { left: 0.5rem; top: 3.36rem; width: 6.5rem; height: 8.9rem; } .is-mobile .feat-pane { left: 0; top: 0; width: 6.5rem; height: 4.85rem; line-height: 4.83rem; } /** * 手机上没有 1:1 的余地，等比缩到框里。 * 不能只按宽度铺满：伴生仙宝是竖版面板，那样高度会冲出格子压住下面的文字。 */ .is-mobile .feat-pane .feat-shot { width: auto; height: auto; max-width: 6.5rem; max-height: 4.8rem; } .is-mobile .feat-txt { top: 5.08rem; width: 6.5rem; } .is-mobile .feat-kicker { font-size: 0.18rem; } .is-mobile .feat-txt h3 { margin-top: 0.1rem; font-size: 0.4rem; } .is-mobile .feat-txt p { margin-top: 0.16rem; font-size: 0.24rem; line-height: 0.38rem; } .is-mobile .feat-txt ul { margin-top: 0.2rem; } .is-mobile .feat-txt li { margin-bottom: 0.1rem; font-size: 0.24rem; line-height: 0.38rem; } .is-mobile .feat-txt li b { width: 1.7rem; } /* 手机端：路线四步竖排、图铺满内容宽，日程回到一行一场。 四张图加日程一定超过一屏，所以整块交给一个滚动区 */ .is-mobile .guide-body { position: absolute; left: 0.5rem; top: 2.6rem; width: 6.7rem; height: 10.4rem; overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-touch-action: pan-y; touch-action: pan-y; } .is-mobile .guide-route, .is-mobile .guide-daily { position: static; width: 6.5rem; } .is-mobile .guide-daily { margin-top: 0.5rem; } .is-mobile .guide-h { font-size: 0.34rem; } .is-mobile .guide-h i { display: block; margin-left: 0; margin-top: 0.06rem; font-size: 0.22rem; } .is-mobile .guide-more { position: static; display: block; margin-top: 0.18rem; font-size: 0.22rem; } /* 竖排之后横轴和节点都失去意义，四张图本身就是节奏 */ .is-mobile .guide-prev, .is-mobile .guide-next { display: none; } .is-mobile .guide-steps { overflow: visible; width: 6.5rem; white-space: normal; } .is-mobile .guide-track { left: 0; white-space: normal; padding-top: 0; } .is-mobile .guide-track:before { display: none; } .is-mobile .guide-step { margin-right: 0; } .is-mobile .guide-steps:before, .is-mobile .guide-step:before { display: none; } .is-mobile .guide-step { display: block; width: 6.5rem; margin-left: 0; margin-bottom: 0.46rem; } .is-mobile .guide-step b { font-size: 0.26rem; } .is-mobile .guide-pic { width: 6.5rem; } /* 350 显示 390 的源图，是缩不是放，不会糊 */ .is-mobile .guide-shot { margin-top: 0; width: 6.5rem; height: 4.07rem; } .is-mobile .guide-pic i { opacity: 1; filter: alpha(opacity=100); font-size: 0.2rem; height: 0.36rem; line-height: 0.36rem; } .is-mobile .guide-step em { margin-top: 0.18rem; font-size: 0.3rem; } .is-mobile .guide-step span { margin-top: 0.1rem; font-size: 0.23rem; line-height: 0.38rem; } .is-mobile .guide-times { margin-top: 0.28rem; padding-top: 0; } .is-mobile .guide-times:before { display: none; } .is-mobile .guide-time { display: block; width: auto; padding: 0.12rem 0 0.12rem 0.28rem; height: auto; line-height: 0.44rem; } .is-mobile .guide-time:before { left: 0; top: 0.22rem; width: 0.1rem; height: 0.1rem; } .is-mobile .guide-time b { display: inline-block; *display: inline; *zoom: 1; width: 1.5rem; font-size: 0.26rem; } .is-mobile .guide-time em { display: inline; margin-top: 0; font-size: 0.24rem; } .is-mobile .guide-time i { position: absolute; right: 0.04rem; top: 0.12rem; margin-top: 0; font-size: 0.22rem; } .is-mobile .guide-time.is-next span, .is-mobile .guide-time.is-on span { position: absolute; right: 0.04rem; top: 0.12rem; margin: 0; font-size: 0.22rem; } /* 手机端弹层：大图按屏宽缩，780→345，是缩不是放 */ .is-mobile .lb-box { width: 6.9rem; height: 4.9rem; margin: -2.45rem 0 0 -3.45rem; } .is-mobile .lb-img { width: 6.9rem; height: 4.32rem; } .is-mobile .lb-cap { height: 0.52rem; line-height: 0.52rem; font-size: 0.24rem; } .is-mobile .lb-prev, .is-mobile .lb-next { font-size: 0.22rem; } .is-mobile .lb-close { right: 0; top: -0.6rem; } .is-mobile .news-head { left: 0.5rem; top: 1.48rem; font-size: 0.5rem; } .is-mobile .news-head:before { left: 0.02rem; top: -0.26rem; width: 0.8rem; height: 0.06rem; } .is-mobile .news-head em { display: none; } .is-mobile .news-frame-lid, .is-mobile .news-frame-vine { display: none; } .is-mobile .news-stage { left: 0.5rem; top: 2.2rem; width: 6.5rem; height: 3.66rem; } .is-mobile .news-left { left: 0.5rem; top: 6.64rem; width: 6.5rem; } .is-mobile .news-tabs { height: 0.72rem; text-align: center; } .is-mobile .news-tab { height: 0.72rem; line-height: 0.72rem; padding: 0 0.22rem; font-size: 0.26rem; } .is-mobile .news-tab.on:before { width: 1.28rem; height: 0.5rem; } .is-mobile .news-list { width: 6.5rem; height: 5rem; margin-left: 0; padding-left: 0.28rem; } .is-mobile .news-list .item { height: auto; line-height: 0.4rem; padding: 0.2rem 0.16rem; font-size: 0.26rem; } .is-mobile .news-list .item:after { left: -0.2rem; width: 6.9rem; height: 100%; top: 0; } .is-mobile .news-list .ttl { display: inline; max-width: none; white-space: normal; } .is-mobile .news-list .time { position: static; display: block; margin-top: 0.08rem; font-size: 0.2rem; } /* --- 天顺直播间（移动端）--- 竖屏 7.5×13.34，PC 那个左立绘右内容的分栏没法用：宽度不够劈两半。 底图 cover 之后立绘会被裁到画面外，整屏就是暗底，内容直接铺满。 四张卡竖排每张 4.1 高，加上主播那排一共 18rem 出头，一屏装不下， 所以整块交给滚动区，跟攻略屏 .guide-body 同一个做法。 .live-title 的 left:7rem 不用在这里改回来 —— .is-mobile .sec-title 是两个类，权重压得过它。 */ /* 右边那道渐变是给电脑端左右分栏做的：左边留亮给立绘，右边压暗放内容。 竖屏没有左右之分，cover 之后满屏都是立绘的高亮金色，只压右边 68% 等于没压，标题和卡片全浮在亮底上。整屏平压一层，不做渐变。 */ .is-mobile .live-bg:before { width: 100%; background: rgba(10,7,4,.58); } .is-mobile .live-body { position: absolute; left: 0.5rem; top: 2.6rem; width: 6.7rem; height: 10.4rem; overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-touch-action: pan-y; touch-action: pan-y; } .is-mobile .live-cards, .is-mobile .live-hosts { position: static; width: 6.5rem; } .is-mobile .live-hosts { margin-top: 0.5rem; } .is-mobile .live-hosts:before { display: none; } /* 325 宽显示 840 的源图，是缩不是放。图注同样在框外，不压图 */ .is-mobile .live-card { display: block; width: 6.5rem; margin: 0 0 0.36rem 0; opacity: 1; filter: alpha(opacity=100); } .is-mobile .live-card-r { margin-right: 0; } .is-mobile .live-shot { width: 6.5rem; height: 4.1rem; } .is-mobile .live-card-txt { height: 0.56rem; padding-top: 0.14rem; line-height: 0.42rem; } .is-mobile .live-card-txt b { font-size: 0.3rem; } .is-mobile .live-card-txt span { margin-left: 0.14rem; font-size: 0.21rem; } .is-mobile .live-card-txt i { margin-left: 0.18rem; font-size: 0.24rem; } /* 标题回到常规文档流，不再是左边那一列 */ .is-mobile .live-hosts-h { position: static; width: auto; padding-left: 0.24rem; font-size: 0.34rem; line-height: 0.44rem; } .is-mobile .live-hosts-h:before { top: 0.08rem; height: 0.3rem; } .is-mobile .live-hosts-h i { margin-top: 0.06rem; font-size: 0.22rem; line-height: 0.3rem; } /* 六个头像排两行三列：1.98×3 + 0.14×2 = 6.22，容器 6.5，余 0.28 */ .is-mobile .live-host-list { margin-left: 0; margin-top: 0.3rem; } .is-mobile .live-host { width: 1.98rem; margin: 0 0.14rem 0.3rem 0; } .is-mobile .live-host-last { margin-right: 0.14rem; } .is-mobile .live-face { width: 1.1rem; height: 1.1rem; margin: 0 auto; } /* 身份牌弹层（移动端）：竖屏劈不开左右两栏，改成上图下文。 竖向账：立绘 6.81 + 缝 0.3 + 文字区 4.0 = 11.11，取 11.2， 舞台 13.34，上下各余一截。 */ .is-mobile .hp-box { width: 6.5rem; height: 11.2rem; margin: -5.6rem 0 0 -3.25rem; } .is-mobile .hp-card { left: 0.8rem; top: 0; width: 4.9rem; height: 6.81rem; } .is-mobile .hp-img { width: 4.9rem; height: 6.81rem; } .is-mobile .hp-side { left: 0; top: 7.11rem; width: 6.5rem; height: 4.09rem; } /* 竖屏这块的高度是死的，而且加不高：竖屏 rem 跟视口宽度走， 短屏手机（390x667 这类）连现在的 11.2rem 都只剩一点余量， 再高就顶出屏幕了。所以长介绍只能让文字区自己滚。 量过：不给滚的话 80 字就压住「上一位/下一位」，120 字整个弹层出界， 而草稿本身已经 65~75 字，换成真内容必破。 顺带退回普通块级：table-cell 上做 overflow 各家实现不一致， 而竖屏这块内容本来就基本填满，垂直居中看不出来，不值得冒这个险。 */ .is-mobile .hp-mid { display: block; width: 6.5rem; height: 3.5rem; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .is-mobile .hp-name { width: 6.5rem; } .is-mobile .hp-name b { font-size: 0.42rem; line-height: 0.52rem; } .is-mobile .hp-name em { font-size: 0.24rem; } .is-mobile .hp-name:after { top: 0.66rem; width: 0.7rem; } .is-mobile .hp-intro { margin-top: 0.4rem; width: 6.5rem; font-size: 0.25rem; line-height: 0.42rem; } /* .is-mobile .srv-btn 是 width:100%，整条 6.5 太宽了，收回来 */ .is-mobile .hp-go { margin-top: 0.48rem; width: 3rem; } .is-mobile .hp-step { bottom: 0; width: 6.5rem; font-size: 0.24rem; } .is-mobile .hp-step i { font-size: 0.22rem; } .is-mobile .hp-close { right: -0.04rem; top: -0.64rem; } .is-mobile .live-host b { margin-top: 0.14rem; font-size: 0.26rem; line-height: 0.34rem; } .is-mobile .live-host i { margin-top: 0.04rem; font-size: 0.2rem; line-height: 0.28rem; } /* --- 玩家谏言（移动端）--- */ .is-mobile .fb-stats { left: 0.5rem; top: 2.18rem; width: 6.5rem; font-size: 0.22rem; line-height: 0.46rem; } .is-mobile .fb-stats b { font-size: 0.34rem; padding: 0 0.06rem; } .is-mobile .fb-stats-pc { display: none; } /* 竖屏一共 13.3rem，表单加公示墙已经顶满，赏格表放不下，收掉 */ .is-mobile .fb-rules { display: none; } .is-mobile .fb-form { left: 0.5rem; top: 3.12rem; width: 6.5rem; } .is-mobile .fb-form-title { height: 0.4rem; line-height: 0.4rem; margin-bottom: 0.1rem; font-size: 0.28rem; } .is-mobile .fb-types { margin-bottom: 0.1rem; } .is-mobile .fb-type { height: 0.44rem; line-height: 0.44rem; margin-right: 0.24rem; font-size: 0.24rem; } .is-mobile .fb-row2 { height: 0.64rem; margin-bottom: 0.1rem; } .is-mobile .fb-input { height: 0.64rem; font-size: 0.24rem; } /* 两端各 3.15，中间留 0.2 的沟，加起来正好 6.5 */ .is-mobile .fb-input-l, .is-mobile .fb-input-r { width: 3.15rem; } .is-mobile .fb-input-full { width: 100%; margin-bottom: 0.1rem; } .is-mobile .fb-cap { height: 0.64rem; margin-bottom: 0.1rem; } .is-mobile .fb-cap-input { width: 3.15rem; height: 0.64rem; font-size: 0.24rem; } .is-mobile .fb-cap-img { width: 3.15rem; height: 0.64rem; } .is-mobile .fb-cap-img span { font-size: 0.2rem; line-height: 0.64rem; } .is-mobile .fb-textarea { height: 1.6rem; margin-bottom: 0.1rem; font-size: 0.24rem; line-height: 0.34rem; } .is-mobile .fb-submit { height: 0.72rem; line-height: 0.72rem; font-size: 0.28rem; } .is-mobile .fb-msg { min-height: 0.32rem; line-height: 0.36rem; margin-top: 0.04rem; font-size: 0.2rem; } .is-mobile .fb-wall { left: 0.5rem; top: 9.08rem; width: 6.5rem; height: 3.8rem; } .is-mobile .fb-tabs { height: 0.6rem; padding-left: 0; } .is-mobile .fb-tab { height: 0.6rem; line-height: 0.6rem; padding: 0 0.2rem; font-size: 0.22rem; } .is-mobile .fb-list { height: 3.18rem; padding-right: 0.16rem; } .is-mobile .fb-item { padding: 0.2rem 0; } .is-mobile .fb-item-head { padding-right: 0; } .is-mobile .fb-item-title { font-size: 0.24rem; line-height: 0.36rem; } .is-mobile .fb-item-date { position: static; display: block; margin-top: 0.06rem; font-size: 0.2rem; } .is-mobile .fb-item-meta { font-size: 0.2rem; } .is-mobile .fb-item-reply { font-size: 0.22rem; line-height: 0.34rem; } .is-mobile .fb-item-reward { font-size: 0.22rem; } .is-mobile .fb-tag { font-size: 0.2rem; } .is-mobile .contact-body { left: 0.5rem; top: 2.4rem; width: 6.5rem; height: 10.5rem; overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-touch-action: pan-y; touch-action: pan-y; -ms-overflow-style: none; scrollbar-width: none; } .is-mobile .contact-body::-webkit-scrollbar { width: 0; height: 0; } .is-mobile .cs-desk, .is-mobile .footer { position: static; width: 6.5rem; height: auto; margin: 0 0 0.36rem 0; } /* 手机端整屏是个滚动区：三栏改成竖着叠，栏间的竖线换成横线 */ .is-mobile .cs-line { position: static; height: auto; } .is-mobile .cs-col { position: static; width: 6.5rem; margin-bottom: 0.4rem; } .is-mobile .cs-col-grp:before, .is-mobile .cs-col-wx:before { display: none; } .is-mobile .cs-col-grp, .is-mobile .cs-col-wx { padding-top: 0.36rem; border-top: 0.01rem solid rgba(150,112,48,.4); } .is-mobile .cs-lb { height: 0.44rem; line-height: 0.44rem; font-size: 0.26rem; } .is-mobile .cs-num { height: 0.9rem; line-height: 0.9rem; font-size: 0.84rem; } .is-mobile .cs-time { height: 0.36rem; line-height: 0.36rem; font-size: 0.22rem; } /* 宽度和字号吃 .is-mobile .srv-btn 那条，这里只管间距 */ .is-mobile .cs-add { margin-top: 0.28rem; } .is-mobile .qq-groups { margin-top: 0.12rem; } .is-mobile .cs-g-row { height: 0.8rem; line-height: 0.8rem; font-size: 0.24rem; } .is-mobile .cs-g-row.has-btn { padding-right: 1.2rem; } .is-mobile .cs-g-row span { margin-right: 0.24rem; } .is-mobile .cs-g-row b { font-size: 0.28rem; } .is-mobile .cs-g-row a { height: 0.8rem; line-height: 0.8rem; font-size: 0.24rem; } /* 手机上码要够大，长按识别用得着 */ .is-mobile .cs-code { width: 2.86rem; margin-top: 0.2rem; padding: 0.08rem; } .is-mobile .cs-code img { width: 2.7rem; height: 2.7rem; } .is-mobile .cs-code-tip { margin-top: 0.16rem; font-size: 0.22rem; line-height: 0.34rem; } .is-mobile .cs-wecom { height: 0.5rem; line-height: 0.5rem; margin-top: 0.16rem; font-size: 0.24rem; } .is-mobile .cs-help { margin-top: 0; padding-top: 0.36rem; } /* 带上 :first-child，否则 PC 那条 5.9 宽会漏过来 */ .is-mobile .cs-help .cs-q, .is-mobile .cs-help .cs-q:first-child, .is-mobile .cs-help .cs-q-last { display: block; width: 6.5rem; margin: 0 0 0.3rem; } .is-mobile .cs-q b { height: 0.44rem; line-height: 0.44rem; font-size: 0.26rem; } .is-mobile .cs-q span { margin-top: 0.08rem; font-size: 0.24rem; line-height: 0.4rem; } .is-mobile .footer p { font-size: 0.22rem; line-height: 0.36rem; }