index.wxml

<!-- 首頁輪播圖分割槽 -->
<view class='slider'>
    <swiper indicator-dots="{{ true }}" autoplay="{{ true }}" interval="2500" duration="400" circular="{{ true }}">
        <swiper-item>
            <image src="https://image.suning.cn/uimg/aps/material/153820445234116791.jpg?from=mobile" width="375" height="150"  mode="aspectFill" />
        </swiper-item>
        <swiper-item>
            <image src="https://image3.suning.cn/uimg/cms/img/153853498201585303.jpg_1242w_610h_80q" width="375" height="150" mode="aspectFill" />
        </swiper-item>
        <swiper-item>
            <image src="https://image.suning.cn/uimg/aps/material/153838522153970426.jpg?from=mobile" width="375" height="150" mode="aspectFill" />
        </swiper-item>
        
    </swiper>
</view>

<!-- 首頁導航分割槽 -->
<view class='index-nav'>
    <navigator class='nav-item'>
        <image src='https://image3.suning.cn/uimg/cms/img/153804504628577288.png?from=mobile'></image>
        <text>美食</text>
    </navigator>
    <navigator class='nav-item'>
        <image src='https://image1.suning.cn/uimg/cms/img/153804507827351388.png?from=mobile'></image>
        <text>美食</text>
    </navigator>
    <navigator class='nav-item'>
        <image src='https://image3.suning.cn/uimg/cms/img/153838666910977641.gif'></image>
        <text>美食</text>
    </navigator>
    <navigator class='nav-item'>
        <image src='https://image5.suning.cn/uimg/cms/img/153804514816040882.png?from=mobile'></image>
        <text>美食</text>
    </navigator>
    <navigator class='nav-item'>
        <image src='https://image3.suning.cn/uimg/cms/img/153804520798724660.png?from=mobile'></image>
        <text>美食</text>
    </navigator>
    <navigator class='nav-item'>
        <image src='https://image1.suning.cn/uimg/cms/img/153804524042080436.png?from=mobile'></image>
        <text>美食</text>
    </navigator>
    <navigator class='nav-item'>
        <image src='https://image1.suning.cn/uimg/cms/img/153804526974755934.png?from=mobile'></image>
        <text>美食</text>
    </navigator>
    <navigator class='nav-item'>
        <image src='https://image2.suning.cn/uimg/cms/img/153804529990764934.png?from=mobile'></image>
        <text>美食</text>
    </navigator>
    <navigator class='nav-item'>
        <image src='https://image5.suning.cn/uimg/cms/img/153804533219056487.png?from=mobile'></image>
        <text>美食</text>
    </navigator>
</view>

<!-- 間隔 -->
<view class='divider'></view>

<!-- 首頁入口分割槽 -->
<view class='index-enter'>
    <navigator class='enter-item'>
      <image src='https://image1.suning.cn/uimg/b2c/qrqm/0000000000000000000102654187_200x200.jpg?ver=2024&from=mobile' mode='aspectFit'></image>
    </navigator>
    <navigator class='enter-item'>
      <image src='https://image1.suning.cn/uimg/b2c/qrqm/0000000000000000000121615083_200x200.jpg?ver=2106&from=mobile' mode='aspectFit'></image>
    </navigator>
</view>
 

index.wxss

/* 小程式的圖片記得設定寬高 */

.slider,
.slider image,
.slider swiper{
  width: 100%;
  height:390rpx;
}
.index-nav{
/* 給當前父元素設定成伸縮盒模式 */
  display: flex;
  /* 設定子元素換行能排列 */
  flex-wrap: wrap;
   /* background-color: #fff */
}
.index-nav .nav-item{
 
  width: 33.333%;
  height: 200rpx;
  /* 給當前父元素設定成伸縮盒模式 */
  display: flex;
  /* 設定垂直排列 */
  flex-direction: column;
  /* 設定主軸居中 */
  justify-content: center;
  /* 設定交叉軸居中 */
  align-items: center;
  box-sizing: border-box;
  /* 微信小程式的字號大小官方推薦使用px */
  font-size: 14px;
  /* 右、底部邊框 */
  border-right: 1rpx solid #ccc;
  border-bottom: 1rpx solid #ccc;
}
.index-nav .nav-item:nth-child(3n){
  /* 每隔第三個元素去除邊框 */  
  border-right: 0 none;
}
.index-nav image{
  width: 130rpx;
  height: 130rpx;
}

/* 首頁入口分割槽 */
.index-enter{
  display: flex;
  padding: 20rpx 25rpx;
   /* background-color: #fff; */
    /* margin-top: 20rpx; */
}
.index-enter .enter-item{
  width: 50%;
  display: flex;
  justify-content: center;
}
.index-enter image{
  width: 320rpx;
  height: 178rpx;
} 

/* 分割槽間隔第一種方法 */
/* page{
  background-color: rgba(170, 170, 170, 0.295);
} */

/* 分割槽間隔第二種方法 功能封裝，專門用於做間隔的類*/
.divider{
  height: 20rpx;
  background-color: #f1f1f1;
}
 

index.js

Page({

})