首页布局调整

guanqb

2022-10-12 2a3bfbc64a74f3afaeced0756fcb2e4f60b94a24

 src/pcviews/homee/index.vue

@@ -1,7 +1,9 @@
<template>
    <div class="page">
        <div class="screen-container">
            <Header></Header>
            <div class="header">
                <Header></Header>
            </div>
            <div class="screen-body">
                <section class="screen_left">
                    <div class="left_top">
@@ -16,9 +18,7 @@
                </section>
                <section class="screen_middle">
                    <div class="middle_top">
                        <!-- <Map></Map> -->
                        <!-- <mapBox2></mapBox2> -->
                        <mapBox3></mapBox3>
                        <Map></Map>
                    </div>
                    <div class="middle_bottom">
                        <AlertInfo></AlertInfo>
@@ -68,6 +68,8 @@

<style lang="scss" scoped>
.page {
    width: 100%;
    height: 100%;
    position: relative;
    background: url(/zhxy/img/login/background.png);
    background-size: 100% auto;
@@ -75,14 +77,19 @@
.screen-container {
    width: 100%;
    height: 100%;
    justify-content: space-between;

    padding: 0 30px;
    box-sizing: border-box;

    .header {
        height: 100px;
    }

    .screen-body {
        width: 100%;
        height: 100%;
        height: calc(100% - 140px);
        display: flex;
        margin-top: 22px;
        margin-top: 20px;
        .screen_left {
            height: 100%;
            width: 21.5%;
@@ -91,27 +98,33 @@
            justify-content: flex-start;
            .left_top {
                width: 100%;
                height: 28%;
            }
            .left_middle {
                width: 100%;
                height: 32%;
                margin-top: 20px;
            }
            .left_bottom {
                flex: 1;
                width: 100%;
                margin-top: 20px;
            }
        }
        .screen_middle {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 54.8%;
            margin-left: 1.2%;
            margin-right: 1.2%;
            .middle_top {
                width: 100%;
                height: 600px;
                height: 62.5%;
                position: relative;
            }
            .middle_bottom {
                flex: 1;
                width: 100%;
                margin-top: 20px;
            }
@@ -119,17 +132,21 @@
        .screen_right {
            height: 100%;
            width: 21.5%;
            display: flex;
            flex-direction: column;
            .right_top {
                width: 100%;
                height: 28%;
            }
            .right_middle {
                width: 100%;
                height: 32%;
                margin-top: 20px;
            }
            .right_bottom {
                flex: 1;
                width: 100%;
                margin-top: -50px;
                margin-bottom: 30px;
                margin-top: 20px;
            }
        }
    }