<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2024-11-08 11:00:30
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2024-11-08 12:07:12
|
* @FilePath: \bigScreen\src\views\companyInfo\components\centerContainer.vue
|
* @Description:
|
*
|
* Copyright (c) 2024 by shuishen, All Rights Reserved.
|
-->
|
<script setup>
|
import { useRouter, useRoute } from 'vue-router'
|
let router = useRouter()
|
import { useRouterStore } from 'store/router'
|
const store = useRouterStore()
|
let data = reactive({
|
companyInfo: {}
|
})
|
|
let { buttonIndex } = defineProps({
|
buttonIndex: Number
|
})
|
|
onMounted(() => {
|
data.companyInfo = JSON.parse(localStorage.getItem('companyInfo'))
|
})
|
// 父级方法
|
const emit = defineEmits(['childEvent'])
|
// 回调父级方法
|
const handleClick = (index) => {
|
emit('childEvent', index)
|
}
|
// 返回首页
|
const goHome = () => {
|
store.setLoadSub(false)
|
router.push('/layout')
|
}
|
</script>
|
|
<template>
|
<div class="title">{{ data.companyInfo.name }}</div>
|
<div class="menu-box">
|
<div :class="{ on: buttonIndex == 1 }" class="sub-menu" @click="handleClick(1)"> 基本信息 </div>
|
<div :class="{ on: buttonIndex == 2 }" class="sub-menu" @click="handleClick(2)"> 应急物质 </div>
|
<div :class="{ on: buttonIndex == 3 }" class="sub-menu" @click="handleClick(3)"> 救援队伍 </div>
|
</div>
|
<div class="back-hoem">
|
<div class="center-info cursor-p" @click="goHome()">返回首页 </div>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.title {
|
position: absolute;
|
bottom: 2px;
|
left: 74px;
|
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
|
font-weight: 400;
|
font-size: 24px;
|
color: #FFFFFF;
|
line-height: 38px;
|
letter-spacing: 3px;
|
text-shadow: 2px 3px 0px rgba(17, 20, 22, 0.2196);
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
}
|
|
.menu-box {
|
position: absolute;
|
bottom: 0px;
|
left: 592px;
|
|
display: flex;
|
|
&>div {
|
width: 146px;
|
height: 36px;
|
line-height: 48px;
|
|
cursor: pointer;
|
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
|
font-weight: 400;
|
font-size: 20px;
|
color: #BFD3E5;
|
text-align: center;
|
font-style: normal;
|
text-transform: none;
|
}
|
|
&>div.on {
|
color: #F6FCFF;
|
background: url(/images/mode-tab-ac.png) no-repeat center / 100% 100%;
|
}
|
}
|
|
.back-hoem {
|
position: absolute;
|
bottom: 2px;
|
right: 30px;
|
|
.center-info {
|
width: 120px;
|
height: 40px;
|
line-height: 40px;
|
border: none;
|
border-radius: 20px;
|
color: #fff;
|
background-color: transparent;
|
font-size: 20px;
|
text-align: center;
|
background-image: url(/images/mode-tab.png);
|
}
|
|
.center-info:hover {
|
background-color: #3c5e8f;
|
}
|
}
|
</style>
|
