第一次进来是首页没有数据的页面。

<image src="../images/logo.png" class="logo"></image>

暂时没有登记记录哦~\n点击下方按钮创建报名接龙

+ 发起报名

首次进入有提示添加小程序的图片。
.first-tips {
width: 300rpx;
height: 128rpx;
position: fixed;
right: 59rpx;
}
.no-body{
width: 750rpx;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
}
然后看logo摆放位置，给一个距离顶部的位置就可以了
.logo{
width: 170rpx;
height: 170rpx;
margin-top: 181rpx;
}
下面就是文字了，居中，他的内部元素也居中，设置字体及颜色。
.logo_text{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 24rpx;
margin-top: 65rpx;
letter-spacing: 5rpx;
color: #aaaaaa;
}
最下面的是添加按钮，居中，设置背景颜色。
.btn{
font-size: 34rpx;
position: fixed;
bottom: 80rpx;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 380rpx;
height: 100rpx;
background-color: #39affc;
border-radius: 50rpx;
}
以上是无数据的首页。
下面开始介绍有数据的首页。

  <view class="list-item" wx:for="{{list}}">
    <view class="item-top index-list-item-view-between">
      <view class="item-avatar">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <text class="item-nickname">发起人:AAA</text>
      <text class="item-date">2020.02.02 20:20</text>
    </view>
    <view class="index-list-item-view-between">
      <text class="item-label">活动</text>
      <text class="item-name">同学聚会报名</text>
      <image class="item-delete" src="../images/btn-del.png"></image>
    </view>
    <text class="item-content">BBBBBB</text>
    <view class="index-list-item-view-between item-view-people">
      <view class="item-people">
        <image style="width: 24rpx; height: 24rpx" src="../images/btn-icon.png"></image>
        <text class="item-people-num">50人</text>
      </view>
      <image class="item-share" src="../images/btn-share.png"></image>
    </view>
  </view>
</view>

这里主要是放上了一个数据列表，都是写死的数据。用for循环填充数据，有正式数据需要把写死的数据删掉。
.data-view {
width: 100%;
padding-bottom: 28rpx;
}

.list-item {
background-color: white;
padding-left: 30rpx;
padding-bottom: 18rpx;
padding-right: 30rpx;
margin-top: 6rpx;
}

.item-top {
padding-bottom: 27rpx;
padding-top: 18rpx;
}

.item-avatar {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
overflow: hidden;
}

.item-nickname {
position: absolute;
margin-left: 72rpx;
font-size: 26rpx;
color: #333333;
}

.item-date {
font-size: 26rpx;
color: #aaaaaa;
}

.item-label {
padding-left: 9rpx;
padding-right: 9rpx;
padding-top: 7rpx;
padding-bottom: 7rpx;
background-color: #68dcf5;
border-radius: 10rpx;
font-size: 26rpx;
color: #ffffff;
}

.item-name {
margin-left: 78rpx;
position: absolute;
font-size: 38rpx;
color: #333333;
}

.item-delete {
width: 34rpx;
height: 36rpx;
}

.item-content {
position: relative;
top: 21rpx;
color: #aaaaaa;
font-size: 30rpx;
}

.item-view-people {
margin-top: 30rpx;
}

.item-share {
width: 120rpx;
height: 50rpx;
}

.item-people-num {
font-size: 26rpx;
color: #cccccc;
}
创建接龙，点击跳转，绑定按钮bindtap
编写页面

<text style=" flex-shrink: 0;">活动报名</text>
<input placeholder="请选择" placeholder-class="placeholder" style="height:98rpx;" class="input" disabled="false"></input>
<text class="iconfont icon-down-arrow" style="color:#39affc;margin-right:10rpx"></text>

<text style=" flex-shrink: 0;">活动主题</text>

<input placeholder="（例：同学聚会报名）" placeholder-class="placeholder" style="height:98rpx;" class="input" ></input>

填写备注信息：
<textarea placeholder="例：毕业10周年聚会定于3月12日在国际酒店举行，请同学接龙报名。" placeholder-class="placeholder"
  class="remarks-input"></textarea>

<view class="btn-cancel">取消</view>
<view class="btn-sumbit">确认发起</view>

*要求参与接龙者必填姓名，选填电话号码、备注。

/ pages/add/add.wxss /
.body {
width: 750rpx;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}

.avatar {
width: 140rpx;
height: 140rpx;
border-radius: 70rpx;
overflow: hidden;
margin-top: 30rpx;
}

.input-border {
border: solid 1rpx #cccccc;
width: 640rpx;
box-sizing: border-box;
}

.activity {
height: 100rpx;
font-size: 30rpx;
color: #333333;
display: flex;
align-items: center;
padding-left: 30rpx;

}

.placeholder {
font-size: 30rpx;
color: #cccccc;
}

.input {
width: 100%;
padding-left: 10rpx;
padding-right: 10rpx;
}

.remarks {
height: 260rpx;
margin-top: 20rpx;
padding-left: 30rpx;
padding-top: 30rpx;
padding-right: 30rpx;
font-size: 30rpx;
color: #333333;
}

.remarks-input {
margin-top: 20rpx;
height: 160rpx;
}

.btn-group {
display: flex;
width: 100%;
justify-content: center;
margin-top: 100rpx;
}

.btn-cancel {
width: 310rpx;
height: 100rpx;
background-color: #e5e5e5;
border-radius: 50rpx;
color: white;
font-size: 32rpx;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10rpx;
}

.btn-sumbit {
width: 310rpx;
height: 100rpx;
background-color: #39affc;
margin-left: 10rpx;
border-radius: 50rpx;
color: white;
font-size: 32rpx;
display: flex;
justify-content: center;
align-items: center;

}

.bottom-desc {
font-size: 26rpx;
margin-top: 40rpx;
color: #999999;
}

page {
background-color: white;
}
一个简单的小程序首页就做好了。