首页就在index里面做了样式的修改：

    1. <template>
    2.     <view class='home'>
    3.         <swiper indicator-dots circular>
    4.             <swiper-item v-for='item in swipers' :key='item.id'>
    5.                 <image :src='item.img'></image>
    6.             </swiper-item>
    7.         </swiper>
    8.         <!--导航-->
    9.         <view class='nav'>
    10.             <view class='nav_item'>
    11.                 <view class='iconfont icon-ziyuan'></view>
    12.                 <text>黑马超市</text>
    13.             </view>
    14.             <view class='nav_item'>
    15.                 <view class='iconfont icon-guanyuwomen'></view>
    16.                 <text>联系我们</text>
    17.             </view>
    18.             <view class='nav_item'>
    19.                 <view class='iconfont icon-tupian'></view>
    20.                 <text>社区图片</text>
    21.             </view>
    22.             <view class='nav_item'>
    23.                 <view class='iconfont icon-shipin'></view>
    24.                 <text>学习视频</text>
    25.             </view>
    26.         </view>
    27.         <!--推荐商品-->
    28.         <view class='hot_goods'>
    29.             <view class='tit'>推荐商品</view>
    30.             <view class='goods_list'>
    31.                 <view class='goods_item'>
    32.                     <image src='http://destiny001.gitee.io/image/ban3.jpg'></image>
    33.                     <view class='price'>
    34.                         <text>￥2199</text>
    35.                         <text>￥2199</text>
    36.                     </view>
    37.                     <view class="name">
    38.                         华为苹果电脑，大晒的好事大点哈送到
    39.                     </view>
    40.                 </view>
    41.                 <view class='goods_item'>
    42.                     <image src='http://destiny001.gitee.io/image/ban3.jpg'></image>
    43.                     <view class='price'>
    44.                         <text>￥2199</text>
    45.                         <text>￥2199</text>
    46.                     </view>
    47.                     <view class="name">
    48.                         华为苹果电脑，大晒的好事大点哈送到
    49.                     </view>
    50.                 </view>
    51.                 <view class='goods_item'>
    52.                     <image src='http://destiny001.gitee.io/image/ban3.jpg'></image>
    53.                     <view class='price'>
    54.                         <text>￥2199</text>
    55.                         <text>￥2199</text>
    56.                     </view>
    57.                     <view class="name">
    58.                         华为苹果电脑，大晒的好事大点哈送到
    59.                     </view>
    60.                 </view>
    61.             </view>
    62.         </view>    
    63.     </view>
    64. </template>
    65. <script>
    66.     export default {
    67.         data() {
    68.             return {
    69.                 swipers:[]
    70.             }
    71.         },
    72.         onLoad() {    //监听页面加载    
    73.             this.getSwiper()
    74.         },
    75.         methods: {
    76.             //获取轮播的数据
    77.             // async getSwiper(){
    78.             //     console.log('获取轮播的数据')
    79.             //     const res = await uni.request({
    80.             //         url:'http://localhost:8082/api/getlunbo',
    81.             //     })
    82.             //     console.log(res.data)
    83.             // }    
    84.             //获取轮播数据
    85.             async getSwiper(){
    86.                 // console.log('获取轮播的数据')
    87.                 // uni.request({
    88.                 //     url:'http://localhost:8082/api/getlunbo',
    89.                 //     success:res=>{
    90.                 //         console.log(res.data.message)
    91.                 //         if(res.data.status !== 0){
    92.                 //             return uni.showToast({
    93.                 //                 title:'获取数据失败'
    94.                 //             })
    95.                 //         }
    96.                 //         this.swipers = res.data.message
    97.                 //     }
    98.                 // })
    99.                 const res =await this.$myRequest({
    100.                     url:'/api/getlunbo'
    101.                 })
    102.                 this.swipers = res.data.message
    103.             }
    104.         }
    105.     }
    106. </script>
    108. <style lang="scss">
    109. .home{
    110.     swiper{
    111.         width:750rpx;
    112.         height: 380rpx;
    113.         image{
    114.             height:100%;
    115.             width:100%;
    116.         }
    117.     }
    118.     .nav{
    119.         display: flex;
    120.         .nav_item{
    121.             width:25%;
    122.             text-align: center;
    123.             view{
    124.                 width: 120rpx;
    125.                 height:120rpx;
    126.                 background-color: $shop-color;  //这个变量是在uni.scss文件里面定义的！
    127.                 border-radius: 60rpx;
    128.                 margin: 10px auto;
    129.                 line-height: 120rpx;
    130.                 color:#fff;
    131.                 font-size:50rpx;
    132.             }
    133.             .icon-tupian{
    134.                 font-size:45rpx;
    135.             }
    136.             text{
    137.                 font-size: 30rpx;
    138.             }
    139.         }
    140.     }
    142.     .hot_goods{
    143.         background: #eee;
    144.         overflow:hidden;
    145.         margin-top: 10px;
    146.             .tit{
    147.                 height:50px;
    148.                 line-height: 50px;
    149.                 color:$shop-color;
    150.                 text-align: center;
    151.                 letter-spacing: 20px;
    152.                 font-size: 20px;
    153.                 margin:7rpx 0;
    154.                 background: #fff;
    155.             }
    156.             .goods_list{
    157.                 padding:0 15rpx;
    158.                 display: flex;
    159.                 flex-wrap: wrap;
    160.                 justify-content: space-between;
    161.                 .goods_item{
    162.                     background: #fff;
    163.                     width:355rpx;
    164.                     margin:10rpx 0;
    165.                     padding: 15rpx;
    166.                     box-sizing: border-box;//不会撑开盒子了
    167.                     image{
    168.                         width:95%;
    169.                         height:200px;
    170.                         display:block;
    171.                         margin:0 auto;  //上面下面实现居中
    172.                     }
    173.                     .price{
    174.                         color:$shop-color;
    175.                         font-size: 36rpx;
    176.                         text:nth-child(2){
    177.                             color:#CCC;
    178.                             font-size: 28rpx;
    179.                             margin-left:17rpx;
    180.                             text-decoration: line-through;
    181.                         }
    182.                     }
    183.                     .name{
    184.                         font-size:32rpx;
    185.                         line-height:50rpx;
    186.                     }
    187.                 }
    188.             }
    189.     }
    190. }
    191. </style>

    具体的样式如下：
    image.png