diff --git a/css/mobile-first.css b/css/mobile-first.css index d8e694d..8b5e3f7 100644 --- a/css/mobile-first.css +++ b/css/mobile-first.css @@ -63,20 +63,35 @@ z-index: 9;} .updated_news a { color: #fff;} .bottom_why_us {background: url(https://data.asiahighlights.com/image/about/ah-bottom-why-us-bg-pc.jpg) center #565656; background-size: cover; - height: 580px; + height: 500px; padding-top: 50px;} .bottom_why_us h2 {text-align: center; - color: #fff;} + color: #fff; + padding-top: 40px;} table.why_us_table { width: 1140px; - margin: 40px auto 0 auto; + margin: 20px auto 0 auto; color: #fff;} .bottom_why_us_content { text-align: center; padding: 0 15px; height: 335px;} .bottom_why_us_content img {width: 60px; margin: 0 auto;} - .bottom_why_us_content h3 {font-size: 21px; - margin-top: -5px;} + .bottom_why_us_content h3 {font-size: 21px; margin-top: -25px;} .bottom_why_us_content p {font-size: 18px;} + .bottom_destinations { background: #333; + padding: 50px 0 30px 0; + color: #fff; + position: relative;} + .bottom_destinations ul { display: inline-block;} + .bottom_destinations ul li a { color: #fff; text-decoration: none;} + .bottom_destinations ul li { font-family: 'Goudy Old Style'; + border-left: 5px solid #862424; + padding-left: 15px; + font-size: 18px; + font-weight: 600; + margin-bottom: 10px !important; + list-style: none; + margin-right: 40px;} + .destination_links { width: 100%;} .web_cookie { background-color: #f1f1f1; position: fixed; bottom: 0; @@ -115,20 +130,22 @@ z-index: 9;} font-weight: 400; } .adsbygoogle { height:auto !important; margin:50px 0 !important;} -#videoPlayer { position:inherit !important; min-width: 100%; } +#videoPlayer { position:inherit !important; min-width: 100%; border-radius: 6px; } a.infocustomize { font-size: 16px; color: #fff; - padding: 4px 7px; + padding: 4px 15px; background: #ad1818; border-radius: 25px; text-decoration: none; + font-weight: 600; + text-transform: uppercase; } .headerbar { z-index: 999; } .start-nav-item { - text-transform: capitalize; + text-transform: none; } .start-nav-item a:hover { border-bottom: none !important; @@ -137,6 +154,13 @@ a.infocustomize { width: 30%; height: 30px; } +.guide_block {width: 31%; + display: inline-block; + float: left; + margin-right: 28px;} + .navisgation_title_pc { color: #ad1818; border-bottom: 1px solid #d1d1d1; padding-bottom: 5px; margin-bottom: 10px; font-size: 18px; font-family: 'Goudy Old Style'; font-weight: 600;} + ul.guide_links {padding-left: 0;} + ul.guide_links li {width: 100%; margin-bottom: 3px;} .bottommedia { width: 50%; float: left; @@ -153,7 +177,8 @@ a.infocustomize { min-height: 90px; margin-bottom: 30px; position: relative; -padding: 30px 15px 15px 15px;} +padding: 30px 15px 15px 15px; +border-radius: 10px;} .whatsnew img {position: absolute; top: -75px;} @@ -225,7 +250,7 @@ table.infotable th, table.monthWeather th { font-size: 20px; line-height: 25px; } -table.infotable th a, table.monthWeather th a { color: #fff; } + table.infotable td, table.monthWeather tr td { padding: 15px; border-right: 1px solid #c9c9c9; @@ -333,7 +358,7 @@ min-height: 590px;} .articlenext img { border-radius: 6px 6px 0 0;} .infotailor { background: #ececec; - height: 355px; + height: 280px; position: relative; z-index: 9; } @@ -436,6 +461,7 @@ img.bottomleft { border-left: 5px solid #ad1818; font-weight: 600; background: #f6f6f6; + margin-bottom: 10px; padding: 5px 15px;} .info_reco_tours em {color: #ad1818; margin-right: 10px; @@ -534,7 +560,7 @@ float: left;} border-radius: 4px; text-align: center; color: #000; - padding: 15px 10px; + padding: 10px; line-height: 18px; } .age_range p { @@ -877,19 +903,19 @@ table.story_table {width: 600px; position: relative;} .tourdetailinfo { padding: 15px; background: #f6f6f6; - height: 300px; + height: 280px; } .tourdetailinfo p { padding: 0; text-align: center;} .tourdetailinfo ul.infolist li {height: 45px !important;} .expatstourname { display: block; text-align: center; - font-size: 20px; - line-height: 23px; + font-size: 19px; + line-height: 21px; font-weight: 600; font-family: 'Goudy Old Style'; - margin-bottom: 25px; - height: 70px; + margin-bottom: 15px; + height: 65px; } .expatstourname a { color: #000; text-decoration: none;} @@ -1113,21 +1139,22 @@ input.dateicon {font-size: 16px; } /*目的地推荐*/ .CityTag { - width: calc(100% - 40px); - color: #fff; - position: absolute; - padding: 15px 20px; - text-shadow: 1px 1px 1px #000; - font-family: 'Goudy Old Style'; - font-weight: 600; - bottom: 0; - font-size: 21px; + width: calc(100% - 30px); + color: #fff; + position: absolute; + padding: 15px; + text-shadow: 1px 1px 1px #000; + font-family: 'Goudy Old Style'; + font-weight: 600; + bottom: 0; + font-size: 20px; + line-height: 20px; } - .CityTag strong {font-size: 26px; + .CityTag strong {font-size: 25px; display: block; font-family: 'Goudy Old Style'; - margin-bottom: 7px; - line-height: 28px;} + margin-bottom: 5px; + line-height: 25px;} .CityTag:hover {text-decoration: underline;} /*trip notes折叠*/ #expandAll { @@ -1143,8 +1170,8 @@ input.dateicon {font-size: 16px; clear: both; border-top: 1px solid #d1d1d1; cursor: pointer; - padding: 5px 15px 0 0; - line-height: 30px; + padding: 10px 25px 0 0; + line-height: 27px; } .tripnotes .CloseIcon { background: url(//data.chinahighlights.com/pic/close-icon-bj-1.png) no-repeat; @@ -1154,7 +1181,7 @@ input.dateicon {font-size: 16px; position: relative; float: right; display: block; - top: 5px; + top: 0; } .tripnotes .OpenIcon { background: url(//data.chinahighlights.com/pic/open-icon-bj-1.png?20180227) no-repeat; @@ -1164,7 +1191,7 @@ input.dateicon {font-size: 16px; position: relative; float: right; display: block; - top: 5px; + top: 0; } .tour_img_title { position: relative;} .city_reco_tour { width: calc(100% - 40px); @@ -1175,13 +1202,12 @@ input.dateicon {font-size: 16px; background: #f6f6f6;} /* tour集合页元素 结束 */ - /* Menu styles */ .menu { position: fixed; background: #333; - z-index: 1000; - top: 55px; + z-index: 9999999; + top: 49px; width: 100%; height: 100vh; -webkit-transform: translate3d(-100%, 0, 0); @@ -1714,11 +1740,11 @@ font-size: 18px; .resultred{ font-size: 22px; color: #ad1818; font-weight: 600;} -ul.zodiacsignlist { +ul.zodiacsignlist, ul.ah_list { display: inline-block; width: 100%; padding-left: 0;} - ul.zodiacsignlist li { + ul.zodiacsignlist li, ul.ah_list li { cursor: pointer; font-size: 18px; list-style: none; @@ -1732,8 +1758,8 @@ ul.zodiacsignlist { display: inline-block; width: 19.4%; } - ul.zodiacsignlist li.active { background: #ad1818;} - ul.zodiacsignlist li a { color: #fff;} + ul.zodiacsignlist li.active, ul.ah_list li.active { background: #ad1818;} + ul.zodiacsignlist li a, ul.ah_list li a { color: #fff;} .contactwechat { height: 100px; margin: 30px auto 35px auto; @@ -1830,8 +1856,8 @@ display: block; margin-bottom: 10px; } .numberBtn { -width: 100%; -overflow: hidden; + width: 100%; + display: flex; } .minaddBtn { background: #FFF; @@ -1846,14 +1872,14 @@ padding: 5px 10px 5px 10px !important; margin-right: 5px; } .kidNum, .number { -width: 45% !important; +width: 35% !important; text-align: center; border: 1px solid #d1d1d1; border-radius: 4px; height: 30px; font-size: 25px; position: relative; -top: -5px; +top: -3px; padding: 10px !important; } .kids_age { @@ -1907,7 +1933,7 @@ font-size: 27px;} } #main_content_next { clear: both; background: #fff;} .zodiacsign { width: 15%;} - ul.zodiacsignlist li { width: 123px;} + ul.zodiacsignlist li, ul.ah_list li { width: 123px;} .infotopimage img { width: 750px !important; margin-top: 30px; border-radius: 6px;} .authorupdate { margin: -30px 0 40px 0;} .tournavi { @@ -1967,7 +1993,7 @@ font-size: 27px;} right: 0; left: 0; color: #000; - padding-top: 130px; + padding-top: 85px; } #main_content_pc {float: left; width: 1140px; } @@ -1995,11 +2021,11 @@ font-size: 27px;} margin: 0; padding: 0; } - .chinatourspc, .destinationspc, .travelguidepc, .culturepc, .searchpc { - padding-top: 15px; - background: #fff; - height: 190px; - box-shadow: 0px 2px 4px 0px #d1d1d1;} + .chinatourspc, .destinationspc, .travelguidepc, .culturepc { + padding-top: 25px; + background: #fff; + height: 215px; + box-shadow: 0px 2px 4px 0px #d1d1d1;} .siteSearch { float: left; margin-top: 14px; @@ -2044,8 +2070,8 @@ font-size: 27px;} } ul.list-reset { background: none; - top: 30px; - width: 1000px; + top: 15px; + width: 1200px; position: absolute; padding-left: 150px; } @@ -2070,6 +2096,27 @@ font-size: 27px;} padding: 100px 15px; margin-bottom: -70px; } + .newsletter_form {margin-bottom: 0; background: url(https://data.chinahighlights.com/image/forms/ch-bottom-newsletter-bg-beijing-great-wall.jpg) no-repeat; background-size: cover;} + .newsletter_form input {width: 45%; + float: left; + height: 40px; + border-radius: 4px; + border: 1px solid #d1d1d1; + font-size: 17px; + padding: 0 10px; + margin: 0 10px 30px 10px;} + .newsletter_form button { background: #ad1818; + color: #fff; + margin-top: 30px; + font-size: 20px; + border-radius: 30px; + border: none; + padding: 6px 0; + width: 30%; + font-family: 'Goudy Old Style'; + font-weight: 600; + margin: 0 auto; +display: block;} img.chinahighlightslogo { padding-left: 0; height: 65px; @@ -2087,7 +2134,7 @@ font-size: 27px;} color: #fff; float: left; margin-right: 20px; - font-size: 17px; + font-size: 16px; } .pcnavibutton { float: right; @@ -2156,6 +2203,7 @@ img.navimenu { position: relative; .detailtopbanner img, .infotopimage img { width: 100%;} .infobottom {background: #3d3d3d; color: #fff; + margin-top: -5px; clear: both; padding: 50px 0; position: relative;} @@ -2197,19 +2245,33 @@ img.bottomlogocenter {display: block;margin: 0 auto;} border: 40px solid; border-color: #fff transparent transparent transparent; } +.infotailorword { top: calc(100% - 200px);font-size: 23px;line-height: 27px;} table.why_us_table { width: 1060px;} -.bottom_why_us { height: 590px;} +.bottom_why_us { height: 500px;} .bottom_why_us_content { padding: 0; height: auto;} .bottom_why_us_content h3 { padding-top: 25px;} .web_cookie { padding-bottom: 50px; width: 100%;} -.wechat_button {bottom: 50px; right: 25px;} -.wechat_button a { width: 66px; +.wechat_button { bottom: 15px; + right: 25px; + width: calc(100% - 35px); + height: 30px; + z-index: 999999;} +.wechat_button a { width: 100%; text-transform: capitalize; - font-size: 19px;} + font-size: 18px; + height: 27px; + border-radius: 30px; + padding-top: 8px; + font-family: 'Goudy Old Style'; + box-shadow: 1px 1px 4px 2px #d1d1d1;} ul.infolist, ul.drop1, ul.ghlist { margin: 0 15px 0 30px; } .updated_news {top: 49px; padding: 7px 15px; width: calc(100% - 30px);line-height: 20px;} .infotopimage img { margin-bottom: 20px;} .articlenexttitle { background: #f6f6f6;} +.bottom_destinations { display: inline-block;} +.destination_links {width: 50%; float: left;} +.bottom_destinations ul { padding: 0 20px;} +.bottom_destinations ul li { margin-right: 0;} /*信息集合页*/ .destinations { padding: 0;} .all_width_content_1200, .list_content, .cruise_index_top_info { width: 100%;} @@ -2227,7 +2289,7 @@ ul.infolist, ul.drop1, ul.ghlist { margin: 0 15px 0 30px; } .tourbutton a { color: #ad1818; text-align: center;} .grouptours, .feedback_content_right, .destinations, .chinamap_travelguide, .poparticle { width: 100%;} .chinamap_travelguide { margin-top: 0;} - .detailtopbanner {padding-top: 54px;} + .detailtopbanner {padding-top: 49px;} .beijingexperienceinfo { width: calc(100% - 20px);} .experience { margin-right: 0;} .experienceimg { flex-direction: column;} diff --git a/js/train-mobile/train-search.css b/js/train-mobile/train-search.css index 7e16f35..366e8d4 100644 --- a/js/train-mobile/train-search.css +++ b/js/train-mobile/train-search.css @@ -891,17 +891,48 @@ span.flatpickr-weekday { } } /*搜索框*/ -.trainsearch-red{ background:#dedede;padding:20px; } -.trainsearch-red .serch-title{ display:block; text-align:center; font-size:24px; color:#a31022; margin-bottom:15px; } -ul.traintype{ display:block; margin-bottom:18px; min-height:38px; padding:0px;} -ul.traintype li{background: #cecece none repeat scroll 0 0; display: block;float: left; padding: 5px 15px;color:#545454; font-size: 18px;} -ul.traintype li.active {background: #dedede none repeat scroll 0 0;} +.trainsearch-red{ background:#ececec;padding:50px 20px 20px 20px; } +.trainsearch-red:after { + content: ' '; + position: absolute; + left: calc(100% - 55%); + right: auto; + top: 0px; + bottom: auto; + border: 35px solid; + border-color: #fff transparent transparent transparent; +} +.trainsearch-red .serch-title{ display: block; + text-align: center; + font-size: 25px; + margin-bottom: 15px; + font-family: 'Goudy Old Style'; + font-weight: 600;} +ul.traintype{ display:block; margin-bottom:10px; min-height:38px; padding:0px;} +ul.traintype li{ background: #fff; + display: block; + float: left; + padding: 5px 15px; + color: #000; + border: 1px solid #d1d1d1; + margin-right: 10px; + border-radius: 5px;} +ul.traintype li.active {background: #ad1818; + color: #fff;} .trainsearch-red .form-control {width:100%; box-sizing: border-box; height: 40px; padding: 8px 12px; font-size: 16px;line-height: 1.428571429; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; } .trainsearch-red input.departtime{ background:url(https://data.chinahighlights.com/css/images/calender.gif) no-repeat 95% 10px #fff;} -.trainsearch-red input.searchButtonLong{ background:#a31022; border-radius:4px; width:100%; font-size:18px; color:#fff; border:none; text-align:center; padding:8px 0;cursor: pointer} +.trainsearch-red input.searchButtonLong{ background: #a31022; + border-radius: 4px; + width: auto; + font-size: 17px; + color: #fff; + border: none; + text-align: center; + padding: 9px 30px; + cursor: pointer;} .flex-row {display: flex; flex-direction: row; flex-wrap:wrap; align-items: stretch;justify-content:space-between; clear: both; margin-right: -20px;} .flex-row:after {content: ""; flex: auto;} -.flex-col-4 { width: calc((100% - 20px * 4) / 4);margin-bottom:20px; margin-right:20px;} +.flex-col-4 { width: calc((100% - 10px * 4) / 4);margin-bottom:20px; margin-right:10px;} @media (max-width: 768px) {.flex-row {margin-right:0;} .flex-col-4{width: 100%; margin-bottom:20px;margin-right:0;}} .trainsearch-red .hidden{display:none;} .traintype li {cursor:pointer;} @@ -938,6 +969,7 @@ ul.traintype li.active {background: #dedede none repeat scroll 0 0;} #hotStation div{ cursor: pointer; background-color: #fff; + font-size: 16px; } #hotStation div:hover{ background-color: #e9e9e9;