@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; } .topbar .menu-item { position: relative; display: inline-block; *display: inline; *zoom: 1; height: 0.44rem; vertical-align: top; cursor: pointer; white-space: nowrap; } .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; } /* 目标站右上角没有充值块。PC 藏掉；手机有汉堡抽屉，顶栏也不放。 */ .topbar .btn-pay { display: none; } /* =============================================================== * 手机端抽屉导航 * 顶栏菜单在手机上放不下，但不能因此让用户没有导航可用 * =============================================================== */ .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=20260826ad) 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; } } /* =============================================================== * 面板四角角标 * 游戏 UI 的经典手法，用两个伪元素画 L 形，不需要切图 * =============================================================== */ .cs-desk { position: relative; } .cs-desk:before, .cs-desk:after { content: ""; position: absolute; width: 0.22rem; height: 0.22rem; border: 0 solid #e0b95c; pointer-events: none; } .cs-desk:before { left: -0.01rem; top: -0.01rem; border-left-width: 0.03rem; border-top-width: 0.03rem; } .cs-desk:after { right: -0.01rem; bottom: -0.01rem; border-right-width: 0.03rem; border-bottom-width: 0.03rem; } /* =============================================================== * 通用标题 * =============================================================== */ /** * 各屏大标题：端正黑体 + 左侧金杠。 * 英文是旁边一行小字，不斜、不叠、不旋转。 */ .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.6rem; width: 16.6rem; height: 6.5rem; } .feat-item { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .feat-item.on { display: block; } .feat-txt { position: absolute; left: 0; top: 0.3rem; width: 7.2rem; } .feat-txt h3 { 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.28rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.2rem; line-height: 0.38rem; color: #b8a680; } .feat-txt ul { margin-top: 0.32rem; } .feat-txt li { margin-bottom: 0.18rem; 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.06rem 0.3rem rgba(0,0,0,.6); box-shadow: 0 0.06rem 0.3rem rgba(0,0,0,.6); } .shot-1 { width: 7.27rem; height: 4.81rem; } .shot-2 { width: 4.65rem; height: 5.58rem; } .shot-3 { width: 7.76rem; height: 5.07rem; } /* 缩略图不是整张面板缩小，是 1:1 裁的一块细节，所以还看得清 */ .feat-thumbs { position: absolute; left: 1.3rem; top: 7.6rem; font-size: 0; } .feat-thumb { display: inline-block; *display: inline; *zoom: 1; margin-right: 0.24rem; cursor: pointer; } .feat-thumb img { display: block; width: 1.55rem; height: 0.97rem; border: 0.01rem solid rgba(224,185,92,.22); opacity: .55; filter: alpha(opacity=55); -webkit-transition: opacity .25s ease; -moz-transition: opacity .25s ease; -o-transition: opacity .25s ease; transition: opacity .25s ease; } /* 底图这块是发光的符文地砖，小字直接压上去会糊在光里。 垫一圈暗影，IE9 不认 text-shadow，忽略掉也只是回到没影的状态 */ .feat-thumb span { display: block; margin-top: 0.14rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; text-align: center; font-size: 0.18rem; font-style: normal; color: #8d7b58; text-shadow: 0 0.01rem 0.04rem #0a0704, 0 0 0.08rem #0a0704; } .feat-thumb:hover img { opacity: .85; filter: alpha(opacity=85); } .feat-thumb.on img { border-color: #e0b95c; opacity: 1; filter: alpha(opacity=100); } .feat-thumb.on span { color: #e0b95c; } /* =============================================================== * 游戏攻略：开荒路线是一条可横翻的轴，一屏露出四步； * 每步封面一张，点开后按 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; } .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; } /* =============================================================== * 玩家建议：左边交，右边看公示。不要三块数字卡，不要斜切胶囊。 * 提交走表单进后台待审，页面上只展示审核通过的条目。 * =============================================================== */ .fb-meta { position: absolute; left: 1.3rem; top: 2.08rem; width: 16.6rem; font-size: 0.2rem; line-height: 0.34rem; color: #8d7b58; } .fb-stats b, .fb-rules b { font-weight: bold; color: #e0b95c; padding: 0 0.04rem; } .fb-stats span, .fb-rules span { margin: 0 0.14rem; color: #5a4a32; } .fb-rules { margin-top: 0.04rem; font-size: 0.18rem; color: #6f6047; } .fb-rules b { font-weight: normal; color: #c4a056; } .fb-form { position: absolute; left: 1.3rem; top: 2.88rem; width: 6.2rem; height: 7.15rem; padding: 0.28rem 0.3rem 0.24rem; background: rgba(14,9,5,.82); border: 0.01rem solid #5c4318; } .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.16rem; 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 { margin-bottom: 0.14rem; font-size: 0; } .fb-input { display: inline-block; *display: inline; *zoom: 1; width: 2.68rem; height: 0.56rem; padding: 0 0.14rem; font-size: 0.18rem; color: #e8ddc8; background: rgba(0,0,0,.45); border: 0.01rem solid #4a3616; } .fb-row2 .fb-input + .fb-input { margin-left: 0.14rem; } .fb-input-full { display: block; width: 100%; margin-bottom: 0.14rem; } .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: 2.4rem; margin-bottom: 0.14rem; padding: 0.12rem 0.14rem; font-size: 0.18rem; line-height: 0.3rem; color: #e8ddc8; background: rgba(0,0,0,.45); 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; } .fb-submit:hover { background: #e0b95c; } .fb-submit.disabled { color: #9a9188; background: #4a4038; cursor: default; } .fb-msg { 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-wall { position: absolute; left: 8rem; top: 2.88rem; width: 9.8rem; height: 7.15rem; background: rgba(10,7,4,.72); } .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.64rem; padding: 0 0.28rem; 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.2rem 0; border-bottom: 0.01rem solid rgba(93,67,24,.22); } .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-player { margin-top: 0.08rem; font-size: 0.16rem; color: #8d7b58; } .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; } /* =============================================================== * 联系客服：跟开服表同一块底板，横排名录。 * 内宽 16.6 - 0.02 边框 - 0.72 左右垫 = 15.86。 * 标签 2.7 + 内容 8.6 + 操作 4.3 = 15.6，余量 0.26。 * =============================================================== */ .contact-body { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .cs-desk { position: absolute; left: 1.3rem; top: 2.42rem; width: 16.6rem; background: rgba(14,9,5,.8); border: 0.01rem solid #5c4318; } .cs-row { position: relative; padding: 0 0.36rem; border-bottom: 0.01rem solid rgba(93,67,24,.28); font-size: 0; } .cs-k, .cs-v, .cs-a { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; } .cs-k { width: 2.7rem; font-size: 0.2rem; color: #8d7b58; } .cs-v { width: 8.6rem; } .cs-a { width: 4.3rem; text-align: right; } .cs-ico { display: inline-block; *display: inline; *zoom: 1; width: 0.44rem; height: 0.44rem; margin-right: 0.12rem; vertical-align: middle; } .cs-row-qq { height: 1.24rem; } .cs-row-qq .cs-k { line-height: 1.24rem; } .cs-row-qq .cs-v a.nav-qq { display: inline-block; *display: inline; *zoom: 1; } .cs-row-qq .cs-v b { display: block; height: 0.48rem; line-height: 0.48rem; margin-top: 0.18rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.32rem; font-weight: bold; letter-spacing: 0.02rem; color: #f2d98f; cursor: pointer; } .cs-row-qq .cs-v i { display: block; height: 0.36rem; line-height: 0.36rem; font-size: 0.16rem; font-style: normal; color: #8d7b58; } .cs-row-qq .cs-a { height: 1.24rem; line-height: 1.24rem; } .cs-row-g { height: 1.28rem; padding-top: 0.16rem; padding-bottom: 0.16rem; } .cs-row-g .cs-k { height: 0.96rem; line-height: 0.96rem; } .cs-row-g .cs-v { width: 12.9rem; } .cs-row-qq:hover, .cs-row-g:hover, .cs-sns:hover { background: rgba(224,185,92,.07); } .cs-g-row { position: relative; height: 0.48rem; line-height: 0.48rem; font-size: 0.2rem; color: #8d7b58; } .cs-g-row.has-btn { padding-right: 1.2rem; } .cs-g-row span { display: inline-block; *display: inline; *zoom: 1; margin-right: 0.28rem; } .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.06rem; width: 1.04rem; height: 0.36rem; line-height: 0.36rem; text-align: center; font-size: 0.16rem; color: #e0b95c; border: 0.01rem solid #8a6a28; } .cs-g-row a:hover { color: #f2d98f; border-color: #e0b95c; } .cs-sns { display: block; height: 0.72rem; line-height: 0.72rem; color: #d8c7a0; } .cs-sns .cs-k { line-height: 0.72rem; } .cs-sns.has-qr .cs-qr { display: inline; } .cs-qr { display: none; } .cs-qr img { display: inline-block; *display: inline; *zoom: 1; width: 0.56rem; height: 0.56rem; margin-left: 0.12rem; vertical-align: middle; border: 0.01rem solid #5c4318; } .cs-faq p { min-height: 0.64rem; line-height: 0.32rem; padding: 0.16rem 0.36rem; border-bottom: 0.01rem solid rgba(93,67,24,.28); font-size: 0; } .cs-faq b { display: inline-block; *display: inline; *zoom: 1; width: 2.7rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 0.2rem; font-weight: bold; line-height: 0.32rem; color: #e0b95c; vertical-align: top; } .cs-faq span { display: inline-block; *display: inline; *zoom: 1; width: 12.8rem; font-size: 0.18rem; line-height: 0.32rem; color: #b8a680; vertical-align: top; } .cs-dl-line { height: 0.64rem; line-height: 0.64rem; padding: 0 0.36rem; font-size: 0.18rem; color: #8d7b58; } .cs-dl-line i { display: inline-block; *display: inline; *zoom: 1; width: 2.7rem; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; font-style: normal; font-weight: bold; } .cs-dl-line a { display: inline-block; *display: inline; *zoom: 1; margin-right: 0.4rem; color: #d8c7a0; } .cs-dl-line a:hover { color: #e0b95c; } .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-pay { 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-thumbs { left: 0.5rem; top: 2.6rem; } .is-mobile .feat-thumb { margin-right: 0.2rem; } .is-mobile .feat-thumb img { width: 1.7rem; height: 1.06rem; } .is-mobile .feat-thumb span { margin-top: 0.12rem; font-size: 0.22rem; } .is-mobile .feat-cons { left: 0.5rem; top: 4.3rem; width: 6.5rem; height: 8.4rem; } .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.15rem; width: 6.5rem; } .is-mobile .feat-txt h3 { font-size: 0.4rem; } .is-mobile .feat-txt p { margin-top: 0.2rem; font-size: 0.24rem; line-height: 0.4rem; } .is-mobile .feat-txt ul { margin-top: 0.24rem; } .is-mobile .feat-txt li { margin-bottom: 0.12rem; 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; } /* --- 玩家建议（移动端）--- */ .is-mobile .fb-meta { left: 0.5rem; top: 2.22rem; width: 6.5rem; font-size: 0.22rem; line-height: 0.36rem; } .is-mobile .fb-rules { display: none; } .is-mobile .fb-form { left: 0.5rem; top: 2.78rem; width: 6.5rem; height: 6.1rem; padding: 0.22rem; } .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 { margin-bottom: 0.1rem; } .is-mobile .fb-input { width: 2.92rem; height: 0.64rem; font-size: 0.24rem; } .is-mobile .fb-row2 .fb-input + .fb-input { margin-left: 0.12rem; } .is-mobile .fb-input-full { width: 100%; margin-bottom: 0.1rem; } .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 { height: 0.32rem; line-height: 0.32rem; 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: 0 0.16rem; } .is-mobile .fb-item { padding: 0.16rem 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-player { 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-row { height: auto; padding: 0.2rem 0.24rem; } .is-mobile .cs-k, .is-mobile .cs-v, .is-mobile .cs-a { display: block; width: auto; } .is-mobile .cs-k { height: 0.48rem; line-height: 0.48rem; font-size: 0.24rem; margin-bottom: 0.08rem; } .is-mobile .cs-ico { width: 0.44rem; height: 0.44rem; } .is-mobile .cs-row-qq .cs-k { height: 0.48rem; line-height: 0.48rem; } .is-mobile .cs-row-qq .cs-v b { margin-top: 0; height: auto; line-height: 0.48rem; font-size: 0.36rem; } .is-mobile .cs-row-qq .cs-v i { height: auto; font-size: 0.24rem; } .is-mobile .cs-row-qq .cs-a { height: auto; line-height: normal; text-align: left; margin-top: 0.16rem; } .is-mobile .cs-qq-block .srv-btn { display: block; width: 5.7rem; height: 0.72rem; line-height: 0.72rem; font-size: 0.26rem; } .is-mobile .cs-row-g { padding-top: 0.2rem; padding-bottom: 0.2rem; } .is-mobile .cs-row-g .cs-k { height: 0.48rem; line-height: 0.48rem; } .is-mobile .cs-g-row { height: 0.64rem; line-height: 0.64rem; font-size: 0.24rem; } .is-mobile .cs-g-row span { margin-right: 0.24rem; } .is-mobile .cs-g-row b { font-size: 0.26rem; } .is-mobile .cs-sns { display: block; width: auto; height: 0.72rem; line-height: 0.72rem; margin: 0; font-size: 0.26rem; } .is-mobile .cs-sns .cs-k { font-size: 0.24rem; } .is-mobile .cs-faq p { height: auto; line-height: 0.4rem; padding: 0.16rem 0.24rem; } .is-mobile .cs-faq b { display: block; width: auto; font-size: 0.26rem; margin-bottom: 0.08rem; } .is-mobile .cs-faq span { display: block; width: auto; font-size: 0.24rem; line-height: 0.4rem; white-space: normal; } .is-mobile .cs-dl-line { height: auto; padding: 0.16rem 0.24rem; font-size: 0.24rem; } .is-mobile .cs-dl-line i { display: block; width: auto; margin-bottom: 0.08rem; } .is-mobile .cs-dl-line a { display: block; margin: 0.1rem 0 0; font-size: 0.26rem; } .is-mobile .footer p { font-size: 0.22rem; line-height: 0.36rem; }