charge_miniapp/pages/index/index.css

@font-face {
  font-family: "ysbth";
  src: url("ysbth.ttf") format("truetype");
}

page {
  font-size: 16px;
}

ax-body {
  display: block;
  height: 100%;
  background: linear-gradient(
    180deg,
    #c7fffd 0%,
    #97e8fa 10%,
    #f6f6f6 74%,
    #f6f6f6 100%
  );
}

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;
  height: 1200rpx;
}

.root-scroll {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.concat-father {
  position: absolute;
  bottom: 170rpx;
  right: 16rpx;
  z-index: 100;
}

.concat-icon {
  width: 120rpx;
  height: 120rpx;
}

.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: sticky;
  top: 0;
  z-index: 90;
}

.arrears-tips {
  margin: auto;
  margin-top: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: opacity 0.3s;
  opacity: 1;
  width: 702rpx;
  height: 72rpx;
  background: #fff6e8;
  border-radius: 16rpx;
}

.arrears-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.arrears-icon {
  width: 30rpx;
  height: 30rpx;
  margin-left: 20rpx;
}

.arrears-text {
  font-size: 24rpx;
  color: #fab04d;
}

.arrears-btn {
  width: 112rpx;
  height: 48rpx;
  background: #fab14f;
  border-radius: 24rpx;
  font-size: 24rpx;
  color: #ffffff;
  text-align: center;
  line-height: 48rpx;
  margin-right: 20rpx;
}

.locate-city {
  display: flex;
  align-items: center;
  margin-right: 6px;
  justify-content: ;
}

.locate-city ._icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.locate-city .__name {
  margin-bottom: 6rpx;
}

/* 搜索条 */
.search-bar {
  flex: 1;
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
}

.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;
}

.search-map-mode {
  display: flex;
  align-items: center;
  gap: 20rpx;
  width: 220rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 16rpx;
  justify-content: center;
}

.search-map-icon {
  width: 40rpx;
  height: 40rpx;
}

/* 快捷栏 */
.shortcut-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20rpx;
  padding: 15px 0px;
}

.buy-charge-coupon {
  position: relative;
  width: 340rpx;
  height: 376rpx;
  background: #ffffff;
  box-shadow: inset 0rpx 20rpx 40rpx 2rpx rgba(100, 255, 218, 0.26);
  border-radius: 16rpx;
  text-align: center;
}

.coupon-tag {
  position: absolute;
  top: 0;
  right: 0;
  width: 116rpx;
  height: 52rpx;
  background: linear-gradient(90deg, #f32027 0%, #ffaa70 100%);
  border-radius: 0rpx 16rpx 0rpx 16rpx;
  font-size: 28rpx;
  color: #ffffff;
  line-height: 52rpx;
}

.charge-title {
  margin-top: 62rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-left: 24rpx;
}

.title-coupon-text {
  font-family: Consolas, Menlo, "Courier New", monospace;
  font-weight: 800;
  font-size: 34rpx;
  /* font-style: italic; */
}

.title-right-text {
  width: 34rpx;
  height: 34rpx;
  background: #000;
  border-radius: 50%;
  text-align: center;
  line-height: 34rpx;
}

.ax-iconline {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.charge-text-dsc {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #aaaaaa;
  text-align: left;
  margin-left: 24rpx;
}

.charge-coupon-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 290rpx;
  height: 268rpx;
}

.order-center {
  display: flex;
  align-items: center;
  width: 340rpx;
  height: 178rpx;
  background: #ffffff;
  box-shadow: inset 0rpx 20rpx 60rpx 2rpx rgba(100, 234, 255, 0.26);
  border-radius: 16rpx;
}

.order-center-number {
  margin-top: 20rpx;
  margin-left: 24rpx;
  font-size: 28rpx;
  color: #aaaaaa;
}

.order-center-icon {
  width: 100rpx;
  height: 100rpx;
}

.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 / 20)); */
  height: 200rpx;
  border-radius: 10rpx;
  overflow: hidden;
}

.banner .swiper-item {
  display: flex;
  width: 100%;
}

.banner .swiper-item .swiper-item-image {
  display: block;
  width: 100%;
}

/* 选项条 */
.options-bar {
  display: flex;
  align-items: center;
  height: 120rpx;
  gap: 20rpx;
  position: relative;
  z-index: 100;
}

.options-tabs {
  width: 152rpx;
  height: 60rpx;
  background: #ffffff;
  border-radius: 16rpx;
  font-size: 28rpx;
  color: #2b303a;
  text-align: center;
  line-height: 60rpx;
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}

.options-tabs::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(99deg, #8ff8fb 0%, #47aeff 100%);
  border-radius: 16rpx;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 1;
}

.options-tabs text {
  position: relative;
  z-index: 2;
}

.options-bar .options-tabs.active {
  width: 152rpx;
  height: 60rpx;
  background: #ffffff;
  /* 保持白色背景，用伪元素显示渐变 */
  border-radius: 16rpx;
  font-size: 28rpx;
  color: #2b303a;
  text-align: center;
  line-height: 60rpx;
  font-weight: bold;
  /* 过渡效果 */
  transition: all 0.3s ease-in-out;
}

.options-bar .options-tabs.active::before {
  opacity: 1;
}

/* 可选：添加点击反馈动画 */
.options-tabs:active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

.options-bar .option-item::after {
  content: "";
  display: block;
  width: 30px;
  height: 6px;
  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 {
  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;
  padding-top: -20rpx;
  /* background: #4fef86; */
}

.list-scroll-wrap > .list-scroll {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.list {
  padding: 0 20rpx 20rpx 20rpx;
  position: relative;
}

.list-top {
  width: 710rpx;
  height: 70rpx;
  position: relative;
  overflow: visible;
}

.list .list-top-img {
  width: 710rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transform: translateY(0);
}

.list .list-top-img-img {
  width: 100%;
  height: 100rpx;
}

.list .item {
  display: block;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 1px 10px rgba(0, 39, 52, 0.1);
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.list .item + .item {
  margin-top: 10px;
}

.list .item .contet {
  padding: 10px;
  background: #fff;
  /* url('@/static/img/charging_station_item_background.png') no-repeat center */
}

.list .item .name {
  display: flex;
  font-weight: bold;
  position: relative;
}

.list .item .name > .txt {
  flex: 1;
  line-height: 1.5em;
}
.list .item .name > .firm-price {
  position: absolute;
  right: -20rpx;
  top: -20rpx;
  width: 200rpx;
  height: 52rpx;
  background: linear-gradient(132deg, #ff6464 0%, #ff3a3a 100%);
  border-radius: 0rpx 16rpx 0rpx 37rpx;
  text-align: center;
  line-height: 52rpx;
  color: #fff;
}
.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: 24rpx;
  width: 654rpx;
  height: 84rpx;
  background: linear-gradient(
    90deg,
    rgba(170, 255, 235, 0.3) 0%,
    rgba(175, 247, 252, 0.2) 44%,
    rgba(139, 232, 252, 0) 100%
  );
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding-left: 20rpx;
}

.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);
}
.normal-user-price {
  display: flex;
  align-items: center;
  position: relative;
}
.normal-user-price-label {
  width: 330rpx;
  height: 60rpx;
  background: #fff2ec;
  border-radius: 42rpx;
}
.normal-user-price .normal-user-price-icon {
  width: 136rpx;
  height: 60rpx;
  position: absolute;
  right: 0;
}
.normal-user-text {
  position: absolute;
  right: 14rpx;
  font-weight: bold;
  font-size: 28rpx;
  color: #ffffff;
}
.list .item .price .value {
  font-size: 20px;
  font-weight: bold;
}

.list .item .price .unit {
  margin-left: 6rpx;
  font-weight: bold;
  font-size: 12px;
  margin-left: 6rpx;
}

.card-bottom-text {
  width: 212rpx;
  height: 52rpx;
  background: url("@/static/img/firm-bg.png");
  background-size: cover;
  background-position: center;
  line-height: 52rpx;
  margin-left: 8rpx;
}
.card-bottom-text-minitext {
  margin-left: 110rpx;
  font-weight: bold;
  font-size: 28rpx;
  color: #ff5d50;
}

.operation-price-btn {
  margin-left: 10rpx;
  width: 140rpx;
  height: 40rpx;
  background: #ff6457;
  border-radius: 22rpx 22rpx 22rpx 22rpx;
  font-style: italic;
  text-align: center;
  line-height: 40rpx;
  font-weight: 400;
  font-size: 22rpx;
  color: #ffffff;
}

.ordinary-price {
  margin-left: 12rpx;
  font-size: 24rpx;
  color: #aaaaaa;
  text-decoration: line-through;
}

.ad-popup {
  height: 1000rpx;
}

.ad-swiper {
  height: 100%;
}

.ad-swiper-item {
  height: 700rpx;
}

.close-get {
  margin-left: 550rpx;
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  border: 2rpx solid #133a4f;
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  text-align: center;
  line-height: 50rpx;
}

.ad-image {
  margin-top: 10rpx;
  width: 600rpx;
  border-radius: 16rpx;
}