pets-fe/components/tab-bar/index.js

@@ -1,5 +1,5 @@
 const tabs = [
-  { path: "/pages/home/home", label: "首页", key: "home" },
+  { path: "/pages/home/home", label: "日常", key: "daily" },
   { path: "/pages/meetups/meetups", label: "约遛", key: "meetups" },
   { path: "/pages/walk/walk", label: "遛狗", key: "walk" },
   { path: "/pages/tasks/tasks", label: "任务", key: "tasks" },

pets-fe/components/tab-bar/index.wxml

@@ -18,10 +18,12 @@
       </view>
     </view>
     <view wx:else class="icon-wrap">
-      <view wx:if="{{item.key==='home'}}" class="home-icon">
-        <view class="home-roof"></view>
-        <view class="home-body"></view>
-        <view class="home-door"></view>
+      <view wx:if="{{item.key==='daily'}}" class="daily-icon">
+        <view class="calendar-ring ring-left"></view>
+        <view class="calendar-ring ring-right"></view>
+        <view class="calendar-divider"></view>
+        <view class="daily-rays"></view>
+        <view class="daily-sun"></view>
       </view>
       <view wx:elif="{{item.key==='meetups'}}" class="friends-icon">
         <view class="friend friend-left"></view>

pets-fe/components/tab-bar/index.wxss

@@ -50,44 +50,57 @@
   border-radius: 50%;
   background: #df936a;
 }
-.home-icon {
+.daily-icon {
   position: relative;
-  width: 42rpx;
-  height: 42rpx;
+  width: 39rpx;
+  height: 37rpx;
+  margin-top: 5rpx;
+  border: 3rpx solid currentColor;
+  border-radius: 9rpx;
 }
-.home-roof {
+.calendar-ring {
   position: absolute;
-  top: 3rpx;
-  left: 10rpx;
-  width: 25rpx;
-  height: 25rpx;
-  border-left: 4rpx solid currentColor;
-  border-top: 4rpx solid currentColor;
+  top: -8rpx;
+  width: 3rpx;
+  height: 11rpx;
   border-radius: 3rpx;
-  transform: rotate(45deg);
+  background: currentColor;
 }
-.home-body {
+.ring-left { left: 7rpx; }
+.ring-right { right: 7rpx; }
+.calendar-divider {
+  position: absolute;
+  top: 7rpx;
+  left: 0;
+  right: 0;
+  border-top: 3rpx solid currentColor;
+}
+.daily-rays {
   position: absolute;
   left: 6rpx;
-  right: 6rpx;
-  bottom: 1rpx;
-  height: 24rpx;
-  border-left: 4rpx solid currentColor;
-  border-right: 4rpx solid currentColor;
-  border-bottom: 4rpx solid currentColor;
-  border-radius: 0 0 5rpx 5rpx;
+  top: 12rpx;
+  width: 21rpx;
+  height: 21rpx;
 }
-.home-door {
+.daily-rays::before, .daily-rays::after {
+  content: "";
   position: absolute;
-  left: 18rpx;
-  bottom: 2rpx;
-  width: 10rpx;
-  height: 15rpx;
-  border-left: 3rpx solid currentColor;
-  border-right: 3rpx solid currentColor;
-  border-top: 3rpx solid currentColor;
-  border-radius: 5rpx 5rpx 0 0;
+  border-radius: 2rpx;
+  background: currentColor;
 }
+.daily-rays::before { left: 9rpx; top: 0; width: 3rpx; height: 21rpx; }
+.daily-rays::after { left: 0; top: 9rpx; width: 21rpx; height: 3rpx; }
+.daily-sun {
+  position: absolute;
+  left: 10rpx;
+  top: 16rpx;
+  width: 13rpx;
+  height: 13rpx;
+  border: 3rpx solid currentColor;
+  border-radius: 50%;
+  background: #fff;
+}
+.active .daily-sun { background: #fff0e2; }
 .friends-icon {
   position: relative;
   width: 48rpx;