小程序样式 | 首页居中

index.wxss

/* pages/index/index.wxss */
.placeholder{
    margin: 5px;
    padding: 0 10px;
    text-align: center;
    background-color: #EBEBEB;
    color: #cfcfcf;
    width: 600rpx;
}
page{
  /* background-color: #ebebeb */
}
.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 300rpx 0;

}
.box{
  display:flex; 
  flex-direction: row;
  justify-content: center;
  align-items: center; 
  border-radius: 50px;
  background-color: #f5f5f5;
  height: 50px;
  width:500rpx;
  color:#999999;
}
header{
  /* position: fixed; 设置固定 */
  background-color: #ffffff;
  height:100rpx;
  width:50%;
}

.head-img{
  width:106rpx;
  height:34rpx;
  margin-top:40rpx;
}

.box image{
  margin-right:20px;
  width:20px;
  height:20px;
  margin-bottom:-2px;
}

index.wxml

<view class="page" wx:if="{{!hidden}}">
    <!-- <view class="page__hd">
        <view class="page__title">扫码登陆</view>
        <view class="page__desc">scan</view>
    </view> -->
    <view class="page__bd page__bd_spacing">
        <view class="weui-flex">
            <view class="weui-flex__item">
              <view class='container' >
                <view>
                  <image src='/images/logo.png'  style='width:300rpx;height:300rpx;'/>
                </view>
                <view class='header'>
                  <navigator url='/pages/search/index' hover-class="none">
                    <view class='box'>
                      <image src='/images/ico/search.png'></image>
                      <text>搜一搜</text>
                    </view>
                  </navigator>
                </view>
              </view>
            </view>
        </view>
    </view>
</view>
<!--  -->

<!-- 判断是否登录 -->
<modal class="modal" hidden="{{is_login}}" no-cancel bindconfirm="close" confirmText=" ">
  <view class="dew">
    <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
      点击授权
    </button>

  </view>
</modal>
<view hidden="{{!is_login}}">
  <v-popmenu  hidden id='menu' bind:act1="act1" bind:act2="act2"  />
</view>