From 2a3bfbc64a74f3afaeced0756fcb2e4f60b94a24 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Wed, 12 Oct 2022 17:43:25 +0800
Subject: [PATCH] 首页布局调整
---
src/pcviews/homee/index.vue | 37 +++++++++++++++++++++++++++----------
1 files changed, 27 insertions(+), 10 deletions(-)
diff --git a/src/pcviews/homee/index.vue b/src/pcviews/homee/index.vue
index 579639b..a352c9f 100644
--- a/src/pcviews/homee/index.vue
+++ b/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;
}
}
}
--
Gitblit v1.9.3