社区样式

guanqb

2022-12-19 27c053bfb1fb2e3e763a876aa8ce04e5346f3d73

社区样式

 src/styles/media/index.scss

@@ -169,6 +169,8 @@
                                button {
                                    width: countSizeVw(80, 1920);
                                    font-size: countSizeVh(24);
                                    border: countSizeVh(1) solid rgb(0, 92, 169);
                                    border-radius: 0 countSizeVh(20) countSizeVh(20) 0;
                                }
                            }

@@ -259,44 +261,290 @@

                                        .build-info {
                                            height: countSizeVh(100);
                                        }

                                        .nextBtn {
                                            left: countSizeVw(1, 1920);
                                            width: countSizeVw(20, 1920);
                                            height: countSizeVh(60);
                                            padding-top: countSizeVh(12);

                                            i {
                                                font-size: countSizeVh(30);
                                                margin-left: countSizeVw(-5, 1920);
                                            .nextBtn {
                                                left: countSizeVw(1, 1920);
                                                width: countSizeVw(20, 1920);
                                                height: countSizeVh(60);
                                                padding-top: countSizeVh(12);
    
                                                i {
                                                    font-size: countSizeVh(30);
                                                    margin-left: countSizeVw(-5, 1920);
                                                }
                                            }
                                        }

                                        .rightBtn {
                                            left: countSizeVw(369, 1920);
                                        }
                                            .rightBtn {
                                                left: countSizeVw(369, 1920);
                                            }

                                        .build-outBox {
                                            left: countSizeVw(18, 1920);
                                            width: countSizeVw(356, 1920);
                                            height: countSizeVh(100);
                                            .build-outBox {
                                                left: countSizeVw(18, 1920);
                                                width: countSizeVw(356, 1920);
                                                height: countSizeVh(100);

                                            .build-box {
                                                .build-box {

                                                .ridgepole-list {
                                                    width: countSizeVw(356, 1920);
                                                    .ridgepole-list {
                                                        width: countSizeVw(356, 1920);

                                                    &>div {
                                                        margin: countSizeVh(6) countSizeVw(8, 1920);
                                                        width: countSizeVw(54, 1920);
                                                        height: countSizeVh(36);
                                                        line-height: countSizeVh(36);
                                                        border: countSizeVh(1) solid #ccc;
                                                        &>div {
                                                            margin: countSizeVh(6) countSizeVw(8, 1920);
                                                            width: countSizeVw(54, 1920);
                                                            height: countSizeVh(36);
                                                            line-height: countSizeVh(36);
                                                            border: countSizeVh(1) solid #ccc;
                                                        }
                                                    }
                                                }
                                            }
                                        }

                                        .ridgepole-info {
                                            .content {
                                                & > div {
                                                    height: countSizeVh(26);
                                                    line-height: countSizeVh(26);
                                                    border-right: countSizeVh(1) solid #50555f;
                    
                                                    & > div:last-child {
                                                        margin-left: countSizeVw(14,1920);
                                                        font-size: countSizeVh(18);
                                                    }
                                                }
                                            }
                                        }
                    
                                        .people-info {
                                            .content {
                                                .two {
                                                    margin-top: countSizeVh(16);
                                                }
                    
                                                .one,
                                                .two {
                                                    & > div {
                                                        & > div:first-child {
                                                            height: countSizeVh(30);
                                                            line-height: countSizeVh(30);
                                                            font-size: countSizeVh(18);
                                                        }
                    
                                                        & > div:last-child {
                                                            height: countSizeVh(26);
                                                            line-height: countSizeVh(26);
                                                        }
                                                    }
                                                }
                                            }
                                        }
                    
                                        .house-info {
                                            .content {
                                                & > div {
                                                    & > div:first-child {
                                                        height: countSizeVh(30);
                                                        line-height: countSizeVh(30);
                                                        font-size: countSizeVh(18);
                                                    }
                                                }
                                            }
                                            border-bottom: countSizeVh(1) dashed #ccc;
                                        }
                    
                                        .ridgepole-info,
                                        .people-info,
                                        .house-info {
                                            .title {
                                                height: countSizeVh(40);
                                                line-height: countSizeVh(40);
                                            }
                    
                                            .content {
                                                padding: countSizeVh(10) 0;
                                            }
                                        }
                    
                                        .house-element-info {
                                            .condo,
                                            .legend {
                                                height: countSizeVh(36);
                    
                                                .type {
                                                    width: countSizeVw(80,1920);
                                                }
                    
                                                .type-select {
                                                    margin-left: countSizeVw(20,1920);
                    
                                                    :deep(.el-input--suffix .el-input__inner) {
                                                        padding-right: countSizeVw(54,1920);
                                                    }
                                                    .el-input--small{
                                                        font-size: countSizeVh(18);
                                                    }
                                                    .el-select:hover .el-input__inner{
                                                        height: countSizeVh(36);
                                                    }
                                                    .el-input--small .el-input__inner {
                                                        height: countSizeVh(36);

                                                    }
                                                    .el-input__suffix{
                                                        height: countSizeVh(36);
                                                        margin-right: countSizeVw(6,1920);
                                                        .el-icon-arrow-up:before{
                                                            font-size: countSizeVh(18);
                                                            height: countSizeVh(36);
                                                            line-height: countSizeVh(36);

                                                        }
                                                    }
                                                }
                    
                                                .type-val {
                                                    & > div {
                                                        & > span {
                                                            margin: 0 countSizeVw(10,1920);
                                                            width: countSizeVw(14,1920);
                                                            height: countSizeVh(8);
                                                        }
                                                        .chuzu {
                                                            border: countSizeVh(1) solid #348b3a;
                                                        }
                                                        .zizhu {
                                                            border: countSizeVh(1) solid #2c77bb;
                                                        }
                                                        .kongzhi {
                                                            border: countSizeVh(1) solid #5c6169;
                                                        }
                                                        .shangye {
                                                            border: countSizeVh(1) solid #cc9456;
                                                        }
                                                    }
                                                }
                                            }
                    
                                            .floor-outBox {
                                                height: countSizeVh(26);
                                                margin-top: countSizeVh(9);
                    
                                                .floorBtn {
                                                    left: countSizeVw(30,1920);
                                                    top: -countSizeVh(2);
                                                    width: countSizeVw(20,1920);
                                                    height: countSizeVh(26);
                    
                                                    i {
                                                        font-size: countSizeVh(30);
                                                        margin-left: -countSizeVw(5,1920);
                                                    }
                                                }
                    
                                                .rightFloorBtn {
                                                    left: countSizeVw(350,1920);
                                                }
                    
                                                .floor-box {
                                                    width: countSizeVw(252,1920);
                                                    height: countSizeVh(26);
                                                    left: countSizeVw(67,1920);
                    
                                                    .floor-num {
                                                        width: countSizeVw(504,1920);
                                                        left: 0;

                                                        & > div {
                                                            margin: 0 countSizeVw(4,1920);
                                                            width: countSizeVw(84,1920);
                                                            height: countSizeVh(26);
                                                            border-radius: countSizeVh(13);
                                                        }
                    
                                                        & > .on {
                                                            border: countSizeVh(1) solid orange;
                                                        }
                                                    }
                                                }
                                            }
                    
                                            .floor-detail {
                                                margin-top: countSizeVh(14);
                                                height: countSizeVh(220);
                    
                                                & > div {
                                                    margin: countSizeVh(8);
                                                    height: countSizeVh(36);
                                                    line-height: countSizeVh(36);
                    
                                                    .title {
                                                        width: countSizeVw(50,1920);
                                                    }
                    
                                                    .detail {
                                                        & > div {
                                                            margin: 0 countSizeVw(4,1920);
                                                            width: countSizeVw(68,1920);
                                                            height: countSizeVh(36);
                                                            border: countSizeVh(1) solid #ccc;
                    
                                                            .flow,
                                                            .focus,
                                                            .warning {
                                                                right: countSizeVw(4,1920);
                                                                width: countSizeVw(6,1920);
                                                                height: countSizeVh(6);
                                                            }
                    
                                                            .flow {
                                                                top: calc((100% - countSizeVh(18)) / 4);
                                                            }
                    
                                                            .focus {
                                                                top: calc(
                                                                    (100% - countSizeVh(18)) / 4 * 2 + countSizeVh(6)
                                                                );
                                                            }
                    
                                                            .warning {
                                                                top: calc(
                                                                    (100% - countSizeVh(18)) / 4 * 3 + countSizeVh(12)
                                                                );
                                                            }
                                                        }
                    
                                                        & > .chuzu {
                                                            border: countSizeVh(1) solid #3a8b3a;
                                                        }
                    
                                                        & > .zizhu {
                                                            border: countSizeVh(1) solid #2c77bb;
                                                        }
                    
                                                        & > .kongzhi {
                                                            border: countSizeVh(1) solid #5c6169;
                                                        }
                    
                                                        & > .shangye {
                                                            border: countSizeVh(1) solid #cc9456;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                       
                                    }
                                }

                                .police-info {
                                    .tableClass {
                                        width: countSizeVw(600,1920);
                                        height: countSizeVh(400);
                                    }
                    
                                    .tableClass th,
                                    .tableClass td {
                                        width: countSizeVw(200,1920);
                                    }
                                }
                            }
@@ -324,6 +572,21 @@
                    
                            button:active {
                                border: countSizeVh(1) solid rgb(0, 92, 169);
                            }
                        }

                        .searchExtensively-val-box {
                            top:  countSizeVh(80);
                            left:  countSizeVw(760,1920);
                            width:  countSizeVw(314,1920);
                            max-height:  countSizeVh(200);
                            border-radius:  countSizeVh(10);
                    
                            & > div {
                                div {
                                    padding: 0  countSizeVw(10,1920);
                                    line-height:  countSizeVh(36);
                                }
                            }
                        }
                    }
@@ -1124,7 +1387,7 @@
                }
            }
        }
        .option-css,.activity-option {
        .option-css,.activity-option,.unit-option{
            height: countSizeVh(40);
            line-height: countSizeVh(40);
            font-size: countSizeVh(16);

 src/views/house/index.vue

@@ -261,6 +261,7 @@
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                            class="unit-option"
                                        ></el-option>
                                    </el-select>
                                </div>
@@ -292,27 +293,19 @@
                                <div class="type">房屋图例</div>
                                <div class="type-val">
                                    <div>
                                        <span
                                            style="width: 14px; height: 8px; border: 1px solid #3A8B3A;"
                                        ></span>
                                        <span class="chuzu"></span>
                                        出租
                                    </div>
                                    <div>
                                        <span
                                            style="width: 14px; height: 8px; border: 1px solid #2C77BB;"
                                        ></span>
                                        <span class="zizhu"></span>
                                        自住
                                    </div>
                                    <div>
                                        <span
                                            style="width: 14px; height: 8px; border: 1px solid #5C6169;"
                                        ></span>
                                        <span class="kongzhi"></span>
                                        空置
                                    </div>
                                    <div>
                                        <span
                                            style="width: 14px; height: 8px; border: 1px solid #CC9456;"
                                        ></span>
                                        <span class="shangye"></span>
                                        商业
                                    </div>
                                </div>
@@ -1018,7 +1011,7 @@
            this.$EventBus.$emit('toPosition', {
                siteJd: `${item.position[0]}`,
                siteWd: `${item.position[1]}`,
                siteGd: 10,
                siteGd: 200,
                siteHeading: -3,
                sitePitch: -45
            })
@@ -1424,6 +1417,21 @@

                                    & > span {
                                        margin: 0 10px;
                                        width: 14px;
                                        height: 8px;
                                    }
                                    .chuzu {
                                        border: 1px solid #348b3a;
                                    }
                                    .zizhu {
                                        border: 1px solid #2c77bb;
                                    }
                                    .kongzhi {
                                        border: 1px solid #5c6169;
                                    }

                                    .shangye {
                                        border: 1px solid #cc9456;
                                    }
                                }
                            }