Merge branch 'master' of https://gitee.com/zc_gcb/gcb

assets/a.scss

@@ -1,6 +1,6 @@
 @charset "utf-8";
 //font 
-$table:150px*0.5;
+$table:98px*0.5;
 $a    :0.5;
 $z1   :10;
 $z2   :50;
@@ -23,7 +23,7 @@ body {
         height          : $table;
         margin          : 0;
         background-color: #fff;
-        padding-top     : 15px;
+        padding     : 5px 0;
         z-index         : 10000;
         max-width       : 500px;
 
@@ -68,13 +68,14 @@ body {
                 height         : 100%;
                 display        : inline-block;
                 text-align     : center;
-                background-size: 30px !important;
+                background-size: 22px !important;
                 background     : no-repeat center top;
-
+                background-position: center 2px;
                 span {
-                    margin-top: 33px;
+                    margin-top: 24px;
                     display   : inline-block;
                     color     : rgba(175, 175, 175, 1);
+                    font-size: 10px;
                 }
 
             }
@@ -97,7 +98,7 @@ body {
     .search {
         width     : 100%;
         height    : 44px;
-        padding   : 7px 17px;
+        padding   : 6px 17px;
         background: #fff;
         text-align: center;
 
@@ -110,7 +111,7 @@ body {
             background-image   : url(../static/img/search.png);
             background-repeat  : no-repeat;
             background-position: 15px center;
-            background-size    : 20px;
+            background-size    : 16px;
             padding-left       : 40px;
             color              : rgba(153, 153, 153, 1);
             outline            : none;
@@ -141,7 +142,7 @@ body {
 
             h2 {
                 height     : 31px*$a;
-                font-size  : 32px*$a;
+                font-size  : 36px*$a;
                 font-family: PingFang-SC-Bold;
                 font-weight: bold;
                 color      : rgba(32, 32, 32, 1);
@@ -150,7 +151,7 @@ body {
 
             .p1 {
                 margin     : 20px*$a 0;
-                font-size  : 26px*$a;
+                font-size  : 28px*$a;
                 font-family: PingFang-SC-Medium;
                 font-weight: 500;
                 color      : rgba(122, 122, 122, 1);
@@ -169,7 +170,7 @@ body {
 
         background   : rgba(242, 242, 250, 1);
         border-radius: 4px;
-        font-size    : 22px*$a;
+        font-size    : 24px*$a;
         font-family  : PingFang-SC-Regular;
         font-weight  : 400;
         color        : rgba(108, 116, 122, 1);
@@ -177,7 +178,7 @@ body {
     }
 
     .time {
-        color: rgba(122, 122, 122, 1);
+        color: #afafaf;
     }
 
     * {
@@ -222,7 +223,7 @@ $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722;
         background-color: #fff;
         padding         : 20px 0;
         width           : 100%;
-        max-height      : 311px;
+        max-height      : 360px;
 
         >p {
             margin-bottom: 20px;
@@ -236,12 +237,14 @@ $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722;
         .auto {
 
             overflow-x: scroll;
-
+            border-top: .5px solid #f0f0f0;
+            border-bottom: .5px solid #f0f0f0;
             ul {
-                padding   : 15px;
+                text-align: center;
+                padding: 20px 0;
                 overflow-x: auto;
                 width     : 390px;
-                border-top: .5px solid #afafaf;
+                // border-top: .5px solid #afafaf;
 
                 li {
                     width       : 107px;
@@ -256,7 +259,7 @@ $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722;
                         text-align   : center;
                         display      : inline-block;
                         background   : rgba(255, 255, 255, 1);
-                        border       : 2px solid rgba(255, 92, 86, 1);
+                        border       : 2px solid #f0f0f0;
                         border-radius: 16px;
                         color        : red;
 
@@ -302,9 +305,8 @@ $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722;
         }
 
         .confirm {
-            border-top: .5px solid rgba(175, 175, 175, 1);
-            ;
-            padding: 15px 15px 0 15px;
+           
+            padding: 20px 15px 0 15px;
             width  : 100%;
 
             button {
@@ -349,12 +351,12 @@ $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722;
     }
 
     img:last-child {
-        margin-left: 5px;
+        margin-left: 10px;
     }
 
     span {
         display     : inline-block;
-        width       : calc(100% - 76px);
+        width       : calc(100% - 80px);
         padding-left: 40px;
         font-size   : 18px;
         font-family : PingFang-SC-Bold;
@@ -366,12 +368,24 @@ $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;
+                // margin-right: -1.5rem;
+                padding-right: 1.5rem;
+                background-color: #f0f0f0;
+            }
             .title {
                 font-size  : 16px;
                 font-family: PingFang-SC-Medium;
@@ -380,7 +394,7 @@ $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722;
             }
 
             .name {
-                font-size    : 26px*0.5;
+                font-size    : 28px*0.5;
                 font-family  : PingFang-SC-Medium;
                 font-weight  : 500;
                 color        : rgba(175, 175, 175, 1);
@@ -398,7 +412,7 @@ $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722;
 
     button {
         width      : 100%;
-        height     : 5rem;
+        height     : 50px;
         position   : absolute;
         bottom     : 0;
         left       : 0;

assets/details.scss

@@ -11,7 +11,7 @@
 
     .name {
         margin       : 20px 15px 13px;
-        height       : 347px*0.5;
+        // height       : 347px*0.5;
         background   : rgba(255, 255, 255, 1);
         box-shadow   : 0px 4px 16px 0px rgba(0, 0, 0, 0.05);
         border-radius: 4px;
@@ -23,6 +23,7 @@
                 font-family: PingFang-SC-Bold;
                 font-weight: bold;
                 color      : rgba(32, 32, 32, 1);
+                margin-bottom: 15px;
             }
 
             span {
@@ -36,8 +37,8 @@
             .time {
                 background-image: url(../static/img/time.png);
                 display         : block;
-                height          : 30px;
-                line-height     : 30px;
+                height          : 36px;
+                line-height     : 36px;
                 @extend .bor;
                 margin-bottom: 10px;
             }
@@ -100,7 +101,7 @@
 
             .img {
                 border-radius: 0px 0px 10px 0px;
-                background   : rgba(255, 186, 186, 1);
+                background   : #ffd6d6;
                 width        : 118px*0.5+10px;
                 height       : 24px;
                 line-height  : 26px;

assets/new.scss

@@ -30,10 +30,10 @@ $f0f0f0:#f0f0f0;
     .user_info{
       padding: 1rem 0.5rem;
       padding-left: 2rem;
-      padding-top: 6rem;
+      padding-top: 5rem;
       h2{
-          width: 6rem;
-          height: 6rem;
+          width: 7.2rem;
+          height: 7.2rem;
           border-radius: 50%;
           float: left;
           margin-right: 1rem;
@@ -47,6 +47,7 @@ $f0f0f0:#f0f0f0;
           float: left;
         //   display:flex;
           align-items:center;
+          margin-top: 10px;
           p{
               display: block;
               color: #fff;
@@ -62,10 +63,10 @@ $f0f0f0:#f0f0f0;
         margin: 0 1.5rem;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
         background-color: #fff;
-        height: 6rem;
-        line-height: 6rem;
+        height: 7.2rem;
+        line-height: 7.2rem;
         position: relative;
-        margin-top: 1rem;
+        margin-top: 2rem;
         p{
             color: #d4ae5b;
             font-size: 1.8rem;
@@ -288,7 +289,7 @@ $f0f0f0:#f0f0f0;
     // 会员切换
     .vip_content{
         position: absolute;
-        top: 6.4rem;
+        top: 10rem;
         width: 100%;
         height: auto;
         .slide_box{
@@ -705,7 +706,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/payment.vue

@@ -7,7 +7,7 @@
       </p>
       <div class="auto">
         <ul>
-          <li class="discount">
+          <li class="discount active">
             <p>
               <span>
                 <i>￥</i>5
@@ -66,4 +66,9 @@ export default {
   },
   watch: {}
 }
-</script>
+</script>
+<style>
+  .payment .auto .active p{
+    border-color: #ff5c5c;
+  }
+</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>