680 lines
12 KiB
Plaintext
680 lines
12 KiB
Plaintext
|
|
page {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.hidden {
|
|
display:none;
|
|
}
|
|
|
|
/* Main container */
|
|
view.wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* WeChat camera */
|
|
camera.camera {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: -3;
|
|
}
|
|
|
|
/* Web-view camera fallback */
|
|
web-view {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: -3;
|
|
}
|
|
|
|
/* Loading spinner */
|
|
.loading-spinner {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #000;
|
|
color: white;
|
|
z-index: -2;
|
|
}
|
|
|
|
.loading-spinner text {
|
|
margin-top: 20rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
/* Canvas for image processing */
|
|
canvas#output {
|
|
width: 10px;
|
|
height: 10px;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: -10;
|
|
}
|
|
|
|
/* QR targeting arcs overlay */
|
|
view.qrarc.sm {
|
|
width: 350rpx;
|
|
height: 350rpx;
|
|
margin: 360rpx 200rpx;
|
|
position: absolute;
|
|
animation: qrarc-anime 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
view.qrarc.lg {
|
|
width: 550rpx;
|
|
height: 550rpx;
|
|
margin: 260rpx 100rpx;
|
|
position: absolute;
|
|
animation: qrarc-anime 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
view.qrarc image.arc {
|
|
position: absolute;
|
|
width: 15%;
|
|
height: 15%;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
view.qrarc image.arc.topright {
|
|
right: 0;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
view.qrarc image.arc.bottomleft {
|
|
bottom: 0;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
view.qrarc image.arc.bottomright {
|
|
bottom: 0;
|
|
right: 0;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
@keyframes qrarc-anime {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* QR markers overlay */
|
|
view.qrmarkers {
|
|
opacity: 70%;
|
|
margin: 100rpx 0;
|
|
}
|
|
|
|
image.square {
|
|
width: 750rpx;
|
|
height: 750rpx;
|
|
}
|
|
|
|
/* On-screen display for hints */
|
|
view.osd {
|
|
position: fixed;
|
|
width: 100%;
|
|
top: 0;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
|
|
view.osd .upper {
|
|
border-radius: 20rpx;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
font-size: 1.1rem;
|
|
display: inline-block;
|
|
margin: 130rpx auto 630rpx auto;
|
|
padding: 0.8rem 2rem;
|
|
}
|
|
|
|
/* Bottom action controls */
|
|
view.bottomfixed {
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom: 0;
|
|
height: 200rpx;
|
|
background-color: #171616;
|
|
text-align: center;
|
|
border-top: 2px solid rgba(239, 72, 35, 0.7);
|
|
color: #707070;
|
|
}
|
|
|
|
.actions {
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.actions .icon image {
|
|
height: 30rpx;
|
|
width: 80rpx;
|
|
}
|
|
|
|
view.half {
|
|
position: relative;
|
|
width: 50%;
|
|
display: inline-block;
|
|
}
|
|
|
|
view.icon {
|
|
font-size: 20rpx;
|
|
margin: 30rpx 0 20rpx;
|
|
}
|
|
|
|
view.text {
|
|
display: block;
|
|
}
|
|
|
|
view.brighter view.text {
|
|
color: #eee;
|
|
}
|
|
|
|
view.brighter {
|
|
color: #eee;
|
|
}
|
|
|
|
/* Debug overlay */
|
|
view.debug {
|
|
position: absolute;
|
|
width: 94%;
|
|
max-height: 30vh;
|
|
bottom: 240rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 0.3rem;
|
|
border: 1px solid rgba(239, 72, 35, 0.8);
|
|
border-radius: 3px;
|
|
color: rgba(239, 72, 35, 0.8);
|
|
background-color: rgba(100, 100, 100, 0.5);
|
|
z-index: 1000;
|
|
font-size: 10px;
|
|
opacity: 0.75;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.debug-top-row {
|
|
display: flex;
|
|
gap: 4px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.debug-image-box {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.debug-image-box image {
|
|
width: 64px;
|
|
height: 64px;
|
|
border: 1px solid rgba(239, 72, 35, 0.8);
|
|
}
|
|
|
|
.debug-image-box .debug-label {
|
|
font-size: 8px;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
margin-top: 2px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.debug-info-panel {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Debug messages section */
|
|
.debug-messages {
|
|
margin-top: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.debug-msg {
|
|
display: block;
|
|
margin: 1px 0;
|
|
line-height: 1.2;
|
|
color: #ffffff;
|
|
font-family: monospace;
|
|
font-size: 9px;
|
|
}
|
|
|
|
/* Debug items container */
|
|
.debug-items {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 2px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
/* Individual debug item boxes */
|
|
.debug-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
margin: 0;
|
|
padding: 1px 3px;
|
|
border: 1px solid rgba(239, 72, 35, 0.5);
|
|
border-radius: 2px;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.debug-label {
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.debug-value {
|
|
color: #99ff99;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.debug-value-number {
|
|
color: #99ff99;
|
|
font-family: monospace;
|
|
min-width: 32px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* Special styling for no_web_view flag box */
|
|
.debug-item.debug-flag-box {
|
|
border: 1px solid rgba(255, 0, 0, 0.6);
|
|
background-color: rgba(255, 0, 0, 0.1);
|
|
}
|
|
|
|
.debug-flag {
|
|
color: #ff9999;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
/* Tooltip */
|
|
view.tooltip {
|
|
position: fixed;
|
|
bottom: 310rpx;
|
|
left: 75rpx;
|
|
}
|
|
|
|
.tooltip-content {
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
color: white;
|
|
padding: 20rpx;
|
|
border-radius: 10rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
/* Modal styles */
|
|
.modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: white;
|
|
padding: 40rpx;
|
|
border-radius: 20rpx;
|
|
text-align: center;
|
|
max-width: 600rpx;
|
|
margin: 40rpx;
|
|
}
|
|
|
|
.modal-content button {
|
|
margin: 20rpx 10rpx;
|
|
padding: 20rpx 40rpx;
|
|
border: none;
|
|
border-radius: 10rpx;
|
|
background-color: #ef4823;
|
|
color: white;
|
|
}
|
|
|
|
/* Verification Spinner - copied from verifyspin component */
|
|
.verification-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: rgba(30, 30, 30, 0.6);
|
|
}
|
|
|
|
.verification-spinner {
|
|
width: 650rpx;
|
|
height: 650rpx;
|
|
margin: 100rpx auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.spin-and-shrink {
|
|
animation: spin-and-shrink 3s linear forwards;
|
|
}
|
|
|
|
.verification-spinner image {
|
|
width: 650rpx;
|
|
height: 650rpx;
|
|
}
|
|
|
|
@keyframes spin-and-shrink {
|
|
0% {
|
|
transform: rotate(-90deg) scale(5.5)
|
|
}
|
|
10% {
|
|
transform: rotate(0deg) scale(2.0)
|
|
}
|
|
33% {
|
|
transform: rotate(90deg) scale(1.0);
|
|
}
|
|
66% {
|
|
transform: rotate(2000deg) scale(0.5);
|
|
}
|
|
99% {
|
|
transform: rotate(3600deg) scale(0.2);
|
|
}
|
|
100% {
|
|
transform: rotate(3600deg) scale(0.2);
|
|
}
|
|
}
|
|
|
|
.spin-only {
|
|
animation: spin-only 0.3s linear infinite;
|
|
}
|
|
|
|
@keyframes spin-only {
|
|
0% {
|
|
transform: rotate(0deg) scale(0.2);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg) scale(0.2);
|
|
}
|
|
}
|
|
|
|
.verification-loading {
|
|
font-size: 1.5rem;
|
|
color: #eee;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 50rpx;
|
|
top: 800rpx;
|
|
text-align: center;
|
|
animation: fade-in-out 2s linear infinite;
|
|
}
|
|
|
|
@keyframes fade-in-out {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Scanguide modal styles - inlined from scanguide component */
|
|
.scanguide-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.scanguide-container {
|
|
position: fixed;
|
|
top: 75rpx;
|
|
left: 75rpx;
|
|
z-index: 200;
|
|
width: 600rpx;
|
|
height: 1000rpx;
|
|
border-radius: 15rpx;
|
|
background-image: linear-gradient(0deg, #8b8986 0%, #414141 36%, #414141 92%, #515151 100%);
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.scanguide-header {
|
|
padding: 40rpx 0 20rpx 0;
|
|
}
|
|
|
|
.scanguide-content {
|
|
flex: 1;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
width: 400rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.scanguide-title {
|
|
margin-top: 0rpx;
|
|
color: #eee;
|
|
position: relative;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.scanguide-title view {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
position: absolute;
|
|
}
|
|
|
|
.scanguide-text1 {
|
|
display: inline-block;
|
|
margin: 0 auto;
|
|
animation: scanguide-anime-text-1 10s linear infinite;
|
|
}
|
|
|
|
@keyframes scanguide-anime-text-1 {
|
|
0%, 5% { opacity: 0; }
|
|
8%, 38% { opacity: 1; }
|
|
40%, 100% { opacity: 0; }
|
|
}
|
|
|
|
.scanguide-text2 {
|
|
animation: scanguide-anime-text-2 10s linear infinite;
|
|
}
|
|
|
|
@keyframes scanguide-anime-text-2 {
|
|
0%, 45% { opacity: 0; }
|
|
48%, 60% { opacity: 1; }
|
|
63%, 100% { opacity: 0; }
|
|
}
|
|
|
|
.scanguide-text3 {
|
|
animation: scanguide-anime-text-3 10s linear infinite;
|
|
}
|
|
|
|
@keyframes scanguide-anime-text-3 {
|
|
0%, 75% { opacity: 0; }
|
|
78%, 90% { opacity: 1; }
|
|
93%, 100% { opacity: 0; }
|
|
}
|
|
|
|
.scanguide-text4 {
|
|
animation: scanguide-anime-text-4 10s linear infinite;
|
|
}
|
|
|
|
@keyframes scanguide-anime-text-4 {
|
|
0%, 90% { opacity: 0; }
|
|
93%, 98% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
|
|
.scanguide-scan {
|
|
background-color: #aaa;
|
|
padding: 30rpx 0;
|
|
border-radius: 15rpx;
|
|
position: relative;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
height: 400rpx;
|
|
top: 80rpx;
|
|
}
|
|
|
|
.scanguide-markers {
|
|
position: absolute;
|
|
display: block;
|
|
width: 340rpx;
|
|
left: 30rpx;
|
|
height: 340rpx;
|
|
z-index: 3;
|
|
animation: scanguide-anime-markers 10s linear infinite;
|
|
}
|
|
|
|
.scanguide-markers-glow {
|
|
position: absolute;
|
|
display: block;
|
|
margin: 0 auto;
|
|
width: 340rpx;
|
|
left: 30rpx;
|
|
height: 340rpx;
|
|
z-index: 2;
|
|
animation: scanguide-anime-markers-glow 10s linear infinite;
|
|
}
|
|
|
|
@keyframes scanguide-anime-markers-glow {
|
|
0%, 90% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.scanguide-qr {
|
|
position: absolute;
|
|
top: 30rpx;
|
|
display: block;
|
|
width: 340rpx;
|
|
left: 30rpx;
|
|
height: 340rpx;
|
|
animation: scanguide-anime-qr 10s linear infinite;
|
|
z-index: 1;
|
|
}
|
|
|
|
@keyframes scanguide-anime-qr {
|
|
0% {
|
|
transform: scale(0.3);
|
|
}
|
|
10% {
|
|
transform: scale(0.3) translate(-6%, 6%);
|
|
}
|
|
20% {
|
|
transform: scale(0.42) translate(-3%, 1%);
|
|
}
|
|
30% {
|
|
transform: scale(0.43);
|
|
filter: blur(0);
|
|
}
|
|
47% {
|
|
transform: scale(1.02) translate(-6%, -5%);
|
|
filter: blur(3.5px);
|
|
}
|
|
60% {
|
|
transform: scale(1.05) translate(-5%, 1%);
|
|
filter: blur(3.5px);
|
|
}
|
|
63% {
|
|
transform: scale(1.05) translate(-6%, -1%);
|
|
filter: blur(0);
|
|
}
|
|
90% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.scanguide-actions {
|
|
padding: 20rpx 0 40rpx 0;
|
|
}
|
|
|
|
.scanguide-actions .scanguide-buttons {
|
|
display: block;
|
|
width: 500rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.scanguide-title-text {
|
|
color: #eee;
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.scanguide-subtitle {
|
|
color: #ccc;
|
|
font-size: 0.9rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.scanguide-left-half {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 50%;
|
|
}
|
|
|
|
.scanguide-right-half {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 50%;
|
|
}
|
|
|
|
.scanguide-buttons button {
|
|
display: inline-block;
|
|
width: 220rpx;
|
|
box-sizing: border-box;
|
|
font-size: 0.8rem;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.scanguide-left-half button {
|
|
border: 1px solid #666;
|
|
border: 1px solid rgba(239, 72, 35, 0.7);
|
|
color: rgba(239, 72, 35, 0.7);
|
|
background-color: #666;
|
|
border: 1px solid #555;
|
|
color: #aaa;
|
|
}
|
|
|
|
.scanguide-right-half button {
|
|
border: 1px solid rgba(239, 72, 35, 0.7);
|
|
color: rgba(239, 72, 35, 0.7);
|
|
}
|
|
|
|
.scanguide-return {
|
|
height: 18rpx;
|
|
width: 18rpx;
|
|
} |