update

pages/collection/collection.wxml

@@ -26,7 +26,27 @@
           {{item.text}}
       </view>
     </view>
+    <!-- 这里就放一些静态数据 -->
     <view class="collectionContent">
-      暂无内容
+      <block>
+        <view class="content" bindtap="gotoDetails" data-coverImg="{{item.albumCoverUrl290}}" data-title="{{item.title}}">
+          <view class="contentImg">
+            <image src="http://imagev2.xmcdn.com/group71/M04/4C/11/wKgOz14Esw2SM9gQAAGQsBR1YeE034.jpg!op_type=5&upload_type=album&device_type=ios&name=medium&magick=png" mode="widthFix"></image>
+          </view>
+          <view class="content-right">
+            <view class="content-title">
+              <view class="titleText">郭德纲相声专场</view>
+              <view class="introduction">每天听个郭德纲，快乐永驻你身旁。相声专场在银川，喜马来把笑声传。 著名相声演...</view>
+            </view>
+            <view class="count">
+              <view class="playcount">
+                <!-- <text class="icon-"></text> -->
+                126亿
+              </view>
+              <view class="jicount">70集</view>
+            </view>
+          </view>
+        </view>
+      </block>
     </view>
 </block>

pages/collection/collection.wxss

@@ -1,24 +1,27 @@
 /* pages/collection/collection.wxss */
-.titleBar{
-    width: 100%;
-    height: 80rpx;
-    /* 这个配色不对 */
-    border-bottom: 1rpx solid #f1f1f1;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 28rpx;
-    overflow: hidden;
+
+.titleBar {
+  width: 100%;
+  height: 80rpx;
+  /* 这个配色不对 */
+  border-bottom: 1rpx solid #f1f1f1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 28rpx;
+  overflow: hidden;
 }
-.itemTitle{
-    width: 200rpx;
-    height: 100%;
-    text-align: center;
-    line-height: 80rpx;
-    position: relative;
-    color: #aaaaaa;
+
+.itemTitle {
+  width: 200rpx;
+  height: 100%;
+  text-align: center;
+  line-height: 80rpx;
+  position: relative;
+  color: #aaa;
 }
-.active:after{
+
+.active:after {
   content: '';
   width: 40rpx;
   height: 8rpx;
@@ -32,13 +35,12 @@
 .active {
   font-size: 32rpx;
   font-weight: 700;
-  transition: all .3s;
-  color: #333333;
+  transition: all 0.3s;
+  color: #333;
+}
+
+.collectionContent {
+  width: 90%;
+  margin: 0rpx auto;
+  margin-top: 10rpx;
 }
-.collectionContent{
-  width: 100%;
-  text-align: center;
-  position: absolute;
-  top: 300rpx;
-  color: #aaaaaa
-}

pages/index/index.wxml

@@ -74,7 +74,7 @@
           <image src="{{item.albumCoverUrl290}}" mode="widthFix"></image>
         </view>
         <view class="content-right">
-          <view class="title">
+          <view class="content-title">
             <view class="titleText">{{item.title}}</view>
             <view class="introduction">{{item.trackTitle}}</view>
           </view>
@@ -101,7 +101,7 @@
           <image src="{{item.albumCoverUrl290}}" mode="widthFix"></image>
         </view>
         <view class="content-right">
-          <view class="title">
+          <view class="content-title">
             <view class="titleText">{{item.title}}</view>
             <view class="introduction">{{item.trackTitle}}</view>
           </view>
@@ -128,7 +128,7 @@
           <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
         </view>
         <view class="content-right">
-          <view class="title">
+          <view class="content-title">
             <view class="titleText">{{item.title}}</view>
             <view class="introduction">{{item.trackTitle}}</view>
           </view>

pages/index/index.wxss

@@ -125,83 +125,7 @@
   border-bottom-left-radius: 15rpx;
   border-bottom-right-radius: 15rpx;
 }
-/* 主要内容 */
-.contentList{
-  width: 90%;
-  margin: 0rpx auto;
-  margin-top: 10rpx;
-}
-.content{
-  width: 100%;
-  height: auto;
-  padding: 20rpx 0rpx;
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1rpx solid #f1f1f1;
-}
-.contentImg{
-  width: 232rpx;
-  height: 232rpx;
-  border-radius: 15rpx;
-}
-.contentImg>image{
-  width: 100%;
-  height: 100%;
-  border-radius: 15rpx;
-}
-.content-right{
-  width: 530rpx;
-  height: 100%;
-  margin-left: 20rpx;
-  display: flex;
-  flex-direction: column;
-}
-.title{
-  width: 100%;
-  height: 138rpx;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-.titleText{
-  width: 100%;
-  font-size: 35rpx;
-  color: #333;
-  text-align: left;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;/*行数n*/
-  -webkit-box-orient: vertical; 
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.introduction{
-  width: 100%;
-  font-size: 28rpx;
-  color: #cdcdcd;
-  text-align: left;
-  padding: 15rpx 0rpx;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;/*行数n*/
-  -webkit-box-orient: vertical; 
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.count{
-  width: 100%;
-  height: 50rpx;
-  display: flex;
-  justify-content: start;
-  align-items: center;
-}
-.playcount{
- font-size: 25rpx;
- color: #cdcdcd;
- margin-right: 30rpx;
-}
-.jicount{
-  font-size: 25rpx;
-  color: #cdcdcd;
-}
+
 
 .dataNotip{
   width: 100%;

style/common.wxss

@@ -1,5 +1,82 @@
 /* 公共样式 */
 
+/* 首页主要内容样式 */
+.contentList{
+  width: 90%;
+  margin: 0rpx auto;
+  margin-top: 10rpx;
+}
+.content{
+  width: 100%;
+  height: auto;
+  padding: 20rpx 0rpx;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1rpx solid #f1f1f1;
+}
+.contentImg{
+  width: 232rpx;
+  height: 232rpx;
+  border-radius: 15rpx;
+}
+.contentImg>image{
+  width: 100%;
+  height: 100%;
+  border-radius: 15rpx;
+}
+.content-right{
+  width: 530rpx;
+  height: 100%;
+  margin-left: 20rpx;
+  display: flex;
+  flex-direction: column;
+}
+.content-title{
+  width: 100%;
+  height: 138rpx;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.titleText{
+  width: 100%;
+  font-size: 35rpx;
+  color: #333;
+  text-align: left;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;/*行数n*/
+  -webkit-box-orient: vertical; 
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.introduction{
+  width: 100%;
+  font-size: 28rpx;
+  color: #cdcdcd;
+  text-align: left;
+  padding: 15rpx 0rpx;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;/*行数n*/
+  -webkit-box-orient: vertical; 
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.count{
+  width: 100%;
+  height: 50rpx;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+}
+.playcount{
+ font-size: 25rpx;
+ color: #cdcdcd;
+ margin-right: 30rpx;
+}
+.jicount{
+  font-size: 25rpx;
+  color: #cdcdcd;
+}
 /* 
 ==========
   bar相关