master

分支 (3)

标签 (1)

管理

管理

master

develop

feature

1.4.2完整包

cardsystem
/
success.html


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>订单提交成功</title>
</head>
<style>
  .card {
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 0.5rem;

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    background-color: #fff;
  }

  .dismiss {
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background-color: #fff;
    color: black;
    border: 2px solid #D1D5DB;
    font-size: 1rem;
    font-weight: 300;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    transition: .3s ease;
  }

  .dismiss:hover {
    background-color: #ee0d0d;
    border: 2px solid #ee0d0d;
    color: #fff;
  }

  .header {
    padding: 2rem 1rem 1rem 1rem;
    max-width: 290px;
    height: 100vh;
  }

  .image {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    background-color: #e2feee;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    animation: animate .6s linear alternate-reverse infinite;
    transition: .6s ease;
  }

  .image svg {
    color: #0afa2a;
    width: 2rem;
    height: 2rem;
  }

  .content {
    margin-top: 0.75rem;
    text-align: center;
  }

  .title {
    color: #066e29;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
  }

  .message {
    margin-top: 0.5rem;
    color: #595b5f;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .message2 {
    margin-top: 1rem;
    color: #595b5f;
    font-size: 0.875rem;
    line-height: 1rem;
  }

  .actions {
    margin: 0.75rem 1rem;
  }

  .history {
    display: inline-flex;
    padding: 0.5rem 1rem;
    background-color: #1aa06d;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    justify-content: center;
    width: 100%;
    border-radius: 0.375rem;
    border: none;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    margin: 0.5rem 0rem;
  }

  .track {
    display: inline-flex;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    color: #242525;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    justify-content: center;
    width: 100%;
    border-radius: 0.375rem;
    border: 1px solid #D1D5DB;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }

  @keyframes animate {
    from {
      transform: scale(1);
    }

    to {
      transform: scale(1.09);
    }
  }
</style>

<body style="background: rgb(245, 245, 245);">
  <div class="card">
    <div class="header">
      <div class="image">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
          <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
          <g id="SVGRepo_iconCarrier">
            <path d="M20 7L9.00004 18L3.99994 13" stroke="#000000" stroke-width="1.5" stroke-linecap="round"
              stroke-linejoin="round"></path>
          </g>
        </svg>
      </div>
      <div class="content">
        <span class="title">订单提交成功</span>
        <p class="message">订单审核通过后，我们将尽快安排邮寄</p>
      </div>
      <div class="actions">
        <p class="message2">查询订单状态及物流信息请点击：</p>
        <button class="history" id="chaxun" type="button" onclick="">查询订单</button>
      </div>
      <button class="track" type="button"> <img src="img/suzyss.png" width="100%" alt=""></button>
    </div>
  </div>
</body>
<script>
  var urlParams = new URLSearchParams(window.location.search);
  var value = urlParams.get('url');
  window.addEventListener('load', function () {
    var button = document.getElementById('chaxun');
    button.onclick = function () {
      eval(value);
    };
  });
</script>

</html>