颜色区分户室情况布局样式

guanqb

2023-05-15 c0c5dfd188fa1435424b224a131b1588890458e3

颜色区分户室情况布局样式

 src/styles/media/index.scss

@@ -702,8 +702,8 @@
                                                    &>div {
                                                        &>span {
                                                            margin: 0 countSizeVw(10, 1920);
                                                            width: countSizeVw(14, 1920);
                                                            height: countSizeVh(8);
                                                            width: countSizeVw(10, 1920);
                                                            height: countSizeVh(10);
                                                        }

                                                        .chuzu {
@@ -797,11 +797,13 @@
                                                            }

                                                            .flow {
                                                                top: calc((100% - countSizeVh(18)) / 4);
                                                                // top: calc((100% - countSizeVh(18)) / 4);
                                                                top: calc((100% / 3) - countSizeVh(3));
                                                            }

                                                            .focus {
                                                                top: calc((100% - countSizeVh(18)) / 4 * 2 + countSizeVh(6));
                                                                // top: calc((100% - countSizeVh(18)) / 4 * 2 + countSizeVh(6));
                                                                top: calc((100% / 3) * 2 - countSizeVh(3));
                                                            }

                                                            .warning {

 src/views/house/index.vue

@@ -168,6 +168,7 @@
                                        <div>重点人口</div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="house-element-info" v-if="isShowHouseBox">
@@ -179,6 +180,19 @@
                                        <el-option v-for="item in unitOptions" :key="item.value" :label="item.label"
                                            :value="item.value" class="unit-option"></el-option>
                                    </el-select>
                                </div>
                            </div>
                            <div class="legend">
                                <div class="type">户室图例</div>
                                <div class="type-val">
                                    <div>
                                        <span style="background: #0E88FF;"></span>
                                        含关联人口
                                    </div>
                                    <div>
                                        <span style="background: #FF796C;"></span>
                                        已核实户室
                                    </div>
                                </div>
                            </div>
                            <el-main v-loading="pictLoading" element-loading-background="rgba(0, 0, 0, 0.5)"
@@ -216,7 +230,11 @@
                                        <div class="detail">
                                            <div v-for="(value, index) in item.children_infos" :key="index"
                                                @click="residentDetailsClick(value)"
                                                :class="{ on: floorChoosed == value.sname }">{{ value.sname }}室</div>
                                                :class="{ on: floorChoosed == value.sname }">{{ value.sname }}室
                                                <div class="flow"></div>
                                                <div class="focus"></div>
                                                <!-- <div class="warning"></div> -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
@@ -2729,8 +2747,9 @@

                                    &>span {
                                        margin: 0 10px;
                                        width: 14px;
                                        height: 8px;
                                        width: 10px;
                                        height: 10px;
                                        border-radius: 50%;
                                    }

                                    .chuzu {
@@ -2854,12 +2873,14 @@
                                        }

                                        .flow {
                                            top: calc((100% - 18px) / 4);
                                            // top: calc((100% - 18px) / 4);
                                            top: calc((100% / 3) - 3px);
                                            background: rgb(14, 136, 255);
                                        }

                                        .focus {
                                            top: calc((100% - 18px) / 4 * 2 + 6px);
                                            // top: calc((100% - 18px) / 4 * 2 + 6px);
                                            top: calc((100% / 3) * 2 - 3px);
                                            background: rgb(255, 121, 108);
                                        }