增加分类组件

src/components/auth/login.vue

@@ -7,7 +7,7 @@
 <script>
 import { mapState } from "vuex";
 export default {
-    name: "app-login",
+    name: "component-auth-login",
     data() {
         return {};
     },

src/components/banner/banner.vue

@@ -28,7 +28,7 @@
 
 <script>
 export default {
-    name: "app-slide",
+    name: "component-banner",
     data() {
         return {
             currentIndex: 0,

src/components/cate/cate.vue

@@ -0,0 +1,266 @@
+<template>
+    <view class="component-wrap" :style="{height: wrapHeight + 'px'}">
+        <view class="component-menu-wrap">
+            <scroll-view scroll-y class="component-tab-view menu-scroll-view" :scroll-top="scrollTop"
+             :scroll-into-view="itemId">
+                <view
+                    class="component-tab-item"
+                    v-for="(item, index) in data"
+                    :key="index"
+                    :class="[current == index ? 'component-tab-item-active' : '']"
+                    @tap.stop="swichMenu(index)"
+                >
+                    <text class="component-line-1">{{item.name}}</text>
+                </view>
+            </scroll-view>
+            <scroll-view
+                :scroll-top="scrollRightTop"
+                scroll-y
+                scroll-with-animation
+                class="right-box"
+                @scroll="rightScroll"
+            >
+                <view class="page-view">
+                    <view
+                        class="class-item"
+                        v-for="(item, index) in data" 
+                        :id="'item' + index"
+                        :key="index" 
+                        :style="{height: (index == data.length - 1 ? (cateType == 'parent' ? 'calc(100vh - 70rpx)' : '100vh') : 'auto')}"
+                    >
+                        <parent-tmpl v-if="cateType === 'parent'" :data="item" @clickParent="clickParent"></parent-tmpl>
+                        <child-tmpl v-if="cateType === 'child'" :data="item" @clickChild="clickChild"></child-tmpl>
+                    </view>
+                </view>
+            </scroll-view>
+        </view>
+    </view>
+</template>
+
+<script>
+import ParentTmpl from "@/components/cate/template/parent"
+import ChildTmpl from "@/components/cate/template/child"
+export default {
+    name: "component-cate",
+    data() {
+        return {
+            scrollTop: 0, //tab标题的滚动条位置
+            oldScrollTop: 0, // tab标题的滚动条旧位置
+            current: 0, // 预设当前项的值
+            menuHeight: 0, // 左边菜单的高度
+            menuItemHeight: 50, // 左边菜单item的高度
+            itemId: "", // 栏目右边scroll-view用于滚动的id
+            arr: [], // 储存距离顶部高度的数组
+            scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
+            timer: null, // 定时器
+            wrapHeight: 0,
+        }
+    },
+    props: {
+        cateType: {
+            type: String,
+            default: "parent"
+        },
+        offsetHeight: {
+            type: Number,
+            default: 0
+        },
+        data: {
+            type: Array,
+            default: []
+        }
+    },
+    components: {
+        ParentTmpl,
+        ChildTmpl
+    },
+    created() {},
+    mounted() {
+        this.getMenuItemTop();
+        let headerHeight = 40;
+        const { windowHeight, statusBarHeight } = uni.getSystemInfoSync();
+        this.wrapHeight = windowHeight - headerHeight - this.offsetHeight;
+        // #ifdef MP-WEIXIN
+        this.wrapHeight = this.wrapHeight - statusBarHeight;
+        // #endif
+    },
+    destroyed() {},
+    methods: {
+        getElRect(elClass, dataVal) {
+            new Promise((resolve, reject) => {
+                const query = uni.createSelectorQuery().in(this);
+                query.select('.' + elClass).fields({
+                    size: true
+                }, res => {
+                    // 如果节点尚未生成，res值为null，循环调用执行
+                    if (!res) {
+                        this.getElRect(elClass);
+                        return;
+                    }
+                    this[dataVal] = res.height;
+                    resolve();
+                }).exec();
+            })
+        },
+        /**
+         * 获取右边菜单每个item到顶部的距离
+         * 储存到 arr 数组里面用于后面滚动判断
+         */
+        getMenuItemTop() {
+            new Promise(resolve => {
+                let selectorQuery = uni.createSelectorQuery().in(this);
+                selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
+                    // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
+                    if(!rects.length) {
+                        this.getMenuItemTop();
+                        return ;
+                    }
+                    rects.forEach((rect) => {
+                        // 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
+                        this.arr.push(rect.top - rects[0].top);
+                        // this.arr.push(rect.top)
+                        resolve();
+                    })
+                }).exec()
+            })
+        },
+        /**
+         * 观测元素相交状态
+         * 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
+         * 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
+         */
+        async observer() {
+            this.data.map((val, index) => {
+                let observer = uni.createIntersectionObserver(this);
+                observer.relativeTo('.right-box', {
+                    top: 0
+                }).observe('#item' + index, res => {
+                    if (res.intersectionRatio > 0) {
+                        let id = res.id.substring(4);
+                        this.leftMenuStatus(id);
+                    }
+                })
+            })
+        },
+        /**
+         * 设置左边菜单的滚动状态
+         * @index 传入的 ID
+         */
+        async leftMenuStatus(index) {
+            this.current = index;
+            // 如果为0，意味着尚未初始化
+            if (this.menuHeight == 0 || this.menuItemHeight == 0) {
+                await this.getElRect('menu-scroll-view', 'menuHeight');
+                await this.getElRect('component-tab-item', 'menuItemHeight');
+            }
+            // 将菜单活动item垂直居中
+            this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
+        },
+        /**
+         * 点击左边的栏目切换
+         * @index 传入的 ID
+         */
+        async swichMenu(index) {
+            if(this.arr.length == 0) {
+                await this.getMenuItemTop();
+            }
+            if (index == this.current) return;
+            this.scrollRightTop = this.oldScrollTop;
+            this.$nextTick(function(){
+                this.scrollRightTop = this.arr[index];
+                this.current = index;
+                this.leftMenuStatus(index);
+            })
+        },
+        /**
+         * 右边菜单滚动
+         * 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
+         */
+        async rightScroll(e) {
+            this.oldScrollTop = e.detail.scrollTop;
+            if(this.arr.length == 0) {
+                await this.getMenuItemTop();
+            }
+            if(!this.menuHeight) {
+                await this.getElRect('menu-scroll-view', 'menuHeight');
+            }
+            // scrollHeight为右边菜单垂直中点位置
+            // let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
+            // scrollHeight为右边菜单头部位置
+            let scrollHeight = e.detail.scrollTop + 10;
+            for (let i = 0; i < this.arr.length; i++) {
+                let height1 = this.arr[i];
+                let height2 = this.arr[i + 1];
+                if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
+                    this.leftMenuStatus(i);
+                    return ;
+                }
+            }
+        },
+        clickParent(id) {
+            this.$emit('clickParent', id);
+        },
+        clickChild(id) {
+            this.$emit('clickChild', id);
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.component-wrap {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+.component-search-box {
+    padding: 18rpx 30rpx;
+}
+.component-menu-wrap {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+}
+.component-tab-view {
+    width: 200rpx;
+    height: 100%;
+    background-color: #F6F6F6;
+}
+.component-tab-item {
+    height: 100rpx;
+    box-sizing: border-box;
+    padding-left: 20rpx;
+    display: flex;
+    align-items: center;
+    font-size: 24rpx;
+    color: #8B8B8B;
+    font-weight: 400;
+    line-height: 1;
+}
+.component-tab-item-active {
+    position: relative;
+    color: #4B65ED;
+    background: #FFFFFF;
+}
+.component-tab-item-active::before {
+    content: "";
+    position: absolute;
+    border-left: 4px solid #4B65ED;
+    height: 24rpx;
+    left: 0;
+    top: 38rpx;
+}
+.component-tab-view {
+    height: 100%;
+}
+.right-box {
+    width: 550rpx;
+}
+.page-view {
+    padding-right: 16rpx;
+}
+.class-item {
+    background-color: #ffffff;
+    padding: 36rpx 32rpx 0 32rpx;
+}
+</style>

src/components/cate/template/child.vue

@@ -0,0 +1,79 @@
+<template>
+    <view>
+        <view class="item-title">
+            <text>{{data.name}}</text>
+        </view>
+        <view class="item-container">
+            <view
+                class="thumb-box"
+                v-for="(child, index1) in data.child"
+                :key="index1"
+                @click="clickItem(child.id, child.name)"
+            >
+                <image class="item-menu-image" :src="child.icon" mode=""></image>
+                <view class="item-menu-name">{{child.name}}</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "component-cate-template-child",
+    data() {
+        return {};
+    },
+    props: {
+        data: {
+            type: Object,
+            default: []
+        },
+    },
+    components: {},
+    created() {},
+    mounted() {},
+    destroyed() {},
+    methods: {
+        clickItem(id, name) {
+            this.$emit('clickParent', id);
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+
+.item-title {
+    font-size: 26rpx;
+    color: #8B8B8B;
+    font-weight: bold;
+}
+.item-container {
+    display: flex;
+    flex-wrap: wrap;
+}
+.thumb-box {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
+    margin-top: 40rpx;
+    margin-right: 40rpx;
+}
+.thumb-box:nth-child(3n) {
+    margin-right: 0;
+}
+.item-menu-image {
+    width: 120rpx;
+    height: 120rpx;
+    box-sizing: border-box;
+    border-radius: 20rpx;
+    border: 2rpx solid #D8D8D8;
+}
+.item-menu-name {
+    margin-top: 15rpx;
+    font-weight: normal;
+    color: #333333;
+    font-size: 24rpx;
+}
+</style>

src/components/cate/template/parent.vue

@@ -0,0 +1,80 @@
+<template>
+    <view>
+        <view class="item-title">
+            <text>{{data.name}}</text>
+        </view>
+        <view class="item-container">
+            <view
+                class="thumb-box"
+                v-for="(child, index1) in data.child"
+                :key="index1"
+                @click="clickItem(child.id, child.name)"
+            >
+                <image class="item-menu-image" :src="child.icon" mode=""></image>
+                <view class="item-menu-name">{{child.name}}</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "component-cate-template-parent",
+    data() {
+        return {};
+    },
+    props: {
+        data: {
+            type: Object,
+            default: []
+        },
+    },
+    components: {},
+    created() {},
+    mounted() {},
+    destroyed() {},
+    methods: {
+        clickItem(id, name) {
+            this.$emit('clickParent', id);
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+
+.item-title {
+    font-size: 26rpx;
+    color: #010101;
+    font-weight: bold;
+}
+.item-container {
+    display: flex;
+    flex-wrap: wrap;
+}
+.thumb-box {
+    width: 130rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    margin-top: 40rpx;
+    margin-right: 40rpx;
+}
+.thumb-box:nth-child(3n) {
+    margin-right: 0;
+}
+.item-menu-image {
+    width: 120rpx;
+    height: 120rpx;
+    box-sizing: border-box;
+    border-radius: 20rpx;
+    border: 2rpx solid #D8D8D8;
+}
+.item-menu-name {
+    margin-top: 15rpx;
+    font-weight: normal;
+    color: #333333;
+    font-size: 24rpx;
+}
+</style>

src/components/layout/layout.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="page-layout">
+    <view class="page-layout" :style="{backgroundColor: pageBackgroundColor}">
         <view
             class="page-header"
             :class="[textColor]"
@@ -7,14 +7,22 @@
         >
             <!-- 首页选择地址 -->
             <block v-if="btnType === 'city'">
-                <view class="page-index-btn change-city" :style="{height: header.height + 'rpx'}" @click="changeCity">
+                <view
+                    class="page-index-btn change-city"
+                    :style="{height: header.height + 'rpx'}"
+                    @click="changeCity"
+                >
                     <text class="iconfont icon-31dingwei"></text>
                     <text class="city">成都市</text>
                 </view>
             </block>
             <!-- 正常返回按钮 -->
             <block v-if="btnType === 'back'">
-                <view class="page-index-btn back" :style="{height: header.height + 'rpx'}" @click="onClick">
+                <view
+                    class="page-index-btn back"
+                    :style="{height: header.height + 'rpx'}"
+                    @click="onClick"
+                >
                     <text class="iconfont icon-fanhui"></text>
                 </view>
             </block>
@@ -31,7 +39,7 @@
 
 <script>
 export default {
-    name: "app-layout",
+    name: "component-layout",
     data() {
         return {
             header: {
@@ -43,6 +51,10 @@ export default {
     },
     components: {},
     props: {
+        pageBackgroundColor: {
+            type: String,
+            default: "unset",
+        },
         customBtn: {
             type: Boolean,
             default: false,
@@ -104,7 +116,7 @@ export default {
     margin: 0 auto;
     /* #ifdef H5 */
     // 修复自定义tabBar后的遮挡问题
-    padding-bottom: calc(@tabBarHeight - 50px);
+    // padding-bottom: calc(@tabBarHeight - 50px);
     /* #endif */
 }
 .page-header.dark {

src/pages.json

@@ -20,15 +20,21 @@
 			}
 		},
 		{
-			"path": "pages/auth/pageA",
+			"path": "pages/member/address",
 			"style": {
-				"navigationBarTitleText": "我的"
+				"navigationBarTitleText": "分类"
 			}
 		},
 		{
-			"path": "pages/auth/pageB",
+			"path": "pages/service/cate",
 			"style": {
-				"navigationBarTitleText": "我的"
+				"navigationBarTitleText": "分类"
+			}
+		},
+		{
+			"path": "pages/service/list",
+			"style": {
+				"navigationBarTitleText": "分类"
 			}
 		}
 	],
@@ -59,19 +65,19 @@
 				"text": "首页"
 			},
 			{
-				"pagePath": "pages/auth/auth",
+				"pagePath": "pages/service/cate",
 				"iconPath": "static/temp/tabbar/2.png",
 				"selectedIconPath": "static/temp/tabbar/2a.png",
 				"text": "分类"
 			},
 			{
-				"pagePath": "pages/auth/pageA",
+				"pagePath": "pages/auth/auth",
 				"iconPath": "static/temp/tabbar/3.png",
 				"selectedIconPath": "static/temp/tabbar/3a.png",
 				"text": "联保"
 			},
 			{
-				"pagePath": "pages/auth/pageB",
+				"pagePath": "pages/member/address",
 				"iconPath": "static/temp/tabbar/4.png",
 				"selectedIconPath": "static/temp/tabbar/4a.png",
 				"text": "订单"

src/pages/auth/auth.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import AppLayout from "@/components/app-layout/app-layout";
+import AppLayout from "@/components/layout/layout";
 export default {
     name: "auth",
     data() {

src/pages/auth/pageA.vue

@@ -1,20 +0,0 @@
-<template></template>
-
-<script>
-export default {
-    name: "pageA",
-    data() {
-        return {};
-    },
-    components: {},
-    onLoad() {},
-    onShow() {},
-    onReady() {},
-    onReachBottom() {},
-    onPullDownRefresh() {},
-    methods: {},
-};
-</script>
-
-<style lang="less" scoped>
-</style>

src/pages/auth/pageB.vue

@@ -1,20 +0,0 @@
-<template></template>
-
-<script>
-export default {
-    name: "pageB",
-    data() {
-        return {};
-    },
-    components: {},
-    onLoad() {},
-    onShow() {},
-    onReady() {},
-    onReachBottom() {},
-    onPullDownRefresh() {},
-    methods: {},
-};
-</script>
-
-<style lang="less" scoped>
-</style>

src/pages/index/index.vue

@@ -69,8 +69,8 @@
 </template>
 
 <script>
-import AppLayout from "@/components/app-layout/app-layout";
+import AppLayout from "@/components/layout/layout";
-import AppBanner from "@/components/app-banner/app-banner";
+import AppBanner from "@/components/banner/banner";
 export default {
     name: "index",
     data() {

src/pages/member/address.vue

@@ -0,0 +1,24 @@
+<template>
+    <app-layout backgroundColor="#00418c" textColor="light">
+        
+    </app-layout>
+</template>
+
+<script>
+import AppLayout from "@/components/layout/layout";
+export default {
+    name: "member-address",
+    data() {
+        return {};
+    },
+    components: { AppLayout },
+    onLoad() {},
+    onShow() {},
+    onReady() {},
+    onReachBottom() {},
+    onPullDownRefresh() {},
+    methods: {},
+};
+</script>
+
+<style lang="less" scoped></style>

src/pages/member/member.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import AppLayout from "@/components/app-layout/app-layout";
+import AppLayout from "@/components/layout/layout";
 import { mapState } from "vuex";
 export default {
     name: "member",

src/pages/service/cate.vue

@@ -0,0 +1,136 @@
+<template>
+    <app-layout btnType="unset" title="分类" pageBackgroundColor="#F6F6F6">
+        <view class="search">
+            <view class="input-box">
+                <view class="icon">
+                    <text class="iconfont icon-sousuo"></text>
+                </view>
+                <input
+                    class="input"
+                    type="text"
+                    :model="keywords"
+                    placeholder="搜索您需要的服务"
+                    placeholder-class="placeholder"
+                />
+            </view>
+        </view>
+        <view class="cate">
+            <app-cate :offsetHeight="60" :data="data" cateType="parent" @clickParent="clickParent" />
+        </view>
+    </app-layout>
+</template>
+
+<script>
+import AppLayout from "@/components/layout/layout";
+import AppCate from "@/components/cate/cate";
+export default {
+    name: "service-cate",
+    data() {
+        return {
+            keywords: "",
+            data: [
+                {
+                    id: 1,
+                    name: "热门推荐",
+                    icon: "",
+                    child: [
+                        {
+                            id: 2,
+                            name: "空调安装",
+                            icon: require("@/static/temp/cate/1.png"),
+                        },
+                        {
+                            id: 3,
+                            name: "空调拆卸",
+                            icon: require("@/static/temp/cate/2.png"),
+                        },
+                        {
+                            id: 4,
+                            name: "热水器安装",
+                            icon: require("@/static/temp/cate/3.png"),
+                        },
+                        {
+                            id: 5,
+                            name: "油烟机安装",
+                            icon: require("@/static/temp/cate/4.png"),
+                        },
+                    ],
+                },
+                {
+                    id: 5,
+                    name: "电器安装",
+                    icon: "",
+                    child: [
+                        {
+                            id: 6,
+                            name: "空调安装",
+                            icon: require("@/static/temp/cate/2.png"),
+                        },
+                        {
+                            id: 7,
+                            name: "空调拆卸",
+                            icon: require("@/static/temp/cate/3.png"),
+                        },
+                        {
+                            id: 8,
+                            name: "热水器安装",
+                            icon: require("@/static/temp/cate/4.png"),
+                        },
+                    ],
+                },
+            ],
+        };
+    },
+    components: {
+        AppLayout,
+        AppCate,
+    },
+    onLoad() {},
+    onShow() {},
+    onReady() {},
+    onReachBottom() {},
+    onPullDownRefresh() {},
+    methods: {
+        clickParent(id) {
+            uni.navigateTo({
+                url: '/pages/service/list?id=' + id
+            });
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.search {
+    width: 100%;
+    height: 120rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .input-box {
+        width: 670rpx;
+        height: auto;
+        background-color: #fff;
+        border-radius: 10rpx;
+        display: flex;
+        justify-content: space-between;
+        line-height: 65rpx;
+        .icon,
+        .input,
+        .placeholder {
+            color: #bebebe;
+        }
+        .icon {
+            width: 85rpx;
+            height: 65rpx;
+            font-size: 30rpx;
+            text-align: center;
+        }
+        .input {
+            width: 585rpx;
+            height: 65rpx;
+            font-size: 28rpx;
+        }
+    }
+}
+</style>

src/pages/service/list.vue

@@ -0,0 +1,79 @@
+<template>
+    <app-layout btnType="back" title="服务列表" pageBackgroundColor="#FFFFFF">
+        <view class="cate">
+            <app-cate :offsetHeight="0" :data="data" cateType="child" />
+        </view>
+    </app-layout>
+</template>
+
+<script>
+import AppLayout from "@/components/layout/layout";
+import AppCate from "@/components/cate/cate";
+export default {
+    name: "service-list",
+    data() {
+        return {
+            data: [
+                {
+                    id: 1,
+                    name: "热门推荐",
+                    icon: "",
+                    child: [
+                        {
+                            id: 2,
+                            name: "空调安装",
+                            icon: require("@/static/temp/cate/1.png"),
+                        },
+                        {
+                            id: 3,
+                            name: "空调拆卸",
+                            icon: require("@/static/temp/cate/2.png"),
+                        },
+                        {
+                            id: 4,
+                            name: "热水器安装",
+                            icon: require("@/static/temp/cate/3.png"),
+                        },
+                        {
+                            id: 5,
+                            name: "油烟机安装",
+                            icon: require("@/static/temp/cate/4.png"),
+                        },
+                    ],
+                },
+                {
+                    id: 5,
+                    name: "电器安装",
+                    icon: "",
+                    child: [
+                        {
+                            id: 6,
+                            name: "空调安装",
+                            icon: require("@/static/temp/cate/2.png"),
+                        },
+                        {
+                            id: 7,
+                            name: "空调拆卸",
+                            icon: require("@/static/temp/cate/3.png"),
+                        },
+                        {
+                            id: 8,
+                            name: "热水器安装",
+                            icon: require("@/static/temp/cate/4.png"),
+                        },
+                    ],
+                },
+            ],
+        };
+    },
+    components: { AppLayout, AppCate },
+    onLoad() {},
+    onShow() {},
+    onReady() {},
+    onReachBottom() {},
+    onPullDownRefresh() {},
+    methods: {},
+};
+</script>
+
+<style lang="less" scoped></style>

src/static/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3642656 */
-  src: url('@/static/iconfont/iconfont.woff2?t=1666835957947') format('woff2'),
+  src: url('@/static/iconfont/iconfont.woff2?t=1675847767279') format('woff2'),
-       url('@/static/iconfont/iconfont.woff?t=1666835957947') format('woff'),
+       url('@/static/iconfont/iconfont.woff?t=1675847767279') format('woff'),
-       url('@/static/iconfont/iconfont.ttf?t=1666835957947') format('truetype');
+       url('@/static/iconfont/iconfont.ttf?t=1675847767279') format('truetype');
 }
 
 .iconfont {
@@ -12,6 +12,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-touxiang:before {
+  content: "\e60c";
+}
+
 .icon-guanbi:before {
   content: "\e64d";
 }
@@ -52,10 +56,6 @@
   content: "\e68d";
 }
 
-.icon-shenfenzhengfanmian:before {
-  content: "\e68e";
-}
-
 .icon-icon-truck:before {
   content: "\e60b";
 }

vue.config.js

@@ -3,7 +3,7 @@ module.exports = {
         loaderOptions: {
             less: {
                 globalVars: {
-                    tabBarHeight: '115rpx',
+                    tabBarHeight: '100rpx',
                     tabBarIconWidth: '40rpx',
                     tabBarIconHeight: '40rpx',
                     tabBarFontSize: '22rpx'