@alipay/ams-checkout 0.0.1732691889-dev.1 → 0.0.1732691889-dev.11

package/esm/component/component.popup.style.js

@@ -5,10 +5,10 @@
  * 1. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE; and
  * 2. If applicable, the use of the Software is also subject to the terms and conditions of any non-disclosure agreement signed by you and the relevant Ant Group entity.
  */
-import { ANIMATION_TIME, closeImg, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CONTAINER_ID, COMPONENT_CLOSE_MASK_ID, COMPONENT_RETENTION_ID, COMPONENT_SECTION_ID, LOADING_ID, MOCKUP_ID } from "../constant";
+import { ANIMATION_TIME, closeImg, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CONTAINER_ID, COMPONENT_CLOSE_MASK_BLOCK_ID, COMPONENT_RETENTION_ID, COMPONENT_SECTION_ID, LOADING_ID, MOCKUP_ID } from "../constant";
 import { PlatformEnum } from "../types";
 import { addSetFontSizeEvent, amsSetSize, getDesignFontSize } from "../util";
-var componentCss = ".ams-component-container-mobile {\n  width: 100%;\n  height: 1px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n}\n.ams-component-container-mobile-animation{\n  animation: ams-component-container-slide-in 0.3s ease-in-out;\n}\n\n.ams-component-section-desktop {\n  font-size: 0;\n}\n\n.ams-component-container-hidden-mobile {\n  width: 100%;\n  height: 0px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  background-color: transparent;\n  border-radius: 12px 12px 0 0;\n  animation: ams-component-container-slide-out 0.26s ease-in forwards;\n  overflow: hidden;\n}\n\n.ams-component-section-mobile {\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n  font-size: 0;\n  height: 100%;\n}\n\n.ams-component-container-desktop {\n  display: block;\n  width: 672px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 12px;\n  overflow: hidden;\n  transform-origin: 50% 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-container-desktop-animation{\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n@keyframes ams-component-container-zoom-out {\n  0% {\n    transform: translate(-50%, -50%) scale(1);\n    -webkit-transform: translate(-50%, -50%) scale(1);\n    opacity: 1\n  }\n\n  100% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.4);\n    -webkit-transform: translate(-50%, -50%) scale(0.4);\n  }\n}\n\n@keyframes ams-component-container-zoom-in {\n  0% {\n    transform: translate(-50%, -50%) scale(0.4);\n    opacity: 0\n  }\n\n  100% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.ams-component-container-hidden-desktop {\n  display: block;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 8px;\n  overflow: hidden;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  animation-fill-mode: forwards;\n  transform-origin: 50% 50%;\n}\n\n.ams-component-loading {\n  width: 0.8em;\n  height:0.8em;\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 8px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.ams-component-loading .line {\n  width: 40px;\n  height: 40px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-loading .line div {\n  position: absolute;\n  left: 17.67px;\n  top: 0;\n  width: 5.33px;\n  height: 40px;\n}\n\n.ams-component-loading .line div:before,\n.ams-component-loading .line div:after {\n  content: '';\n  display: block;\n  height: 13.33px;\n  background: #fcfcfc;\n  border-radius: 5.3px;\n}\n.ams-component-loading .line div:after {\n  margin-top: 13.33px;\n}\n\n.ams-component-loading .line div:nth-child(2) {\n  -webkit-transform: rotate(45deg);\n}\n\n.ams-component-loading .line div:nth-child(3) {\n  -webkit-transform: rotate(90deg);\n}\n\n.ams-component-loading .line div:nth-child(4) {\n  -webkit-transform: rotate(135deg);\n}\n\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes load {\n  0% {\n      opacity: 0;\n  }\n\n  100% {\n      opacity: 1;\n  }\n}\n\n.ams-component-loading .line div:nth-child(1):before {\n  -webkit-animation: load 1s linear 0s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):before {\n  -webkit-animation: load 1s linear 0.125s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):before {\n  -webkit-animation: load 1s linear 0.25s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):before {\n  -webkit-animation: load 1s linear 0.375s infinite;\n}\n\n.ams-component-loading .line div:nth-child(1):after {\n  -webkit-animation: load 1s linear 0.5s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):after {\n  -webkit-animation: load 1s linear 0.675s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):after {\n  -webkit-animation: load 1s linear 0.75s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):after {\n  -webkit-animation: load 1s linear 0.875s infinite;\n}\n\n.ams-component-loading-logo {\n  width: 0.44em;\n  height: 0.44em;\n  -webkit-transform:rotate(360deg);\n  transform:rotate(360deg);\n  -webkit-transition:-webkit-transform 1s linear;\n  transition:transform 1s linear;\n  animation: ams-component-loading-logo 1s linear infinite;\n}\n\n.asm-component-close-block-desktop {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n}\n.asm-component-close-block-btn-desktop {\n  width: 11px;\n  height: 11px;\n  object-fit: fill;\n  position: absolute;\n  right: 18.7px;\n  top: 26.7px;\n}\n.asm-component-close-block-hidden {\n  width: 0px !important;\n  height: 0px !important;\n  visibility: hidden;\n}\n.asm-component-close-block-mobile {\n  position: absolute;\n  width: 0.4em;\n  height: 0.4em;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n  z-index: 1009;\n}\n\n.asm-component-close-block-btn-mobile {\n  width: 0.11em;\n  height: 0.11em;\n  object-fit: fill;\n  position: absolute;\n  right: 0.147em;\n  top: 0.167em;\n}\n.asm-component-mask-close-block-desktop {\n position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 18px;\n  top: 10px;\n  cursor: pointer;\n  }\n  \n.asm-component-mask-close-block-mobile {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 18px;\n  bottom: 0;\n  cursor: pointer;\n  z-index: 1012;\n}\n\n.asm-component-mask-close-block-hidden {\n  width: 0px !important;\n  height: 0px !important;\n  visibility: hidden;\n}\n\n.asm-component-mask-close-block-btn {\n   width: 24px;\n  height: 24px;\n  object-fit: fill;\n  position: absolute;\n  right: 8px;\n  top: 8px;\n  }\n\n.ams-component-container-opacity{\n  opacity: 1;\n}\n\n.ams-component-container-opacity:after{\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n  content: \"\";\n  z-index: 1010;\n  background-color: rgba(0, 0, 0, 0.35);\n  border-radius: 12px 12px 0 0;\n}\n\n#ams-component-retention {\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  transform-origin: 50%;\n  height: auto;\n  display: none;\n  z-index: 1009;\n}\n\n.ams-component-retention-show {\n  display: flex !important;\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n.ams-component-retention-hidden {\n  display: flex !important;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  -webkit-animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  animation-fill-mode: forwards;\n  -webkit-animation-fill-mode: forwards;\n}\n\n.ams-component-retention-mobile {\n  width: 294px;\n  border-radius: 12px;\n  padding: 24px 0;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-desktop {\n  width: 544px;\n  border-radius: 12px;\n  padding: 32px;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n@media screen and (max-width: 300px) {\n  .ams-component-retention-mobile {\n      transform: translate(-50%, -50%) scale(0.8);\n  }\n}\n\n.ams-component-retention-title-mobile {\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-title-desktop {\n  text-align: left;\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n}\n\n.ams-component-retention-sub-title-mobile {\n  width: 100%;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 8px;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-sub-title-desktop {\n  text-align: left;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 10px;\n}\n\n.ams-component-retention-btn-block-mobile {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  margin-top: 24px;\n  padding: 0 24px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-btn-block-desktop {\n  width: 100%;\n  margin-top: 24px;\n}\n\n#ams-component-retention-remain {\n  background: #0079FF;\n  border-radius: 100px;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n  color: #FFFFFF;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ams-component-retention-remain-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  padding: 0 6px;\n}\n\n.ams-component-retention-remain-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  cursor: pointer;\n  padding: 0 16px;\n  max-width: 225px;\n  min-width: 159px;\n}\n\n#ams-component-retention-leave {\n  border-radius: 100px;\n  border: 1px solid #0079FF;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ams-component-retention-leave-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  margin-top: 12px;\n  padding: 0 6px;\n}\n\n.ams-component-retention-leave-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  margin-right: 16px;\n  cursor: pointer;\n  padding: 0 16px;\n  max-width: 225px;\n  min-width: 144px;\n}\n.".concat(MOCKUP_ID, "-hidden{\nanimation: ").concat(MOCKUP_ID, "-opacity 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes ").concat(MOCKUP_ID, "-opacity {\n  0% {\n      opacity: 1;\n  }\n\n  100% {\n      opacity: 0;\n  }\n}\n");
+var componentCss = ".ams-component-container-mobile {\n  width: 100%;\n  height: 1px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n}\n.ams-component-container-mobile-animation{\n  animation: ams-component-container-slide-in 0.3s ease-in-out;\n}\n\n.ams-component-section-desktop {\n  font-size: 0;\n}\n\n.ams-component-container-hidden-mobile {\n  width: 100%;\n  height: 0px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  background-color: transparent;\n  border-radius: 12px 12px 0 0;\n  animation: ams-component-container-slide-out 0.26s ease-in forwards;\n  overflow: hidden;\n}\n\n.ams-component-section-mobile {\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n  font-size: 0;\n  height: 100%;\n}\n\n.ams-component-container-desktop {\n  display: block;\n  width: 672px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 12px;\n  overflow: hidden;\n  transform-origin: 50% 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-container-desktop-animation{\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n@keyframes ams-component-container-zoom-out {\n  0% {\n    transform: translate(-50%, -50%) scale(1);\n    -webkit-transform: translate(-50%, -50%) scale(1);\n    opacity: 1\n  }\n\n  100% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.4);\n    -webkit-transform: translate(-50%, -50%) scale(0.4);\n  }\n}\n\n@keyframes ams-component-container-zoom-in {\n  0% {\n    transform: translate(-50%, -50%) scale(0.4);\n    opacity: 0\n  }\n\n  100% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.ams-component-container-hidden-desktop {\n  display: block;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 8px;\n  overflow: hidden;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  animation-fill-mode: forwards;\n  transform-origin: 50% 50%;\n}\n\n.ams-component-loading {\n  width: 0.8em;\n  height:0.8em;\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 8px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.ams-component-loading .line {\n  width: 40px;\n  height: 40px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-loading .line div {\n  position: absolute;\n  left: 17.67px;\n  top: 0;\n  width: 5.33px;\n  height: 40px;\n}\n\n.ams-component-loading .line div:before,\n.ams-component-loading .line div:after {\n  content: '';\n  display: block;\n  height: 13.33px;\n  background: #fcfcfc;\n  border-radius: 5.3px;\n}\n.ams-component-loading .line div:after {\n  margin-top: 13.33px;\n}\n\n.ams-component-loading .line div:nth-child(2) {\n  -webkit-transform: rotate(45deg);\n}\n\n.ams-component-loading .line div:nth-child(3) {\n  -webkit-transform: rotate(90deg);\n}\n\n.ams-component-loading .line div:nth-child(4) {\n  -webkit-transform: rotate(135deg);\n}\n\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes load {\n  0% {\n      opacity: 0;\n  }\n\n  100% {\n      opacity: 1;\n  }\n}\n\n.ams-component-loading .line div:nth-child(1):before {\n  -webkit-animation: load 1s linear 0s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):before {\n  -webkit-animation: load 1s linear 0.125s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):before {\n  -webkit-animation: load 1s linear 0.25s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):before {\n  -webkit-animation: load 1s linear 0.375s infinite;\n}\n\n.ams-component-loading .line div:nth-child(1):after {\n  -webkit-animation: load 1s linear 0.5s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):after {\n  -webkit-animation: load 1s linear 0.675s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):after {\n  -webkit-animation: load 1s linear 0.75s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):after {\n  -webkit-animation: load 1s linear 0.875s infinite;\n}\n\n.ams-component-loading-logo {\n  width: 0.44em;\n  height: 0.44em;\n  -webkit-transform:rotate(360deg);\n  transform:rotate(360deg);\n  -webkit-transition:-webkit-transform 1s linear;\n  transition:transform 1s linear;\n  animation: ams-component-loading-logo 1s linear infinite;\n}\n\n.asm-component-close-block-desktop {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n}\n.asm-component-close-block-btn-desktop {\n  width: 11px;\n  height: 11px;\n  object-fit: fill;\n  position: absolute;\n  right: 18.7px;\n  top: 26.7px;\n}\n.asm-component-close-block-hidden {\n  width: 0px !important;\n  height: 0px !important;\n  visibility: hidden;\n}\n.asm-component-close-block-mobile {\n  position: absolute;\n  width: 0.4em;\n  height: 0.4em;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n  z-index: 1009;\n}\n\n.asm-component-close-block-btn-mobile {\n  width: 0.11em;\n  height: 0.11em;\n  object-fit: fill;\n  position: absolute;\n  right: 0.147em;\n  top: 0.167em;\n}\n.ams-component-mask-close-block-desktop {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 18px;\n  top: 10px;\n  cursor: pointer;\n  z-index: 1013;\n}\n  \n.ams-component-mask-close-block-mobile {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 18px;\n  cursor: pointer;\n  z-index: 1012;\n}\n\n.ams-component-mask-close-block-hidden {\n  width: 0px !important;\n  height: 0px !important;\n  visibility: hidden;\n}\n\n.ams-component-mask-close-block-btn {\n  width: 24px;\n  height: 24px;\n  object-fit: fill;\n  position: absolute;\n  right: 8px;\n  top: 8px;\n}\n\n.ams-component-container-opacity{\n  opacity: 1;\n}\n\n.ams-component-container-opacity:after{\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n  content: \"\";\n  z-index: 1010;\n  background-color: rgba(0, 0, 0, 0.35);\n  border-radius: 12px 12px 0 0;\n}\n\n#ams-component-retention {\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  transform-origin: 50%;\n  height: auto;\n  display: none;\n  z-index: 1009;\n}\n\n.ams-component-retention-show {\n  display: flex !important;\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n.ams-component-retention-hidden {\n  display: flex !important;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  -webkit-animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  animation-fill-mode: forwards;\n  -webkit-animation-fill-mode: forwards;\n}\n\n.ams-component-retention-mobile {\n  width: 294px;\n  border-radius: 12px;\n  padding: 24px 0;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-desktop {\n  width: 544px;\n  border-radius: 12px;\n  padding: 32px;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n@media screen and (max-width: 300px) {\n  .ams-component-retention-mobile {\n      transform: translate(-50%, -50%) scale(0.8);\n  }\n}\n\n.ams-component-retention-title-mobile {\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-title-desktop {\n  text-align: left;\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n}\n\n.ams-component-retention-sub-title-mobile {\n  width: 100%;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 8px;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-sub-title-desktop {\n  text-align: left;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 10px;\n}\n\n.ams-component-retention-btn-block-mobile {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  margin-top: 24px;\n  padding: 0 24px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-btn-block-desktop {\n  width: 100%;\n  margin-top: 24px;\n}\n\n#ams-component-retention-remain {\n  background: #0079FF;\n  border-radius: 100px;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n  color: #FFFFFF;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ams-component-retention-remain-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  padding: 0 6px;\n}\n\n.ams-component-retention-remain-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  cursor: pointer;\n  padding: 0 16px;\n  max-width: 225px;\n  min-width: 159px;\n}\n\n#ams-component-retention-leave {\n  border-radius: 100px;\n  border: 1px solid #0079FF;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ams-component-retention-leave-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  margin-top: 12px;\n  padding: 0 6px;\n}\n\n.ams-component-retention-leave-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  margin-right: 16px;\n  cursor: pointer;\n  padding: 0 16px;\n  max-width: 225px;\n  min-width: 144px;\n}\n.".concat(MOCKUP_ID, "-hidden{\nanimation: ").concat(MOCKUP_ID, "-opacity 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes ").concat(MOCKUP_ID, "-opacity {\n  0% {\n      opacity: 1;\n  }\n\n  100% {\n      opacity: 0;\n  }\n}\n");
 export var componentAddCSS = function componentAddCSS() {
   var style = document.createElement('style');
   style.type = 'text/css';
@@ -49,16 +49,15 @@ export var createCloseBtn = function createCloseBtn(platform, closeBtnFunc) {
 };
 export var createMaskCloseButton = function createMaskCloseButton(platform, closeBtnFunc) {
   var clickEventName = platform === PlatformEnum.mobile ? 'touchend' : 'click';
-  var container = document.getElementById(MOCKUP_ID);
-  var closeBtnHTML = "<div class='".concat(COMPONENT_CLOSE_MASK_ID, "-btn'>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.5673 4.49829L19.424 4.36736L19.3027 4.27821L19.1702 4.19928C18.5417 3.86236 17.7834 3.96479 17.2841 4.46433L11.9986 9.7512L6.73275 4.4853L6.67045 4.42539C6.01464 3.85742 5.07067 3.85791 4.49751 4.42864L4.38538 4.54934L4.27757 4.69333L4.19868 4.8259C3.862 5.45451 3.96432 6.21286 4.46349 6.71225L9.75274 12.0006L4.42833 17.3276C3.85705 17.9874 3.85754 18.9315 4.42789 19.5048L4.54854 19.6169L4.6925 19.7248L4.82504 19.8038C5.45353 20.1407 6.21179 20.0383 6.71105 19.5388L11.9986 14.2489L17.321 19.574C17.9915 20.1551 18.9356 20.1352 19.5317 19.5388L19.6383 19.4206L19.7338 19.2891C20.1447 18.6603 20.0683 17.8276 19.5316 17.2907L14.2454 12.0016L19.5077 6.73713L19.605 6.63362C20.1455 6.00703 20.1297 5.06361 19.5673 4.49829Z\" fill=\"#EEEEEE\"/>\n</svg>\n  </div>");
+  var closeBtnHTML = "<div class='".concat(COMPONENT_CLOSE_MASK_BLOCK_ID, "-btn'>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.5673 4.49829L19.424 4.36736L19.3027 4.27821L19.1702 4.19928C18.5417 3.86236 17.7834 3.96479 17.2841 4.46433L11.9986 9.7512L6.73275 4.4853L6.67045 4.42539C6.01464 3.85742 5.07067 3.85791 4.49751 4.42864L4.38538 4.54934L4.27757 4.69333L4.19868 4.8259C3.862 5.45451 3.96432 6.21286 4.46349 6.71225L9.75274 12.0006L4.42833 17.3276C3.85705 17.9874 3.85754 18.9315 4.42789 19.5048L4.54854 19.6169L4.6925 19.7248L4.82504 19.8038C5.45353 20.1407 6.21179 20.0383 6.71105 19.5388L11.9986 14.2489L17.321 19.574C17.9915 20.1551 18.9356 20.1352 19.5317 19.5388L19.6383 19.4206L19.7338 19.2891C20.1447 18.6603 20.0683 17.8276 19.5316 17.2907L14.2454 12.0016L19.5077 6.73713L19.605 6.63362C20.1455 6.00703 20.1297 5.06361 19.5673 4.49829Z\" fill=\"#EEEEEE\"/>\n</svg>\n  </div>");
   var closeBlock = document.createElement('div');
-  closeBlock.classList.add("".concat(COMPONENT_CLOSE_MASK_ID, "-").concat(platform), "".concat(COMPONENT_CLOSE_MASK_ID, "-hidden"));
-  closeBlock.id = COMPONENT_CLOSE_MASK_ID;
+  closeBlock.classList.add("".concat(COMPONENT_CLOSE_MASK_BLOCK_ID, "-").concat(platform), "".concat(COMPONENT_CLOSE_MASK_BLOCK_ID, "-hidden"));
+  closeBlock.id = COMPONENT_CLOSE_MASK_BLOCK_ID;
   closeBlock.innerHTML = closeBtnHTML;
   closeBlock.addEventListener(clickEventName, function () {
     closeBtnFunc();
   });
-  if (container) container.appendChild(closeBlock);
+  document.body.appendChild(closeBlock);
 };
 
 /**

package/esm/constant/index.d.ts

@@ -112,6 +112,10 @@ export declare const EVENT: {
         name: string;
         uniqueKey: string;
     };
+    closeCallback: {
+        name: string;
+        uniqueKey: string;
+    };
     eventCallback: {
         name: string;
         uniqueKey: string;
@@ -199,7 +203,7 @@ export declare const COMPONENT_CONTAINER_ID = "ams-component-container";
 export declare const COMPONENT_SECTION_ID = "ams-component-section";
 export declare const COMPONENT_IFRAME_TAG_ID = "ams-checkout-component";
 export declare const COMPONENT_CLOSE_BLOCK_ID = "asm-component-close-block";
-export declare const COMPONENT_CLOSE_MASK_ID = "asm-component-mask-close-block";
+export declare const COMPONENT_CLOSE_MASK_BLOCK_ID = "ams-component-mask-close-block";
 export declare const COMPONENT_RETENTION_ID = "ams-component-retention";
 export declare const MOCKUP_ID = "ams-component-mockup";
 export declare const LOADING_ID = "ams-component-loading";

package/esm/constant/index.js

@@ -112,6 +112,11 @@ export var EVENT = {
     name: 'onClose',
     uniqueKey: 'userOnClose'
   },
+  // 标记 SDK 回调事件
+  closeCallback: {
+    name: 'onCloseCallback',
+    uniqueKey: 'closeCallback'
+  },
   eventCallback: {
     name: 'onEventCallback',
     uniqueKey: 'userEventCallback'
@@ -201,7 +206,7 @@ export var COMPONENT_CONTAINER_ID = 'ams-component-container';
 export var COMPONENT_SECTION_ID = 'ams-component-section';
 export var COMPONENT_IFRAME_TAG_ID = 'ams-checkout-component';
 export var COMPONENT_CLOSE_BLOCK_ID = 'asm-component-close-block';
-export var COMPONENT_CLOSE_MASK_ID = 'asm-component-mask-close-block';
+export var COMPONENT_CLOSE_MASK_BLOCK_ID = 'ams-component-mask-close-block';
 export var COMPONENT_RETENTION_ID = 'ams-component-retention';
 export var MOCKUP_ID = 'ams-component-mockup';
 export var LOADING_ID = 'ams-component-loading';

package/esm/foundation/core/index.d.ts

@@ -22,5 +22,6 @@ export declare class AntomSDKCore {
     getPaymentContext(): PaymentContext;
     destroy(): void;
     private handleBehaviorRender;
+    private handleClose;
     private cleanRender;
 }

package/esm/foundation/core/index.js

@@ -10,7 +10,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { DisplayTypeEnum } from "../../types";
+import { DisplayTypeEnum, eventCodeEnum } from "../../types";
 import { DisplayInfo } from "../index";
 import { v4 as uuid } from 'uuid';
 import { ServiceProvider } from "../service";
@@ -150,6 +150,18 @@ export var AntomSDKCore = /*#__PURE__*/function () {
           return _ref2.apply(this, arguments);
         };
       }());
+      eventCenter.listen(EVENT.closeCallback.name, function () {
+        var _options$onClose;
+        (_options$onClose = options.onClose) === null || _options$onClose === void 0 || _options$onClose.call(options);
+      });
+      eventCenter.listen(EVENT.eventCallback.name, function (data) {
+        var _options$onEventCallb;
+        (_options$onEventCallb = options.onEventCallback) === null || _options$onEventCallb === void 0 || _options$onEventCallb.call(options, data);
+      });
+      eventCenter.listen(EVENT.error.name, function (data) {
+        var _options$onError;
+        (_options$onError = options.onError) === null || _options$onError === void 0 || _options$onError.call(options, data);
+      });
 
       // execute additional logic from specified product
       if (this.productProcessors[sdkMetaData.productScene]) {
@@ -291,11 +303,7 @@ export var AntomSDKCore = /*#__PURE__*/function () {
           showRetentionPopup();
           return;
         } else {
-          _this2.cleanRender();
-          eventCenter.dispatchToApp({
-            event: EVENT.close.name,
-            data: {}
-          });
+          _this2.handleClose();
         }
       };
 
@@ -322,12 +330,8 @@ export var AntomSDKCore = /*#__PURE__*/function () {
         createRetentionPopup(platform, function () {
           hideRetentionPopup();
         }, function () {
-          eventCenter.dispatchToApp({
-            event: EVENT.close.name,
-            data: {}
-          });
           hideRetentionPopup();
-          _this2.cleanRender();
+          _this2.handleClose();
         });
         createMockup({
           platform: platform,
@@ -338,6 +342,19 @@ export var AntomSDKCore = /*#__PURE__*/function () {
         return;
       }
     }
+  }, {
+    key: "handleClose",
+    value: function handleClose() {
+      var eventCenter = ServiceProvider.getInstance(this.instanceId).getService('EventCenter');
+      eventCenter.emit(EVENT.closeCallback.name, {});
+      eventCenter.emit(EVENT.eventCallback.name, {
+        code: eventCodeEnum.SDK_PAYMENT_CANCEL,
+        result: {
+          result: {}
+        }
+      });
+      this.cleanRender();
+    }
   }, {
     key: "cleanRender",
     value: function cleanRender() {

package/esm/foundation/service/container/index.d.ts

@@ -24,7 +24,9 @@ export declare class ContainerService implements Service {
     startHideAnim(): void;
     private addCapabilityToEventCenter;
     private addCapabilityToApiBusManager;
+    private updateMaskCloseBtn;
     private handleSizeChanged;
     private handleAppHeartBeat;
     private changeCloseBtnVisibility;
+    private handleMaskCloseBtnShow;
 }

package/esm/foundation/service/container/index.js

@@ -11,7 +11,7 @@ import { DisplayTypeEnum } from "../../../types";
 import { createIframe, createPreloadIframe, startSizeChangeAnim } from "./utils";
 import { addInlineLoading, createInlineBaseElement } from "../../../component/component.inline.style";
 import { addPopupLoading, createBaseElement } from "../../../component/component.popup.style";
-import { COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CONTAINER_ID, ERRORMESSAGE, LOADING_ID, MOCKUP_ID } from "../../../constant";
+import { COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CLOSE_MASK_BLOCK_ID, COMPONENT_CONTAINER_ID, ERRORMESSAGE, LOADING_ID, MOCKUP_ID } from "../../../constant";
 import { ServiceProvider } from "../index";
 import { EVENT, TIMEOUT_WEB_APP_HEART_BEAT, TIME_DELAY_SEND_HEART_BEAT } from "../../../constant";
 import { PopupManager } from "./popup";
@@ -82,6 +82,8 @@ export var ContainerService = /*#__PURE__*/function () {
       }
       var container = document.getElementById(COMPONENT_CONTAINER_ID);
       if (container) container === null || container === void 0 || container.remove();
+      this.webApp = null;
+      this.eventCenter.cleanIFrames();
 
       // animation
       (_document$getElementB = document.getElementById("".concat(COMPONENT_CONTAINER_ID, "-").concat(displayInfo.platform, "-animation-style"))) === null || _document$getElementB === void 0 || _document$getElementB.remove();
@@ -204,6 +206,9 @@ export var ContainerService = /*#__PURE__*/function () {
       this.eventCenter.listen(EVENT.hideCloseButton.name, function () {
         _this2.changeCloseBtnVisibility(false);
       });
+      this.eventCenter.listen(EVENT.setMaskCloseButton.name, function (data) {
+        _this2.handleMaskCloseBtnShow(data);
+      });
       this.eventCenter.listen(EVENT.appHeartBeat.name, function () {
         _this2.handleAppHeartBeat();
       });
@@ -211,6 +216,21 @@ export var ContainerService = /*#__PURE__*/function () {
   }, {
     key: "addCapabilityToApiBusManager",
     value: function addCapabilityToApiBusManager() {}
+  }, {
+    key: "updateMaskCloseBtn",
+    value: function updateMaskCloseBtn(data) {
+      var maskCloseBtn = document.getElementById("".concat(COMPONENT_CLOSE_MASK_BLOCK_ID));
+      if (maskCloseBtn) {
+        if (this.displayInfo.platform === 'desktop') {
+          var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+          var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+          maskCloseBtn.style.top = "".concat((windowHeight - data.height) / 2 - 42, "px");
+          maskCloseBtn.style.right = "".concat((windowWidth - data.width) / 2 + 18, "px");
+        } else {
+          maskCloseBtn.style.bottom = "".concat(data.height + 2, "px");
+        }
+      }
+    }
   }, {
     key: "handleSizeChanged",
     value: function handleSizeChanged(data) {
@@ -239,6 +259,8 @@ export var ContainerService = /*#__PURE__*/function () {
         }
         // 关闭loading，保留蒙层
         this.dismissLoading();
+        // 更新弹窗关闭按钮位置
+        this.updateMaskCloseBtn(data);
       }
       if (this.displayInfo.type === DisplayTypeEnum.inline) {
         var _document$getElementB3;
@@ -293,6 +315,16 @@ export var ContainerService = /*#__PURE__*/function () {
         closeBlock === null || closeBlock === void 0 || closeBlock.classList.add("".concat(COMPONENT_CLOSE_BLOCK_ID, "-hidden"));
       }
     }
+  }, {
+    key: "handleMaskCloseBtnShow",
+    value: function handleMaskCloseBtnShow(data) {
+      var closeBlock = document.getElementById(COMPONENT_CLOSE_MASK_BLOCK_ID);
+      if ((data === null || data === void 0 ? void 0 : data.status) === 'show') {
+        closeBlock === null || closeBlock === void 0 || closeBlock.classList.remove("".concat(COMPONENT_CLOSE_MASK_BLOCK_ID, "-hidden"));
+      } else {
+        closeBlock === null || closeBlock === void 0 || closeBlock.classList.add("".concat(COMPONENT_CLOSE_MASK_BLOCK_ID, "-hidden"));
+      }
+    }
   }]);
   return ContainerService;
 }();

package/esm/foundation/service/event-center.d.ts

@@ -27,6 +27,10 @@ export declare class EventCenter implements Service {
      * @param domain - The domain of the app.
      */
     addIFrame(iframe: HTMLIFrameElement): void;
+    /**
+     * Cleans iframes when web app close
+     */
+    cleanIFrames(): void;
     removeIFrame(iframe: HTMLIFrameElement): void;
     /**
      * Handles messages received from the app.
@@ -42,8 +46,9 @@ export declare class EventCenter implements Service {
      * Listens to an event by adding a callback function.
      * @param name - The name of the event to listen for.
      * @param func - The callback function to execute when the event is emitted.
+     * @param isAppend - Append to event handlers as chain, default value is false
      */
-    listen(name: string, func: IListener): void;
+    listen(name: string, func: IListener, isAppend?: boolean): void;
     /**
      * Unsubscribes from an event. If a function is provided, only that function is removed.
      * @param name - The name of the event to unlisten to.

package/esm/foundation/service/event-center.js

@@ -72,6 +72,15 @@ export var EventCenter = /*#__PURE__*/function () {
         origin: getIframeOrigin(iframe)
       });
     }
+
+    /**
+     * Cleans iframes when web app close
+     */
+  }, {
+    key: "cleanIFrames",
+    value: function cleanIFrames() {
+      this.iframes = [];
+    }
   }, {
     key: "removeIFrame",
     value: function removeIFrame(iframe) {
@@ -99,11 +108,11 @@ export var EventCenter = /*#__PURE__*/function () {
       }
       var isJson = isJsonString(e.data);
       if (isJson) {
-        var _EventPayload = JSON.parse(e.data);
-        if (_EventPayload.name !== MessageName.APP_TO_SDK) {
+        var eventPayload = JSON.parse(e.data);
+        if (eventPayload.name !== MessageName.APP_TO_SDK || eventPayload.instanceId !== this.instanceId) {
           return;
         }
-        this._handleAppMessage(_EventPayload);
+        this._handleAppMessage(eventPayload);
       } else {
         console.error(ERRORMESSAGE.NOT_JSON_FORMAT);
       }
@@ -126,11 +135,13 @@ export var EventCenter = /*#__PURE__*/function () {
      * Listens to an event by adding a callback function.
      * @param name - The name of the event to listen for.
      * @param func - The callback function to execute when the event is emitted.
+     * @param isAppend - Append to event handlers as chain, default value is false
      */
   }, {
     key: "listen",
     value: function listen(name, func) {
-      var eventList = this.events.get(name) || [];
+      var isAppend = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      var eventList = isAppend ? this.events.get(name) || [] : [];
       eventList.push({
         func: func
       });

package/esm/index.d.ts

@@ -33,4 +33,5 @@ export declare class AMSEasyPay {
     private core;
     constructor(options: IoptionsParams);
     createComponent(params: IcreateComponent): void;
+    unmount(): void;
 }

package/esm/index.js

@@ -181,6 +181,11 @@ export var AMSEasyPay = /*#__PURE__*/function () {
         isAppWebview: params.isAppWebview
       });
     }
+  }, {
+    key: "unmount",
+    value: function unmount() {
+      this.core.destroy();
+    }
   }]);
   return AMSEasyPay;
 }();

package/esm/plugin/component/component.popup.style.js

@@ -5,10 +5,10 @@
  * 1. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE; and
  * 2. If applicable, the use of the Software is also subject to the terms and conditions of any non-disclosure agreement signed by you and the relevant Ant Group entity.
  */
-import { ANIMATION_TIME, closeImg, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CLOSE_MASK_ID, COMPONENT_CONTAINER_ID, COMPONENT_RETENTION_ID, COMPONENT_SECTION_ID, LOADING_ID, MOCKUP_ID } from "../../constant";
+import { ANIMATION_TIME, closeImg, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CLOSE_MASK_BLOCK_ID, COMPONENT_CONTAINER_ID, COMPONENT_RETENTION_ID, COMPONENT_SECTION_ID, LOADING_ID, MOCKUP_ID } from "../../constant";
 import { PlatformEnum } from "../../types";
 import { addSetFontSizeEvent, amsSetSize, getDesignFontSize } from "../../util";
-var componentCss = ".ams-component-container-mobile {\n  width: 100%;\n  height: 1px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n}\n.ams-component-container-mobile-animation{\n  animation: ams-component-container-slide-in 0.3s ease-in-out;\n}\n\n.ams-component-section-desktop {\n  font-size: 0;\n}\n\n.ams-component-container-hidden-mobile {\n  width: 100%;\n  height: 0px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  background-color: transparent;\n  border-radius: 12px 12px 0 0;\n  animation: ams-component-container-slide-out 0.26s ease-in forwards;\n  overflow: hidden;\n}\n\n.ams-component-section-mobile {\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n  font-size: 0;\n  height: 100%;\n}\n\n.ams-component-container-desktop {\n  display: block;\n  width: 672px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 12px;\n  overflow: hidden;\n  transform-origin: 50% 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-container-desktop-animation{\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n@keyframes ams-component-container-zoom-out {\n  0% {\n    transform: translate(-50%, -50%) scale(1);\n    -webkit-transform: translate(-50%, -50%) scale(1);\n    opacity: 1\n  }\n\n  100% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.4);\n    -webkit-transform: translate(-50%, -50%) scale(0.4);\n  }\n}\n\n@keyframes ams-component-container-zoom-in {\n  0% {\n    transform: translate(-50%, -50%) scale(0.4);\n    opacity: 0\n  }\n\n  100% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.ams-component-container-hidden-desktop {\n  display: block;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 8px;\n  overflow: hidden;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  animation-fill-mode: forwards;\n  transform-origin: 50% 50%;\n}\n\n.ams-component-loading {\n  width: 0.8em;\n  height:0.8em;\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 8px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.ams-component-loading .line {\n  width: 40px;\n  height: 40px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-loading .line div {\n  position: absolute;\n  left: 17.67px;\n  top: 0;\n  width: 5.33px;\n  height: 40px;\n}\n\n.ams-component-loading .line div:before,\n.ams-component-loading .line div:after {\n  content: '';\n  display: block;\n  height: 13.33px;\n  background: #fcfcfc;\n  border-radius: 5.3px;\n}\n.ams-component-loading .line div:after {\n  margin-top: 13.33px;\n}\n\n.ams-component-loading .line div:nth-child(2) {\n  -webkit-transform: rotate(45deg);\n}\n\n.ams-component-loading .line div:nth-child(3) {\n  -webkit-transform: rotate(90deg);\n}\n\n.ams-component-loading .line div:nth-child(4) {\n  -webkit-transform: rotate(135deg);\n}\n\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes load {\n  0% {\n      opacity: 0;\n  }\n\n  100% {\n      opacity: 1;\n  }\n}\n\n.ams-component-loading .line div:nth-child(1):before {\n  -webkit-animation: load 1s linear 0s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):before {\n  -webkit-animation: load 1s linear 0.125s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):before {\n  -webkit-animation: load 1s linear 0.25s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):before {\n  -webkit-animation: load 1s linear 0.375s infinite;\n}\n\n.ams-component-loading .line div:nth-child(1):after {\n  -webkit-animation: load 1s linear 0.5s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):after {\n  -webkit-animation: load 1s linear 0.675s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):after {\n  -webkit-animation: load 1s linear 0.75s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):after {\n  -webkit-animation: load 1s linear 0.875s infinite;\n}\n\n.ams-component-loading-logo {\n  width: 0.44em;\n  height: 0.44em;\n  -webkit-transform:rotate(360deg);\n  transform:rotate(360deg);\n  -webkit-transition:-webkit-transform 1s linear;\n  transition:transform 1s linear;\n  animation: ams-component-loading-logo 1s linear infinite;\n}\n\n.asm-component-close-block-desktop {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n}\n\n.asm-component-close-block-mobile {\n  position: absolute;\n  width: 0.4em;\n  height: 0.4em;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n  z-index: 1009;\n}\n\n.asm-component-close-block-hidden {\n  width: 0px !important;\n  height: 0px !important;\n  visibility: hidden;\n}\n\n.asm-component-close-block-btn-desktop {\n  width: 11px;\n  height: 11px;\n  object-fit: fill;\n  position: absolute;\n  right: 18.7px;\n  top: 26.7px;\n}\n\n.asm-component-close-block-btn-mobile {\n  width: 0.11em;\n  height: 0.11em;\n  object-fit: fill;\n  position: absolute;\n  right: 0.147em;\n  top: 0.167em;\n}\n\n.asm-component-mask-close-block-desktop {\n position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 18px;\n  top: 10px;\n  cursor: pointer;\n  }\n  \n.asm-component-mask-close-block-mobile {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 18px;\n  bottom: 0;\n  cursor: pointer;\n  z-index: 1012;\n}\n\n.asm-component-mask-close-block-hidden {\n  width: 0px !important;\n  height: 0px !important;\n  visibility: hidden;\n}\n\n.asm-component-mask-close-block-btn {\n   width: 24px;\n  height: 24px;\n  object-fit: fill;\n  position: absolute;\n  right: 8px;\n  top: 8px;\n  }\n\n.ams-component-container-opacity{\n  opacity: 1;\n}\n\n.ams-component-container-opacity:after{\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n  content: \"\";\n  z-index: 1010;\n  background-color: rgba(0, 0, 0, 0.35);\n  border-radius: 12px 12px 0 0;\n}\n\n#ams-component-retention {\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  transform-origin: 50%;\n  height: auto;\n  display: none;\n  z-index: 1009;\n}\n\n.ams-component-retention-show {\n  display: flex !important;\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n.ams-component-retention-hidden {\n  display: flex !important;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  -webkit-animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  animation-fill-mode: forwards;\n  -webkit-animation-fill-mode: forwards;\n}\n\n.ams-component-retention-mobile {\n  width: 294px;\n  border-radius: 12px;\n  padding: 24px 0;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-desktop {\n  width: 544px;\n  border-radius: 12px;\n  padding: 32px;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n@media screen and (max-width: 300px) {\n  .ams-component-retention-mobile {\n      transform: translate(-50%, -50%) scale(0.8);\n  }\n}\n\n.ams-component-retention-title-mobile {\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-title-desktop {\n  text-align: left;\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n}\n\n.ams-component-retention-sub-title-mobile {\n  width: 100%;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 8px;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-sub-title-desktop {\n  text-align: left;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 10px;\n}\n\n.ams-component-retention-btn-block-mobile {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  margin-top: 24px;\n  padding: 0 24px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-btn-block-desktop {\n  width: 100%;\n  margin-top: 24px;\n}\n\n#ams-component-retention-remain {\n  background: #0079FF;\n  border-radius: 100px;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n  color: #FFFFFF;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ams-component-retention-remain-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  padding: 0 6px;\n}\n\n.ams-component-retention-remain-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  cursor: pointer;\n  padding: 0 16px;\n  max-width: 225px;\n  min-width: 159px;\n}\n\n#ams-component-retention-leave {\n  border-radius: 100px;\n  border: 1px solid #0079FF;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ams-component-retention-leave-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  margin-top: 12px;\n  padding: 0 6px;\n}\n\n.ams-component-retention-leave-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  margin-right: 16px;\n  cursor: pointer;\n  padding: 0 16px;\n  max-width: 225px;\n  min-width: 144px;\n}\n.".concat(MOCKUP_ID, "-hidden{\nanimation: ").concat(MOCKUP_ID, "-opacity 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes ").concat(MOCKUP_ID, "-opacity {\n  0% {\n      opacity: 1;\n  }\n\n  100% {\n      opacity: 0;\n  }\n}\n\n");
+var componentCss = ".ams-component-container-mobile {\n  width: 100%;\n  height: 1px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n}\n.ams-component-container-mobile-animation{\n  animation: ams-component-container-slide-in 0.3s ease-in-out;\n}\n\n.ams-component-section-desktop {\n  font-size: 0;\n}\n\n.ams-component-container-hidden-mobile {\n  width: 100%;\n  height: 0px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  background-color: transparent;\n  border-radius: 12px 12px 0 0;\n  animation: ams-component-container-slide-out 0.26s ease-in forwards;\n  overflow: hidden;\n}\n\n.ams-component-section-mobile {\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n  font-size: 0;\n  height: 100%;\n}\n\n.ams-component-container-desktop {\n  display: block;\n  width: 672px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 12px;\n  overflow: hidden;\n  transform-origin: 50% 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-container-desktop-animation{\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n@keyframes ams-component-container-zoom-out {\n  0% {\n    transform: translate(-50%, -50%) scale(1);\n    -webkit-transform: translate(-50%, -50%) scale(1);\n    opacity: 1\n  }\n\n  100% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.4);\n    -webkit-transform: translate(-50%, -50%) scale(0.4);\n  }\n}\n\n@keyframes ams-component-container-zoom-in {\n  0% {\n    transform: translate(-50%, -50%) scale(0.4);\n    opacity: 0\n  }\n\n  100% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.ams-component-container-hidden-desktop {\n  display: block;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 8px;\n  overflow: hidden;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  animation-fill-mode: forwards;\n  transform-origin: 50% 50%;\n}\n\n.ams-component-loading {\n  width: 0.8em;\n  height:0.8em;\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 8px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.ams-component-loading .line {\n  width: 40px;\n  height: 40px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-loading .line div {\n  position: absolute;\n  left: 17.67px;\n  top: 0;\n  width: 5.33px;\n  height: 40px;\n}\n\n.ams-component-loading .line div:before,\n.ams-component-loading .line div:after {\n  content: '';\n  display: block;\n  height: 13.33px;\n  background: #fcfcfc;\n  border-radius: 5.3px;\n}\n.ams-component-loading .line div:after {\n  margin-top: 13.33px;\n}\n\n.ams-component-loading .line div:nth-child(2) {\n  -webkit-transform: rotate(45deg);\n}\n\n.ams-component-loading .line div:nth-child(3) {\n  -webkit-transform: rotate(90deg);\n}\n\n.ams-component-loading .line div:nth-child(4) {\n  -webkit-transform: rotate(135deg);\n}\n\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes load {\n  0% {\n      opacity: 0;\n  }\n\n  100% {\n      opacity: 1;\n  }\n}\n\n.ams-component-loading .line div:nth-child(1):before {\n  -webkit-animation: load 1s linear 0s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):before {\n  -webkit-animation: load 1s linear 0.125s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):before {\n  -webkit-animation: load 1s linear 0.25s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):before {\n  -webkit-animation: load 1s linear 0.375s infinite;\n}\n\n.ams-component-loading .line div:nth-child(1):after {\n  -webkit-animation: load 1s linear 0.5s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):after {\n  -webkit-animation: load 1s linear 0.675s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):after {\n  -webkit-animation: load 1s linear 0.75s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):after {\n  -webkit-animation: load 1s linear 0.875s infinite;\n}\n\n.ams-component-loading-logo {\n  width: 0.44em;\n  height: 0.44em;\n  -webkit-transform:rotate(360deg);\n  transform:rotate(360deg);\n  -webkit-transition:-webkit-transform 1s linear;\n  transition:transform 1s linear;\n  animation: ams-component-loading-logo 1s linear infinite;\n}\n\n.asm-component-close-block-desktop {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n}\n\n.asm-component-close-block-mobile {\n  position: absolute;\n  width: 0.4em;\n  height: 0.4em;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n  z-index: 1009;\n}\n\n.asm-component-close-block-hidden {\n  width: 0px !important;\n  height: 0px !important;\n  visibility: hidden;\n}\n\n.asm-component-close-block-btn-desktop {\n  width: 11px;\n  height: 11px;\n  object-fit: fill;\n  position: absolute;\n  right: 18.7px;\n  top: 26.7px;\n}\n\n.asm-component-close-block-btn-mobile {\n  width: 0.11em;\n  height: 0.11em;\n  object-fit: fill;\n  position: absolute;\n  right: 0.147em;\n  top: 0.167em;\n}\n\n.ams-component-mask-close-block-desktop {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 18px;\n  top: 10px;\n  cursor: pointer;\n  z-index: 1013;\n}\n  \n.ams-component-mask-close-block-mobile {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 18px;\n  cursor: pointer;\n  z-index: 1012;\n}\n\n.ams-component-mask-close-block-hidden {\n  width: 0px !important;\n  height: 0px !important;\n  visibility: hidden;\n}\n\n.ams-component-mask-close-block-btn {\n  width: 24px;\n  height: 24px;\n  object-fit: fill;\n  position: absolute;\n  right: 8px;\n  top: 8px;\n}\n\n.ams-component-container-opacity{\n  opacity: 1;\n}\n\n.ams-component-container-opacity:after{\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n  content: \"\";\n  z-index: 1010;\n  background-color: rgba(0, 0, 0, 0.35);\n  border-radius: 12px 12px 0 0;\n}\n\n#ams-component-retention {\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  transform-origin: 50%;\n  height: auto;\n  display: none;\n  z-index: 1009;\n}\n\n.ams-component-retention-show {\n  display: flex !important;\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n.ams-component-retention-hidden {\n  display: flex !important;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  -webkit-animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  animation-fill-mode: forwards;\n  -webkit-animation-fill-mode: forwards;\n}\n\n.ams-component-retention-mobile {\n  width: 294px;\n  border-radius: 12px;\n  padding: 24px 0;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-desktop {\n  width: 544px;\n  border-radius: 12px;\n  padding: 32px;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n@media screen and (max-width: 300px) {\n  .ams-component-retention-mobile {\n      transform: translate(-50%, -50%) scale(0.8);\n  }\n}\n\n.ams-component-retention-title-mobile {\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-title-desktop {\n  text-align: left;\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n}\n\n.ams-component-retention-sub-title-mobile {\n  width: 100%;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 8px;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-sub-title-desktop {\n  text-align: left;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 10px;\n}\n\n.ams-component-retention-btn-block-mobile {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  margin-top: 24px;\n  padding: 0 24px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-btn-block-desktop {\n  width: 100%;\n  margin-top: 24px;\n}\n\n#ams-component-retention-remain {\n  background: #0079FF;\n  border-radius: 100px;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n  color: #FFFFFF;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ams-component-retention-remain-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  padding: 0 6px;\n}\n\n.ams-component-retention-remain-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  cursor: pointer;\n  padding: 0 16px;\n  max-width: 225px;\n  min-width: 159px;\n}\n\n#ams-component-retention-leave {\n  border-radius: 100px;\n  border: 1px solid #0079FF;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ams-component-retention-leave-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  margin-top: 12px;\n  padding: 0 6px;\n}\n\n.ams-component-retention-leave-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  margin-right: 16px;\n  cursor: pointer;\n  padding: 0 16px;\n  max-width: 225px;\n  min-width: 144px;\n}\n.".concat(MOCKUP_ID, "-hidden{\nanimation: ").concat(MOCKUP_ID, "-opacity 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes ").concat(MOCKUP_ID, "-opacity {\n  0% {\n      opacity: 1;\n  }\n\n  100% {\n      opacity: 0;\n  }\n}\n\n");
 export var componentAddCSS = function componentAddCSS() {
   var style = document.createElement('style');
   style.type = 'text/css';
@@ -49,16 +49,15 @@ export var createCloseBtn = function createCloseBtn(platform, closeBtnFunc) {
 };
 export var createMaskCloseButton = function createMaskCloseButton(platform, closeBtnFunc) {
   var clickEventName = platform === PlatformEnum.mobile ? 'touchend' : 'click';
-  var container = document.getElementById(MOCKUP_ID);
-  var closeBtnHTML = "<div class='".concat(COMPONENT_CLOSE_MASK_ID, "-btn'>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.5673 4.49829L19.424 4.36736L19.3027 4.27821L19.1702 4.19928C18.5417 3.86236 17.7834 3.96479 17.2841 4.46433L11.9986 9.7512L6.73275 4.4853L6.67045 4.42539C6.01464 3.85742 5.07067 3.85791 4.49751 4.42864L4.38538 4.54934L4.27757 4.69333L4.19868 4.8259C3.862 5.45451 3.96432 6.21286 4.46349 6.71225L9.75274 12.0006L4.42833 17.3276C3.85705 17.9874 3.85754 18.9315 4.42789 19.5048L4.54854 19.6169L4.6925 19.7248L4.82504 19.8038C5.45353 20.1407 6.21179 20.0383 6.71105 19.5388L11.9986 14.2489L17.321 19.574C17.9915 20.1551 18.9356 20.1352 19.5317 19.5388L19.6383 19.4206L19.7338 19.2891C20.1447 18.6603 20.0683 17.8276 19.5316 17.2907L14.2454 12.0016L19.5077 6.73713L19.605 6.63362C20.1455 6.00703 20.1297 5.06361 19.5673 4.49829Z\" fill=\"#EEEEEE\"/>\n</svg>\n  </div>");
+  var closeBtnHTML = "<div class='".concat(COMPONENT_CLOSE_MASK_BLOCK_ID, "-btn'>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.5673 4.49829L19.424 4.36736L19.3027 4.27821L19.1702 4.19928C18.5417 3.86236 17.7834 3.96479 17.2841 4.46433L11.9986 9.7512L6.73275 4.4853L6.67045 4.42539C6.01464 3.85742 5.07067 3.85791 4.49751 4.42864L4.38538 4.54934L4.27757 4.69333L4.19868 4.8259C3.862 5.45451 3.96432 6.21286 4.46349 6.71225L9.75274 12.0006L4.42833 17.3276C3.85705 17.9874 3.85754 18.9315 4.42789 19.5048L4.54854 19.6169L4.6925 19.7248L4.82504 19.8038C5.45353 20.1407 6.21179 20.0383 6.71105 19.5388L11.9986 14.2489L17.321 19.574C17.9915 20.1551 18.9356 20.1352 19.5317 19.5388L19.6383 19.4206L19.7338 19.2891C20.1447 18.6603 20.0683 17.8276 19.5316 17.2907L14.2454 12.0016L19.5077 6.73713L19.605 6.63362C20.1455 6.00703 20.1297 5.06361 19.5673 4.49829Z\" fill=\"#EEEEEE\"/>\n</svg>\n  </div>");
   var closeBlock = document.createElement('div');
-  closeBlock.classList.add("".concat(COMPONENT_CLOSE_MASK_ID, "-").concat(platform), "".concat(COMPONENT_CLOSE_MASK_ID, "-hidden"));
-  closeBlock.id = COMPONENT_CLOSE_MASK_ID;
+  closeBlock.classList.add("".concat(COMPONENT_CLOSE_MASK_BLOCK_ID, "-").concat(platform), "".concat(COMPONENT_CLOSE_MASK_BLOCK_ID, "-hidden"));
+  closeBlock.id = COMPONENT_CLOSE_MASK_BLOCK_ID;
   closeBlock.innerHTML = closeBtnHTML;
   closeBlock.addEventListener(clickEventName, function () {
     closeBtnFunc();
   });
-  if (container) container.appendChild(closeBlock);
+  document.body.appendChild(closeBlock);
 };
 
 /**

package/esm/plugin/component/index.js

@@ -19,7 +19,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { v4 as uuid } from 'uuid';
 import { sdkVersion } from "../../config";
-import { COMPONENTPLUGINID, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CLOSE_MASK_ID, COMPONENT_CONTAINER_ID, COMPONENT_RETENTION_ID, COMPONENT_SECTION_ID, ERRORMESSAGE, EVENT, LISTENER_PREFIX, LOADING_ID, LOADTIME_LIMIT, MOCKUP_ID, POPUP_LOADTIME_LOG_LIMIT, TIMEOUT_WEB_APP_HEART_BEAT, TIME_DELAY_SEND_HEART_BEAT } from "../../constant";
+import { COMPONENTPLUGINID, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CLOSE_MASK_BLOCK_ID, COMPONENT_CONTAINER_ID, COMPONENT_RETENTION_ID, COMPONENT_SECTION_ID, ERRORMESSAGE, EVENT, LISTENER_PREFIX, LOADING_ID, LOADTIME_LIMIT, MOCKUP_ID, POPUP_LOADTIME_LOG_LIMIT, TIMEOUT_WEB_APP_HEART_BEAT, TIME_DELAY_SEND_HEART_BEAT } from "../../constant";
 import { queryPaymentInfo, submitPayInfo } from "../../service";
 import { ComponentSignEnum, eventCodeEnum, MessageName, PlatformEnum, ProductSceneEnum, RedirectType, DisplayTypeEnum, TargetEnum } from "../../types";
 import { getType, isJsonString, isPC } from "../../util";
@@ -1374,12 +1374,17 @@ var ComponentApp = /*#__PURE__*/function () {
   }, {
     key: "updateMaskCloseBtn",
     value: function updateMaskCloseBtn(data) {
-      var _document$getElementB3;
-      var maskCloseBtn = document.getElementById(COMPONENT_CLOSE_MASK_ID);
+      var maskCloseBtn = document.getElementById("".concat(COMPONENT_CLOSE_MASK_BLOCK_ID));
       if (maskCloseBtn) {
-        maskCloseBtn.style.bottom = "".concat(data.height + 2, "px");
+        if (this.platform === 'desktop') {
+          var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+          var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+          maskCloseBtn.style.top = "".concat((windowHeight - data.height) / 2 - 42, "px");
+          maskCloseBtn.style.right = "".concat((windowWidth - data.width) / 2 + 18, "px");
+        } else {
+          maskCloseBtn.style.bottom = "".concat(data.height + 2, "px");
+        }
       }
-      (_document$getElementB3 = document.getElementById(LOADING_ID)) === null || _document$getElementB3 === void 0 || _document$getElementB3.remove();
     }
   }, {
     key: "handleSizeChanged",
@@ -1425,11 +1430,12 @@ var ComponentApp = /*#__PURE__*/function () {
         }
         // 关闭loading，保留蒙层
         this.dismissLoadingFunc();
+        // 更新弹窗关闭按钮位置
+        this.updateMaskCloseBtn(data.context.data);
       }
-      this.updateMaskCloseBtn(data.context.data);
       if (this._renderDisplayType === DisplayTypeEnum.inline) {
-        var _document$getElementB4;
-        (_document$getElementB4 = document.getElementById(LOADING_ID)) === null || _document$getElementB4 === void 0 || _document$getElementB4.remove();
+        var _document$getElementB3;
+        (_document$getElementB3 = document.getElementById(LOADING_ID)) === null || _document$getElementB3 === void 0 || _document$getElementB3.remove();
         this.app.style.height = "".concat(data.context.data.height, "px");
       }
     }
@@ -1658,11 +1664,11 @@ var ComponentApp = /*#__PURE__*/function () {
   }, {
     key: "handleMaskCloseBtnShow",
     value: function handleMaskCloseBtnShow(data) {
-      var closeBlock = document.getElementById(COMPONENT_CLOSE_MASK_ID);
-      if ((data === null || data === void 0 ? void 0 : data.status) === "show") {
-        closeBlock === null || closeBlock === void 0 || closeBlock.classList.remove("".concat(COMPONENT_CLOSE_MASK_ID, "-hidden"));
+      var closeBlock = document.getElementById(COMPONENT_CLOSE_MASK_BLOCK_ID);
+      if ((data === null || data === void 0 ? void 0 : data.status) === 'show') {
+        closeBlock === null || closeBlock === void 0 || closeBlock.classList.remove("".concat(COMPONENT_CLOSE_MASK_BLOCK_ID, "-hidden"));
       } else {
-        closeBlock === null || closeBlock === void 0 || closeBlock.classList.add("".concat(COMPONENT_CLOSE_MASK_ID, "-hidden"));
+        closeBlock === null || closeBlock === void 0 || closeBlock.classList.add("".concat(COMPONENT_CLOSE_MASK_BLOCK_ID, "-hidden"));
       }
     }
 
@@ -1820,10 +1826,10 @@ var ComponentApp = /*#__PURE__*/function () {
   }, {
     key: "cleanContainer",
     value: function cleanContainer() {
-      var _document$getElementB5,
+      var _document$getElementB4,
         _this10 = this;
       var immediately = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      (_document$getElementB5 = document.getElementById(LOADING_ID)) === null || _document$getElementB5 === void 0 || _document$getElementB5.remove();
+      (_document$getElementB4 = document.getElementById(LOADING_ID)) === null || _document$getElementB4 === void 0 || _document$getElementB4.remove();
       this.hideComponentAnimation();
       var mockup = document.getElementById(MOCKUP_ID);
       mockup === null || mockup === void 0 || mockup.classList.add("".concat(MOCKUP_ID, "-hidden"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alipay/ams-checkout",
-  "version": "0.0.1732691889-dev.1",
+  "version": "0.0.1732691889-dev.11",
   "description": "",
   "author": "",
   "main": "esm/index.js",