答题积分小程序云开发-界面交互篇个人心页布局样式和逻辑交互开发

<view class='UCenter-bg'>
    <view class="margin-bottom">
      <view class="cu-avatar xl round">
        <image class="avatar" src="https://blog.51cto.com/images/0.png" mode="widthFix"></image>
      </view>
    </view>
    <view class='text-xl'>
      姑苏洛言
    </view>
    <view class='margin-top-sm'>
      <text class="cu-tag bg-yellow">积分：100</text>
    </view>
  </view>

.UCenter-bg {
      background: url(https://tc.meng.cn/index1.jpg?sign=8f9ea11ad30c0607c60d16d4fab4368d&t=1677080243) center center no-repeat;
      background-size: cover;
      height: 350rpx;
      display: flex;
      justify-content: center;
      padding-top: 10rpx;
      overflow: hidden;
      position: relative;
      flex-direction: column;
      align-items: center;
      color: #fff;
      font-weight: 300;
      text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
 
.UCenter-bg text {
  		border-radius: 6rpx;
}
 
.UCenter-bg image {
      width: 200rpx;
      height: 200rpx;
}
 
.UCenter-bg .gif-wave{
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      z-index: 99;
      mix-blend-mode: screen;  
      height: 100rpx;   
}

<view class="cu-item arrow">
  <navigator class='content' url='../login/login?type=edit' hover-class='none'>
    <text class='icon-formfill text-sky'></text>
    <text class='text-grey'>修改资料</text>
  </navigator>
</view>
 
<view class="cu-item arrow">
  <navigator class='content' url='../about/about' hover-class='none'>
    <text class='icon-creativefill text-sky'></text>
    <text class='text-grey'>关于程序</text>
  </navigator>
</view>

<view class="cu-item arrow">
  <button class='cu-btn content' open-type='share'>
    <text class='icon-appreciatefill text-sky'></text>
    <text class='text-grey'>好用分享</text>
  </button>
</view>

onShareAppMessage() {
    return {
      title: '@你，快来「护网专题信息安全知识竞答」，答题赢积分吧~'
    }
}

<view class="cu-item arrow">
  <button class='cu-btn content' open-type='contact'>
    <text class='icon-servicefill text-sky'></text>
    <text class='text-grey'>联系客服</text>
  </button>
</view>

<view class="cu-item arrow">
  <button class='cu-btn content' open-type='feedback'>
    <text class='icon-writefill text-sky'></text>
    <text class='text-grey'>问题反馈</text>
  </button>
</view>