基于微信小程序毕业设计题目选题课题 新生报到小程序的设计与实现（3）会员首页 班级信息、宿舍信息、课程排班表

界面

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'>
    姓名：{{u_xingming}} 
    </view>
    <view class='toubu-you-txt3'>
    学号：{{u_xuehao}}
    </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/huiyuan/banji?u_banji_id={{u_banji_id}}' 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/sushe?xuesheng_id={{u_id}}' class='caidan'>
  <image class='caidan-icon' src='/img/a-on.png'></image>
  <text class='caidan-text'>宿舍安排</text>
  <image class='caidan-arrow' src='/img/right.png'></image>
</navigator>

<navigator url='/pages/huiyuan/kechengbiao?cs_banji_id={{u_banji_id}}' class='caidan'>
  <image class='caidan-icon' src='/img/qita.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>

<block wx:if="{{str_u_name=='微信用户'}}">

</block>
<block wx:else>
<!-- <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> -->
</block>

<view bindtap='tuichu' 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>
</view>




<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/yuyue/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/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;
  }
  .caidan-icon{
    width: 20px; height: 20px;
  }
  .caidan-text{
    flex-grow: 1;
    margin-left: 10px;
  }
  .caidan-arrow{
    width: 16px; height: 16px;
  }

标签：toubu,caidan,color,新生报,程序,padding,毕业设计,10px,white
来源： https://blog.51cto.com/u_13898481/2890837