组件封装

zhongrj

2023-10-27 952e590ac20e67d73e94a5127e36e34a4eda3b16

组件封装

 components/curMenu/index.vue

@@ -1,9 +1,9 @@
<template>
        <view class="menu-box" @click="curMenuClick(curMenu)">
            <view>
                <u--image :src="curMenu.imgUrl" :width='curMenu.imgWidth || 54' :height='curMenu.height || 54' shape="circle"></u--image>
                <u--image :src="curMenu.imgUrl" :width='curMenu.imgWidth || 54' :height='curMenu.imgHeight || 54' shape="circle"></u--image>
            </view>
            <view :style="{height: curMenu.height || '56rpx'}">
            <view :style="{height: curMenu.titleHeight ? curMenu.titleHeight + 'px' : '56rpx'}">
                {{curMenu.title}}
            </view>
        </view>

 components/gridMenu/index.vue

New file
@@ -0,0 +1,65 @@
<template>
    <view class="cur-container">
        <view>
            {{gridData.title}}
        </view>
        <view>
            <view class="l">
                {{gridData.data}}
            </view>
            <view class="r">
                <u-icon name="phone-fill" color="#fff"></u-icon>
                {{gridData.phone}}
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            gridData: {
                type: Object,
                default: () => {
                    return {
                        data: '无数据',
                        phone: '无'
                    }
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .cur-container {
        padding: 10rpx;
        display: flex;
        flex-direction: column;
		
        & > view:first-child {
            height: 60%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }
		
        & > view:last-child {
            height: 40%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 24rpx;
			
            .l {
                justify-content: flex-start;
            }
			
            .r {
                display: flex;
                justify-content: flex-end;
                align-items: center;
            }
        }
    }
</style>

 pages/home/index.vue

@@ -26,14 +26,12 @@
            </view>

            <view class="main-phone">
                <view></view>
                <view></view>
                <view></view>
                <grid-menu :gridData='item' v-for="(item, index) in gridDataList" :key='index'></grid-menu>
            </view>

            <view class="main-bt">c
            <view class="main-bt">
                <view class="main-live">

                    <menu-list :menuData="liveList"></menu-list>
                </view>

                <view class="main-taska">
@@ -49,11 +47,13 @@
<script>
    import tabBar from "@/components/tabBar/tabBar.vue";
    import menuList from "@/components/menuList/index.vue";
    import gridMenu from "@/components/gridMenu/index.vue";

    export default {
        components: {
            tabBar,
            menuList
            menuList,
            gridMenu
        },

        data() {
@@ -64,8 +64,7 @@
                    ['中国', '美国']
                ],
                columnData: [],
                btnList: [
                    {
                btnList: [{
                        imgUrl: '/static/img/sys.png',
                        title: '扫一扫'
                    },
@@ -73,7 +72,43 @@
                        imgUrl: '/static/img/bs.png',
                        title: '报事'
                    }
                ]
                ],
                gridDataList: [{
                        title: '物业',
                        data: '无数据',
                        phone: '无'
                    },
                    {
                        title: '综治网格',
                        data: '无数据',
                        phone: '无'
                    },
                    {
                        title: '公安网格',
                        data: '无数据',
                        phone: '无'
                    }
                ],
                liveList: [
                    {
                        imgUrl: '/static/img/ggbs.png',
                        title: '公共报事',
                        imgWidth: 40,
                        imgHeight: 40
                    },
                    {
                        imgUrl: '/static/img/bmrx.png',
                        title: '便民热线',
                        imgWidth: 40,
                        imgHeight: 40
                    },
                    {
                        imgUrl: '/static/img/zhsb.png',
                        title: '租户上报',
                        imgWidth: 40,
                        imgHeight: 40
                    }
                ],
            }
        },

@@ -170,6 +205,7 @@
                position: absolute;
                top: 66%;
                width: 100%;
                color: #000;

                .main-live {
                    height: 180rpx;

 static/img/bmrx.png

 static/img/ggbs.png

 static/img/zhsb.png