myWorks page setStyle

pages/user/myworks/myworks.wxml

@@ -1,7 +1,6 @@
 <!--pages/user/myworks/myworks.wxml-->
 <wxs module="wxs">
   function formatDate(time) {
-    console.log(time);
     var t = getDate(time); 
     var tf = function(i){return (i < 10 ? '0' : '') + i};
     var year = t.getFullYear();
@@ -14,6 +13,59 @@
   module.exports.formatDate = formatDate;
 </wxs>
 <view class='user-works'>
+  <view class='follow-details'>
+    <view class='follow-info'>
+      <view class='avatar-bg'>
+        <view class='avatar-box'>
+          <image class='avatar-image' src='https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg'></image>
+        </view>
+        <view class='occupation-title'>家长</view>
+      </view>
+      <view class='avatar-msg'>
+        <view class='avatar-nickname'>木小雅</view>
+        <view class='avatar-birthday'>1992年07月13日</view>
+        <view class='avatar-address'>北京市，海淀区中关村三小</view>
+      </view>
+    </view>
+    <view class='mine-category'>
+        <view class='play-count'>
+          <view>{{ 3232 }}</view>
+          <view class='border-right'>
+            <view class='play-img'>
+              <image src='../../../static/image/play.png'></image>
+            </view>
+            <text>播放量</text>
+          </view>
+        </view>
+        <view class='follow-count'>
+          <view class='color'>{{ 5200 }}</view>
+          <view class='border-right'>
+            <view class='play-img'>
+              <image src='../../../static/image/follow.png'></image>
+            </view>
+            <text>关注</text>
+          </view>
+        </view>
+        <view class='point-count'>
+          <view class='color'>{{ 300 }}</view>
+          <view class='border-right'>
+            <view class='play-img'>
+              <image src='../../../static/image/point.png'></image>
+            </view>
+            <text>赞</text>
+          </view>
+        </view>
+        <view class='flower-count'>
+          <view class='color'>{{ 100 }}</view>
+          <view class='border-right'>
+            <view class='play-img'>
+              <image src='../../../static/image/flower.png'></image>
+            </view>
+            <text>红花</text>
+          </view>
+        </view>
+      </view>
+  </view>
   <view class='works-article' wx:for="{{ wareCards }}" wx:key="{{ index }}">
     <view class='user-info'>
       <view class='avatar-img'>

pages/user/myworks/myworks.wxss

@@ -1,15 +1,153 @@
 /* pages/user/myworks/myworks.wxss */
 .user-works{
   width: 750rpx;
+  box-sizing: border-box;
+  padding: 0 16rpx;
   background: #F0F1F5;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.follow-details{
+  width: 100%;
+  height: 362rpx;
+  border-radius: 20rpx;
+  background: #FFFFFF;
+  margin-top: 30rpx;
+  display: flex;
+  position: relative;
+}
+
+.follow-info{
+  width: 100%;
+  display: flex;
+}
+
+.avatar-bg{
+  margin-left: 20rpx;
+  margin-top: 50rpx;
+  width: 154rpx;
+  height: 154rpx;
+  background: #61CA54;
+  border-radius: 50%;
+  position: relative;
+}
+
+.avatar-box{
+  width: 138rpx;
+  height: 138rpx;
+  border-radius: 50%;
+  z-index: 300;
+  position: absolute;
+  top: 8rpx;
+  left: 8rpx;
+}
+
+.avatar-image{
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.occupation-title{
+  position: absolute;
+  left: 100rpx;
+  top: 46rpx;
+  width: 68rpx;
+  background: #61CA54;
+  border-radius: 180rpx;
+  z-index: 600;
+  line-height: 26rpx;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 18rpx;
+}
+
+.avatar-msg{
+  margin-left: 40rpx;
+  margin-top: 50rpx;
+  width: 500rpx;
+  height: 154rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  color: #444444;
+  font-size: 32rpx;
 }
 
+.mine-category{
+  box-sizing: border-box;
+  width: 674rpx;
+  padding-top: 30rpx;
+  padding-bottom: 30rpx;
+  border-top: 4rpx solid #F0F1F5;
+  font-size: 28rpx;
+  font-weight: 600;
+  z-index: 900;
+  display: flex;
+  position: absolute;
+  top: 246rpx;
+  left: 23rpx;
+}
+
+.border-right{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24rpx;
+  font-weight: lighter;
+  height: 22rpx;
+  border-right: 2rpx solid #D6D6D6;
+}
+
+.flower-count .border-right{
+  border: none;
+}
+
+.play-count,.point-count,.follow-count,.flower-count{
+  width: 25%;
+  text-align: center;
+}
+
+.play-img{
+  width: 28rpx;
+  height: 26rpx;
+  margin-right: 6rpx;
+  margin-bottom: 6rpx;
+}
+
+image{
+  width: 100%;
+  height: 100%;
+}
+
+.play-count{
+  color: #92D626;
+}
+
+.point-count{
+  color: #FFA700;
+}
+
+.follow-count{
+  color: #529BEF;
+}
+
+.flower-count{
+  color: #EE5750;
+}
+
+
+
 .works-article{
-  margin-top: 4rpx;
+  margin-top: 12rpx;
   box-sizing: border-box;
   width: 100%;
-  padding: 0 23rpx;
   background: #FFFFFF;
+  border-radius: 12rpx;
 }
 
 .user-info{

project.config.json

@@ -89,7 +89,7 @@
 				},
 				{
 					"id": 8,
-					"name": "works",
+					"name": "myworks",
 					"pathName": "pages/user/myworks/myworks",
 					"query": ""
 				}