求购列表及报价框

assets/scss/mobileCommon.scss

@@ -190,6 +190,11 @@ input {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
+  outline: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  border: none;
 }
 
 /*loading优先级*/
@@ -200,3 +205,36 @@ input {
 .mobile-content {
   padding-top: .88rem !important;
 }
+
+/*求购title*/
+.seek-title {
+  height: .96rem;
+  line-height: .96rem;
+  text-align: center;
+  position: relative;
+  border-bottom: .04rem solid rgb(219, 219, 219);
+  > img {
+    width: .36rem;
+    height: .38rem;
+    margin-right: .16rem;
+    vertical-align: middle;
+    margin-bottom: .16rem;
+  }
+  > span {
+    font-size: .35rem;
+    color: #666;
+  }
+  > a {
+    position: absolute;
+    right: .1rem;
+    top: 0;
+    font-size: .24rem;
+    color: #999;
+    margin-right: .1rem;
+    img {
+      width: .25rem;
+      height: .25rem;
+      margin-bottom: .04rem;
+    }
+  }
+}

components/mobile/Home.vue

@@ -1,288 +1,106 @@
 <template>
   <div class="home">
-    <div class="mobile-modal" v-if="showStoreInfo">
-      <div class="mobile-modal-box">
-        <div class="mobile-modal-header">联系方式<i @click="showStoreInfo = false" class="icon-guanbi iconfont"></i></div>
-        <div class="mobile-modal-content">
-          <div>商家地址：深圳市南山区英唐大厦6楼</div>
-         <!-- <div class="content-line link-url">在线咨询</div>-->
-          <div>致电：<a href="tel:4008301818" target="_blank" class="content-line link-url">4008301818</a></div>
-          <div>邮件：<a href="mailto:yrsc@usoftchina.com" target="_blank" class="content-line link-url">yrsc@usoftchina.com</a></div>
-        </div>
-      </div>
+    <div class="header">
+      <input type="text" placeholder="请输入您要查找的型号或品牌">
+      <span>
+        <i class="iconfont icon-sousuo"></i>
+      </span>
+      <img src="/images/mobile/@2x/applyPurchase/home/phone.png" alt="">
     </div>
-    <div v-if="!showMainSearch">
-      <div class="home-header" :style="'background:url(' + bgUrl + ')no-repeat center center/100% 6.14rem'">
-        <!--<a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>-->
-        <div class="home-search">
-          <!--<ul>-->
-          <!--<li :class="activeType=='model'?'active':''" @click="activeType='model'"><span>型号</span></li>-->
-          <!--<li :class="activeType=='brand'?'active':''" @click="activeType='brand'"><span>品牌</span></li>-->
-          <!--<li :class="activeType=='shops'?'active':''" @click="activeType='shops'"><span>商家</span></li>-->
-          <!--</ul>-->
-          <div class="home-input">
-            <input type="text" placeholder="请输入您要查找的型号或品牌"
-                   @click="onHomeSearchClick()"/>
-            <i class="iconfont icon-sousuo"></i>
-          </div>
-          <!--<p style="color:#e45803;line-height:.4rem;margin-top:.1rem;width:4.2rem;margin-left:1rem;">搜品牌、搜现货 、搜好店 、搜规格书 就上优软商城</p>-->
-        </div>
-      </div>
-      <div class="home-main">
-        <nuxt-link to="/mobile/shop" class="home-main-content">
-          <div>
-            <img src="/images/mobile/@2x/home/shopbrand@2x.png">
-          </div>
-          <p>店铺列表</p>
-        </nuxt-link>
-        <nuxt-link to="/mobile/brand/brandCenter/ABCD" class="home-main-content">
-          <div>
-            <!--<i class="icon-pinpai iconfont"></i>-->
-            <img src="/images/mobile/@2x/home/brand@2x.png" alt="">
-          </div>
-          <!--<h2>
-            {{numbrand[0]}}
-          </h2>-->
-          <p>品牌列表</p>
-        </nuxt-link>
-        <a @click="goCollect" class="home-main-content">
-          <div>
-            <img src="/images/mobile/@2x/home/storebrand@2x.png">
-          </div>
-          <p>我的收藏</p>
+    <ul class="link-list">
+      <li>
+        <a href="">
+          <img src="/images/mobile/@2x/applyPurchase/home/shop.png" alt="">
+          <span>店铺列表</span>
         </a>
-        <a @click="showStoreInfo = true" class="home-main-content">
-          <div>
-            <img src="/images/mobile/@2x/home/phonebrand@2x.png">
-          </div>
-          <p>联系我们</p>
+      </li>
+      <li>
+        <a href="">
+          <img src="/images/mobile/@2x/applyPurchase/home/brand.png" alt="">
+          <span>品牌列表</span>
         </a>
-        <!--<a class="home-main-content">
-          <div>
-            <i class="icon-xinghao iconfont"></i>
-          </div>
-          <h2>
-            {{numbrand[1]}}
-          </h2>
-          <p>型号</p>
+      </li>
+      <li>
+        <a href="">
+          <img src="/images/mobile/@2x/applyPurchase/home/seek.png" alt="">
+          <span>求购询价</span>
         </a>
-        <a class="home-main-content">
-          <div>
-            <i class="icon-biaoguigeshuomingshu iconfont"></i>
-          </div>
-          <h2>
-            {{numbrand[2]}}
-          </h2>
-          <p>规格书</p>
-        </a>-->
-      </div>
+      </li>
+    </ul>
+    <div class="seek-title">
+      <img src="/images/mobile/@2x/applyPurchase/home/seek-title.png" alt="">
+      <span>最新求购信息</span>
+      <nuxt-link to="/mobile/applyPurchase/list">查看更多 <img src="/images/mobile/@2x/applyPurchase/home/arrow-right.png" alt=""></nuxt-link>
     </div>
-    <main-search v-else @cancelSearchAction="onCancelSearch"></main-search>
-    <login-box @onLoginBoxClose="showLoginBox = false" v-if="showLoginBox"></login-box>
+    <seek-list></seek-list>
   </div>
 </template>
-
 <script>
-  import MainSearch from '~/components/mobile/search/MainSearch.vue'
-  import {LoginBox} from '~components/mobile/common'
+  import SeekList from './applyPurchase/SeekList.vue'
   export default {
-    name: 'home',
-    data () {
-      return {
-        activeType: 'model',
-        showMainSearch: false,
-        showStoreInfo: false,
-        isMore: false,
-        isShow: false,
-        len: 0,
-        bgUrl: '/images/mobile/@2x/home/background@2x.png',
-        showLoginBox: false
-      }
-    },
     components: {
-      MainSearch,
-      LoginBox
-    },
-    methods: {
-      onHomeSearchClick () {
-        this.showMainSearch = true
-        this.$store.dispatch('searchData/getSearchHistory')
-      },
-      matNumber (num) {
-        if (num > 99999999) {
-          this.isShow = true
-          let str2 = num.toString()
-          num = Math.floor(num / 100000000)
-          if (parseInt(str2.charAt(str2.length - 8)) > 8) {
-            num = num + 1
-          }
-          num += '亿'
-        }
-        if (num > 9999) {
-          this.isMore = true
-          let str = num.toString()
-          num = Math.floor(num / 10000)
-          if (parseInt(str.charAt(str.length - 4)) > 4) {
-            num = num + 1
-          }
-          num += '万'
-        } else {
-          num += '个'
-        }
-        return num
-      },
-      forNum (numbers) {
-        let num = []
-        for (let i = 0; i < numbers.length; i++) {
-          num.push(this.matNumber(numbers[i].count))
-        }
-        return num
-      },
-      onCancelSearch: function () {
-        this.showMainSearch = false
-      },
-      goCollect: function () {
-        if (this.user.logged) {
-          this.$router.push('/mobile/user')
-        } else {
-          this.showLoginBox = true
-        }
-      },
-      goLastPage: function () {
-        window.history.back(-1)
-      }
-    },
-    computed: {
-      numbrand () {
-        return this.forNum(this.counts)
-      },
-      counts () {
-        return this.$store.state.product.common.counts.data
-      },
-      user () {
-        return this.$store.state.option.user
-      }
+      SeekList
     }
   }
 </script>
-
 <style lang="scss" scoped>
-  .home{
-    font-size: .28rem;
-    background: #f7fbff;
-    position: fixed;
-    top: 0;
-    bottom: .98rem;
-    width: 100%;
-    overflow-y: auto;
-    .home-header{
-      width:100%;
-      height:6.12rem;
-      >a{
-        font-size:.28rem;
-        color:#fff;
-        position: absolute;
-        left: .1rem;
-        top: .2rem;
-        i{
-          font-size: .48rem;
-          margin-right: -.1rem;
-          color: #666;
+  .home {
+    padding-bottom: 1rem;
+    .header {
+      background: url('/images/mobile/@2x/applyPurchase/home/home-bg.png') no-repeat;
+      background-size: cover;
+      height: 3.26rem;
+      input {
+        width: 6.48rem;
+        height: .58rem;
+        border-radius: .14rem;
+        margin: .15rem 0 0 .11rem;
+        font-size: .23rem;
+        padding: 0 0 0 .21rem;
+      }
+      span {
+        display: inline-block;
+        height: .46rem;
+        line-height: .46rem;
+        width: .68rem;
+        color: #376ff3;
+        border-left: .04rem solid #376ff3;
+        margin-left: -.68rem;
+        text-align: center;
+        vertical-align: middle;
+        margin-bottom: .08rem;
+        i {
+          font-size: .3rem;
         }
       }
-      .home-search{
-        width:6rem;
-        line-height: .3rem;
-        margin:0 auto;
+      img {
+        width: .44rem;
+        height: .44rem;
+        float: right;
+        margin-right: .2rem;
+        margin-top: .2rem;
+      }
+    }
+    .link-list {
+      background: #f3f3f7;
+      height: 1.36rem;
+      li {
+        display: inline-block;
+        width: 33.3%;
         text-align: center;
-        padding-top: 1.74rem;
-        ul{
-          display:inline-flex;
-        li{
-          flex:1;
-          text-align:center;
-          >span{
-             display:inline-block;
-             width:.72rem;
-             line-height:.33rem;
-             height:.33rem;
-             background: #fff;
-             color:#000;
-             border-radius: .05rem .05rem 0 0 ;
-           }
-          }
-          li.active span{
-              background: #3c7cf5;
-              color:#fff;
-              cursor:pointer;
-          }
+        float: left;
+        height: 1.36rem;
+        img {
+          width: .63rem;
+          margin-top: .2rem;
         }
-        .home-input{
-          width: 6rem;
-          input{
-            width:5.17rem;
-            display: inline-block;
-            padding: 0 1rem 0 .16rem;
-            margin-right:-.83rem;
-            font-size:.24rem;
-            border:.04rem solid #3c7cf5;
-            border-radius:.05rem;
-            height: .68rem;
-          }
-          i{
-             display:inline-block;
-             text-align: center;
-             width:.83rem;
-             font-size:.33rem;
-             border-left:none;
-             color: #999;
-            vertical-align: middle;
-          }
+        span {
+          font-size: .22rem;
+          color: #666;
+          display: block;
+          margin-top: .15rem;
         }
       }
     }
-    }
-    .home-main{
-      text-align: center;
-      padding-top: .46rem;
-    }
-    .home-main a.home-main-content {
-      width:50%;
-      margin-bottom:.52rem;
-      display: inline-block;
-    }
-    .home-main .home-main-content div{
-      border-radius: .2rem;
-      width:1.14rem;
-      height:1.14rem;
-      margin:0 auto;
-    }
-    .home-main .home-main-content div>img{
-      width: 100%;
-      height:100%;
-    }
-  .home-main .home-main-content div>i {
-    font-size: .8rem;
-  }
-  .home-main .home-main-content:nth-child(3) div>i {
-    color: #ff3064;
-  }
-  /*.home-main .home-main-content:nth-child(5) div>i {
-    color: #fa6743;
   }
-  .home-main .home-main-content:nth-child(6) div>i {
-    color: #fcb836;
-  }*/
-    .home-main .home-main-content p{
-      font-size:.28rem;
-      color:rgb(51,51,51);
-      line-height: .52rem;
-    }
-    .home-main .home-main-content h2{
-      font-size:.3rem;
-      color:#ff7800;
-      line-height: .32rem;
-      margin:0;
-      margin-top:.1rem;
-    }
 </style>

components/mobile/HomeOld.vue

@@ -0,0 +1,288 @@
+<template>
+  <div class="home">
+    <div class="mobile-modal" v-if="showStoreInfo">
+      <div class="mobile-modal-box">
+        <div class="mobile-modal-header">联系方式<i @click="showStoreInfo = false" class="icon-guanbi iconfont"></i></div>
+        <div class="mobile-modal-content">
+          <div>商家地址：深圳市南山区英唐大厦6楼</div>
+         <!-- <div class="content-line link-url">在线咨询</div>-->
+          <div>致电：<a href="tel:4008301818" target="_blank" class="content-line link-url">4008301818</a></div>
+          <div>邮件：<a href="mailto:yrsc@usoftchina.com" target="_blank" class="content-line link-url">yrsc@usoftchina.com</a></div>
+        </div>
+      </div>
+    </div>
+    <div v-if="!showMainSearch">
+      <div class="home-header" :style="'background:url(' + bgUrl + ')no-repeat center center/100% 6.14rem'">
+        <!--<a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>-->
+        <div class="home-search">
+          <!--<ul>-->
+          <!--<li :class="activeType=='model'?'active':''" @click="activeType='model'"><span>型号</span></li>-->
+          <!--<li :class="activeType=='brand'?'active':''" @click="activeType='brand'"><span>品牌</span></li>-->
+          <!--<li :class="activeType=='shops'?'active':''" @click="activeType='shops'"><span>商家</span></li>-->
+          <!--</ul>-->
+          <div class="home-input">
+            <input type="text" placeholder="请输入您要查找的型号或品牌"
+                   @click="onHomeSearchClick()"/>
+            <i class="iconfont icon-sousuo"></i>
+          </div>
+          <!--<p style="color:#e45803;line-height:.4rem;margin-top:.1rem;width:4.2rem;margin-left:1rem;">搜品牌、搜现货 、搜好店 、搜规格书 就上优软商城</p>-->
+        </div>
+      </div>
+      <div class="home-main">
+        <nuxt-link to="/mobile/shop" class="home-main-content">
+          <div>
+            <img src="/images/mobile/@2x/home/shopbrand@2x.png">
+          </div>
+          <p>店铺列表</p>
+        </nuxt-link>
+        <nuxt-link to="/mobile/brand/brandCenter/ABCD" class="home-main-content">
+          <div>
+            <!--<i class="icon-pinpai iconfont"></i>-->
+            <img src="/images/mobile/@2x/home/brand@2x.png" alt="">
+          </div>
+          <!--<h2>
+            {{numbrand[0]}}
+          </h2>-->
+          <p>品牌列表</p>
+        </nuxt-link>
+        <a @click="goCollect" class="home-main-content">
+          <div>
+            <img src="/images/mobile/@2x/home/storebrand@2x.png">
+          </div>
+          <p>我的收藏</p>
+        </a>
+        <a @click="showStoreInfo = true" class="home-main-content">
+          <div>
+            <img src="/images/mobile/@2x/home/phonebrand@2x.png">
+          </div>
+          <p>联系我们</p>
+        </a>
+        <!--<a class="home-main-content">
+          <div>
+            <i class="icon-xinghao iconfont"></i>
+          </div>
+          <h2>
+            {{numbrand[1]}}
+          </h2>
+          <p>型号</p>
+        </a>
+        <a class="home-main-content">
+          <div>
+            <i class="icon-biaoguigeshuomingshu iconfont"></i>
+          </div>
+          <h2>
+            {{numbrand[2]}}
+          </h2>
+          <p>规格书</p>
+        </a>-->
+      </div>
+    </div>
+    <main-search v-else @cancelSearchAction="onCancelSearch"></main-search>
+    <login-box @onLoginBoxClose="showLoginBox = false" v-if="showLoginBox"></login-box>
+  </div>
+</template>
+
+<script>
+  import MainSearch from '~/components/mobile/search/MainSearch.vue'
+  import {LoginBox} from '~components/mobile/common'
+  export default {
+    name: 'home',
+    data () {
+      return {
+        activeType: 'model',
+        showMainSearch: false,
+        showStoreInfo: false,
+        isMore: false,
+        isShow: false,
+        len: 0,
+        bgUrl: '/images/mobile/@2x/home/background@2x.png',
+        showLoginBox: false
+      }
+    },
+    components: {
+      MainSearch,
+      LoginBox
+    },
+    methods: {
+      onHomeSearchClick () {
+        this.showMainSearch = true
+        this.$store.dispatch('searchData/getSearchHistory')
+      },
+      matNumber (num) {
+        if (num > 99999999) {
+          this.isShow = true
+          let str2 = num.toString()
+          num = Math.floor(num / 100000000)
+          if (parseInt(str2.charAt(str2.length - 8)) > 8) {
+            num = num + 1
+          }
+          num += '亿'
+        }
+        if (num > 9999) {
+          this.isMore = true
+          let str = num.toString()
+          num = Math.floor(num / 10000)
+          if (parseInt(str.charAt(str.length - 4)) > 4) {
+            num = num + 1
+          }
+          num += '万'
+        } else {
+          num += '个'
+        }
+        return num
+      },
+      forNum (numbers) {
+        let num = []
+        for (let i = 0; i < numbers.length; i++) {
+          num.push(this.matNumber(numbers[i].count))
+        }
+        return num
+      },
+      onCancelSearch: function () {
+        this.showMainSearch = false
+      },
+      goCollect: function () {
+        if (this.user.logged) {
+          this.$router.push('/mobile/user')
+        } else {
+          this.showLoginBox = true
+        }
+      },
+      goLastPage: function () {
+        window.history.back(-1)
+      }
+    },
+    computed: {
+      numbrand () {
+        return this.forNum(this.counts)
+      },
+      counts () {
+        return this.$store.state.product.common.counts.data
+      },
+      user () {
+        return this.$store.state.option.user
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .home{
+    font-size: .28rem;
+    background: #f7fbff;
+    position: fixed;
+    top: 0;
+    bottom: .98rem;
+    width: 100%;
+    overflow-y: auto;
+    .home-header{
+      width:100%;
+      height:6.12rem;
+      >a{
+        font-size:.28rem;
+        color:#fff;
+        position: absolute;
+        left: .1rem;
+        top: .2rem;
+        i{
+          font-size: .48rem;
+          margin-right: -.1rem;
+          color: #666;
+        }
+      }
+      .home-search{
+        width:6rem;
+        line-height: .3rem;
+        margin:0 auto;
+        text-align: center;
+        padding-top: 1.74rem;
+        ul{
+          display:inline-flex;
+        li{
+          flex:1;
+          text-align:center;
+          >span{
+             display:inline-block;
+             width:.72rem;
+             line-height:.33rem;
+             height:.33rem;
+             background: #fff;
+             color:#000;
+             border-radius: .05rem .05rem 0 0 ;
+           }
+          }
+          li.active span{
+              background: #3c7cf5;
+              color:#fff;
+              cursor:pointer;
+          }
+        }
+        .home-input{
+          width: 6rem;
+          input{
+            width:5.17rem;
+            display: inline-block;
+            padding: 0 1rem 0 .16rem;
+            margin-right:-.83rem;
+            font-size:.24rem;
+            border:.04rem solid #3c7cf5;
+            border-radius:.05rem;
+            height: .68rem;
+          }
+          i{
+             display:inline-block;
+             text-align: center;
+             width:.83rem;
+             font-size:.33rem;
+             border-left:none;
+             color: #999;
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+    }
+    .home-main{
+      text-align: center;
+      padding-top: .46rem;
+    }
+    .home-main a.home-main-content {
+      width:50%;
+      margin-bottom:.52rem;
+      display: inline-block;
+    }
+    .home-main .home-main-content div{
+      border-radius: .2rem;
+      width:1.14rem;
+      height:1.14rem;
+      margin:0 auto;
+    }
+    .home-main .home-main-content div>img{
+      width: 100%;
+      height:100%;
+    }
+  .home-main .home-main-content div>i {
+    font-size: .8rem;
+  }
+  .home-main .home-main-content:nth-child(3) div>i {
+    color: #ff3064;
+  }
+  /*.home-main .home-main-content:nth-child(5) div>i {
+    color: #fa6743;
+  }
+  .home-main .home-main-content:nth-child(6) div>i {
+    color: #fcb836;
+  }*/
+    .home-main .home-main-content p{
+      font-size:.28rem;
+      color:rgb(51,51,51);
+      line-height: .52rem;
+    }
+    .home-main .home-main-content h2{
+      font-size:.3rem;
+      color:#ff7800;
+      line-height: .32rem;
+      margin:0;
+      margin-top:.1rem;
+    }
+</style>

components/mobile/MobileFooter.vue

@@ -5,10 +5,16 @@
         <i :class="activeType=='home'?'iconfont icon-shouye':'iconfont icon-shouye1'"></i><p>首页</p>
       </nuxt-link>
     </span>
-    <span :class="activeType=='shops'?'active':''">
+    <!--<span :class="activeType=='shops'?'active':''">
       <nuxt-link to="/mobile/shop">
         <i :class="activeType=='shops'?'iconfont icon-dianpu':'iconfont icon-dianpu1'"></i><p>店铺</p>
       </nuxt-link>
+    </span>-->
+    <span class="seek">
+      <a>
+        <img src="/images/mobile/@2x/applyPurchase/home/seek-footer.png" alt="">
+        <p>发布求购</p>
+      </a>
     </span>
     <span :class="activeType=='user'?'active':''">
       <a @click="goCollect">
@@ -17,6 +23,38 @@
     </span>
     <a @click="toTop" v-show="!hideToTop"><i class="iconfont icon-arrow-up icon-xlg"></i></a>
     <login-box @onLoginBoxClose="showLoginBox = false" v-if="showLoginBox"></login-box>
+    <div class="mobile-modal">
+      <div class="mobile-modal-box">
+        <div class="mobile-modal-header">发布求购<i class="icon-guanbi iconfont"></i></div>
+        <div class="publish-seek">
+          <div class="content-line">
+            <span><i>*</i>型号：</span>
+            <input type="text" placeholder="请勿填中文符号">
+          </div>
+          <div class="content-line">
+            <span><i>*</i>品牌：</span>
+            <input type="text" placeholder="请勿填中文符号">
+          </div>
+          <div class="content-line">
+            <span><i>*</i>截止日期：</span>
+            <input type="text" placeholder="请勿填中文符号">
+          </div>
+          <div class="content-line">
+            <span>币种：</span>
+            <a href="">RMB </a>
+          </div>
+          <div class="content-line">
+            <span>数量：</span>
+            <input type="text">
+          </div>
+          <div class="content-line">
+            <span>规格：</span>
+            <input type="text">
+          </div>
+          <a>确认发布</a>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -68,7 +106,7 @@
     }
   }
 </script>
-<style scoped>
+<style scoped lang="scss">
   .mobile-footer{
     position:fixed;
     bottom:0;
@@ -79,29 +117,29 @@
     background: #ffffff;
     z-index: 10;
   }
-  .mobile-footer span{
+  .mobile-footer > span{
     display: inline-block;
-    width: 2.5rem;
+    width: 2rem;
     font-size:.32rem;
     color:#b0b0b0;
     padding-top:.1rem;
   }
 
-  .mobile-footer span a{
+  .mobile-footer > span a{
     color:#b0b0b0;
   }
 
-  .mobile-footer span a i{
+  .mobile-footer > span a i{
     font-size:.45rem;
   }
-  .mobile-footer span a p{
+  .mobile-footer > span a p{
     font-size:.22rem;
   }
 
-  .mobile-footer span.active a{
+  .mobile-footer > span.active a{
     color:#3976f4;
   }
-  .mobile-footer >a {
+  .mobile-footer > a {
     position: absolute;
     right: .1rem;
     top: -1rem;
@@ -115,4 +153,59 @@
   .mobile-footer >a i{
     font-size: .46rem;
   }
+  .mobile-footer > span.seek {
+    width: 3.5rem;
+    position: relative;
+  }
+  .mobile-footer > span.seek img {
+    position: absolute;
+    width: 1.3rem;
+    height: 1.3rem;
+    top: -1.3rem;
+    right: 1.1rem;
+  }
+  .mobile-modal {
+    .mobile-modal-box {
+      .publish-seek {
+        background: #fff;
+        padding-top: .1rem;
+        padding-bottom: .4rem;
+        .content-line {
+          height: .8rem;
+          line-height: .8rem;
+          font-size: .26rem;
+          text-align: left;
+          border-bottom: .01rem solid #b7d5fe;
+          input {
+            width: 3.49rem;
+            height: .52rem;
+            padding-left: .19rem;
+            border: .01rem solid #7e7e7e;
+          }
+          span {
+            display: inline-block;
+            width: 1.76rem;
+            text-align: right;
+            i {
+              color: #ff0000;
+              margin-right: .05rem;
+              font-style: normal;
+            }
+          }
+        }
+        > a {
+          display: block;
+          width: 5.19rem;
+          height: .84rem;
+          text-align: center;
+          line-height: .84rem;
+          font-size: .38rem;
+          margin: .3rem auto 0;
+          background: #3f84f6;
+          color: #fff;
+          border-radius: .08rem;
+        }
+      }
+    }
+  }
 </style>

components/mobile/applyPurchase/SeekList.vue

@@ -0,0 +1,148 @@
+<template>
+  <ul class="seek-list">
+    <li>
+      <p><span>深圳市英唐数码有限公司</span></p>
+      <div>
+        <div class="fl">
+          <div>
+            品牌：<span>asjkfahksf</span>
+          </div>
+          <div>
+            型号：<span>asjkfahksf</span>
+          </div>
+          <div>
+            规格：<span>asjkfahksf</span>
+          </div>
+          <div>
+            截止日期：<span class="date">2018-02-03</span>
+          </div>
+        </div>
+        <div class="fr">
+          <p>剩余：<span>04</span>小时</p>
+          <a href="">我要报价</a>
+        </div>
+      </div>
+    </li>
+    <li>
+      <p><span>深圳市英唐数码有限公司</span></p>
+      <div>
+        <div class="fl">
+          <div>
+            品牌：<span>asjkfahksf</span>
+          </div>
+          <div>
+            型号：<span>asjkfahksf</span>
+          </div>
+          <div>
+            规格：<span>asjkfahksf</span>
+          </div>
+          <div>
+            截止日期：<span class="date">2018-02-03</span>
+          </div>
+        </div>
+        <div class="fr">
+          <p>剩余：<span>04</span>小时</p>
+          <a href="">我要报价</a>
+        </div>
+      </div>
+    </li>
+    <li>
+      <p><span>深圳市英唐数码有限公司</span></p>
+      <div>
+        <div class="fl">
+          <div>
+            品牌：<span>asjkfahksf</span>
+          </div>
+          <div>
+            型号：<span>asjkfahksf</span>
+          </div>
+          <div>
+            规格：<span>asjkfahksf</span>
+          </div>
+          <div>
+            截止日期：<span class="date">2018-02-03</span>
+          </div>
+        </div>
+        <div class="fr">
+          <p>剩余：<span>04</span>小时</p>
+          <a href="">我要报价</a>
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
+<style lang="scss" scoped>
+  .seek-list {
+    width: 7.26rem;
+    margin: .13rem auto 0;
+
+    li {
+      border: .04rem solid #e0e0e4;
+      height: 3.32rem;
+      margin-bottom: .2rem;
+
+      >
+      p {
+        font-size: .32rem;
+        color: #3a3a3a;
+        background: #f8f7fa;
+        height: .92rem;
+        line-height: .92rem;
+
+        span {
+          display: block;
+          width: 6.9rem;
+          border-bottom: .04rem dashed #9f9f9f;
+          margin: 0 auto;
+        }
+
+      }
+      >
+      div {
+        font-size: .3rem;
+        display: inline-block;
+
+        .fl {
+          color: #666;
+          width: 4.8rem;
+          height: 1.74rem;
+          margin: .27rem 0 .29rem .18rem;
+          line-height: .46rem;
+          border-right: .04rem dashed #9f9f9f;
+
+          span {
+            color: #333;
+          }
+
+        }
+        .fr {
+          width: 2.2rem;
+          padding: .66rem 0 0 .2rem;
+
+          p {
+            font-size: .28rem;
+
+            span {
+              font-size: .35rem;
+              color: #ff3208;
+            }
+
+          }
+          a {
+            display: block;
+            width: 1.64rem;
+            height: .58rem;
+            line-height: .58rem;
+            text-align: center;
+            font-size: .32rem;
+            color: #e62f36;
+            border: .01rem solid #ea494f;
+            margin-top: .34rem;
+            border-radius: .06rem;
+          }
+
+        }
+      }
+    }
+  }
+</style>

pages/mobile/applyPurchase/list/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="mobile-content">
+    <div class="seek-title">
+      <img src="/images/mobile/@2x/applyPurchase/home/seek-title.png" alt="">
+      <span>最新求购信息</span>
+    </div>
+    <seek-list></seek-list>
+  </div>
+</template>
+<script>
+  import SeekList from '~components/mobile/applyPurchase/SeekList.vue'
+  export default {
+    layout: 'mobile',
+    components: {
+      SeekList
+    }
+  }
+</script>