展示顺序调整，标签统计的样式调整

shuishen

2023-12-20 8a6ebefd7583478aec94b6d5fd3d5a22d2245991

展示顺序调整，标签统计的样式调整

 src/views/district/index.vue

@@ -47,6 +47,62 @@
                dialogClickModal: false,
                column: [
                    {
                        parent: false,
                        label: "小区名称",
                        prop: "name",
                        searchSpan: 5,
                        search: true,
                        type: 'tree',
                        dicUrl: `/api/blade-district/district/getDistrictTree`,
                        props: {
                            label: "name",
                            value: "id"
                        },
                        defaultExpandedKeys: ["361102003"],
                        span: 12,
                        labelWidth: 120,
                        width: 220,
                        overHidden: true,
                        rules: [
                            {
                                required: true,
                                message: "请选择小区",
                                trigger: "blur",
                            },
                        ],
                    },

                    {
                        label: "小区图片",
                        prop: "picUrl",
                        width: 80,
                        type: "upload",
                        listType: "picture-img",
                        action: "/api/blade-resource/oss/endpoint/put-file",
                        propsHttp: {
                            res: "data",
                            url: "link",
                        },
                        span: 24,
                    },

                    {
                        label: "小区简介",
                        prop: "remark",
                        component: "AvueUeditor",
                        options: {
                            action: "/api/blade-resource/oss/endpoint/put-file",
                            props: {
                                res: "data",
                                url: "link",
                            },
                        },
                        hide: true,
                        minRows: 6,
                        span: 24,
                    },

                    {
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
@@ -54,6 +110,7 @@
                        label: "所属街道",
                        prop: "townStreetName",
                    },

                    {
                        label: "所属社区",
                        prop: "communityCode",
@@ -74,6 +131,7 @@
                            },
                        ],
                    },

                    {
                        addDisplay: false,
                        editDisplay: false,
@@ -83,34 +141,6 @@
                        prop: "gridName",
                    },

                    {
                        label: "小区名称",
                        prop: "name",
                        searchSpan: 4,
                        search: true,
                        width: 260,
                        rules: [
                            {
                                required: true,
                                message: "请输入小区名称",
                                trigger: "blur",
                            },
                        ],
                    },

                    {
                        label: "小区图片",
                        prop: "picUrl",
                        width: 80,
                        type: "upload",
                        listType: "picture-img",
                        action: "/api/blade-resource/oss/endpoint/put-file",
                        propsHttp: {
                            res: "data",
                            url: "link",
                        },
                        span: 24,
                    },
                    {
                        label: "地址",
                        prop: "address",
@@ -122,22 +152,6 @@
                                trigger: "blur",
                            },
                        ],
                    },

                    {
                        label: "小区简介",
                        prop: "remark",
                        component: "AvueUeditor",
                        options: {
                            action: "/api/blade-resource/oss/endpoint/put-file",
                            props: {
                                res: "data",
                                url: "link",
                            },
                        },
                        hide: true,
                        minRows: 6,
                        span: 24,
                    },
                ],
            },

 src/views/place/index.vue

@@ -149,30 +149,6 @@
                dialogClickModal: false,
                column: [
                    {
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        width: 96,
                        label: "所属街道",
                        prop: "townStreetName",
                    },
                    {
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        width: 160,
                        label: "所属社区",
                        prop: "neiName",
                    },
                    {
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        width: 96,
                        label: "所属网格",
                        prop: "gridName",
                    },
                    {
                        label: "场所名称",
                        prop: "placeName",
                        searchSpan: 4,
@@ -271,6 +247,32 @@
                        },
                        span: 24,
                    },

                    {
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        width: 96,
                        label: "所属街道",
                        prop: "townStreetName",
                    },
                    {
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        width: 160,
                        label: "所属社区",
                        prop: "neiName",
                    },
                    {
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        width: 96,
                        label: "所属网格",
                        prop: "gridName",
                    },

                    {
                        label: "位置",
                        prop: "localtion",

 src/views/userHouse/components/boxTitle.vue

@@ -2,28 +2,26 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-04-11 18:14:04
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-12-20 18:02:20
 * @LastEditTime: 2023-12-20 18:52:26
 * @FilePath: \jczz_web\src\views\userHouse\components\boxTitle.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!--
 * @name: name
 * @description: Description
 * @lastEditors: Francis
 * @date: Do not edit
 * @lastEditTime: Do not edit
 * @filePath: Do not edit
-->
<template>
    <div class="box-title-container flex j-c-s-b"
        :style="{ margin: margin, height: boxHeight + 'px', lineHeight: boxHeight + 'px' }">
        <div class="title-name">
            <span>{{ title }}</span>
            <slot name="icon"></slot>
        </div>
    <div class="titleContent">
        <!-- <div class="title1" data-color="red"></div> -->

        <div class="region-more">
            <div class="region">
                <slot name="region"></slot>
            </div>
            <div class="more">
                <slot name="more"></slot>
            </div>
        </div>
        <div :class="'title title' + classVal">
            {{ title }}</div>
    </div>
</template>

@@ -35,67 +33,452 @@
            type: String,
            default: ''
        },
        margin: {
            type: String,
            default: "0"
        },
        boxHeight: {

        classVal: {
            type: Number,
            default: 36
        }
    }
}
</script>

<style lang="scss" scoped>
.flex {
    display: flex;
}

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

.box-title-container {

    .title-name {
        display: flex;
        align-items: center;
        padding-left: 10px;
        position: relative;
        font-size: 20px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #333333;

        &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: 4px;
            height: 18px;
            background: #1890FF;
            border-radius: 2px 2px 2px 2px;
            opacity: 1;
            transform: translate(0, -50%);
        }
    }

    .region {
        font-size: 20px;
        font-family: Alibaba PuHuiTi-Bold, Alibaba PuHuiTi;
        font-weight: bold;
        color: #333333;
    }

    .more {
        padding-right: 10px;
        font-size: 15px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #1890FF;
        cursor: pointer;
.titleContent {
    >div {
        margin: 15px;
    }
}
</style>

.title {
    height: 32px;
    font-size: 22px;
    font-weight: 600;
    line-height: 32px;
    margin-left: 5px;
    padding-left: 5px;
    position: relative;
    color: #000;
    z-index: 0;
}

.title1 {
    padding-left: 15px;

    &:after {
        content: " ";
        width: 4px;
        height: 20px;
        background: #12a3f5;
        position: absolute;
        left: 0;
        top: 6px;
        border-radius: 2px;
    }
}

.title2 {
    padding-left: 15px;

    &:after {
        content: " ";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #12a3f5;
        position: absolute;
        left: 0;
        top: 12px;
    }
}


.title3 {
    &:after {
        content: " ";
        position: absolute;
        bottom: 0;
        left: 0;
        position: absolute;
        height: 2px;
        width: 100%;
        background: linear-gradient(to right, #01DFE3, rgba(255, 255, 255, 0));

    }
}


.title4 {
    &:after {
        content: attr(data-text);
        position: absolute;
        display: inline-block;
        bottom: -8px;
        left: 5px;
        opacity: 0.2;
        z-index: 0;
        text-align: right;
        transform: rotateY(30deg);
        transform: scaleY(30deg);

    }
}


.title5 {
    color: #10faf8;
    padding-left: 80px;
    line-height: 22px;
    position: relative;
    border-bottom: 2px solid linear-gradient(to right, #01DFE3, rgba(255, 255, 255, 0));

    &:after {
        content: "";
        position: absolute;
        bottom: 0;
        top: 0;
        left: 18px;
        width: 50px;
        height: 18px;
        transform: skewX(35deg);
        background: linear-gradient(to right,
                #2d83fa,
                #10faf8);
    }

    &:before {
        content: "|||";
        display: inline-block;
        font-weight: 900;
        color: #FFF;
        line-height: 30px;
        font-size: 18px;
        position: absolute;
        position: absolute;
        top: -8px;
        left: 0;
        color: #2d83fa;
        transform: skewX(35deg);
    }
}

.title6 {
    color: #C6D039;
    padding-left: 80px;
    line-height: 22px;
    position: relative;
    border-bottom: 2px solid linear-gradient(to right, #01DFE3, rgba(255, 255, 255, 0));

    &:after {
        content: "";
        position: absolute;
        bottom: 0;
        top: 0;
        left: 18px;
        width: 50px;
        height: 18px;
        transform: skewX(35deg);
        background: linear-gradient(to right,
                #4BF15A,
                #C6D039);
    }

    &:before {
        content: "|||";
        display: inline-block;
        font-weight: 900;
        color: #FFF;
        line-height: 30px;
        font-size: 18px;
        position: absolute;
        position: absolute;
        top: -8px;
        left: 0;
        color: #4BF15A;
        transform: skewX(35deg);
    }
}

.title7 {

    &:after {
        content: "";
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        width: 180px;
        height: 100%;
        opacity: 0.3;
        background: linear-gradient(to right,
                #4BF15A,
                #4bf15900);
    }

    &:before {
        content: " ";
        position: absolute;
        bottom: 0;
        left: 0;
        position: absolute;
        height: 2px;
        width: 100%;
        background: linear-gradient(to right, #4BF15A, rgba(255, 255, 255, 0));
    }
}

.title8 {
    border-radius: 16px;
    border: 1px solid #e8e9fb;
    box-shadow: 0 0 10px #e8e9fb;
    text-align: center;
    width: 160px;
    color: #12a3f5;

    &:before {
        content: "";
        width: 300%;
        height: 2px;
        background: #e8e9fb;
        position: absolute;
        top: 15px;
        left: 100%;
        background: linear-gradient(to right, #e8e9fb, rgba(255, 255, 255, 0));
    }
}

.title9 {
    background: #ECF8FF;
    border-top-left-radius: 5px;
    padding-left: 20px;

    &:before {
        content: "";
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        width: 4px;
        height: 100%;
        background: #50BFFF;
        position: absolute;
        top: 0;
        left: 0;
    }
}

.title10 {
    background: #FFF6F7;
    border-top-left-radius: 5px;
    padding-left: 20px;

    &:before {
        content: "";
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        width: 4px;
        height: 100%;
        background: #FE6C6F;
        position: absolute;
        top: 0;
        left: 0;
    }
}



.title11 {
    display: inline-block;
    position: relative;
    width: 150px;
    height: 32px;
    line-height: 32px;
    padding-left: 15px;
    background: #50BFFF;
    left: -8px;
    color: #FFF;

    &:before {
        content: "";
        position: absolute;
        height: 0;
        width: 0;
        border-bottom: 8px solid #4396c5;
        border-left: 8px solid transparent;
        top: -8px;
        left: 0;
    }

    &:after {
        content: "";
        position: absolute;
        height: 0;
        width: 0;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-left: 8px solid #50BFFF;
        right: -8px;
    }
}

.title12 {
    position: relative;
    width: 160px;
    padding-left: 10px;
    // top: 15px;
    // padding: 8px 10px;
    background: #00B3ED;
    box-shadow: -1px 2px 4px rgba(0, 0, 0, 0.5);
    color: #FFF;
    // height: 40px;

    &:before {
        position: absolute;
        content: "";
        display: block;
        width: 7px;
        height: 100%;
        padding: 0 0 7px;
        top: 0;
        left: -7px;
        background: inherit;
        border-radius: 5px 0 0 5px;
    }

    &:before {
        position: absolute;
        content: "";
        display: block;
        width: 5px;
        height: 5px;
        background: rgba(0, 0, 0, 0.35);
        bottom: -5px;
        left: -5px;
        border-radius: 5px 0 0 5px;
    }

}

.title13 {
    border-left: 2px solid #FE6C6F;

    &:after {
        content: " ";
        position: absolute;
        bottom: 0;
        left: 0;
        position: absolute;
        height: 2px;
        width: 60%;
        background: linear-gradient(to right, #FE6C6F, rgba(255, 255, 255, 0));
    }

    &::before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        position: absolute;
        height: 2px;
        width: 30%;
        background: linear-gradient(to right, #FE6C6F, rgba(255, 255, 255, 0));
    }
}

.title14 {
    border-left: 2px solid #01DFE3;

    &:after {
        content: " ";
        position: absolute;
        bottom: 0;
        left: 0;
        position: absolute;
        height: 2px;
        width: 60%;
        background: linear-gradient(to right, #01DFE3, rgba(255, 255, 255, 0));
    }

    &::before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        position: absolute;
        height: 2px;
        width: 30%;
        background: linear-gradient(to right, #01DFE3, rgba(255, 255, 255, 0));
    }
}

.title15 {
    color: #FFF;
    padding-left: 50px;
    background: linear-gradient(-210deg, transparent 1.5em, #01DFE3 0);

    &::before {
        content: '';
        display: block;
        width: 1.73em;
        height: 3em;
        position: absolute;
        background: linear-gradient(-60deg, #577b98 50%, transparent 0);
        left: -3px;
        top: 0;
        border-bottom-left-radius: inherit;
        transform: translateY(-0.5em) rotate(30deg);
        transform-origin: bottom right;
        box-shadow: .2em .2em .3em -.1em rgba(0, 0, 0, .15);
    }
}

.title16 {
    color: #FFF;
    padding-left: 50px;
    background: linear-gradient(-210deg, transparent 1.5em, #FE6C6F 0);

    &::before {
        content: '';
        display: block;
        width: 1.73em;
        height: 3em;
        position: absolute;
        background: linear-gradient(-60deg, #f18384 50%, transparent 0);
        left: -3px;
        top: 0;
        border-bottom-left-radius: inherit;
        transform: translateY(-0.5em) rotate(30deg);
        transform-origin: bottom right;
        box-shadow: .2em .2em .3em -.1em rgba(0, 0, 0, .15);
    }
}

.title17 {
    &:after {
        content: " ";
        position: absolute;
        bottom: 0;
        left: 0;
        position: absolute;
        height: 100%;
        width: 100%;
        animation: animation3 1s linear infinite;
        background: linear-gradient(135deg, #01DFE3 0.25em, transparent 0.25em) -0.5em 0, linear-gradient(225deg, #01DFE3 0.25em, transparent 0.25em) -0.5em 0, linear-gradient(315deg, rgba(238, 161, 99, 0.25) 0.25em, transparent 0.25em) 0 0, linear-gradient(45deg, rgba(238, 161, 99, 0.25) 0.25em, transparent 0.25em) 0 0;
        background-size: 0.75em 0.75em;
        opacity: 0.3;

    }
}

.title18 {
    &:after {
        content: " ";
        position: absolute;
        bottom: 0;
        left: 0;
        position: absolute;
        height: 100%;
        width: 100%;
        opacity: 0.3;
        animation: animation2 1s linear infinite;
        background: repeating-linear-gradient(45deg, #01DFE3 0, #01DFE3 0.25em, transparent 0.25em, transparent 0.5em);
        background-size: 0.75em 0.75em;
    }
}
</style>

 src/views/userHouse/houseHoldList.vue

@@ -182,30 +182,6 @@
                menuFixed: 'right',
                column: [
                    {
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        width: 96,
                        label: "所属街道",
                        prop: "townStreetName",
                    },
                    {
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        width: 160,
                        label: "所属社区",
                        prop: "neiName",
                    },
                    {
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        width: 96,
                        label: "所属网格",
                        prop: "gridName",
                    },
                    {
                        width: 96,
                        label: "姓名",
                        prop: "name",
@@ -266,6 +242,31 @@
                    },

                    {
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        width: 96,
                        label: "所属街道",
                        prop: "townStreetName",
                    },
                    {
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        width: 160,
                        label: "所属社区",
                        prop: "neiName",
                    },
                    {
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        width: 96,
                        label: "所属网格",
                        prop: "gridName",
                    },

                    {
                        width: 132,
                        label: "地址",
                        prop: "address",

 src/views/userHouse/houseList.vue

@@ -206,30 +206,6 @@
                menuWidth: 340,
                column: [
                    {
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        width: 96,
                        label: "所属街道",
                        prop: "townStreetName",
                    },
                    {
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        width: 160,
                        label: "所属社区",
                        prop: "neiName",
                    },
                    {
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        width: 96,
                        label: "所属网格",
                        prop: "gridName",
                    },
                    {
                        label: "房屋编号",
                        prop: "houseCode",
                        width: 180,
@@ -254,6 +230,30 @@
                        },],
                    },
                    {
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        width: 96,
                        label: "所属街道",
                        prop: "townStreetName",
                    },
                    {
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        width: 160,
                        label: "所属社区",
                        prop: "neiName",
                    },
                    {
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        width: 96,
                        label: "所属网格",
                        prop: "gridName",
                    },
                    {
                        label: "手机",
                        prop: "phone",
                        rules: [{

 src/views/userHouse/lable/statistics.vue

@@ -3,7 +3,7 @@
        <div class="current-page-box">
            <div v-for="(item, index) in data" :key="index">
                <div v-if="index == 0">
                    <box-title class="m10" :title="item.name"></box-title>
                    <box-title class="m10" :classVal="9" :title="item.name"></box-title>

                    <div v-for="(item1, childIndex) in item.children" :key="childIndex">
                        <div class="m20 m-t-28 grid-content bg-purple-dark">