<view>
  <view class="banner">
    <view class="logo" style="opacity: {{titleOpacity}}"><image src="/image/mpaas_logo.png" mode="aspectFit" /></view>
    <view class="title" style="opacity: {{titleOpacity}}">mPaaS小程序官方示例</view>
    <view class="sub-title"style="opacity: {{titleOpacity}}">以下展示小程序官方组件和API</view>
    <view class="fake-searchbar" onTap="onSearchBarTap">
      <icon type="search" size="14" color="#1D1D1D" />
      <text class="fake-placeholder">搜索你想要的组件和API</text>
    </view>
  </view>
  <block-list listData="{{hot}}" className="hot" />
  <view class="tabs {{shadow ? 'shadow' : ''}}" style="top: {{top}}px">
    <view class="tabs-bar">
      <block a:for="{{tabs}}">
        <view class="tabs-bar-tab" data-index="{{index}}" onTap="onTabBarTap">
          <view class="tabs-bar-tab-title {{activeTab === index ? 'active' : ''}}">{{item}}</view>
        </view>
      </block>
    </view>
  </view>
  <view class="list-wrap">
    <view class="list-container">
      <view class="list" a:if={{activeTab === 0}}>
        <block a:for="{{basicComponentList}}" a:for-item="list">
          <list className="list-item">
            <view slot="header" class="list-header">{{list.type}}</view>
            <block a:for="{{list.list}}">
              <list-item arrow="{{true}}" multipleLine="{{false}}" key="items-{{item.name}}" last="{{true}}" data-url="{{item.path}}" onClick="openPage">
                <view style="display: flex; align-items: center">
                  <image src="{{item.thumb}}" class="thumb"  mode="aspectFit" />
                  <text class="component-name">{{item.name}}</text>
                  <text class="component-brief">{{item.nameEn}}</text>
                </view>
              </list-item>
            </block>
          </list>
        </block>
      </view>
      <view class="list" a:if={{activeTab === 1}}>
        <block a:for="{{extComponentList}}" a:for-item="list">
          <list className="list-item">
            <view slot="header" class="list-header">{{list.type}}</view>
            <block a:for="{{list.list}}">
              <list-item arrow="{{true}}" multipleLine="{{false}}" key="items-{{item.name}}" last="{{true}}" data-url="{{item.path}}" onClick="openPage">
                <view style="display: flex; align-items: center">
                  <image src="{{item.thumb}}" class="thumb" mode="aspectFit" />
                  <text class="component-name">{{item.name}}</text>
                  <text class="component-brief">{{item.nameEn}}</text>
                </view>
              </list-item>
            </block>
          </list>
        </block>
      </view>
    </view>
  </view>
</view>
<!-- <image mode="scaleToFill" src="/image/logo_devCenter.png" class="logo_devCenter" onTap="goDevCenter"/> -->
