滑动

pages/me/myAccount.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page_account">
-    <tit :tname="name" />
+    <tit :tname="name"/>
     <!-- 顶部nav切换 -->
     <div class="account_nav">
       <p
@@ -13,10 +13,10 @@
     <!-- end:顶部nav切换 -->
 
     <!-- 账户内容切换 -->
-    <div class="account_content">
-      <div class="slide_box">
+    <div v-swiper:mySwiper="swiperOption" class="account_content swiper-container">
+      <div class="slide_box swiper-wrapper">
         <!-- 工程项目账户内容 -->
-        <div class="account_item account_ztb">
+        <div class="account_item account_ztb swiper-slide">
           <div class="account_card">
             <!-- 到期时间 -->
             <div>
@@ -47,54 +47,59 @@
           <!-- 明细 -->
           <div class="account_detail">
             <!-- <tit :heads="head" />
-            <nuxt-link to=""></nuxt-link> -->
+            <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>
+            <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">
+        <div class="account_item account_ztb swiper-slide">
           <div class="account_card">
             <!-- 到期时间 -->
             <div>
-              <h4 @click="a">招投标专属账户</h4>
+              <h4 @click="a">招投标专属ss账户</h4>
               <p>
                 <!-- <i>·&nbsp;到期时间</i> -->
                 <span>立即成为会员</span>
@@ -112,48 +117,52 @@
           <!-- 明细 -->
           <div class="account_detail">
             <!-- <tit :heads="head" />
-            <nuxt-link to=""></nuxt-link> -->
+            <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>
+            <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：账户内容切换 -->
@@ -175,26 +184,45 @@ export default {
     return {
       current: '0',
       head: '账户明细',
-      name:"我的账户",
-      navs: [{ text: '招投标账户' }, { text: '工程项目信息账户' }]
+      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'
+      this.head = '564546465'
     },
     // 跳转实名认证
-    toIendtity:function(){
+    toIendtity: function() {
       this.$router.push({
-        path:'myIdentity'
+        path: 'myIdentity'
       })
     }
+  },
+  watch: {
+    mySwiper: function(e) {
+      console.log(e)
+    }
   }
 }
 </script>