tabbar

custom-tab-bar/index.vue

@@ -9,11 +9,36 @@
     inactive-color="#8A9199"
     @change="onChange"
   >
-    <wd-tabbar-item title="消息" icon="chat" />
+    <wd-tabbar-item title="消息">
-    <wd-tabbar-item title="通讯录" icon="usergroup" />
+      <template #icon="{ active }">
-    <wd-tabbar-item title="打卡" icon="clock" />
+        <view class="ico" :class="{ on: active }"><view class="bubble" /><view class="tail" /></view>
-    <wd-tabbar-item title="工作台" icon="app" />
+      </template>
-    <wd-tabbar-item title="我" icon="user" />
+    </wd-tabbar-item>
+    <wd-tabbar-item title="通讯录">
+      <template #icon="{ active }">
+        <view class="ico heads" :class="{ on: active }">
+          <view class="head"><view class="dot" /><view class="body" /></view>
+          <view class="head b"><view class="dot" /><view class="body" /></view>
+        </view>
+      </template>
+    </wd-tabbar-item>
+    <wd-tabbar-item title="打卡">
+      <template #icon="{ active }">
+        <view class="ico" :class="{ on: active }"><view class="clock"><view class="hh" /><view class="mh" /></view></view>
+      </template>
+    </wd-tabbar-item>
+    <wd-tabbar-item title="工作台">
+      <template #icon="{ active }">
+        <view class="ico grid" :class="{ on: active }">
+          <view /><view /><view /><view />
+        </view>
+      </template>
+    </wd-tabbar-item>
+    <wd-tabbar-item title="我">
+      <template #icon="{ active }">
+        <view class="ico" :class="{ on: active }"><view class="me"><view class="dot" /><view class="body" /></view></view>
+      </template>
+    </wd-tabbar-item>
   </wd-tabbar>
 </template>
 
@@ -51,3 +76,50 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.ico { width: 44rpx; height: 44rpx; position: relative; }
+.bubble {
+  width: 30rpx; height: 22rpx; margin: 6rpx auto 0;
+  border: 3rpx solid #8A9199; border-radius: 8rpx; box-sizing: border-box;
+}
+.on .bubble { border-color: #1677FF; }
+.tail {
+  width: 0; height: 0; margin-left: 14rpx;
+  border-top: 8rpx solid #8A9199; border-right: 8rpx solid transparent;
+}
+.on .tail { border-top-color: #1677FF; }
+.heads { display: flex; align-items: flex-end; height: 44rpx; padding-left: 2rpx; }
+.head {
+  width: 22rpx; display: flex; flex-direction: column; align-items: center;
+}
+.head.b { margin-left: -6rpx; }
+.dot {
+  width: 12rpx; height: 12rpx; border: 3rpx solid #8A9199; border-radius: 50%; box-sizing: border-box;
+}
+.body {
+  width: 18rpx; height: 8rpx; margin-top: 2rpx;
+  border: 3rpx solid #8A9199; border-bottom: none; border-radius: 10rpx 10rpx 0 0; box-sizing: border-box;
+}
+.on .dot, .on .body { border-color: #1677FF; }
+.clock {
+  width: 30rpx; height: 30rpx; margin: 6rpx auto 0;
+  border: 3rpx solid #8A9199; border-radius: 50%; box-sizing: border-box; position: relative;
+}
+.on .clock { border-color: #1677FF; }
+.hh, .mh { position: absolute; background: #8A9199; border-radius: 2rpx; }
+.on .hh, .on .mh { background: #1677FF; }
+.hh { width: 3rpx; height: 10rpx; left: 12rpx; top: 4rpx; }
+.mh { width: 8rpx; height: 3rpx; left: 12rpx; top: 12rpx; }
+.grid {
+  width: 32rpx; height: 32rpx; margin: 6rpx auto 0;
+  display: flex; flex-wrap: wrap; gap: 4rpx;
+}
+.grid view {
+  width: 12rpx; height: 12rpx; border: 3rpx solid #8A9199; border-radius: 3rpx; box-sizing: border-box;
+}
+.on .grid view { border-color: #1677FF; }
+.me { display: flex; flex-direction: column; align-items: center; padding-top: 4rpx; }
+.me .dot { width: 14rpx; height: 14rpx; }
+.me .body { width: 26rpx; height: 10rpx; }
+</style>