微信小程序在線考試系統 畢業設計（6）會員首頁

wxml代碼

<!--頭部信息--> 
<view class='toubu'>
  <view class='toubu-zuo'>
    <open-data type="userAvatarUrl" class="toubu-zuo-touxiang"></open-data>
  </view>
  <view class='toubu-you'>
    <view class='toubu-you-txt1'>
      <open-data type="userNickName"></open-data>
    </view>
    <view class='toubu-you-txt2'>
    等級：普通會員
    </view>
    <view class='toubu-you-txt3'>
    用戶：杭州搖億.黃菊華
    </view>
  </view>
</view>

<navigator url='/pages/index/index' open-type='switchTab' class='caidan'>
  <image class='caidan-icon' src='/img/sp01.png'></image>
  <text class='caidan-text'>回到首頁</text>
  <image class='caidan-arrow' src='/img/right.png'></image>
</navigator>

<navigator url='/pages/tiku/u_kaoshi_list' class='caidan'>
  <image class='caidan-icon' src='/img/sys01.png'></image>
  <text class='caidan-text'>我的考試</text>
  <image class='caidan-arrow' src='/img/right.png'></image>
</navigator>

<navigator url='/pages/huiyuan/xinxi' class='caidan'>
  <image class='caidan-icon' src='/img/sys05.png'></image>
  <text class='caidan-text'>用戶信息</text>
  <image class='caidan-arrow' src='/img/right.png'></image>
</navigator>

<navigator url='/pages/huiyuan/mima' class='caidan'>
  <image class='caidan-icon' src='/img/m04.png'></image>
  <text class='caidan-text'>密碼修改</text>
  <image class='caidan-arrow' src='/img/right.png'></image>
</navigator>

<navigator url='/pages/index/index' open-type='switchTab' class='caidan'>
  <image class='caidan-icon' src='/img/m05.png'></image>
  <text class='caidan-text'>退出登錄</text>
  <image class='caidan-arrow' src='/img/right.png'></image>
</navigator>




<view class='sys_caidan'>
  <navigator class='sys_caidan_xiangmu' url='/pages/index/index' open-type='switchTab'>
    <image src='/images/a-on.png' class='sys_caidan_xiangmu_img'></image>
    <view class='sys_caidan_xiangmu_txt sys_caidan_xiangmu_xuanzhong'>首頁</view>
  </navigator>
  <navigator class='sys_caidan_xiangmu'  url='/pages/fenlei/index' open-type='switchTab'>
    <image src='/images/b-off.png' class='sys_caidan_xiangmu_img'></image>
    <view class='sys_caidan_xiangmu_txt'>菜單</view>
  </navigator>
  <navigator class='sys_caidan_xiangmu' url='/pages/huiyuan/gouwuche/che_list'  open-type='switchTab'>
    <image src='/images/c-off.png' class='sys_caidan_xiangmu_img'></image>
    <view class='sys_caidan_xiangmu_txt'>菜單</view>
  </navigator>
  <navigator class='sys_caidan_xiangmu' url='/pages/huiyuan/index'  open-type='switchTab'>
    <image src='/images/d-off.png' class='sys_caidan_xiangmu_img'></image>
    <view class='sys_caidan_xiangmu_txt'>我的</view>
  </navigator>
</view>

wxss代碼

/*頭部信息*/
.toubu {
    display: flex;
    margin: 1px;
    padding: 10px;
    background-color: crimson;
  }
  .toubu-zuo {}
  .toubu-zuo-touxiang {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 3px 3px 10px gainsboro;
    display: block;
    overflow: hidden;
  }
  .toubu-you {
    padding-left: 10px;
  }
  .toubu-you-txt1 {
    color: white;
  }
  .toubu-you-txt2 {
    background-color: darkorange;
    color: white;
    margin: 5px 0px;
    padding: 5px;
  }
  .toubu-you-txt3 {
    color: white;
  }
  
  .caidan{
    display: flex;
    padding: 10px; 
    border-bottom: 1px solid gainsboro;
    margin-top: 10px;
  }
  .caidan-icon{
    width: 20px; height: 20px;
  }
  .caidan-text{
    flex-grow: 1;
    margin-left: 10px;
  }
  .caidan-arrow{
    width: 16px; height: 16px;
  }