标题

assets/a.scss

@@ -362,12 +362,23 @@ $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722;
 .sub {
     .add {
         padding-left: 15px;
-        border-top  : 1px solid #7a7a7a;
-
+        border-top  : 1px solid #f0f0f0;
         li {
-            border-bottom: 1px solid #7a7a7a;
-            padding      : 35px*0.5 0;
-
+            padding: 35px*0.5 0;
+            position: relative;
+            &::after{
+                position: absolute;
+                content: '';
+                display: block;
+                width: 100%;
+                height: 1px;
+                left: 0;
+                bottom: 0;
+                right: 0;
+                margin-left: 1.5rem;
+                padding-right: 1.5rem;
+                background-color: #f0f0f0;
+            }
             .title {
                 font-size  : 16px;
                 font-family: PingFang-SC-Medium;

assets/new.scss

@@ -288,7 +288,7 @@ $f0f0f0:#f0f0f0;
     // 会员切换
     .vip_content{
         position: absolute;
-        top: 6.4rem;
+        top: 10rem;
         width: 100%;
         height: auto;
         .slide_box{
@@ -705,7 +705,7 @@ $f0f0f0:#f0f0f0;
     // 账号内容切换
     .account_content{
         position: absolute;
-        top: 6.4rem;
+        top: 10rem;
         width: 100%;
         height: auto;
         .slide_box{

components/payChoose.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="pay_choose">
+    
+  </div>
+</template>
+<script>
+export default{
+ 
+}
+</script>
+  
+<style>
+
+</style>

components/titles.vue

@@ -2,13 +2,19 @@
   <section class="head">
     <img src="~/static/img/back.png" alt @click="go">
     <span>{{tname}}</span>
+    <!-- <nuxt-link :to="tolink">{{todos}}</nuxt-link> -->
   </section>
 </template>
 <script>
 export default {
   props: {
     tname: String, //定义传值的类型<br>
-    required: true
+    // todos: String, //定义传值的类型<br>
+    // tolink   这里有多个值，最好做成数组
+    
+  },
+  mounted(){
+    // 所有数据铺完了。。。忘记了
   },
   methods: {
     go(e) {
@@ -18,7 +24,10 @@ export default {
   watch: {}
 }
 </script>
-<style>
+<style  scoped lang="scss">
+.head {
+  background-color: #fff;
+}
 .head img {
   float: left;
   padding-left: 6px;
@@ -28,4 +37,7 @@ export default {
   padding: 0;
   padding-right: 20px;
 }
+.head a{
+  float: right;
+}
 </style>

pages/me/chooseArea.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="chooseArea">
+    <areaone/>
+  </div>
+  <!-- 最外的盒子 -->
+</template>
+
+
+<script>
+import '~/assets/new.scss' // 引入
+import '~/static/css/style.css' // 引入
+import areaone from '~/components/areaSelect.vue'
+
+export default {
+ components:{
+   areaone
+ }
+}
+</script>
+
+<style>
+body {
+  background-color: #fff!important;
+}
+.page_detail_list{
+  padding: 0 1.5rem;
+}
+</style>

pages/me/chooseIndustry.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="choose_industry">
+    <industry/>
+  </div>
+  <!-- 最外的盒子 -->
+</template>
+
+
+<script>
+import '~/assets/new.scss' // 引入
+import '~/static/css/style.css' // 引入
+import industry from '~/components/industrySelect.vue'
+
+export default {
+ components:{
+   industry
+ }
+}
+</script>
+
+<style>
+body {
+  background-color: #fff!important;
+}
+
+</style>

pages/me/detailList.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="page_detail_list">
+
+    <!-- 明细 -->
+    <div class="account_detail">
+       <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>
+         <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>
+         <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>
+  <!-- 最外的盒子 -->
+</template>
+
+
+<script>
+import '~/assets/new.scss' // 引入
+import '~/static/css/style.css' // 引入
+
+export default {
+ 
+}
+</script>
+
+<style>
+body {
+  background-color: #fff !important;
+}
+.page_detail_list{
+  padding: 0 1.5rem;
+}
+</style>

pages/me/identity.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="page_identity">
+    <tit :tname="name"/>
+    <!-- 填写表单 -->
+    <form action="" class="" >
+      <!-- 基本资料 -->
+      <div class="info_basic ">
+        <div class="item_form clear_both">
+          <label for="" class="">姓名</label>
+          <div class="form_input">
+            <input type="text" placeholder="请输入姓名">
+          </div>
+        </div>
+
+        <div class="item_form clear_both">
+          <label for="" class="">手机号</label>
+          <div class="form_input">
+            <input type="tel" placeholder="请输入手机号">
+          </div>
+        </div>
+
+        <div class="item_form clear_both">
+          <label for="" class="">公司</label>
+          <div class="form_input">
+            <input type="text" placeholder="请输入公司名">
+          </div>
+        </div>
+
+        <div class="item_form clear_both">
+          <label for="" class="">职位</label>
+          <div class="form_input">
+            <input type="text" placeholder="请输入职位">
+          </div>
+        </div>
+      </div>
+      <!-- end：基本资料 -->
+
+      <!-- 上传名片 -->
+      <div class="img_upload">
+        <div class="upload_box">
+          <input type="file" accept="image/*" id="camera" capture="camera">
+        </div>
+         <p class="require">请上传证明材料<br><span>请保证能材料清晰，能清晰识别</span></p>
+        
+      </div>
+       <p class="notice">身份认证后能获得发布资源权限，以及优质合作。</p>
+      <!-- end：上传名片 -->
+
+     <but/>
+    </form>
+    <!-- end:填写表单 -->
+    
+    
+  </div>
+
+</template>
+
+
+<script>
+import '~/assets/new.scss' // 引入
+import '~/static/css/style.css' // 引入
+import but from '~/components/btnSubmit.vue'
+import tit from '~/components/titles.vue'
+
+export default {
+  data(){
+    return{
+      name:'实名认证'
+    }
+  },
+  components: {
+      but,tit
+    },
+}
+</script>
+
+<style>
+input::-webkit-input-placeholder{
+    color:#a9a9a9;
+}
+input::-moz-placeholder{   
+  /* Mozilla Firefox 19+ */
+    color:#a9a9a9;
+}
+input:-moz-placeholder{   
+   /* Mozilla Firefox 4 to 18 */
+    color:#a9a9a9;
+}
+input:-ms-input-placeholder{  
+  /* Internet Explorer 10-11 */ 
+  color:#a9a9a9;}
+</style>

pages/me/index.vue

@@ -16,10 +16,12 @@
 
       <div class="verify">
         <p>VIP会员尊享</p>
-        <a href="#" class="grad">立即开通</a>
+        <nuxt-link to="/me/myVip" class="grad">立即开通</nuxt-link>
       </div>
       <div class="real_name">
-        <p class="list_item">实名认证</p>
+        <nuxt-link to="/me/identity">
+          <p class="list_item">实名认证</p>
+        </nuxt-link>
       </div>
     </div>
     <!-- end:顶部个人消息结束 -->
@@ -27,27 +29,29 @@
     <!-- 带单列表 -->
     <ul class="menu-list">
       <li>
-        <a href="#"></a>
+        
+       <nuxt-link to="/me/myVip"> </nuxt-link>
         <img src="../../static/img/img_head.png" alt="">
         <p class="list_item">我的会员</p>
+       
       </li>
       <li>
-        <a href="#"></a>
+       <nuxt-link to="/me/myAccount"></nuxt-link>
          <img src="../../static/img/hide.png" alt="">
         <p class="list_item">我的账户</p>
       </li>
       <li>
-        <a href="#"></a>
+       <nuxt-link to="/me/myPurchase"></nuxt-link>
          <img src="../../static/img/img_head.png" alt="">
         <p class="list_item">我的购买</p>
       </li>
       <li>
-        <a href="#"></a>
+       <nuxt-link to="/me/myCollection"></nuxt-link>
          <img src="../../static/img/img_head.png" alt="">
         <p class="list_item">我的收藏</p>
       </li>
       <li>
-        <a href="#"></a>
+       <nuxt-link to="/me/myFollow"></nuxt-link>
          <img src="../../static/img/img_head.png" alt="">
         <p class="list_item">我的记录</p>
       </li>
@@ -56,7 +60,7 @@
     <!-- 带单列表 -->
     <ul class="menu-list">
       <li>
-        <a href="#"></a>
+       <nuxt-link to=""></nuxt-link>
         <img src="../../static/img/icon_V.png" alt="">
         <p class="list_item">退出登录</p>
       </li>
@@ -85,7 +89,7 @@ html{
 body{
   padding: 0;
   padding-bottom: 6rem;
-  background-color: #f8f9fa
+  background-color: #f8f9fa!important;
 }
 .page_me{
   padding-bottom: 6rem;

pages/me/myAccount.vue

@@ -0,0 +1,223 @@
+<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>

pages/me/myCollection.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="my_purchase">
+    <tit :tname="name" />
+    <mesrarch/>
+    <ul class="bidlist">
+      <li>
+        <h2>喷口内径测量规招标公告</h2>
+        <p class="p1">
+          喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+          平台。招标信息概览占位占位占位占位，占位占位。招标信息
+          概览占位占位占位占位，占位占位。
+        </p>
+        <p class="p2">
+          <span class="label">2000万</span>
+          <span class="time">2019-05-20</span>
+        </p>
+      </li>
+      <li>
+        <h2>喷口内径测量规招标公告</h2>
+        <p class="p1">
+          喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+          平台。招标信息概览占位占位占位占位，占位占位。招标信息
+          概览占位占位占位占位，占位占位。
+        </p>
+        <p class="p2">
+          <span class="label">2000万</span>
+          <span class="time">2019-05-20</span>
+        </p>
+      </li>
+      <li>
+        <h2>喷口内径测量规招标公告</h2>
+        <p class="p1">
+          喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+          平台。招标信息概览占位占位占位占位，占位占位。招标信息
+          概览占位占位占位占位，占位占位。
+        </p>
+        <p class="p2">
+          <span class="label">2000万</span>
+          <span class="time">2019-05-20</span>
+        </p>
+      </li>
+      <li>
+        <h2>喷口内径测量规招标公告</h2>
+        <p class="p1">
+          喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+          平台。招标信息概览占位占位占位占位，占位占位。招标信息
+          概览占位占位占位占位，占位占位。
+        </p>
+        <p class="p2">
+          <span class="label">2000万</span>
+          <span class="time">2019-05-20</span>
+        </p>
+      </li>
+      <li>
+        <h2>喷口内径测量规招标公告</h2>
+        <p class="p1">
+          喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+          平台。招标信息概览占位占位占位占位，占位占位。招标信息
+          概览占位占位占位占位，占位占位。
+        </p>
+        <p class="p2">
+          <span class="label">2000万</span>
+          <span class="time">2019-05-20</span>
+        </p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+
+<script>
+import '~/assets/new.scss' // 引入
+import '~/static/css/style.css' // 引入
+import mesrarch from '~/components/meSearch.vue'
+import tit from '~/components/titles.vue'
+
+
+export default {
+  data(){
+    return{
+      name:'我的关注'
+    }
+  },
+  components:{
+    mesrarch,tit
+  }
+}
+</script>
+
+<style>
+body {
+  background-color: #fff !important;
+}
+
+</style>

pages/me/myFollow.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="my_purchase">
+    <tit :tname="name" />
+    <mesrarch/>
+    <ul class="bidlist">
+      <li>
+        <h2>喷口内径测量规招标公告</h2>
+        <p class="p1">
+          喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+          平台。招标信息概览占位占位占位占位，占位占位。招标信息
+          概览占位占位占位占位，占位占位。
+        </p>
+        <p class="p2">
+          <span class="label">2000万</span>
+          <span class="time">2019-05-20</span>
+        </p>
+      </li>
+      <li>
+        <h2>喷口内径测量规招标公告</h2>
+        <p class="p1">
+          喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+          平台。招标信息概览占位占位占位占位，占位占位。招标信息
+          概览占位占位占位占位，占位占位。
+        </p>
+        <p class="p2">
+          <span class="label">2000万</span>
+          <span class="time">2019-05-20</span>
+        </p>
+      </li>
+      <li>
+        <h2>喷口内径测量规招标公告</h2>
+        <p class="p1">
+          喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+          平台。招标信息概览占位占位占位占位，占位占位。招标信息
+          概览占位占位占位占位，占位占位。
+        </p>
+        <p class="p2">
+          <span class="label">2000万</span>
+          <span class="time">2019-05-20</span>
+        </p>
+      </li>
+      <li>
+        <h2>喷口内径测量规招标公告</h2>
+        <p class="p1">
+          喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+          平台。招标信息概览占位占位占位占位，占位占位。招标信息
+          概览占位占位占位占位，占位占位。
+        </p>
+        <p class="p2">
+          <span class="label">2000万</span>
+          <span class="time">2019-05-20</span>
+        </p>
+      </li>
+      <li>
+        <h2>喷口内径测量规招标公告</h2>
+        <p class="p1">
+          喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+          平台。招标信息概览占位占位占位占位，占位占位。招标信息
+          概览占位占位占位占位，占位占位。
+        </p>
+        <p class="p2">
+          <span class="label">2000万</span>
+          <span class="time">2019-05-20</span>
+        </p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+
+<script>
+import '~/assets/new.scss' // 引入
+import '~/static/css/style.css' // 引入
+import mesrarch from '~/components/meSearch.vue'
+import tit from '~/components/titles.vue'
+
+export default {
+  data(){
+    return{
+      name:'我的关注'
+    }
+  },
+  components:{
+    mesrarch,
+    tit
+  }
+}
+</script>
+
+<style>
+body {
+  background-color: #fff !important;
+}
+
+</style>

pages/me/myIdentity.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="page_identity">
+    <tit :tname="name" />
+    <!-- 填写表单 -->
+    <form action="" class="" >
+      <!-- 基本资料 -->
+      <div class="info_basic ">
+        <div class="item_form clear_both">
+          <label for="" class="">姓名</label>
+          <div class="form_input">
+            <input type="text" placeholder="请输入姓名">
+          </div>
+        </div>
+
+        <div class="item_form clear_both">
+          <label for="" class="">手机号</label>
+          <div class="form_input">
+            <input type="tel" placeholder="请输入手机号">
+          </div>
+        </div>
+
+        <div class="item_form clear_both">
+          <label for="" class="">公司</label>
+          <div class="form_input">
+            <input type="text" placeholder="请输入公司名">
+          </div>
+        </div>
+
+        <div class="item_form clear_both">
+          <label for="" class="">职位</label>
+          <div class="form_input">
+            <input type="text" placeholder="请输入职位">
+          </div>
+        </div>
+      </div>
+      <!-- end：基本资料 -->
+
+      <!-- 上传名片 -->
+      <div class="img_upload">
+         <input type="file" accept="image/*" id="camera" capture="camera">
+         <p class="notice">身份认证后能获得发布资源权限，以及优质合作。</p>
+      </div>
+      <!-- end：上传名片 -->
+    </form>
+    <!-- end:填写表单 -->
+    
+    
+  </div>
+
+</template>
+
+
+<script>
+import '~/assets/new.scss' // 引入
+import '~/static/css/style.css' // 引入
+import tit from '~/components/titles.vue'
+export default {
+  data(){
+    return{
+      name:'实名认证',
+    }
+  }
+}
+</script>
+
+<style>
+input::-webkit-input-placeholder{
+    color:#a9a9a9;
+}
+input::-moz-placeholder{   
+  /* Mozilla Firefox 19+ */
+    color:#a9a9a9;
+}
+input:-moz-placeholder{   
+   /* Mozilla Firefox 4 to 18 */
+    color:#a9a9a9;
+}
+input:-ms-input-placeholder{  
+  /* Internet Explorer 10-11 */ 
+  color:#a9a9a9;}
+</style>

pages/me/myMember.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="page_identity">
+    <tit :tname="name" />
+    <!-- 填写表单 -->
+    <form action="" class="" >
+      <!-- 基本资料 -->
+      <div class="info_basic ">
+        <div class="item_form clear_both">
+          <label for="" class="">姓名</label>
+          <div class="form_input">
+            <input type="text" placeholder="请输入姓名">
+          </div>
+        </div>
+
+        <div class="item_form clear_both">
+          <label for="" class="">手机号</label>
+          <div class="form_input">
+            <input type="tel" placeholder="请输入手机号">
+          </div>
+        </div>
+
+        <div class="item_form clear_both">
+          <label for="" class="">公司</label>
+          <div class="form_input">
+            <input type="text" placeholder="请输入公司名">
+          </div>
+        </div>
+
+        <div class="item_form clear_both">
+          <label for="" class="">职位</label>
+          <div class="form_input">
+            <input type="text" placeholder="请输入职位">
+          </div>
+        </div>
+      </div>
+      <!-- end：基本资料 -->
+
+      <!-- 上传名片 -->
+      <div class="img_upload">
+         <input type="file" accept="image/*" id="camera" capture="camera">
+         <p class="notice">身份认证后能获得发布资源权限，以及优质合作。</p>
+      </div>
+      <!-- end：上传名片 -->
+    </form>
+    <!-- end:填写表单 -->
+    
+    
+  </div>
+
+</template>
+
+
+<script>
+import '~/assets/new.scss' // 引入
+import '~/static/css/style.css' // 引入
+import tit from '~/components/titles.vue'
+export default {
+  data(){
+    return{
+      name:'实名认证',
+    }
+  }
+}
+</script>
+
+<style>
+input::-webkit-input-placeholder{
+    color:#a9a9a9;
+}
+input::-moz-placeholder{   
+  /* Mozilla Firefox 19+ */
+    color:#a9a9a9;
+}
+input:-moz-placeholder{   
+   /* Mozilla Firefox 4 to 18 */
+    color:#a9a9a9;
+}
+input:-ms-input-placeholder{  
+  /* Internet Explorer 10-11 */ 
+  color:#a9a9a9;}
+</style>

pages/me/myPurchase.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="my_purchase">
+    <tit :tname="name" />
+    <mesrarch/>
+    <ul class="bidlist">
+      <li>
+        <h2>喷口内径测量规招标公告</h2>
+        <p class="p1">
+          喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+          平台。招标信息概览占位占位占位占位，占位占位。招标信息
+          概览占位占位占位占位，占位占位。
+        </p>
+        <p class="p2">
+          <span class="label">2000万</span>
+          <span class="time">2019-05-20</span>
+        </p>
+      </li>
+      <li>
+        <h2>喷口内径测量规招标公告</h2>
+        <p class="p1">
+          喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+          平台。招标信息概览占位占位占位占位，占位占位。招标信息
+          概览占位占位占位占位，占位占位。
+        </p>
+        <p class="p2">
+          <span class="label">2000万</span>
+          <span class="time">2019-05-20</span>
+        </p>
+      </li>
+      <li>
+        <h2>喷口内径测量规招标公告</h2>
+        <p class="p1">
+          喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+          平台。招标信息概览占位占位占位占位，占位占位。招标信息
+          概览占位占位占位占位，占位占位。
+        </p>
+        <p class="p2">
+          <span class="label">2000万</span>
+          <span class="time">2019-05-20</span>
+        </p>
+      </li>
+      <li>
+        <h2>喷口内径测量规招标公告</h2>
+        <p class="p1">
+          喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+          平台。招标信息概览占位占位占位占位，占位占位。招标信息
+          概览占位占位占位占位，占位占位。
+        </p>
+        <p class="p2">
+          <span class="label">2000万</span>
+          <span class="time">2019-05-20</span>
+        </p>
+      </li>
+      <li>
+        <h2>喷口内径测量规招标公告</h2>
+        <p class="p1">
+          喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+          平台。招标信息概览占位占位占位占位，占位占位。招标信息
+          概览占位占位占位占位，占位占位。
+        </p>
+        <p class="p2">
+          <span class="label">2000万</span>
+          <span class="time">2019-05-20</span>
+        </p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+
+<script>
+import '~/assets/new.scss' // 引入
+import '~/static/css/style.css' // 引入
+import mesrarch from '~/components/meSearch.vue'
+import tit from '~/components/titles.vue'
+
+
+export default {
+  data(){
+    return{
+      name:'我的购买'
+    }
+  },
+  components:{
+    mesrarch,tit
+  }
+}
+</script>
+
+<style>
+body {
+  background-color: #fff !important;
+}
+
+</style>

pages/me/myVip.vue

@@ -0,0 +1,328 @@
+<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>

pages/me/oneDetail.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="one_detail">
+    <div class="detail_money">
+      <p>500.00</p>
+      <span>交易金额</span>
+    </div>
+    <ul class="detail_content">
+      <li>
+        <span>类型</span>
+        <p>支出</p>
+      </li>
+      <li>
+        <span>时间</span>
+        <p>2019-05-20 13:14</p>
+      </li>
+      <li>
+        <span>支付方式</span>
+        <p>微信支付</p>
+      </li>
+      <li>
+        <span>交易单号</span>
+        <p>zc23466514564515665645</p>
+      </li>
+      <li>
+        <span>项目</span>
+        <p>招投标项目信息</p>
+      </li>
+    </ul>
+  </div>
+ 
+</template>
+
+
+<script>
+import '~/assets/new.scss' // 引入
+import '~/static/css/style.css' // 引入
+
+export default {
+ 
+}
+</script>
+
+<style>
+body {
+  background-color: #fff !important;
+}
+.page_detail_list{
+  padding: 0 1.5rem;
+}
+</style>