ui修改

app.wxss

@@ -5,7 +5,7 @@ page {
 }
 
 .container {
-  height: 100%;
+  height: auto;
   box-sizing:border-box;
   padding-top: 70rpx;
  

component/follow/follow.wxml

@@ -1,5 +1,5 @@
 <template name="follow">
-  <view class="followWares" style="flex-direction:row;">
+  <!-- <view class="followWares" style="flex-direction:row;">
     <view wx:for="{{followData}}" wx:key="{{index}}" class="followWareCard" bindtap="openWorks" data-readid="{{item.id}}" data-title="{{item.title}}">
       <view class="userCard">
         <image class="avatar" src="{{item.avatar}}" />
@@ -22,5 +22,33 @@
         </view>
     </view>
     </view>
+  </view> -->
+  <view class="followWares">
+    <view wx:for="{{followData}}" wx:key="{{index}}" class="followWareCard" bindtap="openWorks" data-readid="{{item.classId}}" data-title="{{item.title}}">
+      <view class="topData">
+        <view class="worksLeft">
+          <image class="authorAvatar" src="{{item.avatar}}" />
+          <view class="worksInfo">
+            <view class="authorName">{{item.nickName}}</view>
+            <view class="time">{{item.time}}</view>
+          </view>
+        </view>
+        <view class="numberInfo">
+          <view class="wareCardPlays">
+            <text>{{item.plays}}</text>
+            <image class="wareCardPlaysImg" src="../../static/image/hotPlays.png" />
+          </view>
+          <view class="wareCardLikes">
+            <text>{{item.likes}}</text>
+            <image class="wareCardLikesImg" src="../../static/image/like.png" />
+          </view>
+        </view>
+      </view>
+      <image class="wareCardImg" src="{{item.img}}" />
+      <view class="titleSummary">
+        <text class="wareCardTitle">{{item.title}}</text>
+        <text class="wareCardTip">{{item.summary}}</text>
+      </view>
+    </view>
   </view>
 </template>

component/follow/follow.wxss

@@ -1,117 +1,142 @@
 .followWares {
-    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    margin-top:20rpx;
+    /* background: #e8e8e8; */
+}
+.followWareCard {
+    position: relative;
+    overflow: hidden;
+    width: 720rpx;
+    height: 476rpx;
     background: #fff;
-
+    /* padding: 26rpx; */
+    border-radius: 12rpx;
+    /* margin: 0 0 18rpx 16rpx; */
+    margin: 0 auto 20rpx;
+    /* box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28); */
 }
 
-.followWares .followWareCard {
-    width: 100%;
-    height: 526rpx;
-    border-top: solid 2rpx #f0f1f5;
-}
 
-.followWareCard .userCard {
-    width: 100%;
-    height: 126rpx;
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-}
 
-.userCard .avatar {
-    width: 96rpx;
-    height: 96rpx;
-    margin-left: 22rpx;
-    border-radius: 50%;
-    display: flex;
+.followWareCard .wareCardImg {
+    display: block;
+    width: 662rpx;
+    height: 272rpx;
+    margin: 12rpx auto 0;
+    border-radius: 20rpx;
 }
 
-.userCard .nameCross {
+.followWareCard .titleSummary {
     display: flex;
-    flex-direction: column;
-    height: 100%;
-    font-size: 32rpx;
-    margin-left: 14rpx;
-}
-
-.nameCross .nickName {
-    color: #000;
-    margin-top: 14rpx;
-}
-
-.nameCross .time {
-    color: #686868;
-}
-
-.followWareCard .wareCardImg {
-    width: 704rpx;
-    height: 290rpx;
-    border-radius: 20rpx;
-    margin: 0 auto;
-    display: block;
+    justify-content: space-between;
+    margin-top: 12rpx;
 }
 
 .followWareCard .wareCardTitle {
+    /* margin: 0 auto; */
     width: 100%;
     height: 46rpx;
     display: block;
+    /* text-align: left; */
     color: #414141;
-    margin-left: 22rpx;
-    margin-top: 10rpx;
     font-size: 32rpx;
     letter-spacing: 4rpx;
+    margin-left: 28rpx;
     font-family: MicrosoftYaHei;
 }
 
-.followWareCard .bottomData {
-    height: 34rpx;
-    margin-top: 10rpx;
+.followWareCard .topData {
+    height: 92rpx;
+    margin-top: 14rpx;
     display: flex;
-    margin-left: 22rpx;
-    justify-content: space-between;
+    flex-direction: row;
+    /* justify-content: space-between; */
     align-items: center;
 }
 
-.followWareCard .bottomData .wareCardPlays {
-    width: 100rpx;
-    margin-left: 270rpx;
+.worksLeft {
     display: flex;
     flex-direction: row;
+    flex:1;
+    margin-left:10rpx;
+
+}
+
+.worksLeft .worksInfo .authorName {
+    color: #444444;
+    font-size: 32rpx;
+    margin-top: 8rpx;
+
+}
+
+.worksLeft .worksInfo .time {
+    color: #686868;
+    font-size: 28rpx;
+
+}
+
+.followWareCard .topData .wareCardPlays {
+    width: 100rpx;
+    /* margin-left: 270rpx; */
+    display: flex;
+    flex-direction: row-reverse;
     align-items: center;
+    padding-right:35rpx;
+
 }
 
-.followWareCard .wareCardTip {
+.followWareCard .topData .authorAvatar {
+    width: 92rpx;
+    height: 92rpx;
+    margin: 0 22rpx 0 22rpx;
+    display: block;
 
+    border-radius: 50%;
+}
+.topData .numberInfo{
+    display: flex;
+    flex-direction: column;
+}
+.followWareCard .wareCardTip {
     width: 178rpx;
     height: 40rpx;
     display: block;
-    text-align: center;
-    color: #414141;
+    text-align: left;
+    color: #444;
     font-size: 24rpx;
+    line-height:40rpx;
+
 }
 
 .followWareCard .wareCardPlays .wareCardPlaysImg {
-    width: 30rpx;
-    height: 30rpx;
+    width:26rpx;
+height:26rpx;
+margin-right: 6rpx;
+float: right;
 }
 
 .followWareCard .wareCardPlays text {
     margin-left: 4rpx;
-    color: #61CA54;
-    font-size: 24rpx;
+    color: #5e5e5e;
+    font-size: 22rpx;
+    text-align:right;
+/* width:57%; */
+    float: right;
 }
 
 .followWareCard .wareCardLikes {
     width: 100rpx;
     margin-right: 18rpx;
     display: flex;
-    flex-direction: row;
+    flex-direction: row-reverse;
     align-items: center;
 }
 
 .followWareCard .wareCardLikes .wareCardLikesImg {
-    width: 30rpx;
-    height: 30rpx;
+    width:26rpx;
+height:24rpx;
+margin-right: 6rpx;
 }
 
 .followWareCard .wareCardLikes text {

component/hot/hot.wxml

@@ -23,7 +23,10 @@
                 <image class="recommendTag" src="../../static/image/course.png" alt="" />
                 <text>本周推荐</text>
             </view>
-            <view class="moreBtn" bindtap="openMore">更多></view>
+            <view class="moreBtn" bindtap="openMore">
+                更多
+                <image src="../../static/image/to.png" />
+            </view>
         </view>
         <view class="hotWares" style="flex-direction:row;">
             <view wx:for="{{hotData.recommend}}" wx:key="{{index}}" class="hotWareCard" bindtap="openClass" data-classId="{{item.classId}}" data-title="{{item.title}}">
@@ -54,12 +57,12 @@
                     </view>
                     <view class="numberInfo">
                         <view class="wareCardPlays">
-                            <image class="wareCardPlaysImg" src="../../static/image/hotPlays.png" />
                             <text>{{item.plays}}</text>
+                            <image class="wareCardPlaysImg" src="../../static/image/hotPlays.png" />
                         </view>
                         <view class="wareCardLikes">
-                            <image class="wareCardLikesImg" src="../../static/image/like.png" />
                             <text>{{item.likes}}</text>
+                            <image class="wareCardLikesImg" src="../../static/image/like.png" />
                         </view>
                     </view>
                 </view>

component/hot/hot.wxss

@@ -32,7 +32,7 @@ swiper {
     color: #717171;
     font-size: 28rpx;
     margin-left: 14rpx;
-    text-indent: 20rpx;
+    padding-left: 25rpx;
 }
 
 .searchSection .searchBtn {
@@ -106,14 +106,20 @@ swiper {
 }
 
 .hotSection .title .moreBtn {
-    display: block;
-    float: right;
-    width: 80rpx;
-    height: 38rpx;
-    font-size: 28rpx;
-    color: #444;
+    display:flex;
+    flex-direction:row;
+    float:right;
+    width:100rpx;
+    height:38rpx;
+    font-size:28rpx;
+    color:#444;
+    align-items:center;
+    
+}
+.title .moreBtn image{
+    width: 21rpx;
+    height: 25rpx;
 }
-
 .hotWares {
     display: flex;
     flex-wrap: wrap;
@@ -186,6 +192,8 @@ swiper {
     text-align: left;
     color: #444;
     font-size: 24rpx;
+    line-height:40rpx;
+
 }
 
 .hotWareCard .wareCardPlays .wareCardPlaysImg {
@@ -203,7 +211,7 @@ swiper {
     width: 100rpx;
     margin-right: 18rpx;
     display: flex;
-    flex-direction: row;
+    flex-direction: row-reverse;
     align-items: center;
 }
 
@@ -331,8 +339,8 @@ swiper {
 }
 
 .recommdSection .title image {
-    width: 54rpx;
-    height: 60rpx;
+    width: 38rpx;
+    height: 44rpx;
     margin-left: 14rpx;
 }
 
@@ -422,6 +430,8 @@ swiper {
     display: flex;
     flex-direction: row;
     flex:1;
+    margin-left:10rpx;
+
 }
 
 .worksLeft .worksInfo .authorName {
@@ -441,8 +451,10 @@ swiper {
     width: 100rpx;
     /* margin-left: 270rpx; */
     display: flex;
-    flex-direction: row;
+    flex-direction: row-reverse;
     align-items: center;
+    padding-right:35rpx;
+
 }
 
 .worksCard .topData .authorAvatar {
@@ -464,25 +476,31 @@ swiper {
     text-align: left;
     color: #444;
     font-size: 24rpx;
+    line-height:40rpx;
+
 }
 
 .worksCard .wareCardPlays .wareCardPlaysImg {
-    width:20rpx;
-height:22rpx;
+    width:26rpx;
+height:26rpx;
 margin-right: 6rpx;
+float: right;
 }
 
 .worksCard .wareCardPlays text {
     margin-left: 4rpx;
     color: #5e5e5e;
     font-size: 22rpx;
+    text-align:right;
+/* width:57%; */
+    float: right;
 }
 
 .worksCard .wareCardLikes {
     width: 100rpx;
     margin-right: 18rpx;
     display: flex;
-    flex-direction: row;
+    flex-direction: row-reverse;
     align-items: center;
 }
 

component/share/share.wxss

@@ -4,7 +4,7 @@
     left: 0;
     top: 0;
     width: 100%;
-    height: 100%;
+    height: 1000%;
     background: rgba(0, 0, 0, .6);
     z-index: 99;
 }
@@ -61,7 +61,7 @@
 .Preservation {
     position: absolute;
     left: 15%;
-    bottom: 50rpx;
+    top: 1150rpx;
     width: 536rpx;
     height: 80rpx;
     color: #fff;

pages/groupPage/grade-details/grade-details.wxss

@@ -141,4 +141,7 @@ scroll-view {
 
 .group-btn .bg2 {
     left: 68%;
+}
+.know {
+    margin-bottom: 105rpx;
 }

pages/index/index.js

@@ -35,7 +35,7 @@ Page({
         templates: 'hot',
       },
       {
-        name: '关注',
+        name: '动态',
         templates: 'follow',
       },
       {

pages/index/index.wxss

@@ -29,7 +29,7 @@
   justify-content: space-between;
   align-items: center;
   margin-bottom: 15rpx;
-  z-index:1;
+  z-index:999;
   padding: 0 10rpx 0;
 }
 

pages/main/reading/reading.wxml

@@ -26,7 +26,7 @@
         </view>
         <view class="readingBtn footerBtn" bindtap="audioRecord">
             <image class="microphone" src="{{btnImgFlag ? recordingGif :microphonePng}}" />
-            <text>我要朗读</text>
+            <text>{{btnImgFlag ? '点击结束' : btnFlag ? '点击重录' : '开始朗读'}}</text>
         </view>
         <view class="shareBtn footerBtn" wx:if="{{btnFlag}}" bindtap="upload">
             <image src="../../../static/image/upload.png" />

pages/social/works/works.wxml

@@ -80,7 +80,9 @@
         <cover-view class="rewardContent">
             <cover-image class="rewardWrapper" src="../../../static/image/reward_wrapper.png" />
             <cover-image class="rewardAvatar" src="{{authorAvatar}}" />
-            <cover-view class="rewardNickName">奖励给朗读者：{{author}}</cover-view>
+            <!-- <cover-view class="rewardNickName">奖励给朗读者：{{author}}</cover-view> -->
+            <cover-view class="rewardNickName">播音主持特长生</cover-view>
+            <cover-view class="sologan">声情并茂  悦耳动听</cover-view>
             <cover-view class="moneyArea">
                 <cover-view class="{{howMuch ==='100' ? 'money moneySelect' : 'money moneyNormal'}}" bindtap="setMoney" data-money="100">
                     1.0元

pages/social/works/works.wxss

@@ -220,7 +220,7 @@
 .commentItem .btnWrapper {
     position: absolute;
     top: 10rpx;
-    right: 10rpx;
+    right: 0;
     display: flex;
     align-items: center;
     /* width: 200rpx; */
@@ -234,7 +234,7 @@
 
 .btnWrapper .commentText,
 .likeText {
-    width: 58rpx;
+    width: auto;
     height: 40rpx;
     color: #545454;
     font-size: 28rpx;
@@ -330,7 +330,7 @@ button::after {
 
 .footSection .microphone {
     display: block;
-    margin:-12rpx auto 8rpx;
+    margin:-12rpx auto 9rpx;
     width: 108rpx;
     height: 106rpx;
 }
@@ -378,14 +378,21 @@ button::after {
 .rewardNickName {
     width: 100%;
     margin: 0 auto;
-    font-size: 36rpx;
+    font-size: 32rpx;
     color: #fff;
     text-align: center;
     position: absolute;
-    top: 328rpx;
-
+    top: 300rpx;
+}
+.sologan {
+    width: 100%;
+    margin: 0 auto;
+    font-size: 40rpx;
+    color: #fff;
+    text-align: center;
+    position: absolute;
+    top: 350rpx;
 }
-
 .moneyArea {
     width: 84%;
     height: 100rpx;
@@ -416,7 +423,7 @@ button::after {
 }
 
 .moneySelect {
-    background: #fa8133;
+    background: #ff9209;
     color: #fff;
     border: 0;
 }
@@ -426,11 +433,8 @@ button::after {
     height: 80rpx;
     display: block;
     border-radius: 80rpx;
-    background: linear-gradient(180deg, #FEC953, #FCA40F);
-    background: -webkit-linear-gradient(180deg, #FEC953, #FCA40F);
-    background: -o-linear-gradient(180deg, #FEC953, #FCA40F);
-    background: -moz-linear-gradient(180deg, #FEC953, #FCA40F);
-    box-shadow: 0 6rpx 18rpx 0 rgba(0, 0, 0, 0.5);
+    background: #FCA40F;
+    /* box-shadow: 0 6rpx 18rpx 0 rgba(0, 0, 0, 0.5); */
     background: #FCA40F;
     font-size: 40rpx;
     color: #fff;
@@ -438,7 +442,7 @@ button::after {
     text-align: center;
     position: absolute;
     z-index: 9999;
-    top: 718rpx;
+    top: 770rpx;
     left: 115rpx;
 }