标签：toubu caidan color 新生报 程序 padding 毕业设计 10px white

界面

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.csdn.net/u013818205/article/details/114656976

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。