page{ font-size: 16px; } ax-body{ display: block; height: 100%; background: linear-gradient(to bottom,#C7FFFD,#FFF,#E6F3FF,#8BECFF,#72B8FE,#86D3FD); } ax-body .ax-body .__root{ display: flex; flex-direction: column; padding-left: 0 !important; padding-right: 0 !important; position: relative; overflow: hidden !important; padding-bottom: var(--app-navigation-heiht) !important; } .main-scroll-wrap{ flex: 1; position: relative; } .root-scroll{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .contet-root{ height: 100%; } .base{ padding-left: 10px; padding-right: 10px; } /* 导航栏 */ app-navigation{ display: block; position: fixed; left: 0; right: 0; bottom: 0; } /* 标题栏 */ .titlebar{ display: flex; align-items: center; padding-left: 3px; } .titlebar .page-title{ width: 133px; height: 33px; } .titlebar .page-subtitle{ font-size: 12px; } /* 定位城市 */ .search-view{ position: -webkit-sticky; position: sticky; top: 0; z-index: 90; } .locate-city{ display: flex; align-items: center; margin-right: 10px; } .locate-city ._icon{ display: inline-block; width: 20px; height: 20px; margin-right: 5px; } /* 搜索条 */ .search-bar{ flex: 1; display: flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid #2B303A; background-color: #fff; } .search-bar input{ flex: 1; display: block; font-size: 14px; background-color: transparent; } .search-bar ._icon-search{ display: inline-block; width: 20px; height: 20px; margin-left: 10px; } /* 快捷栏 */ .shortcut-bar{ display: flex; align-items: center; justify-content: space-between; padding: 15px 10px; } .shortcut-bar ._item{ display: flex; align-items: center; justify-content: center; flex-direction: column; } .shortcut-bar ._item ._icon{ width: 40px; height: 40px; } .shortcut-bar ._item ._name{ font-size: 12px; margin-top: 6px; } /* 版头广告 */ .banner{ width: 100%; height: calc((100vw - 20px) * (5/27)); } .banner .swiper-item{ display: flex; width: 100%; } .banner .swiper-item .swiper-item-image{ display: block; width: 100%; border-radius: 5px; } /* 选项条 */ .options-bar{ align-items: center; padding: 15px 0px; font-size: 14px; } .options-bar .option-item{ display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: inherit; } .options-bar .option-item + .option-item{ margin-left: 30px; } .options-bar .option-item.active{ font-size: 18px; font-weight: bold; } .options-bar .option-item::after{ content: ''; display: block; width: 30px; height: 6px; -webkit-transform: translateY(5px) scaleX(0); transform: translateY(5px) scaleX(0); border-radius: 10pc; background: linear-gradient(to right,#8FF8FB,#47AEFF); transition: all 400ms ease; } .options-bar .option-item.active::after{ -webkit-transform: translateY(5px) scaleX(1); transform: translateY(5px) scaleX(1); } .options-bar .separ{ flex: 1; } .options-bar .separ::before{ content: ''; display: block; height: 13px; border-left: 1px solid #3EB6F8; } .options-bar .map-mode{ color: #3EB6F8; } .options-bar .map-mode ._icon{ width: 17px; height: 17px; margin-right: 5px; } /* 电站列表 */ .list-scroll-wrap{ height: var(--list-heiht); position: relative; } .list-scroll-wrap > .list-scroll{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .list{ padding: 10px; } .list .item{ display: block; border-radius: 8px; background-color: #fff; box-shadow: 0 1px 10px rgba(0, 39, 52, 0.1); overflow: hidden; } .list .item + .item{ margin-top: 10px; } .list .item .contet{ padding: 10px; background: #F6F9FE url(data:image/png;base64,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) no-repeat center; } .list .item .name{ display: flex; font-weight: bold; } .list .item .name > .txt{ flex: 1; line-height: 1.5em; } .list .item .name > .icon{ display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; background: linear-gradient(to bottom,#2A67F0,#769FFC); margin-right: 10px; } .list .item .name > .icon image{ display: block; width: 10px; } .list .item .parkade{ display: flex; font-size: 12px; color: #aaa; margin-top: 15px; } .list .item .parkade > .txt{ flex: 1; line-height: 1.5em; } .list .item .parkade > .icon{ display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background-color: #5BE7FF; margin-right: 10px; } .list .item .parkade > .icon image{ display: block; width: 10px; } .list .item .info{ margin-top: 15px; } .list .item .info .charge{ display: inline-flex; align-items: center; justify-content: center; } .list .item .info .charge > .icon{ display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: #fff; font-size: 13px; border-radius: 4px; background: linear-gradient(to bottom,#4FEF86,#00AA3A); } .list .item .info .charge > .icon.blue{ background: linear-gradient(to bottom,#8EB1FF,#3071FF); } .list .item .info .charge > .value{ margin-left: 5px; } .list .item .info .charge > .max{ color: #aaa; font-size: 12px; } .list .item .info .charge > .max::before{ content: '/'; } .list .item .info .charge + .charge{ margin-left: 30px; } .list .item .info .distance{ display: flex; align-items: center; height: 22px; border: 1px solid #3EB6F8; border-radius: 100pc; font-size: 12px; color: #3EB6F8; padding-right: 7px; overflow: hidden; } .list .item .info .distance > .icon{ display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background-color: #3EB6F8; margin-right: 5px; } .list .item .info .distance > .icon image{ display: block; width: 10px; } .list .item .price{ display: flex; align-items: center; justify-content: space-between; background-color: #fff; height: 45px; font-size: 14px; padding: 0 10px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.05); } .list .item .price .value{ font-size: 24px; font-weight: bold; } .list .item .price .unit{ margin-left: 10px; } .discount{ flex: 1; text-align: right; padding-right: 5px; } .discount view{ display: inline-flex; align-items: center; height: 22px; border: 1px solid #ccc; border-radius: 5px; font-size: 12px; color: #F59C79; padding: 0 7px; overflow: hidden; }