<template>
  <div class="router_ele">
    <div class="images">
      <div class="line left"></div>
      <div class="line right"></div>

      <!-- 路由控制区域 -->
      <div class="router_box">
        <!-- 旅游分析 -->
        <router-link to="/" class="box_item" active-class="active">
          <div class="item_img img2">
            <img
              v-if="currentPath === '/'"
              src="@/assets/images/router-analyse-active.png"
            />
            <img v-else src="@/assets/images/router-analyse.png" />
          </div>
          <div class="item_name">旅游分析</div>
          <div class="item_en">tourism analysis</div>
        </router-link>
        <!-- 旅游服务 -->
        <router-link to="server" class="box_item" active-class="active">
          <div class="item_img">
            <img
              v-if="currentPath === '/server'"
              src="@/assets/images/router-server-active.png"
            />
            <img v-else src="@/assets/images/router-server.png" />
          </div>
          <div class="item_name">旅游服务</div>
          <div class="item_en">tourism service</div>
        </router-link>
        <!-- 旅游安全 -->
        <router-link to="safe" class="box_item" active-class="active">
          <div class="item_img">
            <img
              v-if="currentPath === '/safe'"
              src="@/assets/images/router-safe-active.png"
            />
            <img v-else src="@/assets/images/router-safe.png" />
          </div>
          <div class="item_name">旅游安全</div>
          <div class="item_en">tourism safety</div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
// 父组件传递过来的数据
defineProps(["currentPath"]);

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

<style lang="scss" scoped>
.router_ele {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;

  .images {
    position: relative;
    width: 2085px;
    height: 103px;
    background-image: url(@/assets/images/routerEle-image.png);
    background-size: 100% 100%;

    .line {
      position: absolute;
      top: -40px;
      width: 72px;
      height: 42px;
      background-image: url(@/assets/images/routerEle-line.png);
      background-size: 100% 100%;
    }

    .left {
      left: 380px;
    }

    .right {
      left: 1634px;
      transform: rotateY(180deg);
    }

    .router_box {
      display: flex;
      justify-content: space-evenly;
      margin: auto;
      margin-top: -152px;
      width: 1184px;
      height: 255px;

      .box_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 185px;
        height: 255px;
        font-family: "庞门正道标题体";
        background-image: linear-gradient(#ffffff, #007aa3);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        .item_img {
          width: 127px;
          height: 141px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .img2 {
          width: 140px;
          height: 141px;
        }

        .item_name {
          margin-top: 25px;
          font-size: 39px;
        }

        .item_en {
          margin-top: 10px;
          font-size: 22px;
        }
      }

      .active {
        background-image: linear-gradient(#ffe9a8, #de7b02);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
</style>
