首页文件修改

shuishen

2023-10-28 ed8a450409d89a448b4394300d33ebc2fd31fe0d

首页文件修改

 App.vue

@@ -339,6 +339,10 @@
</script>
<style lang="scss">
    @import "./static/iconfont.css";
    @import "./static/base.css";
    @import "./static/flex.css";
    @import "./static/margin.css";
    @import "./static/padding.css";
    /*uview全局样式*/
    @import "uview-ui/index.scss";


 components/curMenu/index.vue

@@ -1,7 +1,10 @@
<template>
        <view class="menu-box" @click="curMenuClick(curMenu)">
            <view>
            <view v-if="imgShow">
                <u--image :src="curMenu.imgUrl" :width='curMenu.imgWidth || 54' :height='curMenu.imgHeight || 54' shape="circle"></u--image>
            </view>
            <view v-if="textShow" :style="{height: curMenu.numHeight ? curMenu.numHeight + 'px' : '56rpx'}">
                {{curMenu.num}}
            </view>
            <view :style="{height: curMenu.titleHeight ? curMenu.titleHeight + 'px' : '56rpx'}">
                {{curMenu.title}}
@@ -17,7 +20,17 @@
                default: () => {
                    return {}
                }
            }
            },
				
            imgShow: {
                type: Boolean,
                default: true
            },
			
            textShow: {
                type: Boolean,
                default: false
            },
        },
        
        methods: {

 components/gridMenu/index.vue

@@ -1,16 +1,22 @@
<template>
    <view class="cur-container">
        <view>
            {{gridData.title}}
        <view v-if="!gridData.useSlot">
            <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>
        <view>
            <view class="l">
                {{gridData.data}}
            </view>
            <view class="r">
                <u-icon name="phone-fill" color="#fff"></u-icon>
                {{gridData.phone}}
            </view>

        <view class="slot-box" v-else>
            {{gridData.title}}
        </view>
    </view>
</template>
@@ -33,33 +39,45 @@

<style lang="scss" scoped>
    .cur-container {
        padding: 10rpx;
        display: flex;
        flex-direction: column;
		
        & > view:first-child {
            height: 60%;

        &>view {
            flex: 1;
            padding: 10rpx;
            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 {
            flex-direction: column;

            &>view:first-child {
                height: 60%;
                display: flex;
                align-items: center;
                justify-content: flex-start;
            }
			
            .r {

            &>view:last-child {
                height: 40%;
                display: flex;
                justify-content: flex-end;
                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;
                }
            }
        }

        .slot-box {
            padding: 10rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
</style>

 components/menuList/index.vue

@@ -1,6 +1,6 @@
<template>
    <view class="cur-container">
        <cur-menu class="child-menu" v-for="(item, index) in menuData" :curMenu="item" :key="index"></cur-menu>
        <cur-menu :class="{'boder-f7f8f9-1': border}" class="up-down-0-20 child-menu" v-for="(item, index) in menuData" :curMenu="item" :key="index"></cur-menu>
    </view>
</template>

@@ -12,7 +12,12 @@
            menuData: {
                type: Array,
                default: () => []
            }
            },
			
            border: {
                type: Boolean,
                default: false
            },
        },
        
        components: {
@@ -24,10 +29,13 @@
<style lang="scss" scoped>
    .cur-container {
        display: flex;
        flex-wrap: wrap;
        height: 100%;
        
        .child-menu {
            flex: 1;
            min-width: calc(100% / 3);
            box-sizing: border-box;
        }
    }
</style>

 pages/home/index.vue

@@ -25,16 +25,53 @@
                <menu-list :menuData="btnList"></menu-list>
            </view>

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

            <view class="main-bt">
                <view class="main-live">
                    <menu-list :menuData="liveList"></menu-list>
            <view class="main-phone-house">
                <view class="phone-box">
                    <grid-menu :gridData='item' v-for="(item, index) in gridDataList" :key='index'></grid-menu>
                </view>

                <view class="main-taska">
                <view class="house-box">
                    <box-title :title="'楼盘表'"></box-title>
                    <view class="content">
                        <grid-menu :gridData='item' v-for="(item, index) in houseDataList" :key='index'></grid-menu>
                    </view>
                </view>
            </view>

            <view class="main-bt pb-40">
                <view class="mt-20">
                    <box-title :title="'生活'"></box-title>

                    <view class="mt-20 b-c-w">
                        <menu-list :menuData="liveList"></menu-list>
                    </view>
                </view>

                <view 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>
@@ -46,12 +83,14 @@

<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";

    export default {
        components: {
            tabBar,
            curMenu,
            menuList,
            gridMenu
        },
@@ -89,8 +128,27 @@
                        phone: '无'
                    }
                ],
                liveList: [

                houseDataList: [
                    {
                        title: '万达广场',
                        useSlot: true
                    },
                    {
                        title: '万达晶座',
                        useSlot: true
                    },
                    {
                        title: '万达华府',
                        useSlot: true
                    },
                    {
                        title: '万达华府',
                        useSlot: true
                    }
                ],

                liveList: [{
                        imgUrl: '/static/img/ggbs.png',
                        title: '公共报事',
                        imgWidth: 40,
@@ -108,6 +166,68 @@
                        imgWidth: 40,
                        imgHeight: 40
                    }
                ],

                jobList: [{
                        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
                    },
                    {
                        imgUrl: '/static/img/zhsb.png',
                        title: '标签事件',
                        imgWidth: 40,
                        imgHeight: 40
                    },
                    {
                        imgUrl: '/static/img/zhsb.png',
                        title: '场所维护',
                        imgWidth: 40,
                        imgHeight: 40
                    },
                    {
                        imgUrl: '/static/img/zhsb.png',
                        title: '报事审核',
                        imgWidth: 40,
                        imgHeight: 40
                    }
                ],

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

                taskList: [{
                        title: '综治任务',
                        num: 0
                    },
                    {
                        title: '住建任务',
                        num: 0
                    },
                    {
                        title: '公安任务',
                        num: 0
                    },
                ],
            }
        },
@@ -186,37 +306,43 @@
                color: #000;
            }

            .main-phone {
                display: flex;
                position: absolute;
                top: 52%;
            .main-phone-house {
                margin-top: 180rpx;
                width: 100%;
                height: 12%;

                view {
                    margin: 0 16rpx;
                    flex: 1;
                    background: linear-gradient(to right, #407BE9, #73A2F9);
                    border-radius: 10rpx;
                .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 {
                position: absolute;
                top: 66%;
                margin-top: 2%;
                width: 100%;
                color: #000;

                .main-live {
                    height: 180rpx;
                    background: #fff;
                }

                .main-taska {
                    margin-top: 16rpx;
                    height: 240rpx;
                    background: #fff;
                }
            }
        }
    }

 pages/login/index.vue

@@ -20,9 +20,6 @@
        <view class="statement">
            仅限湖北省水库管理人员使用
        </view>



    </view>
</template>


 static/base.css

New file
@@ -0,0 +1,54 @@
.content-center {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.b-r-6 {
    border-radius: 6rpx;
}

.b-r-20 {
    border-radius: 20rpx;
}

.b-c-w {
    background-color: #fff;
}

.cursor-p {
    cursor: pointer;
}

.f-c-black {
    color: #000;
}

.overflow-h {
    overflow: hidden;
}

.relative {
    position: relative;
}

.b-s-b {
    box-sizing: border-box;
}

.text-align-l {
    text-align: left
}

.nowrap-ellipsis-hidden {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.boder-f7f8f9-1 {
    border: 1rpx solid #F7F8F9;
}

 static/flex.css

New file
@@ -0,0 +1,61 @@
.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.flex-3 {
  flex: 3;
}

.flex-5 {
  flex: 5;
}

.flex-8 {
  flex: 8;
}

.a-i-c {
  align-items: center;
}

.flex_base {
  display: flex;
  align-items: center;
  justify-content: center;
}

.j-c-s-a {
  justify-content: space-around;
}

.j-c-s-b {
  justify-content: space-between;
}

.j-c-c {
  justify-content: center;
}

.f-d-c {
  flex-direction: column;
}

.j-c-f-s {
  justify-content: flex-start;
}

.j-c-f-e {
  justify-content: flex-end;
}

.flex-wrap {
  flex-wrap: wrap;
}

 static/margin.css

New file
@@ -0,0 +1,148 @@
.around-m-5 {
    margin: 0 5rpx;
}

.around-m-20 {
    margin: 0 20rpx;
}

.around-m-22 {
    margin: 0 22rpx;
}

.up-down-m-10 {
    margin-top: 10rpx;
    margin-bottom: 10rpx;
}

.m-all-10 {
    margin: 10rpx;
}

.m-all-20 {
    margin: 20rpx;
}

.mt-0 {
    margin-top: 0;
}

.mt-4 {
    margin-top: 4rpx;
}

.mt-6 {
    margin-top: 6rpx;
}

.mt-8 {
    margin-top: 8rpx !important;
}

.mt-9 {
    margin-top: 9rpx;
}

.mt--10 {
    margin-top: -10rpx;
}

.mt-10 {
    margin-top: 10rpx;
}

.mt-16 {
    margin-top: 16rpx;
}

.mt-20 {
    margin-top: 20rpx;
}

.mt-55 {
    margin-top: 55rpx;
}

.ml-0 {
    margin-left: 0;
}

.ml--1 {
    margin-left: -1rpx;
}

.ml-4 {
    margin-left: 4rpx;
}

.ml--5 {
    margin-left: -5rpx;
}

.ml-5 {
    margin-left: 5rpx;
}

.ml-8 {
    margin-left: 8rpx;
}

.ml-10 {
    margin-left: 10rpx;
}

.ml-15 {
    margin-left: 15rpx;
}

.ml-16 {
    margin-left: 16rpx;
}

.ml-20 {
    margin-left: 20rpx;
}

.ml-22 {
    margin-left: 22rpx;
}

.ml-30 {
    margin-left: 30rpx;
}

.ml-150 {
    margin-left: 150rpx;
}

.mr--1 {
    margin-right: -1rpx;
}

.mr-6 {
    margin-right: 6rpx;
}

.mr-10 {
    margin-right: 10rpx;
}

.mr-20 {
    margin-right: 20rpx;
}

.mr-30 {
    margin-right: 30rpx;
}

.mb-10 {
    margin-bottom: 10rpx;
}

.mb-20 {
    margin-bottom: 20rpx;
}

.mb-30 {
    margin-bottom: 30rpx;
}

 static/padding.css

New file
@@ -0,0 +1,59 @@
.around-p-10 {
  padding: 0 10rpx;
}

.around-p-20 {
  padding: 0 20rpx;
}

.up-down-0-10  {
  padding: 10rpx 0;
}

.up-down-0-20  {
  padding: 20rpx 0;
}

.p-all-10 {
  padding: 10rpx;
}

.p-all-16 {
  padding: 16rpx;
}

.p-all-20 {
  padding: 20rpx;
}

.pt-0 {
  padding-top: 0rpx;
}

.pt-10 {
  padding-top: 10rpx;
}

.pt-16 {
  padding-top: 16rpx;
}

.pt-20 {
  padding-top: 20rpx;
}

.pl-1 {
  padding-left: 1rpx;
}

.pr-1 {
  padding-right: 1rpx;
}

.pb-20 {
  padding-bottom: 20rpx;
}

.pb-40 {
  padding-bottom: 40rpx;
}