Authored by 郭成尧

dialog-style

  1 +<div class="safe-check-tip">
  2 + 您正在使用礼品卡支付,为了保障 您的安全,请进行安全验证。 验证码已发送至{{mobile}}手机号
  3 +</div>
  4 +<div class="safe-check-form">
  5 + <div class="input-group">
  6 + <input type="text" placeholder="短信验证码">
  7 + <button class="get-verify-code-btn">获取验证码</button>
  8 + </div>
  9 +</div>
@@ -813,3 +813,57 @@ @@ -813,3 +813,57 @@
813 display: block; 813 display: block;
814 } 814 }
815 } 815 }
  816 +
  817 +#dialog-wrapper > .dialog-box {
  818 + background: #fff;
  819 +
  820 + > .dialog-header {
  821 + padding-top: 42px;
  822 + padding-bottom: 22px;
  823 + font-size: 36px;
  824 + font-weight: 500;
  825 + }
  826 +
  827 + > .dialog-content {
  828 + padding-top: 0;
  829 + padding-bottom: 31px;
  830 +
  831 + .safe-check-tip {
  832 + font-size: 22px;
  833 + color: #b0b0b0;
  834 + }
  835 +
  836 + .input-group {
  837 + width: 470px;
  838 + height: 86px;
  839 + margin-top: 38px;
  840 + line-height: 86px;
  841 + border-radius: 4px;
  842 + background-color: #fff;
  843 + border: solid 1px #e0e0e0;
  844 +
  845 + input {
  846 + float: left;
  847 + margin-top: 21px;
  848 + margin-left: 24px;
  849 + background-color: transparent;
  850 + border: none;
  851 + box-shadow: none;
  852 + }
  853 +
  854 + .get-verify-code-btn {
  855 + float: right;
  856 + width: 159px;
  857 + height: 53px;
  858 + margin-top: 16px;
  859 + margin-right: 12px;
  860 + border-radius: 26px;
  861 + background-color: #444;
  862 + border: none;
  863 + font-size: 24px;
  864 + font-weight: 300;
  865 + color: #fff;
  866 + }
  867 + }
  868 + }
  869 +}