feat:安全隐患情况和交通宣传模块渲染

ZhangXianQiang

2024-02-28 594927f5964ecc85dc942e32eb03a9bca551f865

 src/views/daoAnOffice/index.vue

@@ -12,6 +12,12 @@
import RightBottom from "./right-bottom.vue";
import chart2 from "./chart2.vue";
import BorderBox13 from "@/components/datav/border-box-13";

// 右边部分
import Analysis from './right/analysis/index.vue';
import Danger from './right/danger/index.vue';
import Publicize from './right/publicize/index.vue';

const config = {
  header: ['<span style="color:#42C3E8;font-size: 16px">排名</span>', '<span style="color:#42C3E8;font-size: 16px">行政区划</span>','<span style="color:#42C3E8;font-size: 16px">数值</span>'],
  data: [
@@ -96,8 +102,25 @@
      <CenterMap class="contetn_center_top" title="设备分布图" />

    </div>
    <div style="display:flex;">

    <!-- 右边区域 -->
    <div class="contetn_right flex flex-col">
      <div>
        <Analysis />
      </div>
      <div class="flex justify-between">
        <div class="right_wrapper_content">
          <Danger />
        </div>
        <div class="right_wrapper_content">
          <Publicize />
        </div>
      </div>
    </div>


    <!-- 缉毒原版 -->
    <!-- <div>
        <div style="height: 50%;">

            <div style="display: flex;justify-content: space-between">
@@ -175,6 +198,7 @@
            </div
            >
        </div>

        <div style="height: 50%">

            <div style="display: flex;justify-content: space-between">
@@ -213,8 +237,8 @@
            </div
            >
        </div>
      </div>
    </div>
      </div> -->
    <!-- 缉毒原版 -->
  </div>
</template>

@@ -225,6 +249,7 @@
  min-height: calc(100% - 64px);
  justify-content: space-between;
}

//左边 右边 结构一样
.contetn_left,
.contetn_right {
@@ -236,12 +261,14 @@
  box-sizing: border-box;
  flex-shrink: 0;
}

.contetn_center {
  flex: 1;
  margin: 0 54px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  .contetn_center-bottom {
    height: 315px;
  }
@@ -250,15 +277,19 @@
.contetn_lr-item {
  height: 310px;
}

.contetn_lr-item_right{
  flex: auto;
}

.contetn_lr-item_left{
  flex: 1;
}

.contetn_lr-item_contetn{
  display: flex;
}

.contetn_left-center_item_center{
  padding: 1rem 0.5rem;

@@ -268,9 +299,11 @@
  height: 75px;
  background-color: #172451;
}

.header{
  background-color: #121E44;
}

$item-title-height: 38px;
$item_title_content-height: calc(100% - 38px);

@@ -296,15 +329,14 @@
  .you {
    transform: rotate(180deg);
  }

  .title-inner {
    font-weight: 900;
    letter-spacing: 2px;
    background: linear-gradient(
            92deg,
    background: linear-gradient(92deg,
            #0072ff 0%,
            #00eaff 48.8525390625%,
            #01aaff 100%
    );
        #01aaff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
@@ -324,6 +356,7 @@
  width: 100%;
  height: 100%;
}

.right-right-zg{
  background-color: #172451;
  width: 120px;
@@ -333,4 +366,8 @@
  justify-content: center;
  padding: 20px 0;
}

.right_wrapper_content {
  width: 617px;
}
</style>