prophet-demo/web/css/index.css

* {
  padding: 0;
  margin: 0;
  position: relative;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  /* background-image: linear-gradient(30deg, #1B3488 50%, #14234E 100%); */
  /* background: radial-gradient(circle, #114eab 3%, #04133e); */
  background-image: url("../img/bg.png");
}

/* 头部标题 */
.top_box {
  height: 82px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.title_box {
  font-size: 33px;
  font-family: "黑体";
  font-weight: bold;
  margin-top: 15px;
  /* text-shadow:0px 5px 5px #04144D; */
  background-image: -webkit-linear-gradient(bottom, #b7cae8, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.title_line {
  position: absolute;
  top: 46px;
}

.container {
  width: 100%;
  height: calc(100% - 82px);
  box-sizing: border-box;
  display: flex;
}

.map_title_box {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  position: relative;
}

.left .map_title_box {
  padding-left: 14px;
  box-sizing: border-box;
}

.middle .map_title_box {
  padding-left: 7px;
  box-sizing: border-box;
}

.right .map_title_box {
  padding-left: 7px;
  box-sizing: border-box;
}

.map_title_bg img {
  height: 34px;
}

.map_title_bg {
  position: absolute;
  height: 34px;
  top: 0;
}

.map_title {
  color: #0aebe2;
  font-weight: bold;
  padding-left: 20px;
  box-sizing: border-box;
  z-index: 10;
}

.map_sty {
  width: 100%;
  height: calc(100% - 34px);
  box-sizing: border-box;
  /* padding: 10px; */
}

.map_side_sty {
  width: 100%;
  height: calc(100% - 34px);
  box-sizing: border-box;
  position: absolute;
  top: 34px;
}

.side_img {
  position: absolute;
}

.side_left_top {
  top: 42px;
  left: 14px;
}

.side_left_down {
  left: 14px;
  bottom: 11px;
}

.side_right_top {
  right: 7px;
  top: 42px;
}

.side_right_down {
  right: 7px;
  bottom: 11px;
}

.left .map_sty {
  width: calc(100% - 21px);
  height: calc(100% - 34px - 23px);
  margin: 8px 0 0 14px;
  border: 1px solid #213b8e;
  box-sizing: border-box;
  background-color: #162963;
  background-clip: content-box;
}

.middle .map_sty {
  width: calc(100% - 14px);
  height: calc(100% - 34px - 23px);
  margin: 8px 0 0 7px;
  /* border: 1px solid #213B8E; */
  /* padding: 8px 7px 15px 7px; */
  box-sizing: border-box;
}

.middle  .side_left_top {
  top: 42px;
  left: 7px;
}

.middle  .side_left_down {
  left: 7px;
  bottom: 11px;
}

.middle .side_right_top {
  right: 7px;
  top: 42px;
}

.middle .side_right_down {
  right: 7px;
  bottom: 11px;
}

.right .map_sty {
  width: calc(100% - 21px);
  height: calc(100% - 34px - 23px);
  margin: 8px 0 0 7px;
  border: 1px solid #213b8e;
  /* padding: 8px 14px 15px 7px; */
  box-sizing: border-box;
  background-color: #162963;
  background-clip: content-box;
}

.middle_top .map_sty {
  width: calc(103% - 0px);
  height: calc(103% - 0px);
  position: absolute;
}

#middle_down_map {
  background-color: #162963;
  background-clip: content-box;
  border: 1px solid #213b8e;
}

.right .side_left_top {
  top: 42px;
  left: 7px;
}

.right .side_left_down {
  left: 7px;
  bottom: 11px;
}

.right .side_right_top {
  right: 14px;
  top: 42px;
}

.right .side_right_down {
  right: 14px;
  bottom: 11px;
}

/* 左中右 */
.vertical {
  width: 30%;
  height: 100%;
}

.vertical_middle {
  width: 40%;
  /* background-color: brown; */
}

.vertical_left,
.vertical_right {
  width: 30%;
}

/* 左 上中下 */
.left {
  width: 100%;
  height: calc(100% / 3);
  position: relative;
}

.left_middle {
  /* background-color: cadetblue; */
}

/* 中 上中下 */
.middle {
  width: 100%;
  /* height: calc(100% / 3); */
  position: relative;
}

.middle_top {
  height: 60%;
  /* height: calc(100% - (100% / 3)); */
  /* background-color: chartreuse; */
}

.middle_down {
  height: calc(40% - 8px);
  margin-top: 8px;
  /* height: calc(100% / 3); */
}

/* 右 上中下 */
.right {
  width: 100%;
  height: calc(100% / 3);
  position: relative;
}

.right_middle {
  /* background-color: chocolate; */
}

.xiang_guan {
  color: #0aebe2;
  font-weight: bold;
  box-sizing: border-box;
  z-index: 10;
  position: absolute;
  right: 28px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.xiang_guan a{
  text-decoration: none;
  color: #0aebe2;
  font-weight: bold;
}

/* 弹处框效果 */
.modal {
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  bottom: 0px;
  transition: all 0.5s ease-in-out;
  opacity: 0;
  z-index: -1;
}

.modal:target {
  opacity: 1;
  transition: all 0.5s ease-in-out;
  z-index: +20;
}

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  /* width: 500px; */
  background: #fff;
  border-radius: 4px;
  transform: translate(-50%, -200%);
  transition: all 0.5s ease-in-out;
  perspective: 1000;
  outline: 1px solid transparent;
  opacity: 0;
}

.modal:target .modal-content {
  transform: translate(-50%, -50%);
  transition: all 0.5s ease-in-out;
  transition-delay: 0.5s;
  z-index: 9999;
  opacity: 1;
}

/* 弹出框内容样式 */
.modal_box {
  width: 1100px;
  height: 700px;
  background-color: #14234e;
  padding: 20px;
  position: relative;
}

.modal_close {
  position: absolute;
  right: 3px;
}

.modal_close a{
  font-weight: bold;
  text-decoration: none;
  font-family: 'Cantarell', sans-serif;
  color: #3BADE7;
}

.modal_con{
  height: calc(100% - 34px - 10px);
  width: 100%;
  margin-top: 10px;
}

.heat_map{
  width: 100%;
  height: 100%;
  background-color: #162963;
  background-clip: content-box;
  border: 1px solid #213b8e;
}

.modal_con .map_side_sty{
  height: 100%;
  position: 0;
  top: 0;
}

.modal_con .side_left_top{
  left: 0;
  top: 0;
}

.modal_con .side_left_down{
  bottom: -5px;
  left: 0;
}

.modal_con .side_right_top{
  top: 0;
  right: 0;
}

.modal_con .side_right_down{
  bottom: -5px;
  right: 0;
}