开发推荐页面及tabbar，navbar

app.json

@@ -1,13 +1,13 @@
 {
     "pages": [
+        "pages/index/index",
         "pages/my/index",
         "pages/editUser/index",
         "pages/notice/index",
         "pages/collection/index",
         "pages/follow/index",
         "pages/userWorks/index",
-        "pages/logs/logs",
-        "pages/index/index"
+        "pages/logs/logs"
     ],
     "tabBar": {
         "custom": true,

components/navigationBar/index.less

@@ -1,101 +1,113 @@
 .nav-bar {
-  position: fixed;
-  width: 100%;
-  top: 0;
-  z-index: 9999;
-  color: #fff;
-  background: #30C866;
-
-  .view {
-    padding: 0px 31rpx;
+    position: fixed;
     width: 100%;
+    top: 0;
+    z-index: 9999;
     color: #fff;
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    background: #00C657;
 
-    .selectGrade {
-      position: absolute;
-      left: 22rpx;
-      width: 158rpx;
-      height: 48rpx;
-      line-height: 48rpx;
-      border-radius: 25rpx;
-      background-color: #ffffffa6;
-      color: #333;
-      font-size: 24rpx;
-      text-align: center;
-    }
+    .view {
+        padding: 0px 31rpx;
+        width: 100%;
+        color: #fff;
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .selectGrade {
+            position: absolute;
+            left: 22rpx;
+            width: 158rpx;
+            height: 48rpx;
+            line-height: 48rpx;
+            border-radius: 25rpx;
+            background-color: #ffffffa6;
+            color: #333;
+            font-size: 24rpx;
+            text-align: center;
+        }
 
-    .title {
-      text-align: center;
+        .title {
+            text-align: center;
+        }
     }
-  }
+}
+
+.headerBg {
+    z-index: -1;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 110rpx;
+    background: url(https://reader-wx.ai160.com/images/reader/v3/top-bg.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: center;
 }
 
 .gradeContainer {
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, .7);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9999;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
 
-  .gradeBox {
-    width: 520rpx;
-    padding: 33rpx 40rpx 50rpx;
-    border-radius: 20rpx;
-    background-color: white;
+    .gradeBox {
+        width: 520rpx;
+        padding: 33rpx 40rpx 50rpx;
+        border-radius: 20rpx;
+        background-color: white;
 
-    .title {
-      text-align: center;
-      font-size: 40rpx;
-      font-weight: bold;
-    }
+        .title {
+            text-align: center;
+            font-size: 40rpx;
+            font-weight: bold;
+        }
 
-    .content {
-      margin-top: 55rpx;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
+        .content {
+            margin-top: 55rpx;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
 
-      .grade {
-        padding: 12rpx 64rpx;
-        border-radius: 50rpx;
-        font-size: 36rpx;
-        color: #333;
-        background-color: #E4E4E4;
-      }
+            .grade {
+                padding: 12rpx 64rpx;
+                border-radius: 50rpx;
+                font-size: 36rpx;
+                color: #333;
+                background-color: #E4E4E4;
+            }
 
-      .oneRow {
-        width: 100%;
-        text-align: center;
-      }
+            .oneRow {
+                width: 100%;
+                text-align: center;
+            }
 
-      .check {
-        color: white;
-        background-color: #1CCC69;
-      }
-    }
+            .check {
+                color: white;
+                background-color: #1CCC69;
+            }
+        }
 
-    .submitBox {
-      text-align: center;
+        .submitBox {
+            text-align: center;
 
-      .submit {
-        width: 360rpx;
-        margin-top: 60rpx;
-        padding: 14rpx 0px;
-        display: inline-block;
-        background-color: #45B7FF;
-        color: white;
-        font-size: 42rpx;
-        border-radius: 50rpx;
-      }
+            .submit {
+                width: 360rpx;
+                margin-top: 60rpx;
+                padding: 14rpx 0px;
+                display: inline-block;
+                background-color: #45B7FF;
+                color: white;
+                font-size: 42rpx;
+                border-radius: 50rpx;
+            }
+        }
     }
-  }
 }

components/navigationBar/index.wxml

@@ -5,12 +5,12 @@
         <view class="title">{{title}}</view>
     </view>
 </view>
-
 <!-- 
   内容区域：
   自定义顶部栏用的fixed定位，会遮盖到下面内容，注意设置好间距
 -->
 <view class="content" style="margin-top:{{navBarHeight}}px;"></view>
+<view class="headerBg" style="top:{{navBarHeight}}px;"></view>
 
 <view wx:if="{{isGradeShow}}" class="gradeContainer" catchtouchmove='true' style="margin-top:{{navBarHeight}}px;"
     bindtap="closeGrade">

components/navigationBar/index.wxss

@@ -4,7 +4,7 @@
   top: 0;
   z-index: 9999;
   color: #fff;
-  background: #30C866;
+  background: #00C657;
 }
 .nav-bar .view {
   padding: 0px 31rpx;
@@ -30,6 +30,17 @@
 .nav-bar .view .title {
   text-align: center;
 }
+.headerBg {
+  z-index: -1;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 110rpx;
+  background: url(https://reader-wx.ai160.com/images/reader/v3/top-bg.png) no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
+}
 .gradeContainer {
   width: 100%;
   height: 100%;

components/worksList/index.js

@@ -0,0 +1,23 @@
+// components/worksList/index.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

components/worksList/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/worksList/index.less

@@ -0,0 +1 @@
+/* components/worksList/index.wxss */

components/worksList/index.wxml

@@ -0,0 +1,2 @@
+<!--components/worksList/index.wxml-->
+<text>components/worksList/index.wxml</text>

components/worksList/index.wxss

@@ -0,0 +1 @@
+/* components/worksList/index.wxss */

pages/index/index.js

@@ -3,7 +3,10 @@ Page({
     /**
      * 页面的初始数据
      */
-    data: {},
+    data: {
+        background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
+        currentType: '1'
+    },
 
     /**
      * 生命周期函数--监听页面加载
@@ -15,4 +18,13 @@ Page({
             })
         }
     },
+    selectType({
+        target
+    }) {
+        if (target.dataset.type) {
+            this.setData({
+                currentType: target.dataset.type
+            })
+        }
+    }
 })

pages/index/index.json

@@ -1,3 +1,8 @@
 {
-  "usingComponents": {}
+    "usingComponents": {
+        "rewardedVideo": "/components/rewardedVideo/index",
+        "navigationBar": "/components/navigationBar/index",
+        "worksList": "/components/worksList/index"
+    },
+    "navigationStyle": "custom"
 }

pages/index/index.less

@@ -0,0 +1,116 @@
+.recommend {
+    .header {
+        position: relative;
+
+        .headerBg {
+            position: absolute;
+            z-index: -2;
+            width: 100%;
+            height: 100%;
+            background-color: white;
+        }
+
+        .swiper {
+            margin: 0 auto;
+            width: 710rpx;
+            height: 216rpx;
+            border-radius: 20rpx;
+            overflow: hidden;
+            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+
+            .swiper-item {
+                width: 100%;
+                height: 100%;
+                border-radius: 20rpx;
+                overflow: hidden;
+            }
+
+        }
+    }
+
+    .firstClassify {
+        padding-top: 34rpx;
+        width: 100%;
+        white-space: nowrap;
+        background-color: white;
+
+        .firstBox {
+            text-align: center;
+            display: inline-block;
+            width: 100rpx;
+            padding: 0rpx 20rpx;
+
+            .icon {
+                width: 58rpx;
+                height: 58rpx;
+            }
+
+            .name {
+                margin-top: 6rpx;
+                font-weight: bold;
+                font-size: 24rpx;
+            }
+        }
+    }
+
+    .demo-text-1 {
+        background-color: rebeccapurple
+    }
+
+    .demo-text-2 {
+        background-color: rgb(100, 153, 51)
+    }
+
+    .demo-text-3 {
+        background-color: rgb(228, 119, 46)
+    }
+
+    .search {
+        position: relative;
+        background-color: white;
+        padding: 30rpx 20rpx 22rpx;
+        border-bottom-left-radius: 30rpx;
+        border-bottom-right-radius: 30rpx;
+
+        .searchImg {
+            position: absolute;
+            top: 42rpx;
+            left: 42rpx;
+            width: 24rpx;
+            height: 24rpx;
+        }
+
+        .input {
+            width: 100%;
+            height: 50rpx;
+            border-radius: 50rpx;
+            background-color: #F2F6FC;
+            box-sizing: border-box;
+        }
+    }
+
+    .selectType {
+        padding: 30rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .type {
+            padding: 14rpx 0rpx;
+            width: 200rpx;
+            box-sizing: border-box;
+            text-align: center;
+            border: 1rpx solid #9f9f9fa4;
+            border-radius: 50rpx;
+            color: #1A1A1A;
+            font-size: 24rpx;
+        }
+
+        .currentType {
+            border: none;
+            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+            background-color: white;
+            font-weight: bold;
+        }
+    }
+}

pages/index/index.wxml

@@ -0,0 +1,33 @@
+<navigationBar></navigationBar>
+<view class="recommend">
+    <!-- 头部及轮播图 -->
+    <view class="header">
+        <view class="headerBg"></view>
+        <swiper class="swiper" autoplay circular indicator-dots indicator-active-color="#fff"
+            indicator-color='#ecececa1'>
+            <block wx:for="{{background}}" wx:key="*this">
+                <swiper-item>
+                    <view class="swiper-item {{item}}"></view>
+                </swiper-item>
+            </block>
+        </swiper>
+    </view>
+    <!-- 一级分类区域 -->
+    <scroll-view class="firstClassify" scroll-x="true">
+        <view class="firstBox" wx:for="{{10}}" wx:key="index">
+            <image class="icon" src="/static/header.png" mode="" />
+            <view class="name">书香美文</view>
+        </view>
+    </scroll-view>
+    <!-- 搜索框 -->
+    <view class="search">
+        <image src="/static/search.png" class="searchImg" />
+        <view class="input" />
+    </view>
+    <!-- 展示类型选择 -->
+    <view class="selectType" bindtap="selectType">
+        <view class="type {{currentType=='1'?'currentType':''}}" data-type='1'>优秀作品展播</view>
+        <view class="type {{currentType=='2'?'currentType':''}}" data-type='2'>官方推荐</view>
+        <view class="type {{currentType=='3'?'currentType':''}}" data-type='3'>官方活动</view>
+    </view>
+</view>

pages/index/index.wxss

@@ -0,0 +1,97 @@
+.recommend .header {
+  position: relative;
+}
+.recommend .header .headerBg {
+  position: absolute;
+  z-index: -2;
+  width: 100%;
+  height: 100%;
+  background-color: white;
+}
+.recommend .header .swiper {
+  margin: 0 auto;
+  width: 710rpx;
+  height: 216rpx;
+  border-radius: 20rpx;
+  overflow: hidden;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+}
+.recommend .header .swiper .swiper-item {
+  width: 100%;
+  height: 100%;
+  border-radius: 20rpx;
+  overflow: hidden;
+}
+.recommend .firstClassify {
+  padding-top: 34rpx;
+  width: 100%;
+  white-space: nowrap;
+  background-color: white;
+}
+.recommend .firstClassify .firstBox {
+  text-align: center;
+  display: inline-block;
+  width: 100rpx;
+  padding: 0rpx 20rpx;
+}
+.recommend .firstClassify .firstBox .icon {
+  width: 58rpx;
+  height: 58rpx;
+}
+.recommend .firstClassify .firstBox .name {
+  margin-top: 6rpx;
+  font-weight: bold;
+  font-size: 24rpx;
+}
+.recommend .demo-text-1 {
+  background-color: rebeccapurple;
+}
+.recommend .demo-text-2 {
+  background-color: #649933;
+}
+.recommend .demo-text-3 {
+  background-color: #e4772e;
+}
+.recommend .search {
+  position: relative;
+  background-color: white;
+  padding: 30rpx 20rpx 22rpx;
+  border-bottom-left-radius: 30rpx;
+  border-bottom-right-radius: 30rpx;
+}
+.recommend .search .searchImg {
+  position: absolute;
+  top: 42rpx;
+  left: 42rpx;
+  width: 24rpx;
+  height: 24rpx;
+}
+.recommend .search .input {
+  width: 100%;
+  height: 50rpx;
+  border-radius: 50rpx;
+  background-color: #F2F6FC;
+  box-sizing: border-box;
+}
+.recommend .selectType {
+  padding: 30rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.recommend .selectType .type {
+  padding: 14rpx 0rpx;
+  width: 200rpx;
+  box-sizing: border-box;
+  text-align: center;
+  border: 1rpx solid #9f9f9fa4;
+  border-radius: 50rpx;
+  color: #1A1A1A;
+  font-size: 24rpx;
+}
+.recommend .selectType .currentType {
+  border: none;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+  background-color: white;
+  font-weight: bold;
+}