<view>
  <view class='swiper-container'>
    <swiper class='swiper' indicator-dots='{{true}}' autoplay='{{true}}' interval='{{3000}}' duration='{{500}}'>
      <swiper-item>
        <image src='http://121.43.59.119:8080/mdy/img/a1.png'></image>
      </swiper-item>
      <swiper-item>
        <image src='http://121.43.59.119:8080/mdy/img/a2.png'></image>
      </swiper-item>
      <swiper-item>
        <image src='http://121.43.59.119:8080/mdy/img/a3.png'></image>
      </swiper-item>
      <swiper-item>
        <image src='http://121.43.59.119:8080/mdy/img/a4.png'></image>
      </swiper-item>
    </swiper>
  </view>
  <view class='grid-container'>
    <view class='grid-item'>
      <image class='grid-icon' src='/image/notice-home (1).png'></image>
      <view class='grid-text'>发布通知</view>
    </view>
    <view class='grid-item'>
      <image class='grid-icon' src='/image/notice-home (2).png'></image>
      <view class='grid-text'>管理通知</view>
    </view>
    <view class='grid-item'>
      <image class='grid-icon' src='/image/sigin-icon1.png'></image>
      <view class='grid-text'>发布签到</view>
    </view>
    <view class='grid-item'>
      <image class='grid-icon' src='/image/sigin-icon3.png'></image>
      <view class='grid-text'>管理签到</view>
    </view>
    <view class='grid-item'>
      <image class='grid-icon' src='/image/testicon2.png'></image>
      <view class='grid-text'>发布考试</view>
    </view>
    <view class='grid-item'>
      <image class='grid-icon' src='/image/testicon3.png'></image>
      <view class='grid-text'>管理考试</view>
    </view>
    <view class='grid-item'>
      <image class='grid-icon' src='/image/grade-icon2.png'></image>
      <view class='grid-text'>成绩录入</view>
    </view>
    <view class='grid-item'>
      <image class='grid-icon' src='/image/grade-icon3.png'></image>
      <view class='grid-text'>管理成绩</view>
    </view>
  </view>
  <view class='fixed-nav'>
    <view class='nav-item' bindtap='toHomePage'>
      <image class='nav-icon' src='/image/home.png'></image>
      <view class='nav-text'>主页</view>
    </view>
    <view class='nav-item' bindtap='toSchedule'>
      <image class='nav-icon' src='/image/schedule.png'></image>
      <view class='nav-text'>课表</view>
    </view>
    <view class='nav-item' bindtap='toMine'>
      <image class='nav-icon' src='/image/mine.png'></image>
      <view class='nav-text'>我的</view>
    </view>
  </view>
</view>
<style>
  .fixed-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.1);
  }

  .nav-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #999;
    width: 33.33%;
    height: 100rpx;
  }

  .nav-icon {
    width: 40rpx;
    height: 40rpx;
  }

  .nav-text {
    margin-top: 8rpx;
  }
</style>
底部固定导航栏设计 - 主页、课表、我的

原文地址: https://www.cveoy.top/t/topic/m72s 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录