miniProgram/pages/scan/scan.wxss

/* 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以确保在其他内容之上 */  
}