<template>
  <main class="wrapper">
    <box1 />
	<box5/>
	<!-- <box2 /> -->
	<box3 />
    <div class="header">
      <ul class="nav-left">
        <li class="nav-left-item">奉节县</li>
        <li class="nav-left-item">三峡之巅</li>
        <li class="nav-left-item">白帝城</li>
		<li class="nav-left-item">龙河桥</li>
      </ul>
      <div class="title">监控大屏</div>
      <ul class="nav-right">
        <li class="nav-right-item">停车</li>
        <li class="nav-right-item">工单</li>
        <li class="nav-right-item">舆情</li>
        <li class="nav-right-item">酒店</li>
      </ul>
    </div>
    <box4 />
  </main>
</template>

<script setup>
  import box1 from './components/box-1.vue'
  import box4 from './components/box-4.vue'
  import box3 from './components/box-3.vue'
  import box2 from './components/box-2.vue'
  import box5 from './components/box-5.vue'

  onMounted(() => {})
</script>

<style lang="scss" scoped>
  .wrapper {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #0a254b;
    .header {
      position: absolute;
      left: vw(326);
      .title {
        width: vw(3133);
        height: vh(120);
        font-size: vw(48);
        font-weight: 800;
        text-align: center;
        padding-top: vh(20);
        color: #fff;
        letter-spacing: vw(10);
        box-sizing: border-box;
        text-shadow: 0px 4px 7px rgba(0, 150, 255, 0.75);
        background-image: url('@/assets/images/title.png');
        background-size: 100% 100%;
      }
      .nav-left {
        position: absolute;
        left: vw(380);
        top: vh(34);
        display: flex;
        &-item {
          cursor: pointer;
          margin-left: vh(-10);
          width: vw(210);
          height: vh(56);
          padding-top: vh(10);
          font-weight: 600;
          font-size: vw(28);
          text-align: center;
          color: rgba(208, 236, 255, 0.9);
          background-image: url('@/assets/images/title-2.png');
          background-size: 100% 100%;
        }
      }
      .nav-right {
        position: absolute;
        right: vw(424);
        top: vh(34);
        display: flex;
        &-item {
          cursor: pointer;
          margin-right: vh(-10);
          width: vw(210);
          height: vh(56);
          padding-top: vh(10);
          font-weight: 600;
          font-size: vw(28);
          text-align: center;
          color: rgba(208, 236, 255, 0.9);
          background-image: url('@/assets/images/title-3.png');
          background-size: 100% 100%;
        }
      }
    }
  }
</style>
