<!--custom-tab-bar/index.wxml-->
<view class="tab-bar">
  <view class="tab-bar-border"></view>
  
  <!-- 首页 -->
  <view class="tab-bar-item" data-path="{{list[0].pagePath}}" data-index="0" bindtap="switchTab">
    <view class="icon-wrapper">
      <!-- 首页图标 -->
      <view class="icon {{selected === 0 ? 'icon-active' : ''}}">
        <view class="icon-home">
          <view class="home-roof"></view>
          <view class="home-body"></view>
        </view>
      </view>
    </view>
    <view class="tab-bar-text" style="color: {{selected === 0 ? selectedColor : color}}">{{list[0].text}}</view>
  </view>

  <!-- 目录 -->
  <view class="tab-bar-item" data-path="{{list[1].pagePath}}" data-index="1" bindtap="switchTab">
    <view class="icon-wrapper">
      <view class="icon {{selected === 1 ? 'icon-active' : ''}}">
        <view class="icon-list">
          <view class="list-line"></view>
          <view class="list-line"></view>
          <view class="list-line"></view>
        </view>
      </view>
    </view>
    <view class="tab-bar-text" style="color: {{selected === 1 ? selectedColor : color}}">{{list[1].text}}</view>
  </view>

  <!-- 找伙伴 - 中间突出按钮 -->
  <view class="tab-bar-item special-item" data-path="{{list[2].pagePath}}" data-index="2" bindtap="switchTab">
    <view class="special-button {{selected === 2 ? 'special-active' : ''}}">
      <view class="icon-users">
        <view class="user-circle user-1"></view>
        <view class="user-circle user-2"></view>
      </view>
    </view>
    <view class="tab-bar-text special-text" style="color: {{selected === 2 ? selectedColor : color}}">{{list[2].text}}</view>
  </view>

  <!-- 我的 -->
  <view class="tab-bar-item" data-path="{{list[3].pagePath}}" data-index="3" bindtap="switchTab">
    <view class="icon-wrapper">
      <view class="icon {{selected === 3 ? 'icon-active' : ''}}">
        <view class="icon-user">
          <view class="user-head"></view>
          <view class="user-body"></view>
        </view>
      </view>
    </view>
    <view class="tab-bar-text" style="color: {{selected === 3 ? selectedColor : color}}">{{list[3].text}}</view>
  </view>
</view>
