<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-03-10 15:27:59
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2024-12-02 21:15:44
|
* @FilePath: \bigScreen\src\views\companyInfo\components\rightContainer.vue
|
* @Description:
|
*
|
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
|
-->
|
<script setup>
|
import fireSource from './box/fireSource.vue'
|
import fireTrend from './box/fireTrend.vue'
|
import occurStatistics from './box/occurStatistics.vue'
|
import publicContent from './box/publicContent.vue'
|
|
|
let state = defineProps({
|
buttonIndex: {
|
type: Number,
|
default: 1
|
}
|
})
|
|
onMounted(() => {
|
})
|
</script>
|
|
<template>
|
<div class="right-container">
|
|
<div class="fire-source box h100" v-if="state.buttonIndex == 1">
|
<title-box>
|
<template #titleName>
|
企业信息
|
</template>
|
</title-box>
|
<div class="content-box">
|
<fire-source></fire-source>
|
</div>
|
</div>
|
|
<div class="occur-statistics box h100" v-if="state.buttonIndex == 2">
|
<title-box>
|
<template #titleName>
|
应急物资
|
</template>
|
</title-box>
|
<div class="content-box">
|
<fire-trend></fire-trend>
|
</div>
|
</div>
|
|
<!-- <div class="fire-trend box" >
|
<title-box>
|
<template #titleName>
|
救援队伍
|
</template>
|
</title-box>
|
<div class="content-box">
|
<occur-statistics></occur-statistics>
|
</div>
|
</div> -->
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.right-container {
|
display: flex;
|
flex-direction: column;
|
position: absolute;
|
top: 0;
|
right: 0;
|
width: 440px;
|
height: 100%;
|
pointer-events: auto;
|
background: rgba(28, 115, 195, 0.2);
|
|
.title-box {
|
position: relative;
|
height: 38px;
|
line-height: 38px;
|
background: url(/images/title-box.png) no-repeat center / 100% 100%;
|
|
.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;
|
}
|
}
|
|
.content-box {
|
display: flex;
|
flex-direction: column;
|
height: calc(100% - 38px);
|
}
|
}
|
</style>
|
