<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>