gcb_zc/pages/me/myVip.vue

<template>
  <div class="page_vip">
    <tit :tname="name"/>
    <!-- 顶部nav切换 -->
    <div class="vip_nav">
      <p v-for="(item,index) in navs" :key="index" @click="addClass(index)" v-bind:class="{active:index==current}">
        {{ item.text }}
      </p>
    </div>
    <!-- end:顶部nav切换 -->
    
    <!-- 会员详情切换 -->
    <div class="vip_content">
      <div class="slide_box clear-both">
         <!-- 招投标会员 -->
        <div class="vip_item vip_ztb">
          <div class="vip_card">
            <h4>招投标专属会员</h4>
            <div>
              <p><i>·&nbsp;已购条数</i><span>5/30</span>条</p>
              <p><i>·&nbsp;到期时间</i><span>2019-05-20 13：14</span></p>
            </div>
            <a href="#" class="pay_more">续费</a>
          </div>

          <!-- 添加地区 -->
          <div class="options">
            <div class="op_area">
              <h3>选择业务地区</h3>
              <ul>
                <li class="all">全国</li>
                <!-- 全国和省份不能共存，此处展示样式。默认全国。 -->
                <li>北京<i></i></li>
                <li class="add add_area">+&nbsp;添加</li>
              </ul>
            </div>
          </div>
           <!-- end：添加地区 -->

          <!-- 添加行业 -->
          <div class="options">
            <div class="op_area">
              <h3>选择行业范围</h3>
              <ul>
                <li class="all">全部</li>
                <li class="add add_hy">+&nbsp;添加</li>
              </ul>
            </div>
          </div>
           <!-- end：添加行业 -->

          <!-- 价格套餐 -->
          <div class="options">
            <div class="opt_price">
              <h3>工程项目信息专属会员套餐<br></h3>
              <i>开通会员，立享会员特权！</i>
              <ul class="opt_buy clear-both">
                <li>
                  <div class="to_buy">
                    <p class="tag_yh">限时优惠</p>
                    <p class="buy_month">1月</p>
                    <p class="buy_price"><span>￥</span>399</p>
                    <a href="">购买</a>
                    <!-- <del>666</del> -->
                  </div>
                </li>
                <li>
                  <div class="to_buy">
                    <p class="buy_month">3月</p>
                    <p class="buy_price"><span>￥</span>998</p>
                    <del>1197</del>
                    <a href="">购买</a>
                  </div>
                </li>
                <li>
                  <div class="to_buy">
                    <p class="buy_month">6月</p>
                    <p class="buy_price"><span>￥</span>1197</p>
                    <del>￥1288</del>
                    <a href="">购买</a>
                  </div>
                </li>
                <li>
                  <div class="to_buy">
                    <p class="tag_yh">限时优惠</p>
                    <p class="buy_month">一年</p>
                    <p class="buy_price"><span>￥</span>399</p>
                    <del>￥3688</del>
                    <a href="">购买</a>
                  </div>
                </li>
              </ul>

              <div class="all_buy">
                <div class="to_buy">
                    <p class="tag_yh">4折&nbsp;加送3个月</p>
                    <p class="buy_month">全国年费直通车</p>
                    <p class="buy_price"><span>￥</span>1915/年</p>
                    <del>￥4699</del>
                    <a href="">购买</a>
                    <!-- <del>666</del> -->
                  </div>
              </div>
            </div>
          </div>
           <!-- end：价格套餐 -->

           <!-- 套餐特权 -->
           <div class="priv">
             <h4>工程项目信息专属会员特权</h4>
             <ul>
               <li>
                 <p>免费查看工程信息</p>
                 <span>免费查看工程信息</span>
               </li>
               <li>
                 <p>特享精准人脉网</p>
                 <span>通过熟人认识工程负责人</span>
               </li>
               <li>
                 <p>优秀供应商</p>
                 <span>成为优秀供应商</span>
               </li>
               <li>
                 <p>平台推荐</p>
                 <span>通过平台推荐</span>
               </li>
               <li>
                 <p>会员专属名片</p>
                 <span>免费查看工程信息</span>
               </li>
             </ul>
           </div>
           <!-- end：套餐特权 -->

           <!-- 会员说明 -->
            <div class="explain">
              <p>会员说明：</p>
              <ul>
                <li>·&nbsp;会员一经开通不支持退款；</li>
                <li>·&nbsp;购买会员后立即生效</li>
                <li>·&nbsp;购买问题请联系客服：0755-26921213</li>
              </ul>
            </div>
           <!-- end:会员说明 -->

        </div>
        <!-- end:招投标会员 -->
        
        <!-- 工程项目会员 -->
        <div class="vip_item vip_gcxm">
         <div class="vip_card">
            <h4>招投标专属会员</h4>
            <div>
              <p><i>·&nbsp;到期时间</i><span>2019-05-20 13：14</span></p>
            </div>
            <a href="#" class="pay_more">续费</a>
          </div>

          <!-- 添加地区 -->
          <div class="options">
            <div class="op_area">
              <h3>选择业务地区</h3>
              <ul>
                <li class="all">全国</li>
                <!-- 全国和省份不能共存，此处展示样式。默认全国。 -->
                <li>北京<i></i></li>
                <li class="add add_area">+&nbsp;添加</li>
              </ul>
            </div>
          </div>
           <!-- end：添加地区 -->

          <!-- 价格套餐 -->
          <div class="options">
            <div class="opt_price">
              <h3>工程项目信息专属会员套餐<br></h3>
              <i>开通会员，立享会员特权！</i>
              <ul class="opt_buy clear-both">
                <li>
                  <div class="to_buy">
                    <p class="tag_yh">限时优惠</p>
                    <p class="buy_month">1月</p>
                    <p class="buy_price"><span>￥</span>399</p>
                    <a href="">购买</a>
                    <!-- <del>666</del> -->
                  </div>
                </li>
                <li>
                  <div class="to_buy">
                    <p class="buy_month">3月</p>
                    <p class="buy_price"><span>￥</span>998</p>
                    <del>1197</del>
                    <a href="">购买</a>
                  </div>
                </li>
                <li>
                  <div class="to_buy">
                    <p class="buy_month">6月</p>
                    <p class="buy_price"><span>￥</span>1197</p>
                    <del>￥1288</del>
                    <a href="">购买</a>
                  </div>
                </li>
                <li>
                  <div class="to_buy">
                    <p class="tag_yh">限时优惠</p>
                    <p class="buy_month">一年</p>
                    <p class="buy_price"><span>￥</span>399</p>
                    <del>￥3688</del>
                    <a href="">购买</a>
                  </div>
                </li>
              </ul>
            </div>
          </div>
           <!-- end：价格套餐 -->

           <!-- 套餐特权 -->
           <div class="priv">
             <h4>工程项目信息专属会员特权</h4>
             <ul>
               <li>
                 <p>免费查看工程信息</p>
                 <span>免费查看工程信息</span>
               </li>
               <li>
                 <p>特享精准人脉网</p>
                 <span>通过熟人认识工程负责人</span>
               </li>
               <li>
                 <p>优秀供应商</p>
                 <span>成为优秀供应商</span>
               </li>
               <li>
                 <p>平台推荐</p>
                 <span>通过平台推荐</span>
               </li>
               <li>
                 <p>会员专属名片</p>
                 <span>免费查看工程信息</span>
               </li>
             </ul>
           </div>
           <!-- end：套餐特权 -->

           <!-- 会员说明 -->
            <div class="explain">
              <p>会员说明：</p>
              <ul>
                <li>·&nbsp;会员一经开通不支持退款；</li>
                <li>·&nbsp;购买会员后立即生效</li>
                <li>·&nbsp;购买问题请联系客服：0755-26921213</li>
              </ul>
            </div>
           <!-- end:会员说明 -->


        </div>
        <!-- end:工程项目会员 -->

      </div>
    </div>
    <!-- end:会员详情切换 -->
    
    
    
  </div>

</template>


<script>
import '~/assets/new.scss' // 引入
import '~/static/css/style.css' // 引入toBuy
import tit from '~/components/titles.vue'

export default {
  data() {
    return {
      current: '0', // 表示当前的第一个
      name:'我的会员',
      navs:[
        { text:'招投标专属会员' },
        { text:'工程项目信息专属会员' },
      ]
     
    }
  },
  methods:{
    addClass: function(index){
      this.current=index;   // 不能要引号
    }
  },
  components:{
    tit
  }
}
</script>

<style>
body{
  background-color: #fff!important;
}
html{
  background-color: #fff;
}
.vip_nav p.active{
  font-size: 1.6rem;
  font-weight: bold;
  color: #fff;
  position: relative;
  transition: .1s;
}
.vip_nav p.active::after{
    content: '';
    display: block;
    position: absolute;
    width:2rem;
    height: 0.4rem;
    border-radius: 5rem;
    bottom: 0;
    left: 50%;
    margin-left: -1rem;
    background-color: #765d45;
    z-index: 10;
}
</style>