提交

miniprogram/styles/mp-biz.scss

@@ -220,20 +220,167 @@
   padding: 24rpx 0 8rpx;
 }
 
+/* 全局空态 · 方案 B 插画文件夹（组件 mp-empty；类名可复用） */
 .mp-empty {
-  padding: 80rpx 32rpx;
+  padding: 80rpx 40rpx 64rpx;
   text-align: center;
 }
 
+.mp-empty--compact {
+  padding: 40rpx 24rpx 32rpx;
+}
+
+.mp-empty__art {
+  position: relative;
+  width: 296rpx;
+  height: 224rpx;
+  margin: 0 auto 36rpx;
+}
+
+.mp-empty--compact .mp-empty__art {
+  width: 220rpx;
+  height: 168rpx;
+  margin-bottom: 24rpx;
+  transform: scale(0.92);
+  transform-origin: center top;
+}
+
+.mp-empty__shadow {
+  position: absolute;
+  left: 48rpx;
+  right: 48rpx;
+  bottom: 12rpx;
+  height: 24rpx;
+  border-radius: 50%;
+  background: rgba(15, 30, 25, 0.08);
+}
+
+.mp-empty__folder {
+  position: absolute;
+  left: 50%;
+  top: 20rpx;
+  transform: translateX(-50%);
+  width: 216rpx;
+  height: 156rpx;
+}
+
+.mp-empty__folder-tab {
+  position: absolute;
+  left: 20rpx;
+  top: -20rpx;
+  width: 76rpx;
+  height: 32rpx;
+  border-radius: 16rpx 16rpx 0 0;
+  background: #87d4b0;
+}
+
+.mp-empty__folder-back {
+  position: absolute;
+  inset: 0;
+  border-radius: 24rpx 24rpx 28rpx 28rpx;
+  background: linear-gradient(160deg, #b7e6d2, #7dcea0);
+}
+
+.mp-empty__folder-front {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 116rpx;
+  border-radius: 20rpx 28rpx 28rpx 28rpx;
+  background: linear-gradient(180deg, #ecfdf5, #dff7ec);
+  border: 2rpx solid rgba(8, 127, 87, 0.18);
+  box-shadow: 0 16rpx 36rpx rgba(10, 159, 109, 0.12);
+}
+
+.mp-empty__lines {
+  position: absolute;
+  left: 36rpx;
+  right: 36rpx;
+  top: 36rpx;
+}
+
+.mp-empty__line {
+  display: block;
+  height: 12rpx;
+  border-radius: 999rpx;
+  background: #cfe9dc;
+  margin-bottom: 16rpx;
+}
+
+.mp-empty__line--mid {
+  width: 70%;
+}
+
+.mp-empty__line--short {
+  width: 48%;
+  margin-bottom: 0;
+}
+
+.mp-empty__title {
+  display: block;
+  font-size: 30rpx;
+  font-weight: 650;
+  color: var(--mp-text);
+  line-height: 1.4;
+}
+
+.mp-empty__desc {
+  display: block;
+  margin-top: 12rpx;
+  font-size: 24rpx;
+  color: var(--mp-muted);
+  line-height: 1.55;
+}
+
+.mp-empty__actions {
+  margin-top: 32rpx;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 16rpx;
+}
+
+.mp-empty__actions .mp-btn {
+  min-width: 200rpx;
+}
+
+/* 兼容旧写法：仅圆点 icon 时也渲染为文件夹插画占位（无内部结构则显示浅绿底） */
 .mp-empty__icon {
   width: 140rpx;
   height: 140rpx;
   margin: 0 auto 24rpx;
-  border-radius: 50%;
-  background: linear-gradient(145deg, #edf5f1, #dcebe4);
+  border-radius: 28rpx;
+  background: linear-gradient(160deg, #b7e6d2, #7dcea0);
+  position: relative;
+  box-shadow: 0 12rpx 28rpx rgba(10, 159, 109, 0.12);
+}
+
+.mp-empty__icon::before {
+  content: '';
+  position: absolute;
+  left: 20rpx;
+  top: -12rpx;
+  width: 48rpx;
+  height: 20rpx;
+  border-radius: 10rpx 10rpx 0 0;
+  background: #87d4b0;
+}
+
+.mp-empty__icon::after {
+  content: '';
+  position: absolute;
+  left: 12rpx;
+  right: 12rpx;
+  bottom: 16rpx;
+  height: 72rpx;
+  border-radius: 14rpx 18rpx 18rpx 18rpx;
+  background: linear-gradient(180deg, #ecfdf5, #dff7ec);
+  border: 2rpx solid rgba(8, 127, 87, 0.16);
 }
 
 .mp-empty__text {
+  display: block;
   font-size: 28rpx;
   color: var(--mp-muted);
 }