我的信息

src/pageSubs/other/myInfo.vue

@@ -4,14 +4,43 @@
  * @Author: dream
  * @Date: 2021-03-26 14:23:05
  * @LastEditors: dream
- * @LastEditTime: 2021-03-26 16:17:07
+ * @LastEditTime: 2021-03-31 17:50:50
 -->
 <template>
-	<view>myInfo</view>
+	<view class="my-info-main iph-bg-fff">
+    <view class="user-info">
+      <view class="info-item u-flex u-border-bottom">
+        <view class="u-font-28 u-line-40 text-weight-500">头像</view>
+        <view class="u-flex-1 u-flex u-row-right">
+          <image class="head-img" src="https://img2.woyaogexing.com/2021/03/31/862b9deb36de46abb7b6289d9c053c83!400x400.jpeg" />
+          <view class="u-m-l-8 enter-icon iph-icon-enter"></view>
+        </view>
+      </view>
+      <view class="info-item u-flex u-border-bottom">
+        <view class="u-font-28 u-line-40 text-weight-500">昵称</view>
+        <view class="u-flex-1 u-flex u-row-right">
+          <input class="input-class" :maxlength="11" placeholder="昵称限11字" />
+        </view>
+      </view>
+      <view class="info-item u-flex u-border-bottom">
+        <view class="u-font-28 u-line-40 text-weight-500">绑定手机</view>
+        <view class="u-flex-1 u-flex u-row-right">
+          <input class="input-class" :maxlength="11" placeholder="输入微信绑定的手机号" />
+        </view>
+      </view>
+    </view>
+    <iph-fixed-bottom>
+      <view class="footer iph-bg-fff">
+        <button class="update-btn">确认修改</button>
+      </view>
+    </iph-fixed-bottom>
+  </view>
 </template>
 
 <script>
+import iphFixedBottom from '../../components/iphFixedBottom.vue'
 export default {
+  components: { iphFixedBottom },
   name: 'myInfo',
   data () {
     return {
@@ -28,5 +57,40 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+.my-info-main {
+  .user-info {
+    .info-item {
+      margin-left: 32px;
+      padding: 32px 32px 32px 0;
+      .input-class {
+        width: 308px;
+        height: 40px;
+        min-height: 40px;
+        line-height: 40px;
+        font-size: 28px;
+        text-align: right;
+      }
+    }
+    .head-img {
+      width: 108px;
+      height: 108px;
+      border-radius: 54px;
+    }
+    .enter-icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+  .footer {
+    padding: 24px;
+    border-radius: 8px;
+    .update-btn {
+      padding: 22px;
+      line-height: 44px;
+      font-size: 32px;
+      color: $iph-standby-text;
+      background-color: $u-type-primary;
+    }
+  }
+}
 </style>

src/pages/my/my.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-25 15:56:03
  * @LastEditors: dream
- * @LastEditTime: 2021-03-31 17:08:17
+ * @LastEditTime: 2021-03-31 17:24:15
 -->
 <template>
 	<view class="my-main">
@@ -12,10 +12,10 @@
       <image class="head-img" :src="userInfo.headUrl || '../../static/common/icon_qs_tx.png'" />
       <view class="u-flex-1 u-m-l-16 u-m-t-4">
         <view class="u-font-40 u-line-56 text-weight-500">我的名字</view>
-        <view class="desc-color u-flex">
+        <navigator class="desc-color u-flex" url="/pageSubs/other/myInfo">
           个人资料
           <view class="u-m-l-4 enter-icon iph-icon-enter "></view>
-        </view>
+        </navigator>
       </view>
     </view>
     <view class="my-order-area iph-bg-fff">