密码框

5、视图切换 v-if='isResule' v-else

屏幕快照 2018-10-25 下午3.59.58.png

<div class="receivable-success-content-item" v-if="isResult">
        <div style="width: 100%;margin-top: 49px">
          <img style="width: 120px;height: 80px;margin-bottom: 21px" src="https://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/webapp/chengGong.png" alt="">
          <p style="font-size: 24px;color: #0C88EB;margin-bottom: 25px">购买成功</p>
          <p style="font-size: 14px;color: #999999;">您购买的链贝VIP享时卡已存入你的个人账户VIP卡包中</p>
        </div>
      </div>

      <div class="receivable-success-content-item" v-else>
        <div style="width: 100%;margin-top: 49px">
          <img style="width: 120px;height: 80px;margin-bottom: 21px" src="https://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/webapp/ShiBai.png" alt="">
          <p style="font-size: 24px;color: #0C88EB;margin-bottom: 25px">购买失败</p>
          <p style="font-size: 14px;color: #999999;">暂无服务，请查看网络连接是否完好!</p>
        </div>
      </div>

4、密码框

屏幕快照 2018-10-25 下午3.57.44.png

    <div class="buysure-mask" v-show="sellsurejudge">
      <div class="buysure-mask-content">
        <div class="pwdTips">
          <img src="./../assets/closePassword@2x.png" alt="" width="16px" @click="sellsurejudge=false">
          <span>请输入交易密码</span>
        </div>
        <div style="margin:22px 0px">
          <van-password-input
            :value="psw"
            info=""
            @focus="showKeyboard = true"
          />
        </div>
        <div style="font-size: 14px;color: #0C88EB;position: relative;left: 38%; margin:22px 0px 30px;" @click="turnSafe">忘记密码？</div>
        <van-number-keyboard
          :show="showKeyboard"
          @input="onInput"
          @delete="onDelete"
          @blur="showKeyboard = true"
        />
      </div>
    </div>

3、购买加减

屏幕快照 2018-10-25 下午3.55.01.png

<div class="lineCss">
        <span class="leftTitles">购买数量</span>
        <div class="number-box-container">
          <div class="number-component">
            <span  class="number-action reduce" :class="{disable:targetNumber<=1}" @click="reduceNumbers">-</span>
            <input class="number-input" readonly type="number" v-model="targetNumber">
            <span  class="number-action"  @click="addNumbers">+</span>
          </div>
        </div>
      </div>

.number-box-container{
    padding-right:15px;
  }
  .number-component{
    display: flex;
    .number-input{
      display: block;
      background:white;
      width:45px;
      height:32px;
      line-height:32px;
      border:none;
      outline: none;
      margin:0 2px;
      padding:0;
      text-align: center;
      font-size:14px;
    }
    .number-action{
      display: block;
      background:#ececec;
      border-radius:4px;
      width:32px;
      height:32px;
      text-align: center;
      line-height: 32px;
      font-size:20px;
      &.disable{
        background:#f9f9f9;
        color:#d8d8d8;
      }
    }
  }

2、左右一行文字

屏幕快照 2018-10-25 下午3.54.18.png

<div class="lineCss">
        <span class="leftTitles">单价</span><span class="rightTitles">100元/张</span>
 </div>

.lineCss{
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    background-color: white;
    border-bottom: 1px solid #f0eff5;
  }
  .leftTitles{
    color: #666666;
    margin-left: 15px;
  }
  .rightTitles{
    color: #030303;
    margin-right: 15px;
  }

1、横向分散布局 display: flex;width: 100%;justify-content: space-around

屏幕快照 2018-10-25 下午3.45.41.png

    <div style="display: flex;width: 100%;justify-content: space-around">
      <div style="flex: 1;" @click="turnAppDetail(37)">
        <img style="width: 50px" src="https://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/webapp/icon_IND.png" alt="">
        <p style="font-size: 14px;color: #666">映客</p>
        <span style="font-size: 11px;color: #999;border-radius: 12px;background: #F5F5F5;margin: auto;padding: 2px 15px;line-height: 16px">映豆</span>
      </div>
      <div style="flex: 1;" @click="turnAppDetail(31)">
        <img style="width: 50px" src="https://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/webapp/icon_ZCB.png" alt="">
        <p style="font-size: 14px;color: #666">资产星球</p>
        <span style="font-size: 11px;color: #999;border-radius: 12px;background: #F5F5F5;margin: auto;padding: 2px 15px;line-height: 16px">资产宝</span>
      </div>
      <div style="flex: 1;" @click="turnAppDetail(35)">
        <img style="width: 50px" src="https://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/webapp/icon_HZ.png" alt="">
        <p style="font-size: 14px;color: #666">野火小说</p>
        <span style="font-size: 11px;color: #999;border-radius:12px;background: #F5F5F5;margin: auto;padding: 2px 15px;line-height: 16px">火钻</span>
      </div>
      <div style="flex: 1;" @click="turnAppDetail(38)">
        <img style="width: 50px" src="https://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/webapp/logo.png" alt="">
        <p style="font-size: 14px;color: #666">链斯达克</p>
        <span style="font-size: 11px;color: #999;border-radius: 12px;background: #F5F5F5;margin: auto;padding: 2px 15px;line-height: 16px">链贝</span>
      </div>
    </div>