> 文档中心 > 微信小程序个人信息中心的前端ui实现

微信小程序个人信息中心的前端ui实现


微信小程序个人信息中心的前端ui实现

效果图
在这里插入图片描述
代码:
wxml

<view class="view_contain">        <view class="view_1"> <view class="view_image_text">     <image class="image_radius" src="../static/image/资产借用.png" />     <text>张三</text> </view>    </view>        <view class="hr"></view>    <view class='itemContent'> <view class="title">          <image src="../static/image/查看.png"></image>     手机绑定 </view> <view class="detail">     <text>></text> </view>    </view>    <view class="line"></view>    <view class='itemContent'> <view class="title">        <van-icon name="orders-o"size="60rpx"  style="margin-right: 10rpx; color: rgb(251, 90, 26);"/>     <text>修改内容</text> </view> <view class="detail">     <text>></text> </view>    </view>        <view class="item2"> <view class='itemContent'>      <view class="title">  <van-icon name="setting-o"size="60rpx"  style="margin-right: 10rpx; color: rgba(235, 174, 9, 0.924);"/>设置</view>     <view class="detail">  <text>></text>     </view> </view>    </view></view>

wcss部分

/* pages/personMessages/index.wxss *//* 使用page就是为了保证  满屏 */page {    width: 100%;    height: 100%;    margin: 0;    padding: 0;  }    .view_contain {    width: 100%;    height: 100%;    background: #f0eeed  }    /* 第一部分 */    .view_1 {    display: flex;    justify-content: center;    width: 100%;    height: 30%;    background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);  }    .view_image_text {    width: 100%;    display: flex;    align-items: center;    justify-content: center;    flex-direction: column;    }    .image_radius {    height: 200rpx;    width: 200rpx;    border-radius: 120rpx;  }  /*间隔线*/  .hr {     width: 100%;    height: 15px;    background-color: #f4f5f6;  }    .itemContent {    display: flex;    flex-direction: row;    background: #ffffff;    height: 120rpx;  }    .title {    display: flex;    padding-top: 15px;    padding-bottom: 15px;    padding-left: 15px;    font-size: 15px;  }    .title image{  height: 100%;  width: 60rpx;  margin-right:10rpx;  }    .detail{    font-size: 15px;    position: absolute;    right: 10px;    height: 50px;    line-height: 50px;    color: #888;      }    .line {    border: 0.5rpx solid #cccccc;    opacity: 0.6;  }  .item2 {  margin-top: 30rpx;  }   

还可以吧点赞欧克?