老师弄完的效果不对啊

<view class="header">

  <input type="text" class="header-input" placeholder="我的第一个小程序" placeholder-class="header-input-placeholder" bindinput="handleInputChange" />

  <icon type="search" class="header-input-icon" size="15" wx:if="{{showIcon}}"></icon>

</view>

<!-- <audio src="https://www.ytmp3.cn/down/76567.mp3" controls="false" name="等你归来" author="程响"poster="../../resources/微信图片_20220413215634.jpg" ></audio> -->

<view class="navigator">

  <view class="navigator-item">

    <image class="navigator-img" src="../../resources/recommend.png"></image>

    推荐

    <view class="navigator-acitve" />

  </view>

</view>

<view class="navigator-item">

  <image class="navigator-img" src="../../resources/path.png"></image>

  路径

</view>

<view class="navigator-item">

  <image class="navigator-img" src="../../resources/project.png"></image>

  路径

</view>

<view class="navigator-item">

  <image class="navigator-img" src="../../resources/activity.png"></image>

  活动

</view>

<swiper previous-margin="18rpx" next-margin="18rpx" circular="{{}}" autoplay="{{}}" class="swiper">

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

    <image class="swiper-image" src="../../resources/轮播图 (1).png"></image>

  </swiper-item>

</swiper>

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

  <image class="swiper-image" src="../../resources/轮播图 (1).jpg"></image>

</swiper-item>

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

  <image class="swiper-image" src="../../resources/轮播图 (2).png"></image>

</swiper-item>

<view class="project">

  <text class="project-title">实战推荐</text>

    <view class="projecr-item">

      <image class="projecr-item-pic" src="../../resources/1 (1).jpg"></image>

      <view class="projecr-item-content">

        <view class="projecr-item-title">

          微信小程序入门与实战常用组件 开发技巧API 项目实战</view>

        <view class="projecr-item-tags">

          <text class="project-item--price-active">198</text>

          <text class="projecr-item-price">198</text>

          <text class="projecr-item-notice">app购物买立减 3</text>

          <text class="projecr-item-text">APP购物买立减</text>

          <text>

          <image class="projecr-item-user"

          src="../../resources/my-active.png"

          ></image>

          </text>

        </view>

      </view>

    </view>

</view>

.userinfo {

  display: flex;

  flex-direction: column;

  align-items: center;

  color: #aaa;

}

.userinfo-avatar {

  overflow: hidden;

  width: 128rpx;

  height: 128rpx;

  margin: 20rpx;

  border-radius: 50%;

}

.usermotto {

  margin-top: 200px;

}

.header-input{

  line-height: 72rpx;

  padding:  0 36rpx;

  margin: 22rpx 36rpx 14rpx 36rpx;

  border: 1px solid #D9DDE1;

  border-radius: 36rpx;

  text-align: center;

  font-size: 26rpx;

}

header-input-placeholder{

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

}

.header{

  position: relative;

}

.header-input-icon{

  position: absolute;

  left: 25%;

  top: 14rpx;

  transform: translateX(-184

  rpx);

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

}

.navigator{

  display: flex;

  line-height: 112rpx;

  margin-bottom: 6rpx;

}

.navigator-item{

  flex:1 ;

  text-align: center;

  vertical-align: middle;

  font-size: 32rpx;

  color: #2B333B;

}

.navigator-img{

  position: relative;

  top: 8rpx;

  width: 36rpx;

  height: 36rpx;

}

.navigator-acitve{

  width: 32rpx;

  height: 8rpx;

  border-radius: 4rpx;

  position: absolute;

  background: #f01414;

  left: 90rpx;

  bottom: 20rpx;

}

.swiper-image{

  border-radius: 12rpx;

  width: 708rpx;

  height: 234rpx;

}

.swiper-item{

box-sizing: border-box;

padding: 0 6rpx;

}

.swiper{

  height: 234rpx;

}

.projecr{

   margin-top: 32rpx;

   margin-left: 40rpx

}

.projecr-title{

  font-size: 28rpx;

  color:#2B333B ;

  font-weight: bold;

  line-height: 32rpx;

}

.projecr-item{

  display: flex;

  margin-top: 16rpx;

}

.projecr-item-pic{

  width: 208rpx;

  height: 136rpx;

  border-radius: 16rpx;

}

.projecr-item-content{

  flex: 1;

  margin-left: 24rpx;

  border-bottom:  1rpx solid #D9DDE1;

}