评论

通过代码实现简单的卡片式个人中心

卡片式个人中心

<view class="img">
  <image src="/image/img/bg.png" />
</view>
<view class="header">
  <view class="content">
    <view class="logo">
      <image src="/image/img/logo.jpg" mode="aspectFill"/>
    </view>
    <view class="desc"> 
      <text class="nickName">Clearlove</text>
      <text class="addr">河南 许昌</text>
      <text class="sign">Hello world~~~</text>
    </view>
  </view>
</view>

     

.header {
  height: 1000rpx;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img {
  height: 260rpx;
  background-color: #eee;
}

.img image {
  width: 100%;
  height: 100%;
}

.content {
  height: 300rpx;
  width: 90%;
  background-color: white;
  position: absolute;
  top: 100rpx;
  display: flex;
}

.content .logo{
  height: 200rpx;
  width: 200rpx;
  margin: 50rpx 0;
  margin-left: 40rpx;
}

.content .logo image{
  height: 100%;
  width: 100%
}

.content .desc{
  flex: 1;
  padding: 50rpx;
}

.content .desc text{
  display: block;
}

.content .desc .nickName{
  font-size: 38rpx;
  font-weight: bold;
  color: orange;
}

.content .desc .addr{
  font-size: 30rpx;
  margin: 35rpx 0;
}

.content .desc .sign{
  font-size: 30rpx;
  color: gray;
}
最后一次编辑于  2020-05-05  
点赞 2
收藏
评论

3 个评论

  • wang li
    wang li
    2020-05-06

    漂亮

    2020-05-06
    赞同 1
    回复
  • LOFTER
    LOFTER
    2020-11-08

    河南许昌的?老乡

    2020-11-08
    赞同
    回复
  • 苏军
    苏军
    2020-05-21

    不得不说,看起来确实很漂亮

    2020-05-21
    赞同
    回复
登录 后发表内容