/* page { background-repeat: no-repeat; background-size: 100% 100%; -moz-background-size: 100% 100%; background-color: #333; } */ .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; /* background-color: #f0f4f8; */ /* background-color: #ffffff; */ padding: 10px; background: -webkit-linear-gradient(bottom,rgb(145, 145, 253),rgb(72, 0, 240),rgb(70, 0, 221)); /* background-image: url("../../static/images/s.png"); background-size: 100% 100%; background-repeat: no-repeat; */ } .scan-button { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 400rpx; height: 400rpx; border-radius: 50%; /* 圆形按钮 */ /* border: 5rpx solid #ff5500; */ /* background: -webkit-linear-gradient(bottom,rgb(157, 146, 168),rgb(125, 96, 168),rgb(112, 56, 168, 0.9)); */ box-shadow: 0 8rpx 20rpx rgba(170, 255, 255, 0.1), 0 8px 20px rgba(85, 255, 127, 0.1); /* 阴影效果 */ margin-bottom: 40rpx; } .scan-icon { width: 160rpx; height: 160rpx; } .scan-text { font-size: 45rpx; color: #30aa30; /* 文字颜色 */ text-align: center; margin-top: 10px; } .scan-tip { font-size: 30rpx; color: #c6c6c6; /* 提示文字颜色 */ text-align: center; } .scan-tip-top { font-size: 60rpx; margin:0rpx 0 150rpx 0; font-weight: 900; color: transparent; /* 文本颜色设置为透明,以便显示渐变背景 */ background-clip: text; /* 背景裁剪为文本 */ -webkit-background-clip: text; /* 兼容 Safari */ background-image: linear-gradient(to right, #91a4ea, #9e7fec); /* 应用渐变背景 */ text-align: center; } .top-image { width: 100%; /* 宽度为屏幕宽度 */ height: 100%; /* 高度为100rpx */ position: fixed; /* 固定在屏幕顶部 */ top: 0; /* 距离顶部0rpx */ left: 0; /* 距离左侧0rpx */ z-index: 999; /* 设置较高的z-index以确保在其他内容之上 */ }