密码框

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

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

        

          
          
购买成功
          
您购买的链贝VIP享时卡已存入你的个人账户VIP卡包中
        
      

      

        

          
          
购买失败
          
暂无服务，请查看网络连接是否完好!
        
      

4、密码框

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

    

      

        

          
          请输入交易密码
        
        

          
        
        
忘记密码？
        
      
    

3、购买加减

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

        购买数量
        

          

            -
            
            +
          
        
      

.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

        单价100元/张
 

.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

    

      

        
        
映客
        映豆
      
      

        
        
资产星球
        资产宝
      
      

        
        
野火小说
        火钻
      
      

        
        
链斯达克
        链贝