首页样式修改

Lou

2023-11-01 904e6a53f3e7c8e80f9156727c7be6ab9ad87d92

首页样式修改

 manifest.json

@@ -142,7 +142,7 @@
    "quickapp" : {},
    /* 小程序特有相关 */
    "mp-weixin" : {
        "appid" : "wx521ae71bcde281bc",
        "appid" : "wxdc5675f4df850da6",
        "setting" : {
            "urlCheck" : false,
            "minified" : true,

 pages.json

@@ -177,16 +177,22 @@
        "backgroundColor": "#4586FE"
    },
    "tabBar": {
        "custom": true,
        // "custom": true,
        "color": "#AFB8C3",
        "selectedColor": "#5086FA",
        "borderStyle": "white",
        "backgroundColor": "#ffffff",
        "list": [{
                "pagePath": "pages/home/index"
                "pagePath": "pages/home/index",
                "selectedIconPath": "static/img/tabbar-01-selected.png",
                "iconPath": "static/img/tabbar-01-selected.png",
                "text": "首页"
            },
            {
                "pagePath": "pages/user/center"
                "pagePath": "pages/user/center",
                "iconPath": "static/img/tabbar-03.png",
                "selectedIconPath": "static/img/tabbar-03-selected.png",
                "text": "我的"
            }
        ]
    }

 pages/home/index.vue

@@ -1,440 +1,171 @@
<template>

    <view class="container">

        <u-navbar height="48" bgColor="#5887f9" :autoBack="false" safeAreaInsetTop placeholder>

            <view slot="left">

                <u--text color="#ffffff" text="基层智治" size="18" />

    <view class="">

        <u-navbar height="48" :autoBack="false" safeAreaInsetTop placeholder>

            <view slot="left" class="flex">

                <text class="top">万达华府26栋1903室</text>

                <u-icon name="/static/icon/change-icon.png"></u-icon>

            </view>

        </u-navbar>



        <view class="main">

            <view class="main-bg">



        <view class="content">

            <view class="swiper">

                <u-swiper :list="swiperList"></u-swiper>

            </view>



            <view class="main-select" @click="selectBoxShow = !selectBoxShow">

                <u-icon name="map" color="#fff"></u-icon>

                <view>

                    当前场所：{{curSelectSite.name?curSelectSite.name:'暂无绑定场所信息'}}

                </view>



                <u-picker title="场所" :show="selectBoxShow" keyName="name" ref="uPicker" :columns="siteColumns"

                    @confirm="confirm" @change="changeHandler"></u-picker>

            </view>



            <view class="main-btn">

                <menu-list :menuData="btnList"></menu-list>

            </view>



            <view class="main-phone-house">

                <view v-if="gridDataList.length>0" class="phone-box">

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

                </view>



                <view v-if="hasMenu('楼盘表').length>0" class="house-box">

                    <box-title :title="'楼盘表'"></box-title>

                    <view class="content">

                        <grid-menu :gridData='item' v-for="(item, index) in houseDataList.slice(0, 6)" :key='index'

                            @click.native="pushPage(item)"></grid-menu>

                    </view>

                </view>

            </view>



            <view class="main-bt pb-40">

                <view v-if="liveList.length>0" class="mt-20">

                    <box-title :title="'生活'">

                        <template slot="titleMore">

                            <view style="color: red;">titleMore</view>

                        </template>

                    </box-title>

                    <view class="mt-20">

                        <view class="mt-20 b-c-w">

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

                        </view>

                    </view>

                </view>



                <view v-if="jobList.length>0" class="mt-20">

                    <box-title :title="'工作台'"></box-title>



                    <view class="mt-20 b-c-w">

                        <menu-list :border='true' :menuData="jobList"></menu-list>

                    </view>

                </view>



                <view class="mt-20 main-taska">

                    <box-title :title="'我的任务'"></box-title>



                    <view class="mt-20 b-c-w">

                        <view class="flex">

                            <view class="flex-1" v-for="(item, index) in taskTypeList" :key='index'>

                                <cur-menu class='boder-f7f8f9-1 p-all-16' :curMenu="item" :imgShow="false"

                                    :textShow="true"></cur-menu>

            <view class="">

                <u-grid :border="false"  col="4">

                    <u-grid-item v-for="(i,k) in menuList" :key="k"  >

                        <u-icon  :name="i.icon" :size="45"></u-icon>

                        <text class="f-26 mt-20">{{i.text}}</text>

                    </u-grid-item>

                </u-grid>

                <view class="section flex j-c-s-b mt-40">

                    <view class="section-item"  v-for="i in navList">

                        <image  class="section-item-bg" src="/static/icon/nav-bg-01.png" mode="aspectFill"></image>

                        <view class="item-box">

                            <view class="f-28">{{i.title}}</view>

                            <view class="flex j-c-s-b">

                                <text class="f-22">{{i.name}}</text>

                                <u-icon  :name="i.icon"></u-icon>

                            </view>

                        </view>

                        <u-cell-group :border='false'>

                            <u-cell class="boder-f7f8f9-1" :border='false' :title="item.title"

                                v-for="(item, index) in taskList" :key="index">

                                <view slot="right-icon">待处理 {{item.num}}</view>

                            </u-cell>

                        </u-cell-group>

                    </view>



                </view>

            </view>

			
            <view class="notic">

                <view class="notic-caption flex a-i-c j-c-s-b">

                    <view class="flex a-i-c">

                        <view class="line"></view>

                        <text class="f-32">通知公告</text>

                    </view>

                    <u-icon  name="arrow-right"></u-icon>

                </view>

                <view class="notic-list" v-for="i in 3">

                    <view class="f-28 mb-30">

                        新业态新就业群体现状调查问卷

                    </view>

                    <view class="flex a-i-c j-c-s-b">

                        <view class="f-28 flex a-i-c">

                            <view class="flex a-i-c mr-30">

                                <u-icon name="thumb-up-fill" size="24"  color="#CECECE"></u-icon>

                                <text class="f-24 c-99 ml-10">121</text>

                            </view>

                            <view class="flex a-i-c">

                                <u-icon name="eye-fill" size="24"  color="#CECECE"></u-icon>

                                <text class="f-24 c-99 ml-10">121</text>

                            </view>

                        </view>

                        <text class="f-24 c-99">2023-08-21</text>

                    </view>

					
                </view>

            </view>

			
        </view>



        <tabBar @change='change' :currentTab="0"></tabBar>

    </view>

</template>



<script>

    import tabBar from "@/components/tabBar/tabBar.vue";

    import curMenu from "@/components/curMenu/index.vue";

    import menuList from "@/components/menuList/index.vue";

    import gridMenu from "@/components/gridMenu/index.vue";

    import {

        getFuncList,

        getHouseList

    } from "@/api/doorplateAddress/doorplateAddress";



    export default {

        components: {

            tabBar,

            curMenu,

            menuList,

            gridMenu

        },



        data() {

            return {

                menuList: [],

                selectRole: {},

                selectBoxShow: false,

                siteColumns: [],

                curSelectSite: {},

                columnData: [],

                btnList: [{

                        imgUrl: '/static/img/sys.png',

                        title: '扫一扫',

                        imgWidth: 54,

                        imgHeight: 54

                swiperList: [

                    'https://cdn.uviewui.com/uview/swiper/swiper1.png',

                    'https://cdn.uviewui.com/uview/swiper/swiper2.png',

                    'https://cdn.uviewui.com/uview/swiper/swiper3.png',

                ],

                menuList: [{

                        icon: "/static/icon/nav-01.png",

                        text: "扫一扫"

                    },

                    {

                        imgUrl: '/static/img/bs.png',

                        title: '报事',

                        imgWidth: 54,

                        imgHeight: 54

                        icon: "/static/icon/nav-02.png",

                        text: "报事报修"

                    },

                    {

                        icon: "/static/icon/nav-03.png",

                        text: "便民热线"

                    },

                    {

                        icon: "/static/icon/nav-04.png",

                        text: "租客上报"

                    }

                ],

                gridDataList: [],

                houseDataList: [{

                    title: '-',

                    useSlot: true

                }],



                liveList: [],



                jobList: [],



                taskTypeList: [{

                        title: '一次性',

                        num: 1,

                navList: [

                    {

                        title:"物业",

                        name:"张三",

                        icon:"/static/icon/tel-green.png",

                        bgImg:"/static/nav-bg-01.png"

                    },

                    {

                        title: '周期性',

                        num: 0,

                    }

                ],



                taskList: [{

                        title: '综治任务',

                        num: 0

                        title:"综治网格",

                        name:"张三",

                        icon:"/static/icon/tel-orange.png",

                        bgImg:"/static/nav-bg-02.png"

                    },

                    {

                        title: '住建任务',

                        num: 0

                        title:"公安网格",

                        name:"张三",

                        icon:"/static/icon/tel-blue.png",

                        bgImg:"/static/nav-bg-03.png"

                    },

                    {

                        title: '公安任务',

                        num: 0

                    },

                ],

            }

        },



        onShow() {

            this.init()

        },



        computed: {

            hasMenu() {

                return (name) => {

                    let resultArr = []

                    resultArr = this.getMenu(name, this.menuList, resultArr)

                    if (resultArr.length > 0) {

                        return resultArr

                    } else {

                        return []

                    }



                }

            }

        },



        methods: {

            //初始化

            init() {

                this.curSelectSite = {}

                this.menuList = uni.getStorageSync("menu")

                this.selectRole = uni.getStorageSync("activeRole")

                this.getMenuList()

                this.getSiteList()

                uni.hideTabBar()

            },

            //获取场所列表

            async getSiteList() {

                console.log(this.selectRole)

                let type = null

                let roleName = this.selectRole.roleName

                console.log("roleName", roleName)

                if (roleName == '网格员' || roleName == '系统管理员') {

                    type = 1

                } else if (roleName == '场所负责人') {

                    type = 2

                } else if (roleName == '居民') {

                    type = 3

                }



                const res = await getFuncList(type, roleName)

                console.log(res, "-----------")

                let data = res.data

                this.siteColumns = []



                this.buildSiteColumn(data, 0)

                console.log(this.siteColumns)



            },



            buildSiteColumn(dataList, index) {

                if (dataList.length > 0) {

                    this.siteColumns[index] = dataList

                    if (dataList[0].children && dataList[0].children.length > 0) {

                        this.buildSiteColumn(dataList[0].children, index + 1)

                    }

                }

            },



            //获取首页菜单

            getMenuList() {

                console.log("当前角色菜单", this.menuList)

                this.getPhoneList()

                this.getLiveList()

                this.getWorkbenchList()

            },

            getPhoneList() {

                this.gridDataList = []

                const resultArr = this.hasMenu('快捷拨号')

                if (resultArr.length == 0) {

                    return

                }



                const topMenu = resultArr[0]



                topMenu.children.forEach(menu => {

                    this.gridDataList.push({

                        title: menu.name,

                        data: "无数据",

                        phone: "无"

                    })

                })

            },



            //获取生活菜单

            getLiveList() {

                this.liveList = []

                const resultArr = this.hasMenu('生活')

                if (resultArr.length == 0) {

                    return

                }



                const topMenu = resultArr[0]



                topMenu.children.forEach(menu => {

                    this.liveList.push({

                        imgUrl: menu.source,

                        title: menu.name,

                    })

                })

            },



            //获取工作台菜单

            getWorkbenchList() {

                this.jobList = []

                const resultArr = this.hasMenu('工作台')

                if (resultArr.length == 0) {

                    return

                }



                const topMenu = resultArr[0]



                topMenu.children.forEach(menu => {

                    this.jobList.push({

                        imgUrl: menu.source,

                        title: menu.name,

                    })

                })

            },



            // 获取楼盘表

            async getHouseDataList(name) {

                const res = await getHouseList(1, name)

                // 数据处理

                res.data.forEach(item => {

                    item.title = item.name

                    item.useSlot = true

                    delete item.name

                })

                this.houseDataList = res.data || [{

                    title: '-',

                    useSlot: true

                }]

            },







            getMenu(menuName, menuList, resultArr) {

                // console.log(menuList, menuName)

                for (var i = 0; i < menuList.length; i++) {

                    if (menuList[i].name == menuName) {

                        resultArr.push(menuList[i])

                    } else {

                        if (menuList[i].children && menuList[i].children.length) {

                            this.getMenu(menuName, menuList[i].children, resultArr);

                        }

                    }

                }



                return resultArr



            },



            change(index) {

                let url = index

                this.$u.func.globalNavigator(url, "switchTab")

            },

            changeHandler(e) {

                const {

                    columnIndex,

                    value,

                    values, // values为当前变化列的数组内容

                    index,

                    // 微信小程序无法将picker实例传出来，只能通过ref操作

                    picker = this.$refs.uPicker

                } = e

                // 当第一列值发生变化时，变化第二列(后一列)对应的选项

                if (columnIndex === 0 && this.columnData.length > 0) {

                    // picker为选择器this实例，变化第二列对应的选项

                    picker.setColumnValues(1, this.columnData[index])

                }

            },

            // 回调参数为包含columnIndex、value、values

            confirm(e) {

                console.log('confirm', e)

                this.curSelectSite = e.value[e.value.length - 1]

                this.selectBoxShow = false

                this.getHouseDataList(e.value[1].name)

            },



            // 页面跳转

            pushPage({id, title}) {
                if (id !== void 0) {
                    let url = `/subPackage/house/list/index?id=${id}&title=${title}`
                    this.$u.func.globalNavigator(url, "navTo")
                }

                ]

            }

        }

    }

</script>



<style lang="scss" scoped>

    .container {

        width: 100%;

        height: 100%;



        display: flex;

        flex-direction: column;

        background: #F9F9FA;

        color: #fff;

    .top {

        margin-right: 20rpx;

        font-size: 32rpx;

        font-weight: bold;

    }



        .main {

    .swiper {

        width: 100%;

        height: 320rpx;

    }



    .content {

        padding: 0 30rpx;

    }

    .section{

        .section-item{

            width: 216rpx;

            height:120rpx;

            position: relative;

            height: 0;

            flex: 1;

            overflow-y: auto;



            .main-bg {

                height: 36%;

                background: royalblue;

            }



            .main-select {

                margin: 0 6%;

                position: absolute;

                bottom: 74%;

                display: flex;

                align-items: center;

            }



            .main-btn {

                margin: 0 6%;

                position: absolute;

                top: 28%;

                width: 88%;

                height: 20%;

                background: #fff;

                border-radius: 10rpx;

                color: #000;

            }



            .main-phone-house {

                margin-top: 180rpx;

                width: 100%;



                .phone-box {

                    display: flex;



                    &>view {

                        margin: 0 16rpx;

                        height: 116rpx;

                        flex: 1;

                        background: linear-gradient(to right, #407BE9, #73A2F9);

                        border-radius: 10rpx;

                    }

                }



                .house-box {

                    .content {

                        display: flex;

                        flex-wrap: wrap;



                        &>view {

                            margin: 0 16rpx;

                            margin-top: 20rpx;

                            min-width: calc((100% - 16rpx * 6) / 3);

                            height: 66rpx;

                            background: linear-gradient(to right, #407BE9, #73A2F9);

                            border-radius: 33rpx;

                        }

                    }

                }

            }



            .main-bt {

                margin-top: 2%;

                width: 100%;

                color: #000;

            }

        }

        .section-item-bg{

            width: 216rpx;

            height:120rpx;

        }

        .item-box{

            width:216rpx;

            height:120rpx;

            position: absolute;

            top:0;

            left:0;

            padding:20rpx 20rpx 0;

            box-sizing: border-box;

        }

    }

    .notic{

        width:100%;

        .notic-caption{

            width:100%;

            padding:40rpx 0 0;

        }

        .line{

            width:6rpx;

            height:29rpx;

            background-color:#017BFC;

            margin-right:14rpx;

        }

        .notic-list{

            padding:30rpx 0;

            border-bottom:1px solid #f5f5f5;

        }

    }

</style>

 pages/home/index.vue.bak

New file
@@ -0,0 +1,440 @@
<template>
    <view class="container">
        <u-navbar height="48" bgColor="#5887f9" :autoBack="false" safeAreaInsetTop placeholder>
            <view slot="left">
                <u--text color="#ffffff" text="基层智治" size="18" />
            </view>
        </u-navbar>

        <view class="main">
            <view class="main-bg">

            </view>

            <view class="main-select" @click="selectBoxShow = !selectBoxShow">
                <u-icon name="map" color="#fff"></u-icon>
                <view>
                    当前场所：{{curSelectSite.name?curSelectSite.name:'暂无绑定场所信息'}}
                </view>

                <u-picker title="场所" :show="selectBoxShow" keyName="name" ref="uPicker" :columns="siteColumns"
                    @confirm="confirm" @change="changeHandler"></u-picker>
            </view>

            <view class="main-btn">
                <menu-list :menuData="btnList"></menu-list>
            </view>

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

                <view v-if="hasMenu('楼盘表').length>0" class="house-box">
                    <box-title :title="'楼盘表'"></box-title>
                    <view class="content">
                        <grid-menu :gridData='item' v-for="(item, index) in houseDataList.slice(0, 6)" :key='index'
                            @click.native="pushPage(item)"></grid-menu>
                    </view>
                </view>
            </view>

            <view class="main-bt pb-40">
                <view v-if="liveList.length>0" class="mt-20">
                    <box-title :title="'生活'">
                        <template slot="titleMore">
                            <view style="color: red;">titleMore</view>
                        </template>
                    </box-title>
                    <view class="mt-20">
                        <view class="mt-20 b-c-w">
                            <menu-list :menuData="liveList"></menu-list>
                        </view>
                    </view>
                </view>

                <view v-if="jobList.length>0" class="mt-20">
                    <box-title :title="'工作台'"></box-title>

                    <view class="mt-20 b-c-w">
                        <menu-list :border='true' :menuData="jobList"></menu-list>
                    </view>
                </view>

                <view class="mt-20 main-taska">
                    <box-title :title="'我的任务'"></box-title>

                    <view class="mt-20 b-c-w">
                        <view class="flex">
                            <view class="flex-1" v-for="(item, index) in taskTypeList" :key='index'>
                                <cur-menu class='boder-f7f8f9-1 p-all-16' :curMenu="item" :imgShow="false"
                                    :textShow="true"></cur-menu>
                            </view>
                        </view>
                        <u-cell-group :border='false'>
                            <u-cell class="boder-f7f8f9-1" :border='false' :title="item.title"
                                v-for="(item, index) in taskList" :key="index">
                                <view slot="right-icon">待处理 {{item.num}}</view>
                            </u-cell>
                        </u-cell-group>
                    </view>

                </view>
            </view>
        </view>

        <tabBar @change='change' :currentTab="0"></tabBar>
    </view>
</template>

<script>
    import tabBar from "@/components/tabBar/tabBar.vue";
    import curMenu from "@/components/curMenu/index.vue";
    import menuList from "@/components/menuList/index.vue";
    import gridMenu from "@/components/gridMenu/index.vue";
    import {
        getFuncList,
        getHouseList
    } from "@/api/doorplateAddress/doorplateAddress";

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

        data() {
            return {
                menuList: [],
                selectRole: {},
                selectBoxShow: false,
                siteColumns: [],
                curSelectSite: {},
                columnData: [],
                btnList: [{
                        imgUrl: '/static/img/sys.png',
                        title: '扫一扫',
                        imgWidth: 54,
                        imgHeight: 54
                    },
                    {
                        imgUrl: '/static/img/bs.png',
                        title: '报事',
                        imgWidth: 54,
                        imgHeight: 54
                    }
                ],
                gridDataList: [],
                houseDataList: [{
                    title: '-',
                    useSlot: true
                }],

                liveList: [],

                jobList: [],

                taskTypeList: [{
                        title: '一次性',
                        num: 1,
                    },
                    {
                        title: '周期性',
                        num: 0,
                    }
                ],

                taskList: [{
                        title: '综治任务',
                        num: 0
                    },
                    {
                        title: '住建任务',
                        num: 0
                    },
                    {
                        title: '公安任务',
                        num: 0
                    },
                ],
            }
        },

        onShow() {
            this.init()
        },

        computed: {
            hasMenu() {
                return (name) => {
                    let resultArr = []
                    resultArr = this.getMenu(name, this.menuList, resultArr)
                    if (resultArr.length > 0) {
                        return resultArr
                    } else {
                        return []
                    }

                }
            }
        },

        methods: {
            //初始化
            init() {
                this.curSelectSite = {}
                this.menuList = uni.getStorageSync("menu")
                this.selectRole = uni.getStorageSync("activeRole")
                this.getMenuList()
                this.getSiteList()
                uni.hideTabBar()
            },
            //获取场所列表
            async getSiteList() {
                console.log(this.selectRole)
                let type = null
                let roleName = this.selectRole.roleName
                console.log("roleName", roleName)
                if (roleName == '网格员' || roleName == '系统管理员') {
                    type = 1
                } else if (roleName == '场所负责人') {
                    type = 2
                } else if (roleName == '居民') {
                    type = 3
                }

                const res = await getFuncList(type, roleName)
                console.log(res, "-----------")
                let data = res.data
                this.siteColumns = []

                this.buildSiteColumn(data, 0)
                console.log(this.siteColumns)

            },

            buildSiteColumn(dataList, index) {
                if (dataList.length > 0) {
                    this.siteColumns[index] = dataList
                    if (dataList[0].children && dataList[0].children.length > 0) {
                        this.buildSiteColumn(dataList[0].children, index + 1)
                    }
                }
            },

            //获取首页菜单
            getMenuList() {
                console.log("当前角色菜单", this.menuList)
                this.getPhoneList()
                this.getLiveList()
                this.getWorkbenchList()
            },
            getPhoneList() {
                this.gridDataList = []
                const resultArr = this.hasMenu('快捷拨号')
                if (resultArr.length == 0) {
                    return
                }

                const topMenu = resultArr[0]

                topMenu.children.forEach(menu => {
                    this.gridDataList.push({
                        title: menu.name,
                        data: "无数据",
                        phone: "无"
                    })
                })
            },

            //获取生活菜单
            getLiveList() {
                this.liveList = []
                const resultArr = this.hasMenu('生活')
                if (resultArr.length == 0) {
                    return
                }

                const topMenu = resultArr[0]

                topMenu.children.forEach(menu => {
                    this.liveList.push({
                        imgUrl: menu.source,
                        title: menu.name,
                    })
                })
            },

            //获取工作台菜单
            getWorkbenchList() {
                this.jobList = []
                const resultArr = this.hasMenu('工作台')
                if (resultArr.length == 0) {
                    return
                }

                const topMenu = resultArr[0]

                topMenu.children.forEach(menu => {
                    this.jobList.push({
                        imgUrl: menu.source,
                        title: menu.name,
                    })
                })
            },

            // 获取楼盘表
            async getHouseDataList(name) {
                const res = await getHouseList(1, name)
                // 数据处理
                res.data.forEach(item => {
                    item.title = item.name
                    item.useSlot = true
                    delete item.name
                })
                this.houseDataList = res.data || [{
                    title: '-',
                    useSlot: true
                }]
            },



            getMenu(menuName, menuList, resultArr) {
                // console.log(menuList, menuName)
                for (var i = 0; i < menuList.length; i++) {
                    if (menuList[i].name == menuName) {
                        resultArr.push(menuList[i])
                    } else {
                        if (menuList[i].children && menuList[i].children.length) {
                            this.getMenu(menuName, menuList[i].children, resultArr);
                        }
                    }
                }

                return resultArr

            },

            change(index) {
                let url = index
                this.$u.func.globalNavigator(url, "switchTab")
            },
            changeHandler(e) {
                const {
                    columnIndex,
                    value,
                    values, // values为当前变化列的数组内容
                    index,
                    // 微信小程序无法将picker实例传出来，只能通过ref操作
                    picker = this.$refs.uPicker
                } = e
                // 当第一列值发生变化时，变化第二列(后一列)对应的选项
                if (columnIndex === 0 && this.columnData.length > 0) {
                    // picker为选择器this实例，变化第二列对应的选项
                    picker.setColumnValues(1, this.columnData[index])
                }
            },
            // 回调参数为包含columnIndex、value、values
            confirm(e) {
                console.log('confirm', e)
                this.curSelectSite = e.value[e.value.length - 1]
                this.selectBoxShow = false
                this.getHouseDataList(e.value[1].name)
            },

            // 页面跳转
            pushPage({id, title}) {
                if (id !== void 0) {
                    let url = `/subPackage/house/list/index?id=${id}&title=${title}`
                    this.$u.func.globalNavigator(url, "navTo")
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: column;
        background: #F9F9FA;
        color: #fff;
        font-size: 32rpx;

        .main {
            position: relative;
            height: 0;
            flex: 1;
            overflow-y: auto;

            .main-bg {
                height: 36%;
                background: royalblue;
            }

            .main-select {
                margin: 0 6%;
                position: absolute;
                bottom: 74%;
                display: flex;
                align-items: center;
            }

            .main-btn {
                margin: 0 6%;
                position: absolute;
                top: 28%;
                width: 88%;
                height: 20%;
                background: #fff;
                border-radius: 10rpx;
                color: #000;
            }

            .main-phone-house {
                margin-top: 180rpx;
                width: 100%;

                .phone-box {
                    display: flex;

                    &>view {
                        margin: 0 16rpx;
                        height: 116rpx;
                        flex: 1;
                        background: linear-gradient(to right, #407BE9, #73A2F9);
                        border-radius: 10rpx;
                    }
                }

                .house-box {
                    .content {
                        display: flex;
                        flex-wrap: wrap;

                        &>view {
                            margin: 0 16rpx;
                            margin-top: 20rpx;
                            min-width: calc((100% - 16rpx * 6) / 3);
                            height: 66rpx;
                            background: linear-gradient(to right, #407BE9, #73A2F9);
                            border-radius: 33rpx;
                        }
                    }
                }
            }

            .main-bt {
                margin-top: 2%;
                width: 100%;
                color: #000;
            }
        }
    }
</style>

 static/base.css

@@ -51,4 +51,37 @@

.boder-f7f8f9-1 {
    border: 1rpx solid #F7F8F9;
}
.f-20{
    font-size:20rpx;
}
.f-22{
    font-size:22rpx;
}
.f-24{
    font-size:24rpx;
}
.f-26{
    font-size:26rpx;
}
.f-28{
    font-size:28rpx;
}
.f-30{
    font-size:30rpx;
}
.f-32{
    font-size:32rpx;
}
.f-34{
    font-size:34rpx;
}
.f-36{
    font-size:36rpx;
}
.c-66{
    color:#666;
}
.c-99{
    color:#999;
}

 static/icon/change-icon.png

 static/icon/nav-01.png

 static/icon/nav-02.png

 static/icon/nav-03.png

 static/icon/nav-04.png

 static/icon/nav-bg-01.png

 static/icon/nav-bg-02.png

 static/icon/nav-bg-03.png

 static/icon/tel-blue.png

 static/icon/tel-green.png

 static/icon/tel-orange.png

 static/img/tabbar-01-selected.png

 static/img/tabbar-02.png

 static/img/tabbar-03-selected.png

 static/img/tabbar-03.png

 subPackage/workbench/components/lineItem.vue

@@ -10,7 +10,7 @@
            </view>

            <view class="r" v-else>
                <slot :name="item.useSlot" :scope="item"></slot>
                <slot name="item.useSlot" scope="item"></slot>
            </view>
        </view>
    </view>