Home Explore Help
Register Sign In
liuchengyang
/
payment-result-pages
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

feat: 完成页面

windyeasy 5 months ago
commit
c25fa4dbfb
5 changed files with 86 additions and 0 deletions
Split View Show Diff Stats
  1. BIN
      icon/failure.png
  2. BIN
      icon/success.png
  3. 20 0
      payment-failed.html
  4. 20 0
      payment-success.html
  5. 46 0
      styles/style.css

BIN
icon/failure.png
View File


BIN
icon/success.png
View File


+ 20 - 0
payment-failed.html
View File 

@@ -0,0 +1,20 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="divport" content="width=device-width, initial-scale=1.0" />
 
+    <title>payment-failed</title>
 
+    <link rel="stylesheet" type="text/css" href="./styles/style.css" />
 
+  </head>
 
+  <body>
 
+    <div class="payment-card">
 
+      <div class="card-icon">
 
+        <img class="icon-img" src="./icon/failure.png" />
 
+      </div>
 
+      <div class="card-content">
 
+        <div class="card-title">Payment failed</div>
 
+        <div class="card-desc">Oh no, your payment failed!</div>
 
+      </div>
 
+    </div>
 
+  </body>
 
+</html>

+ 20 - 0
payment-success.html
View File 

@@ -0,0 +1,20 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="divport" content="width=device-width, initial-scale=1.0" />
 
+    <title>payment-success</title>
 
+    <link rel="stylesheet" type="text/css" href="./styles/style.css" />
 
+  </head>
 
+  <body>
 
+    <div class="payment-card">
 
+      <div class="card-icon">
 
+        <img class="icon-img" src="./icon/success.png" />
 
+      </div>
 
+      <div class="card-content">
 
+        <div class="card-title">Payment Successful</div>
 
+        <div class="card-desc">Your payment was successful!</div>
 
+      </div>
 
+    </div>
 
+  </body>
 
+</html>

+ 46 - 0
styles/style.css
View File 

@@ -0,0 +1,46 @@
 
+* {
 
+  margin: 0;
 
+  padding: 0;
 
+}
 
+html {
 
+  font-size: 13.333vw;
 
+}
 
+img {
 
+  vertical-align: top;
 
+}
 
+.payment-card {
 
+  display: flex;
 
+  flex-direction: column;
 
+  justify-content: center;
 
+  align-items: center;
 
+  width: 100%;
 
+  padding-top: 5%;
 
+  text-align: center;
 
+}
 
+.payment-card img {
 
+  background-size: 100% auto;
 
+}
 
+.card-icon {
 
+  width: 20%;
 
+  height: 40%;
 
+}
 
+.card-title {
 
+  font-size: 0.4rem;
 
+  margin-top: 0.3rem;
 
+  font-weight: bold;
 
+}
 
+.card-desc {
 
+  margin-top: 0.1rem;
 
+  line-height: 1.7;
 
+  color: #8b99a3;
 
+  font-size: 0.3rem;
 
+}
 
+.icon-img {
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.card-icon {
 
+  display: flex;
 
+  align-items: center;
 
+  justify-self: center;
 
+}