<template>
  <div class="boutique">
    <!-- <NavBar /> -->
    <!-- <h1>精品展</h1> -->
    <!-- <Footer /> -->

    <div class="boutique-header">
      <img src="@/assets/imgs/banner.jpg" width="100%" />
      <div class="boutique-title">
        <p>多彩贵州 &nbsp;博物盛筵</p>
        <span>—— 精品展</span>
      </div>
      <ul class="tabs">
        <li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)">
          <div :class="{ active: activeTab === node.tab }">
            <span>{{ node.name }}</span>
          </div>
        </li>
      </ul>
    </div>

    <div class="boutique-content">
      <div class="focus-content">
        <p>{{ content.title }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
export default {
  name: "Boutique",
  components: { NavBar, Footer },
  data() {
    return {
      tabs: [
        { tab: "sdcs", name: "四渡赤水" },
        { tab: "smgz", name: "神秘贵州" },
        { tab: "jyycc", name: "技艺与传承" },
        { tab: "ylgdyw", name: "夜郎国的疑问" },
        { tab: "xxx", name: "XXXXX" },
      ],
      activeTab: "sdcs",
      // content: { title: "四渡赤水" }
    };
  },
  computed: {
    content() {
      let obj = Object.create(null);

      const { tabs, activeTab } = this;
      let node = tabs.find((n) => n.tab === activeTab);

      node && (obj.title = node.name);

      return obj;
    },
  },
  methods: {
    handleTabClick(data) {
      this.activeTab = data.tab;
    },
  },
};
</script>

<style lang="scss" scoped>
.boutique {
  // display: flex;
  // justify-content: center;
  // height: 100vh;
  // align-items: center;
  // background-color: #2069c4;
  min-height: calc(100% - 300px);
  .boutique-header {
    position: relative;
    // height: 620px;
    overflow: hidden;
    > img {
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      z-index: 0;
    }
  }
  .boutique-title {
    height: 500px;
    position: relative;
    overflow: hidden;
    z-index: 1;

    > p {
      margin: 0;
      font-size: 46px;
      font-weight: 600;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      letter-spacing: 12px;
      background-image: -webkit-linear-gradient(45deg, #98bcff, #814b02);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: hue 6s infinite linear;
    }
    > span {
      font-weight: 600;
      font-family: "宋体";
      font-size: 24px;
      position: absolute;
      top: 65%;
      left: 60%;
      color: #666;
    }
  }
  ul.tabs {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    padding: 10px 0;

    > li {
      flex: 1;
      > div {
        text-align: center;
        > span {
          font-size: 20px;
          color: #333;
          font-weight: 600;
          font-family: "楷体";
          &:hover {
            cursor: pointer;
            position: relative;
            color: #003fa7;
            &::after {
              content: "";
              position: absolute;
              left: 0;
              width: 100%;
              bottom: -10px;
              border-bottom: 3px solid #2069c4;
              border-radius: 30px;
            }
          }
        }

        &.active {
          > span {
            position: relative;
            color: #003fa7;
            text-shadow: 6px 2px 2px #999;
            &::after {
              content: "";
              position: absolute;
              left: 0;
              width: 100%;
              bottom: -10px;
              border-bottom: 3px solid #2069c4;
              border-radius: 30px;
            }
          }
        }
      }
    }
  }
  .boutique-content {
    .focus-content {
      padding: 20px;
      margin: 20px;
      box-shadow: 1px 12px 10px 1px #ddd;
      margin-top: 0;
      min-height: 600px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      font-weight: 600;
      background: rgb(239 247 255);

      > p {
        margin: 0;
      }
    }
  }
}

@keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }

  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}
</style>
