* { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; } body { min-width: 1366px; } .head { width: 100%; height: 107px; background-color: #2775CC; overflow: hidden; display: flex; justify-content: space-between; } /* 宸﹁竟鐨刲ogo鍜屾枃瀛� */ .left-logo { width: 446px; margin-left: 31px; margin-top: 17px; } .logo-img { width: 100%; height: 67px; } /* 鍙宠竟鐨勬悳绱㈡ */ .right-search { width: 70%; margin: 8px 0 20px 59px; } .search-change { height: 30px !important; border: none !important; } .search-change>li { width: 73px !important; height: 30px !important; line-height: 30px !important; padding: 0 !important; background-color: #E9F3FF !important; color: #2775CC !important; margin-right: 3px !important; } .search-change>.layui-this { background-color: #FFFFFF !important; color: #2775CC !important; } .search-change>.layui-this:after { border: 0px !important; } .content-input { padding: 0px !important; } .input-icon { width: 493px; height: 40px; background: #FFFFFF; display: flex; justify-content: space-around; align-items: center; } .inp { width: 75%; height: 40px; border: none; outline: none; padding: 0 0 0 10px; } .inp-icon1 { width: 26px; height: 26px; cursor: pointer; } .inp-icon2 { width: 26px; height: 26px; cursor: pointer; } .inp-icon3 { width: 26px; height: 26px; cursor: pointer; } .input-icon>input { border: none; outline: none; } /* 鍏氦涓棿鐨勫垏鎹㈡寜閽� */ #change-word { width: 30px; height: 21px; cursor: pointer; background: url(../img/switch.png) no-repeat center; } /* 鐐瑰嚮鑷┚涓棿鐨勮緭鍏ユ寜閽� */ #word-change { width: 30px; height: 21px; cursor: pointer; background: url(../img/switch.png) no-repeat center; } /* 涓棿鐨勫唴瀹归儴鍒� */ .main { width: 100%; height: calc(100vh - 107px); display: flex; } .hidePadding { padding: 0px !important; } /* 鍙楃悊鍦烘墍鍜屾煡闃呭満鎵� */ .top-title { width: 100%; height: 50px !important; margin-top: 17px !important; } .top-title>li { width: 35% !important; font-size: 20px !important; text-align: center !important; float: left !important; color: #333 !important; cursor: pointer !important; margin-left: 6% !important; display: flex !important; align-items: center !important; justify-content: center !important; } .top-title>li>img { margin-right: 5px; } /* 鍙楃悊鍦烘墍鍜屾煡闃呭満鎵�鐨勫浘鏍� */ .hideIcon { display: none; } .layui-tab-brief>.layui-tab-title .layui-this { color: #2775CC !important; font-weight: bold !important; } .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after { border-bottom: 4px solid #2775CC !important; margin-top: 10px !important; } /* 鍦板尯鍒囨崲 */ .second-title>.layui-tab-content { height: 0 !important; } .layui-tab { height: 0 !important; } .second-title { width: 100% !important; height: 64px !important; border-bottom: 10px solid #EEEEEE !important; } .second-title>li { width: 18% !important; background-color: #FFFFFF !important; border: 1px solid #CCCCCC !important; margin-left: 16% !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; } .second-title>.layui-this { width: 18% !important; color: #2775CC !important; font-weight: bold !important; background-color: #E9F3FF !important; border: 1px solid #2775CC !important; } .second-title>.layui-this:after { border: none !important; } .second-title2>.layui-tab-content { height: 0 !important; } .second-title2 { width: 100% !important; height: 64px !important; border-bottom: 10px solid #EEEEEE !important; } .second-title2>li { width: 18% !important; background-color: #FFFFFF !important; border: 1px solid #CCCCCC !important; margin-left: 16% !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; } .second-title2>.layui-this { width: 18% !important; color: #2775CC !important; font-weight: bold !important; background-color: #E9F3FF !important; border: 1px solid #2775CC !important; } .second-title2>.layui-this:after { border: none !important; } .textFirst { width: 95%; margin: 22px auto 30px; cursor: pointer; } .textFirst>li { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .text-first { width: 95%; min-width: 350px; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; font-size: 16px; font-family: Source Han Sans SC; color: #333; margin: 19px auto; border-bottom: 1px solid #EEEEEE; padding: 0 10px; box-sizing: border-box; } .text-first p { width: 24%; margin-bottom: 20px; cursor: pointer; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .tab { color: #2775CC; } .typeFirst { width: 60px; height: 60px; margin-right: 20px; background-color: #2775CC; color: #fff; text-align: center; border-radius: 30px; } .othertypeFirst{ line-height: 60px; } .tcstyletypeFirst{ box-sizing: border-box; padding: 13px 0; } .jzdz{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .differentdz { width: 100%; margin: 0 auto; color: #666666; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: flex; } .change-but { width: 95%; margin: 0 auto 20px !important; } .but-bus { width: 64px; height: 30px; background: #FFFFFF; border: 1px solid #ccc; outline: none; cursor: pointer; margin-right: 5px; } .but-car { width: 64px; height: 30px; background: #FFFFFF; border: 1px solid #ccc; outline: none; cursor: pointer; } .butBus { width: 64px; height: 30px; background: #FFFFFF; border: 1px solid #ccc; outline: none; cursor: pointer; margin-right: 5px; } .butCar { width: 64px; height: 30px; background: #FFFFFF; border: 1px solid #ccc; outline: none; cursor: pointer; } .hide1 { width: 300px; height: 40px; display: none; position: relative; background-color: rgba(253, 253, 253, .7); margin-top: 10px; } .hide1::after { content: ""; width: 0; height: 0; border: 10px solid transparent; border-bottom-color: rgba(253, 253, 253, .7); position: absolute; top: 0; left: 21px; margin-top: -20px; } .hide2 { width: 300px; height: 40px; display: none; position: relative; margin-top: 10px; background-color: rgba(253, 253, 253, .7); } .hide2::after { content: ""; width: 0; height: 0; border: 10px solid transparent; border-bottom-color: rgba(253, 253, 253, .7); position: absolute; top: 0; left: 91px; margin-top: -20px; } .inps { width: 160px; height: 22px; border: 1px solid #ccc; margin: 10px 6px 0 0; padding-left: 15px; position: absolute; left: 0px; } .inpst { width: 160px; height: 22px; border: 1px solid #ccc; margin: 10px 6px 0 0; padding-left: 15px; position: absolute; left: 0px; } .change-buts { width: 30px; height: 21px; cursor: pointer; background: url(../img/switch.png) no-repeat center; margin: 11px 0 0 0; position: absolute; left: 185px; } .change-buts2 { width: 30px; height: 21px; cursor: pointer; background: url(../img/switch.png) no-repeat center; margin: 11px 0 0 0; position: absolute; left: 185px; } .inp-text { height: 22px; margin: 11px 0 0 0; position: absolute; left: 220px; } .inp-text2 { height: 22px; margin: 11px 0 0 0; position: absolute; left: 220px; } .imgSearch { width: 16px; height: 16px; margin: 13px 0 0 0; cursor: pointer; position: absolute; right: 10px; } .imgSearch2 { width: 16px; height: 16px; margin: 13px 0 0 0; cursor: pointer; position: absolute; right: 10px; } .hide3 { width: 300px; height: 40px; display: none; position: relative; background-color: rgba(253, 253, 253, .7); margin-top: 10px; } .hide3::after { content: ""; width: 0; height: 0; border: 10px solid transparent; border-bottom-color: rgba(253, 253, 253, .7); position: absolute; top: 0; left: 21px; margin-top: -20px; } .hide4 { width: 300px; height: 40px; display: none; position: relative; margin-top: 10px; background-color: rgba(253, 253, 253, .7); } .hide4::after { content: ""; width: 0; height: 0; border: 10px solid transparent; border-bottom-color: rgba(253, 253, 253, .7); position: absolute; top: 0; left: 91px; margin-top: -20px; } .inps { width: 160px; height: 22px; border: 1px solid #ccc; margin: 10px 6px 0 0; padding-left: 15px; position: absolute; left: 0px; } .inpst { width: 160px; height: 22px; border: 1px solid #ccc; margin: 10px 6px 0 0; padding-left: 15px; position: absolute; left: 0px; } .change-buts { width: 30px; height: 21px; cursor: pointer; background: url(../img/switch.png) no-repeat center; margin: 11px 0 0 0; position: absolute; left: 185px; } .change-buts2 { width: 30px; height: 21px; cursor: pointer; background: url(../img/switch.png) no-repeat center; margin: 11px 0 0 0; position: absolute; left: 185px; } .inp-text { height: 22px; margin: 11px 0 0 0; position: absolute; left: 220px; } .inp-text2 { height: 22px; margin: 11px 0 0 0; position: absolute; left: 220px; } .imgSearch { width: 16px; height: 16px; margin: 13px 0 0 0; cursor: pointer; position: absolute; right: 10px; } .imgSearch2 { width: 16px; height: 16px; margin: 13px 0 0 0; cursor: pointer; position: absolute; right: 10px; } .text-third { width: 100%; height: 20px; line-height: 20px; background-color: #f4f4f4; text-align: center; color: #666; font-size: 12px; } .textThird { width: 100%; height: 20px; line-height: 20px; background-color: #f4f4f4; text-align: center; color: #666; font-size: 12px; } .textThird2 { width: 100%; height: 20px; line-height: 20px; background-color: #f4f4f4; text-align: center; color: #666; font-size: 12px; } .show-second { display: none; } .show-third { display: none; } .show-fourth { display: none; } .title-second { width: 86%; margin: 10px auto 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #CCCCCC; padding-bottom: 10px; } .textSecond { width: 100%; margin: 22px auto 30px; } .textFourth { width: 100%; height: 20px; line-height: 20px; background-color: #f4f4f4; text-align: center; color: #666; font-size: 12px; } .title-second>h6 { font-size: 16px; font-weight: 400; color: #2775CC; } .btn-back { width: 64px; height: 30px; background-color: #FFF; border: 1px solid #CCCCCC; outline: none; font-size: 14px; cursor: pointer; } /* .backBtn { width: 64px; height: 30px; background-color: #FFF; border: 1px solid #CCCCCC; outline: none; font-size: 14px; cursor: pointer; } */ .content-second { width: 86%; height: 37px; margin: 10px auto; background-color: #EEEEEE; display: flex; align-items: center; justify-content: flex-start; } #start { margin-left: 10px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #end { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #start2 { margin-left: 10px; } .content-second>img { width: 40px; height: 20px; margin: 2px 5px 0 5px; } .content-third { width: 86% !important; height: 37px !important; margin: 10px auto !important; } .content-title { border-bottom: none !important; display: flex; min-width: 320px !important; } .content-title>li { width: 24% !important; /* width: 17.77% !important; */ /* width: calc(100% / 4) !important; */ border: 1px solid #eee !important; color: #666666 !important; } .content-title>.layui-this:after { border: none; } /* .content-title>.layui-tab-title>.layui-this { background-color: #E9F3FF !important; color: #2775CC !important; } */ .content-title>.layui-this { background-color: #E9F3FF !important; color: #2775CC !important; } .line { width: 100%; margin: 0 0 20px 0; border: 1px solid #e3e3e3; overflow: hidden; } .line-first { width: 100%; overflow: hidden; border-bottom: 1px solid #e3e3e3; cursor: pointer; padding: 10px 0 10px 5px; } .shows { background-color: #E9F3FF; } .line-title { width: 100%; margin: 0 0 5px 0; display: flex; justify-content: flex-start; overflow-y: auto; overflow-x: hidden; } .line-title>p { font-size: 16px; color: #2775CC; } .line-title>div { width: 40px; height: 15px; margin: 3px 5px 0 5px; background: url(../img/right-blue.png) no-repeat center; } .mile { width: 100%; display: flex; justify-content: flex-start; } .mile>p { margin-right: 5px; color: #666666; font-size: 16px; } .mile>span { display: inline-block; margin-right: 5px; color: #666666; font-size: 16px; } .line-hide { margin: 10px 0 0 0; display: none; } .layui-timeline-axis { color: #D3D3D3 !important; } .layui-timeline-axis:hover { color: #D3D3D3 !important; } .main-third { border-bottom: none !important; display: flex !important; } .main-third>li { width: 33% !important; border: 1px solid #eee; color: #666666 !important; } .main-third>.layui-this:after { border: none; } .main-third>.layui-this { background-color: #E9F3FF !important; color: #2775CC !important; } .back-btn { width: 64px; height: 30px; background-color: #FFF; border: 1px solid #CCCCCC; outline: none; font-size: 14px; cursor: pointer; } .right-map { width: 73%; height: calc(100vh - 107px); overflow: hidden; } .titleFirstJZ>li { font-size: 14px; margin-bottom: 10px; color: #333333; } .titleFirstJZ>li>p { width: 380px; margin: 0 auto; color: #333333; } .titleFirstJZ>li>p>span { color: #2775CC; font-size: 14px; } .xz-active { background-color: #2775CC; color: #FFFFFF; } /* @media screen and (max-width: 1366px) { .content-title>li { padding: 0px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; box-sizing: border-box; width: 23.79% !important; } } @media screen and (min-device-width: 375px) and (max-device-width: 768px) { body { min-width: 375px; height: 100%; } .left-logo { transform: scale(0.8); transform-origin: left top; margin-left: 0; margin-right: 5px; } .right-search { transform: scale(0.8); transform-origin: left top; margin: 8px 0 20px 0px; height: 79px; } .left-map { width: 44%; position: absolute; z-index: 999; left: 0; background: #fff; } .right-map { width: 100%; height: 100%; } .top-title>li { margin-left: 2% !important; } .second-title { margin: 0px !important; } .second-title>li { margin-left: 10% !important; } .layui-unselect { display: none; } .text-first { min-width: 327px; } .content-title { min-width: 300px !important; } .main-third { min-width: 284px !important; } .main-third>li { padding: 0px !important; } .input-icon { width: 350px !important; } .hide1 { width: 290px; } .hide2 { width: 290px; } } @media screen and (max-device-width: 375px) { html { height: 100%; } body { height: 100%; } .head { width: 100% !important; } .left-logo { transform: scale(0.8); transform-origin: left top; margin-left: 0; margin-right: 5px; } .right-search { transform: scale(0.8); transform-origin: left top; margin: 8px 0 20px 0px; } .left-map { width: 44%; position: absolute; z-index: 999; left: 0; background: #fff; } .right-map { width: 100%; height: 100%; } .top-title>li { margin-left: 2% !important; } .second-title { margin: 0px !important; } .second-title>li { margin-left: 10% !important; } .layui-unselect { display: none; } .text-first { min-width: 327px; } .content-title { min-width: 300px !important; } .main-third { min-width: 284px !important; } .main-third>li { padding: 0px !important; } .input-icon { width: 350px !important; } .hide1 { width: 290px; } .hide2 { width: 290px; } } */