{"id":115478,"date":"2025-09-29T14:28:30","date_gmt":"2025-09-29T06:28:30","guid":{"rendered":"https:\/\/vertu.com\/?page_id=115478"},"modified":"2025-10-16T22:39:48","modified_gmt":"2025-10-16T14:39:48","slug":"signature-privileges","status":"publish","type":"page","link":"https:\/\/legacy.vertu.com\/ar\/signature-privileges\/","title":{"rendered":"Signature Privileges"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n \r\n \r\n \r\n Document<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/vertu.com\/wp-content\/plugins\/elementor\/assets\/lib\/swiper\/v8\/css\/swiper.min.css?ver=8.4.5\" \/>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n font-family: AkzidenzGroteskProRegular !important;\r\n }\r\n @font-face {\r\n font-family: \"EngraversGothic\";\r\n font-style: normal;\r\n font-weight: normal;\r\n font-display: auto;\r\n src: url(\"https:\/\/vertu-website-oss.vertu.com\/2024\/06\/EngraversGothicBTRegular_Original.ttf\")\r\n format(\"truetype\");\r\n }\r\n @font-face {\r\n font-family: \"EngraversGothicW01-Bold\";\r\n font-style: normal;\r\n font-weight: normal;\r\n font-display: auto;\r\n src: url(\"https:\/\/vertu-website-oss.vertu.com\/2024\/06\/EngraversGothicBTRegular_Original.ttf\")\r\n format(\"truetype\");\r\n }\r\n @font-face {\r\n font-family: \"AkzidenzGroteskProRegular\";\r\n font-style: normal;\r\n font-weight: normal;\r\n font-display: auto;\r\n src: url(\"https:\/\/vertu-website-oss.vertu.com\/2024\/06\/AkzidenzGroteskProRegular_Original.ttf\")\r\n format(\"truetype\");\r\n }\r\n body {\r\n overflow-x: hidden;\r\n }\r\n .row {\r\n position: fixed;\r\n top: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background: #fff;\r\n box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);\r\n padding: 10px;\r\n opacity: 0.1;\r\n transition: all 0.3s ease;\r\n z-index: 1000;\r\n display: none;\r\n }\r\n .row:hover {\r\n opacity: 1;\r\n }\r\n .row-title {\r\n text-align: center;\r\n font-size: 16px;\r\n font-weight: bold;\r\n margin-bottom: 10px;\r\n }\r\n\r\n #serach-content {\r\n display: flex;\r\n color: #000;\r\n opacity: 0;\r\n transform: translateY(30px);\r\n animation: contentSlideIn 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s\r\n forwards;\r\n }\r\n\r\n #serach-content > div {\r\n flex: 1;\r\n height: 900px;\r\n }\r\n\r\n .initial-loading {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(5px);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 9999;\r\n text-align: center;\r\n width: 100%;\r\n height: 100%;\r\n min-height: 700px;\r\n opacity: 0;\r\n display: none;\r\n }\r\n\r\n .vertu-loader {\r\n margin-bottom: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n animation: pulse 1.5s ease-in-out infinite;\r\n transform: scale(1.2);\r\n }\r\n\r\n .main-v {\r\n width: 120px;\r\n height: 60px;\r\n max-width: 100%;\r\n }\r\n\r\n .v-path {\r\n fill: none;\r\n stroke: #000000;\r\n stroke-width: 1.5;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n animation: drawPath 2s ease-in-out infinite;\r\n stroke-dasharray: 0 3000;\r\n stroke-dashoffset: 0;\r\n filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.1));\r\n }\r\n\r\n @keyframes drawPath {\r\n 0% {\r\n stroke-dasharray: 0 3000;\r\n stroke-dashoffset: 0;\r\n opacity: 0.4;\r\n }\r\n 30% {\r\n stroke-dasharray: 1500 1500;\r\n stroke-dashoffset: 0;\r\n opacity: 0.8;\r\n }\r\n 60% {\r\n stroke-dasharray: 3000 0;\r\n stroke-dashoffset: 0;\r\n opacity: 1;\r\n }\r\n\r\n 70% {\r\n stroke-dasharray: 3000 0;\r\n stroke-dashoffset: 0;\r\n opacity: 1;\r\n }\r\n 100% {\r\n stroke-dasharray: 0 3000;\r\n stroke-dashoffset: -3000;\r\n opacity: 0.4;\r\n }\r\n }\r\n\r\n @keyframes pulse {\r\n 0%,\r\n 100% {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n 50% {\r\n transform: scale(1.03);\r\n opacity: 0.9;\r\n }\r\n }\r\n\r\n .tip-img img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .tip-img img:hover {\r\n transform: scale(1.02);\r\n }\r\n\r\n .opr-content {\r\n width: 100%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n opacity: 0;\r\n transform: translateX(50px) scale(0.95);\r\n animation: oprSlideIn 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s\r\n forwards;\r\n }\r\n\r\n .opr-content .opr-content-item {\r\n opacity: 0;\r\n transform: translateY(40px);\r\n animation: oprItemSlideIn 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.9s\r\n forwards;\r\n }\r\n .opr-content .opr-content-item {\r\n width: 450px;\r\n }\r\n .opr-input-search .opr-title {\r\n font-size: 36px;\r\n font-weight: 700;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: titleSlideIn 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.1s\r\n forwards;\r\n text-align: center;\r\n }\r\n .opr-input-search .opr-desc {\r\n font-size: 22px;\r\n margin: 20px auto 70px;\r\n width: 440px;\r\n text-align: center;\r\n opacity: 0;\r\n transform: translateY(15px);\r\n animation: descSlideIn 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.3s\r\n forwards;\r\n }\r\n .opr-input-search .opr-sub-title {\r\n font-size: 24px;\r\n font-weight: 700;\r\n text-align: center;\r\n opacity: 0;\r\n transform: translateY(15px);\r\n animation: subTitleSlideIn 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.5s\r\n forwards;\r\n }\r\n .opr-input-search .opr-sub-desc {\r\n font-size: 20px;\r\n color: #7e7f83;\r\n text-align: center;\r\n width: max-content;\r\n margin: 10px auto 20px;\r\n opacity: 0;\r\n transform: translateY(10px);\r\n animation: subDescSlideIn 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.7s\r\n forwards;\r\n }\r\n .opr-input-search .opr-input {\r\n width: 400px;\r\n height: 50px;\r\n margin: 0 auto;\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n opacity: 0;\r\n transform: translateY(25px) scale(0.95);\r\n animation: inputSlideIn 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.9s\r\n forwards;\r\n }\r\n .opr-input-search .opr-input input {\r\n height: 50px;\r\n border: 2px solid #000;\r\n transition: all 0.3s ease;\r\n padding: 0 16px;\r\n flex: 1;\r\n border-top-left-radius: 5px;\r\n border-bottom-left-radius: 5px;\r\n outline: none;\r\n }\r\n .opr-input-search .opr-input input:focus {\r\n border-color: #000!important;\r\n }\r\n .opr-input-search .opr-input input::placeholder {\r\n font-size: 16px;\r\n color: #000;\r\n }\r\n .opr-input-search .opr-verify-btn {\r\n width: 120px;\r\n height: 50px;\r\n border-top-right-radius: 5px;\r\n border-bottom-right-radius: 5px;\r\n background: #000;\r\n text-align: center;\r\n line-height: 50px;\r\n color: #fff;\r\n cursor: pointer;\r\n font-size: 16px;\r\n font-weight: 500;\r\n }\r\n .opr-input-search .opr-verify-btn:hover {\r\n background: rgba(0, 0, 0, 0.8);\r\n }\r\n .opr-split {\r\n width: 400px;\r\n height: 1px;\r\n background: #7e7f83;\r\n margin: 50px auto;\r\n position: relative;\r\n }\r\n .opr-split span {\r\n font-size: 14px;\r\n color: #7e7f83;\r\n padding: 0 10px;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n background: #fff;\r\n }\r\n .opr-qrcode-search {\r\n width: 425px;\r\n height: 100%;\r\n background: #fff;\r\n margin: 0 auto;\r\n opacity: 0;\r\n transform: translateY(30px) scale(0.9);\r\n animation: qrSectionSlideIn 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)\r\n 2.1s forwards;\r\n }\r\n .opr-qrcode-search .opr-qrcode-title {\r\n font-size: 24px;\r\n font-weight: 700;\r\n text-align: center;\r\n margin: 50px auto 10px;\r\n }\r\n .opr-qrcode-search .opr-qrcode-desc {\r\n width: 440px;\r\n font-size: 20px;\r\n color: #7e7f83;\r\n text-align: center;\r\n }\r\n .opr-qrcode-box {\r\n width: 126px;\r\n height: 126px;\r\n margin: 20px auto 0px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n cursor: pointer;\r\n border: 2px solid #000;\r\n border-radius: 6px;\r\n background: #F5F5F7;\r\n }\r\n .opr-qrcode-box #qrcode {\r\n width: 120px;\r\n height: 120px;\r\n display: flex!important;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n \/* Detail Bottom Swiper \u6837\u5f0f *\/\r\n .detail-bottom-content {\r\n width: 100%;\r\n height: 400px;\r\n margin: 0 auto;\r\n position: relative;\r\n }\r\n\r\n .detail-bottom-content .detail-bottom-content-title {\r\n font-size: 40px;\r\n text-align: center;\r\n background: linear-gradient(180deg, #000 0%, #666 100%);\r\n background-clip: text;\r\n margin-bottom: 50px;\r\n }\r\n\r\n .detail-bottom-swiper {\r\n width: 1600px;\r\n height: 100%;\r\n position: relative;\r\n overflow: hidden;\r\n margin: 0 auto;\r\n }\r\n\r\n #detail-content {\r\n display: none;\r\n flex-direction: column;\r\n gap: 100px;\r\n padding: 0 0 100px;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* \u9876\u90e8\u6a2a\u5e45 *\/\r\n .detail-top-banner {\r\n width: 100%;\r\n min-height: 900px;\r\n background: #000 url(\"https:\/\/vertu-website-oss.vertu.com\/2025\/10\/\u5fae\u4fe1\u56fe\u7247_20250929183408-scaled.webp\");\r\n position: relative;\r\n padding: 80px 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-start;\r\n opacity: 0;\r\n transform: translateY(24px) scale(1.02);\r\n filter: blur(6px) saturate(0.92);\r\n will-change: transform, opacity, filter;\r\n background-size: contain;\r\n background-position-x: center;\r\n background-position-y: bottom;\r\n background-repeat: no-repeat;\r\n }\r\n\r\n .detail-top-banner .banner-card {\r\n padding: 18px 22px;\r\n border-radius: 6px;\r\n max-width: 658px;\r\n color: #eee;\r\n text-align: center;\r\n }\r\n\r\n .detail-top-banner .banner-title {\r\n font-size: 40px;\r\n background: linear-gradient(131deg, #ead5b2 7.75%, #b99474 91.37%);\r\n background-clip: text;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n margin-bottom: 10px;\r\n font-weight: 700;\r\n }\r\n\r\n .detail-top-banner .banner-desc {\r\n font-size: 20px;\r\n color: #A6AAB5;\r\n margin: 20px 0;\r\n }\r\n\r\n .detail-top-banner .banner-sub-desc {\r\n font-size: 20px;\r\n color: #fff;\r\n }\r\n\r\n \/* \u9876\u90e8\u6a2a\u5e45\u51fa\u573a\u52a8\u753b *\/\r\n .detail-top-banner.show {\r\n animation: bannerReveal 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) both;\r\n }\r\n\r\n .detail-top-banner.show .banner-card {\r\n opacity: 0;\r\n transform: translateY(16px) scale(0.98);\r\n animation: bannerCardFloat 0.9s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1)\r\n both;\r\n }\r\n\r\n @keyframes bannerReveal {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(24px) scale(1.02);\r\n filter: blur(6px) saturate(0.92);\r\n }\r\n 60% {\r\n opacity: 0.95;\r\n transform: translateY(0) scale(1);\r\n filter: blur(1.5px) saturate(1);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n filter: blur(0) saturate(1) brightness(1);\r\n }\r\n }\r\n\r\n @keyframes bannerCardFloat {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(16px) scale(0.98);\r\n }\r\n 60% {\r\n opacity: 1;\r\n transform: translateY(-2px) scale(1);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n }\r\n\r\n #detail-content > div {\r\n flex: 1;\r\n }\r\n\r\n @keyframes rotateAnimationReverse {\r\n 0% {\r\n transform: rotate(0);\r\n }\r\n 100% {\r\n transform: rotate(-4deg);\r\n }\r\n }\r\n\r\n .detail-bottom-content .detail-bottom-swiper .swiper-wrapper {\r\n display: flex;\r\n user-select: none;\r\n }\r\n\r\n .swiper-slide {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: #fff;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n }\r\n\r\n .slide-content {\r\n display: flex;\r\n width: 100%;\r\n height: 100%;\r\n align-items: center;\r\n }\r\n\r\n .detail-bottom-content .slide-content {\r\n flex-direction: column;\r\n background: #fff;\r\n padding: 20px;\r\n border-radius: 10px;\r\n }\r\n\r\n .detail-bottom-content .slide-info img {\r\n width: 30px;\r\n height: 30px;\r\n }\r\n\r\n .detail-bottom-content .slide-content {\r\n gap: 46px;\r\n }\r\n\r\n .slide-image {\r\n flex: 1;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .detail-bottom-content .slide-image img {\r\n width: 370px;\r\n height: 100%;\r\n object-fit: cover;\r\n border-radius: 10px;\r\n }\r\n\r\n .slide-info {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n\r\n .slide-info .slide-info-icon {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 60px;\r\n height: 60px;\r\n border-radius: 30px;\r\n background: linear-gradient(\r\n 180deg,\r\n rgba(251, 216, 193, 0.23) -6.74%,\r\n rgba(0, 0, 0, 0.07) 49.1%,\r\n rgba(0, 0, 0, 0) 100%\r\n ),\r\n linear-gradient(180deg, #4a463c -8.1%, #161616 66.8%);\r\n }\r\n\r\n .slide-info .slide-info-title {\r\n font-size: 24px;\r\n font-weight: 500;\r\n color: #000;\r\n margin: 20px 0 10px;\r\n }\r\n\r\n .slide-info .slide-info-desc {\r\n font-size: 18px;\r\n color: #868686;\r\n line-height: normal;\r\n }\r\n\r\n .swiper-pagination {\r\n position: absolute;\r\n bottom: -50px !important;\r\n left: 50% !important;\r\n transform: translateX(-50%);\r\n z-index: 10;\r\n width: 1600px !important;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n .swiper-pagination .swiper-pagination-bullet {\r\n height: 3px;\r\n width: 20px;\r\n border-radius: unset !important;\r\n transform: scale(1) !important;\r\n height: 2px !important;\r\n }\r\n\r\n .swiper-pagination-bullet {\r\n width: 12px;\r\n height: 12px;\r\n background: #ccc;\r\n opacity: 0.5;\r\n margin: 0 6px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .swiper-pagination-bullet-active {\r\n background: #000;\r\n opacity: 1;\r\n transform: scale(1.2);\r\n }\r\n\r\n .swiper-button-next,\r\n .swiper-button-prev {\r\n position: absolute;\r\n top: 50%;\r\n width: 44px;\r\n height: 44px;\r\n background: #e2e2e2;\r\n border-radius: 50%;\r\n color: #919191;\r\n font-size: 18px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n z-index: 10;\r\n }\r\n\r\n .detail-bottom-content .swiper-button-next,\r\n .detail-bottom-content .swiper-button-prev {\r\n width: 36px;\r\n height: 36px;\r\n top: unset;\r\n bottom: 111px;\r\n }\r\n\r\n .swiper-button-next:hover,\r\n .swiper-button-prev:hover {\r\n transform: scale(1.1);\r\n }\r\n\r\n .swiper-button-next {\r\n right: 4.5%;\r\n }\r\n\r\n .swiper-button-prev {\r\n left: 4.5%;\r\n }\r\n\r\n .swiper-button-next, .swiper-button-prev {\r\n background: #E2E2E5;\r\n }\r\n .swiper-button-next::after, .swiper-button-prev::after {\r\n color: #535252;\r\n }\r\n .detail-bottom-content .swiper-button-next {\r\n right: calc(50vw - 884px);\r\n }\r\n .detail-bottom-content .swiper-button-prev {\r\n left: calc(50vw - 884px);\r\n }\r\n\r\n .swiper-button-next::after,\r\n .swiper-button-prev::after {\r\n font-size: 18px;\r\n font-weight: bold;\r\n }\r\n\r\n .swiper-button-next::after,\r\n .swiper-button-prev::after {\r\n font-size: 12px;\r\n }\r\n\r\n \/* \u5168\u5c40 Toast \u6837\u5f0f *\/\r\n #toast-container {\r\n position: fixed;\r\n top: 70px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n z-index: 10000;\r\n pointer-events: none;\r\n }\r\n .toast {\r\n min-width: 280px;\r\n max-width: 86vw;\r\n color: #111;\r\n background: #ffffff;\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);\r\n border-radius: 10px;\r\n padding: 12px 16px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 14px;\r\n line-height: 1.5;\r\n pointer-events: auto;\r\n animation: toastIn 0.26s ease both;\r\n }\r\n .toast.hide {\r\n animation: toastOut 0.22s ease forwards;\r\n }\r\n .toast .badge {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n flex: 0 0 8px;\r\n }\r\n .toast.info .badge {\r\n background: #2b6cb0;\r\n }\r\n .toast.success .badge {\r\n background: #2f855a;\r\n }\r\n .toast.error .badge {\r\n background: #c53030;\r\n }\r\n .toast .text {\r\n color: #111;\r\n }\r\n .banner-title-br {\r\n display: none;\r\n }\r\n @keyframes toastIn {\r\n from {\r\n opacity: 0;\r\n transform: translate(-2px, -6px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translate(0, 0);\r\n }\r\n }\r\n @keyframes toastOut {\r\n to {\r\n opacity: 0;\r\n transform: translate(-2px, -6px);\r\n }\r\n }\r\n\r\n @media screen and (max-width: 760px) {\r\n #serach-content {\r\n flex-direction: column;\r\n gap: 72px;\r\n }\r\n #detail-content {\r\n gap: 72px;\r\n }\r\n .detail-bottom-content .swiper-button-next {\r\n right: 24px;\r\n bottom: -48px;\r\n }\r\n .detail-bottom-content .swiper-button-prev {\r\n left: unset;\r\n right: 74px;\r\n bottom: -48px;\r\n }\r\n .swiper-pagination {\r\n display: none;\r\n }\r\n .detail-bottom-swiper {\r\n width: 100%;\r\n padding-left: 24px;\r\n }\r\n .slide-info .slide-info-icon {\r\n width: 50px;\r\n height: 50px;\r\n }\r\n .slide-info .slide-info-title {\r\n font-size: 16px;\r\n }\r\n .slide-info .slide-info-desc {\r\n font-size: 14px;\r\n }\r\n .detail-top-banner {\r\n min-height: 600px;\r\n padding: 0;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n background-size: cover;\r\n padding: 30px 24px 0;\r\n box-sizing: border-box;\r\n }\r\n .detail-top-banner .banner-card {\r\n padding: 0;\r\n }\r\n .banner-title-br {\r\n display: block;\r\n }\r\n .detail-top-banner .banner-title {\r\n font-size: 30px;\r\n }\r\n .detail-top-banner .banner-desc {\r\n margin: 16px 0 10px;\r\n font-size: 18px;\r\n }\r\n .detail-top-banner .banner-sub-desc {\r\n font-size: 18px;\r\n }\r\n #serach-content .tip-img {\r\n width: 100vw;\r\n height: 540px;\r\n flex: unset;\r\n }\r\n #serach-content .opr-content {\r\n padding: 72px 0;\r\n }\r\n\r\n .detail-bottom-content .detail-bottom-content-title {\r\n font-size: 20px;\r\n font-weight: 400;\r\n margin-bottom: 28px;\r\n color: #000;\r\n }\r\n .opr-input-search .opr-title {\r\n text-align: center;\r\n font-size: 30px;\r\n }\r\n .opr-input-search .opr-sub-title {\r\n font-size: 22px;\r\n }\r\n .opr-content .opr-content-item {\r\n width: 88.8vw;\r\n margin: 0 auto;\r\n }\r\n .opr-input-search .opr-input input::placeholder {\r\n font-size: 14px;\r\n }\r\n .opr-input-search .opr-desc {\r\n width: 100%;\r\n font-size: 18px;\r\n margin: 14px 0 48px;\r\n }\r\n .opr-input-search .opr-sub-desc {\r\n width: 100%;\r\n margin: 8px 0 20px;\r\n }\r\n .opr-input-search .opr-input {\r\n width: 364px;\r\n }\r\n .opr-input-search .opr-input:hover input {\r\n outline: none;\r\n }\r\n .opr-qrcode-search {\r\n width: 100%;\r\n }\r\n .opr-qrcode-search .opr-qrcode-desc {\r\n width: 100%;\r\n font-size: 18px;\r\n }\r\n .opr-qrcode-search .opr-qrcode-title {\r\n width: 100%;\r\n margin-top: 45px;\r\n font-size: 22px;\r\n }\r\n .opr-split {\r\n width: 100%;\r\n margin: 36px 0;\r\n }\r\n }\r\n <\/style>\r\n <\/head>\r\n <body>\r\n <div id=\"initial-loading\" class=\"initial-loading\">\r\n <div class=\"vertu-loader\">\r\n <svg\r\n class=\"main-v\"\r\n viewbox=\"0 0 283.46 141.73\"\r\n xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n >\r\n <path\r\n class=\"v-path\"\r\n d=\"M163.65,62.57h0l-.03-.03v-.03h-.03v-.03l-.03-.03v-.06l-.03-.03v-.2l.03-.03v-.03l.03-.03v-.03l.03-.03h.03v-.03l.03-.03h.03v-.03h.03l.03-.03h.06l.03-.03h.03l5.83-.75,5.83-.69,5.82-.69,5.83-.66,5.83-.63,5.82-.6,5.86-.6h.11l.03.03h.03l.03.03h.03l.03.03h.03l.03.03.03.03.03.03v.03l.03.03v.03l.03.03v.26l-.03.03v.03l-.03.03v.03l-.03.03-.03.03-.03.03h-.03l-.03.03h-.03l-.03.03h-.03c-1.75.43-3.47.86-5.22,1.29-1.72.46-3.44.92-5.16,1.46-1.69.55-3.38,1.15-5.05,1.81-1.66.66-3.3,1.38-4.91,2.12-1.61.78-3.21,1.58-4.79,2.44-3.16,1.66-6.28,3.44-9.32,5.28-3.07,1.84-6.11,3.76-9.07,5.77-2.95,2.01-5.85,4.1-8.72,6.23h-21.66c-4.36-3.13-8.72-6.28-13.23-9.18-3.01-1.92-6.08-3.76-9.21-5.51-1.55-.89-3.1-1.75-4.68-2.58-1.58-.86-3.18-1.66-4.79-2.44-1.64-.75-3.27-1.46-4.94-2.12-1.66-.66-3.33-1.26-5.05-1.81-1.69-.54-3.41-1-5.16-1.46-1.72-.43-3.47-.86-5.19-1.29h-.03l-.03-.03h-.03l-.05-.03-.03-.03-.03-.03-.03-.03-.03-.03v-.03l-.03-.03v-.03l-.03-.06v-.17l.03-.03v-.03l.03-.03v-.03l.03-.03.03-.03.03-.03v-.03h.03l.05-.03h.03l.03-.03h.03l.03-.03h.11l5.83.6,5.82.6,5.85.63,5.83.66,5.82.69,5.83.69,5.8.75h.03l.03.03h.09l.03.03.03.03h.03v.03l.03.03h.03v.03l.03.03v.03l.03.03v.06l.03.03v.14h-.03v.06l-.03.03v.06h-.03v.03l-.03.03h-.03c-.23.37-.49.75-.55,1.18-.03.2,0,.43.09.63.11.43.43.74.77,1.03.49.43,1.06.75,1.64,1.09,2.44,1.41,4.87,2.87,7.35,4.28,4.16,2.38,8.41,4.65,12.62,6.92,5.39-2.87,10.79-5.74,16.07-8.87,1.69-.98,3.36-2.01,5.02-3.04.2-.12.37-.23.54-.37.34-.26.63-.6.77-1.03.15-.4.09-.89-.08-1.26-.12-.2-.26-.37-.4-.55M143.48,78.61l1.03.55,1.09.58,1.15.6,1.18.6,1.2.63,1.21.63,1.2.63h.49c3.21-2.32,6.45-4.68,9.78-6.89,3.3-2.21,6.68-4.3,10.13-6.28,1.72-1,3.44-1.98,5.19-2.95,1.78-.98,3.53-1.89,5.34-2.79,1.81-.86,3.64-1.67,5.48-2.47l.06-.03h.03l.03-.03v-.03l.03-.03h.03l.03-.03v-.03l.03-.03v-.03l.03-.06v-.23l-.03-.03v-.03l-.03-.03v-.03l-.03-.03h-.03l-.03-.03-.03-.03-.03-.03h-.03l-.03-.03h-.06l-.03-.03h-.09l-3.67.43-3.68.4-3.67.43-3.64.46-3.67.46-3.67.46c.03.66.03,1.35-.2,1.92-.23.57-.69,1.06-1.2,1.46-.66.57-1.41,1.01-2.15,1.43-2.03,1.18-4.07,2.38-6.11,3.56-4.16,2.38-8.4,4.65-12.62,6.94M126.07,70.92c-2.01-1.15-3.99-2.33-5.94-3.53-.31-.23-.66-.43-.98-.69-.34-.26-.66-.55-.92-.89-.26-.37-.43-.77-.52-1.21-.08-.43-.06-.89-.03-1.32l-3.13-.4-3.16-.4-3.13-.37-3.13-.37-3.16-.37-3.12-.34-3.16-.37h-.08l-.06.03h-.06l-.03.03h-.03l-.03.03-.03.03-.03.03-.03.03-.03.03-.03.03v.03l-.03.03v.09l-.03.03v.09l.03.03v.09l.03.03v.03l.03.03.03.03.03.03.03.03.03.03h.03l.03.03c1.87.8,3.7,1.6,5.51,2.47,1.84.89,3.62,1.87,5.4,2.84,3.5,1.89,6.94,3.9,10.3,6,3.39,2.1,6.69,4.27,9.92,6.57,1.64,1.15,3.22,2.32,4.82,3.5h16.58c-7.37-3.88-14.78-7.75-21.98-11.91\"\r\n fill=\"none\"\r\n stroke=\"#000000\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n ><\/path>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"initial-loading-text\">Loading...<\/div>\r\n <\/div>\r\n <div id=\"toast-container\"><\/div>\r\n <div class=\"row\">\r\n <div class=\"row-title\">\u8f85\u52a9\u9762\u677f<\/div>\r\n <button id=\"btnGet\">\u83b7\u53d6\u4e8c\u7ef4\u7801<\/button>\r\n <button id=\"btnScan\">\u626b\u63cf\u4e8c\u7ef4\u7801<\/button>\r\n <button id=\"btnReport\">\u4e0a\u62a5<\/button>\r\n <\/div>\r\n\r\n <div id=\"serach-content\">\r\n <!-- <div class=\"tip-img\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/consumer.huawei.com\/dam\/content\/dam\/huawei-cbg-site\/common\/mkt\/pdp\/phones\/pura80-ultra\/img\/design\/design-camera-zoom-4.jpg\"\r\n \/>\r\n <\/div> -->\r\n <div class=\"opr-content\">\r\n <div class=\"opr-content-item\">\r\n <div class=\"opr-input-search\">\r\n <div class=\"opr-title\">An honor reserved for twenty-seven worldwide<\/div>\r\n <div class=\"opr-desc\">\r\n Authenticate your Agent Q to unlock your exclusive world.\r\n <\/div>\r\n <div class=\"opr-sub-title\">Enter Your Serial Number<\/div>\r\n <div class=\"opr-sub-desc\">\r\n Input the unique number engraved on your device.\r\n <\/div>\r\n <div class=\"opr-input\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"Please enter\"\r\n id=\"opr-input\"\r\n \/>\r\n <div class=\"opr-verify-btn\">Verify Now<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"opr-split\">\r\n <span>OR<\/span>\r\n <\/div>\r\n <div class=\"opr-qrcode-search\">\r\n <div class=\"opr-qrcode-title\">Scan Your Legacy QR Code<\/div>\r\n <div class=\"opr-qrcode-desc\">\r\n Scan the QR code below to claim your exclusive identity.\r\n <\/div>\r\n <div class=\"opr-qrcode-box\">\r\n <div id=\"qrcode\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"detail-content\">\r\n <div class=\"detail-top-banner\" id=\"detailTopBanner\">\r\n <div class=\"banner-card\">\r\n <div class=\"banner-title\">\r\n Welcome to the<br class=\"banner-title-br\" \/>\r\n Inner Circle.\r\n <\/div>\r\n <div class=\"banner-desc\">\r\n You have joined an exclusive group reserved for the 27 owners of the\r\n VERTU AGENT Q Anniversary Limited Edition.\r\n <\/div>\r\n <div class=\"banner-sub-desc\">\r\n Your bespoke services are now active. Explore your privileges\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail-bottom-content\">\r\n <div class=\"detail-bottom-content-title\">\r\n Direct Upgrade to Black Gold Card: <br \/>\r\n Benefits Valid for Two Years Post-Activation\r\n <\/div>\r\n <div class=\"detail-bottom-swiper\">\r\n <div class=\"swiper-wrapper\"><\/div>\r\n <\/div>\r\n <div class=\"swiper-pagination\"><\/div>\r\n <div class=\"swiper-button-next\"><\/div>\r\n <div class=\"swiper-button-prev\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script src=\"https:\/\/vertu.com\/wp-content\/plugins\/elementor\/assets\/lib\/swiper\/v8\/swiper.min.js?ver=8.4.5\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/qrcodejs\/1.0.0\/qrcode.min.js\"><\/script>\r\n <script>\r\n \/* Loading \u6837\u5f0f\u4e0e\u7ec4\u4ef6 *\/\r\n const loadingCss = `\r\n \/* initial-loading replaces old loading UI *\/\r\n \r\n \/* \u9ad8\u7ea7\u5185\u5bb9\u52a8\u753b *\/\r\n @keyframes contentSlideIn {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(30px) scale(0.98);\r\n }\r\n 60% {\r\n opacity: 0.8;\r\n transform: translateY(-5px) scale(1.01);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n }\r\n \r\n @keyframes imageSlideIn {\r\n 0% {\r\n opacity: 0;\r\n transform: translateX(-50px) scale(0.95) rotateY(-5deg);\r\n }\r\n 50% {\r\n opacity: 0.7;\r\n transform: translateX(-10px) scale(0.98) rotateY(-2deg);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateX(0) scale(1) rotateY(0deg);\r\n }\r\n }\r\n \r\n @keyframes oprSlideIn {\r\n 0% {\r\n opacity: 0;\r\n transform: translateX(50px) scale(0.95) rotateY(5deg);\r\n }\r\n 50% {\r\n opacity: 0.7;\r\n transform: translateX(10px) scale(0.98) rotateY(2deg);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateX(0) scale(1) rotateY(0deg);\r\n }\r\n }\r\n \r\n @keyframes oprItemSlideIn {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(40px) scale(0.9);\r\n }\r\n 60% {\r\n opacity: 0.8;\r\n transform: translateY(-8px) scale(1.02);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n }\r\n \r\n @keyframes titleSlideIn {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(20px) scale(0.95);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n }\r\n \r\n @keyframes descSlideIn {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(15px) scale(0.98);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n }\r\n \r\n @keyframes subTitleSlideIn {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(15px) scale(0.95);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n }\r\n \r\n @keyframes subDescSlideIn {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(10px) scale(0.98);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n }\r\n \r\n @keyframes inputSlideIn {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(25px) scale(0.95);\r\n }\r\n 60% {\r\n opacity: 0.8;\r\n transform: translateY(-3px) scale(1.01);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n }\r\n \r\n @keyframes qrSectionSlideIn {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(30px) scale(0.9) rotateX(10deg);\r\n }\r\n 50% {\r\n opacity: 0.7;\r\n transform: translateY(-5px) scale(0.98) rotateX(5deg);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0) scale(1) rotateX(0deg);\r\n }\r\n }\r\n \r\n \/* \u5361\u7247\u6389\u843d\u548c\u5c55\u5f00\u52a8\u753b *\/\r\n @keyframes cardDropDown {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(-200px) scale(0.8) rotateX(45deg);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0) scale(1) rotateX(0deg);\r\n }\r\n }\r\n \r\n @keyframes messageIconSlideIn {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(20px) scale(0.8);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n }\r\n \r\n @keyframes messageTitleSlideIn {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(15px) scale(0.9);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n }\r\n \r\n @keyframes messageDescSlideIn {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(10px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n \r\n @keyframes dividerExpand {\r\n 0% {\r\n opacity: 0;\r\n transform: scaleX(0);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n }\r\n }\r\n \r\n @keyframes svnTipSlideIn {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(10px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n \r\n @keyframes svnValueSlideIn {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(15px) scale(0.9);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n }\r\n \r\n @keyframes phoneContentSlideIn {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n \r\n @keyframes buttonSlideIn {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(25px) scale(0.9);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n }\r\n \r\n @keyframes swiperContentSlideIn {\r\n 0% {\r\n opacity: 0;\r\n transform: translateX(-50px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n }\r\n `;\r\n (function injectLoadingStyle() {\r\n const s = document.createElement(\"style\");\r\n s.id = \"loading-style\";\r\n s.innerHTML = loadingCss;\r\n document.head.appendChild(s);\r\n })();\r\n\r\n function showLoading() {\r\n const el = document.getElementById(\"initial-loading\");\r\n if (!el) return;\r\n el.style.display = \"flex\";\r\n el.style.opacity = \"1\";\r\n }\r\n function hideLoading() {\r\n const el = document.getElementById(\"initial-loading\");\r\n if (!el) return;\r\n el.style.opacity = \"0\";\r\n setTimeout(() => {\r\n el.style.display = \"none\";\r\n }, 300);\r\n }\r\n\r\n \/* Toast \u7ec4\u4ef6 *\/\r\n function showToast(message, type = \"info\", duration = 3000) {\r\n const container = document.getElementById(\"toast-container\");\r\n if (!container) return;\r\n const el = document.createElement(\"div\");\r\n el.className = `toast ${type}`;\r\n el.innerHTML = `<span class=\"badge\"><\/span><span class=\"text\">${message}<\/span>`;\r\n container.appendChild(el);\r\n const close = () => {\r\n el.classList.add(\"hide\");\r\n setTimeout(() => el.remove(), 260);\r\n };\r\n setTimeout(close, duration);\r\n el.addEventListener(\"click\", close);\r\n }\r\n\r\n const container = document.getElementById(\"qrcode\");\r\n const btnGet = document.getElementById(\"btnGet\");\r\n const btnScan = document.getElementById(\"btnScan\");\r\n const btnReport = document.getElementById(\"btnReport\");\r\n \/\/ const resultText = document.getElementById(\"resultText\");\r\n const vsnNumber = document.getElementById(\"opr-input\");\r\n const btnGetVsn = document.getElementsByClassName(\"opr-verify-btn\")[0];\r\n const qrcodeBox = document.getElementsByClassName(\"opr-qrcode-box\")[0];\r\n const serachContent = document.getElementById(\"serach-content\");\r\n const detailContent = document.getElementById(\"detail-content\");\r\n\r\n const edition = \"27th Anniversary Legacy Edition\";\r\n let userInfo = {\r\n vsn_number: \"V22005889\",\r\n user_name: \"21\",\r\n imel: \"354357930079070\",\r\n produce_date: \"2025-06-18\",\r\n phone_name: \"SIGNATURE PINK SAPPHIRE RHV-2 0546260 CN(\u505c\u7528)\",\r\n };\r\n const benefits_list = [\r\n {\r\n name: \"Shopping Mall Discount\",\r\n description: \"VERTU Life Mall offers a 7% discount.\",\r\n icon: \"https:\/\/vertu-website-oss.vertu.com\/2025\/10\/Shopping-Mall-Discount2.webp\",\r\n },\r\n {\r\n name: \"Global Lounge Access\",\r\n description:\r\n \"Unlimited access to worldwide airport lounges during your membership.<br\/>(For Personal Use Only)\",\r\n icon: \"https:\/\/vertu-website-oss.vertu.com\/2025\/10\/Global-Lounge-Access2.webp\",\r\n },\r\n {\r\n name: \"AI Health Consultation\",\r\n description:\r\n \"Unlimited complimentary AI-powered medical consultations.\",\r\n icon: \"https:\/\/vertu-website-oss.vertu.com\/2025\/10\/AI-Health-Consultation2.webp\",\r\n },\r\n {\r\n name: \"Exclusive Hotel Privileges\",\r\n description:\r\n \"Member benefits and special in-room amenities at partner hotels.\",\r\n icon: \"https:\/\/vertu-website-oss.vertu.com\/2025\/10\/Exclusive-Hotel-Privileges2.webp\",\r\n },\r\n {\r\n name: \"Industry Research Access\",\r\n description:\r\n \"Complimentary access to over 20,000 industry research weeklies.\",\r\n icon: \"https:\/\/vertu-website-oss.vertu.com\/2025\/10\/Industry-Research-Access2.webp\",\r\n },\r\n {\r\n name: \"Investment Bank Reports\",\r\n description:\r\n \"Access 20,000+ exclusive reports from leading investment banks.\",\r\n icon: \"https:\/\/vertu-website-oss.vertu.com\/2025\/10\/Investment-Bank-Reports2.webp\",\r\n },\r\n {\r\n name: \"Premium News Subscriptions\",\r\n description:\r\n \"Complimentary access to WSJ, The Economist, and Financial Times.\",\r\n icon: \"https:\/\/vertu-website-oss.vertu.com\/2025\/10\/Premium-News-Subscriptions2.webp\",\r\n },\r\n {\r\n name: \"Private Club Access\",\r\n description:\r\n \"30 complimentary bookings at partner clubs, for personal use only.\",\r\n icon: \"https:\/\/vertu-website-oss.vertu.com\/2025\/10\/Private-Club-Access2.webp\",\r\n },\r\n {\r\n name: \"Dedicated Personal Concierge\",\r\n description:\r\n \"Exclusive one-on-one service from your personal concierge.\",\r\n icon: \"https:\/\/vertu-website-oss.vertu.com\/2025\/10\/Dedicated-Personal-Concierge2.webp\",\r\n },\r\n {\r\n name: \"Health Screening\",\r\n description:\r\n \"One complimentary full-body check-up at a partner hospital.\",\r\n icon: \"https:\/\/vertu-website-oss.vertu.com\/2025\/10\/Health-Screening2.webp\",\r\n },\r\n {\r\n name: \"Genetic Testing\",\r\n description:\r\n \"One complimentary genetic test for personal health insights.<br\/>(For Personal Use Only)\",\r\n icon: \"https:\/\/vertu-website-oss.vertu.com\/2025\/10\/Genetic-Testing2.webp\",\r\n },\r\n {\r\n name: \"24\/7 Black Gold Concierge\",\r\n description:\r\n \"24\/7 dedicated service from your exclusive Black Gold concierge.\",\r\n icon: \"https:\/\/vertu-website-oss.vertu.com\/2025\/10\/7-Black-Gold-Concierge2.webp\",\r\n },\r\n {\r\n name: \"Priority Product Access\",\r\n description:\r\n \"Be the first to experience the full range of new VERTU products.\",\r\n icon: \"https:\/\/vertu-website-oss.vertu.com\/2025\/10\/Priority-Product-Access2.webp\",\r\n },\r\n {\r\n name: \"VERTU Signature Events\",\r\n description:\r\n \"Exclusive invitation for you and a guest to VERTU events.\",\r\n icon: \"https:\/\/vertu-website-oss.vertu.com\/2025\/10\/VERTU-Signature-Events2.webp\",\r\n },\r\n {\r\n name: \"Enterprise AI Consulting\",\r\n description:\r\n \"End-to-end AI transformation consulting services for your business.\",\r\n icon: \"https:\/\/vertu-website-oss.vertu.com\/2025\/10\/Enterprise-AI-Consulting2.webp\",\r\n },\r\n {\r\n name: \"Enterprise VPS Trial\",\r\n description: \"A one-year, full-access experience of our enterprise VPS system.\",\r\n icon: \"https:\/\/vertu-website-oss.vertu.com\/2025\/10\/Enterprise-VPS-Trial2.webp\",\r\n },\r\n ];\r\n let qrCode = \"\";\r\n let baseUrl = \"https:\/\/admin.vertu.cn\/api\/query\/\";\r\n\r\n const api = {\r\n getQRCode: baseUrl + \"unique_code\",\r\n searchUserInfo: baseUrl + \"user_phone\",\r\n report: baseUrl + \"phone_result\/update\",\r\n pollQRCode: baseUrl + \"phone_result\",\r\n };\r\n\r\n btnGet.addEventListener(\"click\", getQRCode);\r\n btnScan.addEventListener(\"click\", scanQRCode);\r\n btnReport.addEventListener(\"click\", report);\r\n btnGetVsn.addEventListener(\"click\", searchSvn);\r\n qrcodeBox.addEventListener(\"click\", getQRCode);\r\n window.addEventListener(\"resize\", initSwiper);\r\n\r\n \/\/ \u4e3a\u8f93\u5165\u6846\u6dfb\u52a0keyDown\u4e8b\u4ef6\u76d1\u542c\u5668\r\n vsnNumber.addEventListener(\"keydown\", function (event) {\r\n if (event.key === \"Enter\") {\r\n \/\/ \u89e6\u53d1opr-verify-btn\u6309\u94ae\u7684\u70b9\u51fb\u4e8b\u4ef6\r\n btnGetVsn.click();\r\n }\r\n });\r\n\r\n getQRCode();\r\n window.onload = function () {\r\n \/\/ initSwiper();\r\n const banner = document.getElementById(\"detailTopBanner\");\r\n if (banner) {\r\n requestAnimationFrame(() => banner.classList.add(\"show\"));\r\n }\r\n };\r\n\r\n let detailBottomSwiper = null;\r\n function initSwiper() {\r\n if(detailBottomSwiper) {\r\n detailBottomSwiper.destroy(true, true);\r\n detailBottomSwiper = null;\r\n }\r\n renderBottomSwiper();\r\n initDetailBottomSwiper();\r\n }\r\n\r\n const slideNameDom = document.getElementsByClassName(\"slide-name\")[0];\r\n const bottomSwiperTemplate = `\r\n <div class=\"swiper-slide\">\r\n <div class=\"slide-content\">\r\n <div class=\"slide-info\">\r\n <div class=\"slide-info-icon\">\r\n <img decoding=\"async\" src=\"{icon}\" \/> \r\n <\/div>\r\n <div class=\"slide-info-title\">{title}<\/div>\r\n <div class=\"slide-info-desc\">{desc}<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n\r\n const detailTopSwiperTemplate = `\r\n <div class=\"swiper-slide\">\r\n <div class=\"slide-content\">\r\n <div class=\"slide-image\">\r\n <img decoding=\"async\" src=\"{img}\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n\r\n const bottomSwiperDom = document.querySelector(\r\n \".detail-bottom-swiper .swiper-wrapper\"\r\n );\r\n function renderBottomSwiper() {\r\n let bottomSwiperStr = \"\";\r\n benefits_list.forEach((item) => {\r\n const icon = item.icon;\r\n bottomSwiperStr += bottomSwiperTemplate\r\n .replace(\"{icon}\", icon)\r\n .replace(\"{title}\", item.name)\r\n .replace(\"{desc}\", item.description);\r\n });\r\n bottomSwiperDom.innerHTML = bottomSwiperStr;\r\n }\r\n\r\n \/\/ \u521d\u59cb\u5316\u8be6\u60c5\u5e95\u90e8\u8f6e\u64ad\u56fe\r\n function initDetailBottomSwiper() {\r\n const pcConfig = {\r\n grabCursor: true,\r\n slidesPerView: 4,\r\n slidesPerGroup: 4, \/\/ \u6bcf\u6b21\u5207\u6362 4 \u4e2a\r\n spaceBetween: 20,\/\/ \u5206\u9875\u5668\r\n pagination: {\r\n el: \".swiper-pagination\",\r\n clickable: true,\r\n },\r\n };\r\n\r\n const mobileConfig = {\r\n slidesPerView: 1.8,\r\n slidesPerGroup: 1,\r\n spaceBetween: 10,\r\n };\r\n detailBottomSwiper = new Swiper(\".detail-bottom-swiper\", {\r\n ...(window.innerWidth > 760 ? pcConfig : mobileConfig),\r\n \/\/ \u81ea\u52a8\u64ad\u653e\r\n autoplay: false,\r\n\r\n \/\/ \u5bfc\u822a\u6309\u94ae\r\n navigation: {\r\n nextEl: \".detail-bottom-content .swiper-button-next\",\r\n prevEl: \".detail-bottom-content .swiper-button-prev\",\r\n },\r\n\r\n \/\/ \u4e8b\u4ef6\u56de\u8c03\r\n on: {\r\n slideChange: function () {\r\n console.log(\"Slide changed to:\", this.activeIndex);\r\n },\r\n reachEnd: function () {\r\n console.log(\"Reached the end\");\r\n },\r\n reachBeginning: function () {\r\n console.log(\"Reached the beginning\");\r\n },\r\n },\r\n });\r\n }\r\n\r\n function reset() {\r\n container.style.display = \"block\";\r\n userInfo = {};\r\n }\r\n const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));\r\n\r\n function isEmpty(obj = {}) {\r\n return Object.keys(obj).length === 0;\r\n }\r\n\r\n async function searchSvn() {\r\n showLoading();\r\n const response = await fetch(api.searchUserInfo, {\r\n method: \"POST\",\r\n headers: {\r\n \"Content-Type\": \"application\/json\",\r\n },\r\n body: JSON.stringify({ vsn_number: vsnNumber.value, lang: \"en\" }),\r\n });\r\n\r\n setTimeout(hideLoading, 400);\r\n const {\r\n result: { data, code, message },\r\n } = await response.json();\r\n userInfo = data;\r\n\r\n if (code !== 200 || isEmpty(userInfo)) {\r\n showToast(message, \"error\");\r\n return;\r\n }\r\n showToast(\"success!\", \"success\");\r\n serachContent.style.display = \"none\";\r\n detailContent.style.display = \"flex\";\r\n initSwiper();\r\n }\r\n\r\n let pollController = null;\r\n async function getQRCode() {\r\n showLoading();\r\n console.log(\"\u83b7\u53d6\u4e8c\u7ef4\u7801\");\r\n reset();\r\n const response = await fetch(api.getQRCode, {\r\n method: \"POST\",\r\n headers: {\r\n \"Content-Type\": \"application\/json\",\r\n },\r\n body: JSON.stringify({}),\r\n });\r\n const {\r\n result: {\r\n data: { unique_code },\r\n },\r\n } = await response.json();\r\n qrCode = unique_code;\r\n generateQRCode(qrCode);\r\n \/\/ \u8f7b\u5fae\u5ef6\u8fdf\u540e\u9690\u85cf Loading\uff0c\u663e\u5f97\u66f4\u987a\u6ed1\r\n setTimeout(hideLoading, 400);\r\n\r\n if (pollController) {\r\n return;\r\n }\r\n scanQRCode();\r\n }\r\n\r\n async function scanQRCode() {\r\n console.log(\"\u626b\u63cf\u4e8c\u7ef4\u7801\");\r\n pollController = true;\r\n const userInfo = await pollQRCode();\r\n console.log(\"\u626b\u63cf\u4e8c\u7ef4\u7801\u7ed3\u679c\", userInfo);\r\n if (isEmpty(userInfo)) {\r\n getQRCode();\r\n return;\r\n }\r\n serachContent.style.display = \"none\";\r\n detailContent.style.display = \"flex\";\r\n initSwiper();\r\n }\r\n\r\n async function report() {\r\n console.log(\"\u4e0a\u62a5\u4e8c\u7ef4\u7801\u4fe1\u606f\");\r\n const response = await fetch(api.report, {\r\n method: \"POST\",\r\n headers: {\r\n \"Content-Type\": \"application\/json\",\r\n },\r\n body: JSON.stringify({\r\n unique_code: qrCode,\r\n vsn_number: \"V23000629\",\r\n }),\r\n });\r\n }\r\n\r\n \/\/ \u8f6e\u8be2\u4e8c\u7ef4\u7801\r\n async function pollQRCode() {\r\n let isSuccess = false;\r\n while (!isSuccess) {\r\n const response = await fetch(api.pollQRCode, {\r\n method: \"POST\",\r\n headers: {\r\n \"Content-Type\": \"application\/json\",\r\n },\r\n body: JSON.stringify({ unique_code: qrCode, lang: \"en\" }),\r\n });\r\n console.log(\"\u67e5\u8be2\u4e8c\u7ef4\u7801\");\r\n const result = await response.json();\r\n const {\r\n result: {\r\n code,\r\n message\r\n },\r\n } = result;\r\n\r\n if (code !== 200) {\r\n showToast(message, \"error\");\r\n userInfo = {};\r\n isSuccess = true;\r\n pollController = null;\r\n return userInfo;\r\n } else {\r\n const {\r\n result: {\r\n data: { state, query_result_info },\r\n }\r\n } = result;\r\n\r\n if (state === \"done\") {\r\n userInfo = query_result_info;\r\n isSuccess = true;\r\n pollController = null;\r\n return userInfo;\r\n }\r\n }\r\n\r\n await sleep(3000);\r\n }\r\n }\r\n\r\n function clearQRCode() {\r\n while (container.firstChild)\r\n container.removeChild(container.firstChild);\r\n }\r\n\r\n \/\/ \u516c\u5f00\u51fd\u6570\uff1a\u4f20\u5165\u5b57\u7b26\u4e32\uff0c\u751f\u6210\u4e8c\u7ef4\u7801\r\n async function generateQRCode(text) {\r\n clearQRCode();\r\n if (!text) return;\r\n \/\/ \u4f7f\u7528 qrcodejs \u6784\u9020\u5668\u751f\u6210\uff0c\u9ed8\u8ba4\u6e32\u67d3\u4e3a canvas\uff08\u6216 img\uff09\r\n \/* global QRCode *\/\r\n const qr = new QRCode(container, {\r\n text,\r\n width: 95,\r\n height: 95,\r\n correctLevel: QRCode.CorrectLevel.M,\r\n });\r\n \/\/ qrcodejs \u662f\u540c\u6b65\u751f\u6210\uff0c\u4f46\u4e3a\u4e86\u4e0e\u539f\u63a5\u53e3\u4fdd\u6301\u4e00\u81f4\u8fd4\u56de\u6e32\u67d3\u8282\u70b9\r\n await Promise.resolve();\r\n \/\/ \u4f18\u5148\u8fd4\u56de canvas\uff0c\u5176\u6b21 img\r\n return (\r\n container.querySelector(\"canvas\") || container.querySelector(\"img\")\r\n );\r\n }\r\n <\/script>\r\n <\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f5d93ad e-flex e-con-boxed e-con e-parent\" data-id=\"f5d93ad\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>  Loading… \u8f85\u52a9\u9762\u677f \u83b7\u53d6\u4e8c\u7ef4\u7801 \u626b\u63cf\u4e8c\u7ef4\u7801 \u4e0a\u62a5 An honor reserved for twenty-seven worldwide Authenticate your Agent Q to unlock your exclusive […]<\/p>","protected":false},"author":6529,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"content-type":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-115478","page","type-page","status-publish","hentry"],"acf":[],"_custom_url_prefix":"","_links":{"self":[{"href":"https:\/\/legacy.vertu.com\/ar\/wp-json\/wp\/v2\/pages\/115478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/legacy.vertu.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/legacy.vertu.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/legacy.vertu.com\/ar\/wp-json\/wp\/v2\/users\/6529"}],"replies":[{"embeddable":true,"href":"https:\/\/legacy.vertu.com\/ar\/wp-json\/wp\/v2\/comments?post=115478"}],"version-history":[{"count":0,"href":"https:\/\/legacy.vertu.com\/ar\/wp-json\/wp\/v2\/pages\/115478\/revisions"}],"wp:attachment":[{"href":"https:\/\/legacy.vertu.com\/ar\/wp-json\/wp\/v2\/media?parent=115478"}],"curies":[{"name":"\u0648\u0648\u0631\u062f\u0628\u0631\u064a\u0633","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}