123

component/hot/hot.js

@@ -60,6 +60,14 @@ 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}`
+      })
+    }
+    // 打开用户作品页面
+    that.openWorks = (e) =>{
+      let classId = e.currentTarget.dataset.classid;
+      let title = e.currentTarget.dataset.title;
+      wx.navigateTo({
         url: `../social/works/works?id=${classId}&title=${title}`
       })
     }

component/hot/hot.wxml

@@ -15,12 +15,12 @@
     </view>
     <view class="hotSection">
         <view class="title">
-            <image src="../../static/image/hot_recommand.png" alt="" />
-            <text>热门推荐</text>
+            <image src="../../static/image/hot_recommend.png" alt="" />
+            <text>人气推荐</text>
         </view>
         <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}}" />
+            <view wx:for="{{hotData.wareCards}}" wx:key="{{index}}" class="hotWareCard" bindtap="openWorks" data-classId="{{item.classId}}" data-title="{{item.title}}">
+                <!-- <image class="wareCardImg" src="{{item.img}}" />
                 <view wx:if="{{index===0}}" class="wrapper">
                     <text class="wareCardTitle">{{item.title}}</text>
                     <view class="bottomData">
@@ -48,8 +48,47 @@
                             <text>{{item.likes}}</text>
                         </view>
                     </view>
+                </view> -->
+                <image class="wareCardImg" src="{{item.img}}" />
+                <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>
+        </view>
+    
+    </view>
+
+    <view class="hotSection">
+        <view class="title">
+            <image class="recommendTag" src="../../static/image/class_recommend.png" alt="" />
+            <text>本周课程推荐</text>
+        </view>
+        <view class="hotWares" style="flex-direction:row;">
+            <view wx:for="{{hotData.wareCards}}" wx:key="{{index}}" class="hotWareCard" bindtap="openClass" data-classId="{{item.classId}}" data-title="{{item.title}}">
+                <image class="wareCardImg" src="{{item.img}}" />
+                <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>
         </view>
+    
     </view>
 </template>

component/hot/hot.wxss

@@ -62,28 +62,34 @@ swiper {
     width: 100%;
     /* height: 50rpx; */
     background: #fff;
-    margin-top: 8rpx;
+    margin-top: 10rpx;
 }
 
 .hotSection .title {
     display: flex;
     align-items: center;
-    margin: 20rpx 0 20rpx 20rpx;
+    margin: 8rpx 20rpx 20rpx 8rpx;
 }
 
 .hotSection .title image {
-    /* margin-left: 24rpx; */
-    width: 34rpx;
-    height: 38rpx;
+    width: 54rpx;
+    height: 60rpx;
+    margin-left: 14rpx;
+}
+.hotSection .title .recommendTag {
+    width: 38rpx;
+    height: 34rpx;
 }
+
 .hotSection .title text {
-    width: 112rpx;
+    width: 224rpx;
+    letter-spacing: 4rpx;
     height: 40rpx;
     margin-left: 12rpx;
-    font-size: 28rpx;
-    line-height: 50rpx;
+    font-size: 32rpx;
+    line-height: 40rpx;
     font-family: PingFangSC-regular;
-    color: #101010
+    color: #414141;
 }
 
 .hotWares {
@@ -94,50 +100,34 @@ swiper {
 .hotSection .hotWares .hotWareCard {
     position: relative;
     overflow: hidden;
-    width: 352rpx;
-    height: 322rpx;
-    margin: 0 0 18rpx 16rpx;
-    box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28);
+    width: 704rpx;
+    height: 402rpx;
+    /* margin: 0 0 18rpx 16rpx; */
+    margin: 0 auto 20rpx;
+    /* box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28); */
 }
 
 
 
 .hotWareCard .wareCardImg {
     width: 100%;
-    height: 200rpx;
+    height: 290rpx;
+    border-radius: 20rpx;
 }
 
 
 
 .hotWareCard .wareCardTitle {
-    margin: 0 auto;
-    width: 320rpx;
+    /* margin: 0 auto; */
+    width: 100%;
     height: 46rpx;
     display: block;
-    text-align: center;
-    color: rgba(16, 16, 16, 1);
+    /* text-align: left; */
+    color: #414141;
     font-size: 32rpx;
+    letter-spacing: 4rpx;
+    font-family: MicrosoftYaHei;
 }
-
-
-
-
-
-.hotWareCard .wareCardTip {
-    position: absolute;
-    top: 10rpx;
-    left: 4rpx;
-    z-index: 2;
-    width: 178rpx;
-    height: 40rpx;
-    display: block;
-    text-align: center;
-    color: rgba(16, 16, 16, 1);
-    font-size: 28rpx;
-}
-
-
-
 .hotWareCard .bottomData {
     height: 34rpx;
     margin-top: 10rpx;
@@ -147,14 +137,24 @@ swiper {
     align-items: center;
 }
 
-.hotWareCard .wareCardPlays {
+.hotWareCard .bottomData .wareCardPlays {
     width: 100rpx;
-    margin-left: 18rpx;
+    margin-left: 270rpx;
     display: flex;
     flex-direction: row;
     align-items: center;
 }
 
+.hotWareCard .wareCardTip {
+
+    width: 178rpx;
+    height: 40rpx;
+    display: block;
+    text-align: center;
+    color: #414141;
+    font-size: 24rpx;
+}
+
 .hotWareCard .wareCardPlays .wareCardPlaysImg {
     width: 30rpx;
     height: 30rpx;
@@ -184,6 +184,7 @@ swiper {
     color: #FF9800;
     font-size: 24rpx;
 }
+
 /** 第一个大图**/
 .hotSection .hotWares .hotWareCardFirst {
     position: relative;

pages/index/index.wxss

@@ -5,6 +5,9 @@
 /* @import "/component/search/search.wxss"; */
 /*我的*/
 @import "/component/my/my.wxss";
+.container{
+  background: rgba(240,241,245,1);
+}
 .template {
   height: 100%;
 }