前端综合实训

一.构建项目页面

1.配置app.json文件，并配置页面路径

2.设置导航栏样式

二.首页结构

1.构建首页结构

2.设置首页

背景样式

三.新建banner组件

1.在index文件夹中新建一个banner文件夹

2.配置banner.json文件

3.在index.json中引入当前组件路径

4.同以上相同操作创建entrance文件

四.完成轮播图组件

1.遍历bannerList，进行图片轮播

2.在banner.scss中设置轮播图样式

五.完成entrance组件

1.构建导航区域

2.设置图标样式

样式图片

六.分类页面编写
1.在page/category/category.html中编写分类页面样式
<!--pages/category/category.wxml-->
<view>
  <view class="category-container">
    <!-- 左侧的滑动区域 -->
    <scroll-view class="category-left-view" scroll-y="">
      <view class="left-view-item active">爱礼精选</view>
      <view class="left-view-item">鲜花玫瑰</view>
      <view class="left-view-item">永生玫瑰</view>
      <view class="left-view-item">玫瑰珠宝</view>
    </scroll-view>
    <!-- 右侧的滑动区域 -->
    <scroll-view class="category-right-view" scroll-y="">
      <view class="test">
        <view wx:for="{{ 10 }}" wx:key="index" class="right-view-item">
          <navigator url="" class="navigator">
            <image src="../../assets/images/cate-1.png" mode="" />
            <text class="goods_item_name">真情告白</text>
          </navigator>
        </view>
      </view>

</scroll-view>
  </view>
</view>

2.在category.scss中完成样式编写
/* pages/category/category.wxss */
.category-container{
  display: flex;
  .category-left-view{
    width: 220rpx;
    background-color:white;
    height: 100vh;
    .left-view-item{
      font-size: 26rpx;
      // 文本排列
      text-align: center;
      line-height: 99epx;
    }
    .active{
      color: #f3514f;
      // &表示当前标签
      // ::before是伪元素标签
      &::before{
        content:"";
        width: 6rpx;
        height: 66rpx;
        background-color: #f3514f;
        display: block;

position: absolute;
        // 沿着Y轴平移
        transform: translateY(25%);
      }
    }
  }
  .category-right-view{
   <!-- 
        &::(伪元素)
        所谓“伪元素”，就是在DOM结构中本来不存在的，但是通过CSS创建出来的元素
        ::before  ::after
        用于向指定元素的前面或者后面加入特定的内容
    -->
    &::before{
     content: "";
     width: 6rpx;
     height: 100vh;
     background-color: #f3514f;
     display:block;
     position: absolute;
    }
    .right-view-item{
      width: 33%;
      float: left;

 margin-top: 30rpx;
      .navigator{
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .goods_item_name{
        font-size: 26rpx;
        margin-top: 18rpx;
      }
    }
  }
  image{
    width: 90rpx;
    height: 90rpx;
  }
}

完成样式如下