gcb_zc/pages/me/myAccount.vue

<template>
  <div class="page_account">
    <tit :tname="name"/>
    <!-- 顶部nav切换 -->
    <div class="account_nav">
      <p
        v-for="(item,index) in navs"
        :key="index"
        v-on:click="addClass(index)"
        v-bind:class="{active:index==current}"
      >{{ item.text }}</p>
    </div>
    <!-- end:顶部nav切换 -->

    <!-- 账户内容切换 -->
    <div v-swiper:mySwiper="swiperOption" class="account_content swiper-container">
      <div class="slide_box swiper-wrapper">
        <!-- 工程项目账户内容 -->
        <div class="account_item account_ztb swiper-slide">
          <div class="account_card">
            <!-- 到期时间 -->
            <div>
              <h4 @click="a">工程项目专属账户</h4>
              <p>
                <i>·&nbsp;到期时间</i>
                <span>2019-05-20 13：14</span>
              </p>
              <nuxt-link to="myVip" class="pay_more">续费</nuxt-link>
            </div>

            <!-- 购买条数 -->
            <div>
              <p>
                <i>·&nbsp;可看条数</i>
                <span>5/30</span>条
              </p>
              <nuxt-link to="myVip" class="pay_more">续费</nuxt-link>
            </div>
          </div>
          <!-- 实名认证引导 -->
          <div class="shiming" @click="toIendtity">
            <i>!</i>
            <p>您未完成实名认证</p>
            <span>去实名认证>></span>
          </div>

          <!-- 明细 -->
          <div class="account_detail">
            <!-- <tit :heads="head" />
            <nuxt-link to=""></nuxt-link>-->
            <div class="title_dy">
              <h3>账户明细</h3>
              <nuxt-link to="detailList">全部明细</nuxt-link>
            </div>
            <ul class="detail_list">
              <li count_item>
                <nuxt-link to="oneDetail">
                  购买
                  <span>1</span>条信息
                  <i>2019-05-20 13:14</i>
                </nuxt-link>
              </li>
              <li count_item>
                <nuxt-link to="oneDetail">
                  购买
                  <span>时间</span>6个月
                  <i>2019-05-20 13:14</i>
                </nuxt-link>
              </li>
              <li count_item>
                <nuxt-link to="oneDetail">
                  续签
                  <span>1</span>年
                  <i>2019-05-20 13:14</i>
                </nuxt-link>
              </li>
              <li count_item>
                <nuxt-link to="oneDetail">
                  购买
                  <span>1</span>条信息
                  <i>2019-05-20 13:14</i>
                </nuxt-link>
              </li>
              <li count_item>
                <nuxt-link to="oneDetail">
                  购买
                  <span>1</span>条信息
                  <i>2019-05-20 13:14</i>
                </nuxt-link>
              </li>
            </ul>
          </div>
          <!-- end：明细 -->
        </div>
        <!-- end：工程项目账户内容 -->

        <!-- 招投标账户内容 -->
        <div class="account_item account_ztb swiper-slide">
          <div class="account_card">
            <!-- 到期时间 -->
            <div>
              <h4 @click="a">招投标专属ss账户</h4>
              <p>
                <!-- <i>·&nbsp;到期时间</i> -->
                <span>立即成为会员</span>
              </p>
              <nuxt-link to="myVip" class="pay_more">立即开通</nuxt-link>
            </div>
          </div>
          <!-- 实名认证引导 -->
          <div class="shiming" @click="toIendtity">
            <i>!</i>
            <p>您未完成实名认证</p>
            <span>去实名认证>></span>
          </div>

          <!-- 明细 -->
          <div class="account_detail">
            <!-- <tit :heads="head" />
            <nuxt-link to=""></nuxt-link>-->
            <div class="title_dy">
              <h3>账户明细</h3>
              <nuxt-link to="detailList">全部明细</nuxt-link>
            </div>
            <ul class="detail_list">
              <li count_item>
                <nuxt-link to="oneDetail">
                  购买
                  <span>1</span>条信息
                  <i>2019-05-20 13:14</i>
                </nuxt-link>
              </li>
              <li count_item>
                <nuxt-link to="oneDetail">
                  购买
                  <span>时间</span>6个月
                  <i>2019-05-20 13:14</i>
                </nuxt-link>
              </li>
              <li count_item>
                <nuxt-link to="oneDetail">
                  续签
                  <span>1</span>年
                  <i>2019-05-20 13:14</i>
                </nuxt-link>
              </li>
              <li count_item>
                <nuxt-link to="oneDetail">
                  购买
                  <span>1</span>条信息
                  <i>2019-05-20 13:14</i>
                </nuxt-link>
              </li>
              <li count_item>
                <nuxt-link to="oneDetail">
                  购买
                  <span>1</span>条信息
                  <i>2019-05-20 13:14</i>
                </nuxt-link>
              </li>
            </ul>
          </div>
          <!-- end：明细 -->
        </div>
        <!-- end：招投标账户内容 -->
      </div>
    </div>
    <!-- end：账户内容切换 -->
  </div>
  <!-- 最外的盒子 -->
</template>


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

export default {
  components: {
    tit
  },
  data() {
    return {
      current: '0',
      head: '账户明细',
      name: '我的账户',
      navs: [{ text: '招投标账户' }, { text: '工程项目信息账户' }],
      swiperOption: {
        on: {
          slideChange: () => {
            this.current=this.mySwiper.activeIndex
          },
          tap() {
            console.log('onTap', this)
          }
        }
      }
    }
  },
  created() {
    global.head = this.head
  },
  mounted() {
    //this.mySwiper.slideTo(0, 1000, false)
  },
  methods: {
    addClass: function(index) {
      this.current = index
      this.mySwiper.activeIndex=index
    },
    a: function() {
      this.head = '564546465'
    },
    // 跳转实名认证
    toIendtity: function() {
      this.$router.push({
        path: 'myIdentity'
      })
    }
  },
  watch: {
    mySwiper: function(e) {
      console.log(e)
    }
  }
}
</script>

<style>
body {
  background-color: #fff !important;
}
.account_nav p.active {
  font-size: 1.6rem;
  font-weight: bold;
  color: #ff5c5c;
  position: relative;
  transition: 0.2s;
}

.account_nav p.active::after {
  content: '';
  display: block;
  position: absolute;
  width: 2rem;
  height: 0.4rem;
  border-radius: 20px;
  bottom: 0;
  left: 50%;
  margin-left: -1rem;
  background-color: #ff5c5c;
  z-index: 10;
}
</style>