开始

修改资料页面
image.png
新建页面:user-set-userinfo
image.png

image.png

image.png

  1.  {
  2.                 "navigationBarTitleText": "修改资料",
  3.                 "enablePullDownRefresh": false,
  4.                 "app-plus": {
  5.                     "scrollIndicator": "none"
  6.                 }
  8.             }

页面的跳转
image.png

  1. {
  2.                         icon: "",
  3.                         name: "资料编辑",
  4.                         clicktype: "navigateTo",
  5.                         url: "../../pages/user-set-userinfo/user-set-userinfo"
  6.                     },

image.png

image.png
复制，引入公共的css
image.png

image.png

image.png

  1. <view class="body">
  5.         <button class="user-set-btn" :class="{'user-set-btn-disable':disabled}" :loading="loading" @tap="submit"
  6.             type="primary" :disabled="disabled">完成</button>
  7.     </view>

image.png

image.png

  1. <view class="user-set-userinfo-list u-f-ac">
  2.             <view>头像</view>
  3.             <view>
  4.                 <image src="../../static/demo/userpic/11.jpg" 
  5.                 mode="widthFix" lazy-load="true"></image>
  6.                 <view class="icon iconfont icon-bianji1"></view>
  7.             </view>
  8.         </view>

垂直居中，左右两边靠边
image.png

  1. u-f-ac u-f-jsb

最外层加内边距， 下面的边框。
image.png

  1. .user-set-userinfo-list{
  2.     padding: 20upx;
  3.     border-bottom: 1upx solid #F4F4F4;
  4. }

标题的字体大一点，加粗，颜色
image.png

  1. /* 左侧的文字 */
  2. .user-set-userinfo-list>view:first-child{
  3.     font-size: 30upx;
  4.     font-weight: bold;
  5.     color: #9B9B9B;
  6. }

头像。大小 圆形
image.png

  1. /* 右侧头像 */
  2. .user-set-userinfo-list>view:last-child>image{
  3.     width: 80upx;
  4.     height: 80upx;
  5.     border-radius: 100%;
  6. }

image.png

image.png

  1. .user-set-userinfo-list>view:last-child>view{
  2.     margin-left: 20upx;
  3.     color: #9B9B9B;
  4. }

image.png

右边布局flex布局
image.png

  1. <view class="u-f-ac">
  2.                 <image src="../../static/demo/userpic/11.jpg" 
  3.                 mode="widthFix" lazy-load="true"></image>
  4.                 <view class="icon iconfont icon-bianji1"></view>
  5.             </view>

image.png
字体稍微大一点
image.png

  1. /* 左侧的文字 */
  2. .user-set-userinfo-list>view:first-child{
  3.     font-size: 32upx;
  4.     font-weight: bold;
  5.     color: #9B9B9B;
  6. }

image.png

image.png

image.png

  1. <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  2.             <view>昵称</view>
  3.             <view class="u-f-ac">
  4.                 <view>昵称</view>
  5.                 <view class="icon iconfont icon-bianji1"></view>
  6.             </view>
  7.         </view>
  8.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  9.             <view>性别</view>
  10.             <view class="u-f-ac">
  11.                 <view>男</view>
  12.                 <view class="icon iconfont icon-bianji1"></view>
  13.             </view>
  14.         </view>
  15.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  16.             <view>生日</view>
  17.             <view class="u-f-ac">
  18.                 <view>1987-02-07</view>
  19.                 <view class="icon iconfont icon-bianji1"></view>
  20.             </view>
  21.         </view>
  22.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  23.             <view>情感</view>
  24.             <view class="u-f-ac">
  25.                 <view>未婚</view>
  26.                 <view class="icon iconfont icon-bianji1"></view>
  27.             </view>
  28.         </view>
  29.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  30.             <view>职业</view>
  31.             <view class="u-f-ac">
  32.                 <view>IT</view>
  33.                 <view class="icon iconfont icon-bianji1"></view>
  34.             </view>
  35.         </view>
  36.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  37.             <view>家乡</view>
  38.             <view class="u-f-ac">
  39.                 <view>中国广州</view>
  40.                 <view class="icon iconfont icon-bianji1"></view>
  41.             </view>
  42.         </view>

image.png
内容的字体颜色。在后面最后加上:last-of-type
image.png

  1. /* 最右侧的修改的铅笔图标 */
  2.     .user-set-userinfo-list>view:last-child>view:last-of-type {
  3.         margin-left: 20upx;
  4.         color: #9B9B9B;
  5.     }

image.png

本节代码

user-set-userinfo.vue

  1. <template>
  2.     <view class="body">
  4.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  5.             <view>头像</view>
  6.             <view class="u-f-ac">
  7.                 <image src="../../static/demo/userpic/11.jpg" mode="widthFix" lazy-load="true"></image>
  8.                 <view class="icon iconfont icon-bianji1"></view>
  9.             </view>
  10.         </view>
  11.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  12.             <view>昵称</view>
  13.             <view class="u-f-ac">
  14.                 <view>昵称</view>
  15.                 <view class="icon iconfont icon-bianji1"></view>
  16.             </view>
  17.         </view>
  18.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  19.             <view>性别</view>
  20.             <view class="u-f-ac">
  21.                 <view>男</view>
  22.                 <view class="icon iconfont icon-bianji1"></view>
  23.             </view>
  24.         </view>
  25.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  26.             <view>生日</view>
  27.             <view class="u-f-ac">
  28.                 <view>1987-02-07</view>
  29.                 <view class="icon iconfont icon-bianji1"></view>
  30.             </view>
  31.         </view>
  32.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  33.             <view>情感</view>
  34.             <view class="u-f-ac">
  35.                 <view>未婚</view>
  36.                 <view class="icon iconfont icon-bianji1"></view>
  37.             </view>
  38.         </view>
  39.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  40.             <view>职业</view>
  41.             <view class="u-f-ac">
  42.                 <view>IT</view>
  43.                 <view class="icon iconfont icon-bianji1"></view>
  44.             </view>
  45.         </view>
  46.         <view class="user-set-userinfo-list u-f-ac u-f-jsb">
  47.             <view>家乡</view>
  48.             <view class="u-f-ac">
  49.                 <view>中国广州</view>
  50.                 <view class="icon iconfont icon-bianji1"></view>
  51.             </view>
  52.         </view>
  53.         <button class="user-set-btn" :class="{'user-set-btn-disable':disabled}" :loading="loading" @tap="submit"
  54.             type="primary" :disabled="disabled">完成</button>
  55.     </view>
  56. </template>
  58. <script>
  59.     export default {
  60.         data() {
  61.             return {
  63.             }
  64.         },
  65.         methods: {
  67.         }
  68.     }
  69. </script>
  71. <style>
  72.     @import url('@/common/form.css');
  74.     .user-set-userinfo-list {
  75.         padding: 20upx;
  76.         border-bottom: 1upx solid #F4F4F4;
  77.     }
  79.     /* 左侧的文字 */
  80.     .user-set-userinfo-list>view:first-child {
  81.         font-size: 32upx;
  82.         font-weight: bold;
  83.         color: #9B9B9B;
  84.     }
  86.     /* 右侧头像 */
  87.     .user-set-userinfo-list>view:last-child>image {
  88.         width: 80upx;
  89.         height: 80upx;
  90.         border-radius: 100%;
  91.     }
  93.     /* 最右侧的修改的铅笔图标 */
  94.     .user-set-userinfo-list>view:last-child>view:last-of-type {
  95.         margin-left: 20upx;
  96.         color: #9B9B9B;
  97.     }
  98. </style>

结束