caimei-authentic-website-ross/pages/contact/consult.vue

<template>
  <div>
    <!-- banner区域 start -->
    <div class="swiper-container banner" id="banner">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="/img/contact-banner.jpg" alt="" />
        </div>
      </div>
    </div>
    <!-- banner区域 end -->

    <div class="main">
      <div class="tabbar">
        <div class="container">
          <template v-for="(tab, index) in tabList">
            <div class="tab" :class="{ on: tab.id === current }" :key="tab.en" @click="onTabChange(tab)">
              <div class="name" v-text="tab.name"></div>
              <div class="en" v-text="tab.en"></div>
            </div>
            <div class="line" :key="index" v-if="index < 2"></div>
          </template>
        </div>
      </div>

      <div class="tab-content container">
        <div class="tab-item online">
          <div class="section-title">
            <img src="/img/contact-title-online.png" alt="在线咨询" />
            <h3>在线咨询</h3>
          </div>
          <div class="content">
            <ContactConsult />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: '首页-艾斯佰丽官网-在线咨询',
    }
  },
  data() {
    return {
      tabList: [],
      current: 3,
    }
  },
  asyncData() {
    return {
      tabList: [
        {
          id: 1,
          name: '联系方式',
          en: 'contact',
          url: '/contact.html',
        },
        {
          id: 2,
          name: '人才招聘',
          en: 'join us',
          url: '/contact/job.html',
        },
        {
          id: 3,
          name: '在线咨询',
          en: 'chat with us',
          url: '/contact/consult.html',
        },
      ],
    }
  },
  mounted() {
    new Swiper('#banner', {
      loop: false, // 循环模式选项
    })
  },
  methods: {
    onTabChange(tab) {
      // this.current = tab.id
      window.open(tab.url, '_self')
    },
  },
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 768px) {
  .main {
    .tabbar {
      background: #eeeeee;
      height: 100px;

      .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
      }

      .line {
        height: 46px;
        width: 3px;
        background: #aaaaaa;
      }

      .tab {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        height: 100%;
        width: 16%;
        user-select: none;
        .name {
          font-size: 29px;
          font-weight: 400;
          color: #000000;
          text-align: center;
        }
        .en {
          font-size: 17px;
          font-weight: 300;
          color: #000000;
          text-align: center;
          margin-top: 10px;
          text-transform: uppercase;
        }

        &:hover {
          cursor: pointer;
        }

        &::after {
          content: '';
          position: absolute;
          opacity: 0;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 12px 8px 12px;
          border-color: transparent transparent #f3920d transparent;
          bottom: 0;
        }

        &.on {
          &::after {
            opacity: 1;
          }
          .name,
          .en {
            color: #f3920d;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .main {
    .tabbar {
      background: #eeeeee;
      padding: 0 0.6rem;
      height: 0.8rem;

      .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
      }

      .line {
        height: 0.4rem;
        width: 0.02rem;
        background: #aaaaaa;
      }

      .tab {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        height: 100%;
        width: 24%;
        user-select: none;
        .name {
          font-size: 0.26rem;
          font-weight: 400;
          color: #000000;
          text-align: center;
        }
        .en {
          display: none;
        }

        &:hover {
          cursor: pointer;
        }

        &::after {
          content: '';
          position: absolute;
          opacity: 0;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 0.12rem 0.08rem 0.12rem;
          border-color: transparent transparent #f3920d transparent;
          bottom: 0;
        }

        &.on {
          &::after {
            opacity: 1;
          }
          .name,
          .en {
            color: #f3920d;
          }
        }
      }
    }
  }
}
</style>