【套餐】微信小程序在线考试系统  毕业设计

源代码下载地址：https://ke.qq.com/course/package/28113?tuin=2b10d56

有需要的请添加QQ 45157718（微信同号） 咨询

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;
  }

有需要的请添加QQ 45157718（微信同号） 咨询