@charset "utf-8"; html { font-size: 20px; } html { font-size: 10px; overflow-x: hidden; } @media screen and (min-width: 320px) { html { font-size: 17px; } } @media screen and (min-width: 360px) { html { font-size: 19px; } } @media screen and (min-width: 375px) { html { font-size: 20px; } } @media screen and (min-width: 414px) { html { font-size: 22px; } } body { font-size: 14px; } .search-top-bar .search-txt, .search-top-bar .search-top-btn.back { border-radius: 0.1rem; overflow: hidden; } .search-top-bar .search-form { -webkit-box-shadow: 0 0 0.125rem rgba(9, 2, 4, 0.06); box-shadow: 0 0 0.125rem rgba(9, 2, 4, 0.06); } @font-face { font-family: 'iconfont'; src: ; /* ie9*/ src: format("woff"), format("truetype"), format("svg"); /* ios 4.1- */ } .iconfont { font-family: "iconfont" !important; font-style: normal; -moz-osx-font-smoothing: grayscale; } /* 刷新1 */ body { background-color: #f5f5ee; } /* 搜索顶栏 */ .search-top-bar { /* 搜索栏表单 */ /* 搜索栏文本 */ /* 搜索栏按键 */ } .search-top-bar .search-form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; z-index: 1; height: 2.5rem; background-color: #ff9a6a; } .search-top-bar .search-txt { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; height: 1.65rem; margin-left: 0.15rem; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; background-color: white; /* 搜索栏文本 - 文本提示框 */ /* 搜索栏文本 - 文本输入框 */ } .search-top-bar .search-txt .search-hint-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } .search-top-bar .search-txt .search-hint-box .search-hint-pad { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: block; } .search-top-bar .search-txt .search-hint-box .focus-ani { margin-left: 0.3rem; visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: visibility 200ms ease, -webkit-transform 200ms ease; transition: visibility 200ms ease, -webkit-transform 200ms ease; transition: transform 200ms ease, visibility 200ms ease; transition: transform 200ms ease, visibility 200ms ease, -webkit-transform 200ms ease; line-height: 0.8rem; height: 0.8rem; } .search-top-bar .search-txt .search-hint-box .focus-ani::after { content: ""; display: block; margin-left: 100%; width: 0.8rem; height: 0.8rem; background: no-repeat -3.75rem -1.75rem; background-size: 5.1rem 4.275rem; width: 0.8rem; height: 0.8rem;; background-repeat: no-repeat; text-indent: -2500rem; font-size: 0; } .search-top-bar .search-txt .search-hint-box .search-hint-icon, .search-top-bar .search-txt .search-hint-box .search-hint-txt { display: block; line-height: 0.8rem; height: 0.8rem; vertical-align: bottom; visibility: visible; opacity: 1; -webkit-transition: opacity 200ms ease, visibility 200ms ease; transition: opacity 200ms ease, visibility 200ms ease; } .search-top-bar .search-txt .search-hint-box .search-hint-icon { width: 0.8rem; height: 0.8rem; background: no-repeat -3.75rem -1.75rem; background-size: 5.1rem 4.275rem; width: 0.8rem; height: 0.8rem;; background-repeat: no-repeat; text-indent: -2500rem; font-size: 0; } .search-top-bar .search-txt .search-hint-box .search-hint-txt { margin-left: 0.1rem; font-size: 0.75rem; color: #c5c5c5; } .search-top-bar .search-txt.focus .focus-ani { visibility: visible; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .search-top-bar .search-txt.focus .search-hint-icon, .search-top-bar .search-txt.focus .search-hint-txt { visibility: hidden; opacity: 0; } .search-top-bar .search-txt .search-text-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; } .search-top-bar .search-txt .search-text-box .txt-input-pad { width: 1.35rem; } .search-top-bar .search-txt .search-text-box .txt-input { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: block; height: 0.95rem; line-height: 0.95rem; margin: 0; padding: 0; border: 0 none; background-color: transparent; outline: none; font-size: 0.75rem; color: #535252; } .search-top-bar .search-txt .search-text-box .txt-input-clear { display: block; margin-left: 0.25rem; margin-right: 0.3rem; width: 0.8rem; height: 0.8rem; background: no-repeat 0rem -3.475rem; background-size: 5.1rem 4.275rem; width: 0.8rem; height: 0.8rem;; background-repeat: no-repeat; text-indent: -2500rem; font-size: 0; visibility: hidden; opacity: 0; -webkit-transition: visibility 200ms ease, -webkit-transform 200ms ease; transition: visibility 200ms ease, -webkit-transform 200ms ease; transition: transform 200ms ease, visibility 200ms ease; transition: transform 200ms ease, visibility 200ms ease, -webkit-transform 200ms ease; } .search-top-bar .search-txt.focus .txt-input-clear { visibility: visible; opacity: 1; } .search-top-bar .search-top-btn { display: block; } .search-top-bar .search-top-btn.back { text-indent: -2500rem; font-size: 0; padding: 0.375rem; } .search-top-bar .search-top-btn.back::after { content: ""; display: block; width: 1.35rem; height: 1.35rem; background: no-repeat -2.15rem -1.75rem; background-size: 5.1rem 4.275rem; width: 1.35rem; height: 1.35rem;; background-repeat: no-repeat; } .search-top-bar .search-top-btn.back:active { background-color: #dcdcd6; } .search-top-bar .search-top-btn.search { padding: 0.5rem; font-size: 0.75rem; color: white; border: 0 none; background: transparent; -webkit-appearance: none; } .search-top-bar .search-top-btn.search:active { background-color: #dcdcd6; } /* 搜索智能提示 */ .search-smart-hint { padding: 0rem 0.5rem; background-color: white; } .search-smart-hint .hint-list { margin: 0; padding: 0; } .search-smart-hint .hint-list .item { display: block; margin: 0; padding: 0; border-top: 1px solid #c5c5c5; } .search-smart-hint .hint-list .item:nth-child(1) { border-top: 0 none; } .search-smart-hint .hint-list .link { display: block; height: 2.5rem; line-height: 2.5rem; padding: 0rem 0.5rem; font-size: 0.9rem; color: #969696; } /* 搜索热词 */ .search-hot .search-hot-npc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 3rem; margin-left: 0.5rem; margin-right: 0.5rem; border-bottom: 1px solid #c5c5c5; } .search-hot .search-hot-npc .npc-avatar { display: block; text-indent: -2500rem; font-size: 0; width: 1.975rem; height: 1.475rem; background: no-repeat 0rem -1.75rem; background-size: 5.1rem 4.275rem; width: 1.9rem; height: 1.475rem;; background-repeat: no-repeat; } .search-hot .search-hot-npc .npc-dialog { display: block; text-indent: -2500rem; font-size: 0; width: 5.1rem; height: 1.5rem; background: no-repeat 0rem 0rem; background-size: 5.1rem 4.275rem; width: 5.1rem; height: 1.5rem;; background-repeat: no-repeat; } .search-hot .search-hot-list { padding: 0.75rem 0.5rem; font-size: 0; } .search-hot .search-hot-list .item { display: inline-block; margin-bottom: 0.5rem; margin-right: 0.5rem; } .search-hot .search-hot-list .link { display: inline-block; padding: 0.75rem 1rem; border-radius: 2.25rem; background-color: white; border: 1px solid #c5c5c5; font-size: 0.75rem; color: #535252; }