微信小程序在线考试系统 毕业设计（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; }