<template>
|
<div class="header">
|
<div class="h-left">
|
<div class="left-item active">首页</div>
|
<div class="left-item">集群调度</div>
|
<div class="left-item">任务管理</div>
|
<div class="left-item">航线规划</div>
|
</div>
|
<div class="h-right">
|
<div class="right-item">AI识别分析</div>
|
<div class="right-item">综合分析</div>
|
<div class="right-item">数据中心</div>
|
<div class="right-item">系统运维</div>
|
</div>
|
</div>
|
<!-- <div :style="{ background: '#2bc03f', height: hToV(50), width: wToR(50) }">test</div> -->
|
</template>
|
|
<script>
|
import { hToV, wToR } from '@/utils/pxConver';
|
|
export default {
|
methods: { wToR, hToV },
|
mounted() {
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.header {
|
width: calc(100% - 57px - 59px);
|
margin-left: 57px;
|
padding-top: 38px;
|
display: flex;
|
justify-content: space-between;
|
|
.h-left {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.left-item {
|
width: 105px;
|
height: 39px;
|
background: url(@/assets/images/header-left.png) no-repeat;
|
background-size: 100% 100%;
|
margin-right: 3px;
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
|
font-weight: 400;
|
font-size: 18px;
|
color: #ffffff;
|
line-height: 42px;
|
text-align: center;
|
font-style: normal;
|
text-transform: none;
|
}
|
|
.active {
|
background: url(@/assets/images/header-active.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
}
|
|
.h-right {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.right-item {
|
width: 105px;
|
height: 39px;
|
background: url(@/assets/images/header-right.png) no-repeat;
|
background-size: 100% 100%;
|
margin-right: 3px;
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
|
font-weight: 400;
|
font-size: 18px;
|
color: #ffffff;
|
line-height: 42px;
|
text-align: center;
|
font-style: normal;
|
text-transform: none;
|
}
|
}
|
}
|
</style>
|
