首页金刚区样式修改

LiangZhiYUMao/pages/index/index.vue

@@ -1229,105 +1229,136 @@
 
 	/* 功能入口 */
 	.function-grid {
-		display: grid;
-		grid-template-columns: repeat(4, 1fr);
-		gap: 24rpx;
-		margin: 20rpx 1rpx;
-		padding: 30rpx;
-		background: #FFFFFF;
-		border-radius: 16rpx;
-		border: 2rpx solid #E0E0E0;
-
-		.grid-item {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			gap: 14rpx;
-			padding: 20rpx 12rpx;
-			transition: all 0.3s ease;
-			border-radius: 12rpx;
-
-			&:active {
-				transform: scale(0.95);
-				opacity: 0.9;
-			}
-
-			.grid-icon-wrapper {
-				width: 140rpx;
-				height: 140rpx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				border-radius: 20rpx;
-				position: relative;
-				overflow: hidden;
-				/* 外阴影 + 内阴影 - 增强立体感和深度感 */
-				box-shadow: inset 0 2rpx 8rpx rgba(255, 255, 255, 0.3),
-							0 10rpx 30rpx rgba(0, 0, 0, 0.2),
-							0 4rpx 12rpx rgba(0, 0, 0, 0.15);
-				transition: all 0.3s ease;
-
-				/* 光泽效果 - 左上角强烈高光，模拟图片中的光泽 */
-				&::before {
-					content: '';
-					position: absolute;
-					top: -60%;
-					left: -60%;
-					width: 220%;
-					height: 220%;
-					background: linear-gradient(135deg, 
-						rgba(255, 255, 255, 0.6) 0%, 
-						rgba(255, 255, 255, 0.4) 15%, 
-						rgba(255, 255, 255, 0.2) 30%, 
-						rgba(255, 255, 255, 0.05) 50%, 
-						transparent 70%);
-					transform: rotate(45deg);
-					pointer-events: none;
-					z-index: 1;
-					border-radius: 50%;
-				}
-
-				/* 底部深度阴影 - 增强立体感 */
-				&::after {
-					content: '';
-					position: absolute;
-					bottom: 0;
-					left: 0;
-					right: 0;
-					height: 40%;
-					background: linear-gradient(to top, 
-						rgba(0, 0, 0, 0.15) 0%, 
-						rgba(0, 0, 0, 0.08) 50%, 
-						transparent 100%);
-					pointer-events: none;
-					z-index: 1;
-					border-radius: 0 0 20rpx 20rpx;
-				}
-
-				&:active {
-					transform: scale(0.92);
-					box-shadow: inset 0 2rpx 8rpx rgba(255, 255, 255, 0.2),
-								0 6rpx 20rpx rgba(0, 0, 0, 0.25);
-				}
-
-				.grid-icon {
-					font-size: 70rpx;
-					position: relative;
-					z-index: 2;
-					/* 图标阴影 - 让图标更突出 */
-					filter: drop-shadow(0 3rpx 8rpx rgba(0, 0, 0, 0.2));
-					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
-				}
-			}
-
-			.grid-text {
-				font-size: 24rpx;
-				font-weight: 600;
-				color: #333333;
-				text-align: center;
-				line-height: 1.2;
-			}
-		}
+	  display: flex; /* 核心：改为flex布局 */
+	  flex-wrap: wrap; /* 自动换行 */
+	  gap: 25rpx; /* 保留间距（注意：低版本浏览器可能不兼容flex gap，需用margin替代） */
+	  margin: 20rpx 1rpx;
+	  padding: 30rpx 20rpx;
+	  background: #fefeff;
+	  border-radius: 20rpx;
+	  border: 2rpx solid #f0f0f5;
+	  box-shadow: 0 4rpx 16rpx rgba(220, 220, 240, 0.2);
+	  /* 兼容低版本浏览器（无flex gap时）：给子元素加margin，替代gap */
+	  // > .grid-item {
+	  //   margin: 0 15rpx 30rpx 15rpx;
+	  // }
+	  // > .grid-item:nth-child(4n+1) {
+	  //   margin-left: 0;
+	  // }
+	  // > .grid-item:nth-child(n+5) {
+	  //   margin-top: 30rpx;
+	  // }
+	}
+	
+	.grid-item {
+	  display: flex;
+	  flex-direction: column;
+	  align-items: center;
+	  justify-content: center;
+	  gap: 16rpx;
+	  padding: 24rpx 12rpx;
+	  transition: all 0.3s ease;
+	  border-radius: 16rpx;
+	  background: linear-gradient(180deg, #fff 0%, #fdfdff 100%);
+	  box-shadow: 0 2rpx 8rpx rgba(220, 220, 240, 0.15);
+	  /* 核心：保证4列均分，每列最小宽度限制 */
+	  flex: 1;
+	  min-width: calc(25% - 22.5rpx); /* 25% - 30rpx/2（gap的一半），适配4列 */
+	  max-width: calc(25% - 22.5rpx);
+	  box-sizing: border-box; /* 避免padding撑大宽度 */
+	
+	  &:hover,
+	  &:active {
+	    transform: translateY(-4rpx) scale(0.98);
+	    background: linear-gradient(180deg, #fff 0%, #f8f8ff 100%);
+	    box-shadow: 0 6rpx 18rpx rgba(200, 200, 230, 0.25);
+	  }
+	}
+	
+	/* 为不同功能定制图标容器底色（贴合功能主题） */
+	.grid-item:nth-child(1) .grid-icon-wrapper {
+	  background: linear-gradient(135deg, #ff85a2 0%, #ff5d8f 100%);
+	}
+	.grid-item:nth-child(2) .grid-icon-wrapper {
+	  background: linear-gradient(135deg, #85cfff 0%, #5daaff 100%);
+	}
+	.grid-item:nth-child(3) .grid-icon-wrapper {
+	  background: linear-gradient(135deg, #ffc885 0%, #ffaa5d 100%);
+	}
+	.grid-item:nth-child(4) .grid-icon-wrapper {
+	  background: linear-gradient(135deg, #ff85d2 0%, #ff5daa 100%);
+	}
+	
+	.grid-icon-wrapper {
+	  width: 150rpx;
+	  height: 150rpx;
+	  display: flex;
+	  align-items: center;
+	  justify-content: center;
+	  border-radius: 24rpx;
+	  position: relative;
+	  overflow: hidden;
+	  box-shadow: inset 0 3rpx 10rpx rgba(255, 255, 255, 0.4),
+	              0 8rpx 24rpx rgba(0, 0, 0, 0.12);
+	  transition: all 0.3s ease;
+	}
+	
+	.grid-icon-wrapper::before {
+	  content: '';
+	  position: absolute;
+	  top: -50%;
+	  left: -50%;
+	  width: 200%;
+	  height: 200%;
+	  background: linear-gradient(135deg, 
+	    rgba(255, 255, 255, 0.7) 0%, 
+	    rgba(255, 255, 255, 0.3) 40%, 
+	    transparent 80%);
+	  transform: rotate(45deg);
+	  pointer-events: none;
+	  z-index: 1;
+	}
+	
+	.grid-icon {
+	  font-size: 80rpx;
+	  color: #fff;
+	  position: relative;
+	  z-index: 2;
+	  filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.15));
+	}
+	
+	/* 功能图标装饰 */
+	.grid-item:nth-child(1) .grid-icon::after {
+	  content: '⭐';
+	  position: absolute;
+	  top: 10rpx;
+	  right: 10rpx;
+	  font-size: 30rpx;
+	  transform: rotate(15deg);
+	}
+	.grid-item:nth-child(4) .grid-icon::after {
+	  content: '🎀';
+	  position: absolute;
+	  bottom: 10rpx;
+	  right: 10rpx;
+	  font-size: 30rpx;
+	}
+	
+	.grid-text {
+	  font-size: 26rpx;
+	  font-weight: 600;
+	  color: #2d2d46;
+	  text-align: center;
+	  line-height: 1.3;
+	  text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.05);
+	}
+	
+	/* 响应式适配：小屏自动改为2列 */
+	@media (max-width: 600rpx) {
+	  .grid-item {
+	    min-width: calc(50% - 15rpx);
+	    max-width: calc(50% - 15rpx);
+	  }
 	}
 
 	/* 区块样式 */