合并备份

app.json

@@ -2,7 +2,8 @@
   "pages": [
     "pages/index/index",
     "pages/main/class/class",
-    "pages/main/reading/reading"
+    "pages/main/reading/reading",
+    "pages/social/works/works"
   ],
   "window": {
     "backgroundTextStyle": "light",

app.wxss

@@ -7,5 +7,5 @@
   justify-content: space-between;
   padding: 80rpx 0;
   box-sizing: border-box;
-  background: #f0f1f5
+  /* background: #f0f1f5 */
 } 

component/group/group.js

@@ -0,0 +1,9 @@
+export const groupInit =  (that) => {
+    that.setData({
+      groupData: {
+        title: '关注'
+      }
+    })
+    //请求数据封装
+  
+  }

component/group/group.wxml

@@ -0,0 +1,3 @@
+<template name="group">
+  <view> group 热团 </view>
+</template>

component/hot/hot.js

@@ -12,6 +12,8 @@ export const hotInit = (that) => {
         interval: 5000,
         duration: 700,
         circular: true,
+        hotWareCardFirst: 'hotWareCardFirst',
+        hotWareCard : 'hotWareCard',
         hotSearch: '鹅鹅鹅',
         wareCards:[
           {
@@ -38,87 +40,6 @@ export const hotInit = (that) => {
             likes: "54321",
             classId: "2"
           },
-          {
-            title:"铺满金色巴掌的水泥道",
-            grade:"一年级 上学期",
-            img: "../../static/image/timg.jpg",
-            plays: "12345",
-            likes: "54321",
-            classId: "2"
-          },
-          {
-            title:"铺满金色巴掌的水泥道",
-            grade:"一年级 上学期",
-            img: "../../static/image/timg.jpg",
-            plays: "12345",
-            likes: "54321",
-            classId: "2"
-          },
-          {
-            title:"铺满金色巴掌的水泥道",
-            grade:"一年级 上学期",
-            img: "../../static/image/timg.jpg",
-            plays: "12345",
-            likes: "54321",
-            classId: "2"
-          },
-          {
-            title:"铺满金色巴掌的水泥道",
-            grade:"一年级 上学期",
-            img: "../../static/image/timg.jpg",
-            plays: "12345",
-            likes: "54321",
-            classId: "2"
-          },
-          {
-            title:"铺满金色巴掌的水泥道",
-            grade:"一年级 上学期",
-            img: "../../static/image/timg.jpg",
-            plays: "12345",
-            likes: "54321",
-            classId: "2"
-          },
-          {
-            title:"铺满金色巴掌的水泥道",
-            grade:"一年级 上学期",
-            img: "../../static/image/timg.jpg",
-            plays: "12345",
-            likes: "54321",
-            classId: "2"
-          },
-          {
-            title:"铺满金色巴掌的水泥道",
-            grade:"一年级 上学期",
-            img: "../../static/image/timg.jpg",
-            plays: "12345",
-            likes: "54321",
-            classId: "2"
-          },
-          {
-            title:"铺满金色巴掌的水泥道",
-            grade:"一年级 上学期",
-            img: "../../static/image/timg.jpg",
-            plays: "12345",
-            likes: "54321",
-            classId: "2"
-          },
-          {
-            title:"铺满金色巴掌的水泥道",
-            grade:"一年级 上学期",
-            img: "../../static/image/timg.jpg",
-            plays: "12345",
-            likes: "54321",
-            classId: "2"
-          },
-          {
-            title:"铺满金色巴掌的水泥道",
-            grade:"一年级 上学期",
-            img: "../../static/image/timg.jpg",
-            plays: "12345",
-            likes: "54321",
-            classId: "2"
-          },
-      
         ]
       }
     }),
@@ -139,7 +60,7 @@ export const hotInit = (that) => {
       let classId = e.currentTarget.dataset.classid;
       let title = e.currentTarget.dataset.title;
       wx.navigateTo({
-        url: `../main/class/class?id=${classId}&title=${title}`
+        url: `../social/works/works?id=${classId}&title=${title}`
       })
     }
 }

component/hot/hot.wxml

@@ -18,19 +18,35 @@
             <image src="../../static/image/hot_recommand.png" alt="" />
             <text>热门推荐</text>
         </view>
-        <view class="hotWares"  style="flex-direction:row;">
-            <view class="hotWareCard" wx:for="{{hotData.wareCards}}" wx:key="{{index}}" bindtap="openClass" data-classId="{{item.classId}}" data-title="{{item.title}}">
+        <view class="hotWares" style="flex-direction:row;">
+            <view wx:for="{{hotData.wareCards}}" wx:key="{{index}}" class="{{index === 0 ? hotData.hotWareCardFirst: hotData.hotWareCard}}" bindtap="openClass" data-classId="{{item.classId}}" data-title="{{item.title}}">
                 <image class="wareCardImg" src="{{item.img}}" />
-                <text class="wareCardTitle">{{item.title}}</text>
-                <text class="wareCardTip">{{item.grade}}</text>
-                <view class="bottomData">
-                    <view class="wareCardPlays">
-                        <image class="wareCardPlaysImg" src="../../static/image/hotPlays.png" />
-                        <text>{{item.plays}}</text>
+                <view wx:if="{{index===0}}" class="wrapper">
+                    <text class="wareCardTitle">{{item.title}}</text>
+                    <view class="bottomData">
+                        <text class="wareCardTip">{{item.grade}}</text>
+                        <view class="wareCardPlays">
+                            <image class="wareCardPlaysImg" src="../../static/image/hotPlays.png" />
+                            <text>{{item.plays}}</text>
+                        </view>
+                        <view class="wareCardLikes">
+                            <image class="wareCardLikesImg" src="../../static/image/like.png" />
+                            <text>{{item.likes}}</text>
+                        </view>
                     </view>
-                    <view class="wareCardLikes">
-                        <image class="wareCardLikesImg" src="../../static/image/like.png" />
-                        <text>{{item.likes}}</text>
+                </view>
+                <view wx:if="{{index!==0}}">
+                    <text class="wareCardTitle">{{item.title}}</text>
+                    <text class="wareCardTip">{{item.grade}}</text>
+                    <view class="bottomData">
+                        <view class="wareCardPlays">
+                            <image class="wareCardPlaysImg" src="../../static/image/hotPlays.png" />
+                            <text>{{item.plays}}</text>
+                        </view>
+                        <view class="wareCardLikes">
+                            <image class="wareCardLikesImg" src="../../static/image/like.png" />
+                            <text>{{item.likes}}</text>
+                        </view>
                     </view>
                 </view>
             </view>

component/hot/hot.wxss

@@ -1,14 +1,17 @@
 swiper {
-    background: red;
+    margin-top: 10rpx;
+    background: #fff;
     display: block;
     width: 100%;
-    height: 318rpx;
+    height: 312rpx;
 }
 
 .slide-image {
     display: block;
-    width: 100%;
-    height: 100%;
+    margin: 0 auto;
+    width: 728rpx;
+    height: 312rpx;
+    border-radius: 20rpx;
 }
 
 .searchSection {
@@ -46,43 +49,49 @@ swiper {
     top: 10rpx;
     right: 15rpx;
 }
-.searchSection .allBooks{
+
+.searchSection .allBooks {
     font-size: 28rpx;
-    color:#61ca54;
+    color: #61ca54;
     font-family: PingFangSC-regular;
     width: 112rpx;
     margin-left: 56rpx;
 }
-.hotSection{
+
+.hotSection {
     width: 100%;
     /* height: 50rpx; */
     background: #fff;
     margin-top: 8rpx;
 }
-.hotSection .title{
+
+.hotSection .title {
     display: flex;
     align-items: center;
     margin: 20rpx 0 20rpx 20rpx;
 }
+
 .hotSection .title image {
     /* margin-left: 24rpx; */
     width: 34rpx;
     height: 38rpx;
 }
-.hotSection .title text{
+.hotSection .title text {
     width: 112rpx;
     height: 40rpx;
     margin-left: 12rpx;
     font-size: 28rpx;
     line-height: 50rpx;
     font-family: PingFangSC-regular;
-    color:#101010 
+    color: #101010
 }
-.hotWares{
+
+.hotWares {
     display: flex;
     flex-wrap: wrap;
 }
-.hotSection .hotWares .hotWareCard{
+
+.hotSection .hotWares .hotWareCard {
     position: relative;
     overflow: hidden;
     width: 352rpx;
@@ -90,68 +99,176 @@ swiper {
     margin: 0 0 18rpx 16rpx;
     box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28);
 }
-.hotWareCard .wareCardImg{
+
+
+
+.hotWareCard .wareCardImg {
     width: 100%;
     height: 200rpx;
 }
-.hotWareCard .wareCardTitle{
+
+
+
+.hotWareCard .wareCardTitle {
     margin: 0 auto;
     width: 320rpx;
     height: 46rpx;
-    display:block; 
+    display: block;
     text-align: center;
-    color: rgba(16,16,16,1);
+    color: rgba(16, 16, 16, 1);
     font-size: 32rpx;
 }
-.hotWareCard .wareCardTip{
-   position: absolute;
-   top: 10rpx;
-   right: 4rpx;
-   z-index: 2;
+
+
+
+
+
+.hotWareCard .wareCardTip {
+    position: absolute;
+    top: 10rpx;
+    left: 4rpx;
+    z-index: 2;
     width: 178rpx;
     height: 40rpx;
-    display:block; 
+    display: block;
     text-align: center;
-    color: rgba(16,16,16,1);
+    color: rgba(16, 16, 16, 1);
     font-size: 28rpx;
 }
-.bottomData{
+
+
+
+.hotWareCard .bottomData {
     height: 34rpx;
     margin-top: 10rpx;
     display: flex;
     /* flex-direction: row; */
-    justify-content:space-between;
+    justify-content: space-between;
     align-items: center;
 }
-.hotWareCard .wareCardPlays{
+
+.hotWareCard .wareCardPlays {
     width: 100rpx;
     margin-left: 18rpx;
     display: flex;
     flex-direction: row;
     align-items: center;
 }
-.hotWareCard .wareCardPlays .wareCardPlaysImg{
+
+.hotWareCard .wareCardPlays .wareCardPlaysImg {
     width: 30rpx;
     height: 30rpx;
 }
+
 .hotWareCard .wareCardPlays text {
     margin-left: 4rpx;
     color: #61CA54;
     font-size: 24rpx;
 }
-.hotWareCard .wareCardLikes{
+
+.hotWareCard .wareCardLikes {
     width: 100rpx;
     margin-right: 18rpx;
     display: flex;
     flex-direction: row;
     align-items: center;
 }
-.hotWareCard .wareCardLikes .wareCardLikesImg{
+
+.hotWareCard .wareCardLikes .wareCardLikesImg {
     width: 30rpx;
     height: 30rpx;
 }
+
 .hotWareCard .wareCardLikes text {
     margin-left: 4rpx;
     color: #FF9800;
     font-size: 24rpx;
+}
+/** 第一个大图**/
+.hotSection .hotWares .hotWareCardFirst {
+    position: relative;
+    overflow: hidden;
+    width: 740rpx;
+    height: 342rpx;
+    margin: 10rpx auto 20rpx;
+    box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28);
+}
+
+.hotWareCardFirst .wareCardImg {
+    width: 100%;
+    height: 100%;
+}
+
+.hotWareCardFirst .wrapper {
+    width: 100%;
+    height: 100rpx;
+    background: #fff;
+    position: absolute;
+    bottom: 0;
+}
+
+.hotWareCardFirst .wareCardTitle {
+    margin: 10rpx 20rpx 0;
+    display: block;
+    /* text-align: center; */
+    color: rgba(16, 16, 16, 1);
+    font-size: 32rpx;
+}
+
+.hotWareCardFirst .wareCardTip {
+    margin: 0 20rpx;
+    width: 178rpx;
+    height: 34rpx;
+    display: block;
+    text-align: center;
+    color: rgba(16, 16, 16, 1);
+    font-size: 28rpx;
+}
+
+.hotWareCardFirst .bottomData {
+    width: 100%;
+    height: 34rpx;
+    margin-top: 5rpx;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.hotWareCardFirst .wareCardPlays {
+    width: 100rpx;
+    margin-left: 230rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.hotWareCardFirst .wareCardPlays .wareCardPlaysImg {
+    width: 30rpx;
+    height: 30rpx;
+}
+
+.hotWareCardFirst .wareCardPlays text {
+    margin-left: 4rpx;
+    color: #61CA54;
+    font-size: 24rpx;
+}
+
+.hotWareCardFirst .wareCardLikes {
+    width: 100rpx;
+    margin-right: 18rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.hotWareCardFirst .wareCardLikes .wareCardLikesImg {
+    width: 30rpx;
+    height: 30rpx;
+}
+
+.hotWareCardFirst .wareCardLikes text {
+    margin-left: 4rpx;
+    color: #FF9800;
+    font-size: 24rpx;
 }

pages/index/index.js

@@ -1,6 +1,7 @@
 //index.js
 //获取应用实例
 const app = getApp()
+import { groupInit } from '../../component/group/group';
 import { hotInit } from '../../component/hot/hot';
 import { myInit } from '../../component/my/my';
 import { followInit } from '../../component/follow/follow';
@@ -11,7 +12,11 @@ Page({
   data: {
     tab:[
       {
-        name: '热门',
+        name: '热团',
+        templates: 'group',
+      }, 
+      {
+        name: '推荐',
         templates: 'hot',
       },  
       {
@@ -23,7 +28,7 @@ Page({
         templates: 'my',
       }
     ],
-    myIndex: 0,
+    myIndex: 1,
     templates: 'hot',
     title:'index中的title',
     jurisdictionFlag: true,
@@ -42,12 +47,15 @@ Page({
       templates
     });
     if (myIndex == 0) {
-      hotInit(this);
+      groupInit(this);
     }
     if (myIndex == 1) {
-      followInit(this);
+      hotInit(this);
     }
     if (myIndex == 2) {
+      followInit(this);
+    }
+    if (myIndex == 3) {
       myInit(this);
     }
   },

pages/index/index.wxml

@@ -1,11 +1,12 @@
 <!-- index.wxml -->
 <view class="container">
   <!-- 引入组件 -->
+  <import src="/component/group/group.wxml" />
   <import src="/component/hot/hot.wxml" />
   <import src="/component/follow/follow.wxml" />
   <import src="/component/my/my.wxml" />
   <!-- 调用组件 -->
-  <template is="{{templates}}" data="{{hotData: hotData, followData: followData, myData: myData}}"></template>
+  <template is="{{templates}}" data="{{groupData: groupData, hotData: hotData, followData: followData, myData: myData}}"></template>
   <!-- 顶部导航 -->
   <view class="top-tab">
     <block wx:for="{{tab}}" wx:key="{{index}}">

pages/index/index.wxss

@@ -22,6 +22,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin-bottom: 15rpx;
 }
 
 .tabbar {
@@ -31,14 +32,15 @@
   align-items: center;
   width: 125rpx;
   height: 60rpx;
-  font-size: 32rpx;
+  font-size: 36rpx;
   border-radius: 100rpx;
   background: #fff;
 }
 
 .select {
-  background: #61ca54;
-  color: #fff;
+  color: #000;
+  font-size: 40rpx;
+  font-family: SourceHanSansSC-bold;
 }
 
 .bottom-tab image {

pages/social/works/works.js

@@ -0,0 +1,55 @@
+Page({
+    data: {
+        fullScreenBtn: false,
+        playBtn: false,
+        gesture: true,
+        user: [{
+                nickName: '萝莉小猫咪',
+                image: '../../../static/image/timg.jpg',
+            },
+            {
+                nickName: '萝莉小猫咪',
+                image: '../../../static/image/timg.jpg',
+            },
+            {
+                nickName: '萝莉小猫咪',
+                image: '../../../static/image/timg.jpg',
+            },
+            {
+                nickName: '萝莉小猫咪',
+                image: '../../../static/image/timg.jpg',
+            },
+            {
+                nickName: '萝莉小猫咪',
+                image: '../../../static/image/timg.jpg',
+            },
+            {
+                nickName: '萝莉小猫咪',
+                image: '../../../static/image/timg.jpg',
+            },
+            {
+                nickName: '萝莉小猫咪',
+                image: '../../../static/image/timg.jpg',
+            }
+        ]
+    },
+    onLoad: function (option) {
+        if (option.title) {
+            wx.setNavigationBarTitle({
+                title: option.title //页面标题为路由参数
+            })
+            this.setData({
+                title: option.title,
+                id: option.id
+            })
+        }
+    },
+
+    goToReading: function () {
+        let id = this.data.id;
+        let title = this.data.title;
+        wx.navigateTo({
+            url: `../../main/reading/reading?id=${id}&title=${title}`
+        })
+    }
+})

pages/social/works/works.wxml

@@ -0,0 +1,63 @@
+<view>
+    用户作品
+    <video class="videoSection" src="http://efunvideo.ai160.com/vs2m/001/00103075/00103075012/00103075012.m3u8" controls show-fullscreen-btn="{{fullScreenBtn}}" show-play-btn="{{playBtn}}"></video>
+    <view class="readAuthorSection">
+        <image class="avatar" src="../../../static/image/timg.jpg" />
+        <text class="nickName">萝莉小猫咪</text>
+        <view class="like">
+            <image src="../../../static/image/liked.png" />
+            <text class="likeBtn">点赞</text>
+        </view>
+        <view class="follow">
+            <text class="followBtn">关注</text>
+        </view>
+    </view>
+    <view class="userSection">
+        <view class="title">共有12345人完成了录音</view>
+        <view class="avatarRow">
+            <view class="userItem" wx:for="{{user}}" wx:key="{{index}}">
+                <image src="{{item.image}}" />
+                <text class="nickName">{{item.nickName}}</text>
+            </view>
+        </view>
+    </view>
+    <view class="commentSection">
+        <view class="title">
+            评论（38）
+        </view>
+        <input class="commentInput"  placeholder="听了这么多，说点什么吧"/>
+        <view class="commentArea">
+            <view class="commentItem">
+                <iamge class="avatar" />
+                <text class="nickName"></text>
+                <text class="time"></text>
+                <text class="gut"></text>
+                <view class="commentBtn">
+                    <image class="" />
+                    <text >评论</text>
+                </view>
+                <view class="likes">
+                    <image class="" />
+                    <text >165</text>
+                </view>
+                <view class="commentAll">
+                    共有123条评论
+                </view>
+            </view>
+        </view>
+    </view>
+    <view class="footSection">
+        <view class="collectBtn footerBtn">
+            <image src="../../../static/image/hot_recommand.png" />
+            <text>收藏</text>
+        </view>
+        <view class="readingBtn footerBtn" bindtap="goToReading">
+            <image src="../../../static/image/hot_recommand.png" />
+            <text>我要朗读</text>
+        </view>
+        <view class="shareBtn footerBtn">
+            <image src="../../../static/image/hot_recommand.png" />
+            <text>分享</text>
+        </view>
+    </view>
+</view>

pages/social/works/works.wxss

@@ -0,0 +1,124 @@
+.videoSection{
+    width: 750rpx;
+    height: 428rpx;
+}
+.readAuthorSection{
+    width: 100%;
+    height: 152rpx;
+    display: flex;
+    /* justify-items: center; */
+    align-items: center
+    
+}
+.readAuthorSection .avatar{
+    width: 108rpx;
+    height: 108rpx;
+    border-radius: 50%;
+    margin-left: 22rpx;
+}
+.readAuthorSection .nickName{
+    margin-left: 8rpx;
+    width: 160rpx;
+    height: 46rpx;
+    font-size: 32rpx;
+    color: #101010;
+
+}
+.readAuthorSection .like{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 90rpx;
+    width: 160rpx;
+    height: 60rpx;
+    border: 2rpx solid rgba(255,152,0,1);
+    font-size: 28rpx;
+    border-radius: 30rpx;
+    text-align: center;
+    /* line-height: 60rpx; */
+    color: #ff9800;
+}
+.readAuthorSection .like image{
+    width: 36rpx;
+    height: 36rpx;
+    margin-right: 15rpx;
+
+}
+.readAuthorSection .follow{
+    margin-left: 12rpx;
+    width: 160rpx;
+    height: 60rpx;
+    border: 2rpx solid #259b24;
+    font-size: 28rpx;
+    border-radius: 30rpx;
+    text-align: center;
+    line-height: 60rpx;
+    color: #259b24;
+}
+.userSection{
+    width: 100%;
+    height: 196rpx;
+}
+.userSection .title{
+    
+}
+.userSection .avatarRow{
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+}
+.userSection .avatarRow .userItem{
+    margin-right: 20rpx;
+}
+.avatarRow .userItem image {
+    width: 100rpx;
+    height: 100rpx;
+    border-radius: 50%;
+}
+.avatarRow .userItem .nickName {
+    width: 100rpx;
+    height: 20rpx;
+    color: #101010;
+    font-size: 24rpx;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+.commentSection{
+
+}
+.commentSection .title{
+
+}
+.commentSection .commentInput{
+
+}
+.commentSection .commentArea{
+    
+}
+
+.footSection{
+    width: 750rpx;
+    height: 124rpx;
+    position: fixed;
+    bottom: 0;
+    background: #aaa;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+.readingBtn{
+    width: 148rpx;
+    height: 148rpx;
+    border-radius: 50%;
+    background: #aaa;
+}
+.footerBtn{
+    display: flex;
+    flex-direction: column;
+}
+.footerBtn image{
+    width: 48rpx;    
+    height: 48rpx;
+}