移除旧版tabbar

components/fy-header.vue

@@ -51,7 +51,7 @@ export default {
 
 <style scoped>
 .hd {
-  background: rgba(245, 247, 250, 0.94);
+  background: #F5F7FA;
   border-bottom: 1rpx solid rgba(17, 24, 39, 0.06);
   position: sticky;
   top: 0;

custom-tab-bar/index.vue

@@ -1,125 +0,0 @@
-<template>
-  <wd-tabbar
-    v-model="active"
-    fixed
-    bordered
-    safe-area-inset-bottom
-    placeholder
-    active-color="#1677FF"
-    inactive-color="#8A9199"
-    @change="onChange"
-  >
-    <wd-tabbar-item title="消息">
-      <template #icon="{ active }">
-        <view class="ico" :class="{ on: active }"><view class="bubble" /><view class="tail" /></view>
-      </template>
-    </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>
-
-<script>
-const PATHS = [
-  '/pages/tabs/messages',
-  '/pages/tabs/contacts',
-  '/pages/tabs/clock',
-  '/pages/tabs/workbench',
-  '/pages/tabs/me'
-]
-
-export default {
-  data() {
-    return { active: 0 }
-  },
-  mounted() {
-    this.sync()
-    uni.$on('fy-tab', (i) => { this.active = i })
-  },
-  unmounted() {
-    uni.$off('fy-tab')
-  },
-  methods: {
-    sync() {
-      const pages = getCurrentPages()
-      const route = pages.length ? '/' + pages[pages.length - 1].route : ''
-      const i = PATHS.indexOf(route)
-      if (i >= 0) this.active = i
-    },
-    onChange({ value }) {
-      const url = PATHS[value]
-      if (url) uni.switchTab({ url })
-    }
-  }
-}
-</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>

pages.json

@@ -51,7 +51,7 @@
     "color": "#8A9199",
     "selectedColor": "#1677FF",
     "backgroundColor": "#FFFFFF",
-    "borderStyle": "white",
+    "borderStyle": "black",
     "list": [
       { "pagePath": "pages/tabs/messages", "text": "消息", "iconPath": "static/tab/msg.png", "selectedIconPath": "static/tab/msg-on.png" },
       { "pagePath": "pages/tabs/contacts", "text": "通讯录", "iconPath": "static/tab/contacts.png", "selectedIconPath": "static/tab/contacts-on.png" },

pages/tabs/messages.vue

@@ -145,19 +145,19 @@ export default {
 </script>
 
 <style scoped>
-.msg { display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden; }
+.msg { display: flex; flex-direction: column; height: 100%; background: #F5F7FA; overflow: hidden; }
 .finder {
   margin: 8rpx 24rpx 12rpx;
   height: 56rpx;
   border-radius: 12rpx;
-  background: #F3F4F6;
+  background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #9CA3AF;
 }
 .finder-txt { margin-left: 8rpx; font-size: 26rpx; line-height: 1; }
-.list { background: #fff; }
+.list { background: #F5F7FA; }
 .ico.sm { font-size: 34rpx; color: #1677FF; }
 .item { display: flex; align-items: center; padding: 22rpx 28rpx; background: #fff; }
 .item.pin { background: #F7F8FA; }
@@ -176,6 +176,6 @@ export default {
 .bot { display: flex; align-items: center; margin-top: 8rpx; }
 .prev { flex: 1; font-size: 24rpx; color: #6B7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .mute { font-size: 22rpx; margin-left: 8rpx; color: #9CA3AF; }
-.empty { padding: 160rpx 40rpx; text-align: center; color: #6B7280; font-size: 28rpx; background: #fff; }
+.empty { padding: 160rpx 40rpx; text-align: center; color: #6B7280; font-size: 28rpx; background: transparent; }
 .ico { font-size: 36rpx; color: #1677FF; padding: 8rpx 12rpx; }
 </style>