微信小程序我的界面设计

效果图及结构

效果图

结构

完整源码

my.wxml

<!--pages/my/my.wxml-->
<view class="my_view1">
  <image class="my_head" src="./images/头像.jpg"></image>
</view>

<view class="my_zhongbu">
  <view class="my_zhongbu_zong">
    <image class="my_zhongbu_image1" src="./images/门票.png" bindtap="my_zhongbu_image1"></image>
    <text class="my_zhongbu_text">已约活动</text>
  </view>
  <view class="my_zhongbu_zong">
    <image class="my_zhongbu_image2" src="./images/报名活动.png" bindtap="my_zhongbu_image2"></image>
    <text class="my_zhongbu_text">已报活动</text>
  </view>
  <</