智慧园区前端大屏
shuishen
2024-11-08 a8b22d9a1bbee15caa378c7c3af519db51c97efc
src/views/companyInfo/components/rightContainer.vue
@@ -2,8 +2,8 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-10 15:27:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-26 14:49:05
 * @FilePath: \bigScreen\src\views\survey\components\rightContainer.vue
 * @LastEditTime: 2024-11-08 12:25:35
 * @FilePath: \bigScreen\src\views\companyInfo\components\rightContainer.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
@@ -42,7 +42,9 @@
          企业信息
        </template>
      </title-box>
      <fire-source></fire-source>
      <div class="content-box">
        <fire-source></fire-source>
      </div>
    </div>
    <div class="occur-statistics box" v-if="state.buttonIndex == 2">
@@ -51,7 +53,9 @@
          应急物质
        </template>
      </title-box>
      <fire-trend></fire-trend>
      <div class="content-box">
        <fire-trend></fire-trend>
      </div>
    </div>
    <div class="fire-trend box" v-if="state.buttonIndex == 3">
@@ -60,7 +64,9 @@
          救援队伍
        </template>
      </title-box>
      <occur-statistics></occur-statistics>
      <div class="content-box">
        <occur-statistics></occur-statistics>
      </div>
    </div>
  </div>
</template>
@@ -69,37 +75,46 @@
.right-container {
  display: flex;
  flex-direction: column;
  padding: 20px;
  position: absolute;
  top: 0;
  right: 0;
  width: 440px;
  height: 100%;
  pointer-events: auto;
  background: rgba(28, 115, 195, 0.2);
  .box {
    margin-top: 20px;
  .title-box {
    position: relative;
    height: 38px;
    line-height: 38px;
    background: url(/images/title-box.png) no-repeat center / 100% 100%;
    .header {
      height: 32px;
      background: url(/img/bg/sub-title.png) no-repeat;
    .title {
      margin-left: 30px;
      text-align: left;
      font-size: 18px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      font-style: italic;
      color: transparent;
      text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
      background-image: linear-gradient(180deg, rgba(14, 197, 236, 0.36) 5%, rgba(49, 190, 255, 0.36) 20%, rgba(255, 255, 255, 1) 40%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparen
    }
    .title-sub {
      position: absolute;
      right: 10px;
      bottom: 4px;
      line-height: 1;
    }
  }
  .fire-source {
    flex: 3;
  }
  .occur-statistics {
    flex: 3;
  }
  .fire-trend {
    flex: 4;
  }
  .box:first-child {
    margin-top: 0;
  .content-box {
    display: flex;
    flex-direction: column;
    height: calc(100% - 38px);
  }
}
</style>