caimei-authentic-website-ross/pages/cooperation/index.vue

<template>
  <div>
    <!-- banner区域 start -->
    <div class="swiper-container banner" id="banner">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="/img/cooperative-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 < 3"></div>
          </template>
        </div>
      </div>
      <div class="tab-content container">
        <!-- 品牌实力 -->
        <div class="tab-item strength" v-show="current === 1">
          <div class="section-title">
            <img src="/img/cooperative-title-strength.png" alt="品牌实力" />
            <h3>品牌实力</h3>
          </div>
          <div class="description only-mobile">
            40多年坚持创新，获得多项国际认证，致力于从细胞到 肌肉层面改善人体亚健康问题；从面部到身体，全 方位满足多样化需求。ROS'S-来自智能科技的
            成果，重新定义美与健康。
          </div>
          <div class="cover"><img src="/img/cooperative-strength-cover.png" alt="" /></div>
          <div class="section-title">
            <img src="/img/cooperative-title-authorized.png" alt="部分授权使用机构" />
            <h3>部分授权使用机构</h3>
          </div>
          <div class="cover"><img src="/img/cooperative-authorized-cover.png" alt="" /></div>
        </div>
        <!-- 提供支持 -->
        <div class="tab-item support" v-show="current === 2">
          <div class="section-title">
            <img src="/img/cooperative-title-support.png" alt="提供支持" />
            <h3>提供支持</h3>
          </div>
          <div class="content">
            <div class="section">
              <div class="tag">品牌支持</div>
              <div class="tag">培训支持</div>
              <div class="tag">技术支持</div>
              <div class="tag">运营支持</div>
              <div class="tag">推广支持</div>
              <div class="tag">售后服务</div>
              <div class="tag">产品支持</div>
              <div class="tag">活动支持</div>
              <div class="tag">营销支持</div>
              <div class="tag">成功案例</div>
              <div class="tag">战略规划</div>
              <div class="tag">开业支持</div>
            </div>
            <div class="row1">专业团队&nbsp;&nbsp;&nbsp;&nbsp;·&nbsp;&nbsp;&nbsp;&nbsp;随时待命</div>
            <div class="row2">拓客<span>|</span>锁客<span>|</span>留客<span>|</span>升客</div>
          </div>
        </div>
        <!-- 服务模式 -->
        <div class="tab-item service" v-show="current === 3">
          <div class="section-title">
            <img src="/img/cooperative-title-service.png" alt="服务模式" />
            <h3>服务模式</h3>
          </div>
          <div class="content">
            <div class="item">
              <div class="cover"><img src="/img/cooperative-service-1.png" alt="品牌运作" /></div>
              <div class="name">品牌运作</div>
            </div>
            <div class="item">
              <div class="cover"><img src="/img/cooperative-service-2.png" alt="设备升级" /></div>
              <div class="name">设备升级</div>
            </div>
            <div class="item">
              <div class="cover"><img src="/img/cooperative-service-3.png" alt="销售服务" /></div>
              <div class="name">销售服务</div>
            </div>
            <div class="item">
              <div class="cover"><img src="/img/cooperative-service-4.png" alt="业绩解决方案" /></div>
              <div class="name">业绩解决方案</div>
            </div>
            <div class="item">
              <div class="cover"><img src="/img/cooperative-service-5.png" alt="活动策划" /></div>
              <div class="name">活动策划</div>
            </div>
            <div class="item">
              <div class="cover"><img src="/img/cooperative-service-6.png" alt="专业培训" /></div>
              <div class="name">专业培训</div>
            </div>
          </div>
        </div>
        <!-- 在线咨询 -->
        <div class="tab-item consult" v-show="current === 4">
          <div class="section-title">
            <img src="/img/cooperative-title-consult.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: 1,
    }
  },
  asyncData() {
    return {
      tabList: [
        {
          id: 1,
          name: '品牌实力',
          en: 'brand influence',
        },
        {
          id: 2,
          name: '提供支持',
          en: 'professional support',
        },
        {
          id: 3,
          name: '服务模式',
          en: 'after-sales service',
        },
        {
          id: 4,
          name: '在线咨询',
          en: 'chat with us',
        },
      ],
    }
  },
  mounted() {
    const current = this.$route.query.index
    if (current) {
      this.current = parseInt(current) || 1
    }
    new Swiper('#banner', {
      loop: false, // 循环模式选项
    })
  },
  methods: {
    onTabChange(tab) {
      this.current = tab.id
    },
  },
}
</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: 24%;
        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;
          }
        }
      }
    }

    .tab-content {
      .strength {
        .cover {
          img {
            display: block;
            width: 100%;
          }
        }
      }

      .support {
        .section {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;

          .tag {
            width: 224px;
            height: 67px;
            background: #ed8f0d;
            border-radius: 10px;
            font-size: 42px;
            font-weight: 400;
            color: #ffffff;
            text-align: center;
            line-height: 67px;
            margin-right: 50px;
            margin-bottom: 26px;

            &:nth-child(4n) {
              margin-right: 0;
            }
          }
        }

        .row1 {
          font-size: 27px;
          font-weight: 400;
          color: #000000;
          text-align: center;
          margin-top: 58px;
        }

        .row2 {
          font-size: 33px;
          font-weight: 400;
          color: #000000;
          text-align: center;
          margin-top: 38px;

          span {
            margin: 0 64px;
          }
        }
      }

      .service {
        .content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;

          .item {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            flex-direction: column;
            width: 380px;
            height: 450px;
            background: #f3920d;
            margin-bottom: 75px;

            &:nth-child(4),
            &:nth-child(5),
            &:nth-child(6) {
              margin-bottom: 0;
            }

            .cover {
              margin-top: 42px;
              img {
                display: block;
                width: 300px;
                height: 300px;
              }
            }

            .name {
              font-size: 33px;
              font-weight: bold;
              color: #000000;
              margin-top: 35px;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .main {
    .tabbar {
      background: #eeeeee;
      padding: 0 0.3rem;
      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: 16%;
        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;
          }
        }
      }
    }

    .tab-content {
      .strength {
        .cover {
          width: 6.8rem;
          margin: 0.4rem auto 0;
          img {
            display: block;
            width: 100%;
          }
        }

        .description {
          font-size: 0.26rem;
          line-height: 0.48rem;
          width: 6.28rem;
          margin: 0 auto;
          text-align: center;
        }
      }

      .support {
        .section {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          width: 6.36rem;
          margin: 0 auto;

          .tag {
            width: 1.8rem;
            height: 0.6rem;
            background: #ed8f0d;
            border-radius: 0.1rem;
            font-size: 0.28rem;
            font-weight: 400;
            color: #ffffff;
            text-align: center;
            line-height: 0.6rem;
            margin-bottom: 0.24rem;

            &:nth-child(3n) {
              margin-right: 0;
            }
          }
        }

        .row1 {
          font-size: 0.24rem;
          font-weight: 400;
          color: #000000;
          text-align: center;
          margin-top: 0.64rem;
        }

        .row2 {
          font-size: 0.28rem;
          font-weight: 400;
          color: #000000;
          text-align: center;
          margin-top: 0.16rem;
        }
      }

      .service {
        .content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          width: 6.64rem;
          margin: 0 auto;

          .item {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            flex-direction: column;
            width: 3.2rem;
            height: 4rem;
            background: #f3920d;
            margin-bottom: 0.24rem;

            &:nth-child(5),
            &:nth-child(6) {
              margin-bottom: 0;
            }

            .cover {
              margin-top: 0.2rem;
              img {
                display: block;
                width: 2.8rem;
                height: 2.8rem;
              }
            }

            .name {
              font-size: 0.28rem;
              font-weight: bold;
              color: #000000;
              margin-top: 0.32rem;
            }
          }
        }
      }
    }
  }
}
</style>