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 class="account_content">
      <div class="slide_box">
        <!-- 工程项目账户内容 -->
        <div class="account_item account_ztb">
          <div class="account_card">
            <!-- 到期时间 -->
            <div>
              <h4 @click="a">工程项目专属账户</h4>
              <p>
                <i>·&nbsp;到期时间</i>
                <span>2019-05-20 13：14</span>
              </p>
              <nuxt-link to="" class="pay_more">续费</nuxt-link>
            </div>

            <!-- 购买条数 -->
            <div>
              <p>
                <i>·&nbsp;可看条数</i>
                <span>5/30</span>条
              </p>
              <nuxt-link to="" class="pay_more">续费</nuxt-link>
            </div>
          </div>
          <!-- 实名认证引导 -->
          <div class="shiming">
            <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="">全部明细</nuxt-link>
            </div>
             <ul class="detail_list">
               <li count_item>
                 <nuxt-link to="/">
                    购买<span>1</span>条信息
                    <i>2019-05-20 13:14</i>
                 </nuxt-link>
               </li>
               <li count_item>
                 <nuxt-link to="/">
                    购买<span>时间</span>6个月
                    <i>2019-05-20 13:14</i>
                 </nuxt-link>
               </li>
               <li count_item>
                 <nuxt-link to="/">
                    续签<span>1</span>年
                    <i>2019-05-20 13:14</i>
                 </nuxt-link>
               </li>
               <li count_item>
                 <nuxt-link to="/">
                    购买<span>1</span>条信息
                    <i>2019-05-20 13:14</i>
                 </nuxt-link>
               </li>
               <li count_item>
                 <nuxt-link to="/">
                    购买<span>1</span>条信息
                    <i>2019-05-20 13:14</i>
                 </nuxt-link>
               </li>
             </ul>
          </div>
          <!-- end：明细 -->
        </div>
        <!-- end：工程项目账户内容 -->

        <!-- 招投标账户内容 -->
        <div class="account_item account_ztb">
          <div class="account_card">
            <!-- 到期时间 -->
            <div>
              <h4 @click="a">招投标专属账户</h4>
              <p>
                <!-- <i>·&nbsp;到期时间</i> -->
                <span>立即成为会员</span>
              </p>
              <nuxt-link to="" class="pay_more">立即开通</nuxt-link>
            </div>
          </div>
          <!-- 实名认证引导 -->
          <div class="shiming">
            <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="">全部明细</nuxt-link>
            </div>
             <ul class="detail_list">
               <li count_item>
                 <nuxt-link to="/">
                    购买<span>1</span>条信息
                    <i>2019-05-20 13:14</i>
                 </nuxt-link>
               </li>
               <li count_item>
                 <nuxt-link to="/">
                    购买<span>时间</span>6个月
                    <i>2019-05-20 13:14</i>
                 </nuxt-link>
               </li>
               <li count_item>
                 <nuxt-link to="/">
                    续签<span>1</span>年
                    <i>2019-05-20 13:14</i>
                 </nuxt-link>
               </li>
               <li count_item>
                 <nuxt-link to="/">
                    购买<span>1</span>条信息
                    <i>2019-05-20 13:14</i>
                 </nuxt-link>
               </li>
               <li count_item>
                 <nuxt-link to="/">
                    购买<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 sel from '~/components/select.vue' // 引入
import tit from '~/components/titles.vue' // 引入

export default {
  components: {
    tit,
    sel
  },
  data() {
    return {
      current: '0',
      head: '账户明细',
      name:"我的账户",
      navs: [{ text: '招投标账户' }, { text: '工程项目信息账户' }]
    }
  },
  created() {
    global.head = this.head
  },
  methods: {
    addClass: function(index) {
      this.current = index
    },
    a: function() {
      this.head='564546465'
    }
  }
}
</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>