/* subpages/OCRCard/pages/index/index.wxss */ page { width: 100%; min-height: 100vh; overflow-y: scroll; background-color: #f7f7f7; } .top20 { margin-top: 20rpx; } .header { width: 100%; height: 550rpx; overflow: hidden; } .blue { color: #3A80E7; } .red { color: #FF502E; } .header .header-bg { width: 100%; height: 444rpx; position: absolute; height: 100%; z-index: -997; } .header .navigation { width: 100%; display: flex; align-items: center; justify-content: center; color: #333333; font-size: 32rpx; position: relative; z-index: 100; } .gray { color: #999; font-size: 28rpx; } .font32 { font-size: 32rpx; } .back { width: 30rpx; height: 30rpx; margin-left: 20rpx; position: absolute; margin-top: 20rpx; border-radius: 0rpx; z-index: 101; } .body { position: relative; top: -414rpx; display: flex; flex-direction: column; justify-content: center; padding: 0 70rpx; align-items: center; } .btn1{ height: 84rpx; line-height: 84rpx; width: 100% !important; padding: 0; text-align: center; color: #fff; font-size: 33rpx; border-radius: 84rpx; background: linear-gradient(to right, #82f1f1, #08b3b3); margin: 150rpx 0 0 !important; } .btn2{ height: 84rpx; line-height: 84rpx; width: 100% !important; padding: 0; text-align: center; color: #fff; font-size: 33rpx; border-radius: 84rpx; background: linear-gradient(to right, #82f1f1, #08b3b3); margin: 30rpx 0 !important; } .ocr { width: 100%; } .color { color: #fff; } .card-image { width: 100%; height: 100%; } .card-container { position: relative; width: 440rpx; height: 280rpx; overflow: hidden; } .scan-line { position: absolute; top: 0; left: 0; width: 100%; height: 60rpx; z-index: 10; background: linear-gradient(to bottom, #b1e7e7, rgba(177, 231, 231, 0)); pointer-events: none; }