超级商店笔记

移动端最大宽度及最小高度适配

__________App.vue    style
#app{
  max-width: 480px;
  margin: 0 auto;
}
________index.vue 最外层的div的class
.con {
    width: 100%;
    min-height: 100vh;
    background: #f2f2f2;
}

金额输入框 提示字体样式修改

<input placeholder="0.00" pattern="[0-9]*" class="number" v-model.number="number" />
______________style
.number::-webkit-input-placeholder {
    color: #bebebe;
    font-size: 34px;
}

css

    <div class="main">
      <img src="../assets/images/Oval 21.png" alt="" class="oval">
      <span>付款选项</span>
      <ul>
        <li>
          <img src="../assets/images/vipzfb.png" alt="" class="icon">
          <p>支付宝支付</p>
          <span>支持余额、花呗、信用卡等</span>
          <img src="../assets/images/vipxzg.png" alt="" class="checked">
        </li>
        <li>
          <img src="../assets/images/Image 134.png" alt="" class="icon">
          <p>花呗分期</p>
          <i>推荐</i>
          <span>分期付款无压力</span>
          <img src="../assets/images/vipxzg.png" alt="" class="checked">
        </li>
        <li>
          <img src="../assets/images/VIPwx.png" alt="" class="icon">
          <p>微信支付</p>
          <img src="../assets/images/vipxzg.png" alt="" class="checked">
        </li>
      </ul>
    </div>
____________________style
.main{
  background: #FFFFFF;
  height: 190px;
  margin-top: 10px;
  padding-top: 15px;
}
.icon{
  /* margin-left: 4%; */
  width: 22px;
  height: 22px;
}
.checked{
  position: absolute;
  right: 20px;
}
li{
  display: flex;
  height: 50px;
  padding: 14px 0;
  border-bottom: 1px solid #DFDFDF;
  width: 90%;
  margin:0 auto
}
  border-radius: 8px;
  text-align: center;
  width: 32px;
  height: 16px;
  font-size: 10px;
  color: #FFFFFF;
  position: relative;
  left: 8px;
  top: 3px;

}
li:last-child {
    border: none;
}

屏幕快照 2019-07-13 下午5.23.03.png

获取当前时间戳

        this.timestamp = Date.parse(new Date());