Kaynağa Gözat

欢迎卡片样式

QAQ 陈 5 ay önce
ebeveyn
işleme
682b0c6c92
1 değiştirilmiş dosya ile 16 ekleme ve 11 silme
  1. 16 11
      pages/homepage/homepage.wxss

+ 16 - 11
pages/homepage/homepage.wxss

@@ -31,21 +31,26 @@
 }
 
 .welcome-card {
-  position: relative;
-  margin: -60rpx 32rpx 0;
-  border-radius: 16rpx;
-  overflow: hidden;
-  background: #fff;
+  position: absolute;
+  left: 2%; /* 使用百分比替代固定像素 */
+  top: 128px; /* 顶部距离可以保持固定,或根据需要调整 */
+  width: 96%; /* 宽度占父容器的 96%,留出左右 2% 的边距 */
+  height: 188px; /* 高度可以根据需要调整 */
+  opacity: 1;
+  background-color: #fff; 
+  border-radius: 8px; /* 圆角 */
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
+  overflow: hidden; 
 }
 
 .card-bg {
   position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 160rpx;
-  height: 160rpx;
-  opacity: 0.8;
-  z-index: 1;
+  width: 105%; /* 宽度超出 .welcome-card 的 5%,实现覆盖效果 */
+  left: -2.5%; /* 向左偏移 2.5%,使背景居中 */
+  height: 100%; /* 高度与 .welcome-card 一致 */
+  opacity: 1;
+  background-color: #f0f0f0; /* 背景色 */
+  border-radius: 8px; /* 圆角 */
 }
 
 .card-content {