9.20 界面502

frontend/unpackage/dist/dev/mp-weixin/pages/index/index.wxss

@@ -142,13 +142,19 @@
   font-weight: 700;
   letter-spacing: 1rpx;
 }
+
+/* KPI 卡片化布局：2×2 */
 .kpi {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 8rpx;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16rpx;
 }
 .kpi-item {
   text-align: center;
+  background: #ffffff;
+  border: 2rpx solid #e5e7eb;
+  border-radius: 16rpx;
+  padding: 16rpx 8rpx;
 }
 .kpi-label {
   opacity: 0.9;
@@ -171,6 +177,33 @@
   color: #4C8DFF;
 }
 
+/* 常用功能：胶囊+阴影卡片样式的图标栅格（旧风格保留以防回退） */
+.grid {
+  grid-row-gap: 36rpx;
+  grid-column-gap: 26rpx;
+  padding: 32rpx 24rpx 28rpx;
+}
+.grid-item {
+  position: relative;
+}
+.icon-squircle {
+  width: 140rpx;
+  height: 140rpx;
+  border-radius: 28rpx;
+  background: #fff;
+  border: 2rpx solid #e5e7eb;
+  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.06);
+}
+.grid-chip {
+  margin-top: 12rpx;
+  padding: 6rpx 14rpx;
+  border-radius: 999rpx;
+  background: rgba(76, 141, 255, 0.12);
+  color: #4C8DFF;
+  font-size: 26rpx;
+  font-weight: 700;
+}
+
 /* 功能容器：整体玻璃面板，增强融入感 */
 .grid-wrap {
   margin: 0 20rpx 32rpx;
@@ -181,77 +214,51 @@
   box-shadow: none;
 }
 
-/* 功能九宫格 */
-.grid {
+/* 新版功能卡片宫格（更现代卡片风） */
+.feature-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-row-gap: 64rpx;
-  grid-column-gap: 36rpx;
-  padding: 40rpx 28rpx 28rpx;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 18rpx;
+  padding: 18rpx 18rpx 24rpx;
 }
-.grid-item {
+.feature-card {
+  background: #fff;
+  border: 2rpx solid #e5e7eb;
+  border-radius: 16rpx;
+  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.06);
+  padding: 18rpx;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  text-align: center;
+  gap: 12rpx;
 }
-.icon {
+.fc-icon {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 16rpx;
+  background: #f1f1f1;
   display: flex;
   align-items: center;
   justify-content: center;
+}
+.fc-img {
+  width: 72rpx;
+  height: 72rpx;
+}
+.fc-emoji {
+  font-size: 56rpx;
+}
+.fc-placeholder {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 12rpx;
+  background: #f1f1f1;
+  border: 2rpx solid #e5e7eb;
+}
+.fc-title {
+  margin-left: 2rpx;
+  font-size: 30rpx;
+  font-weight: 700;
   color: #111;
-  position: relative;
-}
-.icon-squircle {
-  width: 132rpx;
-  height: 132rpx;
-  border-radius: 28rpx;
-  background: #f1f1f1;
-  border: 2rpx solid #e5e7eb;
-  box-shadow: none;
-  overflow: hidden;
-}
-.icon-squircle::before {
-  content: "";
-  position: absolute;
-  left: -30%;
-  top: -40%;
-  width: 160%;
-  height: 70%;
-  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
-  transform: rotate(12deg);
-}
-.icon-img {
-  width: 96rpx;
-  height: 96rpx;
-}
-.icon-emoji {
-  font-size: 60rpx;
-  line-height: 1;
-}
-.icon-placeholder {
-  width: 84rpx;
-  height: 84rpx;
-  border-radius: 18rpx;
-  background: #f1f1f1;
-  border: 2rpx solid #e5e7eb;
-  box-shadow: none;
-}
-.icon-text {
-  font-size: 46rpx;
-  font-weight: 700;
-}
-.grid-title {
-  display: none;
-}
-.grid-chip {
-  margin-top: 14rpx;
-  padding: 8rpx 16rpx;
-  border-radius: 999rpx;
-  background: #4C8DFF;
-  color: #fff;
-  font-size: 28rpx;
-  font-weight: 700;
 }
 
 /* 底部操作条：浅色半透明 + 金色主按钮 */