ze-gw/components/Pricing.vue

<template>
  <section class="pricing-one" id="pricing">
    <div class="container">
      <div class="block-title text-center">
        <h2 class="block-title__title">我们的方式<br>News Type</h2><!-- /.block-title__title -->
      </div><!-- /.block-title -->
      <div class="tabed-content">
        <div id="month">
          <div class="row pricing-one__price-row">
            <div class="col-lg-4 wow fadeInUp" data-wow-duration="1500ms">
              <div class="pricing-one__single text-center">
                <h3>对于品牌商</h3>
                <p>引领潮流，全数字化经营，驱动品牌智能发展</p>
                <ul class="list-unstyled">
                  <li>客户信息数字化</li>
                  <li>门店运营智能化</li>
                  <li>商品管理数字化</li>
                </ul><!-- /.list-unstyled -->
                <a href="#" class="thm-btn pricing-one__btn"><span>我是品牌商</span></a>
                <span class="tag-line">选择我们!</span>
              </div><!-- /.pricing-one__single -->
            </div><!-- /.col-lg-4 -->
            <div class="col-lg-4 wow fadeInDown" data-wow-duration="1500ms">
              <div class="pricing-one__single text-center">
                <h3>对于管理者</h3>
                <p>商品销售信息及时有效共享，所以门店统一管理</p>
                <ul class="list-unstyled">
                  <li>用户搜集</li>
                  <li>商品销售分析</li>
                  <li>商品进销存管控</li>
                </ul><!-- /.list-unstyled -->
                <a href="#" class="thm-btn pricing-one__btn"><span>我是管理者</span></a>
                <span class="tag-line">选择我们!</span>
              </div><!-- /.pricing-one__single -->
            </div><!-- /.col-lg-4 -->
            <div class="col-lg-4 wow fadeInUp" data-wow-duration="1500ms">
              <div class="pricing-one__single text-center">
                <h3>对于消费者</h3>
                <p>服务统一，体检升级，让品牌客户更加便捷、舒适的购物，打造品牌忠诚度</p>
                <ul class="list-unstyled">
                  <li>全场景成交，灵活交付</li>
                  <li>服务跟踪，及时跟进</li>
                  <li>分享商品，裂变获益</li>
                </ul><!-- /.list-unstyled -->
                <a href="#" class="thm-btn pricing-one__btn"><span>我是消费者</span></a>
                <span class="tag-line">选择我们!</span>
              </div><!-- /.pricing-one__single -->
            </div><!-- /.col-lg-4 -->
          </div><!-- /.row -->
        </div><!-- /#month -->
      </div><!-- /.tabed-content -->
    </div><!-- /.container -->
  </section>
</template>

<script>
    export default {
      name: "Pricing",
      mounted() {

        function toggleTabWithSwitch() {
          var toggleSwitch = $('#switch-toggle-tab label.switch');
          var monthTabTitle = $('#switch-toggle-tab li.month');
          var yearTabTitle = $('#switch-toggle-tab li.year');
          var monthTabContent = $('#month');
          var yearTabContent = $('#year');
          // hidden show deafult;
          monthTabContent.fadeIn();
          yearTabContent.fadeOut();

          function toggleHandle() {
            if (toggleSwitch.hasClass('on')) {
              yearTabContent.fadeOut();
              monthTabContent.fadeIn();
              monthTabTitle.addClass('active');
              yearTabTitle.removeClass('active');
            } else {
              monthTabContent.fadeOut();
              yearTabContent.fadeIn();
              yearTabTitle.addClass('active');
              monthTabTitle.removeClass('active');
            }
          };
          monthTabTitle.on('click', function() {
            toggleSwitch.addClass('on').removeClass('off');
            toggleHandle();
            return false;
          });
          yearTabTitle.on('click', function() {
            toggleSwitch.addClass('off').removeClass('on');
            toggleHandle();
            return false;
          });
          toggleSwitch.on('click', function() {
            toggleSwitch.toggleClass('on off');
            toggleHandle();
          });

        }
        toggleTabWithSwitch();
      }

    }
</script>

<style scoped>
  h3{
    font-size: 30px;
  }
</style>