.content{ padding-top: 70px; padding-bottom: 100px; } .container{ position: relative; } .regionTabs{ position: relative; display: flex; align-items: center; flex-wrap: nowrap; margin-top: 40px; margin-bottom: -10px; overflow-x: scroll; &::-webkit-scrollbar{ display: none; } .regionTab{ position: relative; margin-right: 40px; flex-shrink: 0; cursor: pointer; &:last-child{ margin-right: 0; } .txt{ font-size: 18px; line-height: 40px; opacity: 0.55; } .bar{ position: absolute; width: 20px; height: 5px; border-radius: 3px; background: #E60012; margin: auto; // margin-top: 2px; display: none; bottom: 0; left: 50%; margin-left: -10px; } &.active{ .txt{ opacity: 1; } .bar{ display: block; } } } } .contentInfo{ position: relative; display: flex; justify-content: space-between; margin-top: 40px; padding-left: 400px; } .contentInfoBox{ position: absolute; left: 0; top: 0; margin-left: -30px; padding-bottom: 10px; width: 400px; height: 100%; overflow-y: scroll; } .addressBtns{ position: relative; width: 340px; margin-right: 30px; margin-left: 30px; .addressBtn{ padding: 12px 20px; border-radius: 5px; color: #505558; margin-bottom: 15px; cursor: pointer; .title{ font-size: 15px; line-height: 24px; font-weight: bold; } .address{ margin-top: 1px; font-size: 13px; line-height: 24px; font-weight: 300; } .tel{ font-size: 13px; line-height: 24px; font-weight: 300; } &:hover{ background: #fff; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08); } &.active{ background: #E60012; color: #fff; } } } .content2{ background: #F1F3F5; } .mapBox{ position: relative; width: 770px; .mapInfo{ position: relative; overflow: hidden; border-radius: 5px; // box-shadow: 0 0 20px rgba(0, 0, 0, 0.08); } .baiduMap{ position: absolute; height: 100%; width: 100%; left: 0; top: 0; } .mapPic{ width: 100%; display: block; opacity: 0; } .button{ margin-top: 20px; } } #mapFloat{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 10; .floatInfo{ position: absolute; width: 100%; top: auto; left: 0; bottom: -100px; margin: 0; background: #fff; border-radius: 5px 5px 0 0; .titleCon{ position: relative; width: 100%; height: 50px; background: linear-gradient(#ffffff, #F2F5F8); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-radius: 5px 5px 0 0; .title{ font-size: 15px; line-height: 20px; color: #333436; font-weight: bold; } .close{ opacity: 1; width: 28px; } } .infoBox{ position: relative; padding: 20px; padding-bottom: 50px; width: 100%; .mapInfo{ position: relative; width: 100%; height: 100%; } .baiduMap{ position: absolute; width: 100%; height: 100%; } .map{ display: block; width: 100%; opacity: 0; } .address{ font-size: 13px; line-height: 24px; color: #505558; font-weight: 300; margin-top: 10px; } .tel{ font-size: 13px; line-height: 24px; color: #505558; font-weight: 300; margin-top: 5px; } .button{ margin-top: 10px; } } } } @media (max-width: 767px) { .content{ padding-top: 40px; padding-bottom: 40px; } .contentInfo{ padding-left: 0; display: block; margin-top: 20px; } .contentInfoBox{ position: relative; margin-left: 0; width: 100%; overflow: initial; } .addressBtns{ margin: 0; width: 100%; } .regionTabs{ margin-top: 30px; } }