基于微信小程序毕业设计题目选题课题 新生报到小程序的设计与实现（1）首页

首页主要是最新资讯、新手报到小程序功能提示

界面

wxml代码

<view>
    <image class="ad01" src="/img/1.png" mode="widthFix"></image>
</view>

<view class="qukuai">
    <view class="qukuai_zuo"></view>
    <view class="qukuai_zhong">最新公告</view>
    <navigator class="qukuai_you" url="/pages/xinxi/list?cs_lxid=241&mc=最新公告">所有>></navigator>
</view>
<block wx:for="{{xinxis}}" wx:key="myid">
  <navigator url='/pages/xinxi/xiangqing?cs_xxid={{item.myid}}' class='xinxi'>
    <image class='xinxi-icon' src='/img/news.png'></image>
    <text class='xinxi-text'>{{item.myshijian}} {{item.mybiaoti}}</text>
    <image class='xinxi-arrow' src='/img/right.png'></image>
  </navigator>
</block>

<view class="shuoming">
    <view class="shuoming_biaoti">新生使用说明</view>
    <view class="shuoming_xiangmu">登录账号为身份证号码，密码为身份证后3位</view>
    <view class="shuoming_xiangmu">登录后查看：</view>
    <view class="shuoming_xiangmu">(1)班级信息、班主任信息和联系方式</view>
    <view class="shuoming_xiangmu">(2)查看宿舍安排</view>
    <view class="shuoming_xiangmu">(3)查看课程排班信息</view>
    <view class="shuoming_xiangmu">(4)完胜自己的信息</view>
</view>
<navigator class="yuyue" url="/pages/huiyuan/denglu"  open-type='switchTab' >
    新生入口
</navigator>

wxss代码

.ad01{
    width: 100%;
}

.qukuai{display: flex;align-items:center;background-color: #f2f2f2;}
.qukuai_zuo{margin: 5px 10px; width:5px; height:20px; background-color: rgb(13, 163, 233);border-radius: 10px;}
.qukuai_zhong{font-size: 16px; flex-grow: 1;}
.qukuai_you{font-size: 14px; color: gray;padding-right: 10px;}


.xinxi {
    display: flex;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid #f2f2f2;
  }
  
  .xinxi-icon {
    width: 22px;
    height: 22px;
  }
  
  .xinxi-text {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  .xinxi-arrow {
    width: 13px;
    height: 13px;
  }

  

.shuoming{
    padding: 5px;
    color: gray;
}
.shuoming_biaoti{
    font-weight: bold;
    color: orangered;
    border-bottom: 1px solid gainsboro;
    padding: 5px 0px; 
}
.shuoming_xiangmu{
    font-size: 15px;
    padding: 5px 0px;
    border-bottom: 1px dotted  gainsboro;
}
.shuoming_xiangmu2{
  padding: 5px 0px 5px 2em;
  border-bottom: 1px dotted  gainsboro;
}
.yuyue{
    background-color: orangered;
    color: white;
    text-align: center;
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
}

标签：毕业设计,color,新生报,程序,padding,5px,font,border,qukuai
来源： https://blog.51cto.com/u_13898481/2890839