我的 组件 静态布局

component/hot/hot.wxml

@@ -19,7 +19,7 @@
             <text>热门推荐</text>
         </view>
         <view class="hotWares"  style="flex-direction:row;">
-            <view class="hotWareCard" wx:for="{{hotData.wareCards}}">
+            <view class="hotWareCard" wx:for="{{hotData.wareCards}}" wx:key="">
                 <image class="wareCardImg" src="{{item.img}}" />
                 <text class="wareCardTitle">{{item.title}}</text>
                 <text class="wareCardTip">{{item.grade}}</text>

component/my/my.js

@@ -1,7 +1,14 @@
 export const myInit =  (that) => {
   that.setData({
     myData: {
-      title: '我的'
+        title: '我的',
+        imgUrl: 'https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18102320',
+        name: 'ABC',
+        address:['北京海淀','中关村','三小'],
+        playNum: 31549,
+        attentionCount: 10254,
+        point: 6317,
+        flowerNum: 56245
     }
   })
   //请求数据封装

component/my/my.wxml

@@ -1,3 +1,80 @@
 <template name="my">
-  <view> my {{myData.title}} </view>
+  <view> 
+    <view class='mine-top'>
+      <view class='avatar-box'>
+        <image src="{{ myData.imgUrl }}" background-size="cover"></image>
+      </view>
+      <view class='mine-info'>
+        <view>用户昵称{{ myData.name }}</view>
+        <view>{{ myData.address[0] }}，{{ myData.address[1] }}，{{ myData.address[2] }}</view>
+      </view>
+      <view class='edit'>
+        <view class='icon'></view>
+      </view>
+    </view>
+    <view class='category'>
+      <view class='play'>
+        <view>{{ myData.playNum }}</view>
+        <text>播放</text>
+      </view>
+      <view class='attention'>
+        <view>{{ myData.attentionCount }}</view>
+        <text>关注</text>
+        <view class='attentionCount' bindtap='attentionCountAdd'>+5</view>
+      </view>
+      <view class='point'>
+        <view>{{ myData.point }}</view>
+        <text>赞</text>
+      </view>
+      <view class='red-flower'>
+        <view>{{ myData.flowerNum }}</view>
+        <text>红花</text>
+      </view>
+    </view>
+    <view class='wallet'>
+      <view class='wallet-title'>
+        <view class='image-box'>
+          <image src='{{ myData.imgUrl }}'></image>
+        </view>
+        <text class='text'>钱包</text>
+      </view>
+      <view class='wallet-detail'> > </view>
+    </view>
+    <view class='grouping'>
+      <view class='grouping-title'>
+        <view class='image-box'>
+          <image src='{{ myData.imgUrl }}'></image>
+        </view>
+        <text class='text'>我的拼团</text>
+      </view>
+      <view class='grouping-detail'> > </view>
+    </view>
+    <view class='reader'>
+      <view class='reader-title'>
+        <view class='image-box'>
+          <image src='{{ myData.imgUrl }}'></image>
+        </view>
+        <text class='text'>我的朗读</text>
+      </view>
+      <view class='reader-detail'> > </view>
+    </view>
+    <view class='keep'>
+      <view class='keep-title'>
+        <view class='image-box'>
+          <image src='{{ myData.imgUrl }}'></image>
+        </view>
+        <text class='text'>我的收藏</text>
+      </view>
+      <view class='keep-detail'> > </view>
+    </view>
+    <view class='attention-me'>
+      <view class='attention-me-title'>
+        <view class='image-box'>
+          <image src='{{ myData.imgUrl }}'></image>
+        </view>
+        <text class='text'>我的关注</text>
+      </view>
+      <view class='attention-me-detail'> > </view>
+    </view>
+  </view>
 </template>

component/my/my.wxss

@@ -0,0 +1,145 @@
+.mine-top{
+  margin-top: 16rpx;
+  position: relative;
+  width: 732rpx;
+  height: 220rpx;
+  display: flex;
+  align-items: center;
+  background: #fff;
+  border-radius: 20rpx;
+}
+
+.avatar-box {
+  margin: 50rpx 0 50rpx 50rpx;
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 50%;
+}
+
+.avatar-box image{
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+
+.mine-info{
+  margin-left: 24rpx;
+}
+
+.mine-info :nth-child(1){
+  width: 308rpx;
+  height: 44rpx;
+  font-size: 32rpx;
+  color: #030303;
+}
+
+.mine-info :nth-child(2){
+  width: 422rpx;
+  height: 38rpx;
+  font-size: 30rpx;
+  color: #8F8E94;
+}
+
+.mine-top .edit{
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 72rpx;
+  height: 72rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #C3C3C3;
+  border-radius: 20rpx 0 20rpx 0;
+}
+
+.mine-top .edit .icon{
+  width: 48rpx;
+  height: 48rpx;
+  background: #FFFFFF;
+}
+
+.category{
+  margin-top: 8rpx;
+  position: relative;
+  width: 732rpx;
+  height: 180rpx;
+  display: flex;
+  align-items: center;
+  border-radius: 20rpx;
+  background: #fff;
+  font-weight: 500;
+  font-family: SourceHanSansSC-regular;
+  color: #030303;
+}
+
+.attentionCount{
+  position: absolute;
+  top: 20rpx;
+  left: 313rpx;
+  width: 50rpx;
+  height: 44rpx;
+  line-height: 44rpx;
+  text-align: center;
+  color: red;
+  font-size: 28rpx;
+  font-weight: lighter;
+}
+
+.category text{
+  color: #959595;
+  font-weight: 500;
+  font-size: 36rpx;
+}
+
+.play,.attention,.point,.red-flower{
+  flex: 1;
+  text-align: center;
+}
+
+.wallet,.grouping,.reader,.keep,.attention-me{
+  margin-top: 8rpx;
+  width: 732rpx;
+  height: 120rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.wallet-title,.grouping-title,.reader-title,.keep-title,.attention-me-title{
+  margin-left: 50rpx;
+}
+
+.image-box{
+  display: inline-block;
+  width: 56rpx;
+  height: 56rpx;
+}
+
+
+.wallet image,.grouping image,.reader image,.keep image,.attention-me image{
+  width: 100%;
+  height: 100%;
+  vertical-align: bottom;
+}
+
+.wallet .text,.grouping .text,.reader .text,.keep .text,.attention-me .text{
+  display: inline-block;
+  margin-left: 14rpx;
+  font-size: 36rpx;
+  color: #101010;
+}
+
+.wallet .wallet-detail,.grouping .grouping-detail,.reader-detail,.keep-detail,.attention-me-detail{
+  width: 48rpx;
+  height: 48rpx;
+  line-height: 48rpx;
+  color: #101010;
+  text-align: center;
+  margin-right: 20rpx;
+}
+
+

pages/index/index.js

@@ -26,7 +26,8 @@ Page({
     templates: 'hot',
     title:'index中的title',
     jurisdictionFlag: true,
-    hotInput:'12345'
+    hotInput:'12345',
+    mineSettingInfo:'528'
   },
   //tab点击
   switcher: function({currentTarget}) {

pages/index/index.wxss

@@ -4,7 +4,7 @@
 /*搜索*/
 /* @import "/component/search/search.wxss"; */
 /*我的*/
-/* @import "/component/mys/mys.wxss"; */
+@import "/component/my/my.wxss";
 .template {
   height: 100%;
 }

project.config.json

@@ -12,7 +12,7 @@
 	},
 	"compileType": "miniprogram",
 	"libVersion": "2.3.0",
-	"appid": "wxd9a2b1d38b9046ef",
+	"appid": "wx8961a3e5512f307c",
 	"projectname": "reading",
 	"debugOptions": {
 		"hidedInDevtools": []