<script setup>
import { ref, computed, watch, onUnmounted } from "vue";
import SysMap from "./components/SysMap.vue";
import SysProgress from "./components/SysProgress.vue";
import ElecRank from "./components/ElecRank.vue";
import ElecTrends from "./components/ElecTrends.vue";
import ElecCompare from "./components/ElecCompare.vue";

</script>

<template>
  <div class="grid grid-cols-1 xl:grid-cols-4 gap-4 my-2">
    <div class="col-span-1 grid grid-cols-1 md:grid-cols-2 md:grid-rows-1 xl:grid-cols-1 xl:grid-rows-2 gap-4">
      <div class="area-img-box">
        <img
          alt="build"
          src="/build_img.jpg"
          class="w-full object-cover border-cyan-400 shadow-cyan-500/40"
        />
        <p
          class="p-4 h-full text-gray-100 text-base font-light bg-gray-800/60 backdrop-blur-md border-t border-cyan-400/30 shadow-inner"
        >
          深耕電子精密連接器、光通信元件、軟性排線、線纜組件、PCBA電子機板、電子成品專業製造廠並代理電子零組件做為整合行銷。公司創立於1990年，產品行銷全球以穩定，快速以及高品質知名;
          未來，瀚荃會持續精進提供更快、更好以及高附加價值的產品與服務來滿足您的需求。
        </p>
      </div>
      <!--在線狀態-->
      <SysProgress />
    </div>
    <div class="col-span-2 h-full border border-cyan-400 shadow-md shadow-cyan-500/40">
       <img
        src="/CviLux_globalmap.png"
        alt=""
        class="w-full h-full"
      />
    </div>
    <div class="col-span-1 grid grid-cols-1 xl:grid-rows-3 gap-4">
      <ElecRank />
      <ElecTrends
      />
      <ElecCompare />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.area-img-box {
  @apply border border-light-info bg-gray-900/80 backdrop-blur-lg relative overflow-hidden shadow-md shadow-blue-300;
}
</style>
