Merge pull request #302 from AlphaWallet/alipay-style-fixing

fixed alipay styled css
SmartTokenLabs · Dec 18, 2019 · f48d84e · f48d84e
2 parents 7c7f5d1 + 7ed41f5
commit f48d84e
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 57 deletions.
diff --git a/examples/AliPay/Dropoff/shared.css b/examples/AliPay/Dropoff/shared.css
@@ -1,3 +1,9 @@
+html {
+    min-height: 10px;
+}
+body {
+    min-height: 10px;
+}
 .time {
     font-family: "SourceSansPro";
     font-weight: lighter;
@@ -14,11 +20,11 @@
 .ticket {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzQ0cHgiIGhlaWdodD0iMTg0cHgiIHZpZXdCb3g9IjAgMCAzNDQgMTg0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MSAoODk1ODEpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPkNvbWJpbmVkIFNoYXBlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iR3JhZGllbnQiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoNDUpIj4KCSAgICAgIDxzdG9wIG9mZnNldD0iNSUiICBzdG9wLWNvbG9yPSIjRkU0RTI0IiAvPgoJICAgICAgPHN0b3Agb2Zmc2V0PSI5NSUiIHN0b3AtY29sb3I9IiNFMzIwNkUiIC8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQ2FyZHMvQ29udGVudC9QaWNrdXAiIGZpbGw9InVybCgjR3JhZGllbnQpIj4KICAgICAgICAgICAgPHBhdGggZD0iTS00LjI2MzI1NjQxZS0xNCwxNiBDLTQuMzcxNDczMDFlLTE0LDcuMTYzNDQ0IDcuMTYzNDQ0LDEuNjIzMjQ5ZS0xNSAxNiwwIEwzMjgsMCBDMzM2LjgzNjU1NiwtMS42MjMyNDllLTE1IDM0NCw3LjE2MzQ0NCAzNDQsMTYgTDM0NCw3NyBDMzM1LjcxNTcyOSw3NyAzMjksODMuNzE1NzI4OCAzMjksOTIgQzMyOSwxMDAuMjg0MjcxIDMzNS43MTU3MjksMTA3IDM0NCwxMDcgTDM0NCwxMDcgTDM0NCwxNjggQzM0NCwxNzYuODM2NTU2IDMzNi44MzY1NTYsMTg0IDMyOCwxODQgTDE2LDE4NCBDNy4xNjM0NDQsMTg0IC00LjE1NTAzOTgxZS0xNCwxNzYuODM2NTU2IC00LjI2MzI1NjQxZS0xNCwxNjggTC00LjI2MzI1NjQxZS0xNCwxMDcgTDAuMzEzODI4MTUzLDEwNi45OTY3ODIgQzguNDUzMjEzNjMsMTA2LjgyOTczIDE1LDEwMC4xNzk0MDcgMTUsOTIgQzE1LDgzLjcxNTcyODggOC4yODQyNzEyNSw3NyAtNC4yNjMyNTY0MWUtMTQsNzcgTC00LjI2MzI1NjQxZS0xNCw3NyBMLTQuMjYzMjU2NDFlLTE0LDE2IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+');
     border-radius: 15px;
-    display: flex;
     flex-direction: column;
-    background-size: cover;
+    background-size: contain;
     width: 100%;
     background-repeat: no-repeat;
+    height: 52.7vw;
 }
 .ticketname {
     font-family: "SourceSansPro";
@@ -33,6 +39,7 @@
 .bottom-section {
     display: block;
     padding-left: 12%;
+    padding-top: 7%;
     align-items: center;
     flex: 50%;
     width: auto;
@@ -82,7 +89,7 @@
 .flight {
     font-family: "SourceSansPro";
     font-weight: 800;
-    font-size: 12px;
+    font-size: 14px;
     color: white;
     width: 100%;
     display: block;
@@ -92,7 +99,7 @@
 .airport {
     font-family: "SourceSansPro";
     font-weight: 500;
-    font-size: 12px;
+    font-size: 14px;
     color: white;
     width: 100%;
     display: block;
@@ -102,7 +109,7 @@
 .pickup-location {
     font-family: "SourceSansPro";
     font-weight: 500;
-    font-size: 12px;
+    font-size: 14px;
     color: white;
     width: 100%;
     display: block;
@@ -130,7 +137,7 @@
 }
 
 .redeemed-stamp {
-    height: 60%;
-    margin-top: 58%;
-    margin-left: 28%;
+    height: 56%;
+    margin-top: 45%;
+    margin-left: 15%;
 }
diff --git a/examples/AliPay/Hotel/shared.css b/examples/AliPay/Hotel/shared.css
@@ -1,4 +1,9 @@
-
+html {
+    min-height: 10px;
+}
+body {
+    min-height: 10px;
+}
 .time {
     font-family: "SourceSansPro";
     font-weight: lighter;
@@ -15,11 +20,11 @@
 .ticket {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzQ0cHgiIGhlaWdodD0iMTg0cHgiIHZpZXdCb3g9IjAgMCAzNDQgMTg0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MSAoODk1ODEpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPkNvbWJpbmVkIFNoYXBlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iR3JhZGllbnQiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoNDUpIj4KCSAgICAgIDxzdG9wIG9mZnNldD0iNSUiICBzdG9wLWNvbG9yPSIjNUEyRkM3IiAvPgoJICAgICAgPHN0b3Agb2Zmc2V0PSI5NSUiIHN0b3AtY29sb3I9IiM5NjU3RTQiIC8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQ2FyZHMvQ29udGVudC9QaWNrdXAiIGZpbGw9InVybCgjR3JhZGllbnQpIj4KICAgICAgICAgICAgPHBhdGggZD0iTS00LjI2MzI1NjQxZS0xNCwxNiBDLTQuMzcxNDczMDFlLTE0LDcuMTYzNDQ0IDcuMTYzNDQ0LDEuNjIzMjQ5ZS0xNSAxNiwwIEwzMjgsMCBDMzM2LjgzNjU1NiwtMS42MjMyNDllLTE1IDM0NCw3LjE2MzQ0NCAzNDQsMTYgTDM0NCw3NyBDMzM1LjcxNTcyOSw3NyAzMjksODMuNzE1NzI4OCAzMjksOTIgQzMyOSwxMDAuMjg0MjcxIDMzNS43MTU3MjksMTA3IDM0NCwxMDcgTDM0NCwxMDcgTDM0NCwxNjggQzM0NCwxNzYuODM2NTU2IDMzNi44MzY1NTYsMTg0IDMyOCwxODQgTDE2LDE4NCBDNy4xNjM0NDQsMTg0IC00LjE1NTAzOTgxZS0xNCwxNzYuODM2NTU2IC00LjI2MzI1NjQxZS0xNCwxNjggTC00LjI2MzI1NjQxZS0xNCwxMDcgTDAuMzEzODI4MTUzLDEwNi45OTY3ODIgQzguNDUzMjEzNjMsMTA2LjgyOTczIDE1LDEwMC4xNzk0MDcgMTUsOTIgQzE1LDgzLjcxNTcyODggOC4yODQyNzEyNSw3NyAtNC4yNjMyNTY0MWUtMTQsNzcgTC00LjI2MzI1NjQxZS0xNCw3NyBMLTQuMjYzMjU2NDFlLTE0LDE2IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+');
     border-radius: 15px;
-    display: flex;
     flex-direction: column;
-    background-size: cover;
+    background-size: contain;
     width: 100%;
     background-repeat: no-repeat;
+    height: 52.7vw;
 }
 .ticketname {
     font-family: "SourceSansPro";
@@ -34,6 +39,7 @@
 .bottom-section {
     display: block;
     padding-left: 12%;
+    padding-top: 7%;
     align-items: center;
     flex: 50%;
     width: auto;
@@ -83,7 +89,7 @@
 .flight {
     font-family: "SourceSansPro";
     font-weight: 800;
-    font-size: 12px;
+    font-size: 14px;
     color: white;
     width: 100%;
     display: block;
@@ -93,7 +99,7 @@
 .airport {
     font-family: "SourceSansPro";
     font-weight: 500;
-    font-size: 12px;
+    font-size: 14px;
     color: white;
     width: 100%;
     display: block;
@@ -103,7 +109,7 @@
 .pickup-location {
     font-family: "SourceSansPro";
     font-weight: 500;
-    font-size: 12px;
+    font-size: 14px;
     color: white;
     width: 100%;
     display: block;
@@ -131,7 +137,7 @@
 }
 
 .redeemed-stamp {
-    height: 60%;
-    margin-top: 58%;
-    margin-left: 28%;
+    height: 56%;
+    margin-top: 45%;
+    margin-left: 15%;
 }
diff --git a/examples/AliPay/Invitation/shared.css b/examples/AliPay/Invitation/shared.css
@@ -1,4 +1,9 @@
-
+html {
+    min-height: 10px;
+}
+body {
+    min-height: 10px;
+}
 .time {
     font-family: "SourceSansPro";
     font-weight: lighter;
@@ -14,12 +19,12 @@
 }
 .ticket {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzQ0cHgiIGhlaWdodD0iMTg0cHgiIHZpZXdCb3g9IjAgMCAzNDQgMTg0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MSAoODk1ODEpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPkNvbWJpbmVkIFNoYXBlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iR3JhZGllbnQiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoNDUpIj4KCSAgICAgIDxzdG9wIG9mZnNldD0iNSUiICBzdG9wLWNvbG9yPSIjMTE5RkVBIiAvPgoJICAgICAgPHN0b3Agb2Zmc2V0PSI5NSUiIHN0b3AtY29sb3I9IiMxMTlGRUEiIC8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQ2FyZHMvQ29udGVudC9QaWNrdXAiIGZpbGw9InVybCgjR3JhZGllbnQpIj4KICAgICAgICAgICAgPHBhdGggZD0iTS00LjI2MzI1NjQxZS0xNCwxNiBDLTQuMzcxNDczMDFlLTE0LDcuMTYzNDQ0IDcuMTYzNDQ0LDEuNjIzMjQ5ZS0xNSAxNiwwIEwzMjgsMCBDMzM2LjgzNjU1NiwtMS42MjMyNDllLTE1IDM0NCw3LjE2MzQ0NCAzNDQsMTYgTDM0NCw3NyBDMzM1LjcxNTcyOSw3NyAzMjksODMuNzE1NzI4OCAzMjksOTIgQzMyOSwxMDAuMjg0MjcxIDMzNS43MTU3MjksMTA3IDM0NCwxMDcgTDM0NCwxMDcgTDM0NCwxNjggQzM0NCwxNzYuODM2NTU2IDMzNi44MzY1NTYsMTg0IDMyOCwxODQgTDE2LDE4NCBDNy4xNjM0NDQsMTg0IC00LjE1NTAzOTgxZS0xNCwxNzYuODM2NTU2IC00LjI2MzI1NjQxZS0xNCwxNjggTC00LjI2MzI1NjQxZS0xNCwxMDcgTDAuMzEzODI4MTUzLDEwNi45OTY3ODIgQzguNDUzMjEzNjMsMTA2LjgyOTczIDE1LDEwMC4xNzk0MDcgMTUsOTIgQzE1LDgzLjcxNTcyODggOC4yODQyNzEyNSw3NyAtNC4yNjMyNTY0MWUtMTQsNzcgTC00LjI2MzI1NjQxZS0xNCw3NyBMLTQuMjYzMjU2NDFlLTE0LDE2IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+');
-  border-radius: 15px;
-  display: flex;
-  flex-direction: column;
-  background-size: cover;
-  max-height: 99%;
-  width: 100%;
+    border-radius: 15px;
+    flex-direction: column;
+    background-size: contain;
+    width: 100%;
+    background-repeat: no-repeat;
+    height: 52.7vw;
 }
 .ticketname {
     font-family: "SourceSansPro";
@@ -34,6 +39,7 @@
 .bottom-section {
     display: block;
     padding-left: 12%;
+    padding-top: 7%;
     align-items: center;
     flex: 50%;
     width: auto;
@@ -83,7 +89,7 @@
 .flight {
     font-family: "SourceSansPro";
     font-weight: 800;
-    font-size: 12px;
+    font-size: 14px;
     color: white;
     width: 100%;
     display: block;
@@ -93,7 +99,7 @@
 .airport {
     font-family: "SourceSansPro";
     font-weight: 500;
-    font-size: 12px;
+    font-size: 14px;
     color: white;
     width: 100%;
     display: block;
@@ -103,7 +109,7 @@
 .pickup-location {
     font-family: "SourceSansPro";
     font-weight: 500;
-    font-size: 12px;
+    font-size: 14px;
     color: white;
     width: 100%;
     display: block;
@@ -130,7 +136,7 @@
 }
 
 .redeemed-stamp {
-    height: 55%;
-    margin-top: 100%;
-    margin-left: 34%;
+    height: 56%;
+    margin-top: 45%;
+    margin-left: 15%;
 }
diff --git a/examples/AliPay/Pickup/shared.css b/examples/AliPay/Pickup/shared.css
@@ -1,3 +1,9 @@
+html {
+    min-height: 10px;
+}
+body {
+    min-height: 10px;
+}
 .time {
     font-family: "SourceSansPro";
     font-weight: lighter;
@@ -14,11 +20,11 @@
 .ticket {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzQ0cHgiIGhlaWdodD0iMTg0cHgiIHZpZXdCb3g9IjAgMCAzNDQgMTg0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MSAoODk1ODEpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPkNvbWJpbmVkIFNoYXBlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iR3JhZGllbnQiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoNDUpIj4KCSAgICAgIDxzdG9wIG9mZnNldD0iNSUiICBzdG9wLWNvbG9yPSIjMTk0NURFIiAvPgoJICAgICAgPHN0b3Agb2Zmc2V0PSI5NSUiIHN0b3AtY29sb3I9IiMyRkEzRUEiIC8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQ2FyZHMvQ29udGVudC9QaWNrdXAiIGZpbGw9InVybCgjR3JhZGllbnQpIj4KICAgICAgICAgICAgPHBhdGggZD0iTS00LjI2MzI1NjQxZS0xNCwxNiBDLTQuMzcxNDczMDFlLTE0LDcuMTYzNDQ0IDcuMTYzNDQ0LDEuNjIzMjQ5ZS0xNSAxNiwwIEwzMjgsMCBDMzM2LjgzNjU1NiwtMS42MjMyNDllLTE1IDM0NCw3LjE2MzQ0NCAzNDQsMTYgTDM0NCw3NyBDMzM1LjcxNTcyOSw3NyAzMjksODMuNzE1NzI4OCAzMjksOTIgQzMyOSwxMDAuMjg0MjcxIDMzNS43MTU3MjksMTA3IDM0NCwxMDcgTDM0NCwxMDcgTDM0NCwxNjggQzM0NCwxNzYuODM2NTU2IDMzNi44MzY1NTYsMTg0IDMyOCwxODQgTDE2LDE4NCBDNy4xNjM0NDQsMTg0IC00LjE1NTAzOTgxZS0xNCwxNzYuODM2NTU2IC00LjI2MzI1NjQxZS0xNCwxNjggTC00LjI2MzI1NjQxZS0xNCwxMDcgTDAuMzEzODI4MTUzLDEwNi45OTY3ODIgQzguNDUzMjEzNjMsMTA2LjgyOTczIDE1LDEwMC4xNzk0MDcgMTUsOTIgQzE1LDgzLjcxNTcyODggOC4yODQyNzEyNSw3NyAtNC4yNjMyNTY0MWUtMTQsNzcgTC00LjI2MzI1NjQxZS0xNCw3NyBMLTQuMjYzMjU2NDFlLTE0LDE2IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+');
     border-radius: 15px;
-    display: flex;
     flex-direction: column;
-    background-size: cover;
+    background-size: contain;
     width: 100%;
     background-repeat: no-repeat;
+    height: 52.7vw;
 }
 .ticketname {
     font-family: "SourceSansPro";
@@ -33,6 +39,7 @@
 .bottom-section {
     display: block;
     padding-left: 12%;
+    padding-top: 7%;
     align-items: center;
     flex: 50%;
     width: auto;
@@ -64,7 +71,6 @@
     display: block;
     padding-top: 3%;
     margin-left: 5%;
-
 }
 .top-section {
     display: flex;
@@ -82,7 +88,7 @@
 .flight {
     font-family: "SourceSansPro";
     font-weight: 800;
-    font-size: 12px;
+    font-size: 14px;
     color: white;
     width: 100%;
     display: block;
@@ -92,7 +98,7 @@
 .airport {
     font-family: "SourceSansPro";
     font-weight: 500;
-    font-size: 12px;
+    font-size: 14px;
     color: white;
     width: 100%;
     display: block;
@@ -102,7 +108,7 @@
 .pickup-location {
     font-family: "SourceSansPro";
     font-weight: 500;
-    font-size: 12px;
+    font-size: 14px;
     color: white;
     width: 100%;
     display: block;
@@ -130,7 +136,7 @@
 }
 
 .redeemed-stamp {
-    height: 60%;
-    margin-top: 58%;
-    margin-left: 28%;
+    height: 56%;
+    margin-top: 45%;
+    margin-left: 15%;
 }
diff --git a/examples/AliPay/Summit/shared.css b/examples/AliPay/Summit/shared.css
@@ -1,3 +1,9 @@
+html {
+    min-height: 10px;
+}
+body {
+    min-height: 10px;
+}
 .time {
     font-family: "SourceSansPro";
     font-weight: lighter;
@@ -14,11 +20,11 @@
 .ticket {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzQ0cHgiIGhlaWdodD0iMTg0cHgiIHZpZXdCb3g9IjAgMCAzNDQgMTg0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MSAoODk1ODEpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPkNvbWJpbmVkIFNoYXBlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iR3JhZGllbnQiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoNDUpIj4KCSAgICAgIDxzdG9wIG9mZnNldD0iNSUiICBzdG9wLWNvbG9yPSIjRjNBNDM1IiAvPgoJICAgICAgPHN0b3Agb2Zmc2V0PSI5NSUiIHN0b3AtY29sb3I9IiNGQTQ1MzAiIC8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQ2FyZHMvQ29udGVudC9QaWNrdXAiIGZpbGw9InVybCgjR3JhZGllbnQpIj4KICAgICAgICAgICAgPHBhdGggZD0iTS00LjI2MzI1NjQxZS0xNCwxNiBDLTQuMzcxNDczMDFlLTE0LDcuMTYzNDQ0IDcuMTYzNDQ0LDEuNjIzMjQ5ZS0xNSAxNiwwIEwzMjgsMCBDMzM2LjgzNjU1NiwtMS42MjMyNDllLTE1IDM0NCw3LjE2MzQ0NCAzNDQsMTYgTDM0NCw3NyBDMzM1LjcxNTcyOSw3NyAzMjksODMuNzE1NzI4OCAzMjksOTIgQzMyOSwxMDAuMjg0MjcxIDMzNS43MTU3MjksMTA3IDM0NCwxMDcgTDM0NCwxMDcgTDM0NCwxNjggQzM0NCwxNzYuODM2NTU2IDMzNi44MzY1NTYsMTg0IDMyOCwxODQgTDE2LDE4NCBDNy4xNjM0NDQsMTg0IC00LjE1NTAzOTgxZS0xNCwxNzYuODM2NTU2IC00LjI2MzI1NjQxZS0xNCwxNjggTC00LjI2MzI1NjQxZS0xNCwxMDcgTDAuMzEzODI4MTUzLDEwNi45OTY3ODIgQzguNDUzMjEzNjMsMTA2LjgyOTczIDE1LDEwMC4xNzk0MDcgMTUsOTIgQzE1LDgzLjcxNTcyODggOC4yODQyNzEyNSw3NyAtNC4yNjMyNTY0MWUtMTQsNzcgTC00LjI2MzI1NjQxZS0xNCw3NyBMLTQuMjYzMjU2NDFlLTE0LDE2IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+');
     border-radius: 15px;
-    display: flex;
     flex-direction: column;
-    background-size: cover;
+    background-size: contain;
     width: 100%;
     background-repeat: no-repeat;
+    height: 52.7vw;
 }
 .ticketname {
     font-family: "SourceSansPro";

diff --git a/examples/AliPay/Tour Package A/shared.css b/examples/AliPay/Tour Package A/shared.css
@@ -1,3 +1,9 @@
+html {
+    min-height: 10px;
+}
+body {
+    min-height: 10px;
+}
 .time {
     font-family: "SourceSansPro";
     font-weight: lighter;
@@ -14,11 +20,11 @@
 .ticket {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzQ0cHgiIGhlaWdodD0iMTg0cHgiIHZpZXdCb3g9IjAgMCAzNDQgMTg0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MSAoODk1ODEpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPkNvbWJpbmVkIFNoYXBlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iR3JhZGllbnQiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoNDUpIj4KCSAgICAgIDxzdG9wIG9mZnNldD0iNSUiICBzdG9wLWNvbG9yPSIjMDZBNDkxIiAvPgoJICAgICAgPHN0b3Agb2Zmc2V0PSI5NSUiIHN0b3AtY29sb3I9IiMxNERFNEEiIC8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQ2FyZHMvQ29udGVudC9QaWNrdXAiIGZpbGw9InVybCgjR3JhZGllbnQpIj4KICAgICAgICAgICAgPHBhdGggZD0iTS00LjI2MzI1NjQxZS0xNCwxNiBDLTQuMzcxNDczMDFlLTE0LDcuMTYzNDQ0IDcuMTYzNDQ0LDEuNjIzMjQ5ZS0xNSAxNiwwIEwzMjgsMCBDMzM2LjgzNjU1NiwtMS42MjMyNDllLTE1IDM0NCw3LjE2MzQ0NCAzNDQsMTYgTDM0NCw3NyBDMzM1LjcxNTcyOSw3NyAzMjksODMuNzE1NzI4OCAzMjksOTIgQzMyOSwxMDAuMjg0MjcxIDMzNS43MTU3MjksMTA3IDM0NCwxMDcgTDM0NCwxMDcgTDM0NCwxNjggQzM0NCwxNzYuODM2NTU2IDMzNi44MzY1NTYsMTg0IDMyOCwxODQgTDE2LDE4NCBDNy4xNjM0NDQsMTg0IC00LjE1NTAzOTgxZS0xNCwxNzYuODM2NTU2IC00LjI2MzI1NjQxZS0xNCwxNjggTC00LjI2MzI1NjQxZS0xNCwxMDcgTDAuMzEzODI4MTUzLDEwNi45OTY3ODIgQzguNDUzMjEzNjMsMTA2LjgyOTczIDE1LDEwMC4xNzk0MDcgMTUsOTIgQzE1LDgzLjcxNTcyODggOC4yODQyNzEyNSw3NyAtNC4yNjMyNTY0MWUtMTQsNzcgTC00LjI2MzI1NjQxZS0xNCw3NyBMLTQuMjYzMjU2NDFlLTE0LDE2IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+');
     border-radius: 15px;
-    display: flex;
     flex-direction: column;
-    background-size: cover;
+    background-size: contain;
     width: 100%;
     background-repeat: no-repeat;
+    height: 52.7vw;
 }
 .ticketname {
     font-family: "SourceSansPro";
@@ -33,6 +39,7 @@
 .bottom-section {
     display: block;
     padding-left: 12%;
+    padding-top: 7%;
     align-items: center;
     flex: 50%;
     width: auto;
@@ -82,7 +89,7 @@
 .flight {
     font-family: "SourceSansPro";
     font-weight: 800;
-    font-size: 12px;
+    font-size: 14px;
     color: white;
     width: 100%;
     display: block;
@@ -92,7 +99,7 @@
 .airport {
     font-family: "SourceSansPro";
     font-weight: 500;
-    font-size: 12px;
+    font-size: 14px;
     color: white;
     width: 100%;
     display: block;
@@ -102,7 +109,7 @@
 .pickup-location {
     font-family: "SourceSansPro";
     font-weight: 500;
-    font-size: 12px;
+    font-size: 14px;
     color: white;
     width: 100%;
     display: block;
@@ -130,7 +137,7 @@
 }
 
 .redeemed-stamp {
-    height: 60%;
-    margin-top: 58%;
-    margin-left: 28%;
+    height: 56%;
+    margin-top: 45%;
+    margin-left: 15%;
 }