123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185 |
- <!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>
|