body { overflow-x: hidden; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: none; -moz-user-select: none; max-width: 540px; margin: 0 auto; background: #fafafc; height: 2000px; } ul { margin: 0; padding: 0; list-style: none; } a { text-decoration: none; color: #222; } /* 搜索模块 */ .search-index { display: flex; /* 固定定位跟父级没有关系,以屏幕为准 */ position: fixed; /* 固定的盒子要有宽度 */ width: 100%; height: 44px; min-width: 320px; max-width: 540px; top: 0; left: 50%; z-index: 999; -webkit-transform: translate(-50%); transform: translateX(-50%); border-top: 1px solid #ccc; background-color: #f6f6f6; border-bottom: 1px solid #ccc; } .search { position: relative; flex: 1; box-sizing: border-box; height: 26px; line-height: 24px; border: 1px solid #ccc; border-radius: 5px; margin: 8px 10px; font-size: 12px; color: #666; padding-left: 25px; box-shadow: 0 2px 4px rgb(0,0,0,.2); } .search::before { content: ""; position: absolute; top: 5px; left: 5px; width: 15px; height: 15px; background: url(../images/sprite.png) no-repeat -59px -279px; background-size: 104px auto; } .user { width: 44px; height: 44px; font-size: 12px; text-align: center; color: #2eaae0; } .user::before { content:""; display: block; width: 23px; height: 23px; background: url(../images/sprite.png) no-repeat -59px -194px; background-size: 104px auto; margin: 5px auto 0; } /* 焦点图 */ .focus { position: relative; padding-top: 44px; overflow: hidden; } .focus ul { width: 500%; overflow: hidden; margin-left: -100%; } .focus ul li { float: left; width: 20%; } .focus ol { position: absolute; bottom: 5px; right: 5px; margin: 0; } .focus ol li { display: inline-block; width: 5px; height: 5px; background-color: white; list-style: none; border-radius: 5px; transition: all .3s; } .focus ol li.current { width: 15px; } .focus img { width: 100%; } /* 局部导航栏 */ .local-nav { display: flex; height: 64px; margin: 2px 4px; border-radius: 8px; } .local-nav li{ flex: 1; } .local-nav a{ display: flex; flex-direction: column; /* 侧轴居中对齐 */ font-size: 12px; align-items: center; } .local-nav li [class^='local-nav-icon'] { width: 32px; height: 32px; margin-top: 8px; background: url(../images/localnav_bg.png) no-repeat 0 0; background-size: 32px auto; } .local-nav li .local-nav-icon-icon2 { background-position: 0 -32px; } .local-nav li .local-nav-icon-icon3 { background-position: 0 -64px; } .local-nav li .local-nav-icon-icon4 { background-position: 0 -96px; } .local-nav li .local-nav-icon-icon5 { background-position: 0 -128px; } /* 主导航栏 */ nav { border-radius: 8px; margin: 3px 4px 0; } .nav-common { display: flex; height: 88px; border-radius: 8px; background-color:rgb(155, 48, 66); } .nav-common:nth-child(1) { background: -webkit-linear-gradient(left, #ef5a55, #fa994d); } .nav-common:nth-child(2) { background: -webkit-linear-gradient(left, #4b90ed, #53bced); } .nav-common:nth-child(3) { background: -webkit-linear-gradient(left, #34c2a9, #6cd559); } .nav-common:nth-child(2) { margin: 4px 0; } .nav-items { flex: 1; display: flex; flex-direction: column; } .nav-items a { line-height: 44px; align-items: center; text-align: center; flex: 1; color: #fff; font-size: 14px; /* 文字阴影 */ text-shadow: 1px 1px rgb(0,0,0,.2); } .nav-items a:first-child { border-bottom: 1px solid #fff; } .nav-items:first-child a { border-bottom: none; background: url(../images/hotel.png) no-repeat bottom center; background-size: 121px auto; } .nav-items:nth-child(-n+2){ border-right: 1px solid #fff; } /* 侧导航栏 */ .subnav-entry { display: flex; flex-wrap: wrap; border-radius: 8px; background-color: #fff; margin: 0 4px; padding: 5px 0; } .subnav-entry li { /* 相对于父亲来说的 */ flex: 20%; } .subnav-entry a { display: flex; flex-direction: column; align-items: center; } .subnav-entry a [class^=subnav-entry-icon] { width: 28px; height: 28px; background-color: pink; margin-top: 4px; background: url(../images/subnav-bg.png) no-repeat; background-size: 28px auto; } .subnav-entry a .subnav-entry-icon2 { background-position: 0 -64px; } .subnav-entry a .subnav-entry-icon3 { background-position: 0 -100px; } /* 销售模块 */ .sales-box { border-top: 1px solid #ccc; margin-top: 4px; background-color:#fff; } .sales-hd { position: relative; height: 44px; border-bottom: 1px solid #ccc; } .sales-hd h2 { position: relative; text-indent: -999px; overflow: hidden;; } .sales-hd h2::after { position: absolute; content: ""; width: 79px; height: 15px; background: url(../images/hot.png) no-repeat 0 -20px; background-size: 79px auto; top: 10px; left: 20px; } .more { position: absolute; right: 5px; top: 8px; background: -webkit-linear-gradient(left, #ff505c, #ff6bc6); border-radius: 15px; padding: 3px 20px 3px 10px; color: #fff; } .more::after { content:""; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg) } .row { display: flex; } .row a { flex: 1; border-bottom: 1px solid #ccc; } .row a:nth-child(1){ border-right: 1px solid #ccc; } .row a img { width: 100%; } /* 返回顶部 */ .goBack { display: none; position: fixed; bottom: 20px; right: 20px; width: 38px; height: 38px; background: url(../images/back.png) no-repeat; background-size: 38px 38px; }