新官方推荐组件开发

components/authority/index.js

@@ -1,23 +1,20 @@
-// components/authority/index.js
 Component({
-  /**
-   * 组件的属性列表
-   */
   properties: {
-
+    worksList: {
+      type: Array,
+      value: [],
+    },
   },
-
-  /**
-   * 组件的初始数据
-   */
   data: {
 
   },
-
-  /**
-   * 组件的方法列表
-   */
   methods: {
-
+    jumpReading({
+      currentTarget
+    }) {
+      wx.navigateTo({
+        url: `/pages/reading/index?videoId=${currentTarget.dataset.id}&autoPlay=true`
+      })
+    }
   }
-})
+})

components/authority/index.json

@@ -1,4 +1,5 @@
 {
   "component": true,
-  "usingComponents": {}
+  "usingComponents": {},
+  "styleIsolation": "apply-shared"
 }

components/authority/index.less

@@ -1,3 +1,77 @@
-.authority{
-  
+.authority {
+  height: 100%;
+  padding: 0rpx 20rpx;
+  padding-bottom: 100px;
+
+  .module {
+    .topic {
+      font-size: 38rpx;
+      font-weight: bold;
+    }
+
+    .explain {
+      margin-top: 10rpx;
+      font-size: 24rpx;
+    }
+
+    .works {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+
+      .work {
+        margin: 20rpx 0rpx;
+
+        .cover {
+          width: 344rpx;
+          height: 194rpx;
+          border-radius: 8rpx;
+        }
+
+        .title {
+          width: 344rpx;
+          margin-top: 6rpx;
+          font-size: 32rpx;
+        }
+      }
+
+      .audioBox {
+        position: relative;
+
+        .audioPlay {
+          position: absolute;
+          left: 0px;
+          top: 0px;
+          bottom: 0px;
+          right: 0px;
+          margin: auto;
+          width: 220rpx;
+          height: 174rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .audioPlayBg {
+            width: 150rpx;
+            height: 150rpx;
+          }
+
+          .audioPlayZhen {
+            position: absolute;
+            right: 30rpx;
+            top: 16rpx;
+            width: 32rpx;
+            height: 40rpx;
+          }
+
+          .cover {
+            position: absolute;
+            width: 130rpx;
+            height: 130rpx;
+            border-radius: 50%;
+          }
+        }
+      }
+    }
+  }
 }

components/authority/index.wxml

@@ -1,3 +1,20 @@
 <view class="authority">
-
+  <view class="module">
+    <view class="topic">热门推荐</view>
+    <view class="explain">一句一句话介绍一句话介绍句话介绍</view>
+    <view class="works">
+      <view class="work" wx:for="{{worksList}}" wx:key="index" bindtap="jumpReading" data-id='{{item.userRead.id}}'>
+        <image src="{{item.userRead.coverImg}}" class="cover" wx:if="{{item.userReadExtend.resourcesType==0}}" />
+        <view class="audioBox" wx:else>
+          <image src="{{item.userReadExtend.backgroundVirtualImg}}" class="cover" />
+          <view class="audioPlay">
+            <image src="/static/audioBg.png" class="audioPlayBg" />
+            <image src="/static/zhen.png" class="audioPlayZhen" />
+            <image src="{{item.userRead.coverImg}}" class="cover" />
+          </view>
+        </view>
+        <view class="textOver title">{{item.userRead.title}}</view>
+      </view>
+    </view>
+  </view>
 </view>

components/authority/index.wxss

@@ -0,0 +1,64 @@
+.authority {
+  height: 100%;
+  padding: 0rpx 20rpx;
+  padding-bottom: 100px;
+}
+.authority .module .topic {
+  font-size: 38rpx;
+  font-weight: bold;
+}
+.authority .module .explain {
+  margin-top: 10rpx;
+  font-size: 24rpx;
+}
+.authority .module .works {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.authority .module .works .work {
+  margin: 20rpx 0rpx;
+}
+.authority .module .works .work .cover {
+  width: 344rpx;
+  height: 194rpx;
+  border-radius: 8rpx;
+}
+.authority .module .works .work .title {
+  width: 344rpx;
+  margin-top: 6rpx;
+  font-size: 32rpx;
+}
+.authority .module .works .audioBox {
+  position: relative;
+}
+.authority .module .works .audioBox .audioPlay {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  bottom: 0px;
+  right: 0px;
+  margin: auto;
+  width: 220rpx;
+  height: 174rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.authority .module .works .audioBox .audioPlay .audioPlayBg {
+  width: 150rpx;
+  height: 150rpx;
+}
+.authority .module .works .audioBox .audioPlay .audioPlayZhen {
+  position: absolute;
+  right: 30rpx;
+  top: 16rpx;
+  width: 32rpx;
+  height: 40rpx;
+}
+.authority .module .works .audioBox .audioPlay .cover {
+  position: absolute;
+  width: 130rpx;
+  height: 130rpx;
+  border-radius: 50%;
+}