| | |
| | | * @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. |
| | |
| | | 企业信息 |
| | | </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"> |
| | |
| | | 应急物质 |
| | | </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"> |
| | |
| | | 救援队伍 |
| | | </template> |
| | | </title-box> |
| | | <occur-statistics></occur-statistics> |
| | | <div class="content-box"> |
| | | <occur-statistics></occur-statistics> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | .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> |