<view class="header">

  <input type="text" placeholder="AngularJS.MySQL.Java" class="header-input" bindinput="handleInputChange" />

  <icon type="search" class="header-icon" wx:if="{{iconShow}}"></icon>

</view>

<!-- nav -->

<view class="nav">

  <view class="nav-item">

    <image class="nav-img" src="../../icon/推荐@2x.png"></image>

    推荐

  </view>

  <view class="nav-item">

    <image class="nav-img" src="../../icon/实战@2x.png"></image>

    实战

  </view>

  <view class="nav-item">

    <image class="nav-img" src="../../icon/路径@2x.png"></image>

    路径

  </view>

  <view class="nav-item">

    <image class="nav-img" src="../../icon/课程@2x.png"></image>

    活动

  </view>

</view>

<!-- 轮播图 -->

<swiper class="nav-swiper" autoplay="{{true}}" previous-margin="24rpx" next-margin="24rpx" circular="{{true}}">

<swiper-item class="swiper-list">

<image class="swiper-img" src="//img3.mukewang.com/6086373a097aa9d118000600.png"></image>

</swiper-item>

<swiper-item class="swiper-list">

<image class="swiper-img" src="//img3.mukewang.com/60989bfd098afd8418000600.png"></image>

</swiper-item>

<swiper-item class="swiper-list">

<image class="swiper-img" src="//img1.mukewang.com/602c5498094d056400000000.png"></image>

</swiper-item>

<swiper-item class="swiper-list">

<image class="swiper-img" src="//img.mukewang.com/609b4d76092a267f18000600.png"></image>

</swiper-item>

</swiper>

.header{

  position: relative;

}

.header-input{

  width: 680rpx;

  height: 72rpx;

  border: 1px solid #D9DDE1;

  margin: 32rpx 36rpx 8rpx 36rpx;

  text-align: center;

  font-size: 13px;

  color: rgba(133,133,133,0.60);

  border-radius: 36rpx;

}

.header-icon{

  position: absolute;

  top: 15rpx;

  left: 150rpx;

  width: 26rpx;

  height: 28rpx;

  color: rgba(133,133,133,0.60);

}

.nav{

  width: 750rpx;

  height: 112rpx;

  display: flex;

}

.nav-item{

  flex: 1;

  text-align: center;

  font-size: 32rpx;

  color: #2B333B;

  height: 112rpx;

  line-height: 112rpx;

}

.nav-img{

  width: 36rpx;

  height: 36rpx;

  position: relative;

  top: 8rpx;

}

.nav-swiper{

  width: 750rpx;

  height: 232rpx;

}

.swiper-list{

  width: 702rpx;

  height: 232rpx;

  margin: 0 12rpx;

}

.swiper-img{

  width: 682rpx;

  height: 232rpx;

  border-radius: 12rpx;

}