fix 我的信息页面样式优化显示

+.my-info-page {
+  .avatar {
+    display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 50rpx; margin-bottom: 50rpx; position: relative;
+    .edit {
+      position: absolute; right: calc(50% - 50rpx); bottom: 10rpx; width: 100rpx; height: 40rpx; color: #FFF; display: flex; align-items: center; justify-content: center;font-size: 28rpx;
+    }
+  }
+  .info-name {
+    margin: 30rpx 40rpx;
+    .wrapper {
+      border: 1px solid #F1EBDF; width: 90%; border-radius: 50rpx; padding: 5rpx 0;
+    }
+  }
+  .info-tel {
+    margin: 30rpx 40rpx;
+    .wrapper {
+      border: 1px solid #F1EBDF; width: 90%; border-radius: 50rpx; padding: 5rpx 0;
+    }
+  }
+  .save-btn {
+    margin: 50rpx 40rpx;
+    text {
+      font-size: 33rpx; font-weight: bold;
+    }
+  }
+}
 .nut-input {
   border-radius: 50rpx;
 }

 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-19 10:29:32
+ * @LastEditTime: 2023-12-20 18:02:57
  * @FilePath: /meihuaApp/src/pages/myInfo/index.vue
- * @Description: 文件描述
+ * @Description: 我的信息页面
 -->
 <template>
-  <view>
-    <view style="display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 50rpx; margin-bottom: 50rpx; position: relative;">
+  <view class="my-info-page">
+    <view class="avatar" @tap="uploadImg">
         <nut-avatar size="100">
-          <img :src="imageUrl" style="border-radius: 50%;" @tap="uploadImg"/>
+          <img :src="imageUrl" style="border-radius: 50%;"/>
         </nut-avatar>
-        <view style="position: absolute; right: calc(50% - 50rpx); bottom: 10rpx; width: 100rpx; height: 40rpx; color: #FFF; display: flex; align-items: center; justify-content: center;font-size: 28rpx;">编辑</view>
+        <view class="edit">编辑</view>
     </view>
-    <view style="margin: 30rpx 40rpx;">
+    <view class="info-name">
       <nut-row type="flex" justify="center" align="center">
         <nut-col span="4">姓名</nut-col>
         <nut-col span="20">
-          <view style="border: 1px solid #F1EBDF; width: 90%; border-radius: 50rpx; padding: 5rpx 0;">
+          <view class="wrapper">
             <nut-input v-model="username" placeholder="请输入姓名" :border="false" />
           </view>
         </nut-col>
       </nut-row>
     </view>
-    <view style="margin: 30rpx 40rpx;">
+    <view class="info-tel">
       <nut-row type="flex" justify="center" align="center">
         <nut-col span="4">电话</nut-col>
         <nut-col span="20">
-          <view style="border: 1px solid #F1EBDF; width: 90%; border-radius: 50rpx; padding: 5rpx 0;">
+          <view class="wrapper">
             <nut-input v-model="tel" placeholder="请输入电话" :border="false" type="number" />
           </view>
         </nut-col>
       </nut-row>
     </view>
-    <view style="margin: 50rpx 40rpx;">
-      <nut-button @tap="save" block color="#6A4925" size="large"><text style="font-size: 33rpx; font-weight: bold;">保&nbsp;存</text></nut-button>
+    <view class="save-btn">
+      <nut-button @tap="save" block color="#6A4925" size="large">
+        <text>保&nbsp;存</text>
+      </nut-button>
     </view>
   </view>
 </template>