backup: 子客服改造前保本版本（逍遥梦UI+商家客服页mock）

tab-bar/index.wxss

@@ -1,124 +1,73 @@
-/* tab-bar — 三端固定，全宽 Tab 胶囊 */
+.c-tab-spacer {
+  flex-shrink: 0;
+  width: 100%;
+  height: calc(100rpx + env(safe-area-inset-bottom));
+}
 
-.tab-bar {
-  position: fixed;
+.c-tab-outer {
+  background: #fff;
+  border-top: 1rpx solid #e5e5e5;
   bottom: 0;
   left: 0;
+  position: fixed;
   right: 0;
-  z-index: 9999;
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
+  z-index: 99999;
   padding-bottom: env(safe-area-inset-bottom);
-  background: transparent;
 }
 
-.bar-row {
-  display: flex;
-  align-items: center;
-  margin-bottom: 15rpx;
-  padding: 0 24rpx;
-  width: 100%;
+.c-tab-bar {
+  align-items: flex-end;
   box-sizing: border-box;
-}
-
-.tab-capsule {
-  flex: 1;
   display: flex;
-  align-items: center;
+  flex-direction: row;
   justify-content: space-around;
-  height: 100rpx;
-  background: #000000;
-  border-radius: 50rpx;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.8);
-  padding: 0 20rpx;
-  position: relative;
-  overflow: hidden;
+  min-height: 100rpx;
+  padding-top: 8rpx;
 }
 
-.tab-capsule::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 60%;
-  height: 100%;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    rgba(255, 255, 255, 0.15) 20%,
-    rgba(255, 255, 255, 0.22) 50%,
-    rgba(255, 255, 255, 0.15) 80%,
-    transparent 100%
-  );
-  animation: shine 8s infinite;
-  z-index: 1;
-}
-
-@keyframes shine {
-  0% { left: -60%; }
-  15% { left: 100%; }
-  100% { left: 100%; }
-}
-
-.tab-item {
-  position: relative;
-  z-index: 2;
-  display: flex;
-  flex-direction: column;
+.c-tab-item {
   align-items: center;
-  justify-content: center;
-  min-width: 70rpx;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding-bottom: 4rpx;
+  position: relative;
 }
 
-.tab-icon {
-  width: 44rpx;
-  height: 44rpx;
-  margin-bottom: 4rpx;
-  filter: brightness(0) invert(1);
-  opacity: 0.9;
+.c-tab-ico {
+  height: 48rpx;
+  width: 48rpx;
 }
 
-.tab-text {
+.c-tab-txt {
+  color: #999;
   font-size: 20rpx;
-  color: #aaa;
+  margin-top: 4rpx;
+}
+
+.c-tab-txt-on {
+  color: #ffd061;
+  font-weight: 600;
+}
+
+.c-tab-dot {
+  align-items: center;
+  background: #fa3534;
+  border-radius: 16rpx;
+  display: flex;
+  height: 32rpx;
+  justify-content: center;
+  min-width: 32rpx;
+  padding: 0 6rpx;
+  position: absolute;
+  right: 18%;
+  top: 0;
   z-index: 2;
 }
 
-.active .tab-icon {
-  opacity: 1;
-  filter: brightness(0) invert(1) drop-shadow(0 0 8rpx #00aaff);
-}
-
-.active .tab-text {
-  color: #00aaff;
-  font-weight: 500;
-}
-
-.badge-container {
-  position: absolute;
-  top: -10rpx;
-  right: -15rpx;
-  z-index: 100;
-  pointer-events: none;
-}
-
-.tab-badge {
-  min-width: 36rpx;
-  height: 36rpx;
-  line-height: 36rpx;
-  padding: 0 10rpx;
-  background: #ff3b30;
+.c-tab-dot-t {
   color: #fff;
-  font-size: 22rpx;
-  font-weight: bold;
-  border-radius: 36rpx;
-  text-align: center;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
-  border: 1rpx solid rgba(255, 255, 255, 0.4);
-}
-
-page {
-  padding-bottom: 100rpx;
+  font-size: 20rpx;
+  line-height: 1;
 }