Shwasher
/
test_shwasher


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的收藏</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      background-color: #f6f6f6;
      color: #333;
    }

    .header {
      background: white;
      padding: 16px;
      position: relative;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .header-title {
      text-align: center;
      font-size: 18px;
      font-weight: bold;
    }

    .favorite-list {
      margin: 16px;
    }

    .station-card {
      background: white;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 12px;
      position: relative;
    }

    .station-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }

    .station-name {
      font-size: 16px;
      font-weight: bold;
    }

    .unfavorite-btn {
      background: none;
      border: none;
      color: #ff6b6b;
      font-size: 14px;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
    }

    .unfavorite-btn:hover {
      background: #fff1f1;
    }

    .station-info {
      font-size: 14px;
      color: #666;
      margin-bottom: 8px;
    }

    .station-status {
      display: inline-block;
      padding: 4px 8px;
      background: #e8f5e9;
      color: #4CAF50;
      border-radius: 4px;
      font-size: 12px;
    }

    .empty-state {
      text-align: center;
      padding: 40px 16px;
      color: #999;
    }

    .tab-bar {
      position: fixed;
      bottom: 0;
      width: 100%;
      background: white;
      display: flex;
      padding: 8px 0;
      border-top: 1px solid #eee;
      z-index: 1000;
    }

    .tab-item {
      flex: 1;
      text-align: center;
      color: #999;
      font-size: 12px;
      padding: 4px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .tab-item svg {
      width: 24px;
      height: 24px;
      margin-bottom: 4px;
      fill: currentColor;
      transition: all 0.3s ease;
    }

    .tab-item.active {
      color: #4CAF50;
      transform: scale(1.1);
    }
  </style>
</head>

<body>
  <div class="header">
    <div class="header-title">我的收藏</div>
  </div>

  <div class="favorite-list">
    <div class="station-card">
      <div class="station-header">
        <div class="station-name">星星充电站 - 望京SOHO</div>
        <button class="unfavorite-btn">取消收藏</button>
      </div>
      <div class="station-info">地址：北京市朝阳区望京SOHO T1</div>
      <div class="station-info">距离：1.2km</div>
      <div class="station-status">8个空闲充电桩</div>
    </div>

    <div class="station-card">
      <div class="station-header">
        <div class="station-name">特来电充电站 - 三里屯</div>
        <button class="unfavorite-btn">取消收藏</button>
      </div>
      <div class="station-info">地址：北京市朝阳区三里屯太古里</div>
      <div class="station-info">距离：2.5km</div>
      <div class="station-status">4个空闲充电桩</div>
    </div>
  </div>

  <div class="tab-bar">
    <div class="tab-item">
      <svg>
        <use xlink:href="./images/icons.svg#icon-home" />
      </svg>
      <span>首页</span>
    </div>
    <div class="tab-item">
      <svg>
        <use xlink:href="./images/icons.svg#icon-list" />
      </svg>
      <span>列表</span>
    </div>
    <div class="tab-item active">
      <svg>
        <use xlink:href="./images/icons.svg#icon-favorite" />
      </svg>
      <span>收藏</span>
    </div>
    <div class="tab-item">
      <svg>
        <use xlink:href="./images/icons.svg#icon-person" />
      </svg>
      <span>我的</span>
    </div>
  </div>

  <script>
    // 底部导航栏交互
    document.querySelectorAll('.tab-item').forEach(item => {
      item.addEventListener('click', function () {
        // 移除其他项的active类
        document.querySelectorAll('.tab-item').forEach(tab => {
          tab.classList.remove('active');
        });
        // 为当前点击项添加active类
        this.classList.add('active');
      });
    });

    // 取消收藏按钮交互
    document.querySelectorAll('.unfavorite-btn').forEach(btn => {
      btn.addEventListener('click', function () {
        const card = this.closest('.station-card');
        card.style.opacity = '0';
        card.style.transform = 'translateX(100%)';
        card.style.transition = 'all 0.3s ease';
        setTimeout(() => {
          card.remove();
          // 检查是否还有收藏的充电站
          const remainingCards = document.querySelectorAll('.station-card');
          if (remainingCards.length === 0) {
            const emptyState = document.createElement('div');
            emptyState.className = 'empty-state';
            emptyState.textContent = '暂无收藏的充电站';
            document.querySelector('.favorite-list').appendChild(emptyState);
          }
        }, 300);
      });
    });
  </script>
</body>

</html>