86 lines
2.0 KiB
Vue
86 lines
2.0 KiB
Vue
![]() |
<template>
|
||
|
<div class="box">
|
||
|
<div class="header">
|
||
|
<div class="logo"></div>
|
||
|
<div class="tab">
|
||
|
<div class="tab-li">首 页</div>
|
||
|
<div class="tab-li">商 品</div>
|
||
|
<div class="tab-li">商 户</div>
|
||
|
<div class="tab-li">订 单</div>
|
||
|
<div class="tab-li">财 务</div>
|
||
|
</div>
|
||
|
|
||
|
|
||
|
<div class="right">
|
||
|
<div class="rigth-li">泸县</div>
|
||
|
<div class="rigth-li">15:39:25</div>
|
||
|
<div class="rigth-li">2023.01.20</div>
|
||
|
<div class="rigth-li">关机</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
<script setup>
|
||
|
|
||
|
import { onMounted } from 'vue';
|
||
|
import { BorderBox1 } from '@dataview/datav-vue3';
|
||
|
import * as echarts from 'echarts';
|
||
|
import header from "@/components/header.vue"
|
||
|
// alert(5454)
|
||
|
console.log(header)
|
||
|
onMounted(() => {
|
||
|
|
||
|
})
|
||
|
</script>
|
||
|
<style lang="scss">
|
||
|
.box {
|
||
|
width: 100vw;
|
||
|
height: 100vh;
|
||
|
background-color: #000C14;
|
||
|
|
||
|
.header {
|
||
|
display: flex;
|
||
|
color: #B0C7D1;
|
||
|
height: 40px;
|
||
|
align-items: center;
|
||
|
justify-content: space-between;
|
||
|
|
||
|
.logo {
|
||
|
width: 20vw;
|
||
|
background-color: red;
|
||
|
margin-right: 30px;
|
||
|
height: 40px;
|
||
|
align-items: center;
|
||
|
|
||
|
|
||
|
}
|
||
|
|
||
|
.tab {
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
|
||
|
.tab-li {
|
||
|
width: 120px;
|
||
|
background-color: #002641;
|
||
|
text-align: center;
|
||
|
height: 25px;
|
||
|
line-height: 25px;
|
||
|
margin: 0 10px;
|
||
|
color: white;
|
||
|
text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 10px white; //设置发光效果
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.right {
|
||
|
display: flex;
|
||
|
font-size: 15px;
|
||
|
margin-right: 30px;
|
||
|
align-items: center;
|
||
|
|
||
|
.rigth-li {
|
||
|
margin-right: 30px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</style>
|