开发首页

components/navigationBar/index.less

@@ -31,8 +31,20 @@
             text-align: center;
         }
     }
+
+
 }
 
+.headerBg {
+    z-index: -1;
+    position: absolute;
+    left: 0px;
+    width: 100%;
+    height: 210rpx;
+    background: url(https://reader-wx.ai160.com/images/reader/v3/navbarBg.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: center;
+}
 
 .gradeContainer {
     width: 100%;
@@ -85,6 +97,7 @@
 
         .submitBox {
             text-align: center;
+
             .submit {
                 width: 360rpx;
                 margin-top: 60rpx;

components/navigationBar/index.wxml

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

components/navigationBar/index.wxss

@@ -29,6 +29,16 @@
 .nav-bar .view .title {
   text-align: center;
 }
+.headerBg {
+  z-index: -1;
+  position: absolute;
+  left: 0px;
+  width: 100%;
+  height: 210rpx;
+  background: url(https://reader-wx.ai160.com/images/reader/v3/navbarBg.png) no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
+}
 .gradeContainer {
   width: 100%;
   height: 100%;

pages/index copy/index.js

@@ -1,150 +0,0 @@
-const app = getApp()
-import {
-    getHotrecommendList,
-} from "~/api/works"
-import {
-    getBannerList
-} from '~/api/global'
-import reachBottom from '~/mixins/reachBottom'
-import event from '~/mixins/event'
-import share from '~/mixins/share'
-import {
-    createStoreBindings
-} from 'mobx-miniprogram-bindings'
-import {
-    store
-} from '~/store/index'
-Page({
-    behaviors: [reachBottom, share,event],
-    data: {
-        navBarHeight: app.globalData.navBarHeight,
-        background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
-        currentType: '3',
-        // 控制一级分类是否固定
-        isFixed: false,
-        desktopTips: app.globalData.desktopTips,
-        bannerList: []
-    },
-    onLoad(options) {
-        this.getLocUserInfo()
-        if (Object.keys(this.data.userInfo).length > 0) {
-            this.requestAgain()
-        } else {
-            getApp().callBack = (res) => {
-                this.getLocUserInfo()
-                this.requestAgain()
-            }
-        }
-        let {
-            desktopTips
-        } = app.globalData
-        if (desktopTips) {
-            setTimeout(() => {
-                this.setData({
-                    desktopTips: false
-                })
-                wx.setStorage({
-                    key: "preDesktopTime",
-                    data: new Date()
-                })
-            }, 6000)
-        }
-    },
-    onShow() {
-        if (typeof this.getTabBar === 'function') {
-            this.getTabBar().setData({
-                selected: 2
-            })
-        }
-    },
-    onUnload() {
-        this.storeBindings.destroyStoreBindings()
-    },
-    onReachBottom() {
-        this.loadMore()
-    },
-    async getLocUserInfo() {
-        this.storeBindings = createStoreBindings(this, {
-            store,
-            fields: {
-                userInfo: 'userInfo'
-            },
-        })
-        this.storeBindings.updateStoreBindings()
-    },
-    async loadMore() {
-        if (!this.data.userInfo.grade) {
-            return
-        }
-        if (this.data.currentType == '3') {
-            this.localGetData(getHotrecommendList, {
-                grade: this.data.userInfo.grade
-            })
-        }
-    },
-    jumpSearch() {
-        wx.navigateTo({
-            url: '/pages/childClassify/index?type=search',
-        })
-    },
-    /**
-     * 监听页面滚动事件
-     */
-    onPageScroll(e) {
-        if (e.scrollTop >= 103 && !this.data.isFixed) {
-            this.setData({
-                isFixed: true
-            })
-        } else if (e.scrollTop < 103 && this.data.isFixed) {
-            this.setData({
-                isFixed: false
-            })
-        }
-    },
-
-    closeDesktop() {
-        this.setData({
-            desktopTips: false
-        })
-        wx.setStorage({
-            key: "preDesktopTime",
-            data: new Date()
-        })
-    },
-    async getBannerList() {
-        let bannerList = await getBannerList({
-            grade: this.data.userInfo.grade,
-        })
-        this.setData({
-            bannerList,
-        })
-    },
-    requestAgain() {
-        this.resetData()
-        this.getBannerList()
-        if (this.data.currentType != 3) {
-            this.selectComponent('#activityList').getActivities()
-        }
-    },
-    selectType({
-        target
-    }) {
-        if (target.dataset.type) {
-            if (this.selectComponent('#worksList')) {
-                this.selectComponent('#worksList').resetAudio()
-            }
-            this.setData({
-                currentType: target.dataset.type,
-            })
-            if (target.dataset.type != 3) {
-                this.selectComponent('#activityList').getActivities()
-            }
-            if (target.dataset.type == '3') {
-                this.resetData()
-            }
-        }
-    },
-    onUnload() {
-        this.storeBindings.destroyStoreBindings()
-    },
-})

pages/index copy/index.json

@@ -1,11 +0,0 @@
-{
-    "usingComponents": {
-        "navigationBar": "/components/navigationBar/index",
-        "banner": "/components/banner/index",
-        "worksList": "/components/worksList/index",
-        "activityList": "/components/activityList/index",
-        "authority": "/components/authority/index"
-    },
-    "navigationStyle": "custom",
-    "enablePullDownRefresh": false
-}

pages/index copy/index.less

@@ -1,70 +0,0 @@
-.recommend {
-  position: relative;
-  padding-bottom: calc(140rpx + env(safe-area-inset-bottom)) !important;
-
-  .desktopTips {
-    position: fixed;
-    z-index: 999;
-    right: 0rpx;
-
-    .triangle {
-      position: absolute;
-      right: 124rpx;
-      top: -26rpx;
-      border: 20rpx solid #F9F9FF;
-      border-top-color: transparent;
-      border-left-color: transparent;
-      border-right-color: transparent;
-    }
-
-    .tipsImg {
-      width: 530rpx;
-      height: 176rpx;
-    }
-  }
-
-  .scrollBox {
-    width: 100%;
-
-  
-  }
-
-  .selectType {
-    padding: 30rpx 15rpx 30rpx 26rpx;
-    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: 28rpx;
-    }
-
-    .currentType {
-      color: white;
-      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
-      background-color: #00C657;
-      border-color: #00C657;
-      font-weight: bold;
-    }
-
-    .search {
-      font-size: 0rpx;
-      padding: 14rpx 14rpx;
-      text-align: center;
-      border: 1rpx solid #9f9f9fa4;
-      border-radius: 50rpx;
-
-      .searchImg {
-        width: 26rpx;
-        height: 26rpx;
-      }
-    }
-  }
-}

pages/index copy/index.wxml

@@ -1,30 +0,0 @@
-<navigationBar bind:reload='requestAgain'></navigationBar>
-<view class="recommend">
-    <banner bannerList="{{bannerList}}" userInfo="{{userInfo}}" />
-    <!-- 加桌提示 -->
-    <view class=" desktopTips" wx:if="{{desktopTips}}" style="top:{{navBarHeight+3}}px" bindtap="closeDesktop">
-        <view class="triangle"></view>
-        <image src="http://reader-wx.ai160.com/images/reader/v3/desktop-android.png" class="tipsImg" />
-    </view>
-    <!-- 滚动定位 -->
-    <view class="scrollBox {{isFixed?'isFixed':''}}" style="top:{{navBarHeight}}px;">
-        <!-- 展示类型选择 -->
-        <view class="selectType {{isFixed?'isFixed2':''}}" bindtap="selectType">
-            <view class="type {{currentType=='2'?'currentType':''}}" data-type='2'>排行榜</view>
-            <view class="type {{currentType=='3'?'currentType':''}}" data-type='3'>作品展播</view>
-            <view class="type {{currentType=='4'?'currentType':''}}" data-type='4'>官方活动</view>
-            <view class="search" bindtap="jumpSearch">
-                <image src="/static/search.png" class="searchImg" />
-            </view>
-        </view>
-    </view>
-    <!-- 当一级分类固定定位时占位用的元素 -->
-    <view class="{{isFixed?'brace':''}}" />
-    <!-- 优秀作品展播及官方推荐列表组件 -->
-    <worksList id="worksList" wx:if="{{currentType=='3'}}" worksList="{{list}}" videoType="public" tabBarPadding='true'
-        autoPlay='{{false}}' />
-    <view hidden="{{currentType=='3'}}">
-        <activityList id="activityList" classify='{{currentType}}' />
-    </view>
-</view>
-<canvas id='share' type="2d"> </canvas>

pages/index copy/index.wxss

@@ -1,59 +0,0 @@
-.recommend {
-  position: relative;
-  padding-bottom: calc(140rpx + env(safe-area-inset-bottom)) !important;
-}
-.recommend .desktopTips {
-  position: fixed;
-  z-index: 999;
-  right: 0rpx;
-}
-.recommend .desktopTips .triangle {
-  position: absolute;
-  right: 124rpx;
-  top: -26rpx;
-  border: 20rpx solid #F9F9FF;
-  border-top-color: transparent;
-  border-left-color: transparent;
-  border-right-color: transparent;
-}
-.recommend .desktopTips .tipsImg {
-  width: 530rpx;
-  height: 176rpx;
-}
-.recommend .scrollBox {
-  width: 100%;
-}
-.recommend .selectType {
-  padding: 30rpx 15rpx 30rpx 26rpx;
-  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: 28rpx;
-}
-.recommend .selectType .currentType {
-  color: white;
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
-  background-color: #00C657;
-  border-color: #00C657;
-  font-weight: bold;
-}
-.recommend .selectType .search {
-  font-size: 0rpx;
-  padding: 14rpx 14rpx;
-  text-align: center;
-  border: 1rpx solid #9f9f9fa4;
-  border-radius: 50rpx;
-}
-.recommend .selectType .search .searchImg {
-  width: 26rpx;
-  height: 26rpx;
-}

pages/index/index.less

@@ -4,8 +4,9 @@
     padding-bottom: calc(140rpx + env(safe-area-inset-bottom)) !important;
 
     .firstClassify {
-        margin: 55rpx 0rpx 35rpx;
-        width: 100%;
+        margin: 55rpx auto 35rpx;
+        width: 700rpx;
+        padding: 40rpx 10rpx;
         box-sizing: border-box;
         display: flex;
         flex-wrap: wrap;
@@ -13,11 +14,36 @@
         justify-content: space-between;
         text-align: center;
         z-index: 2;
+        background: #FFFFFF;
+        border-radius: 30rpx;
 
-        .icon {
-            margin-bottom: 12rpx;
-            width: 187rpx;
-            height: 164rpx;
+        .classifyBox {
+            margin-bottom: 20rpx;
+            width: 25%;
+
+            .icon {
+                width: 108rpx;
+                height: 150rpx;
+            }
+        }
+
+        .searchBox {
+            margin: 10rpx auto 0;
+            width: 412rpx;
+            height: 60rpx;
+            background: #F2F6FC;
+            border-radius: 27rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 27rpx;
+            color: #666666;
+
+            .search-icon {
+                margin-left: 22rpx;
+                width: 30rpx;
+                height: 27rpx;
+            }
         }
     }
 

pages/index/index.wxml

@@ -3,9 +3,18 @@
     <banner bannerList="{{bannerList}}" userInfo="{{userInfo}}" />
     <!-- 一级分类 -->
     <view class="firstClassify">
-        <image wx:for="{{categoryList}}" wx:key="id" data-item='{{item}}' bindtap="jumpChildClassify" class="icon"
-            src="{{item.icon}}" />
-        <image bindtap="showTips" class="icon" src="/static/future.png" />
+        <view class="classifyBox" wx:for="{{categoryList}}" wx:key="id" data-item='{{item}}'
+            bindtap="jumpChildClassify">
+            <!-- <image class="icon" src="{{item.icon}}" /> -->
+            <image bindtap="showTips" class="icon" src="/static/future.png" />
+        </view>
+        <view class="classifyBox">
+            <image bindtap="showTips" class="icon" src="/static/future.png" />
+        </view>
+        <view class="searchBox">
+            内容搜索
+            <image src="/static/search-3.png" class="search-icon" />
+        </view>
     </view>
     <!-- 资源 -->
     <view class="resourceBox">

pages/index/index.wxss

@@ -4,8 +4,9 @@
   padding-bottom: calc(140rpx + env(safe-area-inset-bottom)) !important;
 }
 .recommend .firstClassify {
-  margin: 55rpx 0rpx 35rpx;
-  width: 100%;
+  margin: 55rpx auto 35rpx;
+  width: 700rpx;
+  padding: 40rpx 10rpx;
   box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;
@@ -13,11 +14,33 @@
   justify-content: space-between;
   text-align: center;
   z-index: 2;
+  background: #FFFFFF;
+  border-radius: 30rpx;
 }
-.recommend .firstClassify .icon {
-  margin-bottom: 12rpx;
-  width: 187rpx;
-  height: 164rpx;
+.recommend .firstClassify .classifyBox {
+  margin-bottom: 20rpx;
+  width: 25%;
+}
+.recommend .firstClassify .classifyBox .icon {
+  width: 108rpx;
+  height: 150rpx;
+}
+.recommend .firstClassify .searchBox {
+  margin: 10rpx auto 0;
+  width: 412rpx;
+  height: 60rpx;
+  background: #F2F6FC;
+  border-radius: 27rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 27rpx;
+  color: #666666;
+}
+.recommend .firstClassify .searchBox .search-icon {
+  margin-left: 22rpx;
+  width: 30rpx;
+  height: 27rpx;
 }
 .recommend .desktopTips {
   position: fixed;